模块3 初级应用

网页设计与制作DreamweaverCC（第4版）模块3课件01模块1网页设计基础03模块3初级应用05模块5高级应用02模块2HTML语言04模块4网页布局06模块6测试与发布07模块7综合应用任务描述认识DreamweaverCC工作界面，掌握在DW中创建、管理站点的基本流程及在DW中新建和设计页面的基本过程。任务3匠心筑梦——创建与管理本地站点任务解析在本任务中，需要完成以下操作：1.

学会本地站点的创建与编辑方法；2.

学会网页文件的新建、保存、预览等基本操作。

（1）在D盘根目录中新建文件夹“jxzm”，将“renwu3”素材文件夹中的所有内容复制到该文件夹中。运行Dreamweaver，选择菜单“站点”→“新建站点”命令，弹出“站点设置对象”对话框，如图3-1所示。输入站点名称“匠心筑梦”，单击“本地站点文件夹”文本框后的“浏览文件夹”按钮，在打开的对话框中选择“D:\jxzm”文件夹作为站点根目录，单击“保存”按钮。此时，新定义的站点“匠心筑梦”出现在“文件”面板中，如图3-2所示。图3-1“站点设置对象”对话框图3-2文件面板

（2）选择菜单“文件”→“新建”命令，弹出“新建文档”对话框，如图3-3所示。在左侧栏选择“新建文档”选项，“文档类型”栏选择“HTML”，单击“创建”按钮，即可创建一个空白网页。选择菜单“文件”→“保存”命令，打开“另存为”对话框，输入文件名“index.html”，选中对话框下方的“站点根目录”按钮，单击“保存”按钮，即可在“文件”面板出现该网页文件。图3-3“新建文档”对话框

（3）在“文件”面板中选择站点“匠心筑梦”，单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令，如图3-4所示。输入文件夹名称“images”，按Enter键，即可创建文件夹。按住Ctrl键，依次单击jxjd.png和ysbg.png两个图像文件，按住鼠标左键，将其拖动到images文件夹上，单击面板左下角的“刷新”按钮，此时“文件”面板如图3-5所示。图3-4图3-5

（4）在“文件”面板中，双击打开“jingji.html”，选择菜单“文件”→“页面属性”命令，打开“页面属性”对话框，选择“外观（CSS）”类别，在“背景颜色”文本框中输入“#DAD8D8”，设置左、右、上、下边距均为0像素，如图3-6所示；选择“标题/编码”类别，在“标题”文本框中输入“德技并修”。按F12键，打开浏览器预览页面，如图3-8所示。图3-6“外观（CSS）”分类图3-8预览jingji.html页面（5）关闭浏览器窗口，将鼠标移到“文档”窗口上方的文件名标签上，单击“关闭”按钮，关闭该文件。在“文件”面板中右击“jingji.html”，从快捷菜单选中“编辑”→“删除”命令，选择“是”，删除该网页。单击“banner1.png”，按Delete键将其删除。

（6）选择菜单“站点”→“管理站点”命令，打开“管理站点”对话框。选择站点“匠心筑梦”，单击“导出当前选定的站点”按钮，打开“导出站点”对话框，如图3-10所示，选择保存位置，默认的站点定义文件名是“匠心筑梦.ste”，单击“保存”按钮。图3-10“导出站点”对话框此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

Dreamweaver工作界面由菜单栏、工具栏、面板组、状态栏、属性面板、文档窗口等组成，如图3-12所示。

Dreamweaver工作界面图3-12

Dreamweaver工作界面站点此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处创建站点是建立网站的第一步。站点可以简单地理解为管理和存放网站中所有网页及各种素材的文件夹。通过站点可以方便地对站点文件进行管理，并且能够减少链接与路径方面的错误。按地理位置划分，站点分为本地站点和远程站点。我们把在本地计算机硬盘中存放网页的文件夹称为本地站点，把在Internet网络服务器上存放网页的文件夹称为远程站点。按站点的交互性划分，站点分为静态站点和动态站点。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处创建本地站点在Dreamweaver中创建Web站点，通常先在本地磁盘上创建本地站点，经过一系列的测试后，再将这些网页的副本上传到一个远程Web服务器，成为真正的站点供他人在互联网上浏览。创建本地站点的步骤如下。（1）运行Dreamweaver，选择菜单“站点→新建站点”命令，弹出“站点设置对象”对话框。（2）选择对话框中的“站点”选项，在“站点名称”文本框中输入用户自定的站点名称。在“本地站点文件夹”文本框中直接输入站点文件夹的路径，或单击后面的“浏览文件夹”按钮，在打开的“选择根文件夹”对话框中进行选择。（3）如果要对站点属性进行详细的设置和调整，可以选择“高级设置”选项，在弹出的选项卡中进行设置。

图3-33“管理站点”对话框此处添加你的信息此处（1）选择菜单“站点→管理站点”命令，或在“文件”面板的下拉列表中选择“管理站点”命令，如图3-33所示。（2）选择要编辑的站点，单击“编辑”按钮或直接双击站点名称，在弹出的“站点设置对象”对话框中可以对站点信息进行修改。（3）编辑完成后，单击“保存”按钮，返回“管理站点”对话框，单击“完成”按钮。

