Dreamweaver网页设计与应用（Dreamweaver CC 2019）（微课版）课件全套 第1-15章 初识Dreamwear -电子商务网页

项目引入：本项目主要讲解Dreamweaver的基础知识和基本操作。通过对这些内容的学习，学生可以认识和了解Dreamweaver工作区的构成，学会创建网站框架以及管理站点的方法，为以后的网站设计和制作打下坚实的基础。项目1初识Dreamweaver了解Dreamweaver工作区的构成掌握创建网站框架的方法和流程掌握站点的管理方法项目目标掌握“在线留言网页”的关键制作步骤掌握“时尚美发网页”的关键制作步骤掌握“有机蔬菜网页”的关键制作步骤技能目标培养对Dreamweaver的兴趣提升独立创建和管理站点的自信心素养目标任务1.1工作区开始屏幕不同风格的工作区多文档的编辑界面“插入”面板任务实践—在线留言网页1.1.1开始屏幕启动DreamweaverCC2019后，首先看到的是开始屏幕，在其中可以选择新建文档的类型或打开已有的文档等。选择“编辑>首选项”命令，弹出“首选项”对话框，取消勾选“显示开始屏幕”复选框。单击“应用”按钮完成设置，单击“关闭”按钮，关闭对话框。再次启动DreamweaverCC2019时将不再显示开始屏幕。开始页面“首选参数”对话框1.1.2不同风格的工作区选择“窗口>工作区布局”命令，弹出子菜单，选择“标准”或“开发人员”命令可切换工作区风格，工作区会发生相应的改变。“工作布局”命令1.1.3多文档编辑界面DreamweaverCC2019提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。用户可以单击文档窗口上方的选项卡切换到相应的文档。通过多文档的编辑界面，用户可以同时编辑多个文档。多文档编辑界面1.1.4插入面板“插入”面板包括“HTML”“表单”“模板”“Bootstrap组件”“jQueryMobile”“jQueryUI”“收藏夹”7个选项卡，不同功能的按钮分门别类地放在不同的选项卡中。在DreamweaverCC2019中，“插入”面板可以菜单和选项卡两种方式显示。如果需要切换为菜单样式，可用鼠标右键单击“插入”面板的选项卡区域，在弹出的快捷菜单中选择“显示为菜单”命令。插入面板任务实践——在线留言网页使用“打开”命令打开文件，使用“页面属性”对话框改变链接文字的状态，熟悉CSS功能的使用方法。效果图任务1.2创建网站框架站点管理器定义新站点创建文件夹创建和保存网页任务实践—时尚美发网页1.2.1站点管理器站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点，以及导入或导出站点。若要管理站点，必须打开“管理站点”对话框。“文件”面板“桌面”列表“管理站点”面板1.2.2定义新站点在DreamweaverCC2019中，站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一组文件，远程站点是远程Web服务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站点，使其他人可以访问它们。1.2.3创建文件夹站点建立好之后，需要先在站点管理器中规划站点文件夹。（1）在“文件”面板中选择站点。（2）通过以下两种方法新建文件夹。①单击“文件”面板右上方的按钮，在弹出的菜单中选择“文件>新建文件夹”命令。②在“文件”面板中，在站点上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令。（3）输入新文件夹的名称1.2.4创建和保存网页在标准的DreamweaverCC2019环境下，创建和保存网页的操作步骤如下。（1）选择“文件>新建”命令，或按Ctrl+N组合键，弹出“新建文档”对话框，选择“新建文档”选项，在“文档类型”列表中选择“</>HTML”选项，在“框架”区域选择“无”选项卡。（2）设置完成后，单击“创建”按钮，弹出文档窗口，新文档在该窗口中打开。根据需要在文档窗口中选择不同的视图设计网页任务实践—时尚美发网页使用“打开”命令打开文件，使用组合键复制并粘贴文件，使用“新建”命令新建文件，使用“保存”命令保存文件。效果图打开站点编辑站点复制站点删除站点导出和导入站点任务实践—有机蔬菜网页任务1.3管理站点1.3.1打开站点当要修改某个网站的内容时，首先要打开站点。具体操作步骤如下。（1）启动DreamweaverCC2019。（2）选择“窗口>文件”命令，或按F8键，弹出“文件”面板，在“桌面”下拉列表中选择要打开的站点，打开站点。打开站点选择站点1.3.2编辑站点如果要修改站点的一些设置，就需要编辑站点。例如，修改站点的默认图像文件夹的路径。1.3.3复制站点复制站点可省去重复建立多个结构相同的站点的操作步骤，从而提高工作效率。在“管理站点”对话框中可以复制站点，具体操作步骤如下。（1）在“管理站点”对话框中选择要复制的站点。（2）单击“复制当前选定的站点”按钮进行复制。（3）双击新复制的站点，弹出“站点设置对象”对话框，在“站点名称”文本框中可以更改新站点的名称。1.3.4删除站点删除站点只是删除DreamweaverCC2019同本地站点间的关系，而本地站点包含的文件和文件夹仍然保存在磁盘原来的位置。换句话说，删除站点后，虽然站点文件夹保存在计算机中，但DreamweaverCC2019中已经不存在此站点。例如，按下列步骤删除站点后，“管理站点”对话框中不存在该站点的名称。在“管理站点”对话框中删除站点的具体操作步骤如下。（1）在“管理站点”对话框中选择要删除的站点。（2）单击“删除当前选定的站点”按钮即可删除选择的站点。1.3.5导出和导入站点如果要在计算机之间移动站点，或者与其他用户共同设计站点，可通过DreamweaverCC2019的导出和导入站点功能实现，方法为先将站点导出为“.ste”格式的文件，然后在其他计算机上将其导入DreamweaverCC2019中。导出导入任务实践—有机蔬菜网页使用“站点管理”命令创建站点，使用“页面属性”命令设置页面的属性。效果图项目引入：文本是网页设计中最基本的元素。本项目主要讲解文本的输入和编辑、水平线与网格的设置。通过对这些内容的学习，学生可以充分利用文本工具和相关命令在网页中输入、编辑文本内容，设置水平线与网格，还可以运用丰富的字体和多样的编排手段表示网页的内容。项目2文本掌握输入和编辑文本的方法掌握设置页边距和插入换行符的方法掌握水平线的设置方法掌握显示和隐藏网格的方法项目目标掌握“陶瓷博物馆网页”的关键制作步骤掌握“休闲度假村网页”的关键制作步骤技能目标培养对网页设计中文本编排的兴趣提高对网页设计中字体和布局的审美素养目标任务2.1编辑文本格式输入文本设置文本属性输入连续的空格设置或隐藏不可见元素设置页边距插入换行符任务实践—陶瓷博物馆网页2.1.1输入文本使用DreamweaverCC2019编辑网页时，如果要添加文本，首先应将光标移动到文档窗口中的编辑区域，单击，然后直接输入文本即可，就像在其他文本编辑器中一样。例如，打开一个网页文档，在文档中单击，将光标置于其中，然后输入文本。输入文字后的效果图2.1.2设置文本属性利用“属性”面板可以方便地修改选中文本的字体、字号、颜色、对齐方式等，以获得预期的效果。选择“窗口>属性”命令，或按Ctrl+F3组合键，弹出“属性”面板，在HTML和CSS“属性”面板中都可以设置文本的属性。“属性”面板2.1.3输入连续空格在默认状态下，DreamweaverCC2019只允许用户输入一个空格。若要输入连续空格，则需要进行设置或特定操作。（1）选择“编辑>首选项”命令，弹出“首选项”对话框。（2）在“首选项”对话框左侧的“分类”列表中选择“常规”选项，在右侧的“编辑选项”选项组中选择“允许多个连续的空格”复选框，单击“应用”按钮完成设置，单击“关闭”按钮关闭对话框。此时，用户可连续按Space键在文档编辑区内输入多个空格。2.1.4显示或隐藏不可见元素显示或隐藏某些不可见元素的具体操作步骤如下。（1）选择“编辑>首选项”命令，弹出“首选项”对话框。（2）在“首选项”对话框左侧的“分类”列表中选择“不可见元素”选项，根据需要选择或取消选择右侧的多个复选框，以实现不可见元素的显示或隐藏，单击“应用”按钮完成设置，单击“关闭”按钮关闭对话框。2.1.5设置页边距按照文章的书写规则，正文与页面四周需要留有一定的距离，这个距离叫作页边距。网页设计也遵循这样的规则，在默认状态下，HTML文件的上、下、左、右边距不为0。修改页边距的具体操作步骤如下。（1）选择“文件>页面属性”命令，弹出“页面属性”对话框。（2）在对话框的“左边距”“右边距”“上边距”“下边距”“边距宽度”“边距高度”文本框中输入相应的数值可以调整边距。“页面属性”对话框2.1.6插入换行符为段落插入换行符有以下几种方法。①选择“插入”面板的“HTML”选项卡，单击“字符”展开式按钮，在弹出的菜单中选择“换行符”命令。②按Shift+Enter组合键。③选择“插入>HTML>字符>换行符”命令。任务实践—陶瓷博物馆网页效果图使用“页面属性”命令设置页面外观、网页标题效果，使用“首选项”命令设置允许多个连续的空格。任务2.2水平线与网格水平线网格任务实践—休闲度假村网页1．创建水平线（1）选择“插入”面板的“HTML”选项卡，单击“水平线”按钮。（2）选择“插入>HTML>水平线”命令。2．修改水平线在文档窗口中选中水平线，选择“窗口>属性”命令，弹出“属性”面板，可以根据需要对水平线的属性进行修改。2.2.1水平线“属性”面板使用网格可以更加方便地定位网页元素，在进行网页布局时，网格具有至关重要的作用。1．显示和隐藏网格2．设置网页元素与网格对齐3．修改网格的疏密4．修改网格线的颜色和线型2.2.2网格任务实践—休闲度假村网页使用“水平线”命令在网页中插入水平线，使用“属性”面板取消水平线的阴影，使用代码改变水平线的颜色。效果图项目实践—有机果蔬网页使用“页面属性”命令设置页面外观、网页标题效果，使用“首选项”命令设置允许多个连续的空格，使用“CSS设计器”面板设置文字的字体、大小和行距。

