第1天上午 网页设计基础

本章学习流程图

知识导读

网页对大多数网民来说并不陌生，但网页设计中的一些术语、网页设计的流程、常用的网页制作工具等并不是每个网民都知道。为了能够使网页制作初学者对网页设计有一个总体的认识，本章将介绍网页设计中的相关术语、网页设计常用工具、常见的网站类型和网页设计的流程，从而为后面设计更复杂的网页打下良好的基础。

完成本章内容以后，您将能够

◎ 了解网页设计的相关术语

◎ 熟悉网页设计的常用工具

◎ 熟悉常见的网站类型

◎ 掌握网页设计的基本流程

1.1 网页设计的相关术语

随着网络技术的发展和互联网的普及，人们通过浏览网页可以方便地获取信息。然而，越来越多的人已不满足于网上浏览，他们更想设计、制作出自己的网页，并在网上发布，进行广泛的信息交流。

1.1.1 什么是网页

网页是一种可以在WWW上传输且能被浏览器认识和翻译成页面并显示出来的文件，网页是网站的基本构成元素。一般网页上都会有文本和图片等信息，而复杂一些的网页上还会有声音、视频、动画等多媒体内容。网页通常分为动态网页和静态网页两种。如图1-1所示的就是一个静态网页。

1.1.2 什么是网站

网站又称为Web站点，它是WWW的一个个节点，每个节点都可以存放不同的内容，这样其他用户可以通过WWW访问网站内容。

网站是有独立域名、独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其他文件，不一定要有很多网页，主要有独立域名和空间即可，哪怕只有一个页面也叫网站。

1.1.3 什么是静态网页

在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的，也就是以.htm、.html、.shtml和.xml等为后缀的。在HTML格式的网页上，也可以出现各种动态效果，如GIF格式的动画、Flash滚动字幕等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。

静态网页的特点简要归纳如下。

◎ 每个静态网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不应含有“？”。

◎ 网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。

◎ 静态网页的内容相对稳定，因此容易被搜索引擎检索。

◎ 静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难。

◎ 静态网页的交互性较差，在功能方面有较大的限制。如图1所示就是一个宣传介绍性的静态网页。

1.1.4 什么是动态网页

所谓动态网页是指网页文件里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。这种网页的后缀名称一般根据不同的程序设计语言而有所不同，如常见的以.asp、.jsp、.php、.perl、.cgi等形式为后缀。动态网页的主要特点归纳如下。

◎ 动态网页没有固定的URL。

◎ 动态网页以数据库技术为基础，可以大大降低网站维护的工作量。

◎ 采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等。

◎ 动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。

1.2 网页设计常用工具

不论是制作大型网站还是一般的企业网站，无非都是做出一个又一个的网页，再把它们链接起来。制作网页可以直接使用HTML，也可以使用工具软件。由于使用语言工作量很大，制作一个页面往往要写成百上千行代码，非常麻烦，而且出错率高，错误也不易检测和排除。所以，对于大多数人来说，使用工具软件制作网页是最常用的。

用于设计网页的工具软件很多，如Adobe公司的Dreamweaver、Flash、Fireworks，微软公司的FrontPage等，都是很受欢迎的网页制作工具，拥有庞大的用户群。

1.2.1 网页编辑排版软件Dreamweaver CS4

Dreamweaver CS4是一个所见即所得的网页编辑工具，能够使网页和数据库关联起来，支持最新的HTML和CSS，用于对Web站点、Web页和Web应用程序进行设计、编码和开发等。Dreamweaver CS4包含一个崭新、简洁、高效的界面，且性能也得到了改进。它不仅是专业人员制作网站的首选工具，而且普及到广大网页制作爱好者中，如图1-3所示是Dreamweaver CS4的工作界面。

1.2.2 网页图像制作软件Photoshop CS4和Fireworks CS4