编辑站点（1）选择菜单“站点→管理站点”命令，打开“管理站点”对话框，在弹出的“管理站点”对话框中选择要复制的站点，单击“复制”按钮，将会出现新站点。（2）用鼠标双击新复制出的站点，在弹出的“站点设置对象”对话框中进行修改设置，单击“保存”按钮，返回“管理站点”对话框，单击“完成”按钮。复制站点

选择菜单“站点→管理站点”命令，打开“管理站点”对话框，选择要删除的站点，单击“删除”按钮，即可将站点删除。

删除站点，只是删除站点的定义信息，硬盘中相应位置的文件和文件夹并不会被删除。

删除站点（1）选择菜单“站点→管理站点”命令，打开“管理站点”对话框，选择要导出的站点，单击按钮。（2）在弹出的“导出站点”对话框中，选择站点定义文件的保存位置，输入站点定义文件的文件名，单击“保存”按钮。导出站点（1）选择菜单“站点→管理站点”命令，打开“管理站点”对话框，单击导入站点按钮，弹出“导入站点”对话框。（2）选择导入站点定义文件,单击“打开”，选择“管理站点”对话框中“完成”按钮。

导入站点

1.创建文件夹（1）通过“我的电脑”或“资源管理器”直接在站点文件夹中进行创建。（2）在“文件”面板中选择站点名称或文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令，输入文件夹的名称，按【Enter】键完成。2.创建空白网页文件

（1）启动DW后，窗口出现开始页面，单击“新建”栏的“HTML”选项即可。（2）选择菜单“文件→新建”命令，选择“新建文档”选项卡中的“HTML”文档类型，在“框架”列表中选择“无”，文档类型默认为“HTML5”，单击“创建”按钮。（3）在“文件”面板中选择站点，单击鼠标右键，从弹出的快捷菜单中选择“新建文件”命令，输入文件的名称，按【Enter】键完成。文档基本操作

3.保存网页文件选择菜单“文件→保存”命令或按【Ctrl+S】组合键可对当前文档进行保存。如果对打开的文档进行了修改，但尚未保存，文件名后将自动显示一个“*”，如图3-34所示，保存后“*”将消失。

文档基本操作图3-34

修改后尚未保存的文档添息此处4.文档的打开和预览（1）打开文档①选择菜单“文件→打开”命令，弹出“打开”对话框，选择要打开的文件，单击“打开”按钮。②在“文件”面板中，选择要打开的文档，右键单击鼠标，在弹出的快捷菜单中选择“打开”命令，或直接双击鼠标都可以打开该文档。

（2）预览文档

①选择菜单“文件→实时预览→InternetExplore”或其他浏览器命令。②单击状态栏最右侧的“预览”按钮，从弹出的列表中选择“InternetExplore”或其他浏览器。③按【F12】键。文档基本操作5．移动和复制文件（文件夹）（1）单击鼠标右键，在弹出的快捷菜单中选择“编辑→拷贝/剪切”命令，然后选择目标位置，从快捷菜单中选择“编辑→粘贴”命令，可完成文件或文件夹的复制/移动操作。

（2）用鼠标直接将文件或文件夹拖动到新位置，可完成文件或文件夹的移动操作。

6.删除文件（文件夹）（1）在“文件”面板中，选择要删除的文件或文件夹。（2）单击鼠标右键，从弹出的快捷菜单中选择“编辑→删除”命令或直接按【Del】键。（3）在弹出的提示对话框中单击“是”按钮，即可将文件或文件夹从本地站点文档基本操作（1）外观“页面属性”对话框的“外观”类别包括CSS外观和HTML外观，分别如图3-39和图3-40所示，都可以对页面的“外观”进行设置。页面字体：指定网页中使用的默认字体，以及字体样式和粗细。大小：指定页面中使用的默认文本大小。

文本颜色：指定文本显示的默认颜色。

背景颜色：设置页面的背景颜色。背景图像：设置页面的背景图像。重复：指定背景图像在页面的显示方式，左边距和右边距：指定页面左边距和右边距的大小。

上边距和下边距：指定页面上边距和下边距的大小。页面属性图3-39“外观（CSS）”选项图3-40“外观（HTML）”选项（2）链接在“链接”选项中可以设置链接的属性，如图3-42所示。链接字体：指定页面链接文本使用的默认字体。

大小：指定页面链接文本使用的默认文本大小。

链接颜色：指定页面链接文本的颜色。

已访问链接：指定已访问链接文本的颜色。

变换图像链接：指定当鼠标指针位于链接文本上时显示的颜色。

活动链接：指定用鼠标指针单击链接文本时显示的颜色。