效果图课后习题—国画展览馆网页使用“属性”面板设置文字的大小、颜色及字体。效果图项目引入：图像和多媒体是网页中的重要元素，在网页中的应用非常广泛。本项目主要讲解图像和多媒体在网页中的应用方法和技巧，通过对这些内容的学习，学生可以设计、制作出更加美观、生动、丰富且具有动感和吸引力的网页。项目3图像和多媒体掌握在网页中插入和编辑图像的方法掌握多媒体在网页中的应用方法和技巧项目目标掌握“环球旅游网页”的关键制作步骤掌握“物流运输网页”的关键制作步骤技能目标培养解决实际问题的能力培养团队协作意识和技能，提升与他人合作的能力素养目标任务3.1图像的基本操作网页中的图像格式在网页中插入图像设置图像属性给图像添加文字说明跟踪图像任务实践—环球旅游网页3.1.1网页中的图像格式网页中常用的图像格式有JPEG、GIF、PNG这3种，但大多数浏览器只支持JPEG和GIF两种图像格式。为了保证网页的加载速度，网站设计者常使用JPEG和GIF这两种压缩格式的图像。3.1.2在网页中插入图像要在DreamweaverCC2019文档中插入的图像必须位于当前站点文件夹内或远程站点文件夹内，否则图像不能正确显示。所以在建立站点时，网站设计者通常会创建一个名为“images”的文件夹，并将需要的图像复制到其中。“选择图像源文件”对话框3.1.3设置图像属性插入图像后，“属性”面板中会显示该图像的属性。插入图像后的“属性”面板3.1.4给图像添加文字说明当图像不能在浏览器中正常显示时，网页中图像的位置就变成空白区域。为了让浏览者在图像不能正常显示时也能了解图像的信息，常为网页的图像设置“替换”属性，将图像的说明文字输入“替换”文本框中。“属性”面板效果图3.1.5跟踪图像在工程设计过程中，一般先在图像处理软件中勾画出工程蓝图，然后在此基础上反复修改，最终得到一幅完美的设计图。制作网页时也应采用工程设计的方法，先在图像处理软件中绘制网页的蓝图，将其添加到网页的背景中，按设计方案对号入座，等网页制作完毕后，再将蓝图删除。DreamweaverCC2019利用“跟踪图像”功能来实现上述网页设计方式。任务实践—环球旅游网页使用“Image”按钮插入图像，使用“CSS设计器”面板控制图像的水平边距。效果图任务3.2多媒体在网页中的应用插入Flash动画插入FLV文件插入Animate作品插入HTML5Video插入音频插入插件任务实践—物流运输网页3.2.1插入Flash动画DreamweaverCC2019提供了在文档中插入Flash动画的功能，虽然Flash中使用的文件类型有Flash源文件（扩展名为“.fla”）、FlashSWF文件（扩展名为“.swf”）、Flash模板文件（扩展名为“.swt”），但DreamweaverCC2019只支持FlashSWF文件（扩展名为“.swf”），因为它是Flash源文件（扩展名为“.fla”）的压缩版本，已进行了优化，便于在网络上查看。3.2.2插入FLV文件FLV全称FlashVideo。在网页中可以轻松添加FLV文件，而无须使用Flash创作工具。但在操作之前必须有一个经过编码的FLV文件。使用Dreamweaver插入一个显示FLV文件的SWF（ShockWaveFlash）组件，当在浏览器中查看时，此组件会显示所选的FLV文件以及一组播放控件。3.2.3插入Animate作品Animate是Adobe公司出品的用于制作HTML5动画的可视化工具。使用该软件可以在网页中轻而易举地插入动画效果，而不需要编写烦琐复杂的代码。3.2.4插入HTML5Video使用DreamweaverCC2019可以在网页中插入HTML5Video。HTML5Video元素提供了一种将视频嵌入网页中的标准方式。“属性”面板3.2.5插入音频1．插入背景音乐HTML提供了背景音乐标签<bgsound></bgsound>，使用该标签可以为网页添加背景音乐。2．插入音乐插入音乐和插入背景音乐的效果不同，插入音乐后可以在页面中看到播放器的外观，如播放、暂停、定位和音量等按钮。3．嵌入音乐上面介绍了背景音乐及音乐的插入，下面来讲解如何嵌入音乐。嵌入音乐和插入音乐相同，只不过嵌入音乐播放器要比插入音乐播放器多几个按钮。3.2.6插入插件利用“插件”按钮，可以在网页中插入AIV、MPG、MOV、MP4等格式的视频文件，也可以插入音频文件。在网页中插入插件的方与嵌入音乐的方法一样，具体操作步骤如下。（1）在文档窗口的“设计”视图中，将光标置于想要插入插件的位置。（2）通过以下几种方法启用“插件”命令。①在“插入”面板“HTML”选项卡中单击“插件”按钮。②选择“插入>HTML>插件”命令。任务实践—物流运输网页使用“FlashSWF”按钮在网页中插入Flash动画效果，使用“属性”面板设置动画背景透明。效果图项目实践—时尚先生网页使用“Image”按钮插入图像。效果图课后习题——五谷杂粮网页使用“FlashSWF”按钮，插入Flash动画效果。效果图项目引入：本项目主要讲解超链接（包括文本超链接、图像超链接、电子邮件超链接和“鼠标经过图像”超链接等）的概念和创建方法。通过对这些内容的学习，学生可以熟练掌握网站超链接的创建与使用方法，并能精心设计网站的超链接。项目4超链接掌握创建文本超链接的方法和技巧掌握创建电子邮件超链接的方法和技巧掌握创建图像超链接的方法和技巧掌握创建“鼠标经过图像”超链接的方法和技巧项目目标掌握“建筑模型网页”的关键制作步骤掌握“狮立地板网页”的关键制作步骤技能目标培养对超链接设置和应用的兴趣，激发主动学习的动力培养在超链接设置中积极探索、勇于尝试新的设计方案和方法的精神素养目标任务4.1文本超链接创建文本超链接文本超链接的状态电子邮件超链接任务实践—建筑模型网页创建文本超链接的方法非常简单，主要是在文本的“属性”面板中指定要链接文件。指定要链接文件的方法有以下3种。1．直接输入要链接文件的路径和文件名。2．使用“浏览文件”按钮指定要链接文件。3．使用“指向文件”图标指定要链接文件。4.1.1创建文本超链接一个未被访问过的文本超链接与一个被访问过的文本超链接在形式上应该有所区别，以提示文本超链接所指示的网页是否被看过。4.1.2文本超链接的状态每当浏览者单击包含电子邮件超链接的网页对象时，系统就会打开邮件处理工具（如微软公司的OutlookExpress），并且自动将收信人地址设为网站设计者的E-mail地址，方便浏览者给网站发送反馈信息。1．利用“属性”面板建立电子邮件超链接2．利用“电子邮件链接”对话框建立电子邮件超链接4.1.3电子邮件超链接任务实践—建筑模型网页使用“电子邮件链接”按钮制作电子邮件超链接，使用“浏览文件”按钮制作下载文件超链接。效果图任务4.2图像超链接创建图像超链接“鼠标经过图像”超链接任务实践—狮立地板网页4.2.1图像超链接建立图像超链接的操作步骤如下。（1）在文档窗口中选择图像。（2）在“属性”面板中单击“链接”选项右侧的“浏览文件”按钮，为图像添加文档相对路径的链接。（3）在“替换”文本框中可输入替换文字。设置替换文字后，当图像不能下载时，会在图像的位置显示替换文字；当浏览者将鼠标指针指向图像时也会显示替换文字。（4）按F12键预览网页。“鼠标经过图像”超链接是一种常用的互动技术，当鼠标指针经过图像时，图像会随之发生变化。一般“鼠标经过图像”效果由两幅大小相等的图像实现，一幅称为主图像，另一幅称为次图像。主图像是首次载入网页时显示的图像，次图像是当鼠标指针经过时显示的另一幅图像。“鼠标经过图像”超链接经常应用于网页中的按钮上。4.2.2“鼠标经过图像”超链接任务实践—狮立地板网页使用“鼠标经过图像”按钮制作导航条。效果图项目实践—恒选地产网页使用热点工具为图像添加热点图像，使用“属性”面板为热点创建超链接。效果图课后习题——温泉度假网页使用“鼠标经过图像”按钮制作导航条。效果图项目引入：在制作网页时，使用表格不仅可以列举数据，还可以进行页面元素定位。很多网页都是用表格进行布局的，这是因为表格在内容的组织、页面中文本和图像的位置控制方面都很有优势。本项目主要讲解表格的操作方法和制作技巧。通过对这些内容的学习，学生可以熟练地掌握数据表格的编辑方法及应用表格对页面进行合理布局的方法。

