4.导入数据表并排序表格用于展示数据列表。将特制的文本文件（其中内容以T
ab、逗号、分号或引号等指定分界符分割）导入到Dreamweaver8中，并将其排序。5．格式化表格和单元格1）格式
化表格表格的格式化主要包括：表格的对齐方式、间距与边距的调整、边框的设置及背景的设置。2）格式化单元格单元格的格式化
包括：单元格及其中内容的格式化。3）用设计方案格式化表格使用“格式化表格”命令，可以向表格快速应用一个预定义的设计。
4.5.2用框架布局页面框架是浏览器窗口中的一个区域，可以显示HTML文档。框架集是一个HTML文件，它定义一组框架的布局
和属性，包括框架的数量、框架的大小、框架的位置以及框架中初始页面的URL地址（或不精确的称为网页地址）。框架集网页文件本身不显示
在浏览器中，只是向浏览器说明如何显示一组框架，以及这些框架中应该显示那些文档。在浏览器中查看一组框架，需要在地址栏中输入框架集文
件的URL地址即可，浏览器随后打开要显示在这些框架中的若干相应文档。1．创建框架集网页在创建框架集网页时，若各框架
中网页文件已经存在，需要在创建框架集网页完成后，对各框架分别指定其对应的网页文件若各框架中网页文件并不存在，需要一并创建，创建时
自动指定各框架分别对应的网页文件。2．编辑框架1）删除框架2）设置框架集与框架属性【框架】面板【属性检查器
】3．框架中的链接设置如果希望某框架中的超链接所指向的网页文件能在另一框架中显示，需要设置超链接的链接目标。_bla
nk：在新的浏览器中打开链接文档。_parent：在显示链接的框架的父框架集中打开。_self：在当前框架中打开链接。_to
p：在当前浏览器窗口中打开。各框架名：在指定框架名的框架中打开链接的文档。4．保存框架网页可以单独保存框架集网页和框架
中网页，也可以同时保存所有网页。保存框架集文件。选中框架集后，选择菜单【文件】/【保存框架集】或【文件】/【框架集另存为】，可以
保存框架集文件。保存框架文件。将光标置于某一框架页面，选择菜单【文件】/【保存框架】或【文件】/【框架另存为】，可以保存该框架文
件。保存所有网页。如果选择菜单【文件】/【保存全部】，将保存与该框架集关联的所有文件。4.5.3层1．层的基本概念层
对应的HTML标签为… 。可以把层看作是一个容器，各对象放置在层中布局，通过层可以将网页中的对象布局到任意位
置。层不仅具有表格的平面布局功能，而且还可以在垂直方向上相互重叠，具有空间排版的功能。层具有隐藏和显示功能。在设计网页动态效果
时，往往也使用了层。2．层的基本操作1）层的创建。绘制层。插入层。2）层的选择。【层】面板3）调整层大
小。4）移动层。5）对齐层。3．层的常用属性设置层编号。层的名称层位置。层的左上角相对于页面的位置Z轴。
层的堆叠顺序。在浏览器中，编号较大的层出现在编号较小的层的前面。可见性。该层是否可见。背景图像。层的背景图像。背景颜色。层
的背景颜色。类。用来指定使用的CSS样式。溢出。控制当层的内容超过层的指定大小时如何在浏览器中显示层。剪辑。指定层的显示区域
，在剪辑以外的部分将被隐藏。4.5.4补充实验实验1：使用布局表格，如样张4-5-25所示，设计网页实验2：使用框架
集网页，如样张4-5-28所示，设计网页实验1使用布局表格，设计网页（1）使用布局表格和层，如样张所示，设计网页inde
x.html。（2）当光标移至导航条目“首页”时，显示Flash动画title_2.swf。（3）设置网页标题“梦里江南”。
实验2使用框架集网页，设计网页（1）使用框架集网页，设计框架集网页index.html、上部框架网页top.html及左侧框
架网页left.html，右侧框架中使用相应素材文件。（2）点击左侧框架中6个链接，分别在右侧框架中显示。（3）框架集网页标题
为“梦里江南-景”。4.6制作表单4.6.1表单及表单元素4.6.2创建表单4.6.3补充实验4.6.1
表单及表单元素表单及表单元素主要用于开发动态网页。用户通过浏览器，在表单中输入数据，并提交给Web服务器；在服务器端，We
b服务器处理整批输入的数据，然后动态地生成一个新网页作为响应发送给浏览器显示。4.6.1表单及表单元素1．文本字段、文
本区域2．隐藏域3．复选框4．单选按钮、单选按钮组5．列表/菜单、跳转菜单6．图像域7．文件域8．按钮9．标签
4.6.2创建表单首先插入并设置表单，然后根据设计需要向表单中添加表单元素和页面内容。【动作】框，指定处理该表单
的动态网页或脚本的路径。【方法】下拉列表，选择将表单数据传输到服务器的方法。选项包括默认、POST（在HTTP请求中嵌入表单
数据）和GET（将值追加到请求该页的URL中）。【目标】下拉列表，指定一个窗口，在该窗口中显示调用程序所返回的数据。目标选项：_
blank、_parent、_self等。【MIME类型】下拉列表，指定表单的ENCTYPE属性。4.6.3补充实验（
1）使用表单，如样张所示，设计网页reg.html。（2）使用表格进行布局。（3）共包含上下两个表单。（4）“密码”及“再次
输入密码”字段中不显示明文。（5）提示问题包括：小学名称、中学名称、大学名称、最喜欢的人。4.7制作具有动态特效的网页
4.7.1层和时间轴动画4.7.2Dreamweaver8的Behaviors概述4.7.3补充实验4.7.1
层和时间轴动画1.时间轴可以方便地制作网页中的浮动图标动画，不需要编写脚本代码。2.创建层动画创建层，并在层
中添加动画、文本等内容。将层移至动画开始时应处的位置选中层，打开菜单【修改】/【时间轴】/【在时间轴上添加对象】，在时间
轴的第一个通道中创建了一个动画条单击位于条末端的关键帧标记，使该关键帧处于选中状态，然后在页面中将层移至动画结束时应处于的位置
。曲线动画如果要让层沿曲线移动，先选择其动画条，然后按住Ctrl键并单击动画条中的一个帧，这样就在单击的帧处添加了一个关
键帧。然后，选中该添加的关键帧，在【文档】窗口中将层移至另一个位置。如果希望为动画创建更为复杂的移动轨迹，更为有效的方法是记录
拖动层时经过的轨迹，而不是创建各个关键帧。4.7.2Dreamweaver8的Behaviors（行为）1.Be
haviors（行为）有关的基本概念动作:由预先编写的JavaScript代码组成。这些代码执行特定的任务。事件：由浏览器生
成的消息，指示浏览该网页的用户执行了某种操作。产生事件后，浏览器会执行与该事件所对应的动作。行为：事件和该事件所触发的动作的组合
。在将行为附加到页元素之后，只要该元素发生了指定的事件，浏览器就会调用与该事件关联的动作。2.用层和行为制作动画网页中
使用行为可以实现很多特效及互动功能。层的显示和隐藏示例4.7.3补充实验实验1如样张制作网页菜单（1）使用素
材网页title.html文件，如样张中虚线框所示，制作网页菜单。（2）光标放在“景”上，显示“六大水乡”和“西湖十景”。（3
）光标放在“人”上，显示“江南才俊”和“绝代佳人”。（4）光标放在“诗”上，显示“千古绝唱”和“近代新秀”。
1.菜单栏2.插入工具栏常用布局表单文本HTML应用程序Flash元素收藏夹常用、布局、表单工具栏
3.显示选择栏【代码】：直接显示网页文件的HTML代码。【拆分】：以上下窗口方式同时显示代码和设计视图。【设计】：所见
即所得地设计网页内容。4.标签选择栏标签选择栏，用来快速选择当前选中的对象或它所嵌入的一系列标签对。尤其适合网页对象多次嵌套
时，直接用鼠标较难准确选择的情况。5.属性检查器属性检查器，也称属性面板，用来设置页面中各对象属性及样式。属性检查器功能较
复杂，不同网页对象属性及设置方法也不同。6.浮动面板组【CSS样式】面板……Dreamweaver8的浮
动面板1．【CSS样式】面板2．【应用程序】面板3．【标签检查器】面板4．【文件】面板1．【CSS样式】面板C
SS将内容与表现形式分开：页面内容（即HTML代码）驻留在HTML文件自身中。定义表现形式的CSS规则驻留在另一个文
件（外部样式表）或HTML文档的另一部分（通常为文件头部分）中。2．【应用程序】面板包括【数据库】管理、【绑定】管理
、【服务器行为】管理和【组件】管理4部分，主要用于编辑动态网页。3．【标签检查器】面板【属性】管理设置对象的各种参数及样
式【行为】管理设置对象的各种响应事件及函数（可能需要使用脚本语言）。4．【文件】面板【文件】面板用于查看和管理Drea
mweaver所有站点，并管理站点中各文件和资源管理Dreamweaver8站点1．新建站点2．打开站点（管理站点
）3．创建文件夹4．准备素材文件5．添加网页文件网页设计4.4网页中文本、图像和动画元素4.4.1网页中的
文本元素4.4.2文本超级链接4.4.3图像处理4.4.4在网页中插入Flash动画及其它多媒体4.4.5使用CS
S样式控制站点风格4.4.1网页中的文本元素插入文本和特殊字符添加可选的中文字体【编辑字体列表】设置文本属性字符
格式段落格式【文本】【样式】4.4.2文本超级链接“相对路径”和“绝对路径”每个网页都有一个唯一的地址，称作统一
资源定位器(URL)。链接路径的类型如下。绝对路径：提供所链接文档的完整URL，而且包括所使用的协议，例如:Web页通常使
用http://；FTP站点文件通常使用ftp://文档相对路径：省略掉绝对URL中对于当前文档和所链接的文档都相同的部分，而只
提供不同的路径部分。站点根目录相对路径。使用从站点的根文件夹到文档的路径。用正斜杠（/）表示站点根文件夹。文本链接的应用
1）链接到其它文档或文件。2）书签链接：在页面内部跳转。3）电子邮件链接：打开关联的邮件程序，向指定的邮件地址发送邮件。
4）无址链接和脚本链接：向页面中的对象附加行为。4.4.2文本超级链接4.4.3图像处理1．插入图像：先复制到
站点文件夹中2．设置图像显示大小（文件大小不变）、图像边距、替换文字、低解析度源、对齐方式、边框、添加超级接、图像地图
与热点设置。3．编辑图像（JPEG和GIF格式）1）裁剪。2）修正亮度和对比度。3）锐化图像。4．网页背景
图（【页面属性】）4.4.4在网页中插入动画等多媒体1．插入Flash动画（现有的）插入Flash动画后，使用【属性
检查器】可以设置常用Flash动画属性：大小、边距、是否循环、是否自动播放、品质、显示比例、背景颜色、对齐方式等，另外还可以设置F
lash插件的各种特殊参数。如参数“wmode”设置为“transparent”，表示Flash动画背景将为透明2．插入Fl
ash按钮3．插入Flash文本对象4．插入其它多媒体4.4.5使用CSS样式控制站点风格层叠样式表(Casc
adingStyleSheets，CSS)是一系列格式设置规则，用来控制Web页面内容的外观。使用CSS设置页面格式，可以
将页面内容与表现形式分开。页面内容（即HTML代码）驻留在网页文件自身中；而用于定义表现形式的CSS样式规则可以保存在另一个文
件中（外部样式表文件，通常扩展名为CSS），或者在本网页文档的其它部分（通常放置在文件头部）。1）CSS格式设置规则。CS
S格式设置规则由两部分组成：选择器和声明选择器是标识格式元素的术语声明用于具体定义元素样式。选择器类型可分为如下三类。类
选择器，可应用于任何HTML标签。使用类选择器的规则也被称为自定义CSS规则。标签选择器，重新定义指定标签的外观样式。使用标签选
择器的规则也被称为HTML标签样式规则。高级选择器，用于为某个标签组合或所有包含特定Id属性的标签定义格式设置。2）CS
S样式表的存储位置。根据CSS样式表所在位置，样式表可分为3种。外部样式表，存储在一个单独的外部CSS文件（扩展名为css）中
。在网页文件的头部中指定外部CSS样式表文件链接。一个CSS样式文件可以被链接到站点中的多个页面，这样可以很方便地统一网站风格
。内部（或嵌入式）样式表，保存在在网页文件头部的标签内。内联样式，直接定义在网页的每个具体的
标签中。不鼓励这种做法。3）CSS样式冲突。将两个或更多CSS规则应用于同一文本时，这些规则可能会发生冲突并产生意外的结果
。浏览器按“就近原则”应用CSS规则：如果应用于同一文本的两种规则的属性发生冲突，则浏览器显示最里面的规则（离文本本身最近的规
则）的属性。手动设置的HTML格式会覆盖通过CSS应用的格式。为使CSS规则能够控制段落格式，必须删除所有手动设置的HTML格式
。2．在Dreamweaver8中使用CSS1）创建创建CSS文件创建CSS规则2）编辑CSS规则。3）在网
页文件中使用CSS样式。使用嵌入式CSS样式表中的样式规则。标签选择器或高级选择器样式规则，网页中的相应标签或对象会自动使用
该样式规则类选择器样式规则，需要选中对象后，在【属性检查器】的【样式】选择框中选择该规则使用外部CSS样式表中的样式规则。先在
网页文件中链接外部CSS文件，然后在网页文件中使用CSS规则。4.4.6补充实验实验1：如图4-4-25样张所示
，完成网页。实验2：学习使用CSS样式，制作如图4-4-28样张所示网页。设计实验1（1）如样张所示，设计标题为“周
庄”的网页Web1.html。（2）按样张添加文字，设置字体格式。（3）按样张添加图像。（4）在网页最后添加超链接“周庄百度
百科”（http://baike.baidu.com/view/18218.htm）和“与我联系”（mailto:someone@
163.com）。（5）为网页添加自动播放、循环播放的背景音乐dmgc.mp3。（6）为网页添加透明Flash动画（jy.sw
f）效果。设计实验2（1）创建网页Web2.hmtl（2）创建外部样式表文件mycss.css。（3）在mycss.
css中设计类样式“.txt”：文字16像素、加粗；标签样式“body”，指定网页背景色：“#99CCFF”；通过设计高级样式“a
:link”和“a:visited”，指定网页中超级链接不显示下划线。（4）使用mycss.css中设计的样式，按样张设计网页W
eb2.html。4.5页面布局4.5.1用表格实现页面布局4.5.2用框架布局页面4.5.3层4.5.4
补充实验4.5.1用表格实现页面布局表格在页面布局上有着非常广泛的应用。表格，HTML标签为...able>；行，HTML标签为... ；单元格，HTML标签为... | ；表头，HTML标签为
... | 。1．插入表格可以使用以下三种方法插入一个表格。打开菜单【插入】/【表格】命令。选择【常用
】工具栏，插入表格按钮。选择【布局】工具栏，插入表格按钮。一般说来，布局表格不需要设置高度。表格的宽度最好不要超过一般显
示器的宽度。如果要插入的是一个布局表格，显然不希望用户看到边框线，所以一般设置边框粗细为0。单元格边距指的是单元格边框和单元格
内容之间的距离单元格间距指的是相邻单元格之间的距离2．编辑表格添加行或列。删除行或列。合并单元格。拆分单元格。
3．绘制布局表格和单元格如果表格行列较多且关系较复杂时，可以使用绘制布局表格和单元格的方法。选择【布局】工具栏，【布局
】设计模式。单击【布局表格】按钮，拖动鼠标绘制单击【绘制布局单元格】按钮，拖动鼠标绘制第四章万维网及网页制作基础
本章要点了解万维网的发展、定义及应用掌握HTML的基础语法了解网页浏览和发布原理了解网页布局规划、导航设计及色彩搭配
掌握Dreamweaver8的基本操作掌握网页中运用文本、图像和动画元素的方法掌握几种页面布局的方法掌握制作表单网页的方
法掌握制作具有动态特效网页的方法内容提要4.1万维网概述4.2网页设计基础4.3Dreamweaver8操作
基础4.4网页中文本、图像和动画元素4.5页面布局4.6制作表单4.7制作具有动态特效的网页4.1万维网概
述4.1.1万维网发展及定义1993年，万维网技术解决了远程信息服务中的文字显示、数据连接以及图像传递的问题。现在，万维网的
Web服务器已成为Internet上最大的计算机群。万维网被误当成Internet的同义词，但其实只是靠着Internet运行的
一项服务而已。万维网（“WorldWideWeb”即“WWW”或“3W”）可以看作由一个巨大的全球范围的Web页面集合组成，
这些Web页面简称为网页。网页通过超文本链接实现页面间的跳转。4.1万维网概述万维网以客户/服务器方式工作。网页文件
使用HTML语言编写，存储在Web网站服务器上。用户通过网址访问网页网页文件通过超文本传输协议（HyperTextTrans
ferProtocol，HTTP）传送给用户。万维网联盟（WorldWideWebConsortium，简称W3C。
4.1.2万维网的应用电子商务网上娱乐此外，万维网技术不断完善，也成为很多其它网络应用的有益补充，甚至抢占了许多传统应用
的市场份额。几例典型情况：使用网页方式收发邮件。文件下载也常常使用网页方式发布，FTP业务应用锐减。BBS论坛现在大都使用网
页方式，而非Telnet访问方式。有些企业信息化及网上办公，远程教育网上金融4.2网页设计基础4.2.1HTML语
法基础4.2.2网页浏览原理及发布4.2.3网页布局规划4.2.4导航设计4.2.5色彩搭配4.2.1HT
ML语法基础网页通常以网页文件及其附属文件的形式存在。网页文件最终都采用超文本标记语言（HyperTextMarkupL
anguage，HTML）说明网页中文字和图像的格式设置、层次结构、超文本链接等。有时也在网页文件中加入脚本语言（如javasc
ript、vbscript等）来完成一些不涉及计算机安全的功能。根据页面内容是否固定，页面文件可以分为静态页面文件（以ht
ml或htm为扩展名）动态页面文件（具体扩展名依所采用技术而定，常见的有asp、aspx、php等）。常用HTML标签
4.2.2网页浏览原理及发布Web服务器（WebServer）——接受用户的访问，并返回页面内容，用于在万维网上提
供信息浏览服务。常用的Web服务软件有Microsoft公司的IIS（InternetInformationServices
）和Apache公司的Apache等。网页浏览原理：用户使用浏览器，通过超文本传输协议（HypertextTransferP
rotocol，HTTP），向Web服务器发送页面请求。Web服务器接受请求后，通过HTTP协议，将页面内容发送给浏览器，浏览器解
释页面内容并显示给用户4.2.2网页浏览原理及发布虚拟通信2.网页发布对于个人而言，一般可以租借服务器建立个
人站点，无需单独购买服务器并开通网络服务。目前很多大型网站（如网易等）也都提供了个人主页服务，不需要个人配置Web服务器。用户只
需要将制作完成的网页传输到网站的个人目录下，即可供他人访问。如果拥有独立的Web服务器，则需要配置Web服务器发布网站。
Internet信息服务，IIS4.2.3网页布局规划常见的网页布局：T字型、国字型、匡字型、封面型等。
1．网页布局涉及的基本内容1）页面大小。2）整体造型及配色方案。3）页眉。4）页脚。5）文本。6）图片的使用。7）F
lash动画。8）其它多媒体的使用。音乐、视频等。2．网页布局的设计过程需求分析及可行性分析。设计草图。在纸张上或者使
用图形编辑器（如MacromediaFireworks等）。图形设计人员通常会画出Web站点综合图形的草图（也称为“草样”），
向客户展示并确保站点的初始构思能让客户满意。根据客户的反馈意见、设计人员再次开始对站点布局进行规划，并制作满足客户要求的示例页面
草图。开始借助各种网页设计软件（如MacromediaDreamweaver、Frontpage等）及一些辅助软件完成各网页的
设计。3．网页布局的常用技术1）层叠样式表（CascadingStyleSheets，CSS）。能精确指定某些标签的外
观等属性；可以自定义某种样式以供页面元素使用。2）表格布局。可以非常方便的实现文字对齐、图文混排等布局问题。但是，使用过多表格嵌
套，会对页面浏览速度产生一定影响。3）框架布局。将不同对象放置在不同页面中加以处理，然后再取消框架的边框。由于各对象在不同页面中
，需要在各页面中确定好对象位置，所以已较少使用。4）层布局。层对应的HTML标签为。层就像是一个容器，各对
象放置在层中布局。层不仅具有表格的平面布局功能，而且还可以在垂直方向上相互重叠，具有空间排版的功能。4.2.4导航设计常
见导航条的设计有两种形式：横导航条竖导航条。4.2.5色彩搭配1．计算机中的色彩表示2．设计网站的标准色彩3．
网页色彩搭配的技巧1.计算机中的色彩表示电视三原色：红、绿、蓝（RGB）。三原色光以不同强度比例混合可得到所有颜色的光。颜色分辨率：计算机中用RGB的强度以相同的二进制位数表示，如24bit色彩分辨率，则各色光强度表示为8bit，256种不同强度，一共能表达2^24种不同颜色。十六进制写法：#RRGGBB。例如#00FF00表示纯绿色；#000000为黑色，#FFFFFF表示白色。2．设计网站的标准色彩3．网页色彩搭配的技巧“标准色彩”指一个网站为体现网站形象和内涵而普遍应用的色彩。其他色彩作为点缀、衬托。色彩搭配技巧：一种色彩，不同透明度或饱和度。一个色系。对比色。背景和前景的对比度4.3Dreamweaver8操作基础4.3.1Dreamweaver8窗口简介4.3.2Dreamweaver8的浮动面板4.3.3管理Dreamweaver8站点Dreamweaver8窗口简介Dreamweaver8的操作界面下拉菜单栏插入工具栏显示选择栏标签选择栏属性检查器浮动面板组文档窗口等F4键隐藏或显示所有面板。
|
