浅谈网页的设计与制作(网站策划)

《浅谈网页的设计与制作(网站策划)》由会员分享，可在线阅读，更多相关《浅谈网页的设计与制作(网站策划)（13页珍藏版）》请在装配图网上搜索。

1、目 录 摘 要2关键词2Abstract2Key Words2一、网页设计的原则3（一）明确网站主题3（二）总体设计方案主题鲜明3（三）网页设计形式与内容相统一3二、网页设计与制作的具体流程3（一）网站策划4（二）网页布局版式设计5（三）网页色彩搭配6（四）网站后台设计7三、网页制作工具的学习与应用8（一）Dreamweaver8（二）Flash9(三) Photoshop9四、网页优化10（一）网页技术优化11（二）人文优化12参考文献13浅谈网页的设计与制作学生姓名：林永俊 学号：20075171030美术学院 美术学专业指导教师：张睿 职称：讲师摘 要：随着中国互联网的高速发展，相关的网

2、络应用技术将会得到更多的应用，做为互联网信息表述和传递基础载体的网页也越来越受到人们的关注。本文从网页设计的要素、原则及相关技巧等对网页设计与制作进行了介绍和说明。通过对网页的设计与制作的研究,探求符合时代特色的网页制作原理和行之有效的设计方法,提高网页的用户体验和视觉冲击力,增强网站与网民的互动，促进企业开展电子商务，信息平台等基础设施，创造更高的经济效益。关键词：网页设计；网页制作；色彩搭配Abstract: With the rapid development of Chinas Internet web applications, related technology will get

3、 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 manu

4、facture 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 infrast

5、ructure, and create more economic benefits. Key Words: web design；web pages；colour collocation一个成功抓住用户“眼球”并最终带来经济效益的网站首先需要一个优秀的设计，然后加上优秀的制作。设计是网站的核心和灵魂，是一个感性思考与理性分析相结合的复杂的过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。把网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的内容、原则、制作技巧、制作流程等几个方面对这个新的艺术设计领域进行初步的归纳总结和理论探讨，网页艺术设计是艺术与技术的高度统一。一、网页设

6、计的原则（一）明确网站主题优秀的网页设计必然服务于网站的主题，就是说要建设一个网站，首先需要定位，既要清楚建设网站的目的和面向浏览的对象，只有定位准确的网站才会有可观性和应用性。因此我们必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。（二）总体设计方案主题鲜明在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。做到主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题；调动一切手段充分表现网站的个性和情趣。（三）网页设计形式与内容相统一内容是构成设计的一切内在要素的总和，是设计存在的基础，被称为“设计的灵魂”；形式是构成

7、内容诸要素的内部结构或内容的外部表现方式。为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手法，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。 点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果，充分表达完美的设计意境。一个优秀的设计必定是形式对内容的完美表现。正如黑格尔所说：“工艺的美就不在于

8、要求实用品的外部造型、色彩、纹样去摹拟事物，再现现实，而在于使其外部形式传达和表现出一定的情绪、气氛、格调、风尚、趣味，使物质经由象征变成相似于精神生活的有关环境。”陈鹏，走出艺术哲学迷宫黑格尔美学笔记，文化艺术出版社，2007年第7期，第201页。二、网页设计与制作的具体流程网页设计是一个综合性极强的工作，涉及到商业策划、平面设计、人机界面、程序语言和数据库等。网页设计从总体上可大致分为策划、前台页面设计和后台三部分，本文主要从AZE设计工作室的网站实例来论述网页设计与制作的流程。（一）网站策划策划是指网站的整体定位、功能规划、应用分析、流程设计和内容架构组织，网站策划是网站平台建设成败的关

9、键内容之一。网站策划重点阐述了解决方案能给客户带来什么价值，以及通过何种方法去实现这种价值。在策划的同时要以人为本，迎合网民需求、找到了市场需求的点，才能把整体定位策划做到位。对网站内容功能规划，做到让搜索引擎更多的收录和关注，网页打开速度更快。通过对AZE设计工作室的分析，主要包涵动画设计、网站设计、家装设计、CG培训四个大栏目，明确了网站定位后来分析相关行业和市场特点。通过对相关行业和市场的分析，以及网站内容和功能的分析，规划出本次建设的网站主要内容如下：1.进入页flash Flash 页面的导入网站不仅生动形象，还会给人印象深刻的感觉， flash 页面以四个版块为基准，主要分动画设计