项目5表格掌握插入表格的方法掌握设置表格属性的方法和技巧掌握在表格内添加元素的方法掌握网页中数据表格的编辑方法项目目标掌握“风季租车网页”的关键制作步骤掌握“典藏博物馆网页”的关键制作步骤技能目标培养灵活应变的能力增强实践能力和创新精神素养目标任务5.1表格的简单操作插入表格设置表格属性在表格内添加元素任务实践—风季租车网页5.1.1插入表格要将相关数据有序地组织在一起，必须先插入表格。插入表格的具体操作步骤如下。（1）在文档窗口中将光标置于合适的位置。（2）通过以下几种方法打开“Table”对话框。①选择“插入>Table”命令。②单击“插入”面板“HTML”选项卡中的“Table”按钮。③按Ctrl+Alt+T组合键。（3）根据需要设置新建表格的大小、行列数等，单击“确定”按钮完成表格的新建。5.1.2设置表格属性插入表格后，通过选择不同的表格对象，可以在“属性”面板中看到它们的各项属性，修改这些属性可以得到不同风格的表格。表格的“属性”面板单元格、行、列的“属性”面板5.1.3在表格内添加元素建立表格后，可以在表格中添加各种网页元素，如文本、图像等。1．输入文字在单元格中输入文字有以下几种方法。①单击任意一个单元格并直接输入文本，此时单元格会随文本的输入自动扩展。②粘贴在其他文字编辑软件中复制的带有格式的文本。5.1.3在表格内添加元素2．插入其他网页元素（1）嵌套表格。将光标置入单元格内并插入表格，即可实现表格嵌套。（2）插入图像。在表格中插入图像有以下几种方法。①将光标置入单元格中，单击“插入”面板“HTML”选项卡中的“Image”按钮。②将光标置入单元格中，选择“插入>Image”命令。③将光标置入单元格中，将“插入”面板“HTML”选项卡中的“Image”按钮拖曳到单元格内。④从资源管理器、站点管理器或桌面上直接将图像文件拖曳到一个需要插入图像的单元格内。任务实践—风季租车网页使用“Table”按钮插入表格进行页面布局，使用“Image”按钮插入图像。效果图任务5.2网页中的数据表格导出和导入表格的数据表格排序任务实践—典藏博物馆网页1．将网页内的表格数据导出选择“文件>导出>表格”命令，弹出图所示的“导出表格”对话框，根据需要设置参数，单击“导出”按钮，弹出“表格导出为”对话框，输入保存导出的数据的文件名称，单击“保存”按钮，完成表格数据的导出。5.2.1导出和导入表格的数据“导出表格”对话框2．在其他网页中导入表格式数据首先要打开“导入表格式数据”对话框，然后根据需要进行选项设置，最后单击“确定”按钮，完成设置。要打开“导入表格式数据”对话框，可以选择“文件>导入>表格式数据”命令。5.2.1导出和导入表格的数据“导入表格式数据”对话框日常工作中，常常需要对无序的表格内容进行排序，以便浏览者可以快速找到所需的数据。使用表格排序功能可以解决这一难题。将光标置入要排序的表格中，然后选择“编辑>表格>排序表格”命令，弹出“排序表格”对话框。根据需要设置相应的选项，单击“应用”按钮或“确定”按钮，完成设置。5.2.2表格排序“排序表格”对话框任务实践—典藏博物馆网页使用“表格式数据”命令导入外部表格式数据，使用“属性”面板改变表格的宽度、高度和背景颜色。效果图项目实践—布艺沙发网页使用“页面属性”命令设置页边距和网页标题，使用“Table”按钮插入表格，使用“Image”按钮插入图像，使用“CSS设计器”面板控制图像的间距布艺沙发。