下划线样式：指定链接文本采用的下划线样式。列表中提供了4种样式，如图3-43所示，如果选择“始终无下划线”，则自动取消网页链接文本的下划线。页面属性图3-42“页面属性”对话框图3-43“下划线样式”列表（3）标题在“标题”类别中可以设置网页中标题的格式，即设置属性面板“格式”列表框中各标题的默认属性，如图3-44所示。标题字体：指定网页中标题使用的默认字体。“标题”选项组：分别为“标题1”至“标题6”指定文本的大小和颜色。（4）标题/编码在“标题/编码”选项中可以设置网页标题的内容和编码类别，如图3-45所示。标题：指定在浏览器窗口的标题栏上显示的页面标题。系统默认的网页标题是“无标题文档”。编码：指定当前网页中文本采用的编码类别。页面属性图3-44“页面属性”对话框图3-45“页面属性”对话框（5）跟踪图像“跟踪图像”是Dreamweaver一个非常有效的功能，它允许用户在网页中将原来的平面设计稿作为辅助的背景。这样用户在编辑网页时即可精确的定位页面元素。提示：（1）如果在“页面属性”对话框中同时设置了背景颜色和背景图像，那么在网页中优先显示背景图像，没有图像的位置显示背景颜色。（2）设置页面标题，还可以直接在页面属性面板的“文档标题”框中输入。或者在“代码”视图窗口中，修改标题代码<title>和</title>之间的内容，如图3-47所示。页面属性图3-47代码视图任务描述通过“匠心筑梦——文本的设置”任务，学会并掌握文本对象的插入、编辑及文本格式设置，规范处理文本内容，以实现准确、快捷传递信息的目标。任务4匠心筑梦——

文本的设置任务解析

掌握普通文本、空格、特殊符号及日期的输入方法；

掌握文本分段和换行的实现方式，理解<p>、<br>标记的具体用法；

掌握文本属性的相关设置，理解行内样式的应用逻辑；

学会段落格式的相关操作，包括段落标题、内缩区块及列表的设置；

学会水平线的插入操作，理解<hr>标记的属性编辑方法。

（1）创建“淬技逐光”页面。启动DreamweaverCC，将renwu4文件夹中的素材复制到任务3建立的“筑梦青春”站点中的text文件夹中。右击站点，选择“新建文件夹”命令，输入名称“other”。选择“文件”→“新建”命令，或者按【Ctrl+N】组合键，弹出“新建文档”对话框，选择“新建文档”中的“HTML”类型，单击“创建”按钮。

（2）选择“文件”→“保存”命令，弹出“另存为”对话框，选择“other”文件夹，输入文件名“web1.html”，单击“保存”按钮。选择“文件”→“页面属性”命令，弹出“页面属性”对话框。在“外观（CSS）”类别的“背景颜色”文本框中输入颜色代码“#EDFAE9”，如图3-48所示，在“标题/编码”类别“标题”文本框中输入“淬技逐光”，如图3-49所示，单击“确定”按钮。图3-48“设置页面背景颜色图3-49设置页面标题

（3）打开text子文件夹中的“web1文本素材.docx”，选择所有文本，按【Ctrl+C】组合键复制文本，在Dreamweaver的“文档”窗口中，选择菜单“编辑”→“粘贴”命令（或按【Ctrl+V】组合键）粘贴文本。在相应位置按Enter键进行分段，将鼠标光标分别定位到正文各段的前面，连续按四次【Ctrl+Shift+Space】组合键，插入四个空格，完成各段落首行缩进的设置。

（4）选择第一行“淬技逐光”四个文字，单击“属性”面板“CSS”类别“字体”列表按钮，在列表中选择“管理字体”命令，弹出“管理字体”对话框，选择“自定义字体堆栈”选项卡，在“可用字体”列表中选择“黑体”，双击鼠标将其添加到“选择的字体”列表中，单击“完成”按钮。选择标题文本“淬技逐光”，在“属性”面板“字体”列表中将其设为“黑体”，“大小”为24px，颜色为“＃CC3300”，居中对齐。

（5）将鼠标光标定位到文档内容的最后，选择菜单“插入”→“HTML”→“水平线”命令。单击选中水平线，切换到“代码”视图，在<hr>标记中设置“color”属性参数值为“#FF0000”，“width”为1600像素、“size”为2像素，取消阴影。其中宽度、高度、对齐、是否阴影属性也可以在水平线“属性”面板进行设置。

（6）将鼠标光标定位到水平线后，按Enter键，选择菜单“插入”→“HTML”→“字符”→“版权”命令，输入文本“版权所有”。按【Ctrl+S】组合键保存文件，按F12键预览，如图3-55所示。图3-55预览web1网页

（7）创建“出彩人生”页面。在“文件”面板中右击“other”文件夹，从弹出的快捷菜单中选择“新建文件”命令，输入文件名“web2.html”，按Enter键完成创建。

（8）双击打开web2.html，在“属性”面板“文档标题”文本框中输入“出彩人生”。打开text文件夹中的“web2文本素材.docx”，选中并复制全部内容，将鼠标光标定位到文档窗口中，按【Ctrl+V】组合键粘贴文本。

（9）将鼠标光标定位到第一行标题“出彩人生”的前面，连续按四次【Ctrl+Shift+Space】组合键，选中标题文本，在“属性”面板“字体粗细”下拉列表中选择“bold”，字体大小为16px，颜色为#EA3639。

（10）选中正文中的四行文本，在“属性”面板“HTML”类别中选择“无序列表”。切换至“代码”视图，设置<ul>标记“type”属性参数值为“square”。

（11）在标题下面一行插入水平线，设置宽度为260px、高度为2px，左对齐。

