DreamweaverCC实例教程（第5版）_PPT整本书课件完整版电子教案全套课件最全教学教程ppt（最新） (2).ppt

《DreamweaverCC实例教程（第5版）_PPT整本书课件完整版电子教案全套课件最全教学教程ppt（最新） (2).ppt》由会员分享，可在线阅读，更多相关《DreamweaverCC实例教程（第5版）_PPT整本书课件完整版电子教案全套课件最全教学教程ppt（最新） (2).ppt（302页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第1章初识Dreamweaver CC 2019,本章简介： Dreamweaver是目前主流的一款“所见即所得”的网页编辑制作软件。而网页是网站最基本的组成部分，因此，利用Dreamweaver可以制作出我们想要的网站。本章主要讲述Dreamweaver CC 2019的基础知识，包括工作界面，创建网站框架，管理站点文件和文件夹，以及管理站点和网页文件头的设置。,掌握Dreamweaver CC 2019的工作界面 掌握使用站点管理器、创建文件夹、定义新站点、创建和保存网页 掌握重命名、移动、删除文件和文件夹 掌握站点的打开、编辑、复制、删除、导出和导入 掌握关键字、作者、版权信息、刷新时间

2、、说明信息等文件头的设置,课堂学习目标,1.1Dreamweaver CC 2019 的工作界面,友善的开始页面 不同风格的界面 伸缩自如的功能面板 多文档的编辑界面 新颖的“插入”面板 更完整的CSS功能,1.1.1友善的开始页面,启动Dreamweaver CC 2019首先看到的画面是开始页面，用户可在此选择新建文件的类型，或打开已有的文档等。 老用户如果不太习惯开始页面，可选择“编辑 首选项”命令，或按Ctrl+U组合键，弹出“首选项”对话框，取消选择“显示开始屏幕”复选框。单击“应用”按钮，然后单击“关闭”按钮。这样打开Dreamweaver CC 2019时将不再显示开始页面。,开

3、始页面 “首选参数”对话框,1.1.2不同风格的界面,Dreamweaver CC 2019的操作界面相比老版本有一些改变，若老用户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择 “窗口 工作区布局”命令，弹出其子菜单，在子菜单中选择“开发人员”或“标准”命令，即选择其中一种界面风格，页面会发生相应的改变。,1.1.3伸缩自如的功能面板,在浮动面板的右上方单击按钮 ，可以隐藏或展开面板。 如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标，调整工作区的大小。若用户需要更大的工作区，可以将面板隐藏。,浮动面板按钮 缩放工作区,鼠

4、标指针呈双箭头,1.1.4多文档的编辑界面,Dreamweaver CC 2019提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。单击文档编辑窗口上方的选项卡，即可快速切换到相应的文档，方便同时编辑多个文档。,多文档编辑界面,1.1.5新颖的“插入”面板,Dreamweaver CC 2019的“插入”面板可以随意与其他面板组合，为了方便操作一般会放置在菜单栏的下方。 “插入”面板包括“HTML”“表单”“模板”“Bootstrap组件”“jQuery Mobile”“jQuery UI”和“收藏夹”7个选项卡，不同功能的按钮分门别类地放在了不同的选项卡中。在Drea

5、mweaver CC 2019中，“插入”面板可用菜单和选项卡2种方式显示。如果需要菜单样式，可用鼠标右键单击“插入”面板的选项卡，在弹出的快捷菜单中选择“显示为菜单”命令。,新颖的“插入”面板,1.1.6更完整的CSS功能,传统的HTML语言所提供的样式及排版功能非常有限，因此，复杂的网页版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂，需要有一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时地提供辅助说明。Dreamweaver CC 2019就提供了这样的功能。,“属性”面板,1.2创建站点,站点管理器 创建文件夹 定义新站点 创建和保存网页,1.2.1站点管理

6、器,站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点，以及导入或导出站点。若要管理站点，必须打开“管理站点”对话框。,“文件”面板 “管理站点”面板,1.2.2创建文件夹,建立站点前，要先在本地计算机上规划站点文件夹。 新建文件夹的具体操作步骤如下。 （1）在本地计算机中选择要存储站点的磁盘。 （2）通过以下几种方法新建文件夹。 单击“主页”选项卡中的“新建文件夹”按钮，如图1-19所示，松开鼠标，即可创建一个文件夹，如图1-20所示。 在磁盘的空白区域单击鼠标右键，在弹出的菜单中选择“新建 文件夹”命令，即可创建一个文件夹。 按Ctrl+Shift+T组合键，即可创建一个文件夹

