Dreamweaver教案课件第6章
合集下载
【课件-计算机基础教学】_第6章 Dreamweaver CS6 网页制作_
● 代码视图：在代码视图中可以查看或编辑源代码 ● 拆分视图：编辑窗口分割成上下两部分，上半部分显示源
代码，下半部分显示网页设计外观，这样可以在编辑代码 的同时观看设计效果 ● 设计视图：为可视化编辑窗口，窗口中看到的网页外观和 浏览器中看到的基本是一样的，即“所见即所得”模式 ● 实时视图：显示不可编辑的、交互式的、基于浏览器的文 件视图
2020-8-11
9
7.1.1 Dreamweaver CS6工作界面
2. 面板
●比较常用的工具面板包括插入面板、文件面板、 CSS面板、历史记录面板、属性面板等
●除属性面板外，其他面板都在Dreamweaver窗口右 侧显示，统称为面板组
● 属性面板
● 属性面板可以检查和设置当前选定页面元素的属性
与蓝色搭配显得幽静
激奋的色彩，具有富丽、辉煌、轻快、温馨、
2020-8-11
7
7.1.1 Dreamweaver CS6工作界面
单击“新建”项目组中的“HTML”，进入 Dreamweaver工作界面
文件标签
菜单栏
文档工具栏
面板组
文档窗口
标签选择器 属性面板
2020-8-11
8
7.1.1 Dreamweaver CS6工作界面
1. 主菜单
●Dreamweaver CS6的菜单共有10大类，提供了全部 的Dreamweaver命令，包括“文件”、“编辑”、 “查看”、“插入”、“修改”、“格式”、“命 令”、“站点”、“窗口”和“帮助”等
2020-8-11
5
7.1 Dreamweaver CS6 概述
7.1.1 Dreamweaver CS6工作界面 7.1.2 网页与网站设计 7.1.3 创建和管理站点
代码，下半部分显示网页设计外观，这样可以在编辑代码 的同时观看设计效果 ● 设计视图：为可视化编辑窗口，窗口中看到的网页外观和 浏览器中看到的基本是一样的，即“所见即所得”模式 ● 实时视图：显示不可编辑的、交互式的、基于浏览器的文 件视图
2020-8-11
9
7.1.1 Dreamweaver CS6工作界面
2. 面板
●比较常用的工具面板包括插入面板、文件面板、 CSS面板、历史记录面板、属性面板等
●除属性面板外，其他面板都在Dreamweaver窗口右 侧显示，统称为面板组
● 属性面板
● 属性面板可以检查和设置当前选定页面元素的属性
与蓝色搭配显得幽静
激奋的色彩，具有富丽、辉煌、轻快、温馨、
2020-8-11
7
7.1.1 Dreamweaver CS6工作界面
单击“新建”项目组中的“HTML”，进入 Dreamweaver工作界面
文件标签
菜单栏
文档工具栏
面板组
文档窗口
标签选择器 属性面板
2020-8-11
8
7.1.1 Dreamweaver CS6工作界面
1. 主菜单
●Dreamweaver CS6的菜单共有10大类，提供了全部 的Dreamweaver命令，包括“文件”、“编辑”、 “查看”、“插入”、“修改”、“格式”、“命 令”、“站点”、“窗口”和“帮助”等
2020-8-11
5
7.1 Dreamweaver CS6 概述
7.1.1 Dreamweaver CS6工作界面 7.1.2 网页与网站设计 7.1.3 创建和管理站点
中文版DreamweaverCS6网页制作实用教程第六章使用层与Spry布局网页
(2) 层效果
4. 设置对齐层
对齐层主要是对齐多个层。选中多个层后，选择【修改】|【排列顺序】命令，在子菜单中 选择对齐方式。如果选择【修改】|【排列顺序】|【设成高度相同】命令或【修改】|【排列顺 序】|【设成宽度相同】命令，将以最后一个选中的层的大小为标准，调整其他层的大小并对齐 层，如图 6-11 所示。
图 6-8 设置容器的文本
图 6-9 【设置容器的文本】对话框
3. 设置层可见性
在处理文档时，可以在【AP 元素】面板中手动设置层的可见性。以图 6-7 右图所示的 3 个层为例，单击【AP 元素】面板中的 按钮，如果显示为 图标，层为可见；当显示为 图 标，隐藏层的显示，如图 6-10 所示。
(1) 设置显示与隐藏层 图 6-10 设置层的可见性
-114-
(1) 输入层的叠堆顺序数值 图 6-7 调整层的顺序
(2) 层顺序修改效果
2. 设置层文本 在创建层的过程中，用户可以 章 使用层与 Spry 布局网页
【例 6-2】在 Dreamweaver CS6 中设置层文本。 (1) 选中要设置层文本的层，选择【窗口】|【行为】命令，打开【行为】面板。 (2) 单击【行为】面板上的 按钮，在弹出的菜单中选择【设置文本】|【设置容器的文本】 命令，如图 6-8 所示，打开【设置容器的文本】对话框。 (3) 在【设置容器的文本】对话框的【层】下拉列表中可以选择层的名称，如图 6-9 所示， 在【新建 HTML】文本框中可以输入文本内容，单击【确定】按钮即可设置层文本。
6 .2 层的基本操作
在 Dreamweaver 中选择【窗口】|【AP 元素】命令，打开【AP 元素】面板。在该面板中显 示了网页文档中所有插入的层，如图 6-3 所示，用户可以通过它管理网页文档中所有插入的层 元素。
Dreamweaver CC网页设计与制作(3版)(课件) 模块6 综合应用
Dreamweaver CC网页设计CC网页设计与制作（33版）与制作（模块66课件模块01模块模块11网页基础知识03模块模块33网页布局05模块模块55网站的测试与发布02模块模块22初级应用04模块模块44高级应用06 模块模块66综合应用任务描述通过“完美新娘”网站的创建与设计，巩固使用表格布局网页、模板创建和更新网页的方法和技巧。
任务16完美新娘——网站设计综合应用任务解析在本任务中，需要完成以下操作：熟悉使用表格布局网页的方法和技巧；熟悉模板的创建和应用；熟悉使用模板快速更新网站。
ztyp.html 效果图zxkp.html效果图ztyp.html效果图qqhp.html效果图jchp.html效果图任务描述通过布局“环保科技网站”网页，巩固使用CSS+Div 布局和美化网页的方法和技巧。
任务16环保科技网站——网站设计综合应用任务解析熟悉Div 的创建和属性设置；熟悉CSS 设计器的使用方法；巩固使用CSS+Div 布局和美化网页的方法。
ztyp.html效果图根据提供的lx文件夹中的素材，制作以下网站，网页效果如图6-33~图6-36所示。
根据提供的lx文件夹中的素材，制作以下网站，网页效果如图6-33~图6-36所示。
根据提供的lx文件夹中的素材，制作以下网站，网页效果如图6-33~图6-36所示。
根据提供的lx文件夹中的素材，制作以下网站，网页效果如图6-33~图6-36所示。
要求：1．布局方法自定。
2．使用模板制作如图所示统一风格的页面。
3．网页实现灵活跳转。
4．网页文本内容格式统一。
5．设置超链接颜色变化，并实现滑动鼠标颜色变换效果。
6．shyf.html页面实现交换图像。
7．配置IIS，在本机IP地址中可以打开lxwm.html页面。
任务描述通过布局“环保科技网站”网页，巩固使用CSS+Div 布局和美化网页的方法和技巧。
任务16环保科技网站——网站设计综合应用任务解析熟悉Div 的创建和属性设置；熟悉CSS 设计器的使用方法；巩固使用CSS+Div 布局和美化网页的方法。
第6章 创建Web站点
下的文件夹，在建立比较大的网站时，可以在本地站点下建立若干个文
件夹用来分类保存文件或按栏目保存文件。
6.2.1 创建本地站点
在创建站点之前，首先要根据网站的规划确定好要建立的站点结构， 然后依据站点规划创建站点，这样创建的站点不仅便于后续网页的创建， 而且也便也网站的维护和更新管理。关于站点的规划请参阅本教材的相 关部分，根据我们将要建设的网站，确定的网站结构如图6-7所示。
所示。
6.2.2管理本地站点
4. 创建子文件
创建了站点后，可以在站点下建立若干个文件夹用来分类保存文
件或按栏目保存文件。创建子文件夹的具体操作如下。 （1）在浮动面板组中单击“文件”面板，文件面板上显示当前建
立的站点。
（2）在站点上单击右键，弹出一个快捷菜单，在快捷菜单选择 “新建文件夹”命令，如图6-21所示。
6.2.1 创建本地站点
创建本地站点的具体操作步骤如下：(续)
6.2.1 创建本地站点
创建本地站点的具体操作步骤如下：(续)
6.2.2管理本地站点
Dreamweaver提供了对站点进行多方面的的管理能力，如打开、编辑、 删除、复制等。 1. 编辑站点 创建站点之后，如果要对站点进行修改，可以通过“管理站点”对
第6章 创建Web站点
学习目标：
认识Dreamweaver工作界面
掌握站点的创建和管理
主要内容
6.1 Dreamweaver的工作界面 6.2 创建和管理本地站点
6.1 Dreamweaver的工作界面
Dreamweaver是集网站管理和网页制作于一身的可视化网页编辑软件，
利用它可以不用编写代码就能轻而易举地制作出跨越平台、跨越浏览器 的充满活力的网页。为了能够更好的使用Dreamweaver，我们首先来了
dreamweaver8网页设计 第六章 使用超链接和行为
1．“弹出信息”行为 弹出信息”
有时候，我们在打开某个网页或单击网页中的某 个元素时可以看到弹出信息框。应用“弹出信息” 行为可以轻松实现该功能，本节我们就来看看 “弹出信息”行为的应用。
2．“设置状态栏文本”行为 设置状态栏文本”
所谓“状态栏文本”，就是在网页运行时浏览器 下方的状态栏中显示的文本。好多个人网站都设 置了状态栏文本，以表达网站主人的心声。本节 我们来看看如何为网页设置状态栏文本。
6.1.3 设置图片链接和下载链接
所谓图片链接，就是在单击网页中的某个小图片 时在新窗口中打开一幅大图片；下载链接是指单 击某个超链接时会打开一个“文件下载”对话框 （或自动启动下载工具），通过在该对话框中单 击“打开”或“保存”按钮，可以打开或下载文 件。
6.1.4 设置电子邮件链接
很多网站上留有电子邮件地址，单击该地址可 打开“Outlook Express”的“新邮件”窗口，这 是一种特殊类型的链接，又叫电子邮件链接。
综合实例2 综合实例2—为“SM”网站主页添加伴随窗 SM” 口
本例将在综合实例1中制作好的“index.html”网页 文档的基础上，为网站主页添加伴随窗口。
“行为”面板是应用行为所不可缺少的工具，本 节来认识一下“行为”面板。选择“窗口”>“行 为”菜单，或按【Shift+F4】组合键，即可打开 “行为”面板。
6.2.3 应用行为
如果要对某个对象应用行为，需要先选中该对象， 然后单击“行为”面板上方的“添加行为”按钮 ， 在打开的行为列表中选择动作，并在打开的窗口 中设置效果，最后指定设定的动作在什么情况下 发生，也就是指定事件。
3．“打开浏览器窗口”行为 打开浏览器窗口”
应用“打开浏览器窗口”行为，可实现单击目标 文字或图片打开固定大小窗口的效果。许多站点 都使用这种方式来弹出重要的通知、广告信息等 页面。
Dreamweaver CS6网页设计与制作标准教程 (6)
6.1 表格的简单操作
课堂案例——布艺沙发网页 表格的组成
插入表格
表格各元素的属性 在表格中插入内容
选择表格元素
复制、粘贴表格 删除表格和表格内容
缩放表格
合并和拆分单元格 增加和删除表格的行和列
6.1.1 课堂案例——布艺沙发网页
使用“属性”面板，设置页面边距及页面标题；使用“表格”
按钮，插入表格效果；使用“图像”按钮，插入图像。
6.1.6 选择表格元素
先选择表格元素，然后对其进行操作。一次可以选择整个表 格、多行或多列，也可以选择一个或多个单元格。
选择整个表格
选择整个表格有以下几种方法。
将鼠标指针放到表格的四周边缘，鼠标指针右下角出现图 标 ，单击鼠标左键即可选中整个表格。 将插入点放到表格中的任意单元格中，然后在文档窗口左下角 的标签栏中选择<table>标签 令。 在任意单元格中单击鼠标右键，在弹出的菜单中选择“表格 > 选择表格”命令。 。 将插入点放到表格中，然后选择“修改 > 表格 > 选择表格”命
选择不相邻的单元格 按住Ctrl键的同时单击某个单元格即选中该单元格，当再次单
击这个单元格时则取消对它的选择。
6.1.7 复制、粘贴表格
在Dreamweaver CS6中复制表格的操作如同在Word中一样。 可以对表格中的多个单元格进行复制、剪切、粘贴操作，并保留原 单元格的格式，也可以仅对单元格的内容进行操作。
导入Word文档过程图
将网页中的表格导入到其他网页或Word文档中 （1）将网页内的表格数据导出 选择“文件 > 导出 > 表格”命令，弹出“导出表格”对话框， 根据需要设置参数，单击“导出”按钮，弹出“表格导出为”对话 框，输入保存导出数据的文件名称，单击“保存”按钮完成设置。
Dreamweaver cs6 标准实例教程课件第6章表格技术
（列）。 ✓ 执行“插入”｜“表格对象”｜“在上面（下面）/左边（右边）插
入行（列）”命令，插入一空行（列）。 ✓ 右击单元格，在弹出的上下文菜单中执行“表格”｜“插入行
（列）”命令，插入一空行（列）。
通过以下方法之一删除一行（列）： ✓ 执行“修改”｜“表格”｜“删除行（列）”命令。 ✓ 右击单元格，在弹出的上下文菜单中执行 “表格”｜“删除行
6.1 表格概述
表格可以将数据、文本、图片规范显示在页面上，精准控制页面元 素位置，避免杂乱无章。
使用表格有一个缺陷：它会使网页显示的速度变慢。这是因为在浏 览器中一般的文字是逐行显示的，即文字从服务器上传过来，尽管不全， 但它还是会将传到的部分显示出来，以方便浏览。而使用表格就不同了， 表格一定要等到整个表格的内容全部传过来之后，才能在客户端的浏览 器上显示出来。即表格是一整块出现的。
上的单元格具有相同布局的现有单元格。 ✓ 若要在特定单元格所在行/列粘贴一整行/列单元格，单击该单元格。 ✓ 若要创建一个新表格，将插入点放置在表格之外。 （3）把光标定位于目标表格中，单击鼠标右键，在弹出的上下文菜单 中执行“粘贴”命令。
如果把源单元格的内容复制 到目标表格时，目标表格没有足 够的列数来容纳源单元格，将弹 出出错信息，如图所示。
✓ 选中一行表格单元或一列表格： 将光标放置在一行表格单元的 左边界上，或将光标放置在一 列表格单元的顶端，当黑色箭 头出现时单击鼠标，或单击一 个表格单元，横向或纵向拖动 鼠标。
✓ 选中多个连续表格单元：单击一个表格 单元，然后纵向或横向拖动鼠标到另一 个表格单元，或单击一个表格单元，然 后按住Shift键单击另一个表格单元，所 有矩形区域内的表格单元都被选择。
第6章 格技术
本章将介绍表格的作用及使用方法。内容包括：有关表格的操作，如插入 表格、格式化表格、拆分与合并单元格、剪切和粘帖单元格、删除行列以及 插入行等操作，表格和单元格属性的设置，以及导入文本数据到表格和输出 表格数据到文本文件等。
入行（列）”命令，插入一空行（列）。 ✓ 右击单元格，在弹出的上下文菜单中执行“表格”｜“插入行
（列）”命令，插入一空行（列）。
通过以下方法之一删除一行（列）： ✓ 执行“修改”｜“表格”｜“删除行（列）”命令。 ✓ 右击单元格，在弹出的上下文菜单中执行 “表格”｜“删除行
6.1 表格概述
表格可以将数据、文本、图片规范显示在页面上，精准控制页面元 素位置，避免杂乱无章。
使用表格有一个缺陷：它会使网页显示的速度变慢。这是因为在浏 览器中一般的文字是逐行显示的，即文字从服务器上传过来，尽管不全， 但它还是会将传到的部分显示出来，以方便浏览。而使用表格就不同了， 表格一定要等到整个表格的内容全部传过来之后，才能在客户端的浏览 器上显示出来。即表格是一整块出现的。
上的单元格具有相同布局的现有单元格。 ✓ 若要在特定单元格所在行/列粘贴一整行/列单元格，单击该单元格。 ✓ 若要创建一个新表格，将插入点放置在表格之外。 （3）把光标定位于目标表格中，单击鼠标右键，在弹出的上下文菜单 中执行“粘贴”命令。
如果把源单元格的内容复制 到目标表格时，目标表格没有足 够的列数来容纳源单元格，将弹 出出错信息，如图所示。
✓ 选中一行表格单元或一列表格： 将光标放置在一行表格单元的 左边界上，或将光标放置在一 列表格单元的顶端，当黑色箭 头出现时单击鼠标，或单击一 个表格单元，横向或纵向拖动 鼠标。
✓ 选中多个连续表格单元：单击一个表格 单元，然后纵向或横向拖动鼠标到另一 个表格单元，或单击一个表格单元，然 后按住Shift键单击另一个表格单元，所 有矩形区域内的表格单元都被选择。
第6章 格技术
本章将介绍表格的作用及使用方法。内容包括：有关表格的操作，如插入 表格、格式化表格、拆分与合并单元格、剪切和粘帖单元格、删除行列以及 插入行等操作，表格和单元格属性的设置，以及导入文本数据到表格和输出 表格数据到文本文件等。
网页制作案例教程第6章已完成
第6章 站点管理、模板与库
本章要点 • 掌握站点的创建和管理 • 掌握各种超级链接的创建 • 掌握电子邮件、无址和脚本链接 • 熟悉如何维护和修改站点 • 了解库和模板的应用 • 了解如何在Internet上发布站点
6.1 6.1.1
站点管理 新建站点
（ 1 ）单击【站点】/【管理站点】命令，调 出【管理站点】窗口，如图6-1所示。
（2）单击【属性】面板中的【链接】栏中的 文件夹按钮 ，调出【选择文件】对话 框，利用该对话框选择要链接的HTML文件 或图像文件（即目标文件）。也可以直接 在文本框内输入要链接的HTML文件或图像 文件的路径与文件名。
2.利用【属性】栏内的指向图标建立链接 利用【属性】栏内的指向图标建立链接的操 作如下。 （1）在网页编辑窗口内，同时打开要建立链 接的源文件和要链接的目标文件（HTML文 件），如图6-10所示。
（6）单击图6-2中的【高级设置】前面的黑 色三角，展开【高级设置】中的具体内容， 选择【本地信息】，将【默认图像文件夹】 设置为“D:\Web\IMG”。选中【启用缓存】 复选框后，可加速链接的更新速度。当硬 盘容量足够大时可选中它。
（7）单击‘确定’按钮，返回【管理站点】 对话框。在对话框的左边将列出刚创建的 站点名称（见图6-1）。单击‘完6-1 【管理站点】窗口
（2）单击【管理站点】对话框中的【新建】 按钮，弹出站点设置对话框，如图 6-2所示。
图6-2 站点定义为（高级）对话框
（3）在【站点名称】文本框内输入站点的名 称【我的站点】。在【本地根文件夹】文 本框内输入站点在本主机硬盘上的存储位 置，即路径和文件夹名称（“D:\web\”）。 （4）在图6-2左侧提供了进一步设置站点的 一些操作信息，利用鼠标单击可以对站点 其他信息进行设置，通常做以下设置。
本章要点 • 掌握站点的创建和管理 • 掌握各种超级链接的创建 • 掌握电子邮件、无址和脚本链接 • 熟悉如何维护和修改站点 • 了解库和模板的应用 • 了解如何在Internet上发布站点
6.1 6.1.1
站点管理 新建站点
（ 1 ）单击【站点】/【管理站点】命令，调 出【管理站点】窗口，如图6-1所示。
（2）单击【属性】面板中的【链接】栏中的 文件夹按钮 ，调出【选择文件】对话 框，利用该对话框选择要链接的HTML文件 或图像文件（即目标文件）。也可以直接 在文本框内输入要链接的HTML文件或图像 文件的路径与文件名。
2.利用【属性】栏内的指向图标建立链接 利用【属性】栏内的指向图标建立链接的操 作如下。 （1）在网页编辑窗口内，同时打开要建立链 接的源文件和要链接的目标文件（HTML文 件），如图6-10所示。
（6）单击图6-2中的【高级设置】前面的黑 色三角，展开【高级设置】中的具体内容， 选择【本地信息】，将【默认图像文件夹】 设置为“D:\Web\IMG”。选中【启用缓存】 复选框后，可加速链接的更新速度。当硬 盘容量足够大时可选中它。
（7）单击‘确定’按钮，返回【管理站点】 对话框。在对话框的左边将列出刚创建的 站点名称（见图6-1）。单击‘完6-1 【管理站点】窗口
（2）单击【管理站点】对话框中的【新建】 按钮，弹出站点设置对话框，如图 6-2所示。
图6-2 站点定义为（高级）对话框
（3）在【站点名称】文本框内输入站点的名 称【我的站点】。在【本地根文件夹】文 本框内输入站点在本主机硬盘上的存储位 置，即路径和文件夹名称（“D:\web\”）。 （4）在图6-2左侧提供了进一步设置站点的 一些操作信息，利用鼠标单击可以对站点 其他信息进行设置，通常做以下设置。
Dreamweaver CS6实例教程(第3版) (6)
效果图
单位。
6.1.7 拆分框架
通过拆分框架，可以增加框架集中框架的数量，但实际上是 在不断地增加框架集，即框架集嵌套。拆分框架有以下几种方法。 （1）先将光标置于要拆分的框架窗口中，然后选择“修改 > 框架集”命令，弹出其子菜单，其中有4种拆分方式。 （2）选定要拆分的框架集，按Alt+Shift组合键的同时，将 鼠标指针放到框架的边框上，当鼠标指针呈双向箭头时，拖曳鼠 标指针拆分框架。
6.1.4 保存框架
保存框架时，分两步进行，先保存框架集，再保存框架。
1．保存框架集和全部框架
2．保存框架集文件 3．保存框架文件
6.1.5 框架的选择
在对框架或框架集进行操作之前，必须先选择框架或框架集。
1．选择框架 2．选择框架集
6.1.6 修改框架的大小
建立框架的目的就是将窗口分成大小不同的子窗口，在不同的 窗口中显示不同的文档内容。调整子窗口的大小有以下几种方法。 （1）在“设计”视图中，将鼠标指针放到框架边框上，当鼠 标指针呈双向箭头时，拖曳鼠标改变框架的大小。 （2）选择框架集，在“属性”面板中“行”或“列”选项的 文本框中输入具体的数值，然后在“单位”选项的下拉列表中选择
6.1.8 删除框架
将鼠标指针放在要删除的边框上，当鼠标指针变为双向箭头时， 拖曳鼠标指针到框架相对应的外边框上即可进行删除。
6.2 框架的属性设置
课堂案例——家具天地网页
框架属性
框架集的属性 课堂案例——干果批发网页
框架中的链接
改变框架的背景颜色
6.2.1 课堂案例—家具天地网页
使用“修改”菜单命令，设置页面边距；使用“属性”面板，设 置框架集的属性。
效果图
6.2.5 框架中的链接
第6章 使用Dreamweaver制作网页
➢ 菜单栏位于Dreamweaver标题栏的下方，提供了Dreamweaver所有 的命令，其中包括文件、编辑、查看、插入、修改、文本、命令 、站点、窗口和帮助10类。
文件：控制文档的基本操作，包括新建、保存和打开等操作。 编辑：对文档进行具体的操作，包括撤消操作、复制、粘贴和编
辑代码等操作。 查看：调整工作界面，包括界面的缩放，标尺、风格等辅助工具
编辑 ：单击该按钮，启动Fireworks对图像进行编辑 （需要安装Fireworks）。
使用Fireworks最优化 ：单击该按钮，启动 Fireworks的优化输出程序，对选取的图像进行优化 处理并保存。
裁剪 ：单击该按钮，所选图形边缘将出现裁切框，可以对图像进 行裁剪。
重新取样 ：单击该按钮，对已经被调整大小的图像重新取样，提 高图像品质。
第6章 使用Dreamweaver制作网 页
任务1
认识Dreamweaver
任务2
站点的基本操作
任务3 任务4 任务5
在网页插入文本 插入图像
创建超级链接
本章导读
Dreamweaver是一款专业的网页编 辑器，可以对Web站点、Web页面 和Web应用程序进行设计、编译和 开发。
能力目标
认识Dreamweaver 创建站点 在网页中插入文本 在网页中添加图像 创建超级链接
任务1 认识Dreamweaver
➢ Dreamweaver的操作界面非常整洁。启动Dreamweaver后，可以在 它的操作界面最上方看到标题栏，然后往下依次为菜单栏、插入 栏、文档栏、文档窗口、标签栏和“属性”面板，在操作界面的 右侧是浮动面板组。
阶段1 认识Dreamweaver工作界面
1.菜单栏
阶段1 站点的规划
文件：控制文档的基本操作，包括新建、保存和打开等操作。 编辑：对文档进行具体的操作，包括撤消操作、复制、粘贴和编
辑代码等操作。 查看：调整工作界面，包括界面的缩放，标尺、风格等辅助工具
编辑 ：单击该按钮，启动Fireworks对图像进行编辑 （需要安装Fireworks）。
使用Fireworks最优化 ：单击该按钮，启动 Fireworks的优化输出程序，对选取的图像进行优化 处理并保存。
裁剪 ：单击该按钮，所选图形边缘将出现裁切框，可以对图像进 行裁剪。
重新取样 ：单击该按钮，对已经被调整大小的图像重新取样，提 高图像品质。
第6章 使用Dreamweaver制作网 页
任务1
认识Dreamweaver
任务2
站点的基本操作
任务3 任务4 任务5
在网页插入文本 插入图像
创建超级链接
本章导读
Dreamweaver是一款专业的网页编 辑器，可以对Web站点、Web页面 和Web应用程序进行设计、编译和 开发。
能力目标
认识Dreamweaver 创建站点 在网页中插入文本 在网页中添加图像 创建超级链接
任务1 认识Dreamweaver
➢ Dreamweaver的操作界面非常整洁。启动Dreamweaver后，可以在 它的操作界面最上方看到标题栏，然后往下依次为菜单栏、插入 栏、文档栏、文档窗口、标签栏和“属性”面板，在操作界面的 右侧是浮动面板组。
阶段1 认识Dreamweaver工作界面
1.菜单栏
阶段1 站点的规划
Dreamweaver CS6网页设计案例教程(微课版)
读书笔记
读书笔记
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的心得。
精彩摘录
精彩摘录
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的精彩内容摘录。
作者介绍
同名作者介绍
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，暂无该书作者的介绍。
第10章表单与行为
10.1废品回收页 10.2卫浴页 10.3综合演练——问卷调查页 10.4综合演练——全麦面包页
第11章页代码
11.1设计无忧页 11.2油画艺术馆页 11.3综合演练——机电设备页 11.4综合演练——自行车页
第12章综合设计实训
12.1个人页——张美丽的个人页 12.2游戏娱乐页——娱乐星闻页 12.3旅游休闲页——篮球运动页 12.4房产页——焦点房产页 12.5文化艺术页——书法艺术页
1.1操作界面 1.2创建站框架 1.3管理站点 1.4页文件头设置
第2章文本与文档
2.1轩宇门窗页 2.2休闲旅游页 2.3休闲度假页 2.4综合演练——家居装饰页 2.5综合演练——有机果蔬页 3.1咖啡馆页
第3章图像和多媒体
3.2物流运输页 3.3综合演练——儿童零食页 3.4综合演练——房源页
目录分析
1
文前
2
内容提要
3 第1章初识
Dreamweaver CS6
4
第2章文本与文 档
5
第3章图像和多 媒体
1
第4章超链接
2
第5章使用表格
3
第6章使用框架
4
第7章使用层
Dreamweaver电子教案课件第6章
6.3.7 表格数据的导入与导出
1．导入表格式数据
2．导出表格数据
注意：如果不指定文件所使用的分
隔符，文件将不能正确导入，则数据也 不能在表格中正确格式化。
6.5 利用表格布局页面
6.2.2 创建嵌套表格
嵌套表格是在另一个表格的单元格中的表格。可以像对其他任何表格一样对嵌套 表格进行格式设置；但是，其宽度受它所在单元格的宽度的限制。
6.3 操作表格
选择表格元素 调整表格的尺寸、行高和列宽 使用扩展表格模式 增加、删除行和列 复制、粘贴与清除单元格 合并、折分单元格 表格数据排序
第6章 表格技术
本章重点
本章将介绍表格的作用及使用方法，内容包括：有关表格的操作，如插入表格、 格式化表格、拆分与合并单元格、剪切和粘帖单元格、删除行列以及插入行等操作， 表格和单元格属性的设置，以及导入文本数据到表格和输出表格数据到文本文件等。
学习目的 通过本章的学习，您可以掌握：
在页面插入表格以及对表格进行各种操作的方法。 文本数据与表格数据之间的导入导出的方法。 利用表格技术对页面进行布局的方法。
注意： 使用扩展表格模式时，一旦选择了表格中的某个对象或放置了插入点， 就应该返回到“设计”视图的“标准”模式下进行编辑。诸如调整大小之类的一些 可视操作在“扩展表格”模式中不会产生预期结果。
6.3.2 设置表格和单元格属性
如果要设置单元格的属性，则选中单元格，执行“窗口”/“属性”命令展开单 元格属性面板进行修改。
用户不能直接在属性面板上设置表格或单元格的背景图像。如果希望将图像设 置为表格或单元格的背景，就要用到表格属性的CSS设置面板。
注意：使用属性检查器更改表格和其元素的属性时，需要注意表格格式设置 的优先顺序：单元格格式设置优先于行格式设置，行格式设置又优先于表格格式 设置。例如，如果将单个单元格的背景颜色设置为蓝色，然后将整个表格的背景 颜色设置为黄色，则蓝色单元格不会变为黄色，因为单元格格式设置优先于表格 格式设置。
网页设计教程Dreamweaver电子课件第6章
第6章 布局视图排版
6.1 布 局 视 图
ห้องสมุดไป่ตู้
6.2 绘制布局表格和布局单元格
切换到布局视图后，单击“布局”插入工具栏上的“布局表 格”按钮 ，此时光标就会变成“+”形状。
将光标放在要绘制表格的区域，然后按住鼠标拖动就能绘制 出表格来。
6.2.1 绘制布局表格
6.2 绘制布局表格和布局单元格
在“布局”插入工具栏上单击“绘制布局单元格”按钮 ，然 后移动光标到绘制单元格的位置，按下鼠标左键后拖动。
6.5.4 修改布局表格的属性
6.5 调整布局表格及布局单元格
6.5.5 修改布局单元格的属性
6.5 调整布局表格及布局单元格
1. 添加间隔图像 课堂练习6.1 添加间隔图像
6.5.6 调整列
6.5 调整布局表格及布局单元格
2. 调整列宽 在列的下拉菜单中选择“列设置为自动伸展”命令，此时自 动伸缩的单元格的列宽数值被删除，取而代之的是一个波浪线。
6.5.1 选择布局表格和布局单元格
6.5 调整布局表格及布局单元格
6.5.2 调整布局表格和布局单元格大小
6.5 调整布局表格及布局单元格
单击布局表格的标签选中表格，按住鼠标拖动表格到合适的 位置上即可移动表格。
在选中表格后，使用方向键也可以移动表格。
6.5.3 移动布局表格和布局单元格
6.5 调整布局表格及布局单元格
6.2.2 绘制布局单元格
6.3 嵌套布局表格
6.4 使用标尺与网格
选择菜单命令“查看”|“标尺”|“显示”，就可以打开标尺。
6.4.1 使用标尺
6.4 使用标尺与网格
选择菜单命令“查看”|“网格”|“网格设置”，此时将打开 “网格设置”对话框。
6.1 布 局 视 图
ห้องสมุดไป่ตู้
6.2 绘制布局表格和布局单元格
切换到布局视图后，单击“布局”插入工具栏上的“布局表 格”按钮 ，此时光标就会变成“+”形状。
将光标放在要绘制表格的区域，然后按住鼠标拖动就能绘制 出表格来。
6.2.1 绘制布局表格
6.2 绘制布局表格和布局单元格
在“布局”插入工具栏上单击“绘制布局单元格”按钮 ，然 后移动光标到绘制单元格的位置，按下鼠标左键后拖动。
6.5.4 修改布局表格的属性
6.5 调整布局表格及布局单元格
6.5.5 修改布局单元格的属性
6.5 调整布局表格及布局单元格
1. 添加间隔图像 课堂练习6.1 添加间隔图像
6.5.6 调整列
6.5 调整布局表格及布局单元格
2. 调整列宽 在列的下拉菜单中选择“列设置为自动伸展”命令，此时自 动伸缩的单元格的列宽数值被删除，取而代之的是一个波浪线。
6.5.1 选择布局表格和布局单元格
6.5 调整布局表格及布局单元格
6.5.2 调整布局表格和布局单元格大小
6.5 调整布局表格及布局单元格
单击布局表格的标签选中表格，按住鼠标拖动表格到合适的 位置上即可移动表格。
在选中表格后，使用方向键也可以移动表格。
6.5.3 移动布局表格和布局单元格
6.5 调整布局表格及布局单元格
6.2.2 绘制布局单元格
6.3 嵌套布局表格
6.4 使用标尺与网格
选择菜单命令“查看”|“标尺”|“显示”，就可以打开标尺。
6.4.1 使用标尺
6.4 使用标尺与网格
选择菜单命令“查看”|“网格”|“网格设置”，此时将打开 “网格设置”对话框。
Dreamweaver CC网页设计课件第6章
6.4
第6章 使用CSS层叠样式表
6.1 类选择器CSS规则的创建与应用
6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生”
（3）创建并应用类选择器CSS规则“.content” 1）点击菜单“窗口”→“CSS设计器”命令，打开“CSS设计器”面板，如果“CSS设 计器”命令前已打对勾，表示“CSS设计器”面板已经打开，无需执行此命令。 2）添加源。在“CSS设计器”面板“源”窗格中点击图标，选择“在页面中定义”， 在“源”窗格中生成<style>标签，表示创建源成功。
6.15
第6章 使用CSS层叠样式表
6.1 类选择器CSS规则的创建与应用
6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生”
（6）创建并应用类选择器CSS规则“.biankuang” 2）在页面中选择左侧花的图片，此时，状态栏中<img>标签会呈蓝色显示，再选择 <img>标签左侧的<td>标签,<td>标签呈蓝色显示，表示已经选中花图片所在的单元格。 3）将“属性”面板切换至CSS属性状态，在“目标规则”中选择“.biankuang”规则。
6.10
第6章 使用CSS层叠样式表
6.1 类选择器CSS规则的创建与应用
6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生”
（4）创建并应用类选择器CSS规则 “.title” 3）点击“属性”面板中的“编辑规则” 按钮，打开“.title的CSS规则定义” 对话框，在左侧“分类”中点击“类 型”，将“Font-family”设置为“宋 体”；将“Font-size”设置为“12pt”； “Font-weight”设置为“bold”； “Color”设置为“#006600”。 4）设置完成后单击“确定”按钮，按 F12预览，可以看到相应的CSS规则效 果。
第6章 使用CSS层叠样式表
6.1 类选择器CSS规则的创建与应用
6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生”
（3）创建并应用类选择器CSS规则“.content” 1）点击菜单“窗口”→“CSS设计器”命令，打开“CSS设计器”面板，如果“CSS设 计器”命令前已打对勾，表示“CSS设计器”面板已经打开，无需执行此命令。 2）添加源。在“CSS设计器”面板“源”窗格中点击图标，选择“在页面中定义”， 在“源”窗格中生成<style>标签，表示创建源成功。
6.15
第6章 使用CSS层叠样式表
6.1 类选择器CSS规则的创建与应用
6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生”
（6）创建并应用类选择器CSS规则“.biankuang” 2）在页面中选择左侧花的图片，此时，状态栏中<img>标签会呈蓝色显示，再选择 <img>标签左侧的<td>标签,<td>标签呈蓝色显示，表示已经选中花图片所在的单元格。 3）将“属性”面板切换至CSS属性状态，在“目标规则”中选择“.biankuang”规则。
6.10
第6章 使用CSS层叠样式表
6.1 类选择器CSS规则的创建与应用
6.1.1 案例制作：利用类选择器CSS规则美化网页“书法背后的人生”
（4）创建并应用类选择器CSS规则 “.title” 3）点击“属性”面板中的“编辑规则” 按钮，打开“.title的CSS规则定义” 对话框，在左侧“分类”中点击“类 型”，将“Font-family”设置为“宋 体”；将“Font-size”设置为“12pt”； “Font-weight”设置为“bold”； “Color”设置为“#006600”。 4）设置完成后单击“确定”按钮，按 F12预览，可以看到相应的CSS规则效 果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一个标准的HTML文件应该具有的4个组成部分。
1．<html>标签 <html>…</html>标签是HTML文档的开始和结束标签，告诉浏览器这是整个HTML文件的
范围。 HTML文档中所有的内容都应该在这两个标签之间，一个HTML文档非注释代码总是以
<html>开始，以</html>结束的源自 2．<head>标签
<body>标签有6个常用的可选属性，主要用于控制文档的基本特征，如文本、 背景颜色等。各个属性介绍如下： background：该属性用于为文档指定一幅图像作为背景。 text：该属性用于定义文档中非链接文本的默认颜色。 link：该属性用于定义文档中一个未被访问过的超级链接的文本颜色。 alink：该属性用于定义文档中一个正在打开的超级链接的文本颜色。 vlink：该属性用于定义文档中一个已经被访问过的超级链接的文本颜色。 bgcolor：该属性定义网页的背景颜色。
第6章 HTML与CSS基础
6.1 HTML语言概述
HTML是Hypertext Markup Language的首字母缩写，通常称作超文本标签语 言，或超文本链接标示语言，它是基于SGML（Standard General Markup Language，标准通用标签语言）的一种描述性语言，由W3C（World wide Web Consortium，全球信息网协会）推出，并被国际标准ISO8879所认可，是用于建 立web页面和其他超级文本的语言，是WWW的描述语言。
一般来说，HTML的语法有以下3种表达方式： <标签>对象</标签> <标签属性1=参数1 属性2=参数2>对象</标签> <标签>
<b>标签的示例效果
<font>标签的示例效果
<br>标签的示例效果
标签嵌套的示例效果
6.3 常用的HTML标签
6.3.1 文档的结构标签
基本HTML页面以DOCTYPE开始，它声明文档的类型，且它之前不能有任何 内容（包括换行符和空格），否则将使文档声明无效。
<title>和</title>标签位于HTML文档的头部，即位于<head>和</head>标签之间，用于定义 显示在浏览器窗口左上角的标题栏中的内容。 4．<body>标签
<body>…</body>用于定义HTML文档的正文部分，例如文字、标题、段落和列表等，也 可以用来定义主页背景颜色。<body>…</body>定义在</head>标签之后，<html>…</html>标 签之间。所有出现在网页上的正文内容都应该写在这两个标签之间。
6.2 HTML的语法结构
标准的HTML由标签和文件的内容构成，并用一组“<”与“>”括起来，且与字母 的大小写无关。
严格地说，标签和标签元素不同，标签元素是位于“<”和“>”符号之间的内 容，如上例中的“买家须知”；而标签则包括了标签元素和“<”和“>”符号本身。 但是，通常将标签元素和标签当作一种东西，因为脱离了“<”和“>”符号的标签元 素毫无意义。在本章后面的小节中，不作特别说明，将标签和标签元素统一称作 “标签”。
HTML并不是真正的程序设计语言，它只是标签语言。使用HTML编写的网页 文件是标准的ASCII文件，扩展名通常为.htm或.html。了解网页的用户可能听说过 许多可以编辑网页的软件，事实上，用户可以用任何文本编辑器建立HTML页面， 例如Windows的“记事本”程序。
HTML文本是由HTML命令组成的描述性文本，它能独立于各种操作系统平台 （如UNIX，WINDOWS等）。HTML命令可以说明文字、图形、动画、声音、表格、 链接等。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果，浏览器 的主要作用就是解释超文本文件中的语言。当用浏览器打开网页时，浏览器先读取 网页中的HTML代码，分析其语法结构，然后根据解释的结果，将单调乏味的文字 显示为丰富多彩的网页内容，而不是显示事先存储于网页中的内容。正是因为如此， 网页显示的速度同网页代码的质量有很大的关系，保持精简和高效的HTML源代码 是非常重要的。
<font > ... </font>标签用于设置文本字体格式，包括字体、字号、颜色、字型等，适 当地应用可以使页面更加美观。
font标签有3个属性：face、color和size。这3个属性可以自由组合，没有先后顺序。通 过设置这3个标签属性，可以控制文字的显示效果。 face：用于设置文本字体名称，可以用逗号隔开多个字体名称。例如：<font face =
"Times New Roman, Times, serif">Happy New Year</font>。 Size：用于设置文本字体大小，取值范围在-7到7之间，数字越大字体越大。 Color：用于设置文本颜色，可以用red、white和green等助记符，也可以用16进制数
表示，如红色为"#FF0000"。 2．<b>、<i>、<em>、<h#>标签 3．<s>、<big>、<small>、<u>标签 4．<pre>预格式化标签
<head>…</head>标签一般位于文档的头部，用于包含当前文档的有关信息，例如标题和 关键字等，通常将这两个标签之间的内容统称作HTML的“头部”。
位于头部的内容一般不会在网页上直接显示，而是通过另外的方式起作用。例如，在 HTML的头部定义的标题不会显示在网页上，但是会出现在网页的标题栏上。 3．<title>标签
<body>标签的示例效果
6.3.2 注释标签
HTML的客户端注释标签为<!--…-->，在这个标签内的文本都不会在浏览器窗 口中显示出来，一般将客户端的脚本程序段放在此标签中，对于不支持该脚本语言 的浏览器也可隐藏程序代码。
注释标签示例效果
6.3.3 文本格式标签
文本格式标签用于控制网页中文本的样式，如大小、字体、段落样式等。 1．<font>标签
6.3.4 排版标签
1．<br>、<p>、<hr>标签 <br>标签用于在文本中添加一个换行符，它不需要成对使用。 <p>…</p>标签用来分隔文档的多个段落。可选属性“align”有三个取值分别介绍如
1．<html>标签 <html>…</html>标签是HTML文档的开始和结束标签，告诉浏览器这是整个HTML文件的
范围。 HTML文档中所有的内容都应该在这两个标签之间，一个HTML文档非注释代码总是以
<html>开始，以</html>结束的源自 2．<head>标签
<body>标签有6个常用的可选属性，主要用于控制文档的基本特征，如文本、 背景颜色等。各个属性介绍如下： background：该属性用于为文档指定一幅图像作为背景。 text：该属性用于定义文档中非链接文本的默认颜色。 link：该属性用于定义文档中一个未被访问过的超级链接的文本颜色。 alink：该属性用于定义文档中一个正在打开的超级链接的文本颜色。 vlink：该属性用于定义文档中一个已经被访问过的超级链接的文本颜色。 bgcolor：该属性定义网页的背景颜色。
第6章 HTML与CSS基础
6.1 HTML语言概述
HTML是Hypertext Markup Language的首字母缩写，通常称作超文本标签语 言，或超文本链接标示语言，它是基于SGML（Standard General Markup Language，标准通用标签语言）的一种描述性语言，由W3C（World wide Web Consortium，全球信息网协会）推出，并被国际标准ISO8879所认可，是用于建 立web页面和其他超级文本的语言，是WWW的描述语言。
一般来说，HTML的语法有以下3种表达方式： <标签>对象</标签> <标签属性1=参数1 属性2=参数2>对象</标签> <标签>
<b>标签的示例效果
<font>标签的示例效果
<br>标签的示例效果
标签嵌套的示例效果
6.3 常用的HTML标签
6.3.1 文档的结构标签
基本HTML页面以DOCTYPE开始，它声明文档的类型，且它之前不能有任何 内容（包括换行符和空格），否则将使文档声明无效。
<title>和</title>标签位于HTML文档的头部，即位于<head>和</head>标签之间，用于定义 显示在浏览器窗口左上角的标题栏中的内容。 4．<body>标签
<body>…</body>用于定义HTML文档的正文部分，例如文字、标题、段落和列表等，也 可以用来定义主页背景颜色。<body>…</body>定义在</head>标签之后，<html>…</html>标 签之间。所有出现在网页上的正文内容都应该写在这两个标签之间。
6.2 HTML的语法结构
标准的HTML由标签和文件的内容构成，并用一组“<”与“>”括起来，且与字母 的大小写无关。
严格地说，标签和标签元素不同，标签元素是位于“<”和“>”符号之间的内 容，如上例中的“买家须知”；而标签则包括了标签元素和“<”和“>”符号本身。 但是，通常将标签元素和标签当作一种东西，因为脱离了“<”和“>”符号的标签元 素毫无意义。在本章后面的小节中，不作特别说明，将标签和标签元素统一称作 “标签”。
HTML并不是真正的程序设计语言，它只是标签语言。使用HTML编写的网页 文件是标准的ASCII文件，扩展名通常为.htm或.html。了解网页的用户可能听说过 许多可以编辑网页的软件，事实上，用户可以用任何文本编辑器建立HTML页面， 例如Windows的“记事本”程序。
HTML文本是由HTML命令组成的描述性文本，它能独立于各种操作系统平台 （如UNIX，WINDOWS等）。HTML命令可以说明文字、图形、动画、声音、表格、 链接等。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果，浏览器 的主要作用就是解释超文本文件中的语言。当用浏览器打开网页时，浏览器先读取 网页中的HTML代码，分析其语法结构，然后根据解释的结果，将单调乏味的文字 显示为丰富多彩的网页内容，而不是显示事先存储于网页中的内容。正是因为如此， 网页显示的速度同网页代码的质量有很大的关系，保持精简和高效的HTML源代码 是非常重要的。
<font > ... </font>标签用于设置文本字体格式，包括字体、字号、颜色、字型等，适 当地应用可以使页面更加美观。
font标签有3个属性：face、color和size。这3个属性可以自由组合，没有先后顺序。通 过设置这3个标签属性，可以控制文字的显示效果。 face：用于设置文本字体名称，可以用逗号隔开多个字体名称。例如：<font face =
"Times New Roman, Times, serif">Happy New Year</font>。 Size：用于设置文本字体大小，取值范围在-7到7之间，数字越大字体越大。 Color：用于设置文本颜色，可以用red、white和green等助记符，也可以用16进制数
表示，如红色为"#FF0000"。 2．<b>、<i>、<em>、<h#>标签 3．<s>、<big>、<small>、<u>标签 4．<pre>预格式化标签
<head>…</head>标签一般位于文档的头部，用于包含当前文档的有关信息，例如标题和 关键字等，通常将这两个标签之间的内容统称作HTML的“头部”。
位于头部的内容一般不会在网页上直接显示，而是通过另外的方式起作用。例如，在 HTML的头部定义的标题不会显示在网页上，但是会出现在网页的标题栏上。 3．<title>标签
<body>标签的示例效果
6.3.2 注释标签
HTML的客户端注释标签为<!--…-->，在这个标签内的文本都不会在浏览器窗 口中显示出来，一般将客户端的脚本程序段放在此标签中，对于不支持该脚本语言 的浏览器也可隐藏程序代码。
注释标签示例效果
6.3.3 文本格式标签
文本格式标签用于控制网页中文本的样式，如大小、字体、段落样式等。 1．<font>标签
6.3.4 排版标签
1．<br>、<p>、<hr>标签 <br>标签用于在文本中添加一个换行符，它不需要成对使用。 <p>…</p>标签用来分隔文档的多个段落。可选属性“align”有三个取值分别介绍如