(12)按【Ctrl+S】组合键保存文件，按F12键预览网页，如图3-59所示。图3-59预览web2.html页面文本的设置此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处文本是网页中最基本的元素之一。用户浏览网页时,获取信息主要通过文本，并且文本的信息量大，易于浏览和下载。因此，掌握文本的输入和编辑方法至关重要。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处文本的输入（1）添加普通文本，可以采用以下两种方法。①直接通过键盘输入文本。②在其他应用程序中，选择文本，按【Ctrl+C】键复制，在Dreamweaver的“文档”窗口中，选择菜单“编辑→粘贴”命令（或按【Ctrl+V】键）粘贴文本。（2）插入空格默认情况下，网页文档只允许在文本或字符之间输入一个空格，若要在文档中输入多个连续空格可执行以下操作。①选择“插入”菜单→“HTML”→“不换行空格”命令。②按【Ctrl+Shift+Space】组合键。③在“代码”视图窗口中，输入空格代码“

”。④切换中文输入法为全角状态，按空格键可以输入多个空格。选择菜单“编辑→首选项”命令，弹出对话框。在“分类”列表中选择“常规”选项，勾选“允许多个连续的空格”复选框，单击“确定”按钮。此时，可以直接按空格键输入空格。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处文本的输入（3）插入特殊字符选择菜单“插入→HTML”中“字符”命令，在子菜单中选择要插入的特殊字符。用鼠标右键单击输入法工具条上的软键盘，从打开的列表中选择相应的符号组，如选择“特殊符号”，软键盘，单击可插入特殊字符。（4）插入日期在“文档”窗口中，将插入点定位到需要插入日期的位置。选择菜单“插入→HTML→日期”命令或单击“插入”面板“HTML”类别中的“日期”按钮，弹出“插入日期”对话框，设置完成后，单击“确定”按钮。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（1）段落换行若想生成新的的段落，在两段之间出现一空行，可采用以下方法进行换行。①在需要换行的位置直接按【Enter】键。②在代码视图窗口中输入段落标记</p>和<p>。（2）换行符换行若不想生成新的段落，两行之间不出现空行，可采用以下方法进行换行。①按【Shift+Enter】组合键。②选择“插入”菜单“HTML→字符”中的“换行符”命令。③选择“插入”面板中的“文本”类别，在“字符”下拉菜单中选择“换行符”。④在“代码”视图窗口中，输入换行标记<br/>。文本分段换行此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处设置文本属性在“CSS”界面中设置文本格式（1）设置字体在“文本”属性面板中单击“CSS”按钮，切换到文本的CSS设置界面。从“字体”列表中选择合适的字体类型、样式和粗细。Dreamweaver默认的是宋体字，“字体”列表默认显示的是英文字体类型。若设置其他中文字体，需先将中文字体类型添加到字体列表中。①单击文本属性面板中的“字体”列表按钮，选择“编辑字体”列表命令，弹出“管理字体”对话框。②在“自定义字体堆栈”选项卡的“可用字体”列表中选择要添加的字体，双击鼠标或单击添加按钮，将其添加到“选择的字体”列表中，可以同时添加多种字体。文本属性设置在“CSS”界面中设置文本格式（2）设置文字大小在“文本”属性面板中单击“CSS”按钮，切换到文本的CSS设置界面。在“大小”列表框中选择相应的大小。①无：以默认字号显示。②9至36：8个字号级别，数值越大，字号越大。可以在“大小”框中直接输入数字，设置字号大小。③xx-small至larger：设置字符相对于默认字符大小的增减量。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处文本属性设置在“CSS”界面中设置文本格式（3）设置文本颜色在“文本”属性面板中单击“CSS”按钮，切换到文本的CSS设置界面。单击属性面板中的按钮，弹出颜色拾取器。可以选择颜色，或直接在下面的文本框中输入颜色的值，系统默认文本颜色是黑色。（4）设置文本的对齐方式：单击属性面板中的对齐按钮。对齐按钮包括：左对齐、居中对齐、右对齐、两端对齐。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处文本属性设置在“HTML”界面中设置段落格式（1）设置段落标题的格式在“格式”下拉列表中选择“标题1-标题6”即可设置段落的标题格式。若想去除已有的格式，可将格式选项设为“无”（2）设置段落的缩进方式单击“内缩区块”按钮，即可设置段落的缩进，如果想取消，则单击左侧的“删除内缩区块”按钮。（3）创建项目列表和编号列表单击“项目列表”按钮，可对段落添加项目列表符号。将光标定位到需要更改项目列表的文字上，单击“列表项目...”按钮，打开“列表属性”对话框，在“列表类型”下拉框中选择“项目列表”，在“样式”下拉框中选择样式，单击“确定”按钮。单击“编号列表”按钮，可对段落添加编号列表符号。将光标定位到需要更改编号列表的文字上，单击“列表项目...”按钮，打开“列表属性”对话框，在“列表类型”下拉框中选择“编号列表”，在“样式”下拉框中选择样式，单击“确定”按钮。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处插入水平线（1）插入水平线将光标定位到需要插入水平线的位置，执行以下操作之一，即可插入水平线。①选择菜单“插入→HTML→水平线”命令。②单击“插入”面板“HTML”类别中的“水平线”按钮。（2）水平线的属性设置选择水平线，出现“水平线”属性面板，①宽和高：指定水平线的宽度和高度，单位可以是像素，也可以是页面大小的百分比。②对齐：指定水平线的对齐方式（默认、左对齐、居中对齐或右对齐）。只有水平线的宽度小于浏览器窗口的宽度时，对齐设置才有效。③阴影：指定绘制的水平线是否具有阴影效果。（3）设置水平线的颜色

