第五章 网页设计基础
5.1 HTML基本知识
5.2 网页设计工具
5.3 静态网页设计
5.4 网页修饰
5.5 表单和客户端脚本
5.6 框架和模板
5.1 HTML基本知识
5.1.1 HTML介绍
HTML是英文 Hyper Text Markup Language
的缩写，中文意思是超文本标记语言。 HTML是万维网文档发布和浏览的基本格式，它允许人们透明的共享网络上的信息，即使大家使用的计算机差别很大具备以下几个特点：
● 独立于平台，可以在任何的计算机硬件和操作系统上以相似的形式显示文档内容。
● 超文本，允许文档中的任何文字或词组参照另一文档，用户可以在不同计算机中的文档之间及文档内部漫游。
● 精确的结构化文档，允许某些高级应用，如
HTML文档和其他格式文档间相互转换以及搜索文本数据库。
发展到了今天，可以把它理解成为一种规范 — HTML规范。只要遵从 HTML规范，用不同文本编辑工具（记事本,Word等）
编写、或其它方法（利用网页制作工具）直接生成出来的网页文件，都可以在 Internet浏览器上正确识别和浏览。
表 5_1 HTML所支持的不同层面
HTML层面 支持的特点第 0级 命令、标题、目录、联接第 1级 图片、强调、文字、加亮度第 2级 表格、字型定义第 3级 图表、数据第 4级 数学公式
5.1.2 HTML文档结构
HTML文件的基本格式：
<Html>
<Head> <!--文件头部分 -->
</Head>
<Body> <!--正文部分 -->
</Body>
</Html>
在开始编写 HTML文档之前，首先应构造出轮廓。因为如果要 web浏览器正确地解释 HTML文档中的标记，则必须遵循一定的格式。如：
（ 1） HTML文档内容必须以 <HTML>标记开始，并以
</HTML>标记结束；
（ 2）文件头部分必须包含在 <HEAD>标记和 </HEAD>
标记之间；
（ 3）在文件头中可设置一个文档标题，用 <TITLE>和
</TITLE>标记声明；
（ 4）文档正文部分包含在 <BODY>和 </BODY>标记之间。
（ 5）文档采用 <!--在此加入注释 -->的格式加入注释。
5.1.3 HTML基本标记的使用网页（ WEB页）的本质是 HTML文档，由标识和不同文本组成。页面上支持多种媒体形式，如图片、声音、动画。但多媒体文件单独以文件形式保存，网页只是通过标识对多媒体文件进行调用。
1,文档头标记
HTML文档的 head部分是文档头，在文档头中常用的一些标记有：
（ 1） <TITLE>标记用于定义网页标题栏上的显示内容。
（ 2） <META>标记
<META>是放于 <HEAD>与 </HEAD>之间的标记，功用主要为：
1）定义该网页的关键字，可以使搜索引擎根据关键字搜索到我们网站的页面。
2）控制页面的缓存
3）设定这是 HTML文件及其编码语系。
4）使用过的网页编辑器
5）页面刷新和自动跳转
2.文件体标记
<body>标记用于定义 HTML文档的主体，包含在 <body>
标记对中的内容将显示在浏览器的主窗口中。后面介绍的常用标记都是使用在文件体部分的，而且 <body>标记本身自带的一些参数可以对整个页面进行设置。
参数的内容如下：
background 背景图片文件
bgcolor 背景颜色
text 字体颜色
link 联接文字的颜色
vlink 已访问联接文字的颜色
alink 当前联接文字的颜色
Leftmargin 页面左侧留白距离
Topmargin 页面顶部留白距离
3.常用页面标记标记
（ 1）格式标记
<P> </P> 段落标记
<BR> </BR> 换行标记
空格标记
<HR></HR> 水平线标记
（ 2）文字标记
<Font></Font> 文字标记
<Font>标记常用参数
Size=n 文字大小
Color=”#RRGGBB” 文字颜色 (如：
black,olive,teal,maroon,navy或 #000000)
Face=”字体,字体（如：
Arial,Courier,TimersNewRoman，楷体）
align=”对齐,对齐方式 (如：
left,center,right)
（ 3）文本修饰标记
<b></b> 粗体
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线
<strong></strong> 加强强调
（ 4）超链接标记
<A> </A>超链接标记
<A>的一般参数设定：
1） href="URL"，这参数不能与另一参数 name同时使用。
① 当作为一外部连结时,href所设定的是该链接所要转到的 URL。
2）参数 name用来设置锚点。
② 当作为一内部连结时,href所设定的是该链接所要跳到的当前网页内的锚点或指定网页文件内的锚点。
注意标记中间不要包含任何内容。
（ 5）滚动标记
<Marquee></Marquee>滚动标记，可以用来设置网页内标记（如文字标记、图片标记等）的滚动。
<Marquee>标记常带参数
direction 滚动的方向,有四个值可以设置 left，
right,up,down。
behavior 滚动的方式，可设置的值为：
Scroll 完全滚动，从一端消后，在另一端出现并滚动。
Slide 滚动一次
Alternate 从一端到另一端后又反向
loop 文本滚动的次数，设为 -1时，表示无限次。
bgcolor 滚动范围的背景色
scrollamount 速度
scrolldelay 延时，也就是滚动的刷新率。
(6)表格标记
<table >< /table> 表格定义标记
<cation></cation > 表格标题
<tr></tr> 单行
<th></th> 标题格
<td></td> 单元格
(7)分项列表标记
<ul> </ul> 无序列表
<ol> </ol> 有序列表
<menu></menu> 菜单选项
<dir></dir> 目录
(8)图片标记
<Img>图片标记用于引入外部图片文件和设置图片显示的相关内容。
<Img>标记常用参数,
align 对齐方式 (bottom,middle,top,left,right)
src 图片文件全名（包括路径和文件名）
alt 说明文本
width 图片宽
height 图片高
border 边框厚度
(9)背景音乐标记
<bgsound>可以设置网页的背景音乐，可以插入各种多媒体，格式可以是 Midi,Wav,Swf,AU等等。
<bgsound>标记常用参数：
src 路径 /图片文件名 "设定 midi档案及路径，可以是相对或绝对。
Autostar 是否在音乐传完之后，就自动播放音乐。
true是,false否。
Loop 循环播放次数,-1表示重复多次。
5.1.4 HTML标准单位
1、长度单位长度单位可以用来定义页面可见标记对象（如水平线、表格、
图片等）的长、宽、高等一系列属性。长度的表示有两种方式，
绝对长度和相对长度。
相对单位：
em：相对于字母高度的比例因子。
en：相对于字型大小的比例因子。
%：相对于长度单位的百分比例。
绝对单位：
in：英寸。
cm：公分。
mm：公厘。
px：像素。
pc,pica，印刷活字单位。
pt：像点。
2、颜色单位网页颜色的表示共有五种方式。
（ 1） #RRGGBB：
（ 2） #RGB：
（ 3） rgb(R,G,B)：
（ 4） rgb(R%,G%,B%)：
（ 5） Color_Name：
3,URL路径
URL（ Uniform Resource Locator：统一资源定位器）是 WWW页的地址，描述了 Web浏览器请求和显示某个特定资源所需要的全部信息，包括使用的传输协议，提供 Web服务的主机名,HTML文档在远程主机上的路径和文件名，以及客户与远程主机连接时使用的端口号。 URL提供了互联网上资源的准确位置。
5.2 网页设计工具
5.2.1 网页设计工具简单的文本工具就可以制作网页，但是要直观快捷的制作出美观大方，功能齐全的网页，是离不开专业的网页设计工具的。
网页设计软件有很多。早期最出名的是微软 Office软件包系列中的
FrontPage,操作简单明了、视图化的设计界面和可以很方便嵌套其它 Office
软件文件的特性，使得它很容易被计算机初学者掌握。 FrontPage和 Office软件包中的其它软件一样，主要提供给非专业人士解决办公自动化方面的问题。
同时，微软在面向程序员的 Visual Studio软件包中推出 InterDev 。
InterDev使得网站开发人员能够快速地建立全交互、全动态的站点。由于具有可视化的开发特色和强大的数据库工具,InterDev可以向开发人员提供全面的、
技术先进的开发 intranet和 Internet应用的系统。它主要提供给网络程序员开发动态网站。
现在网站开发最广泛使用的是 Macromedia公司的 Dreamweaver系列，
Dreamweaver MX是 Dreamweaver系列中的最新版本。它可以使我们在单机环境下工作，快速创建、建立和管理 Web站点。获取 Dreamweaver的可视布局工具,Dreamweaver UltraDev 的快速 Web应用程序功能以及 HomeSite
的代码编辑支持，所有这些都可以在 Dreamweaver MX这一完整的集成解决方案中完成。
5.2.2 Dreamweaver的安装
1.双击 Dreamweaver MX Installer.exe后，先进行解压缩，然后弹出安装的欢迎界面。点击下一步按钮，就开始安装过程。
2.阅读 Dreamweaver MX软件安装许可证协议，必须选是，才能继续安装。
3.设置软件安装路径。如果不使用默认路径，点击浏览按钮选择安装的位置，设置好后点击下一步按钮
4.设置软件支持文件类型，默认全部选取。
5.完成安装后显示的完成界面。
5.2.3 Dreamweaver的工作界面
Dreamweaver MX提供了一种和原来 Dreamweaver系列不同的操作界面。在软件首次运行的时候会弹出提示窗口，如图
5_8。要求用户进行工作区界面的选择。这样可以使的习惯了
4.0版本的老用户可以在 Dreamweaver MX中使用旧样式的设计界面。
2.界面介绍安装好 Dreamweaver MX 中文版后,运行，选择
Dreamweaver MX工作区后，将看到下面的画面：
5,3 静态网页设计
5.3.1 定义一个本地站点
1.建立文件夹在 D盘（或指定的盘符）建立一个本地站点的文件夹，同时在文件夹内建立多个子文件夹，用于网站不同模块和引用文件的管理。
2.打开站点管理器点击菜单,站点 /新建站点,。弹出的,站点定义对话框,。
5.3.2 页面设置和定位
1.页面设置在 Dreamweaver MX 菜单栏中点击菜单,修改 /页面属性,,弹出页面属性对话框在页面属性对话框中，
主要设置页面的标题，
文字颜色、背景，链接文字和边界等属性，
实际上就是 <body>
标记的参数设置。
（ 2）表格的插入和设置
1）单击工具项中的表格图标，在弹出的对话框中设置表格。设置要创建的表格行和列的数量，点击确定按钮。
选取单个格子，是设置单元格属性内容。
3.表格使用的原则：
① 整个页面不要都套在一个表格里，尽量拆分成多个表格（以行为单位）。
② 单一表格的结构尽量整齐。
③ 表格嵌套层次尽量要少。
④ 当某表格模块需要复杂化的时候，使用表格嵌套。
⑤ 表格尽量使用固定大小即用像素来确定表格大小。
⑥ 表格都要进行居中设置。
5.3.3 文本对象的添加和设置
1.文本添加常用的方式有两种：直接录入和从已有的文档中复制。
2.文本设置
Dreamweaver MX中我们通过文字属性面板，可以直观的设置文字的显示风格。
3.网页文字设置原则：
① 不要使用超过 3种以上的字体。字体太多则显得杂乱，没有统一风格。
② 不要用太大的字。因为版面是宝贵，有限的，
字体过大只能使得网页粗陋。
③ 不要使用不停闪烁的文字。
④ 标题的字体较正文大，颜色也应和正文有所区别。
5.3.4 图片的插入和设置
1.在网页中添加图片
（ 1）设置插入点。在欲插入图片的位置点击鼠标，使光标停留在该处。
（ 2）点击常用工具箱中的插入图像图标 或通过插入菜单 插入 /图片 /来自文件，在弹出的图像浏览窗口中选取图片。点击确定按钮完成插入图片。
2.图片属性设置图片添加到页面后，我们还可以设置它相关的显示风格。如高、宽、替代文字和链接的内容。
5.4 网页修饰
5.4.1 样式表 CSS简介
CSS是 Cascading Style Sheets的简称，中文全称为串接样式表，简称样式表。 CSS用以规范整个网页的排版与风格，并弥补了 HTML规格里的不足，也让网页的设计更为灵活。
5.4.2 样式表的创建
1.创建步骤
（ 1）创建方式
1）通过 Dreamweaver MX，我们可以轻松的创建和修改所需的 CSS样式表。点击菜单,文本 /CSS
样式 /新建 CSS 样式,选项，会弹出新建样式表对话框。
（ 2）类型设置通过新建样式表对话框，我们可以根据需要选择创建一个嵌入网页的样式表或独立的样式表文件。
1.CSS滤镜简介随着网页设计技术的发展，人们已经不满足于原有的一些 HTML标记，而是希望能够为页面添加一些多媒体属性，
例如滤镜的和渐变的效果。 CSS技术的飞快发展使这些需求成为了现实。
CSS扩展部分的 CSS滤镜属性（ Filter Properties），使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的 HTML标记上，例如图片、文本容器、以及其他一些对象。
对于滤镜和渐变效果，前者是基础，因为后者就是滤镜效果的不断变化和更替。
当滤镜和渐变效果结合到一个基本的 SCRIPT小程序中后，
网页设计者就可以拥有一个建立动态交互文档的强大工具。
也就是 CSS FILTER+SCRIPT，这就说明想要建立动态的文档还要一些 SCRIPT（脚本语言）的基础。
5.4.3 CSS滤镜
2.滤镜的使用方法
Dreamweaver MX样式表定义对话框：分类选扩展，过滤器中就是各种滤镜的名称和参数。
5.5表单和客户端脚本
5.5.1 表单
1.表单基础表单是一种特殊的页面标记，主要负责数据采集的功能。它是网页与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下,提交资料,按钮，这样所填资料的数据就会通过专门的 CGI接口传到 Web服务器上。
网页的管理者随后就能在 Web服务器上看到用户填写的资料，
从而完成从用户到网站之间的反馈和交流。
2.创建表单
<form>称为表单标记，用以构建表单模式，属于一个容器标记，其它表单标记需要在它的范围中才有效。
（ 1）创建表单标签。
在 Dreamweaver MX中，打开表单工具箱，工具箱中第一个图标就是表单标签。要想在网页上放置表单控件，必须先创建表单标签。
（ 2）设置表单标签属性表单标签的属性实际上就是表单 <form>标记的参数 。
action="http:// www.cef.cn / cgi-local / example.cgi"
表单通常是与服务端程序配合使用的,参数 action便是用以指明该服务端程序的位置,这样此表单所填的资料才能正确传给服务端程序作处理 。 若没有服务端程序进行测试,可设定此参数为 ACTION="mailto:your@email.com",那样该表单所填的资料将寄到此电邮地址 。
method="POST"
传送资料给服务端程序的的方式,可选值为 POST,GET。
当 method=get时,将输入数据加在 action指定的地址后面传送到服务器；
当 method=post时则将输入数据按照 HTTP传输协议中的 post传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。
3.表单的验证的设置表单的主要功能是提供给用户进行信息的输入,为了防止用户有意或无意的进行错误信息输入,我们对创建好的表单设置规范行为 。
（ 1）选取要设置行为的表单控件。
（ 2） 点击菜单,窗口 /行为,,弹出行为浮动面板,
（ 3） 点击添加事件图标 。 在弹出的菜单中选取,检查表单,项目 。
（ 4） 设置对话框 。
5.5.2 客户端脚本
1,客户端脚本表单接受到的信息一般都是提交到服务端来进行验证和处理。一般对于一个新用户的数据，处理的顺序为先校验数据的合法性，数据不合法就需要返还客户端要求用户重新填写，合法后才进一步处理。这样的校验数据和数据反复既浪费了服务器的宝贵资源又浪费了客户的时间，同时也增加了客户信息泄露的危险。所以我们可以在客户端通过简单的，对客户开放的脚本代码方式，对用户信息进行规范，如用户名和密码不能一样，电子邮件的填写一定要是邮件地址格式和身份证号码长度等问题。这样不但可以及时的提醒用户规范填写，减轻服务器的负担，而且程序的运行是在客户端上，不会对服务器造成任何的不利影响。
JavaScript是一种基于对象 (Object)和事件驱动 (Event Driven)的脚本语言。使用它的目的是与 HTML超文本标记语言,Java 脚本语言（ Java
小程序）一起实现在一个 Web页面中链接多个对象，与 Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的 HTML语言中实现的。
2,JavaScript简介
3,JavaScript实例通过 Dreamweaver MX建立一个空白的网页,切换到代码视图下,在 <head></head>标记之间添加入如下代码：
<Script Language ="JavaScript">
alert("这是第一个 JavaScript例子 !");
alert("欢迎你进入 JavaScript世界 !");
alert("今后我们将共同学习 JavaScript知识 ！ ");
</Script>
说明：
JavaScript代码由 <Script Language ="JavaScript">…… </Script>
来说明 。
在标识 <Script Language="JavaScript">...</Script>之间就可加入
JavaScript脚本 。
Language是 <Script>标记的参数,用来指定脚本所使用的语言,如果使用的是 VBScript,则使用 <Script Language="VBScript">
alert()是 JavaScript的消息对话框事件,其功能是弹出一个具有 OK对话框并显示 （ ） 中的字符串 。
通过 <!--...//-->标识说明：若不认识 JavaScript代码的浏览器
，则所有在其中的标识均被忽略；若认识，则执行其结果。
使用注释这是一个好的编程习惯，它使其他人可以读懂你的语言。
5.6 框架和模板很多站点的网页都有这样一个特点，既标题不变，目录格式相同，但对应目录的内容不一样。若每次打开一个内容都是打开一个完整的网页，
显然显示重复内容会使得显示速度受到影响。现在，我们采用框架技术来解决这个问题。
框架网页实际上是由框架结构页和一些独立的模块分页来构成 。 把不变的标题目录做成模块分页,在显示不同内容的时候,可以只改变一些框架内分页内容 。 框架技术解决了网页重用的难题,同时提高网站设计制作的速度 。
5.6.1网页框架
1.框架的标记和参数
（ 1） 框架标记：
<frameset></frameset> 在 <frameset>标记后是设置网页框架的内容；
<frame src="url"> 在 src="url"设置框架中联结的网页；
<noframes> </noframes> 在 <noframes>标记后的文字将只出现在不支持 FRAMES的浏览器中 。
（ 2） 基本框架页代码：
<HTML>
<HEAD></HEAD>
<FRAMESET>
<FRAMESRC="url">
<NOFRAMES></NOFRAMES>
</FRAMESET>
</HTML>
（ 3） frameset的参数
1） Cols和 rows参数设置框架的模式：
① Cols=#纵向排列的多个窗口的个数和大小
#为 n..数值大小
n%..百分比大小
*..剩余大小
② rows=#横向排列多个窗口的个数和大小
#为 n..数值大小
n%..百分比大小
*..剩余大小
2.建立框架页
（ 1） 新建一个不同页 。 在 Dreamweaver MX中新建一个空白的页面 。
（ 2） 选定框架样式 。
打开框架工具箱，如图 5-66。框架工具栏里罗列了各种常用框架的样式。点击在框架工具箱中选定的框架样式。网页中会自动加载框架
。
（ 3） 保存框架页和各模块分页 。
菜单,文件 /保存全部,。把框架页和各模块页分别命名保存到站点文件夹中。
（ 4）设置框架结构属性
（ 5） 设置框架模块属性 。
对单个框架模块的属性设置需要调出浮动框架面板来进行设置。菜单,窗口 /其它 /框架,。调出的浮动框架面板。在浮动框架面板中选取我们需要设置属性的单个框架模块，属性窗口出现对应的框架属性图 5_68 菜单下拉列表图 5_69 浮动框架面板图 5_70 对应框架属性设置
3.内嵌式框架 （ 内联帧 ）
用于建立内嵌式的框架 。
<iframesrc=”url” name=##>...</iframe>
src 初始页面的 URL
name 框架窗口对象名称
5.6.2模板的应用通常在一个网站中会有几十甚至几百个风格基本相似的页面,如果每次都重新设定网页结构以及相同栏目下的导航条,各类图标就显得非常麻烦 。 不过我们可以借助 Dreamweaver MX 2004的模板功能来简化操作 。
其实模板的功能就是把网页布局和内容分离,在布局设计好之后将其存储为模板,这样相同布局的页面可以通过模板创建,因此能够极大提高工作效率 。
Dreamweaver MX提供的模板技术，可以大大提高网页设计与制作的速度。模板技术使得网站网页制作过程中大量的重复性工作能够一次性完成，大多数情况下，只需要对单一模板进行编辑，就能完成整个网站的修改。因此，模板技术的出现，使得网站建设工作的技术门槛降低、制作效率提高。
1.制作和保存模板制作模板和制作一个普通的页面完全相同,只是不需要把页面的所有部分都制作完成,仅仅需要制作出导航条
,标题栏等各个页面的公有部分,而把中间区域用页面的具体内容来填充 。
（ 1）先在 Dreamweaver MX中运行,文件 /新建,命令
，接着从窗口中依次选定,模板页 /HTML 模板,选项，
点击,创建,按钮之后即可创建一个模板文件。
（ 2）在页面设计视图下插入网页框架、导航条,Flash标题等所有页面公有的内容，然后设置可以修改的区域，最后运行,文件 /保存,命令将这个模板保存下来。
为了避免编辑时候误操作而导致模板中的内容变化，模板中的内容默认为不可编辑，只有把某个区域或者某段文本设置为可编辑状态之后，在由该模板创建的文档中才可以改变这个区域。先用鼠标选取某个区域
（也就是每个页面不同内容的区域），接着点击模板工具箱上的可编辑区域图标，并且在弹出的对话框中为这个区域设定一个名称，这样就完成了编辑区域的设置。
2.应用摸板在 Dreamweaver MX中建立一个新页面，然后执行菜单“窗口 /资源”命令打开资源浮动面板，在资源列表中选取模板，选择一个已经建立好的模板，
然后单击面板上的“应用”按钮即可将此模板应用到页面上了。需要注意的是，应用以后，页面中黄色部分是不可编辑区，此时可以在可编辑区中将包含的文字删除，填写相应的内容，这样就可以快速制作出一个网页文件了。
3.摸板的更新有的时候需要修改某个模板,改变网页的风格 。 这时可以打开模板文件,然后进行修改 。 在资源窗口中选中模板文件,点击鼠标右键,在弹出的菜单中选取,更新站点命令,,见图 5_76。 设置修改使用过这个模板的网页文件 。
本章小结本章给出了一个网站静态页面构建的详细步骤。站点文件夹的设立和关联、页面的布局、页面元素的添加和设置，以及页面元素的修饰等。以达到使读者深入学习和掌握网站页面设计相关知识和技术。
一,练习与思考题
1,如何理解静态页面的概念？
2,请说明下列 HTML文档体参数的属性和所设颜色起到的作用 。
< body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#ff0000
alink=#ff0000>
3,试举处三个常用的单个标记,其作用是什么？
4,什么是 CSS,使用 CSS对网页设计有何影响？
5,使用什么方法可以看到静态页面的源代码？
6、通过 Dreamweaver MX在网页上插入一张名为,图片,jpg”,保存后，用浏览器打开网页，图片无法显示。试说明原因。（试找一张 jpg
格式图片，改名后进行操作验证。）
二,实践题
1.设计一个网上商城的主页和相关分支页面 。
要求：
（ 1） 主页 (index.htm)要有网站标题,以及根据书城这个主题内容定制的相关分支内容的链接,其中必不可少的有我的商店,商品总目录,购物指南,客户留言等分支内容 。 用户购物的导航条,基本流程和样式参 。 主页上有登陆表单和查询表单 。
（ 2） 设计用户注册流程分页 。 在点击主页上的注册链接后,进入用户注册协议书分页,点击同意按钮,进入注册页面 。 注册页面中要求设计提供给用户填写资料的表单组 。
（ 3） 设计商品总目录和购物指南页面 。
2.设计一个顶部和嵌套的左侧框架样式的框架网页 (index.htm),在左侧框架模块的页（ left） 内设置链接，点击后切换主模块（ main） 内的内容。
top
left main
5.1 HTML基本知识
5.2 网页设计工具
5.3 静态网页设计
5.4 网页修饰
5.5 表单和客户端脚本
5.6 框架和模板
5.1 HTML基本知识
5.1.1 HTML介绍
HTML是英文 Hyper Text Markup Language
的缩写，中文意思是超文本标记语言。 HTML是万维网文档发布和浏览的基本格式，它允许人们透明的共享网络上的信息，即使大家使用的计算机差别很大具备以下几个特点：
● 独立于平台，可以在任何的计算机硬件和操作系统上以相似的形式显示文档内容。
● 超文本，允许文档中的任何文字或词组参照另一文档，用户可以在不同计算机中的文档之间及文档内部漫游。
● 精确的结构化文档，允许某些高级应用，如
HTML文档和其他格式文档间相互转换以及搜索文本数据库。
发展到了今天，可以把它理解成为一种规范 — HTML规范。只要遵从 HTML规范，用不同文本编辑工具（记事本,Word等）
编写、或其它方法（利用网页制作工具）直接生成出来的网页文件，都可以在 Internet浏览器上正确识别和浏览。
表 5_1 HTML所支持的不同层面
HTML层面 支持的特点第 0级 命令、标题、目录、联接第 1级 图片、强调、文字、加亮度第 2级 表格、字型定义第 3级 图表、数据第 4级 数学公式
5.1.2 HTML文档结构
HTML文件的基本格式：
<Html>
<Head> <!--文件头部分 -->
</Head>
<Body> <!--正文部分 -->
</Body>
</Html>
在开始编写 HTML文档之前，首先应构造出轮廓。因为如果要 web浏览器正确地解释 HTML文档中的标记，则必须遵循一定的格式。如：
（ 1） HTML文档内容必须以 <HTML>标记开始，并以
</HTML>标记结束；
（ 2）文件头部分必须包含在 <HEAD>标记和 </HEAD>
标记之间；
（ 3）在文件头中可设置一个文档标题，用 <TITLE>和
</TITLE>标记声明；
（ 4）文档正文部分包含在 <BODY>和 </BODY>标记之间。
（ 5）文档采用 <!--在此加入注释 -->的格式加入注释。
5.1.3 HTML基本标记的使用网页（ WEB页）的本质是 HTML文档，由标识和不同文本组成。页面上支持多种媒体形式，如图片、声音、动画。但多媒体文件单独以文件形式保存，网页只是通过标识对多媒体文件进行调用。
1,文档头标记
HTML文档的 head部分是文档头，在文档头中常用的一些标记有：
（ 1） <TITLE>标记用于定义网页标题栏上的显示内容。
（ 2） <META>标记
<META>是放于 <HEAD>与 </HEAD>之间的标记，功用主要为：
1）定义该网页的关键字，可以使搜索引擎根据关键字搜索到我们网站的页面。
2）控制页面的缓存
3）设定这是 HTML文件及其编码语系。
4）使用过的网页编辑器
5）页面刷新和自动跳转
2.文件体标记
<body>标记用于定义 HTML文档的主体，包含在 <body>
标记对中的内容将显示在浏览器的主窗口中。后面介绍的常用标记都是使用在文件体部分的，而且 <body>标记本身自带的一些参数可以对整个页面进行设置。
参数的内容如下：
background 背景图片文件
bgcolor 背景颜色
text 字体颜色
link 联接文字的颜色
vlink 已访问联接文字的颜色
alink 当前联接文字的颜色
Leftmargin 页面左侧留白距离
Topmargin 页面顶部留白距离
3.常用页面标记标记
（ 1）格式标记
<P> </P> 段落标记
<BR> </BR> 换行标记
空格标记
<HR></HR> 水平线标记
（ 2）文字标记
<Font></Font> 文字标记
<Font>标记常用参数
Size=n 文字大小
Color=”#RRGGBB” 文字颜色 (如：
black,olive,teal,maroon,navy或 #000000)
Face=”字体,字体（如：
Arial,Courier,TimersNewRoman，楷体）
align=”对齐,对齐方式 (如：
left,center,right)
（ 3）文本修饰标记
<b></b> 粗体
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线
<strong></strong> 加强强调
（ 4）超链接标记
<A> </A>超链接标记
<A>的一般参数设定：
1） href="URL"，这参数不能与另一参数 name同时使用。
① 当作为一外部连结时,href所设定的是该链接所要转到的 URL。
2）参数 name用来设置锚点。
② 当作为一内部连结时,href所设定的是该链接所要跳到的当前网页内的锚点或指定网页文件内的锚点。
注意标记中间不要包含任何内容。
（ 5）滚动标记
<Marquee></Marquee>滚动标记，可以用来设置网页内标记（如文字标记、图片标记等）的滚动。
<Marquee>标记常带参数
direction 滚动的方向,有四个值可以设置 left，
right,up,down。
behavior 滚动的方式，可设置的值为：
Scroll 完全滚动，从一端消后，在另一端出现并滚动。
Slide 滚动一次
Alternate 从一端到另一端后又反向
loop 文本滚动的次数，设为 -1时，表示无限次。
bgcolor 滚动范围的背景色
scrollamount 速度
scrolldelay 延时，也就是滚动的刷新率。
(6)表格标记
<table >< /table> 表格定义标记
<cation></cation > 表格标题
<tr></tr> 单行
<th></th> 标题格
<td></td> 单元格
(7)分项列表标记
<ul> </ul> 无序列表
<ol> </ol> 有序列表
<menu></menu> 菜单选项
<dir></dir> 目录
(8)图片标记
<Img>图片标记用于引入外部图片文件和设置图片显示的相关内容。
<Img>标记常用参数,
align 对齐方式 (bottom,middle,top,left,right)
src 图片文件全名（包括路径和文件名）
alt 说明文本
width 图片宽
height 图片高
border 边框厚度
(9)背景音乐标记
<bgsound>可以设置网页的背景音乐，可以插入各种多媒体，格式可以是 Midi,Wav,Swf,AU等等。
<bgsound>标记常用参数：
src 路径 /图片文件名 "设定 midi档案及路径，可以是相对或绝对。
Autostar 是否在音乐传完之后，就自动播放音乐。
true是,false否。
Loop 循环播放次数,-1表示重复多次。
5.1.4 HTML标准单位
1、长度单位长度单位可以用来定义页面可见标记对象（如水平线、表格、
图片等）的长、宽、高等一系列属性。长度的表示有两种方式，
绝对长度和相对长度。
相对单位：
em：相对于字母高度的比例因子。
en：相对于字型大小的比例因子。
%：相对于长度单位的百分比例。
绝对单位：
in：英寸。
cm：公分。
mm：公厘。
px：像素。
pc,pica，印刷活字单位。
pt：像点。
2、颜色单位网页颜色的表示共有五种方式。
（ 1） #RRGGBB：
（ 2） #RGB：
（ 3） rgb(R,G,B)：
（ 4） rgb(R%,G%,B%)：
（ 5） Color_Name：
3,URL路径
URL（ Uniform Resource Locator：统一资源定位器）是 WWW页的地址，描述了 Web浏览器请求和显示某个特定资源所需要的全部信息，包括使用的传输协议，提供 Web服务的主机名,HTML文档在远程主机上的路径和文件名，以及客户与远程主机连接时使用的端口号。 URL提供了互联网上资源的准确位置。
5.2 网页设计工具
5.2.1 网页设计工具简单的文本工具就可以制作网页，但是要直观快捷的制作出美观大方，功能齐全的网页，是离不开专业的网页设计工具的。
网页设计软件有很多。早期最出名的是微软 Office软件包系列中的
FrontPage,操作简单明了、视图化的设计界面和可以很方便嵌套其它 Office
软件文件的特性，使得它很容易被计算机初学者掌握。 FrontPage和 Office软件包中的其它软件一样，主要提供给非专业人士解决办公自动化方面的问题。
同时，微软在面向程序员的 Visual Studio软件包中推出 InterDev 。
InterDev使得网站开发人员能够快速地建立全交互、全动态的站点。由于具有可视化的开发特色和强大的数据库工具,InterDev可以向开发人员提供全面的、
技术先进的开发 intranet和 Internet应用的系统。它主要提供给网络程序员开发动态网站。
现在网站开发最广泛使用的是 Macromedia公司的 Dreamweaver系列，
Dreamweaver MX是 Dreamweaver系列中的最新版本。它可以使我们在单机环境下工作，快速创建、建立和管理 Web站点。获取 Dreamweaver的可视布局工具,Dreamweaver UltraDev 的快速 Web应用程序功能以及 HomeSite
的代码编辑支持，所有这些都可以在 Dreamweaver MX这一完整的集成解决方案中完成。
5.2.2 Dreamweaver的安装
1.双击 Dreamweaver MX Installer.exe后，先进行解压缩，然后弹出安装的欢迎界面。点击下一步按钮，就开始安装过程。
2.阅读 Dreamweaver MX软件安装许可证协议，必须选是，才能继续安装。
3.设置软件安装路径。如果不使用默认路径，点击浏览按钮选择安装的位置，设置好后点击下一步按钮
4.设置软件支持文件类型，默认全部选取。
5.完成安装后显示的完成界面。
5.2.3 Dreamweaver的工作界面
Dreamweaver MX提供了一种和原来 Dreamweaver系列不同的操作界面。在软件首次运行的时候会弹出提示窗口，如图
5_8。要求用户进行工作区界面的选择。这样可以使的习惯了
4.0版本的老用户可以在 Dreamweaver MX中使用旧样式的设计界面。
2.界面介绍安装好 Dreamweaver MX 中文版后,运行，选择
Dreamweaver MX工作区后，将看到下面的画面：
5,3 静态网页设计
5.3.1 定义一个本地站点
1.建立文件夹在 D盘（或指定的盘符）建立一个本地站点的文件夹，同时在文件夹内建立多个子文件夹，用于网站不同模块和引用文件的管理。
2.打开站点管理器点击菜单,站点 /新建站点,。弹出的,站点定义对话框,。
5.3.2 页面设置和定位
1.页面设置在 Dreamweaver MX 菜单栏中点击菜单,修改 /页面属性,,弹出页面属性对话框在页面属性对话框中，
主要设置页面的标题，
文字颜色、背景，链接文字和边界等属性，
实际上就是 <body>
标记的参数设置。
（ 2）表格的插入和设置
1）单击工具项中的表格图标，在弹出的对话框中设置表格。设置要创建的表格行和列的数量，点击确定按钮。
选取单个格子，是设置单元格属性内容。
3.表格使用的原则：
① 整个页面不要都套在一个表格里，尽量拆分成多个表格（以行为单位）。
② 单一表格的结构尽量整齐。
③ 表格嵌套层次尽量要少。
④ 当某表格模块需要复杂化的时候，使用表格嵌套。
⑤ 表格尽量使用固定大小即用像素来确定表格大小。
⑥ 表格都要进行居中设置。
5.3.3 文本对象的添加和设置
1.文本添加常用的方式有两种：直接录入和从已有的文档中复制。
2.文本设置
Dreamweaver MX中我们通过文字属性面板，可以直观的设置文字的显示风格。
3.网页文字设置原则：
① 不要使用超过 3种以上的字体。字体太多则显得杂乱，没有统一风格。
② 不要用太大的字。因为版面是宝贵，有限的，
字体过大只能使得网页粗陋。
③ 不要使用不停闪烁的文字。
④ 标题的字体较正文大，颜色也应和正文有所区别。
5.3.4 图片的插入和设置
1.在网页中添加图片
（ 1）设置插入点。在欲插入图片的位置点击鼠标，使光标停留在该处。
（ 2）点击常用工具箱中的插入图像图标 或通过插入菜单 插入 /图片 /来自文件，在弹出的图像浏览窗口中选取图片。点击确定按钮完成插入图片。
2.图片属性设置图片添加到页面后，我们还可以设置它相关的显示风格。如高、宽、替代文字和链接的内容。
5.4 网页修饰
5.4.1 样式表 CSS简介
CSS是 Cascading Style Sheets的简称，中文全称为串接样式表，简称样式表。 CSS用以规范整个网页的排版与风格，并弥补了 HTML规格里的不足，也让网页的设计更为灵活。
5.4.2 样式表的创建
1.创建步骤
（ 1）创建方式
1）通过 Dreamweaver MX，我们可以轻松的创建和修改所需的 CSS样式表。点击菜单,文本 /CSS
样式 /新建 CSS 样式,选项，会弹出新建样式表对话框。
（ 2）类型设置通过新建样式表对话框，我们可以根据需要选择创建一个嵌入网页的样式表或独立的样式表文件。
1.CSS滤镜简介随着网页设计技术的发展，人们已经不满足于原有的一些 HTML标记，而是希望能够为页面添加一些多媒体属性，
例如滤镜的和渐变的效果。 CSS技术的飞快发展使这些需求成为了现实。
CSS扩展部分的 CSS滤镜属性（ Filter Properties），使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的 HTML标记上，例如图片、文本容器、以及其他一些对象。
对于滤镜和渐变效果，前者是基础，因为后者就是滤镜效果的不断变化和更替。
当滤镜和渐变效果结合到一个基本的 SCRIPT小程序中后，
网页设计者就可以拥有一个建立动态交互文档的强大工具。
也就是 CSS FILTER+SCRIPT，这就说明想要建立动态的文档还要一些 SCRIPT（脚本语言）的基础。
5.4.3 CSS滤镜
2.滤镜的使用方法
Dreamweaver MX样式表定义对话框：分类选扩展，过滤器中就是各种滤镜的名称和参数。
5.5表单和客户端脚本
5.5.1 表单
1.表单基础表单是一种特殊的页面标记，主要负责数据采集的功能。它是网页与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下,提交资料,按钮，这样所填资料的数据就会通过专门的 CGI接口传到 Web服务器上。
网页的管理者随后就能在 Web服务器上看到用户填写的资料，
从而完成从用户到网站之间的反馈和交流。
2.创建表单
<form>称为表单标记，用以构建表单模式，属于一个容器标记，其它表单标记需要在它的范围中才有效。
（ 1）创建表单标签。
在 Dreamweaver MX中，打开表单工具箱，工具箱中第一个图标就是表单标签。要想在网页上放置表单控件，必须先创建表单标签。
（ 2）设置表单标签属性表单标签的属性实际上就是表单 <form>标记的参数 。
action="http:// www.cef.cn / cgi-local / example.cgi"
表单通常是与服务端程序配合使用的,参数 action便是用以指明该服务端程序的位置,这样此表单所填的资料才能正确传给服务端程序作处理 。 若没有服务端程序进行测试,可设定此参数为 ACTION="mailto:your@email.com",那样该表单所填的资料将寄到此电邮地址 。
method="POST"
传送资料给服务端程序的的方式,可选值为 POST,GET。
当 method=get时,将输入数据加在 action指定的地址后面传送到服务器；
当 method=post时则将输入数据按照 HTTP传输协议中的 post传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。
3.表单的验证的设置表单的主要功能是提供给用户进行信息的输入,为了防止用户有意或无意的进行错误信息输入,我们对创建好的表单设置规范行为 。
（ 1）选取要设置行为的表单控件。
（ 2） 点击菜单,窗口 /行为,,弹出行为浮动面板,
（ 3） 点击添加事件图标 。 在弹出的菜单中选取,检查表单,项目 。
（ 4） 设置对话框 。
5.5.2 客户端脚本
1,客户端脚本表单接受到的信息一般都是提交到服务端来进行验证和处理。一般对于一个新用户的数据，处理的顺序为先校验数据的合法性，数据不合法就需要返还客户端要求用户重新填写，合法后才进一步处理。这样的校验数据和数据反复既浪费了服务器的宝贵资源又浪费了客户的时间，同时也增加了客户信息泄露的危险。所以我们可以在客户端通过简单的，对客户开放的脚本代码方式，对用户信息进行规范，如用户名和密码不能一样，电子邮件的填写一定要是邮件地址格式和身份证号码长度等问题。这样不但可以及时的提醒用户规范填写，减轻服务器的负担，而且程序的运行是在客户端上，不会对服务器造成任何的不利影响。
JavaScript是一种基于对象 (Object)和事件驱动 (Event Driven)的脚本语言。使用它的目的是与 HTML超文本标记语言,Java 脚本语言（ Java
小程序）一起实现在一个 Web页面中链接多个对象，与 Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的 HTML语言中实现的。
2,JavaScript简介
3,JavaScript实例通过 Dreamweaver MX建立一个空白的网页,切换到代码视图下,在 <head></head>标记之间添加入如下代码：
<Script Language ="JavaScript">
alert("这是第一个 JavaScript例子 !");
alert("欢迎你进入 JavaScript世界 !");
alert("今后我们将共同学习 JavaScript知识 ！ ");
</Script>
说明：
JavaScript代码由 <Script Language ="JavaScript">…… </Script>
来说明 。
在标识 <Script Language="JavaScript">...</Script>之间就可加入
JavaScript脚本 。
Language是 <Script>标记的参数,用来指定脚本所使用的语言,如果使用的是 VBScript,则使用 <Script Language="VBScript">
alert()是 JavaScript的消息对话框事件,其功能是弹出一个具有 OK对话框并显示 （ ） 中的字符串 。
通过 <!--...//-->标识说明：若不认识 JavaScript代码的浏览器
，则所有在其中的标识均被忽略；若认识，则执行其结果。
使用注释这是一个好的编程习惯，它使其他人可以读懂你的语言。
5.6 框架和模板很多站点的网页都有这样一个特点，既标题不变，目录格式相同，但对应目录的内容不一样。若每次打开一个内容都是打开一个完整的网页，
显然显示重复内容会使得显示速度受到影响。现在，我们采用框架技术来解决这个问题。
框架网页实际上是由框架结构页和一些独立的模块分页来构成 。 把不变的标题目录做成模块分页,在显示不同内容的时候,可以只改变一些框架内分页内容 。 框架技术解决了网页重用的难题,同时提高网站设计制作的速度 。
5.6.1网页框架
1.框架的标记和参数
（ 1） 框架标记：
<frameset></frameset> 在 <frameset>标记后是设置网页框架的内容；
<frame src="url"> 在 src="url"设置框架中联结的网页；
<noframes> </noframes> 在 <noframes>标记后的文字将只出现在不支持 FRAMES的浏览器中 。
（ 2） 基本框架页代码：
<HTML>
<HEAD></HEAD>
<FRAMESET>
<FRAMESRC="url">
<NOFRAMES></NOFRAMES>
</FRAMESET>
</HTML>
（ 3） frameset的参数
1） Cols和 rows参数设置框架的模式：
① Cols=#纵向排列的多个窗口的个数和大小
#为 n..数值大小
n%..百分比大小
*..剩余大小
② rows=#横向排列多个窗口的个数和大小
#为 n..数值大小
n%..百分比大小
*..剩余大小
2.建立框架页
（ 1） 新建一个不同页 。 在 Dreamweaver MX中新建一个空白的页面 。
（ 2） 选定框架样式 。
打开框架工具箱，如图 5-66。框架工具栏里罗列了各种常用框架的样式。点击在框架工具箱中选定的框架样式。网页中会自动加载框架
。
（ 3） 保存框架页和各模块分页 。
菜单,文件 /保存全部,。把框架页和各模块页分别命名保存到站点文件夹中。
（ 4）设置框架结构属性
（ 5） 设置框架模块属性 。
对单个框架模块的属性设置需要调出浮动框架面板来进行设置。菜单,窗口 /其它 /框架,。调出的浮动框架面板。在浮动框架面板中选取我们需要设置属性的单个框架模块，属性窗口出现对应的框架属性图 5_68 菜单下拉列表图 5_69 浮动框架面板图 5_70 对应框架属性设置
3.内嵌式框架 （ 内联帧 ）
用于建立内嵌式的框架 。
<iframesrc=”url” name=##>...</iframe>
src 初始页面的 URL
name 框架窗口对象名称
5.6.2模板的应用通常在一个网站中会有几十甚至几百个风格基本相似的页面,如果每次都重新设定网页结构以及相同栏目下的导航条,各类图标就显得非常麻烦 。 不过我们可以借助 Dreamweaver MX 2004的模板功能来简化操作 。
其实模板的功能就是把网页布局和内容分离,在布局设计好之后将其存储为模板,这样相同布局的页面可以通过模板创建,因此能够极大提高工作效率 。
Dreamweaver MX提供的模板技术，可以大大提高网页设计与制作的速度。模板技术使得网站网页制作过程中大量的重复性工作能够一次性完成，大多数情况下，只需要对单一模板进行编辑，就能完成整个网站的修改。因此，模板技术的出现，使得网站建设工作的技术门槛降低、制作效率提高。
1.制作和保存模板制作模板和制作一个普通的页面完全相同,只是不需要把页面的所有部分都制作完成,仅仅需要制作出导航条
,标题栏等各个页面的公有部分,而把中间区域用页面的具体内容来填充 。
（ 1）先在 Dreamweaver MX中运行,文件 /新建,命令
，接着从窗口中依次选定,模板页 /HTML 模板,选项，
点击,创建,按钮之后即可创建一个模板文件。
（ 2）在页面设计视图下插入网页框架、导航条,Flash标题等所有页面公有的内容，然后设置可以修改的区域，最后运行,文件 /保存,命令将这个模板保存下来。
为了避免编辑时候误操作而导致模板中的内容变化，模板中的内容默认为不可编辑，只有把某个区域或者某段文本设置为可编辑状态之后，在由该模板创建的文档中才可以改变这个区域。先用鼠标选取某个区域
（也就是每个页面不同内容的区域），接着点击模板工具箱上的可编辑区域图标，并且在弹出的对话框中为这个区域设定一个名称，这样就完成了编辑区域的设置。
2.应用摸板在 Dreamweaver MX中建立一个新页面，然后执行菜单“窗口 /资源”命令打开资源浮动面板，在资源列表中选取模板，选择一个已经建立好的模板，
然后单击面板上的“应用”按钮即可将此模板应用到页面上了。需要注意的是，应用以后，页面中黄色部分是不可编辑区，此时可以在可编辑区中将包含的文字删除，填写相应的内容，这样就可以快速制作出一个网页文件了。
3.摸板的更新有的时候需要修改某个模板,改变网页的风格 。 这时可以打开模板文件,然后进行修改 。 在资源窗口中选中模板文件,点击鼠标右键,在弹出的菜单中选取,更新站点命令,,见图 5_76。 设置修改使用过这个模板的网页文件 。
本章小结本章给出了一个网站静态页面构建的详细步骤。站点文件夹的设立和关联、页面的布局、页面元素的添加和设置，以及页面元素的修饰等。以达到使读者深入学习和掌握网站页面设计相关知识和技术。
一,练习与思考题
1,如何理解静态页面的概念？
2,请说明下列 HTML文档体参数的属性和所设颜色起到的作用 。
< body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#ff0000
alink=#ff0000>
3,试举处三个常用的单个标记,其作用是什么？
4,什么是 CSS,使用 CSS对网页设计有何影响？
5,使用什么方法可以看到静态页面的源代码？
6、通过 Dreamweaver MX在网页上插入一张名为,图片,jpg”,保存后，用浏览器打开网页，图片无法显示。试说明原因。（试找一张 jpg
格式图片，改名后进行操作验证。）
二,实践题
1.设计一个网上商城的主页和相关分支页面 。
要求：
（ 1） 主页 (index.htm)要有网站标题,以及根据书城这个主题内容定制的相关分支内容的链接,其中必不可少的有我的商店,商品总目录,购物指南,客户留言等分支内容 。 用户购物的导航条,基本流程和样式参 。 主页上有登陆表单和查询表单 。
（ 2） 设计用户注册流程分页 。 在点击主页上的注册链接后,进入用户注册协议书分页,点击同意按钮,进入注册页面 。 注册页面中要求设计提供给用户填写资料的表单组 。
（ 3） 设计商品总目录和购物指南页面 。
2.设计一个顶部和嵌套的左侧框架样式的框架网页 (index.htm),在左侧框架模块的页（ left） 内设置链接，点击后切换主模块（ main） 内的内容。
top
left main