7、。 （3）输入新文件夹的名称。,1.2.3定义新站点,建立好站点文件夹后，用户就可定义新站点了。在Dreamweaver CC 2019中，站点通常包含2部分，即本地站点和远程站点。在Dreamweaver CC 2019中创建 Web 站点，通常应先在本地磁盘上创建本地站点，然后创建远程站点，即将网页的副本上传到一个远程 Web 服务器上，使公众可以访问它们。本节只介绍如何创建本地站点。,1.2.4创建和保存网页,选择“文件 新建”命令，或按Ctrl+N组合键，弹出“新建文档”对话框，选择“新建文档”选项，设置后创建空白网页。 网页设计完成后，选择“文件 保存”命令，弹出“另存为”对话框，在

8、“文件名”文本框中输入网页的名称，单击“保存”按钮，将该文档保存在站点文件夹中。,“新建文档”对话框 新建空白文档,1.3管理站点文件和文件夹,重命名文件和文件夹 移动文件和文件夹 删除文件或文件夹,1.3.1重命名文件和文件夹,修改文件名称或文件夹名称操作的具体步骤如下。 （1）选择“窗口 文件”命令，弹出“文件”面板，在其中选择要重命名的文件或文件夹。 （2）可以通过以下2种方法激活文件或文件夹的名称。 单击文件名，稍停片刻，再次单击文件名。 用鼠标右键单击文件或文件夹图标，在弹出的菜单中选择“编辑 重命名”命令。 （3）输入新名称，按Enter键。,1.3.2移动文件和文件夹,移动文件或

9、文件夹的操作步骤如下。 （1）选择“窗口 文件”命令，弹出“文件”面板，在其中选择要移动的文件或文件夹。 （2）通过以下2种方法移动文件或文件夹。 剪切该文件或文件夹，然后粘贴在新位置。 将该文件或文件夹直接拖曳到新位置。 （3）“文件”面板会自动刷新，这样就可以看到该文件或文件夹出现在新位置上。,1.3.3删除文件或文件夹,删除文件或文件夹有以下2种方法。 （1）选择“窗口 文件”命令，弹出“文件”面板，在其中选择要删除的文件或文件夹，按Delete键删除。 （2）用鼠标右键单击要删除的文件或文件夹，从弹出的菜单中选择“编辑 删除”命令。,1.4管理站点,打开站点 编辑站点 复制站点 删除站

10、点 导出和导入站点,1.4.1打开站点,当要修改某个网站的内容时，首先要打开站点。打开站点的具体操作步骤如下。 （1）启动Dreamweaver CC 2019。 （2）选择“窗口 文件”命令，弹出“文件”面板，单击“桌面”下拉列表，在弹出的下拉选项中选择要打开的站点名，松开鼠标，打开站点。,选择站点 打开站点,1.4.2编辑站点,有时用户需要修改站点的一些设置，此时就要利用Dreamweaver CC 2019编辑站点的功能。例如，修改站点的默认图像文件夹的路径，具体的操作步骤如下。 （1）选择“站点 管理站点”命令，弹出“管理站点”对话框。 （2）在对话框中，选择要编辑的站点名，单击“编辑

11、当前选定的站点”按钮 ，在弹出的对话框中，选择“高级设置”选项，此时可根据需要进行修改。完成设置后单击“保存”按钮，回到“管理站点”对话框。 （3）如果不需要修改其他站点，可单击“完成”按钮，关闭“管理站点”对话框。,1.4.3复制站点,复制站点可省去重复建立多个结构相同站点的操作步骤，可以提高用户的工作效率。在“管理站点”对话框中可以复制站点，其具体操作步骤如下。 （1）在“管理站点”对话框中，选中要复制的站点，单击“复制当前选定的站点”按钮 进行复制。 （2）用鼠标左键双击新复制的站点，弹出“站点设置对象 基础素材 复制”对话框，在“站点名称”文本框中可以更改新站点的名称。,1.4.4删除

12、站点,删除站点只是删除Dreamweaver CC 2019同本地站点间的关联，而本地站点包含的文件和文件夹仍然保存在本地磁盘原来的位置上。换句话说，删除站点后，虽然站点文件夹仍保存在本地计算机中，但在Dreamweaver CC 2019中已经不存在此站点了。例如，在按下列步骤删除站点后，在“管理站点”对话框中已没有了该站点的名称。 在“管理站点”对话框中删除站点的具体操作步骤如下。 （1）在“管理站点”对话框中选中要删除的站点。 （2）单击“删除当前选定的站点”按钮 即可删除选择的站点。,1.4.5导出和导入站点,如果想要在计算机之间移动站点，或者与其他用户共同设计站点，可通过 Dream

13、weaver CC 2019的导出和导入站点功能实现。导出站点功能是将站点导出为“.ste”格式文件，然后可在其他计算机上用导入站点功能将其导入到Dreamweaver CC 2019中。 导出站点 导入站点,1.5网页文件头设置,插入搜索关键字 插入作者和版权信息 设置刷新时间 设置说明信息,1.5.1插入搜索关键字,在Web上通过搜索引擎查找资料时，搜索引擎自动读取Web上网页中标签的内容，所以在网页中设置搜索关键字非常重要，它可以间接地宣传网站，提高访问量。但搜索关键字并不是字数越多越好，因为有些搜索引擎限制索引的关键字或字符的数目，当超过了限制的数目时，它将忽略所有的关键字，所以最好只