切换至代码视图，在水平线标记中输入“color="颜色值"”即可。提示：在“设计”视图中，水平线的颜色不会改变，但可以在“实时”视图或浏览页面时看到设置的颜色。若要插入竖直线，只需设置水平线的宽度为较小值，高度为较大值。任务描述通过“匠心筑梦——设计多媒体网页”，学会在网页中插入多媒体元素。任务5

匠心筑梦

——设计多媒体网页任务解析

在本任务中，需要完成以下操作：①掌握在网页中插入图像及设置图像属性的方法；②掌握Dreamweaver中“鼠标经过图像”功能；③掌握在网页中插入音频及属性设置的方法；④掌握给网页添加视频及属性设置的方法。（1）编辑首页。启动DreamweaverCC，打开前面任务建立的站点“匠心筑梦”，将素材renwu5文件夹中的素材复制到zmqc对应的子文件夹中。（2）双击打开index.html，在“属性”面板“文档标题”文本框中输入“匠心筑梦人人出彩”。将鼠标光标定位在文档顶端，单击“插入”菜单“Table”命令，打开“Table”对话框，插入9行1列、宽度1200px的表格，在“属性”面板设置为居中对齐。（3）将鼠标光标定位在第1行单元格，单击“插入”菜单“Image”命令，插入图片“images/banner.png”。在图像“属性”面板中设置“替换”文本为“精工细作”，“标题”文本为“职途闪光”，宽、高分别为1200px、228px。（4）将鼠标光标定位在第2行单元格，选择“插入”菜单→“Table”命令，插入1行5列、宽度100%的嵌套表格，鼠标从左侧第一个单元格内部向右拖动，选中5个单元格，在“属性”面板设置“水平”均为“居中对齐”，“宽”均为20%，“背景颜色”均为“#D7EDEC”。在5个单元格中依次输入文本“首页”、“淬技逐光”、“出彩人生”、“青春向远”、“联系我们”。（5）将鼠标光标定位在第3行单元格，单击“属性”面板“拆分单元格为行或列”按钮，把单元格拆分为两列，设置左侧单元格列宽为410px。将鼠标光标定位在左侧单元格，选择“插入”菜单→“HTML”→“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，单击“原始图像”后面的“浏览”按钮，选择图片“images/jx1.png”。单击“鼠标经过图像”后面的“浏览”按钮，选择图片“images/jx2.jpng。选中图像，在“属性”面板看到“ID”为“Image7”。将鼠标光标定位在图像右侧，按【Shift+Enter】组合键，输入文本“匠心传承”。（6）将鼠标光标定位在第3行右侧单元格中，插入“xw1.png”图像。按4次空格键，选择“插入”菜单→“HTML”→“HTML5Audio（A）”命令，选中音频占位符，在其“属性”面板“源”对话框输入“audio/zyya.mp3”。按Enter键,打开text子文件夹中的“index文本素材”Word文档，选择所有文本，按【Ctrl+C】组合键复制文本，将鼠标光标再次定位至该单元格，按【Ctrl+V】组合键粘贴文本。选中正文6段文本，单击“属性”面板中的“无序列表”命令。（7）将鼠标光标定位在第4行单元格中，选择“插入”菜单→“Image”命令，依次插入“jx3.png”、“jx4.png”、“jx5.png”、“jx6.png”。切换至“代码”视图，设置<marquee>标记的相关属性。（8）将鼠标光标定位在第5行单元格中，输入文本“农产品直播的创新、教学指导的耐心、技艺传承的专注、汽车维修的专注，每一幕都是匠心在不同领域的生动注脚，于实干中雕琢技艺，于探索里践行初心。”（9）将鼠标光标定位在第6行单元格中，选择“插入”菜单→“HTML”→“水平线”命令。将鼠标光标定位在第7行单元格中，输入文本“返回顶端

关闭页面”。在第8行单元格中插入1条水平线。（10）将鼠标光标定位在第9行单元格中，选择“插入”菜单→“HTML”→“字符线”→“版权（C）”命令，插入“©”符号，输入文本“版权所有”，按【Ctrl+S】组合键保存文件。按F12键预览，首页初始效果如图3-86所示。图3-86

首页初始效果（11）创建“青春向远”页面。在“文件”面板右击“other”子文件夹，新建空白文档，命名为“web3.html”，在页面第一行输入文本“青春向远“，“属性”面板设置为“居中对齐”。（12）换行，选择“插入”菜单“HTML”→“HTML5Video（V）”命令，出现视频占位符，单击“属性”面板“源”右侧的“浏览”按钮，弹出“选择视频”对话框，选择“qcxy.mp4”，如图3-87所示。在“属性”面板设置宽、高分别为1000px、600px，单击“Poster”右侧的“浏览”按钮，弹出“选择图像”对话框，选择“jx7.png”，如图3-88所示。（13）在下一行输入文本“[单击此处可下载]”，“属性”面板设置居中对齐。按【Ctrl+S】组合键保存文件，按F12键预览web3.html，如图3-89所示。图3-89

预览web3.html多媒体元素此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处在设计精美的网页中，巧妙融入图像、音频、视频等多媒体元素，能赋予页面灵动气韵。通过“匠心筑梦——设计多媒体网页”任务实践，学会插入图像与鼠标经过图像，添加适配场景的音频素材，嵌入主题相关的动态影像，直观传递“匠心筑梦”的内涵。这些多媒体元素的协同呈现，使网页突破静态局限，达成“听其声、观其影、感其韵”的综合体验效果。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处插入图像在网页中插入图像的方法如下：（1）将光标定位到窗口中要插入图像的位置，执行以下操作之一。①选择菜单“插入→Image”命令。