效果图课后习题——绿色粮仓网页使用“表格式数据”命令导入外部表格式数据，使用“排序表格”命令对表格中的数据进行排序。效果图项目引入：本项目主要介绍ASP的基础知识和操作，包括ASP服务器的安装、ASP语法基础、数组的创建与应用、流程控制语句及ASP内置对象等。通过对本项目的学习，学生可以掌握ASP的基本操作。项目6ASP掌握ASP服务器的运行环境及安装IIS的方法掌握ASP语法基础及数组的创建与应用方法掌握VBScript选择语句和循环语句掌握Request请求和相应对象的方法掌握Server对象项目目标掌握“节能环保网页”的关键制作步骤掌握“乒乓球俱乐部网页”的关键制作步骤技能目标激发对ASP技术的学习兴趣通过合作项目培养团队合作意识培养学习的耐心和细心素养目标任务6.1ASP基础ASP服务器的安装ASP语法基础数组的创建与应用流程控制语句任务实践—节能环保网页6.1.1ASP服务器的安装ASP的主要功能是把脚本语言、HTML、组件和Web数据库访问功能有机地结合在一起，形成一个能在服务器端运行的应用程序，该应用程序可根据来自浏览器端的请求生成相应的HTML文件并将其返回给浏览器。使用ASP可以创建以HTML网页为用户界面，并能够与数据库进行交互的Web应用程序。1．ASP的运行环境2．安装IIS6.1.2ASP语法基础1．ASP文件结构ASP文件是以“.asp”为扩展名的。2．声明脚本语言在编写ASP程序时，可以声明ASP文件所使用的脚本语言，以通知Web服务器文件是使用何种脚本语言来编写程序的。3．ASP与HTMLASP程序包含在“<%”“%>”中，并在浏览器打开网页时产生动态内容。它与HTML标签互相协作，构成动态网页。ASP程序可以出现在HTML文件中的任意位置，同时，在ASP程序中也可以嵌入HTML标签。6.1.3数组的创建与应用数组是有序数据的集合。数组中所有元素的数据类型相同，用一个统一的数组名和下标可以唯一地确定数组中的元素，下标放在紧跟数组名的括号中。有一个下标的数组称为一维数组，有两个下标的数组称为二维数组，以此类推。数组的最大维数为60。1．创建数组在VBScript中，数组有两种类型：固定数组和动态数组。2．应用数组函数数组函数用于操作数组。数组函数主要包括LBound函数、UBound函数、Split函数和Erase函数。6.1.4流程控制语句在VBScript中，有顺序结构、选择结构和循环结构3种基本程序控制结构。顺序结构是程序设计中最基本的结构，在程序运行时，编译器总是按照先后顺序执行程序中的所有命令。通过选择结构和循环结构可以改变执行顺序。本小节介绍VBScript选择语句和循环语句。任务实践—节能环保网页使用“拆分”按钮和“设计”按钮切换视图，使用Now函数显示当前系统日期和时间。 效果图任务6.2ASP内置对象Request对象Response对象Session对象Application对象Server对象ObjectContext对象任务实践—乒乓球俱乐部网页6.2.1Request对象在客户端/服务器结构中，当客户端Web页面向网站服务器传递信息时，ASP能够通过Request对象获取客户端提交的全部信息。这些信息包括客户端请求的HTTP头信息、在网站服务器端存放的客户端浏览器的Cookies数据、附于URL之后的字符串信息、页面中表单传送的数据以及客户端的验证字段等。6.2.2Response对象Response对象用来访问所创建并返回客户端的响应。可以使用Response对象控制发送给用户的信息，如直接发送信息给浏览器、重定向浏览器到另一个URL或设置Cookies的值。Response对象提供了标识服务器和性能的HTTP变量、发送给浏览器的信息和任何将在Cookies中存储的信息。Response对象只有一个数据集合——Cookies，该集合用于设置希望放置在客户端浏览器上的Cookies的值。Response对象的Cookies数据集合用于当前响应中，将Cookies值发送到客户端浏览器，该数据集合访问方式为只写。6.2.3Session对象用户可以使用Session对象存储特定会话所需的信息。这样，当用户在应用程序的Web页面之间跳转时，存储在Session对象中的变量不会丢失，而是在整个用户会话中一直存在。当用户请求来自应用程序的Web页面时，如果该用户还没有会话，则Web服务器将自动创建一个Session对象。当会话过期或被放弃后，服务器将终止该会话。6.2.4Application对象ASP程序是在Web服务器上运行的，在Web站点中创建一个基于ASP的应用程序之后，可以通过Application对象在ASP应用程序的所有用户之间共享信息。也就是说，Application对象中包含的数据可以在整个Web站点中被所有用户使用，并且可以在网站运行期间持久保存。利用Application对象可以实现统计网站的在线人数、创建多用户游戏以及创建多用户聊天室等功能。6.2.5Server对象Server对象提供对服务器上的方法和属性的访问，大多数方法和属性是作为实用程序的功能提供的。6.2.6ObjectContext对象ObjectContext对象是一个以组件为主的事务处理系统，可以保证事务成功完成。ObjectContext对象允许程序在网页中直接配合微软事务服务器（MicrosoftTransactionServer，MTS）使用，从而管理或开发高效率的Web服务器应用程序。事务是一个操作序列，这些序列可以视为一个整体。如果其中的某一个操作没有完成，所有与该操作相关的内容都应该取消。事务用于对数据库进行可靠的操作。任务实践—乒乓球俱乐部网页使用“代码检查器”窗口编写代码，使用Request对象获取表单数据。效果图项目实践—挖掘机网页使用Request对象的Form数据集合获取表单数据。效果图课后习题——建筑信息咨询网页用Response对象的Write方法使用函数“Now”显示当前系统日期和时间。效果图项目引入：通过CSS样式可以将网页制作得更加绚丽多彩。本项目主要对CSS样式进行讲解。通过对本项目的学习，学生可以轻松、有效地对页面的整体布局、颜色、字体、链接、背景，以及同一页面的不同部分、不同页面的外观和格式等效果进行精确控制。项目7CSS样式了解CSS选择器的类型、CSS样式的创建与应用方法掌握CSS属性的设置方法熟练使用“CSS过渡效果”面板项目目标掌握“山地车网页”的关键制作步骤掌握“羽毛球运动网页”的关键制作步骤技能目标培养对网页布局、颜色、字体等方面的审美能力激发对CSS技术的学习兴趣素养目标任务7.1CSS样式概述“CSS设计器”面板

