第5章 网页制作软件 Dreamweaver CS5(实验教程)
Dreamweaver CS5网页设计教程第5章
高等职业院校立体化精品系列规划教材
学习目标
知识目标
● 了解超链接的组成和种类。 ● 掌握文本超链接、图像超链接、外部超链接和图像热点超链接的创建方法。 ● 熟悉锚点超链接、电子邮件超链接、文件超链接和空链接的创建方法。
课堂实例预览
主要内容
1
2 3 制作“公司地图”网页 制作“给我们留言”网页 实训——制作“精品线路”网页
谢谢观赏
ቤተ መጻሕፍቲ ባይዱ
实训——制作“精品线路”网页
实训目标
本实训的目标是制作“精品线路”网页，要求在提供的网页中通过 添加各种超链接完成网页之间的关联效果。其中要求在网页上方banner 图像、导航路径以及网页下方的功能区中均实现超链接效果。本次实训 的重点在于练习超链接的创建，由于已经将一个极其简单的“精品线路” 网页制作好，只要直接在其上完成实训内容即可。
插入脚本链接
设置“关闭窗口”脚本链接
该脚本链接可以实现单击超链接后，提示是否确认关闭当前访问 页面的功能。 选择网页上方的“关闭窗口”文本，在“属性”面板的“链接” 文本框中输入“javascript:window.close()”。
插入脚本链接
设置“设为首页”脚本链接
该脚本链接可以实现将当前网页设置为主页的目的，当打开浏览 器后将自动访问该网页内容。 选择需添加链接的对象，单击 按钮，在“代码”面板选中 的对象左侧添加相应的脚本。
创建空链接
空链接不产生任何跳转的效果，一般为了统一网页外观，会为当前 页面对应的文本或图像添加空链接。空链接还可实现复杂的脚本链接功 能，比如将网页设置为首页等。 选择需创建空链接的对象，在“属性”面板的“链接”文本框中输 入“#”，按【Enter】键确认即可。
Dreamweaver CS5网页制作项目五
二、为“欧妮雅”网站主页设置类样式（上）
下面创建一个类样式，并设置该样式的类型和列表 属性，然后将创建的样式应用于“欧妮雅”网站主 页中的列表文本（具体操作见视频5-1-2） 。
三、为“欧妮雅”网站主页设置类样式（下）
下面创建一个类样式，并设置该样式的边框属性， 然后将创建的样式应用于“欧妮雅”网站主页中的 相应单元格中，从而为各栏目制作分界线（具体操 作见视频5-1-3）。
四、为“欧妮雅”网站主页设置复合样式 （上）
默认情况下，网页中的链接文本为蓝色且有下划线， 下面为“欧妮雅”网站主页创建复合样式，并设置 样式的“类型”属性，使该样式的链接文本在默认 状态下为白色，而在鼠标经过时为浅紫色（具体操 作见视频5-1-4）。
预备知识
一、“CSS样式”面板
使用“CSS样式”面板可以非常方便地新建、删除、 编辑和应用样式，以及附加外部样式表等。选择 “窗口”>“CSS样式”菜单，可打开“CSS样式” 面板。
二、创建CSS样式
下面我们学习创建CSS样式的方法，并在创建过程 中了解CSS样式的类型及存在方式。
任务实施
一、为“欧妮雅”网站主页设置标签样式
项目五 应用CSS样式
任务一 样式表的基本应用 任务二 样式表的高级应用
任务一 样式表的基本应用
任务说明
使用CSS样式表可以为网页中的行、标题或单元格等 标签定义样式，也可以为链接文本定义样式，还可以 定义可应用于任何元素的样式，从而快速设置或更新 网页的外观。 在Dreamweaver CS5中，我们可以使用两种方式创建 CSS样式表，一种是利用“CSS样式”面板，在可视 化的操作环境中进行创建；一种是在“代码”视图中 直接编写相关的代码。本书我们主要学习利用“CSS 样识
网页设计与制作案例教程(Dreamweaver CS5+Div+CSS+JavaScript)第五章
标签
<table>...</table> <caption>…</captio n> <tr>...</tr> <td>...</td> <th>...</th>
功能
定义一个表格开始和结束 定义表格标题，可以使用属性align，属性值 top、bottom
定义表行，一行可以由多组<td>或<th>标签 组成
定义单元格，必须放在<tr>标签内 定义表头单元格，是一种特殊的单元格标签， 在表格中不是必须的
图5-9 生成的表格
图5-10
“标签检查器”面板
在“标签检查器”中列出了表格所有的属性，如表5-2所示。 请用户根据表5-2列出的表格属性，在“标签”面板中对表 格作进一步的属性设置，观察表格外观变化情况。
5.1.2 表格的基本操作
1、选择整行单元格 2、选择整列单元格 3、选择连续的多个单元格 4、选择不连续的多个单元格 5、选择表格的所有单元格
5.1.2 表格的基本操作
1）插入行
选择“修改→表格→插入行”菜单命令，即在插入点的下面出现一行。 选择“插入→表格对象→在上面插入行”菜单命令，在插入点的上面插入 一行。 选择“插入→表格对象→在下面插入行”菜单命令，在插入点的下面插入 一行。
含义
border，时显示上下左右边框 表 5-2 表 格 的 属 性 及 含 义 （ 续 ） frame box，显示上下左右边框 hsides，显示上下边框 lhs，只显示左边框
rhs，只显示右边框
void，不显示边框 vsides，只显示左右边框 none，表格内部所有线框不显示
《Dreamweaver CS5网页制作高级案例教程》教学课件 项目五
任务四 为网站首页设置第2种链接样式
有时候可能会遇到这种情况，你制作了一个网页，其 中有很多链接文本，你想用不同的链接样式来区分这 些链接文本，也就是设置两种不同样式的链接，那么 如何设置呢？本任务通过给“星光灿烂〞站点中的 “index.html〞网页添加一个链接样式来讲解此类样 式的设置方法〔具体操作见视频4-4〕。
2．CSS滤镜简介
应用CSS滤镜可为图像设置渐变、透明、阴影等效 果。在“***的CSS规那么定义〞对话框左侧的 “分类〞列表中选择“扩展〞选项，右侧的“过滤 器〔Filter〕〞下拉列表中为用户提供了多种滤镜效 果。
三、任务实践
任务一 为网站首页设置body样式
本任务将以“星光灿烂〞站点中的“index.html〞 网页为例，通过为其设置body样式，来学习标签样 式在实际网页制作中的应用〔具体操作见视频5-1〕。
任务七 为网站子页设置外部样式
我们在任务一中曾创立了一个样式文件“s1.css〞， 本任务通过将其链接到网站中的其他页面，来学习 “附加外部样式〞在实际网页制作中的应用〔具体 操作见视频4-7〕。
3．创立CSS样式
在Dreamweaver CS5中，可按照以下步骤来创立CSS 样式。
ห้องสมุดไป่ตู้
〔二〕样式表的高级应用
1．附加外部样式
一般在制作网站时，为保证同一网站中所有网页风格 的一致性，都会尽可能地使用同一种样式。这样就可 以将共用的样式保存在外部样式表文件中，然后将其 链接至各个网页文档。这不仅大大减少了工作量，还 方便了后期的维护和更新。
任务五 为网站首页设置图像样式
理论指导中简单介绍了CSS滤镜，并制作了图像半透 明效果。本任务将使用滤镜制作图像阴影效果，以进 一步学习滤镜的应用〔具体操作见视频4-5〕。
Dreamweaver CS5网页制作案例教程项目六
四、Spry可折叠面板
Spry可折叠面板是一个可以在收缩的空间内存储 内容的面板，用户可通过单击面板标签来显示或 隐藏面板内容。定位插入点后，单击“插入”面 板“布局”类别中的“Spry可折叠面板”即可将 其插入。
任务实施——为“伊韵”网站主页设置特殊效果
下面应用“Spry折叠式”为“伊韵”网站主页设置 特殊效果，来进一步巩固前面所学（具体操作见视 频6-3）。
二、Spry选项卡式面板
Spry选项卡式面板是一系列可以在收缩的空间内 存储内容的面板。浏览者可以单击相应面板标签 在各个面板之间切换。定位插入点后，单击“插 入”面板“布局”类别中的“Spry选项卡式面板” 即可将其插入。
三、Spry折叠式
Spry折叠式是一系列可以在收缩的空间内存储内容 的面板窗口。浏览者可以通过单击面板标题来显示 或隐藏面板内容。定位插入点后，单击“插入”面 板“布局”类别中的“Spry折叠式”即可将其插入。
在学习了Div的创建方法后，下面通过构建“伊韵” 网站主页的结构，来进一步巩固前面所学知识 （具体操作见视频6-1）。
任务二 Div+CSS布局中的定位方式
任务说明
要熟练应用Div+CSS布局网页，必须掌握在页面中 定位网页元素的方法。在使用Div+CSS方式布局网 页时，我们可以使用多种方式定义Div或其他元素 框在页面中的位置，其中最常用的有相对定位、绝 对定位，以及浮动定位。
任务三 应用Spry布局对象
任务说明
Spry是Dreamweaver内置的代码块，使用它可以 在网页中添加Spry菜单栏、Spry选项卡式面板、 Spry折叠式和Spry可折叠面板，本任务将分别介 绍。
预备知识
一、Spry菜单栏
Dreamweaver CS5实例教程 (5)
5.1.8 删除表格和表格内容
删除表格的操作包括删除行或列，清除表格内容。
5.1.9 缩放表格
创建表格后，可根据需要调整表格、行和列的大小。
5.1.10 合并和拆分单元格
有的表格项需要几行或几列来说明，这时需要将多个单元格合 并，生成一个跨多个列或行的单元格。
5.1.11 增加和删除表格的行和列
5.4 课堂练习——设计家园网页
使用“导入表格式数据”命令导入外部表格数据。使用“排序 表格”命令将表格的数据排序。
效果图
5.5 课堂练习——百货折扣网页
使用“页面属性”命令设置页面属性。使用“图像”和“表 格”按钮制作网页效果。使用“属性”面板设置单元格背景颜色。
效果图
5.6 课后习题——手机频道网页
使用“页面属性”命令设置页面属性。使用“表格”按钮插入 表格效果。使用“图像”按钮插入图像。
效果图
课堂学习目标
表格的简单操作 网页中的数据表格 复杂表格的排版 利用表格进行页面布局
5.1 表格的简单操作
课堂案例——时尚购物网页 表格的组成 插入表格 表格各元素的属性 在表格中插入内容 选择表格元素 复制、粘贴表格 删除表格和表格内容 缩放表格 合并和拆分单元格 增加和删除表格的行和列
5.1.1 课堂案例——时尚购物网页
5.1.4 表格各元素的属性
插入表格后，通过选择不同的表格对象，可以在“属性”面板 中看到它们的各项参数，修改这些参数可以得到不同风格的表格。
5.1.5 在表格中插入内容
建立表格后，可以在表格中添加各种网页元素，如文本、图像 和表格等。在表格中添加元素的操作非常简单，只需根据设计要求 选定单元格，然后插入网页元素即可。一般当表格中插入内容后， 表格的尺寸会随内容的尺寸自动调整。当然，还可以利用单元格的 属性来调整其内部元素的对齐方式和单元格的大小等。
实战DreamweaverCS5...
实战DreamweaverCS5...学习目标掌握Dreamweaver CS5工作界面的基本操作能利用站点定义向导创建站点和编辑管理站点初步体验制作一个完整网站的方法本章内容1.1 Dreamweaver CS5简述1.2 Dreamweaver CS5的工作界面和基本操作1.3 Dreamweaver 站点的建立及规划1.4 文件的基本操作1.5 制作第一个网站“藏獒传说”1.1 Dreamweaver CS5概述Dreamweaver CS5是美国Adobe公司推出的集网页制作和站点管理于一身的网页制作软件，也是第一个专门为网页设计师量身定制的可视化网页制作软件，利用它可以制作出跨越平台限制和浏览器限制的、充满丰富动感的网页。
以前，网页设计者在制作网页时必须熟练掌握HTML语言和JavaScript，但是现在设计者使用Dreamweaver CS5就可以轻松制作出精美的网页，而且在制作过程中可以同步预览制作效果，使得网页设计过程简单明了。
Dreamweaver CS5在原来版本的功能基础之上进行了改进和升级，功能更强大。
它不仅可以制作出任何结构复杂的静态网页，具有完美的操作界面、强大的模板功能、创建动态网页、强大的代码编辑功能，在Dreamweaver CS5中，CSS功能更加完整、站点管理更为简捷、高效。
1.2 Dreamweaver CS5的工作界面和基本操作1.2.1 Dreamweaver CS5的启动单击“开始”按钮，选择“程序”中的“Adobe Dreamweaver CS5”命令，就可以启动Dreamweaver CS5应用程序。
启动Dreamweaver CS5后首先看到的画面是开始页面，供用户选择新建文件的类型，或打开已有的文档等，如图所示。
在此选择“新建”下的“HTML”选项，，便可进入工作界面。
1.2 Dreamweaver CS5的工作界面和基本操作1.2.1 Dreamweaver CS5的启动Dreamweaver CS5根据不同的需求设置了不同风格的工作界面有经典、编码器、编码人员（高级）、设计器、设计人员（紧凑）和双重屏幕几种布局模式，其中默认的是设计器界面。
边做边学——Dreamweaver CS5网页设计案例教程05
使用表格5.1.5【实战演练】——租车网页使用“表格”按钮，插入表格；使用“页面属性”命令，设置页面的边距、页面标题；使用“图像”按钮，插入图像布局网页。
（最终效果参看光盘中的“Ch05> 效果> 租车网页> index.html”，如图5-1所示。
）图5-11．设置页面属性并插入表格1 启动Dreamweaver CS5，新建一个空白文档。
新建页面的初始名称是“Untitled-1.html”。
选择“文件> 保存”命令，弹出“另存为”对话框，在“保存在”选项的下拉列表中选择站点目录保存路径，在“文件名”选项的文本框中输入“index”，单击“保存”按钮，返回到编辑窗口。
2 选择“修改> 页面属性”命令，在弹出的“页面属性”对话框左侧“分类”选项列表中选择“外观”选项，将“左边距”、“右边距”、“上边距”和“下边距”选项均设为0，如图5-2所示，单击“确定”按钮。
3 单击“插入”面板“常用”选项卡中的“表格”按钮，在弹出的“表格”对话框中进行设置，如图5-3所示，单击“确定”按钮，效果如图5-4所示。
保持表格的选取状态，在“属性”面板“对齐”选项的下拉列表中选择“居中对齐”选项。
第5章使用表格CHAPTER 5图5-2 图5-3图5-42．设置单元格背景颜色并插入图像1 将光标置入到第1行单元格中，在“属性”面板“水平”选项的下拉列表中选择“居中对齐”选项，将“高”选项设为254，“背景颜色”设为青蓝色（#4488CF），如图5-5所示。
表格效果如图5-6所示。
图5-5图5-62 单击“插入”面板“常用”选项卡中的“图像”按钮，在弹出的“选择图像源文件”对话框中选择光盘“Ch05 > 素材> 租车网页> images”文件夹中的“img_03.jpg”，单击“确定”按钮完成图片的插入，效果如图5-7所示。
图5-7边做边学——Dreamweaver CS5网页设计案例教程中等职业教育数字艺术类规划教材3 将光标置入到第2行单元格中，单击“插入”面板“常用”选项卡中的“图像”按钮，在弹出的“选择图像源文件”对话框中选择光盘“Ch05 > 素材> 租车网页> images”文件夹中的“img_06.jpg”，单击“确定”按钮完成图片的插入，效果如图5-8所示。
Dreamweaver CS5网页设计与制作教程第五章
5.1 认识行为
行为是由对象、动作和事件构成的，事件是产生行为的条件，动作是行为 的具体结果。 对象：是产生行为的主体。对象可以是网页中的很多元素，如网页中的一 段文字、一幅图片等元素，也可以整个网页文档。 动作：通常是一段JavaScript代码，用于完成某些特殊的任务。如打开一 个窗口自动弹出“欢迎”窗口、鼠标经过图片图片晃动等效果。 事件：是由用户或浏览器引发动作产生的事情。事件经常是针对页面元素 的，也就是行为的对象，如鼠标经过、鼠标离开、鼠标单击等。
5.2 使用行为
文本域文字的行为 页面中的用户登录需要输入用户名、密码，因此在页面会插入给用户输入的 文本域。常常可以设计这样的效果：当鼠标移到文本域时，文本域中显示“ 请输入用户名”，当文本域获得焦点时，之前的文字消失，用户则可以输入 用户名信息。这种效果是添加了文本域文字的行为
5.2 使用行为
制作交换图像 “交换图像”这一动作的特效是恢复交换的图像。当鼠标经过图像时，原图 像会变成另外一幅图像，否则恢复原图像。其实，一个交换图像是由两幅图 像组成的，包括原始图像和鼠标经过时显示的交换图像。
5.2 使用行为
制作交换图像 2.选择行为的事件。
<img src="images2/cp2.jpg" alt="" name="Image1" width="256" height="226" hspace="10" vspace="10" id="Image1" onmouseover="MM_swapImage('product', '','images2/cp2.jpg',1)" onmouseout="MM_swapImgRestore()" />
课堂案例——儿童课堂_网页设计与制作——Dreamweaver CS5标准教程_[共2页]
![课堂案例——儿童课堂_网页设计与制作——Dreamweaver CS5标准教程_[共2页]](https://img.taocdn.com/s3/m/0a30a5f5bcd126fff6050b93.png)
第5章 超链接77建立图像超链接的操作步骤如下：在【文档】窗口中选择需要建立超链接的图像。
在【属性】面板中，单击【链接】项文本框后的【浏览文件】按钮，为图像添加链接。
图像添加链接后会出现一个边框，如不需要，可在【属性】面板的【边框】项文本框内输入0。
在【替换】项中可以输入替换文字。
设置替换文字后，当图像不能正常显示时，会在图像的位置显示替换文字。
浏览时把鼠标悬停在图像上也会显示替换文字。
按<F12>键预览网页效果。
鼠标经过图像是指当鼠标指针经过一幅图像时，图像的显示会变为另一幅图像。
鼠标经过图像实际上是由两张图像组成，一张称为原始图像，另一张称为鼠标经过图像。
一般来说，原始图像和鼠标经过图像尺寸必须相同，如果图像的大小不同，Dreamweaver 会自动调整鼠标经过图像的大小，使之与原始图像匹配。
建立鼠标经过图像的操作步骤如下：在【文档】窗口中将光标置于需要添加鼠标经过图像的位置。
选择菜单【插入】|【图像】|【鼠标经过图像】，在【插入鼠标经过图像】对话框中分别单击【原始图像】和【鼠标经过图像】文本框右侧的【浏览】按钮设置图像路径。
在【替换文本】文本框中设置替换文字。
在【按下时，前往的URL 】文本框中设置跳转的网页文件路径，当浏览者单击图像时打开此网页。
单击【确定】按钮，按<F12>键预览网页效果。
5.4前面介绍的图像超链接，一个图像只能设置一个链接目标，如果要实现单击一个图像的不同区域跳转到不同的链接目标，这就需要设置热点链接。
热点链接是在一个图像中创建几个不同的几何图形区域，以这些区域为超链接的源端点，然后分别为这些几何区域建立不同的超链接。
图像中建立超链接的几何区域称为热点。
案例学习目标：学习创建热点链接。
案例知识要点：使用【属性】面板创建热点链接。
素材所在位置：光盘/案例素材/ch05/课堂案例-儿童课堂。
案例效果如图5-32所示。
第5章 网页制作软件 Dreamweaver CS5(实验教程)分析
cb.html
cc.html ea.html
站点文件夹：网站中所有相关文件必须存放在站点文件夹中。
5.2 Dreamweaver CS5站点管理
5.2.1 站点的创建和管理
站1点. 创：建是本一地种站管点理网站中所有相关联文档的工具，是一种文档的组 织形式单。击菜单栏“站点”|“新建站点”命令，打开“站点设置对象” 对话框
打开“高级设置”对话框，单 击“物理路径”文本框右侧按 钮，设置好站点文件夹后，单 击“确定”按钮
5.3 网页作基本操作
5.3.1 设置网页属性
单击工作界面下方“属性”面板 中的“页面属性”按钮，打开 “页面属性”对话框
5.3 网页制作基本操作
5.3.2 网页的文字处理
1. 添加文字
❖ 将光标置于网页中，直接输入文字内容。输入文本时，若文本要 换行有两种方式。
• 直接按<Enter>键 。上一行与下一行之间空出一行的距离，在 代码区对应的HTML标记是<p>，这是分段。
• 按<Shift>+<Enter>键进行强制换行，上一行与下一行之间很 紧密，对应的HTML标记是<br>
❖ 输入空格：按<Ctrl>+<Shift>+<Space>键，对应的HTML标记是 “ ” 。 ❖ 从外部导入Word、Excel等文档。
件新建。若选择“新建文件夹”，则在 当前文件夹下新建下级文件夹
在“文件”面板“本地文件”列表中，右键单击选择好的文件夹，在弹出的 快捷菜单中选择“新建文件”命令，则在该文件夹下创建一个html文件，对 其命名
5.2 Dreamweaver CS5站点管理
边做边学——Dreamweaver CS5网页设计案例教程04
超链接4.1.5【实战演练】——摩托车改装网页使用“属性”面板，为文字制作空链接效果，使用“电子邮件链接”按钮，制作电子邮件链效果，使用“属性”面板，为文字制作下载链接效果；使用“CSS样式”改变链接的显示效果。
（最终效果参看光盘中的“Ch04> 素材> 摩托车改装网页> index.html”，如图4-1所示。
）1．创建空链接1 选择“文件> 打开”命令，在弹出的“打开”对话框中选择光盘中的“Ch04 > 素材>摩托车改装网页> index.html”文件，单击“打开”按钮打开文件，如图4-2所示。
图4-1 图4-22 选中如图4-3所示的文字，在“属性”面板“链接”选项右侧的文本框中输入“#”，如图4-4所示，按Enter键，确认文字的输入，创建空链接，效果如图4-5所示。
图4-3 图4-4 图4-53 用相同的方法为其他文字创建空链接，效果如图4-6所示。
第4章超链接CHAPTER 4图4-62．创建下载链接1选中如图4-7所示的文字，单击“属性”面板“链接”选项右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择“Ch04 > 素材 > 摩托车改装网页 > images ”中的“mtc.zip ”文件，如图4-8所示。
图4-7 图4-82单击“确定”按钮，创建下载链接，“属性”面板如图4-9所示，效果如图4-10所示。
图4-9 图4-103．创建电子邮件链接1选中如图4-11所示的文字，单击“插入”面板“常用”选项卡中的“电子邮件链接”按钮，在弹出的“电子邮件链接”对话框中进行设置，如图4-12所示。
图4-11 图4-122单击“确定”按钮，创建电子邮件链接，“属性”面板如图4-13所示，效果如图4-14所示。
边做边学——Dreamweaver CS5网页设计案例教程中等职业教育数字艺术类规划教材图4-13 图4-14 4．调整超链接的显示效果1 选择“窗口> CSS样式”命令，弹出“CSS样式”面板，单击面板中的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中进行设置，如图4-15所示，单击“确定”按钮，弹出“a:link,a:visited的CSS规则定义”对话框，在左侧的“分类”选项列表中选择“类型”选项，将右侧的“Color”选项设为黑色，勾选“Text-decoration”选项下的“none”，如图4-16所示，单击“确定”按钮，创建超链接样式，效果如图4-17所示。
Dreamweaver CS5教程
Dreamweaver CS5教程第一课：网页设计基础一、网页的概述1、网页与网站浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站2、浏览网页的工具－浏览器浏览器：用于打开显示网页的软件。
最常用的是Windows系统自带的IE浏览器。
还有火狐Firefox、360安全浏览器、遨游、腾讯、TT等等。
1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式/nba.shtm12) 主页：访问网站时，默认打开的第一个页面就是主页也叫首页。
二、初识Dreamweaver1、制作网站的流程规划网站类型及主题－搜集资料－使用软件进行网页制作－测试及发布2、认识Dreamweaver是当前最流行、最方便的网页设计和网站开发工具软件。
Dreamweaver：梦想编辑者。
通过这个工具，实现编辑网页的梦。
Dream：梦想Weaver：织布者，织工早期的Macromedia公司推出的“网页三剑客”之一。
“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中专用利器。
它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发工具，前两年Macromedia公司被Adobe公司收购，DM CS5是最新推出的版本。
三、创建站点1、什么是站点Dreamweaver的站点是一种管理网站中所有相关联文件的工具，通过站点可以对网站的相关页面及各类素材进行统一管理，还可以使用站点管理实现将文件上传到网页服务器，测试网站简单的说就是一个文件夹，在这个文件夹里包含了网站中所有用到的文件，我们通过这个文件夹（站点），对我们的网站进行管理，有次序，一目了然。
2、创建站点。
Dreamweaver CS5 网页制作
框架页面
一般情况下都是一个浏览器窗口显示一个的Web页 面，这一类页面简单、直观制作方便。但是当要求在 一个窗口内容纳大量信息时，比如一个大型网站的首 页，这种页面就很难胜任了。这时，我们就必须运用 框架技术来解决问题。框架的作用就是把浏览器窗口 划分为若干个区域，每个区域显示不同的网页。
可视化网页编辑工具
Web的特点和结构
3.Web技术经历了3个发展阶段 第一代，提供对静态网页的管理和访问。 第二代，提供对动态网页的访问和显示。 第三代，除动态网页生成和访问之外，还提供基 于Web的联机事务处理能力。 • 静态网页是从放置到服务器以后，直到发送给浏 览器不会发生更改的网页，通常用HTML语言编写 其代码，保存为.htm文件。 • 动态网页是在发送到浏览器之前由应用程序服务 器修改的网页。动态网页的源文件可用HTML语言 和VBScript或JavaScript等脚本语言编写，保存 为.asp文件，也称为Web应用程序。
动态网页技术
(1) CGI技术
CGI ---Common Gateway Interface，公用网关接口。 用来实现CGI应用程序的编程语言有许多种，如Visual Basic、C/C++、Perl等。当用户在浏览器端填好表单要求 输入的资料，提出HTTP请求后，Web服务器端执行该表单所 设定的CGI应用程序，处理访问者输入的信息并据此做出响 应，将其运行结果传输到客户端的浏览器上。 由于CGI程序不是整合在HTML文档中，因此须使用与 HTML不同的设计过程来设计一个应用程序，每一次修改程 序都必须重新将CGI程序编译成可执行文件。使用CGI方式 的缺点是效率低下。
WWW服务的常用术语
2. 网页 WWW服务器上的基本信息单位就是网页。网页是单个的 HTML文件，是作者公布信息的最小单位。 3. 网站 网站是一个存放在WWW服务器上的完整信息的集合体， 由一组相关联的网络文件组成，包含一个或多个网页。
计算机网络与网页制作DreamweaverCS5案例教程课程设计
计算机网络与网页制作DreamweaverCS5案例教程课程设计引言计算机网络和网页制作是现代社会中十分重要的技能。
随着互联网的普及，越来越多的人需要学习这些技能以应对工作和生活中的需要。
本课程设计旨在通过Dreamweaver CS5这一工具，为初学者提供一些基础的网页制作技能，同时介绍一些计算机网络的基本知识。
通过学习这些内容，学生将能够更加深入地了解计算机网络和网页制作的重要性，同时掌握一些基本的网页设计技巧。
课程目标•培养学生对计算机网络和网页制作的基本理解•掌握HTML和CSS的基本语法和语义•使用Dreamweaver CS5来制作网页•具备基本的网页设计技巧教学内容单元一计算机网络•网络基础知识•OSI七层模型•TCP/IP协议•网络拓扑结构单元二 HTML和CSS基础•HTML标记和标记属性•HTML布局•常用CSS属性•CSS选择器单元三 Dreamweaver CS5使用和网页制作•Dreamweaver CS5介绍•网页创建和结构•CSS样式应用•图像和多媒体的使用单元四网页设计技巧•网页颜色的搭配•图片和文本的结合•网页布局的设计•图片和背景的处理教学方式本课程将采用讲授、实践和课堂互动结合的方式进行，其中包括以下内容：•讲解：通过讲解基本理论和实际案例，使学生了解计算机网络和网页制作的知识和技巧；•实践：通过课堂练习和作业，切实帮助学生掌握Dreamweaver CS5和网页制作的基本技巧；•课堂互动：通过互动和讨论，培养学生的网页设计能力和沟通能力。
教学评估•课堂作业：通过布置每个单元的小作业，检验学生掌握程度；•课堂测试：通过测试学生对各个单元的理解和掌握程度；•总结报告：通过学生自主完成的综合性作业，检验学生综合应用所学知识的能力。
教学资源•Dreamweaver CS5软件•网络教学课件•网络实验环境•相关网页设计材料和案例结语通过本课程的学习，学生将能够掌握计算机网络和网页制作的基本知识和技巧。
实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第5章 使用CSS样式
学习目标能够创建、编辑、删除CSS样式能够创建并灵活运用类样式能够创建标签样式重新定义HTML标签 能够创建并灵活运用复合内容样式。
能够附加外部样式表文件。
本章内容5.1 类样式的创建与应用5.2 标签样式与复合内容样式的创建与应用5.1 类样式的创建与应用5.1.1 案例制作：书法背后的人生通过本案例的操作，你将学会:1）创建CSS样式的一般方法。
2）如何创建和应用类样式。
5.1 类样式的创建与应用5.1.1 案例制作：书法背后的人生操作步骤：（1）规划站点新建文件夹“shufa_beihou”，将素材文件夹中所有文件和文件夹拷贝到“shufa_beihou”文件夹中。
（2）定义站点在Dreamweaver CS5中，单击菜单“站点”→“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“菁菁家园”，本地站点文件夹设置为shufa_beihou文件夹。
打开shufa_rensheng_1.html。
（3）创建并应用类样式CSS样式“.content”该样式用来修饰文章内容，字体为宋体，大小为9pt，颜色代码为#090，行高140%。
1）选择菜单“窗口”→“CSS样式”命令，打开“CSS样式”面板，如果“CSS样式”命令前已打对勾，表示“CSS样式”面板已经打开，无需执行此命令。
2）单击“CSS样式”面板右下角的新建CSS规则按钮，打开“新建CSS规则”对话框。
5.1 类样式的创建与应用5.1.1 案例制作：书法背后的人生操作步骤：3）在对话框中“选择器类型”选择“类（可用于任何HTML元素）”，“选择器名称”文本框中输入“.content”，“规则定义”选择“仅限该文档”，如图所示。
5.1 类样式的创建与应用5.1.1 案例制作：书法背后的人生操作步骤：4）单击“确定”按钮，打开“CSS规则定义”对话框，在左侧“分类”列表中选择“类型”，右侧设置字体为宋体，大小为9pt，行高140%，颜色为#090，如图所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
5.2 Dreamweaver CS5站点管理
5.2.3 站点的发布（Windows 7旗舰版平台 ）
1. 安装Internet信息服务
单击“开始”菜单 “控制面板”命令，在窗体中选择“卸载程 2. Web服务器设置 序”，再单击窗体左侧“打开或关闭Windows功能”。 在弹出的“Windows 功能”对话框中，若“Internet信息服务”复 单击“开始”菜单 |“控制面板”命令，在窗体中选择“系统和安 3. IE浏览 选框已勾选，说明本机已安装该组件，否则选中此复选框，单击 全”，再单击窗体右侧“管理工具”，然后启动“ Internet信息服务 启动本机（ Web服务器）IE浏览器，在地址栏输入本机IP地址或 “确定”按钮，等待安装完成。 (IIS) 管理器”应用程序 localhost，进入网站的首页“index.html”
微视频5-2 演示
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
滚动字幕是用来显示滚动文本的，如网站的最新通知等。字幕 可以水平滚动，也可以上下滚动。 在Dreamweaver CS5中利用<marquee>标签插入字幕 。
选中要做字幕的 文本 ，单击菜单 栏“插入”|“标 签”命令，打开 “标签选择器” 对话框
• 网站与网页的创建与管理
• 网页制作的基本操作
• CSS样式表的创建与使用 • 网页的各种布局方式 • 行为的应用
5.1 Dreamweaver CS5概述
5.1.1 Dreamweaver的发展
Dreamweaver 1.0 Dreamweaver CS3
Dreamweaver 2.0
Dreamweaver 2.01 Dreamweaver 3 Macromedia Dreamweaver 4 时代 Dreamweaver 5 Dreamweaver MX Dreamweaver MX 2004 Dreamweaver 8.0 Adobe 时代
单击“锐化”按钮 设置参数， 增加图像边缘的对 比度
5.3 网页制作基本操作
5.3.3 插入图像
4. 设置背景图像
设置方式 • 在“页面属性”对话框中，“外观（CSS）”和“外观 （HTML）”栏都有关于背景图像的设置。 • 用户在自定义CSS样式表中， 通过Background-image属性设 置。 背景图像样式 当背景图像没有浏览界面大时，背景图像将被复制平铺 • no-repeat（不重复）：只在图像元素的开始处显示一次图像。 • repeat（重复）：在图像元素的水平方向和垂直方向平铺图像。 当不指定平铺方式时，这是默认方式。 • repeat-x（横向重复）：在水平方向进行图像的重复显示。 • repeat-y（垂直重复）：在垂直方向进行图像的重复显示。
（1）水平线 （2）特殊符号 （3）标记列表
单击菜单栏“格式”|“列表”命令 ，通过其级联菜 单项完成操作 单击菜单栏“插入”|“HTML”|“水平线”命令
单击菜单栏“插入”|“HTML”|“特殊字符”命令， 通过其级联菜单项完成操作
“属性”面板HTML属性检查器中
也提供列表项设置
5.3 网页制作基本操作
微视频5-3 演示
5.3 网页制作基本操作
5.3.3 插入图像
3. 编辑图像
插入图像后选中该图像，“属性”面板还提供了对图像的编辑功能。
单击 “裁剪” 按钮删除图像 单击“重新取样”按钮 重新计算图像数 据量，以适应当前图像 大小
中选定区域以外的多余部分
ห้องสมุดไป่ตู้
单击“亮度和对比度”按钮 设置亮度、对比度参数
有.asp、.aspx、.php、.jsp等格式
a.html
静态网页文件后缀名 常见.htm或.html
b.html
c.html
d.html
e.php
ca.html
cb.html
cc.html
ea.html
站点文件夹：网站中所有相关文件必须存放在站点文件夹中。
5.2 Dreamweaver CS5站点管理
5.2.1 站点的创建和管理
1. 创建本地站点 站点：是一种管理网站中所有相关联文档的工具，是一种文档的组 织形式。 单击菜单栏“站点”|“新建站点”命令，打开“站点设置对象” 对话框
5.2 Dreamweaver CS5站点管理
5.2.1 站点的创建和管理
2. 管理站点 单击菜单栏“窗口”|“文件”命令，出现“文件”面板，其下拉 列表框中会出现当前站点名称。 单击下拉列表框，在下拉列表中会出现所有已经创建好的站点， 若选择“管理站点”选项，则打开“管理站点”对话框，或者直 接单击菜单栏“站点”|“管理站点”命令也可打开此对话框
单击菜单栏“文件”|“新 建”命令，打开“新建文 档”对话框
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式一：
选择合适对象后， 单击“创建”按钮
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式三：
也可以通过单击“文件”面板右上角按 钮，在弹出的“文件”菜单项中完成 文 件新建。若选择“新建文件夹”，则在 当前文件夹下新建下级文件夹
课件制作：周萱
5.1 Dreamweaver CS5概述 5.2 Dreamweaver CS5站点管理
第 5章 网页制作软件 Dreamweaver CS5
5.3 网页制作基本操作
5.4 网页布局
5.5 行为 5.6 典型习题
本章要点
• 自定义Dreamweaver CS5的工作界面与工作环境
打开“高级设置”对话框，单 击“物理路径”文本框右侧按 钮，设置好站点文件夹后，单 击“确定”按钮
5.3 网页制作基本操作
5.3.1 设置网页属性
单击工作界面下方“属性”面板 中的“页面属性”按钮，打开 “页面属性”对话框
5.3 网页制作基本操作
5.3.2 网页的文字处理
1. 添加文字
将光标置于网页中，直接输入文字内容。输入文本时，若文本要 换行有两种方式。 • 直接按<Enter>键 。上一行与下一行之间空出一行的距离，在 代码区对应的HTML标记是<p>，这是分段。 • 按<Shift>+<Enter>键进行强制换行，上一行与下一行之间很 紧密，对应的HTML标记是<br> 输入空格：按<Ctrl>+<Shift>+<Space>键，对应的HTML标记是 “ ” 。 从外部导入Word、Excel等文档。 • 例：要导入Word文档，单击菜单栏“文件”|“导入”|“Word 文档”命令，打开“导入Word文档”对话框，选择要导入的 文件，单击“打开”按钮，文本内容就被导入至网页中。
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
• 在左侧列表中选择 “HTML标签”，在右侧 列表中选择“marquee”， 单击“插入”按钮，再 单击“关闭”按钮。 • 此时代码区生成代码 <marquee>hello</marqu ee>。 • 保存网页后预览，此 时设置滚动字幕用的是 marquee标签的默认属 性。
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
• 在网页中选中字幕文 本，单击工作界面状 态栏“<marquee>”标 签 • 按<Ctrl>+<T>键打开 “快速标签编辑器” • 修改“<marquee>” 标签的属性
5.3 网页制作基本操作
5.3.2 网页的文字处理
4. 其他修饰
5.3 网页制作基本操作
5.3.3 插入图像
5. 插入图像占位符
在设计网页过程中，有时当要往网页中插入图像时却 没有合适的图像，这时可以先插入图像占位符代替图 像，为图像预留指定大小的空间，而不影响设计。
鼠标移至图像时，该图像切换为另一幅图像，鼠标 将光标置于网页中待插入图像位置，单击菜单栏“插入” |“图像对 从图像移走时，又恢复为原始图像 象” |“图像占位符”命令，打开“图像占位符”对话框 6. 插入鼠标经过图像
Dreamweaver CS4
Dreamweaver CS5 Dreamweaver CS5.5
Dreamweaver CS6
Dreamweaver CC ……
5.1 Dreamweaver CS5概述
5.1.2 Dreamweaver CS5工作界面与工作环境
Dreamweaver CS5工作区的操作界面主要包括菜单栏、工具 栏、状态栏、属性面板和浮动面板组等。
5.3 网页制作基本操作
5.3.4 建立超链接
3. 图像热点链接
图像热点——将图像划分成小块区域，为每个区域单独做超链接， 这样带有链接的区域就称为图像的热点。
5.3 网页制作基本操作
5.3.4 建立超链接
5.3 网页制作基本操作
5.3.2 网页的文字处理
2. 设置文本属性
文本属性设置包括设置文本字体、颜色、链接样式等。 （1）在“页面属性”对话框中设置文本
微视频5-1 演示
（2）在“属性”面板中设置文本 • CSS属性检查器：在“属性”面板中单击按钮 • HTML属性检查器：在“属性”面板中单击按钮
2. 设置图像属性
选中图像，拖动控制柄。
• 将光标分别定位至三个控制 柄处，可以分别对图像进行 水平拉伸、对角拉伸、垂直 拉伸 • 按住Shift键进行对角拉伸， 则是对图像等比例缩放。