②单击“插入”面板“HTML”类别中的“Image”按钮。③按【Ctrl+Alt+I】组合键。（2）打开“选择图像源文件”对话框，选择要插入的图像文件，单击“确定”按钮。（3）如果图像文件不在站点文件夹中，弹出对话框。提示用户将文件保存到站点文件夹中，选择“是”按钮，弹出“复制文件为”对话框，选择站点文件夹，单击“保存”按钮。选择图像后，在窗口下方出现图像属性面板，如图3-93所示，可以设置图像的属性。设置图像属性（1）设置图像大小（2）设置源文件（3）链接设置（4）替换设置（5）编辑图像图3-93图像属性面板此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处鼠标经过图像是指在浏览器中当鼠标指针移到一幅图像上时发生变化的图像。鼠标经过图像实际上由两幅图像组成，即初始图像和替换图像。具体的操作步骤如下：（1）将光标定位到要插入变换图像的位置，执行以下操作之一：选择菜单“插入→HTML→鼠标经过图像”命令。在“插入”面板的“HTML”类别中选择“鼠标经过图像”.（2）在“插入鼠标经过图像”对话框中设置：原始图像：选择鼠标经过前显示的图像。鼠标经过图像：选择当鼠标经过原始图像时显示的图像。（3）设置完毕后，单击“确定”按钮插入鼠标经过图像此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（1）要在网页中插入音频，可采用以下步骤：①将光标定位到要插入音频文件的位置在“插入”面板的“HTML”类别中的“HTML5Audio”。选择菜单“插入→HTML→HTML5Audio（A）”命令。②在打开的“选择文件”对话框中选择要插入的音频文件。③可以在属性面板中设置其属性。插入音频文件任务描述通过任务“匠心筑梦——创建网页链接”，学会在网页中插入超级链接的方法。任务6

匠心筑梦

——创建网页链接任务解析

在本任务中，需要完成以下操作：

掌握在网页中插入超链接的方法；

掌握设置超链接的相关属性；

理解超链接HTML标记结构及属性的设置。（1）打开“匠心筑梦”站点index.html文档，选中文本“首页”，在“属性”面板“HTML”类别“链接”文本框内输入“#”或者“javascript:;”，建立空链接。（2）选择文本“淬技逐光”，在“属性”面板单击“链接”文本框右侧“浏览文件”按钮，打开“选择文件”对话框，选择目标文件“web1.html”，在“目标”下拉列表选择“_blank”。以同样的方式将文本“出彩人生”链接到web2.html，“青春向远”链接web3.html，“目标”下拉列表均选择“_blank”。(3)选中文本“联系我们”，在“属性”面板“链接”文本框内输入“mailto:zhengxy@”，如图3-101所示。图3-101“属性”面板创建邮件链接（4）选择“xw1.png”图标，在“属性”面板中选择“矩形热点工具”按钮，在图标上拖动鼠标画出一个将“新闻速递”完全覆盖的矩形框。在“属性”面板“链接”文本框中输入“/”，在“目标”下拉列表选择“_blank”如图3-102所示。（5）将鼠标光标定位在第1行单元格，切换至“代码”视图，在<img>标记前面，输入代码“<aname="ks"></a>”。鼠标光标定位在“返回顶端”文本位置，编辑代码“<ahref="#ks">返回顶端</a>”，完成锚记链接的创建。(6)将鼠标光标定位在“关闭页面”文本位置，编辑代码“<ahref="javascript:window.close()">关闭页面</a>”,完成脚本链接的创建。按【Ctrl+S】组合键保存网页。图3-102“属性”面板创建邮件链接（7）打开web1.html，将“首页”、“web2页面”、“web3页面”文本分别连接至“index.html”、“web2.html”、“web3.html”，“目标”均设置为“_blank”;为“web1页面”文本创建空链接;为“联系我们”文本创建邮件链接，链接至“mailto：zhengxy@”,按【Ctrl+S】组合键保存网页。（8）打开web3.html，选中文本“[单击此处可下载]”，在“属性”面板“链接”文本框中输入“../video/qcxy.zip＂，按【Ctrl+S】组合键保存网页。（9）在index.html文档中，按【F12】键预览网页，测试超链接，如图3-105所示。图3-105测试超链接超级链接此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处超链接是网页非常重要的特征，它可以实现文档间的跳转。超链接由源端点和目标端点构成，表示出了文档间跳转的关系。

源端点是网页中用来建立超链接的对象，可以是文本、图片或其他网页元素，目标端点是单击源端点后跳转到的对象，可以是网页、图片、电子邮件地址、文件或应用程序，也可以是页面中的某个位置。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处每个文件都有自己的存放位置和路径，创建正确的链接，首先要清楚一个文件到要链接的目标文件之间的路径关系，也就是链接路径。（1）绝对路径是指链接目标对象的完整路径。当要链接到其他网站中的文件时，或者说是建立外部链接时，必须使用绝对路径，即完整的URL。（2）相对路径是以当前文件所在位置为起点，到被链接文件经由的路径。当要链接到同一站点文件夹中的文件时，或者说是建立内部链接时，一般使用相对路径。（3）根相对路径根相对路径是从站点的根文件夹到文档的路径。链接路径此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（1）利用“属性面板”创建①在“文档”窗口中选择要创建超链接的文本。②在“链接”文本框中直接输入文档的路径和文件名。（2）通过“超级链接”对话框创建。①选择菜单“插入→Hyperlink”命令。②在弹出的“超级链接”对话框中进行设置，单击“确定”按钮。