CSS选择器的类型7.1.1“CSS设计器”面板使用“CSS设计器”面板可以创建、编辑和删除CSS样式，并且可以将外部样式表附加到文档中。1．打开“CSS设计器”面板2．CSS的功能“CSS设计器”面板7.1.2CSS选择器的类型CSS选择器可分为类选择器、标签选择器、ID选择器、复合选择器等。同级别声明嵌套式声明任务7.2CSS样式的创建与应用创建CSS样式应用CSS样式创建和附加外部样式7.2.1创建CSS样式使用“CSS设计器”面板可以创建类选择器、标签选择器、ID选择器和复合选择器等。7.2.2应用CSS样式创建自定义样式后，要为不同的网页元素应用不同的样式，具体操作步骤如下。（1）在文档编辑窗口中选择网页元素。（2）根据选择器的类型使用不同的应用方法。7.2.3创建和附加外部样式如果不同网页的不同HTML元素需要使用同一样式，则可通过附加外部样式来实现。首先创建一个外部样式，然后在不同网页的不同HTML元素中附加定义好的外部样式。1．创建外部样式2．附加外部样式任务7.3编辑CSS样式网站设计者有时需要修改应用于文档的内部样式和外部样式，如果修改内部样式，则会自动重新设置受它控制的所有HTML元素的格式；如果修改外部样式文件，则会自动重新设置与它链接的所有HTML文件。任务7.4CSS属性布局属性文本属性边框属性背景属性任务实践—山地车网页7.4.1布局属性“布局”选项组用于控制网页中块元素的大小、边距、填充和位置属性等。7.4.2文本属性“文本”选项组用于控制网页中文本的字体、字号、颜色、行距、首行缩进、对齐方式、阴影等。7.4.3边框属性“边框”选项组用于控制块元素的边框粗细、样式、颜色及圆角。7.4.4背景属性“背景”选项组用于为网页元素添加背景图像或背景颜色。任务实践—山地车网页使用“Table”按钮插入表格，使用CSS属性设置链接效果。效果图任务7.5过渡效果“CSS过渡效果”面板创建CSS过渡效果任务实践—羽毛球运动网页7.5.1“CSS过渡效果”面板在“CSS过渡效果”面板中可以新建、删除和编辑CSS过渡效果。在创建CSS过渡效果时，需要为元素指定过渡效果类。如果在创建效果类之前已选择元素，则过渡效果类会自动应用于选定的元素。7.5.2创建CSS过渡效果任务实践—羽毛球运动网页使用“CSS设计器”面板设置文字的字体、颜色，使用“CSS过渡效果”面板设置文字的变色效果。效果图项目实践——电商网页使用“CSS设计器”面板改变文字的大小和行距。效果图课后习题——鲜花速递网页效果图使用“CSS设计器”面板设置文字的字体、颜色及大小，使用“CSS过渡效果”面板为文字添加阴影效果。项目引入：模板的功能就是把网页布局和内容分离。在布局设计好之后，可以将其保存为模板，这样相同布局的页面就可以通过模板来创建，从而极大地提高工作效率。本项目主要讲解模板和库的创建方法和应用技巧。通过对这些内容的学习，学生可以更加轻松地完成网站的更新、维护工作。第8章模板和库掌握创建和编辑模板的方法掌握管理模板的方法掌握创建库项目的方法掌握向页面添加库项目的方法项目目标掌握“时尚前沿网页”的关键制作步骤掌握“鲜果批发网页”的关键制作步骤技能目标培养对模板和库创建方法的学习热情，激发对网页设计工作的兴趣通过尝试不同的布局和功能，培养创新能力培养责任感，提高自我管理的能力素养目标创建空模板创建可编辑区域管理模板任务实践—时尚前沿网页任务8.1模板8.1.1创建空模板创建空模板有以下几种方法。①在打开的文档窗口中单击“插入”面板“模板”选项卡中的“创建模板”按钮，将当前文档转换为模板文档。②在“资源”面板中单击“模板”按钮，此时的列表为模板列表，单击下方的“新建模板”按钮，创建空模板，此时新的模板添加到“资源”面板的模板列表中，为该模板设置名称。③在“资源”面板的模板列表中单击鼠标右键，在弹出的快捷菜单中选择“新建模板”命令。8.1.2创建可编辑区域创建可编辑区域的具体操作步骤如下。（1）打开任意一个文件。（2）将光标放置在要插入可编辑区域的位置，在“插入”面板“模板”选项卡中单击“可编辑区域”按钮，弹出“新建可编辑区域”对话框，在“名称”文本框中输入可编辑区域的名称。（3）单击“确定”按钮，即可在网页中插入可编辑区域。（4）选择“文件>另存为模板”命令，弹出“另存模板”对话框，在对话框中的“另存为”文本框中输入模板的名称，在“站点”下拉列表中选择保存的站点。（5）单击“保存”按钮，即可将该文件保存为模板。8.1.3管理模板1．删除模板删除模板的具体操作步骤如下。（1）在“资源”面板中单击左侧的“模板”按钮。（2）单击模板的名称以选择该模板。（3）单击“资源”面板底部的“删除”按钮，然后确认删除该模板。8.1.3管理模板2．修改模板当更改模板时，DreamweaverCC2019将提示更新基于该模板的文档，具体操作步骤如下。（1）在“资源”面板中单击左侧的“模板”按钮。（2）在模板列表中执行下列操作之一。①单击要编辑的模板名称。②选择要编辑的模板，然后单击“资源”面板底部的“编辑”按钮。（3）根据需要修改模板的内容。任务实践—时尚前沿网页使用“创建模板”按钮创建模板，使用“可编辑区域”“重复区域”按钮创建可编辑区域和重复区域。效果图任务8.2库创建库项目向页面添加库项目任务实践—鲜果批发网页8.2.1创建库项目库项目可以包含文档的<body>标签中的任意元素，包括文本、表格、表单、JavaApplet、插件、ActiveX元素、导航条、图像等。库项目只是一个对网页元素的引用，源文件必须保存在指定的位置。1．基于选定内容创建库项目2．创建空白库项目8.2.2向页面添加库项目当向页面添加库项目时，将把实际内容以及对该库项目的引用一起插入文档中。此时，无须提供原项目就可以正常显示。在页面中插入库项目的具体操作步骤如下。（1）将光标置于文档窗口中的合适位置。（2）选择“窗口>资源”命令，弹出“资源”面板。单击左侧的“库”按钮，进入“库”版块。任务实践—鲜果批发网页添加库项目，使用库中注册的项目制作网页文档。效果图项目实践—电子吉他网页使用“创建模板”按钮创建模板，使用“可编辑区域”“重复区域”按钮创建可编辑区域和重复区域。效果图课后习题——婚礼策划网页添加库项目，使用库中注册的项目制作网页文档。效果图项目引入：表单的出现使网页从单向的信息传递发展到能够与用户交互，而且交互性越来越强。本项目主要讲解表单的使用方法和应用技巧。通过对这些内容的学习，学生可以利用表单输入信息或进行选择，使用单行文本域、密码文本域、单选按钮、复选框、滚动列表、文件域、按钮等表单对象，将表单相应的信息提交给服务器进行处理。使用表单可以实现网上投票、网站注册、信息发布、网上交易等功能。项目9表单掌握创建表单的方法掌握设置表单属性的方法掌握在表单中插入文本域的方法掌握在表单中插入单选按钮和复选框的方法掌握在表单中插入下拉列表、滚动列表、文件域和按钮的方法掌握HTML5表单元素的应用方法项目目标掌握“用户登录界面”的关键制作步骤掌握“传统文化网页”的关键制作步骤掌握“健康测试网页”的关键制作步骤掌握“鑫飞越航空网页”的关键制作步骤技能目标激发对表单的使用方法和应用技巧的学习兴趣通过相互合作，培养团队合作精神素养目标任务9.1表单的使用创建表单表单的属性插入文本域任务实践—用户登录界面9.1.1创建表单在文档中插入表单的具体操作步骤如下。（1）在文档窗口中，将光标置于希望插入表单的位置。（2）插入表单，文档窗口中出现一个用来指示表单区域的红色虚线轮廓。“表单”效果图9.1.2表单的属性在在文档窗口中选择表单，“属性”面板中出现图所示的表单属性。表单“属性”面板9.1.3插入文本域单行文本域通常提供单字或短语响应，如姓名或地址。若要在表单中插入单行文本域，需要先将光标置于表单轮廓内需要插入单行文本域的位置，然后插入单行文本域。任务实践—用户登录界面使用“插入”面板“HTML”选项卡中的按钮插入表格，使用“表单”选项卡中的按钮插入文本域并设置相应的属性。效果图任务9.2插入单选按钮和复选框插入单选按钮插入单选按钮组插入复选框任务实践—传统文化网页9.2.1插入单选按钮插入单选按钮有以下几种方法。①单击“插入”面板“表单”选项卡中的“单选按钮”按钮，文档窗口的表单中出现一个单选按钮。②选择“插入>表单>单选按钮”命令，文档窗口的表单中出现一个单选按钮。单选按钮的“属性”面板，用户可以根据需要设置当前单选按钮的各项属性。