14、使用几个精选的关键字。一般情况下，关键字是对网页的主题、内容、风格或作者等内容的概括。,1.5.2插入作者和版权信息,要设置网页的作者和版权信息，可选择“插入 Head Meta”命令，弹出“META”对话框。在“值”文本框中输入“/x.Copyright”，在“内容”文本框中输入作者名称和版权信息，单击“确定”按钮完成设置。,“META”对话框,1.5.3设置刷新时间,要指定载入页面刷新或者转到其他页面的时间，可设置文件头部的刷新时间项，具体操作步骤如下。 选择“插入 HTML Meta”命令，弹出“META”对话框。在“属性”下拉列表中选择“HTTP-equivalent”选项，在“值”文

15、本框中输入“refresh”，在“内容”文本框中输入需要的时间值，单击“确定”按钮完成设置。,“META”对话框,1.5.4设置说明信息,搜索引擎也可通过读取 标签的说明内容来查找信息，但说明信息主要是设计者对网页内容的详细说明，而关键字可以让搜索引擎尽快搜索到网页。设置网页说明信息的具体操作步骤如下。 （1）选中文档编辑窗口中的“代码”视图，将鼠标指针放在标签中，选择“插入 HTML 说明”命令，弹出“说明”对话框。 （2）在“说明”对话框中设置说明信息。,“META”对话框,第2章文本,本章简介： 在当今这个网络时代，不管网页内容多么丰富，文本自始至终都还是网页中最基本的元素。由于文本产生

16、的信息量大，输入、编辑起来方便，并且生成的文件小，容易被浏览器下载，不会产生太多的等待时间，因此掌握好文本的使用，对于制作网页来说是最基本的要求。,掌握文字的输入、连续空格的输入 掌握页边距、网页的标题、网页的默认格式的设置 掌握文字的大小、颜色、字体、对齐方式和段落样式的设置 掌握项目符号、编号列表、文本缩进、日期、特殊字符和换行符的设置 掌握水平线、网格和标尺的应用,课堂学习目标,2.1输入文本并编辑,课堂案例青山别墅网页 输入文本 设置文本属性 输入连续的空格 设置是否显示不可见元素 设置页边距 设置网页的标题 设置网页的默认格式,课堂案例机电设备网页 改变文本的大小 改变文本的颜色 改

17、变文本的字体 改变文本的对齐方式 设置文本样式 设置段落格式,2.1.1课堂案例青山别墅网页,使用“页面属性”命令设置页面外观、网页标题效果；使用“首选项”命令设置允许多个连续空格；在文档编辑窗口中输入导航文字。,效果图,2.1.2输入文本,应用Dreamweaver CC 2019编辑网页时，在文档编辑窗口中光标默认为显示状态。要添加文本，首先应将光标移动到文档编辑窗口中的编辑区域，然后直接输入文本，就像在其他文本编辑器中一样。打开一个页面，在页面中单击鼠标左键，将光标置于其中，然后输入文本。,输入文字后的效果图,2.1.3设置文本属性,利用文本“属性”面板可以方便地修改选中文本的字体、字号

18、、样式、对齐方式等，以获得预期的效果。 选择“窗口 属性”命令，弹出“属性”面板，在HTML和CSS“属性”面板中都可以设置文本的属性。,“属性”面板,2.1.4输入连续的空格,在默认状态下，Dreamweaver CC 2019只允许用户输入一个空格，要输入连续多个空格则需要进行设置或通过特定操作才能实现。 1设置“首选项”对话框 2直接插入多个连续空格,2.1.5设置是否显示不可见元素,在网页的设计视图中，有一些元素仅用来标志该元素的位置，而在浏览器中是不可见的。例如，脚本图标是用来标志文档正文中的 Javascript 或 Vbscript 代码的位置，换行符图标是用来标志每个换行符 的

19、位置等。在设计网页时，为了快速找到这些不可见元素的位置，常常需要改变这些元素在设计视图中的可见性。,2.1.6设置页边距,按照文章的书写规则，正文与纸的四周需要留有一定的距离，这个距离叫页边距。网页设计也如此，在默认状态下文档的上、下、左、右边距不为零。 修改网页页边距的具体操作步骤如下。 （1）选择“文件 页面属性”命令，弹出“页面属性”对话框。 （2）根据需要在对话框的“左边距”“上边距”“边距宽度”和“边距高度”数值框中输入相应的数值即可。这些选项的含义如下。,“页面属性”对话框,2.1.7设置网页的标题,网页的标题可以提示站点浏览者所查看网页的内容，并在浏览者使用浏览器的历史记录和书签

