dreamweaver网页设计
-
2023年2月12日发(作者：)目录
第五章网页制作..............................................................................................2
简介..........................................................................................2
5.1.1.网站工作机制..............................................................................2
5.1.2.网站设计流程..............................................................................2
5.1.3.网站设计原则..............................................................................3
5.1.4.优秀网站案例解析......................................................................3
eaver初步...........................................................................6
eaver介绍.......................................................................6
5.2.2.站点的简介和规划......................................................................9
5.2.3.创建本地站点..............................................................................9
5.2.4.使用站点地图............................................................................11
5.3.网页设计初步................................................................................12
5.3.1.创建文本网页............................................................................12
5.3.2.使用表格规划网页布局............................................................13
5.3.3.使用层规划网页布局................................................................14
5.3.4.制作图文混排网页....................................................................15
5.3.5.制作超级链接............................................................................17
5.4.网页设计进阶................................................................................18
5.4.1.制作多媒体网页........................................................................18
5.4.2.制作表单网页............................................................................20
5.4.3.使用CSS样式.............................................................................21
5.4.4.使用模板批量制作网页............................................................25
5.5.网站运营及维护............................................................................26
5.5.1.站点测试....................................................................................26
5.5.2.站点管理....................................................................................28
5.5.3.站点发布....................................................................................29
第五章网页制作
本章将介绍使用计算机过程中常用的一系列工具软件。其中包含常用辅助工具、电子
邮件客户端软件、多媒体浏览和播放工具、安全软件等。
简介
Web是Internet提供的一种服务，通过它可以访问遍布于Internet主机上的链接文档；
是存储在全世界Internet计算机中的数量巨大的文档的集合；Web上海量的信息是由彼此
关联的文档组成，这些文档称为主页（HomePage）或页面（Page），它是一种超文本
（Hypertext）信息，而使其连接在一起的是超链接（Hyperlink）。
HTML是什么?HTML是HypertextMarkupLanguage（超文本标记语言）的缩写，它
是构成Web页面（Page）的主要工具。在网上，如果要向全球范围内出版和发布信息，需
要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的“母语”。
WWW（WorldWideWeb）所使用的出版语言就是HTML语言。
什么是动态HTML？动态HTML（DHTML）不仅是一种独特的技术、计算机语言或
功能集，而是综合了几种不同技术相互作用的方式。动态HTML（DHTML）可以让您使
用常规DHTML、脚本文件、文档对象模块、绝对定位技术、动态样式、多媒体过滤器和
各种其他技术动态改变HTML在屏幕上显示文本和图像的方式。
什么是Flash?由Macromedia公司出品的网页制作“三剑客”软件之一。是一个专业
的网页动画制作软件。它生成的动画可嵌入声音、电影、图形等各种文件，另还可与ＪＳ
等相结合进行编程，进行交互性更强的控制。
5.1.1.网站工作机制
图5-1网站工作机制
5.1.2.网站设计流程
网站的整体策划是一个系统工程，是在建设网站之前进行的必要工作。网站建设总体
互联网
返回结果
http
www服务器网页文件
图像等
空浏览器
流程一般分为市场调查、市场分析、制定网站技术方案、规划网站内容、前台界面设计、
后台程序开发、网站测试、网站发布、网站推广、网站维护等流程。
1、市场调查
2、市场分析
3、制定网站技术方案
4、规划网站内容
5、前台界面设计
6、后台程序开发
7、网站测试
8、网站发布
9、网站推广
10、网站维护
5.1.3.网站设计原则
1、网站设计原则
在网站设计阶段应注意尽心筹划、尽量精简、尽量简朴、善用图片、易于漫游、重点
突出、循环利用现有信息、保持新鲜感、贯彻诺言、吸引用户。
2、网站的组织结构设计原则
在网站组织结构设计时，应考虑网站组织结构良好，对文件、目录等的组织和命名预
先规划好。目录结构保证相近内容放在一起；文件、目录命名规范，且不含特殊字符；URL
链接方式统一。
3、网页布局原则
在网页布局设置时，应注重醒目性、创造性、造型性、明快性、可读性，总结为统一、
协调、流动、强调、均衡。
5.1.4.优秀网站案例解析
1、Google中国网站首页
特点：谷歌公司的标准主页，醒目的标志、创造性的精简界面、主题功能突出。
页面结构：
导航栏
搜索框
导航栏
图5-2谷歌首页简洁版
2、iGoogle中国网站首页
特点：谷歌公司的另一种首页界面模式，在突出搜索功能的前提下，注重信息显示的
多样性、强大的自定义能力。
导航栏
搜索框
自定义信息
3、易中天新浪博客
特点：突出文化氛围、内容清晰、结构简单。
文化氛围Banner
信息博客内容
个人
信息
4、淘宝网
特点：目标是尽量多的展示商品，所以
结构复杂，且各种多媒体技术应用非常多。
Banner导航
栏目导航栏、搜索
广告
内容内容内容内容
内容内容
公司信息
图5-3谷歌首页综合信息版
图5-4易中天新浪博客
图5-5淘宝网首页
5、苹果公司首页
特点：追求质量、追求细节。简洁的界
面中体现公司的品质追求。
导航栏
主打产品介绍
产品产品
6、魔兽世界首页
特点：突出内容，以内涵吸引用户。
广
告
浮
动
游戏Banner广
告
浮
动
开通账号
首页链接
游戏内容
图5-6苹果公司首页
图5-7魔兽世界首页
eaver初步
eaver介绍
Dreamweaver8.0是Macromedia公司推出的目前最新版本的网页设计软件，站点管理
和页面设计是它的两大核心功能，它采用多种先进的技术，易学、易用。只要掌握初步的
知识，再加上自己的创意，即可制作出独树一帜的网页。
本节重点介绍在Dreamweaver8.0中如何创建站点并进行站点管理，从而为下一步开
发网站做好准备，同时，通过本章的学习使读者熟悉Dreamweaver8.0界面及运行环境。
在使用Dreamweaver开发网站之前，首先需要熟悉一下Dreamweaver的启动及设计环
境。通过本节可以使大家了解Dreamweaver8.0这个网页制作软件的“庐山真面目”，会使
后面的学习变得更加轻松，上手更加迅速。
1、Dreamweaver8.0的启动步骤
（1）单击任务栏“开始”按钮，选择“程序”命令。
（2）将光标向右移动，选择Macromedia文件夹。
（3）将光标再向右移动，单击MacromediaDreamweaver8.0图标，Dreamweaver8.0
就被启动了。
图5-8“工作区设置”界面图5-9改变工作区
2、Dreamweaver8.0的工作环境
图5-10Dreamweaver8.0工作界面
3、“插入”面板组
图5-11“插入”栏中的选项
图5-12“插入”栏以标签显示
4、文档工具栏
5、“属性”检查器
面板组
文件面板
文档编辑窗口
插入面板组
文档工具栏
标签状态栏
属性面板
标题栏
菜单栏
图5-13文档工具栏
图5-14图像“属性”检查器
6、文档编辑窗口
网页文档编辑窗口是Dreamweaver8.0的主工作区，在这里可以进行网页的设计制作。
（a）文档编辑窗口的缩放
图5-15最大化文档窗口按钮
（b）文档编辑窗口的标题栏
（c）缩放工具和手形工具
（d）标尺和辅助线
7、面板组
Dreamweaver8.0默认的面板组有以下4个。
（a）CSS面板组
（b）“应用程序”面板组
图5-16CSS面板组图5-17“应用程序”面板组
（c）“标签”面板组
（d）“文件”面板组
8、浮动面板组的操作
常用的浮动面板组的操作方法如下。
（1）展开和折叠浮动面板组
（2）移动浮动面板组
（3）重新组合浮动面板
5.2.2.站点的简介和规划
1、网站
网站（英文：Website）是指在互联网上，根据一定的规则，使用HTML等工具制作
的用于展示特定内容的相关网页的集合。简单地说，网站是一种通信工具，就像布告栏一
样，人们可以通过网站来发布自己想要公开的信息，或者利用网站来提供相关的网络服务。
人们可以通过网页浏览器来访问网站，获取自己需要的信息或者享受网络服务。
2、网页
网页（英文：Webpage）是一个文件，他存放在世界某个角落的某一部计算机中，而
这部计算机必须是与互联网相连的。
首页，亦称主页、起始页，是用户打开浏览器时自动打开的一个或多个网页。首页也
可以指一个网站的入口网页，即打开网站后看到的第一个页面，大多数作为首页的文件名
是index、default、main或portal加上扩展名。
3、网站和网页的关系
网站是多个网页的集合，其包括一个首页和若干个分页，这种集合不是简单的集合。
为了达到最佳效果，在创建任何Web站点页面之前，要对站点的结构进行设计和规划。
决定要创建多少页，每页上显示什么内容，页面布局的外观以及各页是如何互相连接起来
的。
5.2.3.创建本地站点
在Dreamweave8中可以有效的建立并管理多个站点。搭
建站点可以有两种方法，一是利用向导完成，二是利用高级
设定来完成。
图5-18重新组合浮动面板
在搭建站点前，我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹。
1、管理站点
选择菜单栏—站点—管理站点，出现“管理站点”对话
框。点击“新建”按钮，选择弹出菜单中的“站点”项。图5-19管理站点
图5-20创建站点
图5-21创建站点
图5-22创建站点图5-23创建站点
到此，我们完成了站点的创建。
2、搭建站点结构
3、文件与文件夹的管理
5.2.4.使用站点地图
图5-26站点地图视图图5-27创建站点地图
图5-24创建站点图5-25文件夹视图
图5-28站点地图配置
5.3.网页设计初步
5.3.1.创建文本网页
1、插入文本
2、设置文本属性
图5-29文本属性面板
3、编辑字体列表
图5-31编辑字体列表对话框
图5-30调色板
5.3.2.使用表格规划网页布局
1、插入表格
图5-32表格按钮图5-33表格属性设置对话
框
2、设置表格属性
图5-34表格属性
3、设置单元格属性
图5-35单元格属性
4、表格的行和列
图5-36插入行列
5、拆分与合并单元格
图5-37拆分单元格
5.3.3.使用层规划网页布局
1、创建普通层
（1）插入层
图5-38插入层
（2）拖放层
图5-39拖放层
（3）绘制层
2、创建嵌套层
图5-40嵌套层
3、设置层的属性
图5-41层属性
5.3.4.制作图文混排网页
1、插入图像
图5-42插入图像
图5-43选择图像文件
2、设置图像属性
图5-44设置图像属性
3、插入其它图像元素
图5-45插入图像占位符
图5-46插入鼠标经过图像
5.3.5.制作超级链接
1、超级链接及其分类
2、超级链接的创建
图5-47在属性面板直接输入要链接的对象
图5-48在属性面板直接拖曳“指向文件”图标指向要链接的对象
3、超级链接的设置
4、锚记链接
（1）插入“锚记”
图5-49命名锚记对话框
（2）锚记链接
5、邮箱链接
图5-50插入电子邮件链接
6、下载文件链接
7、空链接
5.4.网页设计进阶
5.4.1.制作多媒体网页
1、插入Flash动画
2、插入Flash文本
3、插入Flash按钮
图5-51插入Flash
图5-52插入设置透明背景
图5-53插入Flash按钮
5.4.2.制作表单网页
1、插入表单
（1）将插入点放在希望表单出现的位置。选择“插入”>“表单”，或选择“插入”
栏上的“表单”类别，然后单击“表单”图标，
（2）用鼠标选中表单，在属性面板上可以设置表单的各项属性。
图5-54表单属性
2、简单案例
（1）新建一个网页文件，选择表单插入栏，插入表单，将光标放置在表单内，插入
一个5行2列的表格，将第1、5行合并。分别在第2、3行插入文本字段，在第4行插入
文本区域，在第5行插入两个按钮。
图5-55表单效果
（2）制作网页跳转菜单
图5-56制作跳转表单
图5-57跳转表单中输入内容
5.4.3.使用CSS样式
1、了解CSS
以下为引用的内容：
H1{
font-size:16pixels;
font-family:Helvetica;
font-weight:bold;
}
2、在Dreamweaver中可以定义以下规则类型:
（1）创建新的样式表
选择\"文件\">\"新建\"。
在\"新建文档\"对话框中的\"类别\"列中选择\"基本页\"，在\"基本页\"列中选择\"CSS\"，然后
单击\"创建\"。
图5-58新建CSS文档
在样式表中键入以下代码:
p{font-family:Verdana,sans-serif;
font-size:11px;
color:#000000;
line-height:18px;
padding:3px;}
图5-59浏览、修改CSS内容
（2）附加样式表
当您将样式表附加到Web页面中时，在样式表中定义的规则将应用到页面上的相应
元素。例如，当您将cafe_样式表附加到页时，将根据您定义的
CSS规则设置所有段落文本(用HTML代码中的标签设置格式的文本)的格式。
在\"文档\"窗口中，打开CafeTownsend的文件。(如果该文件已打开，则
请单击它的选项卡。)
选择在教程:向页面添加内容中粘贴到页面中的第一段文本。
图5-60选择要设置CSS的文本
在\"属性\"检查器中查看，并确保使用段落标签设置了该段落的格式。
如果\"属性\"检查器中的\"格式\"弹出式菜单显示\"段落\"，则已使用段落标签设置了段落
的格式。如果\"属性\"检查器中的\"格式\"弹出式菜单显示\"无\"或其它内容，则选择\"段落\"来设
置段落的格式。
图5-61设置CSS
对第二段重复第3步。
在\"CSS样式\"面板(\"窗口\">\"CSS样式\")中，单击位于面板右下角的\"附加样式表\"按
钮。
图5-62点击附加样式表图5-63选择样式
（3）研究\"CSS样式\"面板
（4）创建新的CSS规则
图5-64新建CSS规则
图5-65CSS规则定义界面
图5-66选择CSS设置文本
5.4.4.使用模板批量制作网页
1、建立模板
（1）模板页面
（2）设定可编辑区域
2、使用模板批量制作网页
（1）根据模板新建页面
命令：File→NewFromTemplate。
（2）对一个已经有内容的页面应用模板
命令：Modify→Template→ApplyTemplatetoPage。
（3）更新模板以全面更新站点
另外一种方法是执行Modify→Template→UpdatePages命令。
5.5.网站运营及维护
5.5.1.站点测试
1、兼容性测试
（1）打开前面制作的网站的主页，单击“文档”工具栏中的按钮，在弹出的下拉菜
单中选择“设置”。
（2）打开“目标浏览器”对话框，在对话框中选择要检测的浏览器，在右侧的下拉
列表中选择对应浏览器的最低版本。单击“确定”按钮，关闭对话框，完成要测试的目标
浏览器的设置，如图5-69所示。
图5-67选择“设置”命令图5-68设置“目标浏览器”对话框
（3）选择“文件”>“检查页”>“检查目标浏览器”菜单，在“结果”面板组中的
“目标浏览器检查”面板中将显示检查结果，如图5-70所示。
图5-69“目标浏览器检查”面板
（4）单击“目标浏览器检查”面板左上方的按钮，在弹出的下拉菜单中选择“检查
整个当前本地站点的目标浏览器”选项，以对站点中所有Web页面进行目标浏览器的兼容
性检查。
（5）单击“目标浏览器检查”面板左侧的按钮，浏览器中会显示出检查报告，如图
5-71所示。
图5-70显示检查报告
（6）单击“目标浏览器检查”面板左侧的按钮，可保存检查结果。
（7）双击“目标浏览器检查”面板中的错误信息，系统自动切换至“拆分”视图，
并选中有问题的标记。
（8）将有问题的代码修改或者删除，以修正错误。
2、检查网页链接
（1）检查页面链接
a)在Dreamweaver中打开要检查的网页文档（可继续在SM站点中进行操作）。
b)选择“文件”>“检查页”>“检查链接”菜单，“结果”面板组中的“链接检查器”
面板中将显示检查的结果。
c)在“显示”下拉列表中可选择要查看的链接类型。
图5-71选择要查看的链接类型
（2）检查站点中某部分的链接
a)择“窗口”>“文件”菜单，打开“文件”面板。在“文件”面板中选择要检查
的文件或文件夹。
b)在选中的文件或文件夹上单击鼠标右键，在弹出的快捷菜单中选择“检查链接”>
“选择文件/文件夹”菜单，如图5-73所示。
c)检查结果将显示在“结果”面板组的“链接检查器”面板中。同样地，在“显示”
下拉列表中可选择要查看的链接类型。
（3）检查站点范围的链接
a)首先在“文件”面板中选择要检查的站点。
b)右键单击站点根文件夹，在弹出的下拉菜单中选择“检查链接”>“整个本地站
点”，如图5-21所示。
图5-72检查部分链接图5-73检查整个站点范围的链接
3、修复网页链接
（1）在“断掉的链接”列表中，单击“断掉的链接”列中出错的项，该列变为可编辑状
态，如图5-22所示。
图5-74断掉的链接
（2）重新输入链接文件的路径或者单击右侧的图标，在弹出的“选择文件”对话框中重
新选择链接的文档，此处按【Delete】键删除。
（3）下面还有几个文件与其有相同的错误，当修改完上述链接后，系统弹出提示框，询
问是否修正其他引用该文件的非法链接。
（4）单击“是”按钮关闭提示框，系统自动修正其他链接。
5.5.2.站点管理
1、申请空间和域名
2、申请空间
3、申请域名
（1）域名基础知识
域名可分为顶级域名（一级域名）、二级域名和三级域名等。
以com、net、gov、edu为后缀的域名称为国际域名。
以cn为后缀的域名称为国内域名。
（2）申请域名
5.5.3.站点发布
1、设置站点远程信息
（1）启动Dreamweaver后，选择“站点”>“管理站点”菜单，打开“管理站点”对话框，
如图5-24所示。
（2）在站点列表中选择一个站点（此处选择“SM”），然后单击“编辑”按钮，打开“***
的站点定义为对话框”。
（3）打开“高级”选项卡，在“分类”列表中单击“远程信息”，然后在右侧的“访问”
下拉列表中选择“FTP”，并依次设置下方各项，如图5-77所示。
图5-75“管理站点”对话框图5-76设置站点远程信息
（4）为验证所设参数是否正确，可在设置好站点远程信息后单击“测试”按钮。如果成
功连接，系统会给出相应的提示信息。
（5）依次单击“确定”按钮，关闭提示框和站点定义对话框，完成站点远程信息的设置。
2、上传站点
图5-77上传站点
①在此处选择FTP
③在此处输入
FTP上传帐号
②在此处输入IP地址
④在此处输入
FTP上传密码
图5-78连接服务器
图5-79远程视图
3、下载站点
图5-80提示对话框图图5-81取回文件进度指示对话框
4、使用扩展“文件”面板管理文件上传和取回
5、同步文件
（1）打开“文件”面板，在站点下拉列表中选择希望进行同步操作的站点。
（2）在站点文件列表中选择希望进行同步的的文件或文件夹。如果要同步整个站点，可
跳过此步。
（3）单击“文件”面板右上角的按钮，在弹出的菜单中选择“站点”>“同步”命令，
如图5-34示。
（4）在“同步文件”对话框的“同步”下拉列表中选择希望同步的对象（整个站点或仅
选中的文件），然后在“方向”下拉列表中选择同步的方向。
（5）单击“预览”按钮，系统开始对比本地站点和远程站点中的文件。
（6）对比结束后，会根据情况给出提示框。如果单击“是”按钮，会打开文件列表。可
通过单击左下方的一排按钮，对所选文件进行相应的操作。
如果定义了多个
站点，可打开此下
拉列表选择站点
打开此下拉列表可选择
“本地视图”、“远程
视图”或“地图视图”
本地站点或远程服
务器中的文件列表