“单选按钮”效果图9.2.2插入单选按钮组先将光标放在表单轮廓内需要插入单选按钮组的位置，然后打开“单选按钮组”对话框。打开“单选按钮组”对话框有以下几种方法。①单击“插入”面板“表单”选项卡中的“单选按钮组”按钮。②选择“插入>表单>单选按钮组”命令。“单选按钮组”效果图“单选按钮组”对话框9.2.3插入复选框插入复选框有以下几种方法。①单击“插入”面板“表单”选项卡中的“复选框”按钮，文档窗口的表单中出现一个复选框。②选择“插入>表单>复选框”命令，文档窗口的表单中出现一个复选框。“复选框”效果图任务实践—传统文化网页使用“表单”选项卡中的单选按钮为页面添加单选按钮。效果图任务9.3插入下拉列表、滚动列表、文件域和按钮插入下拉列表和滚动列表创建文件域插入图像按钮插入普通按钮插入提交按钮插入重置按钮任务实践—健康测试网页1.插入下拉列表2.插入滚动列表9.3.1插入下拉列表和滚动列表“下拉菜单”效果图“滚动列表”效果图9.3.2插入文件域插入文件域有以下几种方法。①将光标置于表单中，单击“插入”面板“表单”选项卡中的“文件”按钮，文档窗口的表单中出现一个文件域。②选择“插入>表单>文件”命令，文档窗口的表单中出现一个文件域。文件域的“属性”面板，用户可以根据需要设置当前文件域的各项属性。“文件域”效果图9.3.3插入图像按钮插入图像按钮有以下几种方法。①单击“插入”面板“表单”选项卡中的“图像按钮”按钮。②选择“插入>表单>图像按钮”命令。图像按钮的“属性”面板，用户可以根据需要设置当前图像按钮的各项属性。“选择图像源文件”对话框9.3.4插入普通按钮插入普通按钮有以下几种方法。①单击“插入”面板“表单”选项卡中的“按钮”按钮，文档窗口的表单中出现一个按钮。②选择“插入>表单>按钮”命令，文档窗口的表单中出现一个按钮。按钮“属性”面板9.3.5插入提交按钮插入提交按钮有以下几种方法。①单击“插入”面板“表单”选项卡中的“‘提交’按钮”按钮，文档窗口的表单中出现一个提交按钮。②选择“插入>表单>‘提交’按钮”命令，文档窗口的表单中出现一个提交按钮。“提交”按钮“属性”面板9.3.6插入“重置”按钮插入重置按钮有以下几种方法。①单击“插入”面板“表单”选项卡中的“‘重置’按钮”按钮，文档窗口的表单中出现一个重置按钮。②选择“插入>表单>‘重置’按钮”命令，文档窗口的表单中出现一个重置按钮。“重置”按钮“属性”面板任务实践—健康测试网页使用“选择”按钮插入下拉列表，使用“属性”面板设置下拉列表的属性。效果图任务9.4创建HTML5表单元素插入电子邮件文本域插入Url文本域插入Tel文本域插入搜索文本域插入数字文本域插入范围文本域插入颜色文本域插入月表单插入周表单插入日期表单插入时间表单插入日期时间表单插入日期时间（当地）表单9.4.1插入电子邮件文本域插入电子邮件文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“电子邮件”按钮，可在文档窗口中添加电子邮件文本域。②选择“插入>表单>电子邮件”命令，文档窗口的表单中出现一个电子邮件文本域。电子邮件文本域“属性”面板9.4.2插入Url文本域插入Url文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“Url”按钮，文档窗口的表单中出现一个Url文本域。②选择“插入>表单>Url”命令，文档窗口的表单中出现一个Url文本域。URL文本域“属性”面板9.4.3插入Tel文本域插入Tel文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“Tel”按钮，文档窗口的表单中出现一个Tel文本域。②选择“插入>表单>Tel”命令，文档窗口的表单中出现一个Tel文本域。Tel文本域“属性”面板9.4.4插入搜索文本域插入搜索文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“搜索”按钮，文档窗口的表单中出现一个搜索文本域。②选择“插入>表单>搜索”命令，文档窗口的表单中出现一个搜索文本域。搜索文本域“属性”面板9.4.5插入数字文本域插入数字文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“数字”按钮，文档窗口的表单中出现一个数字文本域。②选择“插入>表单>数字”命令，文档窗口的表单中出现一个数字文本域。数字文本域“属性”面板9.4.6插入范围文本域插入范围文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“范围”按钮，文档窗口的表单中出现一个范围文本域。②选择“插入>表单>范围”命令，文档窗口的表单中出现一个范围文本域。范围文本域“属性”面板9.4.7插入颜色文本域插入颜色文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“颜色”按钮，文档窗口的表单中出现一个颜色文本域。②选择“插入>表单>颜色”命令，文档窗口的表单中出现一个颜色文本域。颜色“属性”面板9.4.8插入月表单插入月表单有以下几种方法。①单击“插入”面板“表单”选项卡中的“月”按钮，文档窗口的表单中出现一个月表单。②选择“插入>表单>月”命令，文档窗口的表单中出现一个月表单。月表单“属性”面板9.4.9插入周表单插入周表单有以下几种方法。①单击“插入”面板“表单”选项卡中的“周”按钮，文档窗口的表单中出现一个周表单。②选择“插入>表单>周”命令，文档窗口的表单中出现一个周表单。周表单“属性”面板9.4.10插入日期表插入日期表单有以下几种方法。①单击“插入”面板“表单”选项卡中的“日期”按钮，文档窗口的表单中出现一个日期表单。②选择“插入>表单>日期”命令，文档窗口的表单中出现一个日期表单。日期表单“属性”面板9.4.11插入时间表单插入时间表单有以下几种方法。①单击“插入”面板“表单”选项卡中的“时间”按钮，文档窗口的表单中出现一个时间表单。②选择“插入>表单>时间”命令，文档窗口的表单中出现一个时间表单。时间表单“属性”面板9.4.12插入日期时间表单插入日期时间表单有以下几种方法。①单击“插入”面板“表单”选项卡中的“日期时间”按钮，文档窗口的表单中出现一个日期时间表单。②选择“插入>表单>日期时间”命令，文档窗口的表单中出现一个日期时间表单。日期时间表单“属性”面板9.4.13插入日期时间（当地）表单插入日期时间（当地）表单有以下几种方法。①单击“插入”面板“表单”选项卡中的“日期时间（当地）”按钮，文档窗口的表单中出现一个日期时间（当地）表单。②选择“插入>表单>日期时间（当地）”命令，文档窗口的表单中出现一个日期时间（当地）表单。日期时间（当地）表单“属性”面板任务实践—鑫飞越航空网页使用“表单”选项卡中的按钮插入日期表单。效果图项目实践——房屋评估网页使用“文本”按钮插入单行文本域，使用“图像按钮”按钮插入图像按钮，使用“单选按钮”按钮插入单选按钮。效果图课后习题—智能扫地机器人网页使用“表单”按钮插入表单，使用“Table”按钮插入表格，进行页面布局，使用“图像按钮”按钮插入图像按钮，使用“复选框”按钮插入复选框，使用“文本”按钮插入单行文本域，使用“Tel”按钮插入Tel文本域。效果图项目引入：行为是Dreamweaver预置的JavaScript程序库，每个行为包括一个动作和一个事件。任何一个动作都需要一个事件激活，两者相辅相成。动作是一段已编辑好的JavaScript代码，这些代码在特定事件被激发时执行。本项目主要讲解行为和动作的使用方法。通过对这些内容的学习，学生可以在网页中熟练使用行为和动作，使制作的网页更加生动、精彩。项目10行为了解“行为”面板掌握行为的使用方法掌握动作的使用方法和技巧项目目标掌握“品牌商城网页”的关键制作步骤技能目标培养持续学习、独立思考的能力培养实践能力和专注力素养目标任务10.1行为概述“行为”面板使用行为10.1.1“行为”面板一般使用“行为”面板为网页元素指定动作和事件。选择“窗口>行为”命令，或按Shift+F4组合键，弹出“行为”面板。“行为”面板10.1.2使用行为1．将行为附加到网页元素上10.1.2使用行为2．将行为附加到文本上任务10.2动作打开浏览器窗口转到URL设置容器的文本设置状态栏文本设置文本域文字跳转菜单跳转菜单开始任务实践—品牌商城网页10.2.1打开浏览器窗口使用“打开浏览器窗口”动作可以在一个新的窗口中打开指定的URL，还可以指定新窗口的属性、特征和名称。“打开浏览器窗口”对话框10.2.2转到URL“转到URL”动作的功能是在当前窗口或指定的框架中打开一个新页面。此动作尤其适用于通过一次单击操作更改两个或多个框架的内容。“转到URL”对话框10.2.3设置容器的文本使用“设置容器的文本”动作的具体操作步骤如下。（1）单击“插入”面板“HTML”选项卡中的“Div”按钮，在文档窗口中生成一个div容器。选中该div容器，在“属性”面板的“DivID”文本框中输入名称。（2）在文档窗口中选择一个对象，如文字、图像、按钮等，打开“行为”面板。（3）在“行为”面板中单击“添加行为”按钮，并从弹出的菜单中选择“设置文本>设置容器的文本”命令，弹出“设置容器的文本”对话框。（4）如果不是默认事件，则单击该事件，出现下拉按钮，单击该下拉按钮，弹出包含全部事件的下拉列表，可根据需要选择相应的事件。（5）按F12键浏览网页效果。10.2.4设置状态栏文本使用“设置状态栏文本”动作的具体操作步骤如下。（1）选择一个对象，如文字、图像、按钮等，打开“行为”面板。（2）在“行为”面板中单击“添加行为”按钮，并从弹出的菜单中选择“设置文本>设置状态栏文本”命令，弹出“设置状态栏文本”对话框。对话框中只有一个“消息”选项，可以设置在状态栏中显示的消息。消息要简明扼要，否则浏览器将把溢出的消息截断。在对话框中根据需要输入状态栏消息或相应的JavaScript代码，单击“确定”按钮完成设置。（3）如果不是默认事件，在“行为”面板中展开该动作的下拉列表，选择相应的事件。（4）按F12键浏览网页效果。10.2.5设置文本域文字使用“设置文本域文字”动作的具体操作步骤如下。（1）若文档中没有文本域对象，则要先创建文本域。先选择“插入>表单>文本区域”命令，在页面中创建文本区域。然后在“属性”面板的“Name”文本框中输入该文本域的名称，该名称在网页中应是唯一的。（2）选择文本域并打开“行为”面板。（3）在“行为”面板中单击“添加行为”按钮，并从弹出的菜单中选择“设置文本>设置文本域文字”命令，弹出“设置文本域文字”对话框。（4）如果不是默认事件，则单击该事件，出现下拉按钮，单击该下拉按钮，弹出包含全部事件的下拉列表，可根据需要选择相应的事件。（5）按F12键浏览网页效果。10.2.6跳转菜单跳转菜单是链接的一种形式，与真正的链接相比，跳转菜单可以节省很大的空间。跳转菜单从表单中的菜单发展而来，可通过“行为”面板中的“跳转菜单”命令进行添加。“跳转菜单”对话框10.2.7跳转菜单开始“跳转菜单开始”动作与“跳转菜单”动作关联密切。“跳转菜单开始”将“前往”按钮和跳转菜单关联起来，单击“前往”按钮将打开在跳转菜单中选择的链接。通常情况下，跳转菜单不需要“前往”按钮。但是如果跳转菜单出现在一个框架中，而跳转菜单项链接到其他框架中的页，则通常需要使用“前往”按钮，以允许访问者重新选择已在跳转菜单中选择的菜单项。“跳转菜单开始”对话框任务实践—品牌商城网页使用“交换图像”命令制作鼠标指针经过图像时图像发生变化的效果。效果图项目实践—婚戒网页使用“打开浏览器窗口”命令制作指定大小和属性的弹出窗口。效果图课后习题——爱在七夕网页使用“打开浏览器窗口”命令制作指定大小的弹出窗口。效果图项目引入：在DreamweaverCC2019中插入的网页内容及动作都会自动转换为代码。本项目主要讲解网页代码的使用方法和应用技巧。通过对这些内容的学习，学生可以直接编写或修改代码，实现Web页面的交互效果。项目11网页代码了解网页代码掌握使用标签库插入标签的方法掌握常用的HTML标签掌握调用HTML事件过程的法项目目标掌握“品质狂欢节网页”的关键制作步骤掌握“土特产网页”的关键制作步骤技能目标培养对网页代码的探索精神培养将相关知识运用到实际操作中的应用能力素养目标任务11.1网页代码概述代码提示功能使用标签库插入标签任务实践—品质狂欢节网页11.1.1代码提示功能代码提示是网站设计者在文档窗口中编写或修改代码的有效工具。只要在“代码”视图的相应标签间按<键，就会出现标签列表，在标签内按Space键，就会出现关于该标签常用属性、方法、事件的代码提示列表。“代码”视图11.1.2使用标签库插入标签在DreamweaverCC2019中，标签库里有一组特定类型的标签，它包含DreamweaverCC2019应如何设置标签格式的信息。标签库提供了DreamweaverCC2019用于代码提示、目标浏览器检查、标签选择器和其他代码功能的标签信息。使用标签库编辑器可以添加和删除标签库、标签和属性，设置标签库的属性以及编辑标签和属性。“标签库编辑器”对话框任务实践—品质狂欢节网页使用“页面属性”命令改变页面的边距和标题，使用“IFRAME”按钮制作浮动框架效果。效果图任务11.2常用的HTML标签HTML是一种超文本标记语言，HTML文件是能够被网络浏览器读取并生成网页的文件。常用的HTML标签有以下几种。6．图形标签7．链接标签8．表单标签9．滚动标签10．载入网页背景音乐标签1．文件结构标签2．排版标签3．列表标签4．表格标签5．框架任务11.3调用HTML事件过程前面已经介绍了基本的事件及其触发条件，本书讲解在代码中调用事件过程的方法。调用事件过程有3种方法，下面以在按钮上单击弹出欢迎对话框为例介绍调用事件过程的方法。1．通过名称调用事件过程2．通过for、event属性调用事件过程3．通过控件属性调用事件过程任务实践—土特产网页切换到“代码”视图，手动输入代码实现禁止滚动和禁止右击效果。效果图项目实践—活动详情页使用“页面属性”命令添加页面标题，使用“IFRAME”按钮制作浮动框架效果。效果图课后习题—机电设备网页使用“页面属性”命令添加页面标题，使用“IFRAME”按钮制作浮动框架效果。效果图项目引入：文化艺术网站是指专业的文化和艺术类网站，其利用一张张网页弘扬我国文化和艺术，满足群众日益增长的文化需求，促进社会各界的文化和艺术交流。本项目以两个类型的文化艺术网页为例，讲解文化艺术网页的设计方法和制作技巧。项目12文化艺术网页掌握文化艺术网页的设计流程掌握文化艺术网页的布局思路掌握文化艺术网页的制作方法项目目标掌握“戏曲艺术网页”的关键制作步骤掌握“国画艺术网页”的关键制作步骤技能目标激发对艺术的热情传承传统文化，推动文化艺术的繁荣素养目标任务12.1文化艺术网页概述随着人们对精神生活的重视和审美品位的不断提升，文化艺术逐渐成为提升生活质量和情感表达的重要载体。文化艺术网页汇集了丰富多彩的内容，涵盖绘画、雕塑、戏剧、音乐、舞蹈、手工艺等多种艺术形式，既有传统文化的传承与保护，也有当代艺术的创新与突破。通过详细的艺术作品介绍、专题文章、视频展示等内容，用户可以深入了解不同艺术流派的历史渊源及其发展脉络。