20、列表中标志页面。注意，网页的文件名是通过保存文件命令保存的网页文件名称，而网页的标题是浏览者在浏览网页时浏览器标题栏中显示的信息。 更改页面标题的具体操作步骤如下。 （1）选择“文件 页面属性”命令，弹出“页面属性”对话框。 （2）在对话框左侧的“分类”列表中选择“标题/编码”选项，在右侧的“标题”文本框中输入页面标题。单击“确定”按钮，完成设置。也可在“属性”面板“文档标题”文本框中直接输入页面标题。,2.1.8设置网页的默认格式,用户在制作新网页时，系统提供的页面都有一些默认的属性，如网页的标题、网页边界、文字编码、文字颜色和超链接的颜色等。若需要修改默认网页的页面属性，可选择“文件 页面

21、属性”命令，弹出“页面属性”对话框。,“页面属性”对话框,2.1.9课堂案例机电设备网页,效果图,使用“属性”面板，设置文字大小、颜色及字体；使用“CSS设计器”面板，设置文字的字体、大小、颜色及行距。,Dreamweaver CC 2019提供了2种改变文本大小的方法，一种是设置文本的默认大小，另一种是设置选中文本的大小。,2.1.10改变文本的大小,丰富的视觉色彩可以吸引网页游览者的注意力，网页中的文本不仅可以是黑色，还可以呈现为其他色彩，最多时可达到16 777 216种颜色。颜色的种类与用户显示器的分辨率和颜色值有关，一般建议在216种网页色彩中选择文字的颜色。,2.1.11改变文本的

22、颜色,Dreamweaver CC 2019提供了2种改变文本字体的方法，一种是设置文本的默认字体，另一种是设置选中文本的字体。,2.1.12改变文本的字体,文本的对齐方式是指文字相对于文档编辑窗口或浏览器窗口在水平方向上的对齐方式。对齐方式按钮有以下4种。 “左对齐”按钮 ：使文本在浏览器窗口中左对齐。 “居中对齐”按钮 ：使文本在浏览器窗口中居中对齐。 “右对齐”按钮 ：使文本在浏览器窗口中右对齐。 “两端对齐”按钮 ：使文本在浏览器窗口中两端对齐。,2.1.13改变文本的对齐方式,文本样式是指字符的外观显示方式，如加粗文本、倾斜文本和文本加下划线等。,2.1.14设置文本样式,网页中的段

23、落是指描述同一主题内容并且格式统一的一段文字。在文档编辑窗口中，输入一段文字后按Enter键，这段文字就会作为一个段落显示在标签中。,2.1.15设置段落格式,2.2无序列表和编号列表,课堂案例电器城网页 设置无序列表或编号列表 修改无序列表或编号列表 设置文本缩进格式 插入日期 插入特殊字符 插入换行符,2.2.1课堂案例电器城网页,使用“属性”面板中的“编号列表”按钮，创建列表；使用“CSS设计器”面板，设置列表的样式。,效果图,通过“无序列表”按钮或“编号列表”按钮设置项目符号或编号，步骤如下。 （1）选择段落。 （2）在“属性”面板中，单击“无序列表”按钮 或“编号列表”按钮 ，为文本

24、添加项目符号或编号。 通过“列表”命令设置项目符号或编号，步骤如下。 （1）选择段落。 （2）选择“编辑 列表”命令，弹出其子菜单，选择“无序列表”或“有序列表”命令。,2.2.2设置无序列表或编号列表,（1）将插入点放在要设置项目符号或编号的文本中。 （2）通过以下2种方法打开“列表属性”对话框。 单击“属性”面板中的“列表项目”按钮 。 选择“编辑 列表 属性”命令。,2.2.3修改无序列表或编号列表,设置文本缩进格式有以下3种方法。 （1）在“属性”面板中单击“内缩区块”按钮 或“删除内缩区块”按钮 ，使段落向右移动或向左移动。 （2）选择“编辑 文本 缩进”或“编辑 文本 凸出”命令，

25、使段落向右移动或向左移动。 （3）按Ctrl+Alt+ 组合键或Ctrl+Alt+ 组合键，使段落向右移动或向左移动。,2.2.4设置文本缩进格式,（1）在文档编辑窗口中，将插入点放置在想要插入对象的位置 （2）通过以下2种方法打开“插入日期”对话框。 单击“插入”面板“HTML”选项卡中的“日期”按钮 。 选择“插入 HTML 日期”命令。,2.2.5插入日期,在网页中插入特殊字符，有以下2种方法。 （1）选择“插入 HTML 字符”命令，弹出其子菜单，选择需要的字符命令。 （2）单击“插入”面板“HTML”选项卡中的“字符”展开式按钮 ，弹出12个特殊字符按钮。在其中选择需要的特殊字符按钮

