(Web编程基础知识)第4章页面设计

来源：网络收集时间：2026-09-21

导读： Web编程基础知识第4章页面设计 1 网页设计基础 2 静态页面设计 3 动态页面设计 4 样式表设计本章小结网页设计要使用多种技术，包括HTML、脚本程序设计、 CSS样式表及美工技术等。仅使用HTML设计的页面属于静态页面。Web刚出现的一段时间内，它是一

Web编程基础知识

第4章页面设计

1 网页设计基础 2 静态页面设计 3 动态页面设计

4 样式表设计本章小结

网页设计要使用多种技术，包括HTML、脚本程序设计、 CSS样式表及美工技术等。仅使用HTML设计的页面属于静态页面。Web刚出现的一段时间内，它是一个静态信息发布平台，所设计的页面都是静态的；而当今的Web已经具有更丰富的功能。1

Web编程基础知识

4.1 网页设计基础

4.1.1 页面功能与内容设计 4.1.2 页面布局设计 4.1.3 页面视觉设计 4.1.4 页面效果设计

Web编程基础知识

4.1.1 页面功能与内容设计

Web应用(网站)

主目录，首页子目录、网页文件及各类其他文件

数据库

Web应用 == 传统的计算机软件系统

软件系统分析、设计和开发相关的方法和模式进行生命周期法原型法

MVC设计模式

Web编程基础知识

MVC设计模式

在Web开发中，模型-视图-控制器(Model-View-Controller, MVC)设计模式是一种比较流行的设计模式。 MVC设计模式

核心思想是在系统开发中把商业逻辑，界面显示和数据进行分离，强制性的使应用程序的输入、处理和输出分开，分成相对独立而又能协同工作的3个组成部分：模型(Model)、视图(View)、控制器(Controller),它们各自处理自己的任务。

模型：表示企业数据和业务规则，在MVC的三个部件中，模型拥有最多的处理任务，实现具体的业务逻辑、状态管理的功能。视图：是用户看到并与之交互的界面，通常实现数据的输入和输出功能。

控制器：控制整个业务流程，实现View层跟Model层的协同工作。控制器接受用户的输入并调用模型和视图去完成用户的需求。 4

Web编程基础知识

网页功能进行分类根据MVC设计模式，可以将网页功能进行分类：

用于输入输出的页面(视图); 服务端脚本程序页面(模型),这类页面不在浏览器中显示，主要是负责数据的查询、存储等；导航页面，类似MVC中的控制器，也类似于传统程序中的菜单，实现页面之间的调用和导航，典型的导航页面就是站点首页。

将网页按照MVC设计模式进行分类，可以更好的规划一个 Web站点，保证站点的可扩展性、灵活性和可维护性，这也是所有的软件设计模式所追求的目标。5

Web编程基础知识

网页内容与表现形式

网页内容网站标志，导航，菜单，图片按钮，表单

样式，表格数据文字表现，新闻，公告，讨论区，blogs,友情链接，广告条，版权信息等。

表现形式文本、图片、动画等不同的媒体形式来展

示，以产生更好的用户体验

Web编程基础知识

4.1.2 页面布局设计

网页布局设计方法

页面布局的草图加工定稿

页面尺寸，页面尺寸和显示器大小及分辨率有关系整体造型政府网页、商业站点、游戏场景、时尚站点

影响因素

页头页脚

菜单超链接7

Web编程基础知识

常见页面布局-1

基于栏目的页面布局大部分的门户网站首页即采用基于栏目的页面

布局形式，例如，sina,yahoo,163,265上网导航等优点：基于栏目的页面布局主要应用于一些商

业网站的首页。为吸引用户，增加用户访问量，从商业运营的目的出发，网站的内容很多，分成了不同的超链接区域(版块)。为节省屏幕空间，在栏目内往往还使用标签，以组织更多的内容。8

Web编程基础知识

常见页面布局-2

整幅效果型布局页面采用大幅图片或Flash动画，在底部加一

“登录”按钮，通常用于站点首页。优点：页面美观，可以较好的展示企业形象。缺点：登录速度较慢。

Web编程基础知识

常见页面布局-3

“口”型页面布局页面一般上下各有一个广告条，左面是主菜单，

右面放友情链接等，中间是主要内容，这种页面布局也经常用于一些站点的首页设计。

优点：充分利用版面，信息量大。缺点：页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计。

Web编程基础知识

常见页面布局-4

“工”型结构布局

所谓“工”型结构布局，是指将页面分成上、中、下三个部分，页面顶部为横条网站标志+广告条，下面是版权等信息，中间为主要内容，又分为左右两个部分，左面为主菜单，右面显示内容的页面布局形式。

Web编程基础知识

常见页面布局-4

优点 “工”型页面布局是网页设计中用的最广泛的一

种布局方式，这种布局的优点是页面结构清晰，主次分明。

缺点规矩呆板，如果细节和色彩上搭配不好，很难让

人留下印象，不适宜做前卫的和个性化强的站点。

Web编程基础知识

常见页面布局-5

自顶向下层次结构布局将页面自顶向下分成几个平行的区域，

顶部是页头，接下来的区域分别放置超链接块，最下面的区域显示具体的文章正文内容。一些文章页面或注册页面等经常采用这种类型的页面布局。

Web编程基础知识

常见页面布局-6

自由式结构布局

页面结构布局打破了传统的页头、页尾、菜单、栏目、超链接区域等布局模式，把页面设计成一张极具创意的广告作品自由式结构布局的优点是页面靓丽、现代、轻松、节奏明快，很容易让访问者驻足欣赏。缺点，下载速度缓慢，文字信息量少，信息的逻辑表达能力弱，浏览者不易直奔主题，信息查找麻烦。自由式结构布局一般用在时尚类站点上，如时装、化妆品等以崇尚现代、美感为主题的站点，专业性的商

务站点不宜采用。14

特点

应用

Web编程基础知识

4.1.3 页面视觉设计

页面视觉

视觉设计是指利用视觉符号来传递各种信息的设计，其应用的范畴很广，可以包括工业产品设计，广告设计，新媒体设计，服饰设计等等。页面视觉设计分成图形、字体和色彩几个方面

色彩设计

不同功能的网站，其颜色的主色调设计也不相同。其次是颜色的搭配。

Web编程基础知识

页面视觉设计

图形的应用用于信息反馈增加趣味性

文字的字体大号字空白，提高页面的易读性和易用性，空

白可以分离出重要信息，使眼睛得到休息，并给人以冷静和有秩序的感觉。

Web编程基础知识

4.1.4 页面效果设计

效果设计

效果设计就是利用Photoshop等图形图像处理工具，按照页面的布局设计，来设计页面的完整图片然后对图片进行切图，为下面的页面html代码编写准备images。

Web编程基础知识

4.2

静态页面设计

静态页面主要是使用HTML语言设计的页面，

用户只能浏览Web服务器上预先安排好的信息。设计静态页面主要使用各种页面开发工具，如Dreamweaver,FrontPage等

返

回18

Web编程基础知识

4.2.11.

HTML基本标记

头部标记

<head>,</head …… 此处隐藏：1343字，全部文档内容请下载后查看。喜欢就下载吧 ……

(Web编程基础知识)第4章页面设计.doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

下载这篇word文档

本文链接：https://www.jiaowen.net/wenku/111291.html（转载请注明文章来源）

上一篇：政府门户网站评估报告
下一篇：Zigbee复习模拟题-(1)

(Web编程基础知识)第4章 页面设计

(Web编程基础知识)第4章页面设计