Photoshop CS4是一款功能十分强大、使用范围广泛的优秀图像处理软件，一直占据着图像处理软件的领袖地位。Photoshop支持多种图像格式以及多种色彩模式，还可以任意调整图像的尺寸、分辨率及画布的大小，使用Photoshop可以设计出网页的整体效果图、网页Logo、网页按钮和网页宣传广告等图像。如图1-4所示是Photoshop CS4的工作界面。

Fireworks CS4是一款用来设计网页图形的应用程序。它所包含的创新性解决方案解决了图形设计人员和网站管理人员面临的主要问题。Fireworks中的工具种类齐全，使用这些工具，可以在单个文件中创建和编辑位图和矢量图像、设计网页效果、修剪和优化图形以减小其文件大小以及通过使重复性任务自动进行来节省时间。如图1-5所示是Fireworks CS4的工作界面。

1.2.3 网页动画制作软件Flash CS4

Flash是网页动画制作软件之一，它具有小巧、灵活且功能卓越等特点。用Flash制作的动画文件很小，有利于网上发布，而且它还能制作出有交互功能的矢量动画。Flash强大的交互功能使其能方便地与其他网页建立链接关系。如图1-6所示是Flash CS4的工作界面。

1.3 常见的网站类型

网站就是把一个个网页系统地链接起来的集合，如新浪、搜狐、网易等。网站按其内容的不同可分为个人网站、企业类网站、机构类网站、娱乐休闲类网站、行业信息类网站、门户网站和购物类网站等，下面分别进行介绍。

1.3.1 个人网站

个人网站是以个人名义开发创建的具有较强个性化的网站。一般是个人为了兴趣爱好或展示个人等目的而创建的，具有较强的个性化特色，带有很明显的个人色彩，无论从内容、风格、样式上，都形色各异、保罗万象。

这类网站一般不具有商业性质，通常规模不大，在互联网中随处可见，也有不少优秀的站点，如图1-7所示即为个人网站。

1.3.2 企业类网站

随着信息时代的到来，企业类网站作为企业的名片越来越受到人们的重视，成为企业宣传品牌、展示服务与产品乃至进行所有经营活动的平台和窗口。企业网站是企业的“商标”，在高度信息化的社会里，创建富有特色的企业网站是最直接的宣传手段。通过网站可以展示企业形象，扩大社会影响，提高企业的知名度，如图1-8所示是企业类网站。

1.3.3 机构类网站

所谓机构类网站通常指政府机关、非营利性机构或相关社团组织建立的网站，网站的内容多以机构或社团的形象宣传和政府服务为主，网站的设计通常风格一致、功能明确，受众面也较为明确，内容上相对较为专一，如图1-9所示是机构类网站。

1.3.4 娱乐休闲类网站

娱乐休闲类网站大都是以提供娱乐信息和流行音乐为主的网站。如很多在线游戏网站、电影网站和音乐网站等，它们可以提供丰富多彩的娱乐内容。这类网站的特点也非常显著，通常色彩鲜艳明快，内容综合，多配以大量图片，设计风格或轻松活泼，或时尚另类。如图1-10所示是娱乐休闲类网站。

1.3.5 行业信息类网站

随着互联网的发展、网民人数的增多以及网上不同兴趣群体的形成，门户网站已经明显不能满足不同上网群体的需要。一批能够满足某一特定领域上网人群及其特定需要的网站应运而生。由于这些网站的内容服务更为专一和深入，因此人们将其称为行业信息类网站，也称为垂直网站。行业信息类网站只专注于某一特定领域，并通过提供特定的服务内容，有效地把对某一特定领域感兴趣的用户与其他网民区分开来，并长期持久地吸引住这些用户，从而为其发展提供理想的平台。如图1-11所示是行业信息类网站。

1.3.6 购物类网站