26、，即可插入特殊字符。,2.2.6插入特殊字符,为段落添加换行符有以下3种方法。 （1）单击“插入”面板“HTML”选项卡中的“字符”展开式按钮 ，选择“换行符”按钮 。 （2）按Shift+Enter组合键。 （3）选择“插入 HTML 字符 换行符”命令。,2.2.7插入换行符,2.3水平线、网格与标尺,课堂案例艺术摄影网页 水平线 网格 标尺,2.3.1课堂案例艺术摄影网页,使用“插入”命令中的“水平线”命令，在文档中插入水平线；使用“属性”面板，改变水平线的高度；添加代码，改变水平线的颜色。,效果图,本节介绍创建、修改水平线的方法。 1创建水平线 创建水平线有以下2种方法。 （1）单击“

27、插入”面板“HTML”选项卡中的“水平线”按钮 。 （2）选择“插入 HTML 水平线”命令。 2修改水平线 在文档编辑窗口中，选中水平线，选择“窗口 属性”命令，弹出“属性”面板，可以根据需要对水平线的属性进行修改。,2.3.2水平线,“属性”面板,使用网格可以更加方便地精确地定位网页元素，在网页布局时网格也具有至关重要的作用。 1显示和隐藏网格 选择“查看 设计视图选项 网格设置 显示网格”命令，或按Ctrl+Alt+G组合键，此时处于显示网格的状态，网格在“设计”视图中可见。再次使用该命令或组合键，可隐藏网格。 2设置网页元素与网格对齐 选择“查看 设计视图选项 网格设置 靠齐到网格”命

28、令，或按Ctrl+Alt+Shift+G组合键，此时，无论网格是否可见，都可以让网页元素自动与网格对齐。,2.3.3网格,3修改网格的疏密 选择“查看 设计视图选项 网格设置 网格设置”命令，弹出“网格设置”对话框。在“间隔”项的数值框中输入一个数字，并从右侧的下拉列表中选择间隔的单位，单击“确定”按钮关闭对话框，即完成网格线间隔的修改。 4修改网格线的颜色和形状 选择“查看 设计视图选项 网格设置 网格设置”命令，弹出“网格设置”对话框。在对话框中，先单击“颜色”按钮，并从颜色拾取器中选择一种颜色，或者在“颜色”按钮右侧的文本框中输入一个颜色的十六进制值，然后单击“显示”选项组中的“线”或“

29、点”单选项，最后单击“确定”按钮，完成网格线颜色和线型的修改。,标尺显示在文档编辑窗口的页面上方和左侧，用以标志网页元素的位置。标尺的单位分为像素、英寸和厘米。 1在文档编辑窗口中显示标尺 2改变标尺的计量单位 3改变坐标原点 4重置标尺的坐标原点,2.3.4标尺,课堂练习有机果蔬网页,使用“页面属性”命令，设置页面外观、网页标题效果；使用“首选项”命令，设置允许多个连续空格；使用“CSS设计器”面板，设置文字的字体、大小和行距。,效果图,课后习题旅行购票网页,使用“页面属性”命令，设置页面边距和标题；使用“CSS样式”命令，改变文本的颜色及行距的显示。,效果图,第3章图像和多媒体,本章简介：

30、 图像在网页中的作用是非常重要的，适当地添加各类图像可以使网页更加清晰美观、形象生动，更能引发浏览者的阅读兴趣。 所谓“媒体”是指信息的载体，而“多媒体”指多种媒体的综合使用，包括文字、图形、动画、音频和视频等。在Dreamweaver CC 2019中，用户可以方便快捷地向网页中添加多媒体文件，并对它们进行各种编辑。,掌握图像的格式 掌握图像的插入、图像的属性、图像替换文字、跟踪图像的应用 掌握Flash动画、FLV、Animate作品、HTML5 Video、音频和插件的插入,课堂学习目标,3.1图像,课堂案例环球旅游网页 网页中的图像格式 插入图像 设置图像属性 给图像添加文字说明 跟踪

31、图像,3.1.1课堂案例环球旅游网页,使用“Image”按钮，插入图像；使用“CSS设计器”面板，设置图像之间的距离。,效果图,3.1.2网页中的图像格式,Web网页中通常使用的图像文件有JPEG、GIF、PNG 3种格式，但大多数浏览器只支持JPEG、GIF 2种图像格式。因为要保证浏览者下载网页的速度，所以目前网站设计者也主要使用JPEG和GIF这2种压缩格式的图像。 1GIF文件 2JPEG文件 3PNG文件,3.1.3插入图像,要在Dreamweaver CC 2019文档中插入图像，该图像必须位于本地站点文件夹内或远程站点文件夹内，否则不能正确显示，所以在建立站点时，网站设计者常常是

