第2章 标记语言与网页制作(2)

《第2章 标记语言与网页制作(2)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、2．3网页设计基础本节主要内容：n网页设计基础l页面功能与内容设计l页面布局设计l页面视觉设计l页面效果设计n使用FrontPagen网页编辑n设置标记属性n定义和使用样式nFrame框架和IFrame框架与传统程序界面不同，网页是内容和艺术的综合体。网页在实现Web应用系统功能的同时，表现出更大的灵活性、随意性和艺术性。因此，Web设计已经越来越明显地分成面向业务逻辑的功能设计和面向用户体验的视觉设计两个不同的层面。Web设计主要包括：n页面功能与内容设计n页面布局设计n页面视觉设计n页面效果设计2．3．1页面功能与内容设计一个Web站点通常有大量的

2、页面文件构成。nWeb应用（网站）l主目录，首页l子目录、网页文件及各类其他文件l数据库nWeb应用=传统的计算机软件系统l对页面的功能划分、存储和组织应按照软件系统分析、设计和开发相关的方法和模式进行。包括：u生命周期法u原型法uMVC设计模式综合利用上述方法和设计模式，对整个Web站点进行系统分析和功能设计，然后规划文件夹结构、数据库和页面。与传统的软件开发相比，Web站点中的一个页面，类似于传统软件中的一个函数。只是页面之间的调用是通过超链接或页面中表单的action属性完成的，而不是传统软件是通过函数调用。n在Web开发中，模型－视图－控制器（

3、Model-View-Contro-ller，MVC）设计模式是一种比较流行的设计模式。nMVC设计模式lXeroxPARC在20世纪80年代为编程语言Smalltalk－80发明的一种软件设计模式l核心思想是在系统开发中把商业逻辑，界面显示和数据进行分离，强制性地将应用程序的输入、处理和输出分开，分成相对独立而又能协同工作的3个组成部分：模型（Model）、视图（View）、控制器（Controller），它们各自处理自己的任务。n模型：表示企业数据和业务规则。在MVC的三个部件中，模型拥有最多的处理任务，实现具体的业务逻辑、状态管理的功能。n视图：

4、是用户看到并与之交互的界面。通常实现数据的输入和输出功能。n控制器：控制整个业务流程。实现View层跟Model层的协同工作。控制器接受用户的输入并调用模型和视图去完成用户的需求。根据MVC设计模式，可以将网页功能进行分类n用于输入输出的页面（视图）。n服务端脚本程序页面（模型）。这类页面不在浏览器中显示，主要是负责数据的查询、存储等。n导航页面，类似MVC中的控制器，也类似于传统程序中的菜单，实现页面之间的调用和导航，典型的导航页面就是站点首页。l将网页按照MVC设计模式进行分类可以更好的规划一个Web站点，保证站点的可扩展性、灵活性和可维护性，这也

5、是所有的软件设计模式所追求的目标。另外，网页内容的设计及其表现形式，也应根据内容和用户特点，选用文本、图片、动画等不同的媒体形式。n网页内容l网站标志，导航，菜单，图片按钮，表单样式，表格数据文字表现，新闻，公告，讨论区，blogs，友情链接，广告条，版权信息等。n表现形式l文本、图片、动画等不同的媒体形式来展示，以产生更好的用户体验。2．3．2页面布局设计Web设计中，网页布局越来越重要。这是因为：用户对页面体验的第一印象就是页面的栏目和布局，然后才是页面内容。只有当网面内容和网页布局完美融合时，才能产生最好的用户体验。1．网页布局设计方法n网页布局

6、设计方法l先画出页面布局的草图l深入加工l最后定稿在进行页面布局设计时，需要考虑以下的：n影响因素l页面尺寸：一般与显示器大小及分辨率有关。u如若屏幕分辨率为800×600，则页面显示尺寸一般为780×428个像素。若分辨率为1024×768，页面显示尺寸1007×600。u如果页面尺寸采用像素值，可在标记对内，增加