10、、网站建设、墙体彩绘、设计培训。点击任意一个可以直接进入每个小站，具有明确的导航性，设置较醒目的进入首页按钮，通过点击它就可以进入网站首页。2.网站首页网站首页是整个网站的门户，简洁、大方、加载速度快是网站首页的关键要素。网站主要规划的栏目内容有：首页、业内新闻、动画设计、网站建设、家装设计、CG培训、精品案例、关于我们、服务范围、联系我们。3.新闻动态发布系统最新动态栏目主要用来发布企业新闻，公司动态、最新消息等。通过最新动态栏目可使客户对公司最新的发展动态、产品信息、人文文化、最新消息等信息有一个及时的了解。此栏目，可让客户在线实时管理、发布新闻、删除新闻、更改等。4.企业留言系统企业留言

11、栏目在设计方面要美观、大方、与网站风格融成一体，更要注重用户体验。网民无需注册，有回复，通过相互直接的交流，能够为企业找到潜在客户，和一些市场信息。5.人才招聘目前很多企业都利用公司网站平台发布招聘信息。这样不但可以充分利用现有资源，而且相比传统的职业服务中心更具有实时性、互动性等优点。（二）网页布局版式设计logo公司公告、人才招聘、网站地图、论坛联系方式/收藏本站首页业内新闻动画设计网站建设墙体彩绘CG培训精品案例关于我们服务范围联系我们网站主幻灯片公司公告动画设计栏目最新资讯帮助中心网页设计栏目公司简介资源共享墙体手绘栏目友情链接CG培训栏目网页版权信息图（1） AZE设计工作室首页规划

12、图页面的整体布局则是网页设计的根基。根据现代网页的发展趋势来看，简洁、直观、人性化以及个性化是网站设计的基本要素，所以在做整体布局的时候一定要充分的考虑到这些要素。网页设计作为一种视觉语言，特别讲究编排和布局，通过文字图形的空间组合编排，表达出和谐与美。在AZE网站首页主要版块设计中，我采用了“匡”字型布局，给主内容区释放了更多空间，如图(1)（AZE设计工作室网站首页）所示：页面上部是网页标志和导航条，接下来是网页主幻灯片，左边栏目放友情链接和网页的一些小栏目，中间是网站的四个核心内容栏目，右边栏目放新闻更新和公司简介，网页底部放版权信息。网页内容作为一种版面，既要有文字，又要有图片；文字有

13、大小、标题和正文之分等网页构成画面的对比，在网页排版的时候充分考虑网站的定位，突出表现网站的主体内容。AZE设计工作室网站是个多页面站点，页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，设计中应利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽，布局的合理，让浏览者有一个流畅的视觉体验。（三）网页色彩搭配色彩是艺术表现的要素之一。在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成符合审美要求的页面

14、。根据色彩对人们心理的影响，合理地加以运用。不同的颜色也代表着不同的行业诉求。(例如：医院和环保部门会选择绿色，而公共事业机构则会选择蓝色等)因此在设计之初要充分考虑该网站的性质及访问对象，以此来确认网页的色彩搭配形式。当主题色确定好以后，考虑其它配色时，一定要考虑其它配色与主题色的关系，要体现什么样的效果。“色彩总的应用原则是:总体协调，局部对比。网页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。”高永子、卢坚、潘星亮著，网页经典配色与设计手册，中国青年出版社，2006年第7期，第56页。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。色彩还具有

15、明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升网页的文化品位。AZE设计工作室网站是一个艺术设计类型的网站，在色彩运用方面要凸显行业特色的同时更要独具特色，通过对网站的策划和内容规划，网站主要分四个小站分别表现四个设计行业，在把握好每个小站色彩整体性又要有所区别，动画设计页用蓝紫色调，网站设计页用蓝色调，墙体手绘页用黄绿色调，CG培训页用绿色调，主页采用灰色调把四个小站统一起来。下面是网站设计中用到的几种调色方案：单色方案、相