32、先创建一个名叫“image”的文件夹，并将需要的图像复制到其中。,3.1.4设置图像属性,插入图像后，在“属性”面板中显示了该图像的属性。,插入图像后的“属性”面板,3.1.5给图像添加文字说明,当图像不能在浏览器中正常显示时，网页中图像的位置就变成空白区域。为了让浏览者在图像不能正常显示时也能了解图像的信息，可以为网页中的图像设置“替换”属性，即将图像的说明文字输入“替换”文本框中。,“属性”面板,效果图,3.1.6跟踪图像,在工程设计过程中，一般先在图像处理软件中勾画出工程蓝图，然后在此基础上反复修改，最终得到一幅完美的设计图。制作网页时也应采用工程设计的方法，先在图像处理软件中绘制网页的

33、蓝图，将其添加到网页的背景中，按设计方案对号入座，等网页制作完毕后，再将蓝图删除。在Dreamweaver CC 2019中可利用“跟踪图像”功能来实现上述网页设计的方式。,3.2多媒体,课堂案例绿色农场网页 插入Flash动画 插入FLV 插入Animate作品 插入HTML5 Video 插入音频 插入插件,3.2.1课堂案例绿色农场网页,使用“Flash SWF”按钮，为网页文档插入Flash动画；使用“属性”面板，设置动画背景透明。,效果图,3.2.2插入Flash动画,Dreamweaver CC 2019中提供了插入Flash对象的功能，但要注意Flash动画的格式。例如Flash

34、 源文件（.fla）格式的文件不能在浏览器中显示、Flash SWF文件（.swf）格式的文件是Flash影片的压缩格式，可以在浏览器中显示，所以在Dreamweaver CC 2019中只能插入Flash SWF格式的文件，便于在 Web浏览器上查看。,3.2.3插入FLV,应用Dreamweaver CC 2019可以在网页中轻松添加FLV视频，而无须使用Flash创作工具。但插入的FLV文件必须是经过编码的。 插入 FLV对象的具体操作步骤如下。 （1）在文档编辑窗口的“设计”视图中，将插入点放置在想要插入 FLV的位置。 （2）通过以下2种方法，打开“插入 FLV”对话框，如图3-34

35、所示。 单击“插入”面板“HTML”选项卡中的“Flash Video”按钮 。 选择“插入 HTML Flash Video”命令。,3.2.4插入Animate作品,Animate是Adobe最新出品的制作HTML5动画的可视化工具，可以简单地将其理解为HTML5版本的Flash Pro。在应用Dreamweaver CC 2019制作的网页中同样可以插入Animate制作的作品。,3.2.5插入HTML5 Video,Dreamweaver CC 2019可以在网页中插入HTML5视频。HTML5视频元素提供了一种将电影或视频嵌入网页中的标准方式。 在网页中插入HTML5 Video的具

36、体操作步骤如下。 （1）在文档编辑窗口的“设计”视图中，将插入点放置在想要插入视频的位置。 （2）通过以下3种方法启用HTML5 Video功能。 在“插入”面板“HTML”选项卡中，单击“HTML5 Video”按钮 。 选择“插入 HTML HTML5 Video”命令。 按Ctrl+Shift+Alt+V组合键。 （3）此时页面中插入了一个内部带有影片图标的矩形块，选中该图形，在“属性”面板中，单击“源”选项右侧的“浏览”按钮 ，在弹出的“选择视频”对话框中选择视频文件，单击“确定”按钮。,3.2.6插入音频,1插入背景音乐 Dreamweaver CC 2019的html代码中提供了背

37、景音乐标签，使用该标签可以为网页添加背景音乐效果。 2插入音乐 插入音乐和插入背景音乐的效果不同，插入音乐可以在页面中看到播放器的外观，如播放、暂停、定位和音量等按钮。 3嵌入音乐 上面我们介绍了插入背景音乐及插入音乐的方法，下面我们来讲解一下如何嵌入音乐。嵌入音乐和插入音乐效果基本相同，只不过嵌入音乐播放器的外观要比插入音乐播放器的外观多几个按钮。,3.2.7插入插件,利用“插件”按钮，可以在网页中插入AIV、MPG、MOV、MP4 等格式的视频文件，还可以插入音频文件。 在网页中插入插件的具体操作步骤如下。 （1）在文档编辑窗口的“设计”视图中，将插入点放置在想要插入插件的位置。 （2）通

38、过以下2种方法弹出“插件”对话框，插入插件。 单击“插入”面板“HTML”选项卡中的“插件”按钮 。 选择“插入 HTML 插件”命令。,课堂练习时尚先生网页,使用“Image”按钮插入图像，美化页面。,效果图,课后习题五谷杂粮网页,使用“Flash SWF”按钮，插入Flash动画效果。,效果图,第4章超链接,本章简介： 网站中的每个网页都是通过超链接的形式关联在一起的，超链接是网页中最重要、最根本的元素之一。浏览者可以通过鼠标单击网页中的某个超链接，轻松地实现网页之间的转换，或下载文件、收发邮件等。本章将对超链接进行具体的讲解。,掌握超链接的概念 掌握文本超链接、电子邮件超链接、下载文件链

