网设计与制作的具体流程模板.doc

目 录 摘 要2关键词2Abstract2Key Words2一、网页设计标准3（一）明确网站专题3（二）总体设计方案专题鲜明3（三）网页设计形式和内容相统一3二、网页设计和制作具体步骤3（一）网站策划4（二）网页布局版式设计5（三）网页色彩搭配6（四）网站后台设计7三、网页制作工具学习和应用8（一）Dreamweaver8（二）Flash9(三) Photoshop9四、网页优化10（一）网页技术优化11（二）人文优化12参考文件13浅谈网页设计和制作学生姓名：林永俊 学号：5171030美术学院 美术学专业指导老师：张睿 职称：讲师摘 要：伴随中国互联网高速发展，相关网络应用技术将会得到更多应用，做为互联网信息表述和传输基础载体网页也越来越受到大家关注。本文从网页设计要素、标准及相关技巧等对网页设计和制作进行了介绍和说明。经过对网页设计和制作研究,探求符合时代特色网页制作原理和行之有效设计方法,提升网页用户体验和视觉冲击力,增强网站和网民互动，促进企业开展电子商务，信息平台等基础设施，发明更高经济效益。关键词：网页设计；网页制作；色彩搭配Abstract: With the rapid development of Chinas Internet web applications, related technology will get more applications, as Internet information representation and transfer of web based carrier has become the concern of the public. This article from the web page design elements and principles and related skills on web design and production are introduced and illustrated. Through the design and manufacture of web page, which can accord with the special age web production principle and effective design methods, improve web user experience and visual impact, enhance the interaction with Internet website, promote enterprise in developing electronic commerce, information platform and other infrastructure, and create more economic benefits. Key Words: web design；web pages；colour collocation一个成功抓住用户“眼球”并最终带来经济效益网站首先需要一个优异设计，然后加上优异制作。设计是网站关键和灵魂，是一个感性思索和理性分析相结合复杂过程，它方向取决于设计任务，它实现依靠于网页制作。把网页艺术设计和其它艺术设计形式进行比较，尝试从网页艺术设计内容、标准、制作技巧、制作步骤等多个方面对这个新艺术设计领域进行初步归纳总结和理论探讨，网页艺术设计是艺术和技术高度统一。一、网页设计标准（一）明确网站专题优异网页设计肯定服务于网站专题，就是说要建设一个网站，首先需要定位，既要清楚建设网站目标和面向浏览对象，只有定位正确网站才会有可观性和应用性。所以我们必需明确设计站点目标和用户需求，从而做出切实可行设计计划。（二）总体设计方案专题鲜明在目标明确基础上，完成网站构思创意即总体设计方案。对网站整体风格和特色作出定位，计划网站组织结构。做到专题鲜明突出，关键点明确，以简单明确语言和画面表现站点专题；调动一切手段充足表现网站个性和情趣。（三）网页设计形式和内容相统一内容是组成设计一切内在要素总和，是设计存在基础，被称为“设计灵魂”；形式是组成内容诸要素内部结构或内容外部表现方法。为了将丰富意义和多样形式组织成统一页面结构，形式语言必需符合页面内容，表现内容丰富含义。灵活利用对比和调和、对称和平衡、节奏和韵律和留白等手法，经过空间、文字、图形之间相互关系建立整体均衡状态，产生友好美感。如对称标准在页面设计中，它均衡有时会使页面显得呆板，但假如加入部分富有动感文字、图案，或采取夸张手法来表现内容往往会达成比很好效果。 点、线、面作为视觉语言中基础元素，巧妙地相互穿插、相互衬托、相互补充组成最好页面效果，充足表示完美设计意境。一个优异设计肯定是形式对内容完美表现。正如黑格尔所说：“工艺美就不在于要求实用具外部造型、色彩、纹样去摹拟事物，再现现实，而在于使其外部形式传达和表现出一定情绪、气氛、格调、风尚、趣味，使物质经由象征变成相同于精神生活相关环境。”陈鹏，走出艺术哲学迷宫黑格尔美学笔记，文化艺术出版社，第7期，第201页。二、网页设计和制作具体步骤网页设计是一个综合性极强工作，包含到商业策划、平面设计、人机界面、程序语言和数据库等。网页设计从总体上可大致分为策划、前台页面设计和后台三部分，本文关键从AZE设计工作室网站实例来叙述网页设计和制作步骤。（一）网站策划策划是指网站整体定位、功效计划、应用分析、步骤设计和内容架构组织，网站策划是网站平台建设成败关键内容之一。网站策划关键叙述了处理方案能给用户带来什么价值，和经过何种方法去实现这种价值。在策划同时要以人为本，迎合网民需求、找到了市场需求点，才能把整体定位策划做到位。对网站内容功效计划，做到让搜索引擎更多收录和关注，网页打开速度愈加快。经过对AZE设计工作室分析，关键包涵动画设计、网站设计、家装设计、CG培训四个大栏目，明确了网站定位以后分析相关行业和市场特点。经过对相关行业和市场分析，和网站内容和功效分析，计划出此次建设网站关键内容以下：1.进入页flash Flash 页面导入网站不仅生动形象，还会给人印象深刻感觉， flash 页面以四个版块为基准，关键分动画设计、网站建设、墙体彩绘、设计培训。点击任意一个能够直接进入每个小站，含有明确导航性，设置较醒目标进入首页按钮，经过点击它就能够进入网站首页。2.网站首页网站首页是整个网站门户，简练、大方、加载速度快是网站首页关键要素。网站关键计划栏目内容有：首页、业内新闻、动画设计、网站建设、家装设计、CG培训、精品案例、相关我们、服务范围、联络我们。3.新闻动态公布系统最新动态栏目关键用来公布企业新闻，企业动态、最新消息等。经过最新动态栏目可使用户对企业最新发展动态、产品信息、人文文化、最新消息等信息有一个立即了解。此栏目，可让用户在线实时管理、公布新闻、删除新闻、更改等。4.企业留言系统企业留言栏目在设计方面要美观、大方、和网站风格融成一体，更要重视用户体验。网民无需注册，有回复，经过相互直接交流，能够为企业找到潜在用户，和部分市场信息。5.人才招聘现在很多企业全部利用企业网站平台公布招聘信息。这么不仅能够充足利用现有资源，而且相比传统职业服务中心更含有实时性、互动性等优点。（二）网页布局版式设计logo企业公告、人才招聘、网站地图、论坛联络方法/收藏本站首页业内新闻动画设计网站建设墙体彩绘CG培训精品案例相关我们服务范围联络我们网站主幻灯片企业公告动画设计栏目最新资讯帮助中心网页设计栏目企业介绍资源共享墙体手绘栏目友谊链接CG培训栏目网页版权信息图（1） AZE设计工作室首页计划图页面整体布局则是网页设计根基。依据现代网页发展趋势来看，简练、直观、人性化和个性化是网站设计基础要素，所以在做整体布局时候一定要充足考虑到这些要素。网页设计作为一个视觉语言，尤其讲究编排和布局，经过文字图形空间组合编排，表示出友好和美。在AZE网站首页关键版块设计中，我采取了“匡”字型布局，给主内容区释放了更多空间，图(1)（AZE设计工作室网站首页）所表示：页面上部是网页标志和导航条，接下来是网页主幻灯片，左边栏目放友谊链接和网页部分小栏目，中间是网站四个关键内容栏目，右边栏目放新闻更新和企业介绍，网页底部放版权信息。网页内容作为一个版面，既要有文字，又要有图片；文字有大小、标题和正文之分等网页组成画面对比，在网页排版时候充足考虑网站定位，突出表现网站主体内容。AZE设计工作室网站是个多页面站点，页面编排设计要求把页面之间有机联络反应出来，尤其要处理好页面之间和页面内秩序和内容关系。为了达成最好视觉表现效果，设计中应利用各组成部分在内容上内在联络和表现形式上相互呼应，并注意整个页面设计风格一致性，实现视觉上和心理上连贯，使整个页面设计各个部分极为融洽，布局合理，让浏览者有一个流畅视觉体验。（三）网页色彩搭配色彩是艺术表现要素之一。在网页设计中，依据友好、均衡和关键突出标准，将不一样色彩进行组合、搭配来组成符合审美要求页面。依据色彩对大家心理影响，合理地加以利用。不一样颜色也代表着不一样行业诉求。(比如：医院和环境保护部门会选择绿色，而公共事业机构则会选择蓝色等)所以在设计之初要充足考虑该网站性质及访问对象，以此来确定网页色彩搭配形式。当专题色确定好以后，考虑其它配色时，一定要考虑其它配色和专题色关系，要表现什么样效果。“色彩总应用标准是:总体协调，局部对比。网页整体色彩效果应该是友好，只有局部、小范围地方能够有部分强烈色彩对比。”高永子、卢坚、潘星亮著，网页经典配色和设计手册，中国青年出版社，第7期，第56页。在色彩利用上，能够依据主页内容需要，分别采取不一样主色调。色彩还含有显著心理感觉，比如冷、暖感觉，进、退效果等。另外，色彩还有民族性，各个民族因为环境、文化、传统等原因影响，对于色彩喜好也存在着较大差异。充足利用色彩这些特征，能够使我们主页含有深刻艺术内涵，从而提升网页文化品位。AZE设计工作室网站是一个艺术设计类型网站，在色彩利用方面要凸显行业特色同时更要独具特色，经过对网站策划和内容计划，网站关键分四个小站分别表现四个设计行业，在把握好每个小站色彩整体性又要有所区分，动画设计页用蓝紫色调，网站设计页用蓝色调，墙体手绘页用黄绿色调，CG培训页用绿色调，主页采取灰色调把四个小站统一起来。下面是网站设计中用到多个调色方案：单色方案、相同色方案、对比色方案。1.单色方案单色方案是指在网站设计中使用一个基础颜色，为避免单调，能够经过调整这种基础颜色灰度和亮度来得到更多颜色，因为整个颜色方案中实际上只有一个基色，所以这种方案称为单色方案。比如：在Photoshop色彩选择窗口中，我们能够这么进行建立单色方案。首先调整H（也就是Hue缩写）后面值来调整色调。注意，H单位是度，也就是基础颜色在颜色环上所处位置角度。设置好H值以后，再调整B后面数字调整亮度和S后面数字调整饱和度。注意，其中B和S单位是百分比，也就是向基础颜色中添加白色和黑色百分比。这么就能够得到一个单色方案了。2.相同色方案在色彩圆环上选择相互相邻多个颜色组成配色方案就是相同色方案。比如橙色、橙红色和橙黄色就能够组成一个相同色方案。因为相同色方案中包含了多个基色，假如再加上亮度和饱和度改变，能够组成颜色就很多。 相同色配色方案能够给人很协调感觉，所以在网站设计中很常见。经典利用方法就是，用一个颜色作为页面背景，而另外一个在颜色环中和其相邻颜色作为前景色。除了上面介绍绿色和黄色之外，蓝色和绿色和红色和褐色也是比较常见相同色配色方案。3.对比色方案对比色方案即把色性完全相反色彩搭配在同一个空间里。比如：红和绿、黄和紫、橙和蓝等。这种色彩搭配，能够产生强烈视觉效果，给人亮丽、鲜艳、喜庆感觉。当然，对比色调假如用得不好，会适得其反，产生俗气、刺眼不良效果。这就要把握“大调和，小对比”这一个关键标准，即总体色调应该是统一友好，局部地方能够有部分小强烈对比。 （四）网站后台设计后台是指程序设计、数据操作、功效实现、管理界面和管理功效设计等。网站后台设计常常被大家所忽略，好后台能够提升编辑使用效率，同时部分好设计也能降低错误发生，针对“后台用户”这一特殊群体提供部分可行体验优化标准。合理功效设计和友好设计对于效率和差错率均会有很大提升，小小设计可能会起到非凡作用。三、网页制作工具学习和应用（一）DreamweaverDreamweaver是美国MACROMEDIA企业开发集网页制作和管理网站于一身所见即所得网页编辑器，它是第一套针对专业网页设计师尤其发展视觉化网页开发工具，利用它能够轻而易举地制作出跨越平台限制和跨越浏览器限制充满动感网页。1.Dreamweaver优点 最好制作效率 “Dreamweaver提供了以CSS为基础设计和开发提供支持革命性功效，CSS将网页要展示内容和样式设定分开。”王娜著，Dreamweaver网页制作和色彩搭配全攻略，清华大学出版社，第5期，第23页。当要改变网页外观时，只需更改样式设定部分，HTML文件本身并不需要更改。这一功效实现将网页设计提升到新层次。 网站管理 使用网站地图能够快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新全部连结。使用支援文字、HTML码、HTML属性标签和通常语法搜寻及置换功效使得复杂网站更新变得快速又简单。 2.Dreamweaver缺点难以正确达成和浏览器完全一致显示效果。也就是说在所见即所得网页编辑器中制作网页放到浏览器中是极难完全达成您真正想要效果，这一点在结构复杂部分网页（如分帧结构、动态网页结构）中便能够表现出来。 页面原始代码难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得网页编辑器，就不存在这个问题，因为全部HTML代码 全部在您监控下产生，不过因为非所见则所得编辑器先天条件就注定了它工作低效率。怎样实现二者完美结合，则既产生洁净、正确HTML代码，又含有则见则所得高效率、直观性，一直是网页设计师梦想。（二）Flash1.Flash介绍和发展趋势Flash也是由macromedia企业推出交互式矢量图和 Web 动画标准，由Adobe企业收购。网页设计者使用 Flash 创作出既漂亮又可改变尺寸导航界面和其它奇特效果。flash动画好坏是评定一个网站好坏关键影响原因之一，动感绚丽flash动画，能给网站受众以极大视觉冲击力。2.Flash优点Flash一个很关键特点是创建文件体积很小，Flash是完全基于矢量动画处理技术，而矢量图形就是用少许向量数据来描述一个复杂对象，存放时只占很小空间，而且图像质量也很高。Flash使用是插件工作方法，用户只要安装一次插件，以后就能够快速开启并观看动画，而无须像Java那样，每次全部要花费大量时间开启虚拟机。Flash动画采取是“流式”动画播放技术，用户无须等到动画下载完全再去欣赏动画，而是一边下载一边欣赏。 Flash功效还是很广泛。使用内置ActionScript语句结合JavaScript，也能够制作出互动性很强主页来。3.网站应用flash注意事项插件，Flash动画播放需要安装Adodb企业播放插件。假如用户电脑上没有便不能播放动画，而且Flash播放插件版本有很多个，部分低版本并不能播放采取高版本制作flash动画。全Flash网站，对于全Flash网站在seo方面有很多劣势，因为它全部内容，结构全部在flash内部，所以，搜索引擎会全然不知这个网站是什么内容。现在搜索技术并不能识别到Flash里面文本，图片等信息。所以，在baidu、谷歌等搜索引擎中无法识别到Flash到底在表示什么信息，影响网站推广。(三) Photoshop1.Photoshop在网页布局中计划作用布局灵活。Photoshop灵魂是图层，每层能够放置不一样元素，图层之间能够相互链接，也可单独存放，每个图层上图像位置能够随意挪动而不影响其它图层图像位置，每个图层上图像大小、色阶、亮度、饱和度透明度等可单独设置而不影响其它图层上图像。如此灵活功效，完全能够让设计者随心所欲设计而不受任何约束。修改方便。网站建设前期首先要和用户签定协议，签定协议时用户最关心是自己网站是什么样子，这时设计者不可能拿出建好网站给用户演示，这么成本太高，最好措施是拿出在Photoshop中做出效果图给用户看。通常情况下，用户一次满意率很低，总会提出修改意见，而且还会不停地提出修改方案。这时我们就能够利用Photoshop强大功效按用户要求方便地进行修改和优化，直到用户满意为止。加紧浏览进度。一个设计不美观不规范网站是没有生命力，一样一个打开、下载速度慢网站也是没有存在价值。使用Photoshop设计网页经过裁切后体积相对要小得多，相同元素因为其格式改变也会大大提升下载速度，所以Photoshop就成了提升速度，提升点击率制胜法宝。2.photoshop和dreamweaver配合即使效果图是用Photoshop设计，但一定要兼顾到Dreamweaver对页面布局要求，Dreamweaver下网页布局是使用国字形，还是其它模式，是否使用框架，使用框架类型是哪一个，全部是在设计前要考虑到。不然会造成效果图和最终网站布局出现出入，使网页设计过程变得复杂。正确切片，只有经过正确切片后，DreamWeaver才能对效果图进行有效整合，Photoshop在网页布局中主动作用才发挥到了极致。四、网页优化“在网页设计中，网页优化是较为关键一个步骤。”王晓峰、焦燕著，网页设计原理及实战策略，清华大学出版社，第3期，第68页。它成功是否会影响页面浏览速度和页面适应性，影响观者对网站印象。而网页优化工作是由很多方面优化组成，一名优异网页优化工作人员必需含有多方面知识，不仅仅要掌握网站设计制作技术；还要掌握很多计算机其它方面知识(包含电子商务、人机交互、易用性和部分相关软件知识等等)；甚至需要掌握心理学、商业运作等相关知识。我在网页制作优化过程中关键有两个方面：技术优化，人文优化。（一）网页技术优化技术优化关键是对代码优化、目录结构优化和针对搜索引擎优化三个部分。1.代码优化代码优化关键处理问题就是页面浏览速度和适应性问题。文字和图片是组成页面两个关键原因，所以我们优化也要从文字和图片开始。在一个网站汉字字是页面中正确传达信息元素，所以字体优化显得尤为关键。使用css样式表指定文字样式是必需，通常我们将字体指定为宋体，大小指定12px，颜色要视背景色而定，标准上以能看清且和整个页面搭配友好为准。在白色背景上，我们通常使用黑色，这么不易产生视觉疲惫，能确保浏览者较长时间地浏览网页。图片是网页中关键元素。图片优化能够在确保浏览质量前提下将其大小降至最低，这么能够成倍地提升网页下载速度。利用Photoshop能够将图片切成小块，分别进行优化。输出格式能够为gif或jpeg，要视具体情况而定。通常我们把有较为复杂颜色改变小块优化为jpeg，而把那种只有单纯色块卡通画式小块优化为gif，这是由这两种格式特点决定。DIV和表格(table)是页面中关键元素,是页面排版关键手段。我们能够设定DIV和表格宽度、高度、边框、背景色、对齐方法等参数。很多时候，我们将表格边框设为0，以此来定位页面中元素，或借此确定页面中各元素相对位置。“浏览器在读取网页html原代码时，是读完整个table才将它显示出来,我们在设计页面表格时候，应该尽可能避免将全部元素嵌套在一个表格里，而且表格嵌套层次尽可能要少。”何秀芳著，网页制作和网站建设课堂实录，人民邮电出版社，第5期，第73页。所以在网页制作过程中能够采取DIV套表格方法来降低嵌套，提升网页浏览速度。2.目录结构优化目录结构优化关键是对网站文件管理，我提议建立一个大文件夹，里边包含各个频道文件夹、网页页面图片文件夹、网页内容图片文件夹等等一个一个单独类别文件夹，使得在维护时候能够方便找到每一个页面具体位置，提升工作效率。3.针对搜索引擎优化搜索引擎优化是完整优化工作必不可少一个步骤。以例举我对网站关键字优化，“关键字”表现要合理，比如我们能够制作一个“网站导航”页面，网站导航页面会淋漓尽致表现各个关键字，这个页面不仅方便用户使用也会更轻易被搜索引擎找到起到事半功倍作用。伴随搜索引擎全部有了图片搜索功效，网页里边图片也是表现关键词好地方，比如我在页面里边加入图片后给图片起一个“名字”（）给图片名称就能够是关键字。（二）人文优化人文优化关键是交互、易用性和网站表现优化。在网络发展到Web2.0时代，更重视用户交互作用，用户既是网站内容浏览者，也是网站内容制造者。所谓网站内容制造者是说互联网上每一个用户不再仅仅是互联网读者，同时 也成为互联网作者；不再仅仅是在互联网上冲浪，同时也成为波浪制造者；由被动地接收互联网信息向主动发明互联网信息发展。所以网站要想愈加好发展必需做好人文优化这一项目。网页设计和制作是主观和客观共同作用结果，突出表现了艺术和技术紧密结合。网络技术关键表现为客观原因，艺术创意关键表现为主观原因，以专题鲜明、形式和内容相统一、强调整体为设计标准；掌握现有多种网络技术规律，达成网络技术和艺术创意完美结合，才能使网页平面设计扩展到立体设计，给网页浏览者一个很好视觉体验和增加网页互动性，浏览网页每一个用户不再仅仅是网页读者，同时也成为网站作者，在模式上由单纯“读”向“写”和“共同建设”发展。参考文件：1戴一波.Dreamweaver CS3网站制作炫例精讲M.北京：电子工业出版，.2邓文渊.网页制作高手M.北京：人民邮电大学出版，.3何秀芳.网页制作和网站建设课堂实录M.北京：人民邮电出版社，.4李彬彬.设计效果心理评价M.北京:中国轻工出版社，.5李砚祖、芦影.视觉传达历史和美学M.北京：中国人民大学出版社，.6王娜.Dreamweaver网页制作和色彩搭配全攻略M. 北京：清华大学出版社，.7王晓峰、焦燕.网页设计原理及实战策略M.北京:清华大学出版社，. 8徐珂、苗彤、赵晖.网页视觉和设计M.北京：人民邮电出版社，.9许凌云、柳勇良.网页设计全方位学习M.北京：清华大学出版社，.10张国良.传输学原理M.上海:复旦大学出版社，.11张涛、葛海霞.网页制作实用标准教程M.天津:南开大学出版社，.12赵国志.色彩组成M.沈阳:辽宁美术出版社，1994.13赵殿泽.组成艺术M.沈阳:辽宁美术出版社，1994.14周宏敏、高翔、朱敬新世纪Dreamweaver MX 应用培训教程M.北京：电子工业出版社，.15Scot Johson etal.using Active Server PageJ.Que (3).16David Hunter etal，Beginning XMLJ.Wrox Press Ltd，(2).