任务12.2戏曲艺术网页任务分析任务效果任务制作

12.2.1任务分析京剧是我国传统戏曲艺术的精华，集音乐、舞蹈、文学、武术于一体。本任务是设计制作戏曲艺术网页，要求通过设计详细地展现京剧历史、行当、经典剧目，并且可以播放名家名段的视频等。通过这个平台，访问者不仅能够深入了解和欣赏京剧艺术，还能促进京剧文化的传播与传承，激发更多人对这门传统艺术的兴趣。在网页设计过程中，将背景设计成干净整洁的浅色背景并搭配毛笔笔触，体现出戏曲的传承和精神。导航条放在页面顶部，便于访问者对网页进行浏览。中间部分使用独特的京剧人物图像，使页面更加生动直观，通过图像和文字的设计编排，展现戏曲风格和文化特色。右侧和下方设计了最新动态、戏曲新闻和相关知识栏目。整个页面充满了中国传统戏曲文化的气息。

12.2.2任务效果本任务使用“属性”面板设置单元格的宽度、高度和文字颜色，制作导航条；使用“Image”按钮为页面添加图像；使用“CSS设计器”面板设置文字行距和文字大小。效果图

12.2.3任务制作1．制作导航条和焦点图区域2．制作内容区域3．制作底部区域