创建文本链接此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处图像超链接有两种情况：一是以整个图像为对象建立超链接，二是为图像的不同区域分别创建超链接，称为图像热点链接，创建这种链接可使用以下方法。（1）在“文档”窗口中选中要创建超链接的图像。（2）在属性面板上选择热点工具，在图像上创建相应形状的热点。（3）利用“指针热点工具”选择图像热点。（4）在“热点”属性面板中完成超链接的设置。

创建图像链接此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处浏览网站的目的往往是查找并下载资料，最常见的是一些软件或程序的下载，下载时会出现。这种资源建立的方法就是文件下载链接。

文件下载链接方法和文本链接的建立方法相同，只是当被链接的文件是“.exe”、“.zip”、“.rar”等非网页类型的文件时，浏览器无法直接打开，便会提示文件会被下载，这就是网上下载的方法。

创建文件下载链接此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

创建电子邮件链接（1）利用菜单命令创建在“文档”窗口中将光标定位到要创建邮件链接的位置，执行以下操作之一。选择菜单“插入→HTML→电子邮件链接”命令。单击“插入”面板“HTML”类别中的“电子邮件链接”按钮。在打开的“电子邮件链接”对话框中进行设置，单击“确定”按钮。文本：输入用于链接电子邮件的文本。电子邮件：输入电子邮件地址。（2）利用属性面板创建在“文档”窗口中选择要创建电子邮件链接的文本或图像，在属性面板的“链接”文本框中输入mailto:电子邮件地址。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处空链接是没有指向任何对象的链接。例如：一般站点首页中导航栏的“本站首页”就没有必要设置链接，但为了看到链接效果，就需要设置一个空链接。要创建空链接，可按照下面的方法完成。（1）在“文档”窗口中选中要建立空链接的文本或图像。（2）在属性面板的“链接”文本框中输入“javascript:;”（javascript后依次接一个冒号和一个分号）或者一个“#”号。提示：使用#号创建空链接，在一些浏览器中会出现返回到网页顶端的效果，如果不想返回到网页顶端，只想附加行为或动作，则建议使用“javascript:;”创建空链接。创建空链接此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处脚本链接是一种用于执行JavaScript代码或调用JavaScript函数的链接，使用脚本链接，能够在不退出当前网页的情况下为浏览者提供许多附加信息，操作步骤如下。（1）在“文档”窗口中选择要创建脚本链接的文本或图像。（2）在属性面板的“链接”文本框中输入“javascript:”，后跟JavaScript代码或函数（在冒号与代码之间不能键入空格）。例如：在“链接”文本框中输入“javascript:alert(‘欢迎来到我的小站！’)”，当单击该链接，弹出对话框。创建脚本链接此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

CSS（层叠样式表）主要有三种方式，即行内样式、内嵌样式和外部样式，作用范围从局部标记、单一页面再到多个页面，覆盖了不同需求的样式管理场景。1）行内样式行内样式直接写在HTML相关标记的“style”属性中，作用范围仅限当前标记。在前面的任务中，通过“属性”面板设置字体、大小、颜色等属性时，系统会自动生成元素行内样式。这种方式操作简便，优先级最高，每个标记需单独写样式，复用性差，不利于维护。例如：<pstyle="color:red;font-size:16px;">匠心匠德</p>

CSS样式此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处2）内嵌样式内嵌样式也叫内部样式，将CSS代码写在HTML文件头部的<style>标记中，如图3-120所示。作用范围仅限当前HTML文件。该样式适合单页面样式管理；但多页面时无法复用，冗余度高。

CSS样式图3-120

内嵌样式此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处3）外部样式外部样式将CSS代码单独写在.css后缀的外部样式表文件中，如图3-120所示。通过HTML的<link>标记引入页面，<linkhref="css/style.css"rel="stylesheet"type="text/css">。外部样式作用范围可以覆盖多个网页，因此复用性强，便于多页面统一维护，是大型项目的主流选择。

CSS样式图3-120

外部样式此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处CSS常用选择器选择器是CSS中用于指定样式作用对象的语法规则，它如同定位工具，精准筛选出网页中需要应用样式的HTML元素，是实现网页视觉效果分层设计的基础。网页开发中常用的选择器包括基础选择器、复合选择器等类型。CSS样式此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处1）基础选择器基础选择器是CSS中最常见的选择工具，主要包括：（1）标签选择器标签选择器作用于页面中所有同名标签，快速为同类元素设置通用样式。直接以HTML标签的名称命名，如“hr”、“a”。（2）类选择器类选择器可选中所有包含该类名的元素，从而实现样式的高效复用。以英文句点“.”开头，后面紧跟“类名”，如“.t1”。（3）ID选择器ID选择器用于精准定位页面中唯一带有id="ID"名称属性的元素，专为控制单个特定元素的样式而设计，以“#ID”命名。如页面某元素的“ID”名称为“Image1”，则ID选择器命名为“#Image1”。CSS样式此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处2）复合选择器复合选择器以基础选择器（标签、类、ID、通配符等）为基础，通过特定符号组合形成选择规则。可依据元素层级、兄弟关系或属性特征精准定位目标，实现样式精细化控制。常用复合选择器包括：（1）后代选择器例如：“olli”，精准选中所有位于<ol>元素内部的<li>元素。（2）子选择器例如：“ul>li”，仅匹配<ul>的直接子元素<li>，不包含嵌套更深层的<li>。（3）伪类选择器伪类选择器用于选择元素的特定状态或结构位置，使用“:”（冒号）标识。在链接伪类选择器中，针对<a>标记的不同交互状态定义选择器：