随着网络的普及和人们生活水平的提高，网上购物已成为一种时尚。丰富多彩的网上资源、价格实惠的打折商品、服务优良送货上门的购物方式，已成为人们休闲、购物两不误的首选方式。网上购物也为商家有效地利用资金提供了帮助，而且通过互联网来宣传自己的产品覆盖面广，因此现实生活中涌现出了越来越多的购物网站。

在线购物网站在技术上要求非常严格，其工作流程主要包括商品展示、商品浏览、添加购物车、结账等。如图1-12所示是购物类网站。

1.3.7 门户类网站

门户类网站将无数信息整合、分类，为上网者打开方便之门，绝大多数网民通过门户类网站来寻找自己感兴趣的信息资源，巨大的访问量给这类网站带来了无限的商机。门户类网站涉及的领域非常广泛，是一种综合性网站，如搜狐、网易、新浪等。此外这类网站还具有非常强大的服务功能，如搜索、论坛、聊天室、电子邮箱、虚拟社区、短信等。门户类网站的外观通常整洁大方，用户所需的信息在上面基本都能找到。

目前国内较有影响力的门户类网站有很多，如新浪（www.sina.com.cn）、搜狐（www.sohu.com）和网易（www.163.com）等。如图1-13所示是新浪首页。

1.4 快速创建基本网页

本节将介绍一个简单的网页设计制作方法，使读者对网页制作软件的基本使用方法和网页制作流程有一定的了解，为后面的学习打下基础。

1.4.1 确定网页主要栏目和整体布局

不管简单的个人网站，还是复杂的具有几千个页面的大型网站，对网站的需求规划都要放到第一步，因为它直接关系到网站的功能是否完善、是否达到预期的目的等。

规划一个网站，可以用树状结构先把每个页面的内容大纲列出来。尤其当要制作一个很大的网站时，特别需要把架构规划好，也要考虑到以后的扩充性，免得做好以后再更改整个网站的结构。

本节制作的是一个企业宣传展示型的网页，如图1-14所示，主要包括“网站首页”、“关于我们”、“新闻中心”、“产品世界”、“市场营销”和“技术支持”等几个栏目。网页整体布局采用“标题正文型”，上面是标题及横幅广告，下面是大量的正文内容。

1.4.2 创建本地站点

为了更好地利用站点对文件进行管理，也可以尽量减少错误，如路径或链接出错，在使用Dreamweaver制作网页以前，首先应定义一个新站点，具体操作步骤如下。

1 执行“站点”|“管理站点”命令，弹出“管理站点”对话框，在对话框中单击“新建”按钮，在弹出的菜单中选择“站点”选项，如图1-15所示。

2 弹出“站点定义为”对话框，在对话框中切换到“高级”选项卡，在“站点名称”文本框中输入站点的名字，单击“本地根文件夹”右边的 按钮，选择站点文件夹，如图1-16所示。

3 单击“确定”按钮，返回到“管理站点”对话框，在对话框中显示新建的站点，如图1-17所示。单击“完成”按钮，即可完成站点的创建。

1.4.3 新建网页文档

在创建完本地站点后，就可以创建具体的网页了，新建网页文档的具体操作步骤如下。

1 执行“文件”|“新建”命令，弹出“新建文档”对话框，在对话框中选择“空白页”|“HTML”|“无”选项，如图1-18所示。

2 单击“创建”按钮，新建网页文档，在“标题”文本框中输入“公司简介”，如图1-19所示。

3 执行“修改”|“页面属性”命令，弹出“页面属性”对话框，在对话框中将“左边距”、“上边距”、“下边距”和“右边距”分别设置为0，如图1-20所示。单击“确定”按钮，设置页面属性。

1.4.4 插入表格布局网页

表格是最常用的网页布局工具，使用表格可以对页面中的元素进行准确的定位。合理利用表格来布局网页，有助于协调页面结构的均衡。

1 将光标放置在页面中，执行“插入”|“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为3，“列数”设置为1，“表格宽度”设置为797像素，如图1-21所示。