16、似色方案、对比色方案。1.单色方案单色方案是指在网站设计中使用一种基本颜色，为避免单调，可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色，由于整个颜色方案中事实上只有一种基色，因此这种方案称为单色方案。例如：在Photoshop的色彩选择窗口中，我们可以这样进行建立单色方案。首先调整H（也就是Hue的缩写）后面的值来调整色调。注意，H的单位是度，也就是基本颜色在颜色环上所处位置的角度。设置好H的值之后，再调整B后面的数字调整亮度以及S后面的数字调整饱和度。注意，其中B和S的单位是百分比，也就是向基本颜色中添加白色和黑色的百分比。这样就可以得到一个单色方案了。2.相似色方案在色彩圆环上选择彼

17、此相邻的几种颜色构成的配色方案就是相似色方案。例如橙色、橙红色以及橙黄色就可以组成一个相似色方案。由于相似色方案中包含了多种基色，如果再加上亮度和饱和度的变化，可以构成的颜色就非常多。 相似色配色方案可以给人非常协调的感觉，因此在网站设计中非常常用。典型的运用方法就是，用一种颜色作为页面背景，而另外一种在颜色环中与其相邻的颜色作为前景色。除了上面介绍的绿色和黄色之外，蓝色和绿色以及红色和褐色也是比较常用的相似色配色方案。3.对比色方案对比色方案即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比

18、色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握“大调和，小对比”这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。 （四）网站后台设计后台是指程序设计、数据操作、功能实现、管理界面和管理功能设计等。网站后台设计经常被人们所忽视，好的后台可以提高编辑的使用效率，同时一些好的设计也能减少错误的发生，针对“后台用户”这一特殊群体提供一些可行的体验优化原则。合理的功能设计和友好设计对于效率和差错率均会有非常大的提高，小小的设计可能会起到非凡的作用。三、网页制作工具的学习与应用（一）DreamweaverDreamweaver是美国MACROMEDIA公

19、司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。1.Dreamweaver的优点 最佳的制作效率 “Dreamweaver提供了以CSS为基础设计与开发提供支持的革命性功能，CSS将网页要展示的内容与样式设定分开。”王娜著，Dreamweaver网页制作与色彩搭配全攻略，清华大学出版社，2006年第5期，第23页。当要改变网页外观时，只需更改样式设定的部分，HTML文件本身并不需要更改。这一功能的实现将网页设计提升到新的层次。 网站管理 使用网站地图可以快

20、速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 2.Dreamweaver的缺点难以精确达到与浏览器完全一致的显示效果。也就是说在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来。 页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网

21、页编辑器，就不存在这个问题，因为所有的HTML代码 都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的HTML代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。（二）Flash1.Flash简介和发展趋势Flash也是由macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。flash动画的好坏是评估一个网站好坏的重要影响因素之一，动感绚丽的flash动画，能给网站受众以极大的视觉冲击力。2.Fl

22、ash的优点Flash的一个很重要的特点是创建的文件体积很小，Flash是完全基于矢量的动画处理技术，而矢量图形就是用少量的向量数据来描述一个复杂的对象，存储时只占很小的空间，而且图像的质量也很高。Flash使用的是插件的工作方式，用户只要安装一次插件，以后就可以快速启动并观看动画，而不必像Java那样，每次都要花费大量的时间启动虚拟机。Flash动画采用的是“流式”的动画播放技术，用户不必等到动画下载完全再去欣赏动画，而是一边下载一边欣赏。 Flash功能还是很广泛的。使用内置的ActionScript语句结合JavaScript，也可以制作出互动性很强的主页来。3.网站应用flash注意事