a:link：未被访问的链接；a:visited：已被访问的链接；a:hover：鼠标悬浮时的链接；a:active：鼠标按下未弹起时的链接。

CSS样式此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

“CSS设计器”面板是一个比属性面板功能更为强大的编辑器，它显示为当前文档定义的所有CSS样式，而不管这些样式是嵌入在文档中还是在外部样式表中。

可以使用“CSS设计器”面板查看、创建、编辑和删除CSS样式，并且可以将外部样式表附加到文档。

执行以下操作之一均可打开”CSS设计器”面板。•选择“窗口→CSS样式”命令。

•按Shift+F11快捷键。•单击属性面板上的“CSS设计器”按钮。CSS设计器面板“CSS设计器”面板包含源、@媒体、选择器、属性4个窗口，各窗口按钮的含义及作用如下：（1）源窗口“添加CSS源”按钮：单击该按钮，弹出的列表中包括“创建新的CSS文件”、“附加现有的CSS文件”、“在页面中定义”3个选项，用来创建或附加CSS文件。“删除CSS源”按钮：单击该按钮可以将选中的CSS文件删除。（2）@媒体窗口“添加媒体查询”按钮：选择一个CSS源并单击该按钮，打开“定义媒体查询”对话框，可以定义希望使用的媒体查询。“删除媒体查询”按钮：单击该按钮可以将选中的CSS文件删除。CSS设计器面板（3）选择器窗口“添加选择器”按钮：选择一个CSS源并单击该按钮，输入样式名称。“删除选择器”按钮：单击该按钮将选中的CSS样式删除。（4）属性在选择器窗口中选择一个CSS样式，可以在属性窗口中进行以下操作：“添加CSS属性”按钮：单击该按钮，定义属性。选择“布局”、“文本”、“边框”、“背景”、“更多”选项按钮，设置属性值。“删除CSS属性”按钮：单击该按钮可将选中的属性删除。若勾选“显示集”选项，则仅显示已设置属性。CSS设计器面板此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（1）打开“CSS设计器”面板，在源窗口中单击“添加CSS源”按钮。（2）如果选择的是“创建新的CSS文件”选项，则打开“创建新的CSS文件”对话框，单击右侧的“浏览”按钮，打开“将样式表文件另存为”对话框。选择样式表文件的保存位置，输入样式表文件名，单击“保存”按钮，在“创建新的CSS文件”对话框中选择“链接”或“导入”，单击“确定”按钮。如果选择“附加现有的CSS文件”，则打开“使用现有的CSS文件”对话框，单击“浏览”按钮，弹出“选择样式表文件”对话框，选择现有的CSS文件，单击“确定”按钮。在“使用现有的CSS文件”对话框中选择“链接”或“导入”，单击“确定”按钮。如果选择的是“在页面中定义”选项，则定义的样式、属性嵌入在文档中。（3）在选择器窗口单击“添加选择器”按钮，输入样式名称，在属性窗口定义属性。创建CSS样式此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（1）定义CSS样式“布局”属性在“CSS设计器”面板的“属性”窗口选择“布局”选项，可对控制元素在页面上放置方式、定位属性进行设置，如图2-78所示。“width”和“height”：设置元素的宽度和高度。“min-width”和“min-height”：设置最小宽度和最小高度。“max-width”和“max-height”：设置最大宽度和最大高度。“display”：设置显示。“box-sizing”：设置box-sizing。“margin”：边距，指定一个元素的边框与另一个元素之间的间距。取消选择“全部相同”可设置元素各个边的边距。“padding”：填充，指定元素内容与元素边框之间的间距。取消选择“全部相同”选项可设置元素各个边的填充。定义CSS样式属性此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（1）定义CSS样式“布局”属性“position”：设置对象的位置，包括“静态(static)”、“绝对(absolute)”、“固定（fixed）”和“相对(relative)”。“float”：浮动；“clear”:清除。“overflow-x”：设置水平溢出行为。“overflow-y”：设置垂直溢出行为。“visibility”：设置对象的可见性，包括“继承(inherit)”、“可见(visible)”和“隐藏(hidden)”。“Z-index”：设置对象的堆积顺序，包括“自动”和“值”两个选项，值越大，越靠上显示。“opacity”：设置不透明度级别。定义CSS样式属性此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（2）定义CSS样式“文本”属性在“CSS设计器”面板的“属性”窗口选择“文本”选项，可对文本基本字体、阴影属性进行设置。“color”、“font-family”：为样式设置文本的颜色、字体。“font-style”：指定字体样