任务12.3国画艺术网页任务分析任务设计任务制作

12.3.1任务分析国画是我国传统绘画的代表，具有悠久的历史和独特的艺术风格。本任务是设计制作国画艺术网页，旨在展示国画的魅力与多样性，网页内容包含国画历史、技法、名家作品赏析以及绘画教学资源。访问者可以通过该网页深入了解国画的文化内涵、传统技艺和当代发展，欣赏不同风格和流派的优秀作品，并有机会参与在线艺术交流和学习。该网页能激发更多人对国画艺术的兴趣，为中华传统艺术的发展注入新的活力。在网页设计过程中，将背景设计为传统水墨画的黑白颜色形式；通过对国画信息的展示充分表现国画的艺术美感；整个网页图像丰富多样，充满特色。

12.3.2任务设计本任务使用“Image”按钮插入网页logo，使用“页面属性”命令改变页面文字的大小、颜色和边距，使用“CSS设计器”面板设置页面背景图像和文字行距等，使用“属性”面板设置单元格的宽和高。效果图

12.3.3任务制作1．设置背景图像、制作导航条和焦点图区域2．制作国画名家介绍区域3．制作名作欣赏区域和底部效果

项目实践—书法艺术网页效果图使用“页面属性”命令设置页面字体、大小\颜色和页边距，使用“属性”面板设置单元格背景颜色、宽度和高度，使用“CSS设计器”面板设置文字的颜色、大小和行距。

课后习题—诗词艺术网页效果图使用“页面属性”命令设置页面字体、大小、颜色和页边距，使用“CSS设计器”面板设置单元格背景图像，以及文字的颜色、大小和行距，使用“属性”面板设置单元格的宽度和高度。项目引入：随着旅游行业蓬勃发展，旅游网站受到广泛关注。根据旅游公司的市场定位和产品特点，旅游休闲网页表现出了不同的类型和特色。本项目以两个旅游休闲网页为例，讲解旅游休闲网页的设计方法和制作技巧。项目13旅游休闲网页了解旅游休闲网页的功能掌握旅游休闲网页的设计流程掌握旅游休闲网页的布局掌握旅游休闲网页的制作方法项目目标掌握“滑雪运动网页”的关键制作步骤掌握“户外运动网页”的关键制作步骤技能目标培养包容与开放的心态培养勇于挑战的精神培养环保意识素养目标任务13.1旅游休闲网页概述随着人们生活水平的日益提高，旅游已成为人们休闲、娱乐的首选方式之一。一波又一波的旅游热潮使旅游行业蓬勃发展，而通过互联网进行宣传也成为旅游行业的一项重要举措。因此，越来越多的旅游网站建立起来，丰富多彩的网页内容不仅为旅游者提供了了解外界及旅行社情况的窗口，而且为旅行社提供了网上报名、网上预订的信息。良好的交流环境使得旅游行业满足更多的用户需求成为可能，也为用户寻找更好的旅游产品提供了良好的契机。

任务13.2滑雪运动网页任务分析任务效果任务制作

13.2.1任务分析雪上运动浪漫而又刺激。不分年龄，男女老少皆可在雪场上尽情享受滑雪的乐趣，感受到这项运动带来的无穷快乐。本任务是为滑雪场设计网页，目的是突出滑雪的刺激和乐趣，吸引更多消费者。在网页制作过程中，将网页的背景设计为美丽的雪山，充满激情的运动员在滑雪，勾起人对滑雪运动的无限向往，网页的色彩搭配清爽怡人，整体色调符合滑雪运动的特色，顶部