23、项插件，Flash动画的播放需要安装Adodb公司的播放插件。如果客户电脑上没有便不能播放动画，而且Flash播放插件的版本有很多种，一些低版本的并不能播放采用高版本制作的flash动画。全Flash网站，对于全Flash网站在seo方面有很多劣势，因为它全部的内容，结构都在flash内部，因此，搜索引擎会全然不知这个网站是什么内容。现在的搜索技术并不能识别到Flash里面的文本，图片等信息。因此，在百度、Google等搜索引擎中无法识别到Flash到底在表达什么信息，影响网站的推广。(三) Photoshop1.Photoshop在网页布局中规划的作用布局灵活。Photoshop的灵魂是图层

24、，每层可以放置不同的元素，图层之间可以相互链接，也可单独存放，每个图层上的图像位置可以随意挪动而不影响其它图层的图像位置，每个图层上的图像大小、色阶、亮度、饱和度透明度等可单独设置而不影响其它图层上的图像。如此灵活的功能，完全可以让设计者随心所欲设计而不受任何约束。修改方便。网站建设前期首先要与客户签定合同，签定合同时客户最关心的是自己的网站是什么样子，这时设计者不可能拿出建好的网站给客户演示，这样成本太高，最好的办法是拿出在Photoshop中做出的效果图给客户看。一般情况下，客户一次满意率非常低，总会提出修改意见，而且还会不断地提出修改方案。这时我们就可以利用Photoshop的强大功能按

25、客户的要求方便地进行修改和优化，直到客户满意为止。加快浏览进度。一个设计不美观不规范的网站是没有生命力，同样一个打开、下载速度慢的网站也是没有存在的价值。使用Photoshop设计的网页经过裁切后体积相对要小得多，相同的元素因为其格式变化也会大大提高下载速度，因此Photoshop就成了提高速度，提高点击率的制胜法宝。2.photoshop与dreamweaver的配合虽然效果图是用Photoshop设计的，但一定要兼顾到Dreamweaver对页面布局的要求，Dreamweaver下网页布局是使用国字形，还是其他模式，是否使用框架，使用框架的类型是哪一种，都是在设计前要考虑到的。否则会造成效

26、果图与最后的网站布局出现出入，使网页的设计过程变得复杂。正确切片，只有经过正确切片后，DreamWeaver才能对效果图进行有效的整合，Photoshop在网页布局中的积极作用才发挥到了极致。四、网页优化“在网页设计中，网页的优化是较为重要的一个环节。”王晓峰、焦燕著，网页设计原理及实战策略，清华大学出版社，2009年第3期，第68页。它的成功与否会影响页面的浏览速度和页面的适应性，影响观者对网站的印象。而网页的优化工作是由很多方面的优化组成的，一名优秀的网页优化工作人员必须具备多方面的知识，不仅仅要掌握网站设计制作技术；还要掌握很多计算机其他方面的知识(包括电子商务、人机交互、易用性和一些相

27、关的软件知识等等)；甚至需要掌握心理学、商业运作等相关知识。我在网页制作优化过程中主要有两个方面：技术优化，人文优化。（一）网页技术优化技术优化主要是对代码优化、目录结构优化和针对搜索引擎的优化三个部分。1.代码优化代码优化主要解决的问题就是页面浏览速度和适应性的问题。文字和图片是构成页面的两个主要因素，所以我们的优化也要从文字和图片开始。在一个网站中文字是页面中准确传达信息的元素，因此字体的优化显得尤为重要。使用css样式表指定文字的样式是必要的，通常我们将字体指定为宋体，大小指定12px，颜色要视背景色而定，原则上以能看清且与整个页面搭配和谐为准。在白色的背景上，我们一般使用黑色，这样不易

28、产生视觉疲劳，能保证浏览者较长时间地浏览网页。图片是网页中的重要元素。图片的优化可以在保证浏览质量的前提下将其大小降至最低，这样可以成倍地提高网页的下载速度。利用Photoshop可以将图片切成小块，分别进行优化。输出的格式可以为gif或jpeg，要视具体情况而定。一般我们把有较为复杂颜色变化的小块优化为jpeg，而把那种只有单纯色块的卡通画式的小块优化为gif，这是由这两种格式的特点决定的。DIV与表格(table)是页面中的重要元素,是页面排版的主要手段。我们可以设定DIV与表格的宽度、高度、边框、背景色、对齐方式等参数。很多时候，我们将表格的边框设为0，以此来定位页面中的元素，或者借此确