39、接的创建方法 掌握图像超链接、鼠标经过图像链接的创建方法 掌握ID超链接、热点链接的创建方法,课堂学习目标,4.1超链接的概念,超链接的主要作用是将物理上无序的网页组成一个有机的统一体。超链接对象上存放着对应网页或其他文件的地址。在浏览网页时，当用户将鼠标指针移到某些文字或图像上时，鼠标指针会改变形状或颜色，这就是在提示浏览者：此对象为链接对象。用户只需单击这些链接对象，就可完成打开链接的网页、下载文件、打开邮件工具及收发邮件等操作。,4.2文本超链接,课堂案例建筑模型网页 创建文本超链接 设置文本超链接的状态 创建下载文件链接 创建电子邮件链接,4.2.1课堂案例建筑模型网页,使用“插入”面

40、板的“HTML”选项卡制作电子邮件链接效果；使用“属性”面板为文字制作下载文件链接效果。,效果图,创建文本超链接的方法非常简单，主要是在链接文本的“属性”面板中指定链接文件。指定链接文件的方法有以下3种。 1直接输入要链接文件的路径和文件名。 2使用“浏览文件”按钮。 3使用“指向文件”按钮。,4.2.2创建文本超链接,一个未被访问过的链接文字与一个被访问过的链接文字在形式上应该是有所区别的，以提示浏览者链接文字所指示的网页是否已被访问过。,4.2.3设置文本超链接的状态,浏览网站的目的往往是查找并下载资料，在网站中提供文件下载可利用创建下载文件链接来实现。创建下载文件链接的步骤如同创建文字链

41、接，区别在于所链接的文件不是网页文件而是其他文件，如EXE、ZIP等文件。 创建下载文件链接的具体操作步骤如下。 （1）在文档编辑窗口中选择需添加下载文件链接的网页对象。 （2）在“链接”文本框中指定链接文件。 （3）按F12键预览网页。,4.2.4创建下载文件链接,网站一般只是作为单向传播的工具将各网页中的信息传达给浏览者，但网站建立者可能需要接收浏览者的反馈信息，一种有效的方式是让浏览者给网站建立者发送E-mail。在网页中创建电子邮件超链接就可以实现这种反馈。 每当浏览者单击设置为电子邮件超链接的网页对象时，就会打开邮件处理工具（如微软公司的Outlook Express），并且工具自动

42、将收信人地址设为网站建设者的邮箱地址，方便浏览者给网站发送反馈信息。 1利用“属性”面板创建电子邮件超链接 2利用“电子邮件链接”对话框创建电子邮件超链接,4.2.5创建电子邮件链接,4.3图像超链接,课堂案例温泉度假网页 创建图像超链接 创建鼠标指针经过图像超链接,4.3.1课堂案例温泉度假网页,用“鼠标经过图像”按钮，为网页添加导航效果；使用“链接”选项，制作超链接效果；使用“CSS设计器”面板，控制超链接的边框显示。,效果图,创建图像超链接的操作步骤如下。 （1）在文档编辑窗口中选择图像。 （2）在“属性”面板中，单击“链接”选项右侧的“浏览文件”按钮 ，为图像添加相对路径的链接。 （3

43、）在“替代”选项中可输入替代文字。设置替代文字后，当图像不能下载时，会在图像的位置上显示替代文字；当浏览者将鼠标指针指向图像时也会显示替代文字。 （4）按F12快捷键预览网页的效果。,4.3.2创建图像超链接,“鼠标指针经过图像”是一种常用的互动技术，当鼠标指针经过图像时，图像会随之发生变化。一般，“鼠标指针经过图像”效果由2张大小相等的图像形成，一张图像称为主图像，另一张图像称为次图像。主图像是首次载入网页时显示的图像，次图像是当鼠标指针经过时更换的另一张图像。“鼠标指针经过图像”效果经常应用于网页中的按钮上。 创建“鼠标经过图像”的具体操作步骤如下。 （1）在文档编辑窗口中将光标放置在需要

44、添加图像的位置。 （2）通过以下2种方法弹出“插入鼠标经过图像”对话框。 选择“插入 HTML 鼠标经过图像”命令。 单击“插入”面板“HTML”选项卡中“鼠标经过图像”按钮 。 （3）在对话框中按照需要设置选项，然后单击“确定”按钮完成设置。按F12键预览网页。,4.3.3创建鼠标指针经过图像超链接,4.4ID超链接,课堂案例影相天地网页 创建ID超链接,4.4.1课堂案例影相天地网页,使用“属性”面板，创建ID标记；使用“链接”项，制作鼠标经过图像的ID超链接效果。,效果图,若网页的内容很多，为了寻找一个主题，浏览者往往需要拖曳滚动条进行查看，非常不方便。Dreamweaver CC 20

