网页设计与制作 工业和信息化普通高等教育“十二五”规划教材立项项目 作者 雷伟军 第2章网页整体设计.pptVIP

第2章网页整体设计 2.1 网页设计基础 网页设计基础知识包括html超文本标记语言、CSS层叠样式表、javascript客户端脚本语言、一些美工作图基础、及网络基础知识，更深入一些则需要掌握一些php、asp、jsp等服务器端脚本语言 2.1.1 网页布局类型 网页布局很多，大致可分为上中下字型、拐角型、标题正文型、左右型、封面型、Flash型、综合型等，下面分别进行论述。 1．上中下型：是一些很多网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 2．拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。 3．标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。 4．左右型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。 5．封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 6．Flash型：其实这与封面型结构是类似的，只是这种类型采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。 7．综合型：即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。 2.1.2 网页整体造型 网页整体造型是指页面的整体形象，这种形象图形与文本的组合。页面元素的基本形状有：矩形，圆形，三角形，菱形等。这些形状的组合可以表达丰富的页面形象。 采用形状时，往往要考虑形状的基本特性，从而根据要表达的页面意义来选择不同的形状。比如矩形代表着正式，规则，很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，因此，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。实际网页制作多数是接合多个图形加以设计，并结合动态网站设计技巧。 2.1.3 网页设计要素 网页最基本功能是为用户提供浏览信息和进行交互操作。因此，网页设计的基本要素是：内容、美观、简便、高效。 1.内容，网页必须有实质性的信息，并且能恰当的、完全的展现出来。没有实质信息内容，或信息展现不全的网页是不受欢迎的。 2.美观，网页的外观是用户的第一印象，一个设计美观的网页，能给用户带来愉悦的体验，相反，不美观的网页给用户的是痛苦的体验。美观不等于花哨，有时简朴去能恰到好处。 3.简单，这一点是非常关键的，这是个和用户交互直接相关的。主要涉及导航和输入等方面。，糟糕的体验会使用户迷失方向，不知道如何操作，从而产生挫败感，造成用户的反感。 4.高效，这一点涉及网页的实现技术层面。好的网页要求能高效的被浏览器解释执行。网页不能以牺牲用户浏览、操作的时间来换取界面的美观效果。一个慢腾腾的网页一定会让用户产生反感。 2.2 确定网站主题 首先明确建站的目的，得出网站的需求分析，然后根据需求确定网站的风格、业务逻辑、网站规模等等。网站的主题是一个网站的核心，创建网站前要先确定站点的主题，只有主题确定之后才会有目的地去寻找相关资料。 2.2.1网站的设计流程 1.收集网站前期资料以及所需文档 2.根据网站的模式和特点以及网站制作规范定制出最适当的标准样式 3.设计人员进行二级页面设计工作 4.制作人员开始制作工作 （1）定义站点 （2）建立网站结构 （3）首页的设计和制作 （4）制作其他页面 （5）完成 （6）调试与测试 测试网页：兼容性测试；超链接测试；实地测试。 （6）网站的发布与维护