2 单击“确定”按钮，插入表格，此表格记为“表格1”，将“对齐”设置为“居中对齐”，如图1-22所示。

3 将光标置于表格1的第2行单元格中，插入1行3列的表格，此表格记为“表格2”，如图1-23所示。

4 将光标置于表格2的第1列，插入3行1列的表格记为“表格3”。将光标置于表格2的第3列，插入2行1列的表格记为“表格4”，如图1-24所示。

5 将光标置于表格4的第1行，插入1行2列的表格记为“表格5”。将光标置于表格4的第2行，插入2行3列的表格记为“表格6”，如图1-25所示。

1.4.5 插入多媒体

多媒体技术的发展使网页设计者能轻松地在网页中加入声音、动画、影片等内容。下面讲述Flash动画的插入方法，具体操作步骤如下。

1 将光标置于表格1的第1行单元格中，执行“插入”|“媒体”|“SWF”命令，弹出“选择文件”对话框，在对话框中选择banner.swf，如图1-26所示。

2 单击“确定”按钮，插入Flash，设置循环及自动播放，如图1-27所示。

1.4.6 插入文本内容

文本是基本的信息载体，不管网页内容如何丰富，文本自始至终都是网页中最基本的元素，下面讲述文本的插入和使用。

1 将光标置于表格6中相应的单元格中，输入相应的文本，如图1-28所示。

2 选中插入的文本，打开“属性”面板，在面板中将“大小”设置为12像素，“文本颜色”设置为#666，如图1-29所示。

1.4.7 插入图像

美观的网页是图文并茂的，漂亮的图像不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。

1 将光标置于表格3相应的单元格中，执行“插入”|“图像”命令，在弹出“选择图像源文件”对话框中选择合适的图片，如图1-30所示。

2 单击“确定”按钮，插入图像，如图1-31所示。

3 将光标置于表格5相应的单元格中，执行“插入”|“图像”命令，弹出“选择图像源文件”对话框，分别插入图像，如图1-32所示。

4 将光标置于表格5相应的单元格中，执行“插入”|“图像”命令，弹出“选择图像源文件”对话框，分别插入其他图像，如图1-33所示。

5 将光标置于表格1的第3行单元格中相应的位置，插入图像，如图1-34所示。

1.4.8 保存浏览网页

网页制作完成并保存后，即可在浏览器中看到网页效果。

执行“文件”|“保存”命令，弹出“另存为”对话框，在对话框中选择保存的位置，在“文件名”文本框中输入index.htm，如图1-35所示。单击“保存”按钮，即可保存文档。

1.5 本章小结

本章主要学习了网页的基本概念、网页制作的常用软件、常见的网站类型，最后介绍了如何创建基本网页等，通过今天上午的学习，读者应掌握网页设计的一些基础知识，为后面设计制作更复杂的网页打下良好的基础。

1.6 课后习题

1.填空题

（1）____是一种可以在WWW上传输且能被浏览器认识和翻译成页面并显示出来的文件，是网站的基本构成元素。

（2）____是一个所见即所得的网页编辑工具，能够使网页和数据库关联起来，支持最新的HTML和CSS，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。

2.操作题

利用以上所学知识创建如图1-36所示的基本网页。

1 创建一个空白文档，执行“文件”|“保存”命令，将其保存为index.html。设置相应的页面属性，将光标置于页面中，执行“插入”|“表格”命令，插入4行1列的表格，如图1-37所示。

2 将光标置于第一行单元格中，插入相应的图像，如图1-38所示。

3 将光标置于第二行单元格中，输入文字，并设置文字属性，如图1-39所示。

4 将光标置于第三行单元格中，输入文字，并设置文字属性，如图1-40所示。

5 将光标置于表格的右边，插入相应的表格，设置单元格属性，并在相应的单元格中输入文本插入图像，保存浏览效果如图1-36所示。

学习笔记

______