45、19提供了ID超链接功能，可快速定位到网页的不同位置。 1创建ID标记 2建立ID超链接,4.4.2创建ID超链接,4.5热点超链接,课堂案例建筑规划网页 创建热点超链接,4.5.1课堂案例建筑规划网页,使用热点按钮，为图像添加热点；使用“属性”面板，为热点创建超链接。,效果图,创建热点超链接的具体操作步骤如下。 （1）选取一张图片，在“属性”面板的“地图”项下方单击热点按钮。 （2）利用“矩形热点工具”按钮 、“椭圆热点工具”按钮 、“多边形热点工具”按钮 、“指针热点工具”按钮。 （3）在“链接”文本框中输入要链接的网页地址，在“替换”文本框中输入当鼠标指针指向热点时所显示的替换文字。通过

46、热点功能，用户可以在图片的任何地方做一个链接。反复操作，就可以在一张图片上划分很多热点功能，并为每一个热点设置一个链接，从而实现在一张图片不同位置上单击鼠标左键链接到不同页面的效果。 （4）按F12键预览网页的效果。,4.5.2创建热点超链接,课堂练习创意设计网页,使用“电子邮件链接”按钮，制作电子邮件链接效果；使用“属性”面板，为文字制作下载文件链接效果；使用“页面属性”命令，改变超链接的显示效果。,效果图,课后习题建筑设计网页,使用“鼠标经过图像”按钮，制作鼠标指针经过图像的图像变换效果。,效果图,第5章表格,本章简介： Dreamweaver的表格是网页设计中一个非常有用的工具，它不仅可

47、以将相关数据有序地排列在一起，还可以精确地定位文字、图像等网页元素在页面中的位置，使得页面在形式上既丰富多彩又条理清楚，在组织上井然有序而不显单调。使用表格进行页面布局的最大好处是，即使浏览者改变了计算机显示器的分辨率也不会影响网页的浏览效果。因此，表格是网站设计人员必须掌握的工具。表格运用得是否熟练，是划分专业制作人士和业余爱好者的一个重要标准。,掌握表格的组成和插入方法 掌握表格、单元格、行和列的属性设置 掌握在表格中输入文字、插入其他网页元素 掌握选择整个表格、行或列、单元格的应用 掌握复制、粘贴表格的应用 掌握删除、缩放表格的应用 掌握单元格的合并和单元格的拆分 掌握表格数据的导入、导

48、出 掌握表格数据排序 掌握表格的嵌套,课堂学习目标,5.1表格的简单操作,课堂案例布艺沙发网页 表格的组成 插入表格 表格各元素的属性 在表格中插入内容 选择表格元素 复制、剪切、粘贴表格 清除内容和删除行或列 缩放表格 合并和拆分单元格 增加表格的行和列,5.1.1课堂案例布艺沙发网页,使用“页面属性”命令，设置页面边距和网页标题；使用“Table”按钮，插入表格；使用“Image”按钮，插入图像；使用“CSS设计器”面板，控制图像的间距。,效果图,效果图,5.1.2表格的组成,表格中包含行、列、单元格、表格标题等元素。,单元格,表格的标题,行,列,5.1.3插入表格,与传统意义的表格作用一

49、样，在Dreamweaver CC 2019中插入表格，是有效组织数据的最佳手段。 插入表格的具体操作步骤如下。 （1）在文档编辑窗口中，将插入点放到合适的位置。 （2）通过以下2种方法弹出“Table”对话框。 选择“插入 Table”命令。 按Ctrl+Alt+T组合键。 单击“插入”面板“HTML”选项卡中的“Table”按钮 。,5.1.4表格各元素的属性,插入表格后，通过选择不同的表格对象，可以在“属性”面板中看到它们的各项参数，修改这些参数可以得到不同风格的表格。 1表格的属性 2单元格、行、列的属性,5.1.5在表格中插入内容,建立表格后，可以在表格中添加各种网页元素，如文本、图像和表格等。在表格中添加元素的操作非常简单，只需根据设计要求选定单元格，然后插入网页元素即可。一般当表格中插入内容后，表格的尺寸会随内容的尺寸自动调整。当然，还可以利用单元格的属性来调整其内部元素的对齐方式和单元格的大小等。 1输入文字 2插入其他网页元素,5.1.6选择表格元素,表格中的元素需要先选中然后才能对其进行操作。可以选择整个表格、多行或多列，也可以选择一个或多个单元格。 1选择整个表格 2选择行或列 3选择单元格 4