Download pdf - LeYb g/QúrHN- Ã yÑ[fQúrHy> · CSS+Div 布局网站框架，完成一个综合网站实例的制作过程。第8、第9 章内容可根据专业设置选讲。每一章的知识点以案例形式进行讲解，所选

高等职业教育“十二五”规划教材

高职高专计算机应用技术系列教材

网页设计案例教程

郭建东主编

朱谋刘红英

何凤钟正菲

王宇川余棉水主审

北京

副主编

科

学出版社

职教技术出版中心

www.abook.cn

内容简介

本书详细介绍了 Adobe CS5 系列软件的基础知识和基本操作，全书共

10 章，第 1～7 章系统介绍了 Dreamweaver CS5 的各项功能，第 8 章介绍

了使用 Photoshop CS5 修改网页图片素材、制作导航、按钮和主页面设计，

第 9 章介绍了使用 Flash CS5 制作动画文字和按钮，第 10 章介绍了采用

CSS+Div 布局网站框架，完成一个综合网站实例的制作过程。第 8、第 9章内容可根据专业设置选讲。每一章的知识点以案例形式进行讲解，所选

案例实用性强，布局美观实用，融艺术与技术为一体。每章后面同样安排

专业性强、美观实用的综合上机实训本书可作为网页设计入门教材，也可作为网页制作从业人员的参考用书。

图书在版编目(CIP)数据

网页设计案例教程/郭建东主编. —北京：科学出版社，2012 （高等职业教育“十二五”规划教材·高职高专计算机应用技术系列

教材） ISBN 978-7-03-034325-3

Ⅰ. ①网… Ⅱ. ①郭… Ⅲ. ①网页制作工具－教材 Ⅳ. ①TP393.092

中国版本图书馆 CIP 数据核字（2012）第 096322 号

责任编辑：孙露露隽青龙 / 责任校对：刘玉靖

责任印制：吕春珉 / 封面设计：耕者设计工作室出版

北京东黄城根北街 16 号邮政编码：100717

http://www.sciencep.com

双青印刷厂印刷

科学出版社发行各地新华书店经销

* 2012 年 7 月第一版 2012 年 7 月第一次印刷

开本：787×1092 1/16 印张：14 1/2

字数：326 000

定价：29.00 元

（如有印装质量问题，我社负责调换<环伟>）

销售部电话 010-62134988 编辑部电话 010-62135763-8212

版权所有，侵权必究

举报电话：010-64030229；010-64034315；13501151303

随着计算机技术的快速发展，上网浏览网页成为获取信息的重要手段，掌握一种网

站制作的应用软件成为计算机及其相关专业人员的必修课，设计一个融美观与实用为一

体的高性能的网站是设计者的追求。Adobe CS5 系列软件包括了深受广大用户欢迎的网

站制作和图像动画制作软件，通过它们可以制作出内容丰富、动态美观的网页。

Dreamweaver CS5、Photoshop CS5、Flash CS5 是网页设计师必备的工具软件。本书共 10 章，第 1～7 章通过案例详细地介绍了使用 Dreamweaver CS5 创建静态网

页的基础知识和设计技巧，第 8 章介绍了 Photoshop CS5 网页设计入门，第 9 章为 Flash CS5 动画设计入门，各章主要内容如下：

第 1 章介绍了网页的基本概念、基本元素和应用 Dreamweaver CS5 创建网站和网页

的基本操作。第 2 章介绍了网页中文本、图像和媒体对象等网页元素的添加与格式设置，以及页

面链接等基本知识和技巧。第 3 章介绍了表格、表格布局页面和采用框架进行页面设计的基本知识。第 4 章介绍了 CSS 样式表、使用 CSS 美化页面、Div 元素、横向导航制作和采用

CSS＋Div 进行页面布局。第 5 章介绍了网页表单的制作和利用行为创建动感网页。第 6 章介绍了模板和库的概念、模板的制作及应用、库项目的创建及应用。

科

学出版社


www.abook.cn


ii

第 7 章介绍了 HTML 的基础知识。第 8 章介绍了使用 Photoshop CS5 修改网页中的图片素材、制作导航条、制作按钮

等，最后介绍了网页主页面美工设计制作过程。第 9 章介绍了使用 Flash CS5 制作文字动画和动画按钮的过程。第 10 章结合企业项目介绍了一个综合网站实例的制作过程，包括网站的规划、整

体设计、页面布局、板块的设计构思与制作、网站的测试与发布过程。本书的编写力求体现高职高专培养高技能应用型人才的教学目标，全书以案例讲解

为主线，将每一知识点融合在精美的案例网页中，使其具有较强的应用性和示范作用。

每章后面都附有上机实训，供读者课外巩固所学内容。本书由郭建东、朱谋、刘红英、何凤和钟正菲共同编写。其中，第 1 章和第 4 章由

郭建东编写，第 2 章和第 7 章由刘红英编写，第 3 章由郭建东、何凤共同编写，第 5 章

由何凤编写，第 6 章和第 10 章由朱谋编写，第 8 章和第 9 章由钟正菲编写。全书由郭

建东统稿，余棉水审核。另外伍杰华、王宇川、张小兰参与了本书的编写和校对工作，

黄丽媚、沙佩等为本书提供了部分图片素材。由于作者水平有限，书中疏漏和错误之处在所难免，欢迎广大读者提出宝贵意见。

第 1章网页设计基础························································································································· 1

1.1 网页基本概念 ························································································································ 1 1.2 网页的基本元素 ··················································································································· 2 1.3 常用网页编辑工具 ··············································································································· 3 1.4 Dreamweaver CS5 的工作环境 ························································································· 4 1.5 站点的建立与管理 ··············································································································· 6

1.5.1 站点的创建与管理 ········································································································ 6

1.5.2 站点文件的管理 ············································································································ 7

1.5.3 站点的更新与上传 ········································································································ 9

1.6 网页文档的基本操作 ·········································································································10 1.6.1 创建空白文档网页 ·······································································································10

1.6.2 设置页面属性 ···············································································································10

1.6.3 编辑页面·······················································································································13

1.6.4 浏览页面·······················································································································14

上机实训 1·······································································································································15 第 2章 Dreamweaver CS5 网页制作 ··························································································16

2.1 创建基于文本的网页 ·········································································································16

科

学出版社


www.abook.cn

网页设计案例教程 iv

2.1.1 添加文本内容 ···············································································································16

2.1.2 设置文本格式 ···············································································································18

2.2 图像的插入和编辑 ··············································································································22 2.2.1 插入图像·······················································································································22

2.2.2 设置图像属性 ···············································································································25

2.2.3 图像的编辑···················································································································26

2.2.4 设置图像对齐方式 ·······································································································26

2.2.5 插入鼠标经过图像 ·······································································································27

2.3 创建基于图文混排的网页 ································································································28 2.3.1 插入水平线···················································································································28

2.3.2 插入日期·······················································································································29

2.4 插入多媒体对象 ··················································································································30 2.4.1 插入 Flash ·····················································································································30

2.4.2 插入 ActiveX ················································································································31

2.4.3 插入电影·······················································································································32

2.5 创建背景音乐 ·······················································································································34 2.5.1 声音文件格式 ···············································································································34

2.5.2 嵌套声音·······················································································································34

2.5.3 添加背景音乐 ···············································································································34

2.6 使用超链接 ···························································································································35 2.6.1 文本链接·······················································································································36

2.6.2 图像链接·······················································································································37

2.6.3 锚点链接·······················································································································39

2.6.4 邮件链接·······················································································································40

2.6.5 下载链接·······················································································································40

2.6.6 空链接 ··························································································································40

上机实训 2·······································································································································41 第 3章表格与框架 ····························································································································43

3.1 创建表格 ································································································································43 3.2 表格的基本操作 ··················································································································45

3.2.1 选择表格························································································································45

3.2.2 设置行数和列数 ············································································································46

3.2.3 设置表格大小 ················································································································47

3.2.4 设置表格边框 ················································································································49

3.2.5 设置表格背景 ················································································································50

3.2.6 设置单元格属性及表格的嵌套 ·····················································································52

3.2.7 表格数据的导入/导出 ···································································································54

3.2.8 表格的排序 ····················································································································55

3.3 用表格制作课程表 ··············································································································56

目录 v

3.4 用表格布局网页 ··················································································································59 3.5 框架与框架集 ·······················································································································63

3.5.1 创建框架························································································································64

3.5.2 编辑框架························································································································65

3.5.3 设置框架和框架集属性·································································································67

3.5.4 用框架制作网页 ············································································································70

上机实训 3·······································································································································72 第 4章 CSS 美化及布局页面 ·········································································································77

4.1 使用 CSS 美化页面·············································································································77 4.1.1 CSS 概述························································································································77

4.1.2 CSS 样式分类 ················································································································80

4.1.3 样式的创建和引用 ········································································································80

4.1.4 设置及编辑 CSS 样式属性····························································································82

4.1.5 CSS 样式应用 ················································································································87

4.1.6 用 CSS 制作横向导航 ···································································································90

4.2 AP Div 层·······························································································································96 4.2.1 创建 AP Div 层 ··············································································································96

4.2.2 AP Div 层的基本操作····································································································97

4.2.3 AP Div 层应用实例 ·······································································································98

4.3 Div 标签 ·································································································································99 4.4 使用 CSS+Div 布局页面 ·································································································100

4.4.1 使用模板新建 CSS＋Div 布局的页面 ········································································101

4.4.2 一列固定宽度布局 ······································································································103

4.4.3 一列自适应宽度布局 ··································································································104

4.4.4 4 行 2 列固定宽度布局································································································104

4.4.5 4 行 3 列固定宽度布局································································································106

上机实训 4·····································································································································108 第 5章表单与行为 ··························································································································113

5.1 认识表单 ······························································································································ 113 5.2 表单对象 ······························································································································ 115 5.3 表单案例 ······························································································································ 117

5.3.1 布局注册页面 ·············································································································· 117

5.3.2 插入文本域 ·················································································································· 117

5.3.3 插入单选按钮 ··············································································································120

5.3.4 插入复选框 ··················································································································121

5.3.5 插入列表/菜单 ·············································································································122

5.3.6 插入按钮······················································································································123

5.4 行为概述 ······························································································································124 5.4.1 行为的基本知识 ··········································································································124

科

学出版社


www.abook.cn

网页设计案例教程 vi

5.4.2 行为面板和行为菜单 ··································································································125

5.4.3 事件 ·····························································································································126

5.5 行为的基本操作 ················································································································126 5.6 使用 Dreamweaver 自带的行为 ·····················································································127

5.6.1 添加弹出提示信息的行为···························································································127

5.6.2 交换图像······················································································································128

5.6.3 拖动 AP 元素 ···············································································································129

5.6.4 显示隐藏元素 ··············································································································131

5.6.5 转到 URL·····················································································································132

5.6.6 设置状态栏文本 ··········································································································133

5.6.7 设置放大缩小图片 ······································································································134

上机实训 5·····································································································································135 第 6章模板和库·······························································································································137

6.1 模板·······································································································································137 6.1.1 模板的概念 ··················································································································137

6.1.2 创建模板······················································································································137

6.1.3 插入模板对象 ··············································································································139

6.1.4 用模板创建网页 ··········································································································140

6.2 库 ···········································································································································142 6.2.1 创建库项目 ··················································································································142

6.2.2 编辑库项目 ··················································································································143

6.2.3 使用库项目 ··················································································································143

6.2.4 创建库项目实例 ··········································································································143

上机实训 6·····································································································································145 第 7章 HTML 基础 ··························································································································147

7.1 HTML 文件结构 ················································································································147 7.2 HTML 元素属性 ················································································································148 7.3 HTML 常用标记及属性介绍··························································································150

7.3.1 <p>、<pre>和<br>标记·······························································································151

7.3.2 <div>与</div>标记 ······································································································153

7.3.3 列表 ·····························································································································153

7.3.4 <img>标记 ···················································································································155

7.3.5 <a herf="URL">…</a>································································································156

7.4 加密 HTML 代码 ···············································································································157 7.5 清理 HTML 代码 ···············································································································157 上机实训 7·····································································································································158

第 8章使用 Photoshop 制作图片素材 ·····················································································160

8.1 网页图片基础 ·····················································································································160 8.1.1 网页中常用的图片格式·······························································································160

目录 vii

8.1.2 网页图片使用原则 ······································································································161

8.1.3 网页图片素材来源 ······································································································162

8.2 Photoshop CS5 简介 ··········································································································162 8.2.1 Photoshop CS5 操作界面简介 ·····················································································162

8.2.2 工具箱··························································································································163

8.2.3 图层简介······················································································································164

8.3 修改图片素材 ·····················································································································166 8.3.1 自由变换图层大小 ······································································································166

8.3.2 调整图片色调 ··············································································································168

8.3.3 调整图片亮度对比度 ··································································································169

8.3.4 移花接木······················································································································169

8.4 绘制网页元素 ·····················································································································171 8.4.1 网站导航条制作 ··········································································································171

8.4.2 网站中独立按钮制作 ··································································································173

8.5 优化和导出图片 ················································································································176 8.6 网页设计实例 ·····················································································································178

8.6.1 需求分析······················································································································178

8.6.2 头部设计······················································································································178

8.6.3 主体设计······················································································································180

上机实训 8·····································································································································184 第 9章 Flash 动画素材制作··········································································································185

9.1 认识 Flash CS5 ···················································································································185 9.1.1 启动 Flash CS5·············································································································185

9.1.2 Flash CS5 操作界面 ·····································································································185

9.1.3 Flash 工具箱 ················································································································187

9.1.4 层、帧和 Action Script 3.0 脚本··················································································188

9.2 Flash 在网站设计中的应用·····························································································189 9.3 Flash 文本动画效果制作 ·································································································190 9.4 Flash 按钮制作 ···················································································································194 上机实训 9·····································································································································195

第 10 章网站规划、建设、发布与维护 ····················································································196

10.1 网站前期规划···················································································································196 10.1.1 网站主要功能和定位·································································································196

10.1.2 市场分析····················································································································196

10.1.3 内容规划····················································································································197

10.1.4 网页设计····················································································································197

10.2 网站制作实例···················································································································197 10.2.1 网站前期规划 ············································································································197

10.2.2 网站结构图 ················································································································198

科

学出版社


www.abook.cn

网页设计案例教程 viii

10.2.3 首页布局设计 ············································································································198

10.2.4 各板块设计构思 ········································································································199

10.2.5 用 CSS+Div 搭建网站框架························································································200

10.2.6 设计和插入 Banner····································································································204

10.2.7 制作导航····················································································································205

10.2.8 制作左侧内容栏 ········································································································206

10.2.9 制作中部主体部分 ····································································································208

10.2.10 制作底部 ··················································································································212

10.2.11 制作附页 ··················································································································213

10.3 测试网站····························································································································216 10.3.1 浏览器兼容性检测 ····································································································216

10.3.2 链接检测····················································································································217

10.4 发布网站····························································································································217 10.4.1 使用 Dreamweaver CS5 自带工具上传站点······························································218

10.4.2 使用 FlashFXP 上传文件···························································································219

上机实训 10 ··································································································································220 参考文献 ·················································································································································221

Java 程序设计与实训 0

认识网页的基本元素了解网页设计常用工具熟悉 Dreamweaver CS5 的工作环境掌握网站的建立与管理掌握网页的基本操作

1.1 网页基本概念

1. 网页

网页以网络为载体向全球用户传播信息和共享资源，是网页设计、网络技术和媒体

技术等多学科知识融合交叉运用的结果。网页一般由文字、图片等组成，复杂的网页包

括声音、视频、动画等多媒体信息。网页追求实用性，同时也追求美观性。美观实用是

网页设计者的追求。

2. 网站

网站是互联网上通过网络技术展示特定内容的网页的集合，网站按内容可分为如下

几种类型。展示企事业单位形象和公开信息的网站，如学校网站。从事电子商务活动的网站，如海尔商城、京东商城、各类团购网站等。综合信息门户网站，如新浪、腾讯等。娱乐休闲类网站，如游戏网站、交友网站、博客网站、论坛、聊天室等。行业网站，如房地产网站、中国中小企业信息网等。

学习要点

科

学出版社


www.abook.cn


2

3. 浏览器

用户安装在计算机上用于阅读网页信息的浏览嚣有各种类型，目前常用的有

Internet Explorer（简称 IE）、谷歌 Chrome、火狐 Firefox、苹果 Safari、腾讯 TT 等。

4. 网址 URL

URL 是统一资源定位地址（Uniform Resource Locate）的简称，指出文件在 Internet中的位置。一个完整的 URL 地址由通信协议名、Web 服务器地址、文件在服务器中的

路径和文件名四部分组成。

5. 网页的分类

在网页设计中，通常将网页分为静态网页和动态网页。纯粹 HTML 格式的网页通

常被称为静态网页，是相对于动态网页而言的，是指没有后台数据库、不含程序和不可

交互的网页。HTML 格式的静态网页也可以出现各种动态的效果，如.gif 格式的动画、

Flash、滚动字母等。动态网页以数据库技术为基础，可以大大减少网站维护的工作量。

1.2 网页的基本元素

传统的网页元素按作用可分为网页标题、网站标记、页眉、导航栏、内容区和页脚等。

1. 网页标题

网页标题显示在浏览器窗口的标题栏中，用于标识网页的内容。网页标题设计应注

意包含关键字，标题设计合适可以提高网页在搜索引擎上的曝光率。

2. 页眉

传统的网页布局通常分为上中下三部分，上面部分便为页眉。通常将网站的标

志、宣传口号、广告等放在页眉处，一些综合门户网站也把导航、登录、注册等放

在页眉处。

3. 导航栏

导航栏是网页的重要组成部分，用于引导用户快速进入到网站各主题内容页面，实

现站内页面之间的跳转。导航栏可以是文字链接，也可以通过图片、代码实现链接功能。

导航栏一般位于页眉下面、页眉内、页眉顶部，也有的在内容区左侧或右端。随着互联

网技术的发展，网站页面风格桌面化将成新的趋势，页面中导航栏将以图标形式展示，

可占据页面的大部分空间。导航栏设计要方便用户点击访问、不影响页面美观。

4. 内容区

内容区是网页的主体元素，主要由文字、图片组成，根据网站的主题，还可添加声

音、视频、各类动画等多媒体素材。

第 1章网页设计基础

3

5. 页脚

页脚位于网页的底端部分，通常用于放置版权信息、联系方式等网页的辅助信息。此外，网页根据需要还可添加功能区、广告区、友情链接等辅助内容。

1.3 常用网页编辑工具

1. Dreamweaver

Adobe Dreamweaver 是由 Macromedia 公司开发的网站开发工具，是一个全面的、

专业的、可用于设计并部署网站和 Web 应用程序的工具集。它提供强大的编码环境以及

功能强大且基于标准的可视即可得的设计界面。Dreamweaver CS5 新增加了如下功能。 CSS3/HTML5 支持：通过 CSS 面板设置样式，可支持新的 CSS3 规则。设计

视图支持媒体查询，可使用 HTML5 进行前瞻性的编码，提供代码提示和设计

视图渲染支持。 jQuery 集成：借助 jQuery 代码提示加入高级交互性。允许为网页轻松加入各种

交互性，借助针对手机的起动模板快速启动。借助 PhoneGap 构建本机 Android 和 iOS 应用程序：借助新增的 PhoneGap 功能

为 Android 和 iOS 构建并打包本机应用程序。借助开放源代码 PhoneGap 框架可

将 HTML 代码转换为手机应用程序。 Adobe BrowserLab 集成：使用查看、诊断和比较工具预览动态网页和本地内容。

可以跨网络浏览器和操作系统快速、准确地测试网络内容。

2. Photoshop

Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修

改、图像制作、广告创意、图像输入与输出于一体的图形图像处理软件。可以利用它制

作网页的整体效果图再将其转换成网页，也可以利用它设计网页 Logo、导航条、广告

图像等。

3. Flash

采用 Flash 进行网站开发是指用 Flash 软件作为开发平台，网页内容以 Flash 图形和

动画为主，比较适合做文字内容不太多，以平面、动画效果为主的应用，如企业品牌推

广、特定网上广告、网络游戏、个性网站等。

4. ASP.NET

ASP.NET 是微软公司推出的 ASP 的进阶版，于 2003 年推出第 1 版，底层采用.Net框架。ASP.NET 的引入改变了 Web 编程模型，能够更好、更快地构建 Web 应用程序，

提高编程人员的开发效率，并可通过公共语言运行库（CLR）选择多种语言进行网站

开发。

科

学出版社


www.abook.cn


4

5. PHP

PHP 于 1994 年诞生，早期简称原本为 Personal Home Page，是 Rasmus Lerdorf 为了要维护个人网页，用 C 语言开发的一些 CGI 工具程序集。

通过不断发展，2004 年发布了 PHP 5，其中包含了许多新特色，强化了面向对象功

能，引入了 PDO（PHP Data Objects），还进行了许多效能上的增强。PHP 相对于其他语

言，具有编辑简单、实用性强等特点。PHP 具有开放源代码、免费、快捷性、跨平台性

等主要特色。随着 PHP 技术的成熟和完善，PHP 已经从一种针对网络开发的计算机语

言发展成为了一个适合于企业级部署的技术平台。

6. JSP

JSP（Java Server Pages）是由 Sun Microsystems 倡导的一种动态网页技术标准。采

用 Java 编程语言编写类 XML 的 tags 和 scriptlets 来封装产生动态网页的处理逻辑。网页

可通过 tags 和 scriptlets 访问存在于服务端的资源的应用逻辑。JSP 将网页逻辑与网页设

计和显示分离，支持可重用的基于组件的设计，使基于 Web 的应用程序的开发变得迅

速和容易，同时具有跨平台的特性。

1.4 Dreamweaver CS5 的工作环境

Dreamweaver CS5 包含一个全新的界面，支持最新的 HTML 和 CSS，所见即所得的

界面适合网页设计入门首选工具，也给专业网页设计者提供了一个 Web 应用程序设计、

编码和开发的良好平台。Dreamweaver CS5 设计界面如图 1-1 所示。

菜单栏文件名视图选择

文档窗口

状态栏

属性面板

标题

面板组

图 1-1 Dreamweaver CS5 设计界面

1. 菜单栏

菜单栏包括【文件】、【编辑】、【查看】、【插入】、【修改】、【格式】、【命令】、【站点】、

【窗口】和【帮助】10 组菜单，包含了网页编辑的大部分操作命令。


5

【文件】菜单：用于对网站中的文档进行基本的操作与管理，如【新建】、【打开】、

【保存】等命令。【编辑】菜单：用于对网页文档进行编辑修改等操作，如【查找】、【剪切】、代

码提示工具、参数设置等命令。【查看】菜单：设置工作界面的显示方式，设置页面元素和相关工具栏的显示与

隐藏。如【缩放比例】、【设计代码视图】、【可视化助理】、【网格线】、【辅助线】

等命令。【插入】菜单：提供“插入栏”的扩充项，用于将合适的对象插入到当前文档，

如插入图像、媒体、HTML 等命令。【修改】菜单：更改选定的页面对象的属性，包括修改表格属性，为库和模板执

行不同的操作等。【格式】菜单：设置文本的格式，如设置段落格式、对齐及字体等命令。【命令】菜单：提供对 Dreamweaver 各种命令的访问，包括清理 HTML、扩展

管理、拼写检查等命令。【站点】菜单：用于创建和管理站点，包括上传网站等命令。【窗口】菜单：用于显示和隐藏 Dreamweaver 中的面板和窗口，如“插入”面板、

“属性”面板、“文件”面板、框架等。【帮助】菜单：提供使用 Dreamweaver 及更新等帮助信息，如支持中心、交流中

心、更新等命令。

2. 文档窗口及视图

文档窗口显示当前编辑的网页文档内容，可分别在“设计视图”、“代码视图”、“拆

分视图”、“实时视图”中查看文档。设计视图：可见即可得的设计界面，让用户在可视化界面中快速进行网页开发。代码视图：可能在代码视图中手工编写 HTML、JavaScript 等代码以实现网页开

发，或查看网页代码。拆分视图：同时展示一个文档的代码视图和设计视图。实时视图：提供页面在某一浏览器中的非可编辑的、更逼真的呈现外观，在不

必离开 Dreamweaver 工作区的情况下提供另一种实时查看页面外观的方式。检

查模式与实时视图一起使用可快速识别 HTML 元素及其关联的 CSS 样式。实时代码：实时代码视图中显示的代码类似于从浏览器中查看页面源时显示的

内容，只提供浏览器中页面的源，但实时代码视图是动态的，并会随着实时视

图与该页面交互而进行更新。

3. 状态栏

状态栏位于文档窗口底部，提供与正在创建的文档有关的其他信息。

4. 属性面板

“属性”面板会随着编辑的内容而变化，用于设置页面上正在编辑的内容的属性。

科

学出版社


www.abook.cn


6

5. 面板组

除了“属性”面板外的其他浮动面板，包括“文件”、“资源”、“CSS 样式”、“AP元素”、“插入”面板等。可以通过【窗口】菜单选择这些面板的隐藏或显示方式。以“插

入”面板为例，图 1-1 中第一次启动 Dreamweaver CS5 时“插入”面板默认浮动在右边，

可将其拖放到菜单栏下变成工具栏面板，如图 1-2 所示。

图 1-2 改变“插入”面板的停靠位置使其变成水平工具栏

1.5 站点的建立与管理

网站由多个网页组成，建立网页前，需要根据网站目标及需求确定网站名称，并建

立网站文件夹以存放网页文件。网站名称要有可读性，尽量不使用中文命名。站内文件

尽量分类管理，如图片文件存放在网站文件夹下的 images 文件夹下，样式文件存放在

CSS 文件夹下，等等，以方便站内文件的管理。

1.5.1 站点的创建与管理

1. 创建站点

单击【站点】→【新建站点】命令，弹出如图 1-3 所示对话框，在“站点名称”文

本框中输入所建的网站名称，如 ch01，在“本地站点文件夹”文本框中输入网站存放的

路径，如 F:\ch01，如果 F 盘下没有 ch01 文件夹，则自动创建一个作为网站文件夹。或

单击文本框右边的“浏览文件夹”按钮选择网站文件夹。

2. 管理站点

单击【站点】→【管理站点】命令，弹出

如图 1-4 所示的“管理站点”对话框，在此对话

框中也可进行新建站点的操作。选中图 1-4 中的

ch01 站点，再单击“编辑”按钮，可对站点名

称和站点保存路径进行修改，网站路径更改后，

在【文件】面板中显示更改后的新路径下的网

站内容。另外，还可通过“删除”、“复制”按钮对网站进行删除和复制操作。在图 1-3 所示的对话框中单击高级设置，可看到如图 1-5 所示的站点高级设置选

项，有“本地信息”、“遮盖”、“设计备注”、“文件视图列”、“Contribute”、“模板”和

“Spry”共 7 个选项，可根据需要进行相应的设置。

图 1-3 新建站点对话框


7

图 1-4 “管理站点”对话框图 1-5 站点高级设置选项

1.5.2 站点文件的管理

1. 新建文件夹和文件

网站文件要求分类管理，将不同类型的文件放在相应的文件夹中，建立了名为“ch01”的网站后，用鼠标右键单击【文件】面板中的网站名，在弹出的快捷菜单中可选择【新建

文件】也可选择【新建文件夹】等操作，如图 1-6 所示。选择【新建文件夹】，将文件夹

命名为“images”，在图片文件中存放网站所需素材。在快捷菜单中选择新建文件，默认

文件名为“untitled.html”。也可通过【文件】→【新建】命令新建一个 HTML 类型文件。

图 1-6 新建文件和文件夹

2. 主页文件

每一个网站第一个被打开的页面叫主页，Dreamweaver 开发平台默认的静态网站主

页文件名为 index.html。在文件面板中单击 untitled.html 文件，将文件名改为 index.html。

3. 首选参数设置

首选参数用来控制 Dreamweaver 用户界面的常规外观和行为，以及与特定功能（如

科

学出版社


www.abook.cn


8

层、样式表、显示 HTML 和 JavaScript 代码、外部编辑器和在浏览器中预览等共 19 项，

单击【编辑】菜单→【首选参数】命令，出现如图 1-7 所示的对话框。

图 1-7 【首选参数】对话框

首选参数的设置针对站内所有页面起作用，各个分类功能如下。常规：包括是否显示欢迎屏幕、站内文件移动后是否更新、文档输入时是否允

许多个连续空格设置等。 AP 元素：设置 AP 元素的大小、背景颜色、图像等。 CSS 样式：设置创建、编辑样式规则时包括的项。标记色彩：包括鼠标滑过、可编辑区域、库项目等色彩设置。不可见元素：包括是否显示锚标记、注释、换行符等。代码改写：设置是否自动改写页面中的特定符号。代码格式：设置 HTML 代码的默认格式。代码提示：在代码视图中编辑代码时是否自动提示。代码颜色：设置代码视图中代码的默认背景色等。辅助功能：对表单、框架、媒体和图像在插入时是否显示辅助功能属性。复制/粘贴：设置从其他应用程序复制/粘贴内容到设计视图时的格式控制。文件比较：通过第三方应用程序比较两文件。文件类型/编辑器：指定在代码视图中自动打开的文件扩展名，指定不同媒体类

型的编辑器。新建文档：指定新建文档时默认的类型及编码。验证程序：使用验证程序快速定位代码中的标签或语法错误时所采用的参照对象。在浏览器中预览：设置一个或多个浏览嚣。站点：指定始终显示哪个站点（远程或本地），以及本地和远端文件显示在哪个

“文件”面板窗格。默认情况下，本地站点始终显示在右侧。设置采用 FTP 连接

时的相关参数。状态栏：状态栏高度和宽度的设置。字体：设置站内文件的默认字体及字号。


9

4. 命名规范

网站设计需要对站点、网站中的文件、文件夹进行合理命名。良好的命名规范在网

站开发、维护上都起到了至关重要的作用。命名规范是一种约定，也是程序员之间良好

沟通的桥梁。命名的基本原则是：使用独一无二的、小写、不带空格的名称，名称应由字母和数

字组成，并以字母开始，名称中可以包含“_”符号。命名不能与系统中事先定义的名字相同，良好的命名能够使人顾名思义，可读性好。

1.5.3 站点的更新与上传

网站设计好之后要上传到远程服务器才能被正常浏览，可采用 Dreamweaver CS5 自

带的站点管理上传文件。

1. 检查网站的链接

Dreamweaver CS5 提供对整个网站链接快速检查功能，找出断掉的链接、孤立文件

和外部链接。选择【站点】→【检查站点范围的链接】命令，弹出如图所示 1-8 所示的

“链接检查器”面板。

图 1-8 “链接检查器”面板

在“链接检查器”面板中，可分别对网站中断掉的链接进行修改，检查外部链接是

否正确，是否有孤立文件，无用的孤立文件需要进行删除，以免占用服务器资源。

2. 设置 FTP 服务器

在图 1-4 所示的“管理站点”对话框中单击“编辑”按钮，再选择左边的服务器选

项，进入如图 1-9 所示的“站点设置对象”对话框，单击对话框右侧列表框下的图标

添加新服务器，进入如图 1-10 所示的界面进行 FTP 服务器设置。

图 1-9 添加服务嚣图 1-10 设置上传网站服务嚣

科

学出版社


www.abook.cn


10

FTP 服务器设置如下。连接方式：选择 FTP。用户名和密码：是向服务器申请的 FTP 登录用户名和密码（或由服务器管理员

分配）。根目录：是指上传到服务器的目录。 Web URL：自动根据服务器的 FTP 地址和根目录自动生成，是上传成功后访问

网站的网址。

3. 上传本地文件

设置好上传服务器的信息后，在“文件”面板中单击“连接到远端主机”按钮，

连接成功后，在【站点】菜单中选择【上传】命令或右键单击站点名称，选择“上传”

命令，即可上传文件。

1.6 网页文档的基本操作

1.6.1 创建空白文档网页

新建空白网页文档有如下两种方法。方法一：在“文件”面板中右键单击网站名，选择【新建文件】添加默认的 HTML

文件，所建文件将自动出现在网站中。方法二：在【文件】菜单中单击【新建】命令，出现如图 1-11 所示的对话框。

在左边框中可选择“空白页”、“空模板”、“模板中的页”等，选择“空白页”选项，可

看到除了可新建 HTML 类型文件外，还可新建 CSS、库项目等文件，对所新建的 HTML空白页还可选择布局类型。新建 HTML 文件的默认名为 Untitled-1，文件不会自动出现

在站点中，需要单击【文件】→【保存】命令对新建文件进行重命名和选择保存位置。

图 1-11 “新建文件”对话框

1.6.2 设置页面属性

双击站点中的 index.html 文件，在设计视图下，单击“属性”面板中的“页面属性”

按钮，进入如图 1-12 所示的“页面属性”对话框。


11

图 1-12 “页面属性”对话框

Dreamweaver 为“页面属性”对话框的“外观（CSS）”、“链接（CSS）”和“标题

（CSS）”类别中指定了所有属性定义 CSS 规则，这些规则嵌入在页面的 head 部分中，

只适用于本文档。“外观（HTML）”、“标题/编码”和“跟踪图像”类别则使用 HTML设置页面属性。页面属性分类中各标签的功能如下。

外观（CSS）：通过自动生成名为 body 的 CSS 类样式控制页面的外观，包括字

体、文本颜色、背景颜色、背景图像、背景图像是否重复及如何重复显示方式、

页的上下左右边距设置。外观（HTML）：所设置的属性值添加在页面的<body>标签里。链接（CSS）：通过自动生成链接样式控制页面中超链接的字体、颜色等，页面

中的超链接文字自动引用定义好的链接样式。标题（CSS）：通过自动生成标题样式供页面文字引用。标题/编码：指定在“文档”窗口和大多数浏览器窗口的标题栏中出现的页面标

题，指定文档中字符所用的编码。跟踪图像：指定在复制设计时作为参考的图像。该图像只供参考，当文档在浏

览器中显示时并不出现。

1. 设置外观（CSS）

以 ch01 网站为例，使 index.html 为当前活动窗口，在设计视图下进入文件的“页面

属性”对话框，选择“外观（CSS）”选项，在右边框中单击背景图像右边的浏览按钮，

选择页面的背景图像为网站 images 文件夹下的 1_3.jpg 图片，图片的重复属性分别可选

择下面几种方式： no-repeat：背景图片不重复。 repeat：背景图片自动往水平垂直方向重复显示。 repeat-x：背景图片往水平方向重复显示。 repeat-y：背景图片往垂直方向重复显示。

这里所给出的背景图原图大小为 25×25 像素，为了铺满整个页面，选择“repeat”，如图 1-12 所示。

2. 设置标题（CSS）

在“标题（CSS）”属性框中设置标题 1 右边的下拉列表框，可选择标题字号大小，如

科

学出版社


www.abook.cn


12

果字号超过下拉列表框中所设置的，则可在框中直接输入，本例中输入 48，如图 1-13 所示，

表示标题 1 字号为 48 像素大小。用鼠标单击右下角的黑色三角，弹出字体颜色选择框

进行字体颜色设置，本例中设置标题 1 的字体颜色的编码为＃30C，如图 1-13 所示。

图 1-13 设置“标题（CSS）”属性

3. 查看生成的样式代码

单击“确定”按钮回到设计视图，切换到代码视图，在<head>和</head>标签之间

可看到自动生成的样式代码如下： <style type="text/css"> body { background-image: url（images/1_3.jpg）; background-repeat: repeat; } h1 { font-size: 48px; color: #30C; } </style>

4. 设置外观（HTML）

在 ch01 网站中添加名为 index2.html 的文件，设置 index2.html 页面属性中的外观

（HTML）中的背景图像为网站 images 文件夹下的 1_2.gif 图片，如图 1-14 所示。

图 1-14 设置外观（HTML）


13

单击“确定”按钮，在设计视图中可看到背景图片自动在整个文档窗口向右向下重

复出现，因为在“外观（HTML）”属性窗口中无法设置背景图像是否允许重复出现。

在代码视图下可看到在<body>标签中添加的代码为：<body background="images /1_2.gif" >。

1.6.3 编辑页面

1. 设置标题格式

选择 index.html 为活动文档，在设计视图下，添加“我的第一个网页”几个字，选

中所输入的文字，在“属性”面板左下角单击图标，如图 1-15 所示。设置格式为

标题 1，可看到字体已变大为 48 像素，颜色为白色。

图 1-15 设置文字为标题格式

单击“属性”面板左下角的图标，“属性”面板内容值如图 1-16 所示。在“目

标规则”下拉列表框中选择 h1，再单击居中对齐图标，使标题 1 内容在页面居中显

示。在设计视图下可看到刚才输入的文字已经居中对齐了。

图 1-16 设置标题文字居中

2. 输入空格

在 index.html 页面上，将光标定位在标题最后一个字符后按 Enter（回车）键，在新

的行输入两个空格，输入连续两个或以上空格，有如下两种方法。方法一：在如图 1-7 所示的“首选参数”对话框的“常规”选项中，勾选“允许

多个连续的空格（M）”选项。方法二：将输入法设置为全角输入。

3. 文字输入和格式设置

在页面输入一段文字，按回车键进行分段换行。在设计视图和实时视图中都可看到

文字在页面中并不居中，而是偏向了左边。选中要设置居中的文字，在“属性”面板中

进行格式设置的步骤如下。 01 在图 1-16 所示“属性”面板的“目标规则”下拉列表框中选择<新 CSS 规则>，

然后单击按钮，进入图 1-17 所示的“新建 CSS 规则”对话框，选择器类型为

“类”，输入选择器名称为“style1”，单击“确定”按钮，进入如图 1-18 所示的类型样式

设置界面。 02 在图 1-18 中，设置字体（Font-family）为“仿宋”，字体大小（Font-size）为 14

科

学出版社


www.abook.cn


14

像素，字体颜色（Color）为蓝色、代码为＃36F，设置行间距（Line-height）为 30 像素。

图 1-17 新建样式规则

图 1-18 类型样式设置

03 单击图 1-18 左边分类框中的“区块”，进入如图 1-19 所示的区块样式设置对

话框，设置文本为水平对齐（Text-align），方式为居中（center）。

图 1-19 区块样式设置文本对齐方式

04 单击“确定”按钮，在设计视图下可看到文本内容已经居中，并按所设置的

样式显示。

1.6.4 浏览页面

除在设计视图或实时视图查看页面设计效果外，还可通过浏览器查看真实的运行效


15

果。在如图 1-20 所示的界面中单击图标，选择在 IExplore 中预览运行效果。

图 1-20 选择预览页面效果的浏览器

在图 1-20 中，还可通过“编辑浏览器列表”来添加浏览器，使网页能在不同的浏

览器中查看运行效果。页面效果图如图 1-21 所示。

图 1-21 页面效果图

上机实训 1

1. 根据所给素材完成下面的上机操作。操作步骤如下： 01 创建一个本地站点，添加图片文件夹 images 和主页文件 shangji.html。 02 在 shangji.html 文件中添加背景颜色或图片，修改样式，设置页面大小为宽度

800 像素和高度 600 像素，使页面居中显示。 03 在页面中插入文本，并使文本居中显示。 2. 浏览页面运行效果如图 1-22 所示。

图 1-22 上机运行效果图

科

学出版社


www.abook.cn

Java 程序设计与实训 16

创建基于文本的网页在网页中插入图片素材在网页中插入媒体对象在网页中添加背景音乐在网页中添加超链接创建图文混排的网页

2.1 创建基于文本的网页

文本是网页中基本的元素和信息载体，是网页存在的基础。对网页文档格式进行

合理设置，不仅可以使网页内容更加充实，而且可使页面更加美观。

2.1.1 添加文本内容

1. 创建网站、文件夹及网页文件

创建名为“ch02”的网站，并在网站中添加“image”文件夹用于存放图片素材，

在“文件”面板中用鼠标右键单击网站名，在弹出的快捷

菜单中选择“新建文件”命令，创建空白文档并命名为

add_text.html，如图 2-1 所示。

2. 添加文档内容

双击 add_text.html 文件名进入文档编辑状态，如图 2-2 所示。

学习要点

图 2-1 从“文件”面板

创建文档

第 2章 Dreamweaver CS5 网页制作

17

图 2-2 文档编辑状态

在文档中添加内容是一项非常重要的工作，方法

主要有三种：直接输入、导入其他文档、从其他文档

复制并粘贴到本文档。方法一：直接输入。在 add_text.html 文档中

直接输入文本“唯美爱情”，如图 2-3 所示。方法二：导入文本。在 add_text.html 文档中，

将鼠标光标置于“唯美爱情”文本的后面，选择【文

件】→【导入】→【WORD 文档】命令，打开“导

入文档”对话框，选择 2-1 文件夹下的唯美爱情

1.doc”，在“格式化”下拉列表中选择需要的格式如

图 2-4 所示，单击打开导入文本，如图 2-5 所示。

图 2-4 “导入文档”对话框图 2-5 导入 Word 文档

图 2-3 输入文本

科

学出版社


www.abook.cn


18

方法三：复制和粘贴。在 add_text.html 文档中，将鼠标光标置于第二段文本的后

面，然后打开文本素材“唯美爱情 2.doc”，全选并复制所有文本如图 2-6（a）所示，在

add_text.html 中选择【编辑】→【粘贴】命令或者【编辑】→【选择性粘贴】命令，把

文本粘贴到网页。在粘贴的过程中因为有些文档是有格式的，可以根据需要选择是否需

要相应的格式，如图 2-6（b）所示。

（a）全选并复制文本（b）选择性粘贴文本格式设置

图 2-6

2.1.2 设置文本格式

1. 设置文本的字体、大小和颜色

根据实际需要设置网页中文本的字体、大小和颜色。（1）在“属性”面板中设置字体样式在 2_1\add_text2.html 中选择【修改】→【页面属性】命令，打开“页面属性”对话

框，在“外观（CSS）”分类中定义页面文本的字体、大小和颜色，如图 2-7 所示。

图 2-7 “页面属性”设置

（2）在代码视图中修改样式或添加新样式为文本添加样式还可以通过代码来完成，首先选择要添加样式的文本，然后在“插

入”面板的布局菜单中选择 div 标签，为标签命名，使用标签的命名在代码编辑页面中

添加文本的样式，输入代码编辑文本样式。还可以通过编辑规则按钮来修改和添加新样

式，效果如图 2-8 所示，样式代码如下：


19

#xin2{  color:#F08;  font-family:"宋体";  font-size:18px;  font-weight:bolder;  }

图 2-8 在代码视图中修改样式

1. 先选择文本再定义样式，文本会自动对该样式添加引用语句。 2. 样式定义后再应用到内容，则选择要应用样式的内容后，在“属性”面板的

“目标规则”中选择样式名。

（3）使用样式选择文档标题下的第 1 段文本，在“属性”面板的“字体”下拉列表中选择“黑体”，

在“大小”下拉列表中选择“20”，单位为 px，在“颜色”文本框中输入“#0000ff”，如图 2-9 所示。

图 2-9 设置文本的字体、大小和颜色

2. 设置行距

调节网页中文本的行距主要有两种方式：一种是默认方式；另一种是通过代码来设定。方法一：段落间距。一般在文档编辑器中使用回车键进行分段换行，但是这种方

式的行距比普通行距要大一些，如果想使行距为默认方式，则可以按组合键“<Shift>+ <Enter>”来完成，效果如图 2-10 所示。

说明

科

学出版社


www.abook.cn


20

图 2-10 默认行距示例

方法二：代码设定。通过代码来设定网页中的文本，行距就是统一的。选定需要

修改行距的文本段落，新建 CSS 规则样式，在“规则定义”对话框中选择“类型”标签，

设置合适的 line-height 属性值。例如： line-height:2；表示设置为 2 倍行距。 line-height:25px；表示设置行距为 25 像素高。效果如图 2-11 所示。如果整个页面中的文本需要统一的行距，那么可以在新建 CSS样式中重定义名

为 body的标签样式，设置 line-height属性值。

图 2-11 使用代码修改文字行距

3. 设置粗体、斜体、下画线

这里所说的文本样式主要是指粗体、斜体、下画线等样式，在 Dreamweaver CS5 中

可以通过下面三种方式设置文本样式。

说明


21

方法一：在“属性”面板中，单击按钮和按钮可以给文本设置粗体或者斜体

样式。方法二：在【格式】→【样式】菜单中选择相应命令也可以对文本设置演示，如

下画线、删除线等。方法三：在“插入”面板中，切换到“文本”选项卡，将出现“文本工具”面板，

单击相应的按钮也可以设置粗体或者斜体样式。

4. 文本对齐方式

文本的对齐方式通常有四种：左对齐、居中对齐、右对齐和两端对齐。可以通过选

择文本，右击鼠标，然后通过对齐命令完成设置，或者通过【格式】→【对齐】中的相

应命令来实现，如图 2-12（a）所示。如果同时设置多个段落的对齐方式，则需要先选

中这些段落，效果如图 2-12（b）所示。

（a）文字对齐设置

（b）文字对齐效果

图 2-12

5. 文本的缩进与凸出

在文档排版过程中，有时会遇到需要使某段文字向内或向外凸出的情况。选择【格

科

学出版社


www.abook.cn


22

式】→【缩进】（或者【凸出】）命令，可以使段落整体向内缩进或向外凸出。还可以

通过“属性”面板的凸出图标和缩进图标来设置，如果同时设置多个段落的缩

进与凸出，则需要先选中这些段落。如图 2-12（b）中红色文本在设置缩进两次后的

效果如图 2-13 所示。

图 2-13 文本的缩进

2.2 图像的插入和编辑

图像是文本的说明及解释，如果在文档的适当位置上放置一些图像，不仅可以使文

本清晰易读，而且可使文档更加具有吸引力。目前，网页中使用的图像格式主要有 GIF、JPEG（包括 JPG 和 JEPG）和 PNG 三

种。GIF（图形交换格式）：多只能显示 256 种颜色，可以制作网络动画及透明图像。

适合于色彩要求较低的导航条、按钮、图标和项目符号等。JEPG（联合图像专家组标

准）：压缩率很高，可显示大约 1670 万种颜色。适合于对色彩要求较高的风景画、照片

等。PNG（可移植网络图形）：是一种替代 GIF 格式的无专利权限制的格式，它包括对

索引色、灰度、真彩色图像以及 Alpha 通道透明的支持。

2.2.1 插入图像

在页面插入图像，主要有下面四种途径。选择【插入】→【图像】命令。在“插入”面板中单击（图像）按钮。在“文件”面板中选中图像并拖曳到文档中。在“资源”面板中选中图像并单击按钮或直接拖曳到文档中。

在网页中插入图像的步骤如下。 01 在网站中新建 HTML 网页文件，命名为 addPicture.html。


23

02 将鼠标定位在 addPicture.html 要插入图像的位置，选择【插入】→【图像】

命令，在打开的“选择图像源文件”对话框，选择 image\1.jpg”，如图 2-14 所示。

图 2-14 “选择图像源文件”对话框

03 单击按钮，弹出提示对话框，询问是否将

图像文件复制到网站的根目录下，如果所插入的图像不在

网站中，则弹出如图 2-15 所示对话框。将图像复制到网站

根目录下，一般要求将所插入的图像先复制到网站的图片

文件夹中。 04 单击按钮，打开“复制文件为”对话框，

在“保存在”下拉列表中选择根文件夹下的“image”文件

夹，编辑页面如图 2-16 所示。

非背景像片

背景图像

图 2-16 插入图像页面

05 单击按钮，弹出“图像标签辅助功能属性”对话框，如图 2-13 所示。 1）在“替换文本”文本框中可以输入图像的名称、描述或者其他信息，用于图像

不能正确加载时显示的替换信息。

图 2-15 提示对话框

科

学出版社


www.abook.cn


24

2）在“详细说明”文本框中可以定义详细说明文件的位置。 3）通过单击对话框下面的链接可打开“首选参数”对话框，取消勾选“图像”复

选框，如图 2-18 所示，以后就不会出现如图 2-17 所示的对话框。

图 2-17 “图像标签辅助功能属性”对话框图 2-18 “首选参数”对话框

除了通过菜单命令插入图像外，还可以选择下面几种方式插入图像。在“插入”面板中单击（图像）按钮，在打开的“选择图像源文件”对话框

中选择素材文件“image\ 2.jpg”，如图 2-19 所示。

图 2-19 在“插入”面板中选择图像

在“文件”面板中的“image”文件夹下选中图像文件“image\3.jpg”等图像将

其拖曳到文档中，如图 2-20 所示。

图 2-20 在“文件”面板中选择图像

在“文件”面板组中切换到“资源”选项卡，进入“资源”面板，单击面板左侧


25

的（图像）按钮，在文件列表框中选择图像文件“image\4.jpg”等图片文件，

并单击按钮（也可以直接拖曳到文档）。插入图像的效果如图 2-21 所示。

图 2-21 在“资源”面板中选择图像

2.2.2 设置图像属性

将图像插入到指定位置后，还可以利用“属性”面板（如图 2-22 所示），设置图像

的属性，以便达到佳效果。

图 2-22 图像“属性”面板

1. 改变图像大小

宽和高：是在浏览器中为图片所保留的宽度和高度，默认单位是像素，也可以用点、

英寸、毫米为单位。

2. 设置图像的垂直边距与水平边距

垂直边距：是图像在垂直方向与文本或其他页面元素的间距。水平边距：是图像在水平方向与文本或其他页面元素的间距。

3. 设置图像注释

替换：在此可输入图像的注释。当用户的浏览器不能正常显示图像时，便在图像的

位置用这个注释代替图像。

4. 设置图像边框

边框：用来设置环绕图像四周边框的宽度，单位是像素。如果输入 0，则表示没有

边框。

科

学出版社


www.abook.cn


26

5. 设置图像的其他属性

除了上述列出的图像属性外，通过图像“属性”面板还可以设置以下属性。地图：用于制作映像图。源文件：是图片的具体路径，通过单击按钮来选择图片。链接：是链接的目标页面或定位点的 URL。目标：是链接时的目标窗口或框架。

2.2.3 图像的编辑

在图像“属性”面板中，还可以对图像进行编辑。（编辑）按钮：单击该按钮，将在 Photoshop 中处理图像，结果在文档中即

时生效。（剪裁）按钮：单击该按钮，将直接在 Dreamweaver 中对图像进行剪裁，图

像剪裁后无法恢复到原始状态。（重新取样）按钮：有时用户会在 Dreamweaver 中手动改变图像的尺寸，如

加宽或者缩小，并不是按比例缩放的，这时图像会发生失真，使用此功能，可

以使图像尽可能地减少失真。（亮度和对比度）按钮：可以改变图像显示的亮度和对比度。（锐化）按钮：可以改变图像显示的清晰度。

2.2.4 设置图像对齐方式

1. 图像在页面中的对齐

与设置文本在页面中的对齐方式类似，单击“属性”面板中的对齐按钮、或，

即可将图像按照相应的对齐方式进行对齐。

2. 图像与周围内容的对齐

“属性”面板中的“对齐”下拉列表用于指定图像与周围内容的对齐方式。其方法

是先选中图像，然后在“属性”面板中的“对齐”下拉列表框中选择下列一种对齐方式

中的一种。默认值：默认为基线对齐方式。基线：图像与文本或其他对象的基线对齐。顶端：图像顶部与当前行中高的元素（文本或其他对象）对齐。居中：图像中部与当前行对象的基线对齐。底部：图像与文本或其他对象的底部对齐。文本上方：图像与当前行中高的字母对齐。绝对居中：图像与当前行中的对象绝对中部对齐。绝对底部：图像与当前行中的对象绝对底部对齐。左对齐：图像放置在对象的左边。右对齐：图像放置在对象的右边。


27

图 2-23 所示为几种图像与周围内容的对齐方式。

将所选图像放置在左边，文本在图像的右侧换行，如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。

左对齐对象换到一个新行。将图像的中部与当前行中文本的中部对齐。

将所选图像放置在右边，文本在图像的左侧换行，如果右对齐文本在行上处于对象之前，它通常强制右对齐换到一个新行。

图 2-23 设置对齐

2.2.5 插入鼠标经过图像

“鼠标经过图像”是网页特效中的一种。当鼠标经过图像时，该图像将被另一幅图

像所代替，当鼠标从图像上移走的时候，原图像恢复；单击鼠标，将跳转到其链接的页

面。在网页中插入图像的操作步骤如下。 01 打开 addtext.html 文件，选择右侧表格，

然后选择菜单【插入】→【图像对象】→【鼠标经

过图像】，如图 2-24 所示。 02 弹出的【插入鼠标经过图像】对话框如

图 2-25 所示。在“图像名称”文本框中输入鼠标经

过图像的名称。 03 在“原始图像”文本框中，单击“浏览”并选择在载入页面时显示的图像“a.jpg”。 04 在“鼠标经过图像”文本框中，单击“浏览”并选择在鼠标箭头经过原始图

像时显示的图像“b.jpg”。

image/a.jpg

image/b.jpg

Image1

图 2-25 【插入鼠标经过图像】对话框

05 在“替换文本”文本框中输入替换文本。 06 在“按下时，前往的 URL”文本框中，单击“浏览”选择用户单击鼠标经过

图像时要打开的页面；完成“插入鼠标经过图像”对话框的设置，单击“确定”按钮。

图 2-24 插入鼠标经过图像

科

学出版社


www.abook.cn


28

07 保存文件，按下 F12 键，打开浏览器预览网页，就可以看到鼠标经过图像的

变化效果，如图 2-26 所示。

如果鼠标经过图像中的这两幅图像大小不同，Dreamweaver 会自动调整第 2

幅图像的大小，使其和第一幅图像匹配。

图 2-26 网页轮换图像效果

2.3 创建基于图文混排的网页

2.3.1 插入水平线

在网页中经常需要插入水平线，以协调网页的美感。下面介绍如何插入水平线。

1. 创建水平线

在网站中添加名为 2_3.html 的网页文件，在文档编辑窗口将鼠标光标定位在插入水

平线的位置，然后执行下列操作之一，即可插入水平线。方法一：选择菜单【插入】→【HTML】→【水平线】命令。方法二：在常用工具栏中单击（水平线）按钮，如图 2-27 所示。

图 2-27 插入水平线

2. 修改水平线

如果需要对默认的水平线进行修改，则要定义一个类样式，在类样式中重新定义需要

修改的水平线的属性，如高度、宽度、颜色等，在文档中选中水平线，执行【窗口】→【属

性】命令打开“属性”面板，如图 2-28 所示。

图 2-28 水平线的“属性”面板

提示


29

水平线：指定水平线 ID，用于标识该对象。高：输入水平线的高度，以像素作为单位。宽：在右边的下拉列表中，可以选择单位为“像素”或者是“百分比”。对齐：设置水平线在水平位置上的对齐方式，左对齐、右对齐、居中对齐或者

右对齐，也可以选择默认。阴影：选择该复选框，则水平线带有阴影效果，取消选择此选项将使用纯色绘

制水平线。类：通过类可以定义水平线的格式，如引用定义了文本颜色的类，可将该颜色

应用到水平线。在图 2-28 中的“类”样式选择框中选择设定好的类样式可以进行水平线样式修改。

通过类的引用设置水平线的高度和颜色示例如图 2-29 所示。

图 2-29 水平线示例

2.3.2 插入日期

许多网页页脚位置都有日期，而且每次修改之后都会自动更新该日期。在网页中插

入日期的步骤如下。 01 在页面 2_3.html 中将鼠标定位在需要插入日期的位置，水平线的下面。 02 选择菜单【插入】→【日期】命令或者在“插入”面板中，单击（日期）

按钮。 03 在出现的“插入日期”对话框中选择星期格式、日期格式和时间格式。 04 如果希望在每次保存文档时都更新插入的日期，请勾选“储存时自动更新”

选项，如图 2-30 所示。

05 单击“确定”按钮，日期便以选定的格式出现在指定位置，如图 2-29 所示。 06 如果选择了“储存时自动更新”，则在日期格式插入到文档中后可以对其进

行编辑，单击日期，在“属性”面板上选择“编辑日期格式”，如图 2-31 所示。

科

学出版社


www.abook.cn


30

图 2-30 “插入日期”对话框图 2-31 日期的“属性”面板

2.4 插入多媒体对象

媒体技术的发展使网页设计者能够轻松自如地在页面中加入声音、动画、影片等内

容，使制作的网页充满了乐趣，更给访问者增添了几分欣喜。在 Dreamweaver CS5 中媒

体的内容包括 Flash 动画、Flash 视频、Shockwave 影片、插件、Applet、ActiveX 等。下

面介绍向网页中插入 Flash 动画、ActiveX、Flash 电影的方法。

2.4.1 插入 Flash

在网页中插入 Flash 的步骤如下。 01 在网站中添加名为 addMedial.html 的网页文件。 02 将光标移至文档要插入 Flash 的地方。 03 单击“常用”工具栏中的媒体图标，在下拉菜单中选择 SWF 命令，或者

通过菜单【插入】→【媒体】→【SWF】命令，如图 2-32（a）和图 2-32（b）所示。在

弹出的对话框中选择一个 SWF 格式的文件。

图 2-32（a）通过工具栏操作图 2-32（b）通过菜单命令操作

04 插入的 Flash 动画显示为一个灰色的方框，里面的 Flash 标志显示为灰色，如

图 2-33 所示。 05 选择 Flash 标志可以修改 Flash 动画的属性，如图 2-34 所示。高和宽：Flash 的高度和宽度，以像素作为单位。对齐：设置水平线在水平位置上的对齐方式，左对齐、右对齐、居中对齐，也

可以选择默认。文件：Flash 的文件路径，也可以通过后面的按钮来修改 Flash 的源文件路径。背景颜色：Flash 区域的背景色。


31

图 2-33 插入 Flash 动画

类：有无使用样式。参数：打开一个对话框，可在其中输入传递给影片的附加参数。品质：在影片播放期间控制抗失真。设置越高，影片的观看效果越好，但这需

要更快的处理器以使影片在屏幕上显示。循环：在选中该选项时影片将连续播放；若没有选中该选项，则影片在播放一

次后即停止播放。自动播放：如果选中该选项，则在加载页面时自动播放影片。垂直边距和水平边距：指定影片上、下、左、右空白的像素数。比例：确定影片如何适应在宽度和高度文本框中设置的尺寸，该下拉框中有如

下几个选项。默认值：设置显示整个影片。无边框：使影片适合设定的尺寸，因此无边框显示并维持原始的纵横比。严格匹配：对影片进行缩放以适合设定的尺寸，而不管纵横比如何。

图 2-34 Flash 动画的“属性”面板

06 按下 F12，查看结果，如图 2-35 所示。

2.4.2 插入 ActiveX

在网页中插入 ActiveX 元素的步骤如下。 01 将光标移至 addMedial.html 页面要插入 ActiveX 的地方。

科

学出版社


www.abook.cn


32

图 2-35 Flash 动画预览

02 单击“常用”工具栏中的媒体图标，在下拉菜单中选择 ActiveX，如图 2-36所示。

03 在页面会出现一个符号，该标记标记出 ActiveX 在 Internet Explorer 中的位置。

04 插入对象后，如图 2-37 所示。

图 2-36 插入 ActiveX 控件图 2-37 插入 ActiveX 控件

05 单击 ActiveX 图标可以修改其属性，如图 2-38 所示。

图 2-38 ActiveX 控件的“属性”面板

2.4.3 插入电影

在网页中插入电影的步骤如下。 01 将光标移至 addMedia.html 网页要插入 Shockwave 电影的地方。 02 单击“常用”工具栏中的媒体图标，在下拉菜单中选择 Shockwave，然


33

后在弹出的“选择文件”对话框中选择一个 Shockwave 文件，如图 2-39 所示。

图 2-39 “选择文件”对话框

03 选择 Shockwave 影片图标可以修改影片属性，如图 2-40 所示。

图 2-40 Shockwave 的“属性”面板

04 按 F12 预览效果，如图 2-41 所示。

shockwave ActiveX 控件

媒体元素欣赏

插入多媒体元素

图 2-41 插入 Shockwave 影片预览

科

学出版社


www.abook.cn


34

2.5 创建背景音乐

在网页中添加声音可以使网站具有灵魂，在阅览网页的时候伴随流畅的声音会使人

心神愉悦。下面介绍网页中添加声音的方法。

2.5.1 声音文件格式

网页支持的声音文件格式有：.midi 或.mid（乐器数字接口）、.wav（Waveform 扩展

名）、.aif（音频交换文件格式，即 AIFF）、.mp3（运动图像专家组音频，即 MPEG-音频

层-3）、.ra、.ram、.rpm 或 Real Audio 等格式。

2.5.2 嵌套声音

在网页中插入音频文件的步骤如下。 01 在网站中添加文件夹 2_5，在文件夹中添加网页文件 addMusic.html，在页面

合适的位置单击鼠标左键，确定插入点的位置。 02 选择菜单【插入】→【媒体】→【插件】命令，或者在媒体子面板中单击图标。 03 在弹出的“文件选择”对话框中，选择本站点目录下的一个声音文件，如

图 2-42 所示。 04 在“属性”面板中设定声音文件播放区域的相关参数，按 F12 预览，如图 2-43

所示。

图 2-42 选择声音文件图 2-43 预览

2.5.3 添加背景音乐

设置背景音乐有两种方法：分别用<bgsound>和<embed></embed>标签。当用<embed>插入背景音乐时，可以设置宽度和高度为 0，隐藏播放器。

1） <bgsound>标签：用来插入背景音乐，但只适用于 IE，其参数设定为<bgsound src= "your.mid" autostart=true loop=infinite>。其中：


35

src="your.mid" 是设定背景音的路径，可以是相对路径，也可以是绝对路径。 autostart=true 是否在音乐档下载完之后就自动播放。true 表示自动播放。 loop=infinite 是否自动反复播放。loop=2 表示重复两次，Infinite 表示重复多次。

2）< embed >：</ embed >用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU等，Netscape 及新版的 IE 都支持。其常用参数设定为<embed src="your.mid" autostart ="true" loop="true" hidden="true" />，其中：

src="your.mid" 是设定背景音的路径，可以是相对路径，也可以是绝对路径。 autostart=true 是否在音乐档下载完之后就自动播放。true 表示自动播放。 loop="true" 表示自动反复播放。loop=2 表示重复两次，loop="false"表示不循环

播放。 hidden="true" 表示完全隐藏播放器画面。

另外一些参数的意义如下： starttime="分:秒"用于设定歌曲开始播放的时间。 volume="0-100" 用于设定音量的大小，数值为 0～100。内定则为使用系统本身

的设定。 width="整数"和 high="整数" 用于设定控制面板的高度和宽度。（若 hidden

="no"）。 align="center"用于设定控制面板和旁边文字的对齐方式，其值可以是 top、

bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom。 controls="smallconsole" 用于设定控制面板的外观。预设值是 console。console

为一般正常面板，smallconsole 为较小的面板。 playbutton 只用于显示播放按钮。 pausecutton 只用于显示暂停按钮。 stopbutton 只用于显示停止按钮。 volumelever 只用于显示音量调节按钮。

在 2.5.2 小节 addMusic.html 文件中嵌入声音的代码如图 2-44 所示。

图 2-44 添加背景音乐的代码

2.6 使用超链接

超链接是 WWW 技术的核心，是网页中重要、根本的元素之一。超链接能够

使多个孤立的网页之间产生一定的相互联系，从而使单独的网页形成一个有机的整体，

利用超链接还可以使网页链接到相关的图像文件、多媒体元素以及下载程序等。在创建超链接之前，首先应了解网站中三种类型的文档路径：绝对路径、根目录相

对路径和文档相对路径。绝对路径：是包含服务器协议（对于网页来说通常是 http://或 ftp://）的完全路

科

学出版社


www.abook.cn


36

径，绝对路径包含的是精确地址而不用考虑源文件的位置。但是，如果目标文

件被移动，则链接无效。创建外部超链接时必须使用绝对路径。根目录相对路径：是从当前站点的根目录开始的路径。站点上所有可公开的文

件都存放在站点的根目录下。根目录相对的路径使用斜杠以告诉服务器从根目

录开始。文档相对路径：是指和当前文档所在的文件夹相对的路径。这种路径通常是

简单的路径，可以用来链接和当前文档处于同一文件夹下的文档。

2.6.1 文本链接

在网页中设置文本链接的步骤如下。 01 在网站中建立一个名为 addLink.html 的网页文件，在网页上选择需要添加超

链接的文本，此时“属性”面板成为文本超链接的“属性”面板，如图 2-45 所示。

图 2-45 文本超链接“属性”面板

02 在“属性”面板上指定文本的链接目标。可按以下四种方法指定文本的超

链接： 1）单击“Link”文本框右侧的文件夹按钮，在弹出的“选择文件”对话框中选择

链接的目标文件。 2）在文本框中直接输入目标的绝对路径。 3）利用“属性”面板上的指向文件按钮，为文本加入超链接。 4）选择【修改】→【打开链接页面】命令，也可打开“选择文件”对话框，如

图 2-46 所示。


37

图 2-46 “选择文件”对话框

03 选择相关链接文件，单击按钮，可发现选择文字下面出现下画线，说

明建立链接。 04 在“属性”面板中选择目标右侧的下拉列表，可以设置链接页面显示的方式。 blank：将目标文件载入到新的浏览器窗口中。 parent：将目标文件载入到父框架集或包含该链接的框架窗口中。 self：将目标文件载入与该链接相同的框架或窗口中。 top：将目标文件载入到整个浏览器窗口并删除所有框架。

在使用框架时，目标中的选项会根据框架的结构自动添加选框架标题，_parent、

_top一般在框架页面时有效。

05 按 F12 预览链接页面。

2.6.2 图像链接

1. 图像链接

在文件 addLink1.html 中选择所需建立超链接的图片，此时“属性”面板为图片超

链接的“属性”面板，在面板中可以通过链接选项选择链接的页面，然后在目标选项中

设置页面显示的方式，如图 2-47 所示。

2. 设置图像热点链接

通过“属性”面板的“地图”面板也可以设置图片的超链接。首先，选择要设置地

图的图片，然后在“地图”面板中选择选区的示意图，可以是方形、圆形和多边形；其

注意

科

学出版社


www.abook.cn


38

图 2-47 图片超链接的“属性”面板

次，通过链接按钮可以设置图片链接的页面；后，在目标选项设置页面的显示方式中

设置替换文字，如图 2-48 所示。

图 2-48 地图应用

3. 按 F12 预览网页

图像链接不像文本链接那样会发生许多提示，图像本身不会发生改变，只是在预览

网页时，当鼠标指针经过带链接的图像时，指针的形状变为“手”的形状。单击图像就

会打开所链接的文档。


39

2.6.3 锚点链接

锚点，也称为书签，用来标记文档中的特定位置，使用其可以跳转到当前文档或其

他文档中的标记位置。在网页中加入锚点包括两方面的工作，一是在网页中创建锚点；

二是为锚点建立链接。其实现步骤如下。

01 将光标移到 add_text.html 需要加入锚点的地方，一般是将光标放置在一行或

是一段文字的开头部分。 02 单击“常用”工具栏上的插入锚点

按钮，将弹出“命名锚记”对话框，如图 2-49所示。

03 在对话框的“锚记名称”文本框中输

入锚点的名称。 04 单击按钮，执行完上述操作

之后，则在光标处出现一个代表锚点的图标。 05 选择想要链接到锚点的文字或图片，在“属性”面板上的“链接”文本框中

输入符号 # 和锚点名称，确定后，锚点链接文字带下画线，效果如图 2-50 所示。

图 2-50 锚点设置后的效果

在链接锚点时，应注意以下事项：在#和锚点名之间不要留有空格，否则链接会失败。符号#必须是半角符号，而不能为全角符号。

注意

图 2-49 “命名锚记”对话框

科

学出版社


www.abook.cn


40

2.6.4 邮件链接

在网页中设置邮件链接的步骤如下。 01 将光标置于网页中要添加 E-mail 链接的地方，或选中文字“联系我们”。 02 通过“常用”面板上的邮件链接按钮，弹出“电子邮件链接”对话框。 03 如果未选中文字，可以在“文本”文本框中添加所需文字；如果已经选中

超链接文字，将会在“文本”文本框中自动显示，

如图 2-51 所示。 04 然后在“电子邮件”文本框中输入 E-mail

地址，单击按钮。 05 电子邮件链接设置成功。

2.6.5 下载链接

在网页中建立下载链接的步骤如下。 01 在文件 addLink3.html 中选择建立链接的文字“爱情只是古老传说”。 02 选择主窗口的“属性”面板，在“链接文件”后面选择按钮，找到需要链

接的目标文件，单击按钮，链接文字会出现下画线以表示链接设置成功，效果

如图 2-52 所示。

图 2-52 下载链接

03 按 F12 预览，单击下载链接文字，则弹出“另存为”对话框。在对话框中可

以定义文件的存储位置，效果如图 2-53 所示。

2.6.6 空链接

空链接是一个未指定目标的链接，Dreamweaver 的“行为”面板中列出了许多行为

这些行为相当于使用 JavaScript 编写的程序或函数，要想对文本设置行为，首先为文本，

建立空链接，这样行为才有效。

图 2-51 “电子邮件链接”对话框


41

图 2-53 下载链接预览

为文本建立超链接时，只要先在文档窗口选定文本，然后在“属性”面板中的“链

接”栏中输入一个数值符“#”即可。建立空链接的目的就是为了应用行为，其他情况

下不必建立空链接。

上机实训 2

1. 根据所学知识和所给素材完成如图 2-54 所示页面的制作。

图 2-54 实训效果图

科

学出版社


www.abook.cn


42

操作要求如下： 01 按如图 2-54 所示设计网页，网页中的图片素材已经给出，存储在“ch02/shangji/

images”文件夹中；网页中需要用到的文字都已经提供，请从文件“网页中出现的文字.txt”中去复制。

02 注意设计时页面元素的宽、高，以及空白部分的尺寸，大致与示例图片保持

一致，不要求精确到像素，但需要注意细节处理，使页面整齐美观。 03 网页中要用到的素材要求与示例图片效果一致。文字的粗细与大小如图 2-54

所示的效果图。 04 单击页面顶部“关闭窗口”则可关闭该页面。 05 单击页面顶部“联系我们”弹出 Outlook Express 发送邮件至 [email protected]。 06 单击页面底部“返回页首”，则跳转到网页的 logo 位置。 07 网页中的未知链接可以都设置成空链接。链接颜色为黑色，无下画线；当鼠

标移动到链接上时为#ff6600，有下画线；访问过后颜色为黑色，无下画线。网页中正文

部分字体大小为 12 像素，行高为 150%。 2. 根据所学知识和所给素材，完成如图 2-55 所示的效果图，源代码参考 shangji2.html。

图 2-55 shangji2.html 实训效果图

创建表格表格的基本操作在网页中用表格布局创建框架和框架集编辑框架设置框架与框架集属性

3.1 创建表格

表格是网页设计中一个非常有用的工具，它不仅可以将相关数据有序地排列在一

起，还可以精确地定位文字、图像等网页元素在页面中的位置，使得页面在形式上丰

富多彩又条理清楚，在组织上井然有序而不显单调。使用表格进行页面布局的最大好

处是，即使浏览者改变计算机的分辨率也不会影响网页的浏览效果。因此，表格是网

站设计人员必须掌握的工具。表格运用得是否熟练，是划分专业制作人士和业余爱好

者的一个重要标准。表格是网页布局设计的常用工具，其在网页中的应用已经突破了传统的用来记载大

量数据的功能，它可以使插入页面中的图像和文本等对象被限定在某一固定位置。相对

于没有使用表格的页面，使用表格的页面显得更加整齐有序。合理使用布局表格，会使

网页对象被组织得更加紧密，使整个页面看起来更加紧凑。在设计网页时，可以直接绘制表格，也可以导入表格数据，并将其转换为表格。

表格是网页中对文本和图像布局的强有力的工具。一个表格通常由行、列和单元格

组成，每行由一个或多个单元格组成。表格中的横向称为行，纵向称为列，一行与一列

相交所产生的区域则称为单元格。要将相关数据有序地组织在一起，必须先插入表格，

然后才能有效地组织数据。

学习要点

科

学出版社


www.abook.cn

网页设计案例教程 44

绘制表格的具体操作步骤如下。 01 在“文档”窗口的“设计”视图中，将插入点放在需要表格出现的位置。如

果文档是空白的，则只能将插入点放置在文档的开头。 02 通过以下几种方法启用“表格”对话框。

方法一：在菜单栏中选择【插入】→【表格】命令。方法二：在“插入”面板的“常用”模式中，单击“表格”按钮。

弹出的“表格”对话框，如图 3-1 所示。其中，各选项的含义如下。行数：确定表格行的数目。列：确定表格列的数目。表格宽度：以像素为单位或按占浏览器

窗口宽度的百分比指定表格的宽度。边框粗细：指定表格边框的宽度（以像

素为单位）。单元格边距：确定单元格边框与单元格

内容之间的像素数。单元格间距：决定相邻的表格单元格之

间的像素数。无：对表格不启用列或行标题。

左：可以将表格的第 1 列作为标题列，以便可为表格中的每一行输入一个标题。顶部：可以将表格的第 1 行作为标题行，以便可为表格中的每一列输入一个标题。两者：能够在表格中输入列标题和行标题。标题：提供一个显示在表格外的表格标题。最好使用标题以方便使用屏幕阅读

器的 Web 站点访问者。屏幕阅读器读取表格标题并且帮助屏幕阅读器用户跟踪

表格信息。对齐标题：指定表格标题相对于表格的显示位置。摘要：给出了表格的说明。屏幕阅读器可以读取摘要文本，但是该文本不会显

示在用户的浏览器中。

1. 如果没有明确指定边框粗细或单元格间距和单元格边距的值，则大多数浏览器都按边框粗细将单元格边距设置为 1、单元格间距设置为 2来显示表格。

2. 若要确保浏览器显示表格时不显示边距或间距，请将“单元格边距”和“单元格间距”设置为 0。

对应的各参数含义如图 3-2 所示 03 根据需要选择新建表格的大小、行列数值等，单击“确定”按钮，完成如

图 3-3 所示的表格，这里一切选择默认设置。

图 3-1 “表格”对话框

注意

第 3章表格与框架 45

边距

间距

边框

行标题

我的表格表格外标题

字号姓名性别年龄备注

20

21

19 男

男

女刘丽

张开

王洋大海

200400001

200400002

200400003

图 3-2 表格各参数含义图 3-3 创建的表格

建立表格后，可以在表格中添加各种网页元素，如文本、图像和表格等。在表格

中添加元素的操作非常简单，只需根据设计要求选定单元格，然后插入网页元素即可。

一般，当表格中插入内容后，表格的尺寸会随着内容的尺寸自动调整。同时，还可以利

用单元格的属性来调整内部元素的对齐方式和单元格的大小。

3.2 表格的基本操作

在绘制表格或者导入表格数据后，根据需要可能要对表格属性项进行修改设置才能

达到设计的要求。下面介绍表格的基本操作方法。

3.2.1 选择表格

在设置表格属性值前，首先需要选择表格。基于不同的操作，可以选择整个表格，

或者部分行和列，也可以只选择单元格。表格、单元格的选择方式不尽相同，下面分别

进行介绍。

1. 选择整个表格

选择整个表格的方法有很多种，可以参照下列方法之一进行操作。方法一：将鼠标指针移动到表格的上方，当鼠标指针的形状变为表格形状时，

单击鼠标左键即可选中整个表格，如图 3-4 所示。方法二：将鼠标指针移动到表格的格线处，当鼠标指针的形状变为上下方向的箭

头时，单击鼠标左键即可选中整个表格，如图 3-5 所示。

图 3-4 选中整个表格图 3-5 选中整个表格

方法三：将光标置于表格中，单击窗口左下角的<table>标记即可选中整个表格。方法四：将光标置于表格中，在菜单栏中选择【修改】→【表格】→【选择表格】

菜单命令，即可选中整个表格。

科

学出版社


www.abook.cn


方法五：将光标置于表格之外，按住 Shift 键，然后在表格中的任意处单击鼠标

左键即可选择整个表格。选中表格后，表格的外框变成粗黑色，并在右方、下方和右下方各会显示一个黑色

控制点，“属性”面板也会变为表格的“属性”面板，在其中可以设置表格的属性。

2. 选择单元格

选择单元格既可以选择单个单元格，也可以选择一整行或者一整列，还可以选择不

连续的多个单元格。选择单个单元格，直接单击要选择的单元格即可。选择行（或列），可按如下几种

操作方法进行。方法一：将鼠标指针置于所要选择的行的左方（或列的上方），待鼠标指针形状

变为向右（或向下）的箭头时，单击鼠标左键，则可以选中该行（或该列）。将鼠标指

针置于所要选择的行的左方（或列的上方），待鼠标指针形状变为向右（或向下）的箭

头时，拖曳鼠标可以选中连续的多行（或多列）。方法二：将鼠标置于待选择的单元格中，然后按住鼠标左键不放并拖动鼠标，横

向拖动可以选择一行，纵向拖动可以选择一列，如果向对角线方向拖动，行和列可以同

时选择。方法三：通过与 Ctrl 键的结合使用，可以选择多个不连续单元格。按住 Ctrl 键，

然后单击需要选择的单元格，即可选中该单元格。如果想取消选择某单元格，只需在按

住 Ctrl 键的同时，再次单击该单元格即可。

3.2.2 设置行数和列数

插入表格后，可以随时根据设计的需要增、减行数（或列数）。增加、删除行（或

列），有三种操作方法可供提供。

1. 通过“属性”面板修改行数和列数

选中整个表格，通过修改“属性”面板中的行数和列数来修改表格行数和列数，如

图 3-6 所示。

图 3-6 表格的“属性”面板

2. 通过快捷菜单修改表格

01 将光标置于表格中，单击鼠标右键，再弹出的快捷菜单中选择“表格”选项

将弹出如图 3-7 所示的子菜单。 02 在该子菜单中可根据需要选择“插入行”或“插入列”选项；也可选择“插

入行或列”，弹出如图 3-8 所示的对话框。


图 3-7 “表格”子菜单图 3-8 “插入行或列”对话框

如果想减少行数或者列数，则在“表格”子菜单中直接选择“删除行”或“删除列”

选项。也可以将需要删除的行或列选中，直接按 Delete 键。

3. 通过菜单栏命令修改表格

方法一：在菜单栏中选择【插入】→【表格对象】命令，弹出如图 3-9 所示的子

菜单，在该子菜单中可以选择插入行（或列）的位置。

图 3-9 “表格对象”子菜单

方法二：在菜单栏中选择【修改】→【表格】命令，在弹出的子菜单中选择插入

（或删除）行（或列）。

3.2.3 设置表格大小

插入表格以后，有时还需要对表格的大小进行调整。下面介绍设置表格大小的方法。

1. 相对大小和绝对大小

在设置表格大小时，有两种方式可以选择：一种是通过占版面的百分比来控制表格

科

学出版社


www.abook.cn


的大小；另一种是通过实际像素值来控制表格的大小。表格大小有相对和绝对之分，通

过百分比方式表示的表格大小是相对大小；通过像素方式表示的表格大小是绝对大小。相对大小：如果通过百分比方式设置表格的大小，则在改变版面大小后，表格

大小也随着调整。若将表格的宽和高设置为 100%，则无论版面窗口多大，表格

都将充满整个窗口。绝对大小：如果通过像素设置表格大小，则在改变版面尺寸后，表格大小不会

跟着调整。当版面变大时，表格相对于版面来说似乎变小了，但表格的实际大

小不变。

2. 改变表格大小

改变表格大小，可以通过拖曳鼠标的方式实现，也可以通过“属性”面板实现。选

中表格后，其右方、下方和右下方各会显示一个黑色控制点，按住鼠标左键不放，拖动

右方和下方的黑色控制点，可以改变表格的宽和高；拖动右下方的控制点，可以同时改

变表格的宽和高。在表格“属性”面板上的“宽”和“高”文本框中直接输入相关数值，即可重新设

置表格大小。

1. 尽量不要通过拖动表格边线来设置表格的大小，拖动表格后对重新调整单元格大小会造成一定的麻烦。

2. 表格高度、单元格高度一般由内容自适应，特别要求情况下再设置单元格高度。

3. 相对大小、绝对大小之间的转换

对于设置好的表格，在不改变大小的前提下，在百分比和像素两种表达方式之间可

以相互转换。百分比、像素之间互相转换的操作方法如下。

选中要转换表示方法的表格。在“属性”面板上有四个方式转换按钮，可以将表

格宽度或高度的表示方式由百分比方式转换为像素方式，或者由像素方式转换为百分比

方式。按钮：将表格宽度转换成像素按钮。将表格每列宽度的单位转换成像素，还

可将表格宽度的单位转换成像素。按钮：将表格宽度转换成百分比。将表格每列宽度的单位转换成百分比，还

可将表格宽度的单位转换成百分比。

4. 清除行高和列宽

表格“属性”面板上的“清除行高”和“清除列宽”两项用于清除行高和列宽。单

击或按钮，也可以将表格中行或列多余的部分删除，清除行高和列宽前后的效果

如图 3-10（a）和图 3-10（b）所示。

提示


（a）清除行高和列宽前（b）清除行高和列宽后

图 3-10

5. 设置填充和间距

选中表格后，表格“属性”面板上的“填充”用于设置插入单元格中的对象到单元

格边框之间的距离（即单元格边距）；“间距”用于设置单元格边框之间的距离（即单元

格间距）。图 3-11 所示的是“填充”值设置为 15，“间距”设置为 10 后的效果。

图 3-11 单元格的填充和间距

6. 设置表格的对齐方式

与单元格对齐不同，表格对齐将表格作为一个对象在网页中控制其位置，而单元格

对齐是单元格内的元素对象相对于单元格的对齐方式。表格同网页中的其他元素对象一样，有三种对齐方式，即左对齐、右对齐和居中对

齐，默认情况下是左对齐，为表格设置对齐方式的操作方法是：选中要设置对齐方式的

表格。在表格“属性”面板上的“对齐”下拉列表框中选择一种对齐方式。

3.2.4 设置表格边框

表格中的一些效果是通过设置表格边框的属性来实现的，

对于表格边框，可以设置它的粗细和颜色。

1. 边框的粗细

在表格“属性”面板上的“边框”文本框中设置表格边框

的粗细，默认情况下设置为 1，即如果没有明确指定边框的值，

则大多数浏览器按边框值为 1 的设置显示表格。通过改变该文

本框中的数值，可以调整表格边框的粗细。图 3-12 所示为分别

将表格的边框设置为 0、1 和 10 的效果。图 3-12 表格边框的效果

科

学出版社


www.abook.cn


很多情况下，表格的边框值设置为 0，相当于布局网页的辅助工具仅在编辑时可以

看到，若要在编辑区查看单元格和表格边框，则在菜单栏中依次单击【查看】→【可视

化助理】→【表格边框】选项即可。

2. 边框的颜色

默认情况下，表格的边框颜色是灰色的，通过“CSS 样式”面板或 HTML 代码可

以为表格的边框选择其他的颜色。为表格边框设置颜色的操作方法如下。 01 选中要改变边框颜色的表格。 02 切换到“代码”视图或“拆分”视图，在对应的表格代码的“<table>”后按

空格键后输入“bordercolor=”，将弹出一个颜色选择面板，如图 3-13 所示。 03 在弹出的调色板中选择一种颜色，设置完成后的效果如图 3-14 所示。

图 3-13 为表格边框设置颜色图 3-14 设置表格边框颜色后的效果

3.2.5 设置表格背景

在网页中，表格是一个独立的对象，不仅可以设置表格边框的颜色，还可以为其添

加背景色或者选择背景图像。

1. 添加背景颜色

为表格添加背景颜色的操作方法如下。 01 选中要添加背景颜色的表格。

02 在“CSS 样式”面板中，单击 “新建 CSS 规则”按钮，如图 3-15 所示，将弹

出“新建 CSS 规则”对话框，如图 3-16 所示。在图 3-16 对话框中，在“选择器类型”下

拉列表中选择“标签（重新定义 HTML 元素）”，在“选择器名称”下拉列表中选择“table”。

图 3-15 “CSS 样式”面板

03 单击“确定”按钮，将弹出“CSS 规则定义”对话框。在该对话框中，选择

新建 CSS 规则


“背景”分类，设置“Background-color”（即背景颜色），如图 3-17 所示。

图 3-16 “新建 CSS 规则”对话框

图 3-17 “CSS 规则”对话框

04 选择一种适合的背景颜色后，单击“确定”

按钮，即可为表格添加背景颜色。为表格添加背景颜

色的效果如图 3-18 所示。

2. 设置表格背景图像

将图像设置为表格的背景，具体操作方法同上述

背景色的方法，只是在选中表格后，在“Background-image”文本框中输入图像的存放

路径，或者单击“浏览”按钮，将弹出“选择图像源文件”对话框，如图 3-19 所示。

在该对话框中选择一幅图像作为表格的背景图像。单击“确定”按钮返回，这时可以看到表格中已经插入了一幅背景图像，如图 3-20

所示。

图 3-18 表格背景颜色效果图

科

学出版社


www.abook.cn


图 3-19 “选择图像源文件”对话框

图 3-20 为表格加入背景图像

还可以用表格标记<table>的属性代码 bgcolor 和 background 来设置表格的背

景色和背景图像。

3.2.6 设置单元格属性及表格的嵌套

单元格是表格最基本的元素，对表格中元素对象“属性”的设置也是通过单元格属

性的设置实现的。将鼠标置于单元格中，展开“属性”面板，可以发现该面板上部是文本属性的设置

区，下部是单元格属性的设置区，如图 3-21 所示。

图 3-21 单元格“属性”面板

提示


1. 单元格的合并与拆分

有的表格项需要几行或几列来说明，这时需要将多个单元格合并，生成一个跨多个

列或行的单元格。使用单元格拆分功能，可以将一个单元格拆分成多个单元格。 1）合并单元格。合并单元格有以下三种方法。

方法一：选中要合并的单元格，在菜单栏中依次选择【修改】→【表格】→【合

并单元格】命令。方法二：选中要合并的单元格，单击鼠标右键，从弹出的快捷菜单中选择【表

格】→【合并单元格】命令。方法三：选中要合并的单元格，在“属性”面板中单击（合并所选单元格，

使用跨度）按钮。 2）拆分单元格。拆分单元格有以下三种方法。

方法一：将光标放在要拆分的单元格中，在菜

单栏中依次选择【修改】→【表格】→【拆分单元格】

命令，弹出“拆分单元格”对话框，如图 3-22 所示。方法二：将光标放在要拆分的单元格中，单击

鼠标右键，从弹出的快捷菜单中选择【表格】→【拆

分单元格】命令，弹出“拆分单元格”对话框。方法三：将光标放在需要拆分的单元格中，在“属性”面板中单击（拆分单

元格为行或列）按钮，弹出“拆分单元格”对话框。

2. 设置单元格的对齐属性

水平：指定单元格、行（或列）内容的水平对齐方式。可以将内容对齐到单元

格的左侧、右侧或居中，也可以使用其默认的对齐方式（常规单元格为左对齐，

标题单元格为居中对齐）。垂直：指定单元格、行（或列）内容的垂直对齐方式。可以将内容对齐到单元

格的顶端、中间、底部或基线，也可以使用其默认的对齐方式（居中）。

3. 表格的嵌套

表格可以进行嵌套操作，并且嵌套的层数没有限制，但嵌套的层数过多将使导致页

面打开速度变慢，实际应用中表格的嵌套层数通常以不超过三层为宜。表格嵌套在使用

表格进行页面布局的时候尤其有用。表格嵌套的操作步骤如下。 01 在需要嵌套表格的父表格单元格中定位插入点。 02 在菜单栏中选择【插入】→【表格】命令。 03 在打开的“表格”对话框中设置要插入的表格属性。 04 单击“确定”按钮。另外，在目标单元格中定位插入点后，在“插入”面板的“常用”模式中，单击“表

格”按钮，也可实现表格的嵌套操作。对于嵌套的表格可以单独对齐，且不会受父表格设置的影响，其设置方法与一般表

图 3-22 “拆分单元格”对话框

科

学出版社


www.abook.cn


格没有区别，这里不再赘述。

3.2.7 表格数据的导入/导出

有时需要将 Word 文档中的内容或 Excel 文档中的表格数据导入到网页中进行发布，

或将网页中的表格数据导出到 Word 文档或 Excel 文档中进行编辑，Dreamweaver CS5提供了实现这种操作的功能

1. 表格数据的导入

对于已经存在的使用分隔符（如制表符、逗号、冒号、分号）格式的数据文本，

Dreamweaver CS5 可以将其导入并嵌入表格中。导入表格数据的操作步骤如下。 01 在菜单栏中依次选择【插入】→【表格对象】→【导入表格式数据】命令（或

者选择【文件】→【导入】→【表格式数据】命令），将弹出如图 3-23 所示的“导入表

格式数据”对话框。

图 3-23 【导入表格式数据】对话框

02 在“数据文件”文本框中输入要导入文件的名称，或者单击“浏览”按钮，

选择数据表格文件。这里导入以 Tab（制表符）分隔的文本数据文件，该文件的内容如

图 3-24（a）所示。 03 在“定界符”下拉列表中选择一种合适的定界符，这里选择“Tab”选项。指

定表格选项后单击“确定”按钮。 04 在“表格宽度”选项中选择想要的表格宽度。 05 设置单元格边距和单元格间距。 06 在“格式化首行”下拉列表中选择一种格式。 07 在“边框”文本框中设置表格框线的宽度。 08 设置完成后，单击“确定”按钮返回。将数据文件导入表格后的效果如图 3-24

（b）所示。

2. 表格数据的导出

要导出在 Dreamweaver 中创建的表格数据，必须先将数据保存成接受分隔数据的文

件格式，可以使用的分割符有逗号、句号、分号或者空格。不能只导出表格的一部分，在导出表格的时候，整个表格都将被导出。


（a）文本数据文件（b）将数据文件导入表格中

图 3-24

表格数据导出的步骤如下。 01 将插入点放在表格的任意单元格中，如图 3-25（a）所示。 02 在菜单栏中依次选择【文件】→【导出】→【表格】命令，如图 3-25（b）所示。 03 指定以下选项后，单击“导出”按钮。定界符：指定使用哪种分隔符在导出的文件中隔开各项，这里选择 Tab 作为分

隔符。换行符：在下拉菜单中选取导出文件将要使用到的操作系统接受的换行符。

04 在“表格导出为”对话框中输入文件名为 biaoge.xls，单击“保存”按钮，将

网页中的表格导入到 Excel 表中。

（a）要导出的表格（b）导出表格对话框

图 3-25

3.2.8 表格的排序

对表格数据进行排序的具体操作步骤如下。 01 选中要排序的表格或单击该表格的任意单元格。 02 选择【命令】→【排序表格】命令，将弹出“排序表格”对话框，如图 3-26

所示。图 3-27 所示是对图 3-25 中的表格按照第 2 列（Number）由大到小进行排序的结果，

与原表格对照可以看出排序后的效果。

图 3-26 “排序表格”对话框图 3-27 排序表格

科

学出版社


www.abook.cn


03 设置完成后，单击“确定”按钮，即可完成对表格的排序操作。

3.3 用表格制作课程表

1. 插入表格

01 新建一个空白网页，保存为 kchb.html，设置标题为“课程表”。 02 将光标定位到网页的第 1 行位置，插入标题“ 课程表”，设置为“居中”对齐

方式。 03 将光标定位到第 3 行，插入一个 12 行 6 列的表格。单击菜单【插入】→【表

格】命令，或者单击“常用”面板中的“表格”按钮，弹出“表格”对话框，设置

如图 3-28 所示。

图 3-28 “表格”对话框

04 设置完成后单击“确定”按钮，就会在页面上看到插入的表格。

2. 输入文本

将光标定位到单元格中，输入文本。最终效果如图 3-29 所示。

图 3-29 输入文本后的表格效果图


3. 修改表格

01 选中要修改的单元格，如图 3-30 所示。 02 单击菜单【修改】→【表格】→【合并单元格】命令，或按快捷键 Ctrl+Alt+M

合并单元格，也可以单击“属性”面板上的按钮合并单元格。 03 用同样的操作，合并“上午”、“下午”部分的单元格，完成后效果如图 3-31。

图 3-30 选择要合并的单元格

图 3-31 合并单元格后的效果图

4. 修改单元格

01 文本对齐设置。选中第 1 行和第 7 行，如图 3-32 所示，将光标定位到第 1 行

左边框上单击，再按住 Ctrl 键，单击第 7 行的左边框。然后在“属性”面板的水平下拉

列表中选择“居中对齐”选项。

图 3-32 选中表格中第 1 行和第 7 行

科

学出版社


www.abook.cn


02 字体设置。选中“中午休息”和表格第一行中的文本，在“属性”面板中设

置文字加粗。将表格中的其他字体设置为“宋体”，大小为“9 点数”把文字“上午”、

“下午”分别改成竖排。 03 单元格中颜色设置。选中第 1 行和第 7 行，在“属性”面板中设置背景颜色

为“#66CCFF”，同理设置“上午”、“下午”单元格的背景颜色为“#FF99FF”，设置时

间单元格背景颜色为“#33CC33”。设置“值日”单元格的背景颜色为“#FFFF66”，效

果如图 3-33 所示。 04 表格对齐方式设置。选中整个表格，选择对齐方式为“居中对齐”，课程表即

显示在页面的居中位置。

课程表

地理

图 3-33 课程表效果图

05 给整个网页设置一个自己喜欢的背景，保存网页，按 F12 预览，最终效果如

图 3-34 所示。

地理

图 3-34 最终效果图


3.4 用表格布局网页

很多网页设计者喜欢使用表格设计网页的布局。通过表格可以精确地定位网页元

素，准确地表达创作意图。下面以制作“网上蛋糕店”为例，详细介绍使用表格设计网

页的过程。 01 在本地站点窗口中，新建网页文件 cakeOL.html。 02 双击打开该文件，将页面标题设置为“我的网上蛋糕店”，按下 Ctrl+S 快捷键

保存网页。 03 插入表格。选择【插入】→【表格】命令打开“表格”对话框，设置“行数”

为 5，“列数”为 2，“表格宽度”为 800 像素，“边框粗细”为 0 像素，单元格边距为 0，单元格间距均为 2，单击“确定”按钮，在页面中插入一个 5 行 2 列的表格。

04 设置表格的背景图像为提供的背景图片“bg.gif”。 05 选中第 1 行的两个单元格，并将其合并为一个单元格；选中第 2 行的两个单

元格，也将其合并为一个单元格。 06 在表格的第 1 行，设置背景图像为准备好的蛋糕店的店头图片 cake.jpg，设置

第 1 行的高度为 80 像素，并输入文本“欢迎来到我的网上蛋糕店”，设置字体为隶书，

大小为 36，颜色为#30F，并设置文本居中对齐，如图 3-35 所示。

图 3-35 设置蛋糕店店头

07 插入嵌套表格。在表格的第 2 行插入一个 1 行 7 列的表格，宽度设置为 800像素，边框粗细、单元格边距均为 0，单元格间距为 2，单击“确定”按钮。设置嵌套

表格的背景颜色为#FFCC66。 08 制作导航菜单。在插入的嵌套表格中输入文本如图 3-36 所示，并在其“属性”

面板中设置为“居中对齐”。

图 3-36 设置导航菜单

09 调整第 1 列的列宽为 150，然后用同样的方法在表格第 3 行的第 1 列插入一个

8 行 1 列的表格，宽度设置为 90%，边框粗细、单元格边距为 0，单元格间距为 2。

科

学出版社


www.abook.cn


10 在这个嵌套的表格中从第 2 行开始输入栏目内容，如图 3-37 所示，并在其“属

性”面板中设置为“居中对齐”，设置第 2 行到第 8 行单元格背景颜色为#CCCCCC，设

置嵌套表格在父单元格中对齐方式为顶端对齐。

图 3-37 设置分类列表菜单

11 选中“按口味分类”文本所在的单元格，加粗显示；设置其背景颜色为#999999，用做栏目头，效果如图 3-38 所示。

图 3-38 设置栏目头

12 如图在外层表格第 3 行右侧单元格插入一个 6 行 4 列的表格。宽度设置为

100%，边框粗细、单元格边距为 0，单元格间距为 0，背景颜色设置为白色，如图 3-39所示。

图 3-39 右侧嵌套表格


13 在嵌套表格的第 2 行和第 5 行单元格内分别插入准备好的蛋糕图片，并设置

图片宽和高均为 150，8 个单元格的宽和高均为 150，如图 3-40 所示。

图 3-40 插入蛋糕图片

14 在嵌套表格的第 3 行和第 6 行，输入蛋糕的名字和价格，如图 3-41 所示，并

设置文本的对齐方式为居中对齐。

图 3-41 插入蛋糕名称和价格

15 合并嵌套表格的第 4 行的所有单元格，然后设置高度为 2，设置背景图片为

bg.jpg，如图 3-42 所示，嵌套表格的操作到此为止。

科

学出版社


www.abook.cn


图 3-42 设置两行蛋糕之间的分行界线

该部分代码为 <tr> <td height="2" background="images/bg.gif" colspan="4"> </td> </tr>

16 选中父表格的最后两行，并合并单元格，设置两行的高度均为 30。在这两行

中输入网页的底部文本，并设置为居中对齐，如图 3-43 所示。

图 3-43 设置网页的底部文本

这部分的代码为： <tr> <td height="30" colspan="2" align="center">关于我们安全交易

付款方式购买流程网站地图</td>


</tr> <tr> <td height="30" colspan="2" align="center">copyright 2011&nbsp；

我的网上蛋糕店 All Rights Reserveb</td> </tr>

17 保存页面文件，按 F12 键预览网页效果。

3.5 框架与框架集

使用框架可以让网页的风格统一，加快浏览速度。在浏览页面时，不需要将页面中

含框架的窗口都重新加载，对于导航或不动的窗口在浏览网站时只需加载一次，这样就

大大加快了浏览的速度。在网页中使用框架具有以下两个优点。访问者的浏览器不需要为每个页面重新加载与导航相关的图形，这样毫无疑问

使网页的下载速度加快了。每个框架都具有自己的滚动条（如果内容太多，在窗口中显示不下），因此访问

者可以独立滚动这些框架。框架是框架集的组成元素，它可以简单地理解为是对浏览器窗口进行划分后的子窗

口，每一个子窗口是一个框架，可以在框架中插入图片、输入文本或者在框架中打开一

个独立的网页文档内容。如果在各个框架中分别打开一个已经做好的网页文档，那么这

个页面就是由几个网页组合而成的框架网页。图 3-44 所示为框架与框架集之间的关系。图中的框架集包含了三个子框架。实际

上，该页面包含的是四个独立的 HTML 页面：一个框架集文件和三个框架内容文件。

框架集

top框架

left框架 main框架

图 3-44 框架和框架集的关系

当一个页面被划分成几个框架时，系统会自动建立一个框架集文档，用来保存网页

中所有框架的数量、大小、位置及每个框架内显示的网页名等信息。当用户打开框架集

文档时，计算机就会根据其中的框架数量、大小、位置等信息将浏览器窗口划分成几个

子窗口，每个窗口显示一个独立的网页文档内容。框架结构常用在具有多个分类导航或多项复杂功能的 Web 页面上，如 BBS 论坛页

面及网站中邮箱的操作页面等。创建基于框架的网页一般包括以下步骤。 01 在网页中创建框架集和框架。 02 保存框架集文件与框架文件。每个框架与框架集都是独立的网页，应单独保存。 03 设置框架和框架集的属性，包括命名框架与框架集、设置是否显示框架等。 04 确认链接的目标框架设置，使所有链接内容显示在正确的区域内。

科

学出版社


www.abook.cn


3.5.1 创建框架

1. 创建框架和框架集

在创建框架和框架集前，选择【查看】→【可视化助理】→【框架边框】命令，使

框架边框在“文档”窗口的“设计”视图中可见。在 Dreamweaver 中有两种创建框架的方式：一种是自己设计；另一种是从

Dreamweaver 提供的框架类型中选取。具体方法是首先确定插入框架的位置，执行下列

操作之一插入框架。方法一：在“插入”面板的“布局”选项卡中打开“框架”下拉列表，从中选择

一种框架，如图 3-45 所示。

图 3-45 从布局工具栏新建框架页文档

方法二：选择【插入】→【HTML】→【框架】选项，在“框架”的下级菜单中，

单击选择一种框架。方法三：在新建网页文件时创建框架。具体方法是选择【文件】→【新建】命令，

弹出“新建文档”对话框，在最左侧选择“示例中的页”选项，在“示例文件夹”列表

中选择“框架页”选项，在右边的“示例页”列表框中选择“上方固定，下方固定”选

项，如图 3-46 所示。

图 3-46 “新建文档”对话框


单击“创建”按钮，弹出“框架标签辅助

功能属性”对话框，如图 3-47 所示。在此可

为每一个框架指定一个标题，一般按默认设

置，单击“确定”按钮即可创建一个框架。

单击【窗口】→【框架】菜单命令，打开

“框架”面板，显示出创建的框架集，如图 3-48所示。

图 3-48 在“框架”面板中查看框架集

2. 保存框架和框架集

保存框架结构的网页，需要将整个框架集与它的各个框架文件一起保存。以图 3-48所示的框架结构为例，具体方法是：选择【文件】→【保存全部】命令，整个框架边框

会出现一个阴影框，并弹出“另存为”对话框。

Dreamweaver 将依次提示需要保存的内容。首先保

存的是框架集文件，一般以 Frameset.html 作为框

架集文件名。仔细观察框架页面，当前所保存的

框架会出现一个阴影框，依次给上框架、左框架

和主框架命名为：topFrame.html、leftFrame.html、mainFrame.html，执行保存操作后生成的框架和框

架集文件如图 3-49 所示。也可以单独保存框架集文件。具体方法是：

在“框架”面板或“文档”窗口选中框架集后，选择【文件】→【保存框架页】命令，

或者选择【文件】→【框架集另存为】命令。

3.5.2 编辑框架

1. 选择框架或框架集

框架和框架集都是单个 HTML 文档，选择框架或框架集的具体方法是：选择【窗

图 3-47 “框架标签辅助功能属性”对话框

图 3-49 保存得到的框架和框架集文件

科

学出版社


www.abook.cn


口】→【框架】命令，或者按下 Shift+F2 组合键，打开“框架”面板，每个框架用默认的框架名来识别。用鼠标单击需要选择的框架，即可将框架选中。此时，在

“设计”视图中，选中的框架边框会出现点线轮廓，如图 3-50 所示。在“框架”面板

中单击环绕框架的边框，或者在“文档”窗口中，单击框架的外边框，均可选中框

架集。

图 3-50 选中的框架以虚线框围起

2. 拆分框架

插入框架之后，可利用拆分框架的方法调整框架的结构。具体方法是：选中框架后，

按住键拖动框架边框，可将框架纵向或横向划分。在需要拆分的框架内单击，选择【修

改】→【框架集】菜单项，在图 3-51 所示的级联式菜单中选择

需要的一项，完成框架的拆分。

3. 删除框架

如果要删除不需要的框架，可将鼠标指针放在要删除框架

的边框上，当鼠标指针变为双向箭头时，按下鼠标左键并拖曳

边框到编辑窗口之外即可删除框架。

4. 修改子框架的大小

在框架“属性”面板中可以修改框架的大小。具体方法如下。方法一：在“框架”面板中选中框架集，在其对应的“属性”面板中，通过设置

“行”或“列”的值来改变框架的大小。如图 3-52（a）所示，选中整个框架集，修改上

框架的高度（“行”值）；如图 3-52（b）所示，在“框架”面板中选中整个下框架，修

改左框架的列宽度（“列”值）。

图 3-51 框架集级联菜单


单击外框架线选

中整个框架集

图 3-52（a）选中整个框架集重设上框架的行高

单击下半部框架线同时选

中左框架和主框架

图 3-52（b）选中整个下框架集重设左框架的列宽

方法二：移动鼠标到框架间的间隔线时，鼠标变成左右箭头或上下箭头，按下鼠

标左键拖运间隔线，调整各个框架的宽度或高度，同时可以在相应的“属性”面板中看

到行或列属性值的变化。

5. 在框架中打开网页

要在框架中打开一个网页，操作步骤如下。 1）打开“框架”面板，单击框架。 2）在相应的“属性”面板中设置框架中的页面。 3）在“属性”面板的“源文件”中直接输入框架中页面的路径和名称，或单击图

标，查找文件的本地路径。

3.5.3 设置框架和框架集属性

框架与框架集均有对应的“属性”面板。框架属性包括框架的名称、框架源文件、

框架的空白边框、滚动特性、重设大小特性以及边框特性等。框架集属性主要包括框架

间边框的颜色、宽度和框架大小等。

1. 设置框架属性

在“框架”面板中选中其中一个框架，如主框架，其对应的“属性”面板如图 3-53所示。

科

学出版社


www.abook.cn


图 3-53 框架“属性”面板

框架“属性”面板中各项的含义如下。框架名称：可在文本框中为选中框架输入一个名称，该名称用于超链接和脚本

的调用。框架名一般是一个单词。源文件：指定该框架所在的源文件。如果该框架已经保存，则显示已有的文件

名与路径。如果该框架未保存，可输入一个文件名或单击文件夹图标选取一个

源文件。边框：设置框架是否显示边框。“是”指显示边框；“否”指不显示边框；“默认”

由浏览器决定是否显示框架的边框滚动：设置是否显示滚动条。该列表中有四个选项，分别为“是”、“否”、“自动”

和“默认”。绝大部分浏览器的默认值是“自动”，即在需要时自动添加滚动条。不能调整大小：选中该选项将禁止调整当前框架的大小。边框颜色：用于设置框架集所有边框的颜色。边界宽度：设置当前框架的内容与框架左右边界的距离，单位是像素。边界高度：设置当前框架的内容与框架上下边界的距离，单位是像素。

2. 设置框架集属性

使用框架集属性可以设置所有边框的共同属性。如果指定的框架设置了属性，将覆

盖框架集所对应的属性设置。选中框架集，其对应的“属性”面板如图 3-54 所示。

图 3-54 框架集“属性”面板

框架集“属性”面板中各项的含义如下。边框：设置框架集中所有框架边框是否被显示。“是”指显示边框；“否”指不

显示边框；“默认”由浏览器决定是否显示边框。边框颜色：用于设置框架集中的边框颜色。边框宽度：设置框架集边框的宽度，0 表示无边框。行（或列，不同框架集显示不同）：设定上边框在整个框架集中所占的行值，单

位可以是像素、百分比或一个相对值。

3. 为框架页设置超链接

在网页制作中之所以使用框架，最主要的还是因为框架页独特的链接方式。因为应


用框架，可以在不同的框架中显示不同的页面，所以在设置框架页中某处文字或图像等

元素进行链接时，会发现在“属性”面板中，链接的目标下拉列表中多了几个选项，如

下图 3-55 所示。

图 3-55 设置超链接的目标

其中各项的含义如下。 _blank：链接的页面在新的窗口打开。 _parent：链接的页面在父框架中打开。 _self：链接的页面在自身窗口打开。 _top：链接的页面在最外层框架中打开。 mainFrame、leftFrame、topFrame：链接的页面在所命名的框架中打开，这里

mainFrame、leftFrame、topFrame 为该文件页面所建的子框架名称。

4. 框架的嵌套

根据实际需要，可以在框架集中创建多个框架，框架之间形成上下级关联，如图 5-36所示为一个三层框架嵌套在“框架”面板的显示效果。按照 Dreamweaver 自带的框架布局

创建框架页以后，还可以在框架内继续创建框架，形成嵌套。

图 3-56 多层框架嵌套

在图 3-56 中，主框架 main 与框架 bottom 同级。框架 main 和框架 bottom 组成的框

架集与框架 left 同级。框架 top 与下面的三个框架 left、main、bottom 组成的框架集同级。

科

学出版社


www.abook.cn


3.5.4 用框架制作网页

用框架制作网页，操作步骤如下。 01 启动 Adobe Dreamweaver CS5，单击【新建】→【示例中的页】→【上方固定，

左侧嵌套】建立框架页，并为每一个框架指定名字分别为 left、top、main，如图 3-57所示。

图 3-57 创建框架

02 保存全部，将框架集保存为 index.html，主框架保存为 main.html，顶框架保

存为 top.html，左框架保存为 left.html。 03 在上方框架页 top.html 文件中添加背景图片和背景颜色，输入文本“用框架

设计网页—— 个人主页”，并设置文本大小为 36，设置一个自己喜欢的颜色，并设置对

齐方式为居中对齐，保存页面。回到框架集页面 index.html 可看到如图 3-58 所示效果。

图 3-58 为上方框架加入文字和背景效果图


04 新建三个 HTML 文件，分别重命名为 wxfy.html、mlyx.html 和 xxxd.html，在

每个页面添加一些文字图片。 05 在 main.html 文件中输入文字并设置格式，添加页面背景。 06 在 left.html 文件内输入“美文集录”、“我心飞扬”、“美丽印象”和“学习心

得”文字，为页面添加背景图，制作超链接的步骤如下。选中“美文集录”，在下方“属性”面板的链接里单击“浏览文件”按钮，选择

main.html 文件。在“属性”面板的“目标”里选择 main 选项。如图 3-59 所示。同样设置“我心飞扬”“美丽印象”“学习心得”分别链接到 wxfy.html、mlyx.html、

xxxd.html 文件，链接“目标”下拉列表中选择为 main。保存全部网页，单击左侧对应的链接文字，相应的链接网页会在右侧的 main 框

架中打开。单击“学习心得”链接，在主框架中看到如图 3-60 所示效果图。 07 根据浏览效果调整上框架、左框架的大小，在框架窗口单击整个框架，调整

行值为 180 像素（top.html 文件中图片的高度）。在框架窗口选中下半框架，调整列值为

160 像素。

图 3-59 为左框架制作超链接

图 3-60 框架页面效果图

科

学出版社


www.abook.cn


由于页面<body>标签与页面的上下左右边距有一默认的距离，为了使各个子框架

页能无缝连接，建议设置<body>标签样式中margin的上下左右边距值均为 0。

上机实训 3

1. 根据所给素材，完成上机练习 shangji1.html，效果图如图 3-61 所示。

图 3-61 表格布局页面练习 1

操作步骤如下： 01 插入 2 行 5 列表格 1，宽度为 1024 像素，居中，表格的填充、间距、边框均

为 0。合并第 1 行，按效果图插入背景图片。第 2 行选中所有单元格，在“属性”面板

中设置宽度为 20%，根据给出的素材，分别在每个单元格中插入鼠标经过的图像。 02 在表格下面空白处再插入一个 5 行 3 列的表格 2，宽度为 1024 像素，居中，

表格的填充、间距、边框均为 0。 03 第 1 行第 1 列宽度设为 598 像素，插入背景图片，并输入“新闻”两字，设

置字体格式。 04 第 1 行第 2 列宽度设为 28 像素。 05 第 1 行第 3 列宽度设为 398 像素，插入背景图片，并输入“博客”两字，设

置字体格式。 06 第 2 行第 1 列输入 5 条新闻标题，设置字体格式。选择标题，单击“属性”

面板中的按钮，切换到图 3-62 所示的属性设置面板，再单击图标，设置新闻

注意


标题以项目列表的形式出现。

图 3-62 设置标题为项目列表形式

07 参照上一步骤，在表格 2 的第 2 行的第 3 列，输入博客文章标题，并设置为

项目列表形式、链接及文字格式。 08 参照表格第 1 行和第 2 行的样式，设置表格的第 3 行和第 4 行内容及样式。 09 合并第 5 行，根据所给素材插入背景图片。 2. 根据所给素材，完成上机练习 shangji2.html，效果图如图 3-63 所示。

图 3-63 表格布局页面练习 2

操作步骤如下： 01 插入 2 行 2 列表格 1，宽度为 940 像素，居中，表格的填充、间距、边框均为

0。第 1 行第 1 列宽度为 160 像素，按效果图插入背景图片和输入文字，设置文字格式。

第 1 行第 2 列按效果图插入图片。第 2 行插入导航背景图，按效果图输入导航文字，文

字间以竖线作为间隔，设置导航文字格式。 02 在表格 1 下面空白处再插入一个 3 行 5 列的表格 2，宽度为 940 像素，居中，

表格的填充、间距、边框均为 0。设置第 1 列表格宽为 140 像素，右对齐；第 2 列宽度

为 220 像素；第 3 列宽度为 140 像素，右对齐；第 4 列宽度为 220 像素；第 5 列宽度为

科

学出版社


www.abook.cn


220 像素。 03 表格 2 的第 2 行和第 3 行的第 1 列和第 3 列分别按效果图插入图片。 04 表格 2 的第 2 行第 2 列、第 4 列和第 3 行的第 2 列、第 4 列分别输入相应主

题的项目列表形式的文字，设置文字格式和链接。 05 表格 2 的第 1 行第 5 列按效果图插入背景图片，输入文字，设置字体格式。

06 合并表格 2 的第 5 列第 2 行第 3 行，光标定位在合并后的单元格，插入一个

宽度为 100%的 3 行 1 列表格 3，边框、间距和填充均设为 0，第 1 行和第 3 行的单元格设

为居中对齐，分别插入相应图片。第 2 行插入以项目列表形式出现的文字，设置相应链接。 07 在页面下方空白处单击鼠标，插入 1 行 1 列的表格 4，宽度为 938 像素，居中，

边框为 1、间距和填充为 0。插入背景图片，设置背景图不重复出现。在背景图位置输

入文字并设置格式。 08 在表格 4 里再插入一个宽度为 100%的 2 行 5 列的表格 5，选中所有单元格，

设置宽度为 20%。水平对齐方式为居中。 09 在表格 5 第 1 行的各单元格中按效果图插入相应的图片；并在第二行相应的

单元格中输入图片标题，设置标题文字格式和链接。 10 在页面下方空白处按组合键 shift+回车，再插入一个 1 行 1 列宽为 940 像素的

表格，边框、间距和填充为 0，居中对齐，插入背景图片。完成页面效果图的整体制作。 3. 根据 shangji3 文件夹中所给图片素材，完成图 3-64 所示效果图页面制作，源代

码参考 shangji_sushi.html 文件。

图 3-64 表格布局练习 3


4. 根据 shangji4 文件夹中所给图片素材，完成图 3-65 所示效果图页面制作，源代

码参考 shangji_computer.html 文件。

图 3-65 表格布局练习 4

5. 根据 shangji5 文件夹所给素材，用框架布局页面，单击左边框文字链接，可看到

主框架的内容发生变化，图 3-66 所示为页面效果图。

图 3-66 框架布局页面效果图

科

学出版社


www.abook.cn


操作步骤如下： 01 新建一个上方固定、左侧嵌套的框架，框架集、上框架、左框架、主框架分

别保存为 sj_Frameset.html、sj_topFrame.html、sj_leftFrame.html、sj_mainFrame.html。设

置每个页面的<body>标签样式的 margin 属性全部为 0。 02 在上框架页面 sj_topFrame.html 中插入 4 行 3 表宽度为 778 像素的表格，边框、

间距、填充均为 0。分别合并第 1、3、4 行，按效果图在第 1 行第 3 行分别插入相应图

片，第 4 行插入作为导航背景的图片，设置第 4 行高度为 35 像素。设置页面属性，给

页面添加背景颜色。 03 第 2 行第 1 列设置宽度为 50 像素，第 2 列的宽度为 165 像素，第 3 列的宽度

为 563 像素。在第 1 列中插入一个图片，在第 2 列中先插入有鸟图案的背景图片再插入

前景图，在第 3 列中插入背景图片，再输入文字，并设置文字格式。 04 在左框架页面 sj_leftFrame.html 中插入 1 行 1 列宽为 210 像素的表格，设置为

右对齐，边框、间距和填充均为 0；再在表格中插入 10 行 1 列的表格，宽 120 像素，居

中对齐，边框、间距、填充为 0。设置每个单元格的高度为 32 像素，添加背景图，在单

元格中分别输入文字。设置页面属性，给页面添加背景颜色。 05 在主框架页 sj_mainFrame.html 中，设置页面属性，给页面添加背景颜色。插

入一个 1 行 2 列宽度为 560 像素的表格，左对齐，边框、间距、填充为 0。第 1 行单元

格设置水平居中、垂直居中，并输入一首诗，设置字体格式；第 2 列按效果图插入图片，

调整图片大小。 06 新建一个 HTML 页面，命名为 shici_main.html，设置页面背景色，添加一个

宽度为 560 像素的 1 行 2 列的表格，左对齐，边框、间距、填充为 0。同上一步骤，在

单元格中添加一首诗和相应的图片。 07 重新进入左框架页面 sj_leftFrame.html，设置“首页”文字链接到 sj_mainFrame.

html 文件，目标为 mainFrame；设置“诗词”文字链接到 shici_main.html 文件，目标为

mainFrame。 08 在窗口菜单中勾选框架属性，在页面右下角可看到框架面板，用鼠标单击框

架最外层的边框线选中整个框架，再在对应的框架集“属性”面板中设置行（值）为 238像素（sj_topFrame.html 页中表格高度）；在框架面板中选择下半部分的框架，设置框架

集属性面板中的列值为 210 像素（sj_leftFrame.html 文件中表格的宽度）。 09 运行框架集页面查看效果。 6. 用表格布局完成 3-66 所示页面效果图。