29、定页面中各元素的相对位置。“浏览器在读取网页html原代码时，是读完整个table才将它显示出来的,我们在设计页面表格的时候，应该尽量避免将所有元素嵌套在一个表格里，而且表格嵌套层次尽量要少。”何秀芳著，网页制作与网站建设课堂实录，人民邮电出版社，2009年第5期，第73页。因此在网页制作过程中可以采用DIV套表格的方式来减少嵌套，提高网页的浏览速度。2.目录结构优化目录结构优化主要是对网站文件管理，我建议建立一个大文件夹，里边包括各个频道的文件夹、网页页面图片文件夹、网页内容图片文件夹等等一个一个的单独类别的文件夹，使得在维护时候可以方便的找到每一个页面的具体位置，提高工作效率。3.针对搜索

30、引擎的优化搜索引擎优化是完整的优化工作必不可少的一个步骤。以例举我对网站关键字的优化，“关键字”的体现要合理，比如我们可以制作一个“网站导航”的页面，网站导航页面会淋漓尽致的体现各个关键字，这个页面不但方便用户使用也会更容易的被搜索引擎找到起到事半功倍的作用。随着搜索引擎都有了图片搜索功能，网页里边的图片也是体现关键词的好地方，例如我在页面里边加入图片后给图片起一个“名字”（）给图片的名称就可以是关键字。（二）人文优化人文优化主要是交互、易用性和网站表现的优化。在网络发展到Web2.0时代，更注重用户的交互作用，用户既是网站内容的浏览者，也是网站内容的制造者。所谓网站内容的制造者是说互联网上的

31、每一个用户不再仅仅是互联网的读者，同时 也成为互联网的作者；不再仅仅是在互联网上冲浪，同时也成为波浪制造者；由被动地接收互联网信息向主动创造互联网信息发展。因此网站要想更好的发展必须做好人文优化这一项目。网页的设计与制作是主观与客观共同作用的结果，突出的体现了艺术与技术的紧密结合。网络技术主要表现为客观因素，艺术创意主要表现为主观因素，以主题鲜明、形式与内容相统一、强调整体为设计原则；掌握现有的各种网络技术规律，达到网络技术与艺术创意的完美结合，才能使网页的平面设计扩展到立体设计，给网页浏览者一个很好的视觉体验和增加网页的互动性，浏览网页的每一个用户不再仅仅是网页的读者，同时也成为网站的作者，

32、在模式上由单纯的“读”向“写”以及“共同建设”发展。参考文献：1戴一波.Dreamweaver CS3网站制作炫例精讲M.北京：电子工业出版，2008.2邓文渊.网页制作高手M.北京：人民邮电大学出版，2007.3何秀芳.网页制作与网站建设课堂实录M.北京：人民邮电出版社，2009.4李彬彬.设计效果心理评价M.北京:中国轻工出版社，2005.5李砚祖、芦影.视觉传达的历史与美学M.北京：中国人民大学出版社，2000.6王娜.Dreamweaver网页制作与色彩搭配全攻略M. 北京：清华大学出版社，2006.7王晓峰、焦燕.网页设计原理及实战策略M.北京:清华大学出版社，2009. 8徐珂、苗

33、彤、赵晖.网页视觉与设计M.北京：人民邮电出版社，2001.9许凌云、柳勇良.网页设计全方位学习M.北京：清华大学出版社，2008.10张国良.传播学原理M.上海:复旦大学出版社，2000.11张涛、葛海霞.网页制作实用标准教程M.天津:南开大学出版社，2007.12赵国志.色彩构成M.沈阳:辽宁美术出版社，1994.13赵殿泽.构成艺术M.沈阳:辽宁美术出版社，1994.14周宏敏、高翔、朱敬新世纪Dreamweaver MX 2004应用培训教程M.北京：电子工业出版社，2004.15Scot Johson etal.using Active Server PageJ.Que 2007(3).16David Hunter etal，Beginning XMLJ.Wrox Press Ltd，2005(2).13