第2章节标记语言与网页制作2.docVIP

2．3网页设计基础 本节主要内容： ?网页设计基础 ?页面功能与内容设计 ?页面布局设计 ?页面视觉设计 ?页面效果设计 ?使用Front Page ?网页编辑 ?设置标记属性 ?定义和使用样式 ?Frame框架和IFrame框架 与传统程序界面不同，网页是内容和艺术的综合体。网页在实现Web应用系统功能的同时，表现出更大的灵活性、随意性和艺术性。因此，Web设计已经越来越明显地分成面向业务逻辑的功能设计和面向用户体验的视觉设计两个不同的层面。Web设计主要包括： ?页面功能与内容设计 ?页面布局设计 ?页面视觉设计 ?页面效果设计 2．3．1页面功能与内容设计 一个Web站点通常有大量的页面文件构成。 ?Web应用（网站） ?主目录，首页 ?子目录、网页文件及各类其他文件 ?数据库 ?Web应用=传统的计算机软件系统 ?对页面的功能划分、存储和组织应按照软件系统分析、设计和开发相关的方法和模式进行。包括： ?生命周期法 ?原型法 ?MVC设计模式 综合利用上述方法和设计模式，对整个Web站点进行系统分析和功能设计，然后规划文件夹结构、数据库和页面。 与传统的软件开发相比，Web站点中的一个页面，类似于传统软件中的一个函数。只是页面之间的调用是通过超链接或页面中表单的action属性完成的，而不是传统软件是通过函数调用。 ?在Web开发中，模型－视图－控制器（Model-View-Contro -ller，MVC）设计模式是一种比较流行的设计模式。 ?MVC设计模式 ?Xerox PARC在20世纪80年代为编程语言Smalltalk－80发明的一种软件设计模式 ?核心思想是在系统开发中把商业逻辑，界面显示和数据进行分离，强制性地将应用程序的输入、处理和输出分开，分成相对独立而又能协同工作的3个组成部分：模型（Model）、视图（View）、控制器（Controller），它们各自处理自己的任务。 ?模型：表示企业数据和业务规则。在MVC的三个部件中，模型拥有最多的处理任务，实现具体的业务逻辑、状态管理的功能。 ?视图：是用户看到并与之交互的界面。通常实现数据的输入和输出功能。 ?控制器：控制整个业务流程。实现View层跟Model层的协同工作。控制器接受用户的输入并调用模型和视图去完成用户的需求。 根据MVC设计模式，可以将网页功能进行分类 ?用于输入输出的页面（视图）。 ?服务端脚本程序页面（模型）。这类页面不在浏览器中显示，主要是负责数据的查询、存储等。 ?导航页面，类似MVC中的控制器，也类似于传统程序中的菜单，实现页面之间的调用和导航，典型的导航页面就是站点首页。 ?将网页按照MVC设计模式进行分类可以更好的规划一个Web站点，保证站点的可扩展性、灵活性和可维护性，这也是所有的软件设计模式所追求的目标。 另外，网页内容的设计及其表现形式，也应根据内容和用户特点，选用文本、图片、动画等不同的媒体形式。 ?网页内容 ?网站标志，导航，菜单，图片按钮，表单样式，表格数据文字表现，新闻，公告，讨论区，blogs，友情链接，广告条，版权信息等。 ?表现形式 ?文本、图片、动画等不同的媒体形式来展示，以产生更好的用户体验。 2．3．2 页面布局设计 Web设计中，网页布局越来越重要。这是因为：用户对页面体验的第一印象就是页面的栏目和布局，然后才是页面内容。只有当网面内容和网页布局完美融合时，才能产生最好的用户体验。 1．网页布局设计方法 ?网页布局设计方法 ?先画出页面布局的草图 ?深入加工 ?最后定稿 在进行页面布局设计时，需要考虑以下的： ?影响因素 ?页面尺寸：一般与显示器大小及分辨率有关。 ?如若屏幕分辨率为800×600，则页面显示尺寸一般为780×428个像素。若分辨率为1024×768，页面显示尺寸1007×600。 ?如果页面尺寸采用像素值，可在body标记对内，增加center标记对，将body标记对所有页面内容居中，以应对不同的屏幕分辨率。 ?整体造型：指页面的整体形象。可以充分运用自然界中的各种形状以及它们的组合。如矩形、圆形、三角形等。 ?政府网页：矩形代表正式、规则等。大多数政府网页都是以矩形为整体造型。 ?商业站点：圆形代表柔和、团结、温暖等。许多时尚站点喜欢以圆形为页面整体造型。 ?游戏场景：三角形代表力量、权威等。许多大型商业站点为显示它的权威性，常以三角形为页面整体造型。 ?时尚站点：大部分的游戏场景则使用不规则的图形。 ?页头：又称为页眉。其内容和设计风格直接影响到整个页面的协调性。 ?页头常放置站点的名字，公司标志或旗帜广告。在其右侧往往还放置一组超链接。 ?页头下方，往往是一个Flash动画，将页头和下面的内容分开，从而产生较好的视觉效果。 ?页脚：与页头呼应。常放置制作者或公司信息。 ?