Dreamweaver CS5网页制作案例教程

中文版DreamweaverCS5

网页制作案例教程项目一网页制作基础任务一认识网站和网页任务二网站开发基础任务三初识DreamweaverCS5任务四站点基本操作任务五网页文档基本操作任务一认识网站和网页任务说明本任务中，我们将简单了解网页和网站、网页的构成元素以及网页的本质。预备知识一、网页和网站网页就是我们上网时在浏览器中打开的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。另外，打开某个网站时显示的第一个网页被称为网站的主页（或首页）。二、网页的构成元素我们可以将网页中的元素按功能分为站标、导航条、广告条、标题栏和按钮等。站标导航条广告条标题栏按钮三、网页的本质一般情况下，网页中除了包含网页文件（扩展名为.html、.asp等）外，还有图像文件（扩展名为.jpg、.gif等）、Flash动画文件（扩展名为.swf）、脚本文件（扩展名为.js）、样式文件（扩展名为.css）以及视频文件（扩展名为.avi、.flv等）等。任务实施——指出新浪网主页的构成元素在了解了网页的构成元素后，接下来通过辨识“新浪网”网站首页的构成元素，来进一步加强和巩固前面的学习。站标导航条广告条标题栏按钮任务二网站开发基础任务说明在学习制作网页之前首先了解一下与网站开发相关的基础知识，并从整体上认识一下其制作流程，对后面的学习将是非常有利的。下面就来了解一下与网站开发密切相关的基础知识。预备知识一、网站管理与网页制作相关软件Dreamweaver是目前最常用的网站管理和网页制作软件，其功能全面、操作灵活、专业性强。在制作网页时，除Dreamweaver外还需要用到Fireworks、Flash、Photoshop等辅助软件。二、网页制作基础——XHTML语言XHTML是ExtensibleHyperTextMarkupLanguage(可扩展超文本标记语言)的英文缩写，它的前身是HTML。由于HTML代码繁琐，结构松散，所以推出了XHTML。也可以说，XHTML是HTML的一个升级版本。三、IP地址、域名和网址（1）IP地址互联网上连接了不计其数的服务器和客户机，每一个主机在互联网上都有一个唯一的地址，我们称这个地址为IP地址（InternetProtocolAddress）。IP地址由4个小于256的数字组成，数字之间用点间隔。例如，“26”就是一个IP地址。（2）域名由于IP地址在使用过程中难于记忆和书写，人们又开发了一种与IP地址对应的字符用以表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需要在浏览器地址栏中输入搜狐网站的域名“”，然后按回车键就可以访问搜狐网站了。（3）网址网址又叫URL，英文全称是“UniformResourceLocator”，即统一资源定位符。它是网络上通用的一种地址格式，用于标识网页文件在网络中的位置。一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。任务实施——网站建设基本流程网站建设流程是从企业计划建设网站到网站建设完成的一套规范化运作。收集网站建设需求及素材。制作网站策划书。网页美术设计。美术与程序整合。测试和发布网站。推广和维护网站。任务三初识DreamweaverCS5任务说明DreamweaverCS5是一款集网页制作和网站管理于一身，所见即所得的网页编辑软件。下面我们首先启动该软件，然后熟悉一下其工作界面上的各组成元素，最后在任务实施中学习调整DreamweaverCS5工作界面的基本操作。预备知识一、启动DreamweaverCS5安装DreamweaverCS5后，单击桌面左下角的“开始”按钮，选择“所有程序”>“AdobeDreamweaverCS5”，就可以启动DreamweaverCS5了。二、DreamweaverCS5界面元素简介DreamweaverCS5的工作界面由应用程序栏、文档标签栏、文档工具栏、文档窗口、标签选择器、状态栏、属性检查器和面板组等组成。1．应用程序栏应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器（可在其下拉列表中选择不同的工作区模式）、“CSLive”按钮和程序窗口控制按钮

。2．文档标签栏文档标签栏位于应用程序栏下方，左侧显示当前打开的所有网页文档的标签（标签上显示相应网页文档的名称）及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径以及向下还原按钮

；下方显示当前文档中包含的文档以及链接文档。3．文档工具栏文档工具栏位于文档标签栏的下方，包括各种可对文档进行操作的按钮。4．状态栏状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。5．属性检查器使用“属性检查器”可以检查和设置当前选定页面元素（如文本和插入对象）的最常用属性。“属性检查器”中的内容会根据选定元素的不同而变化。6．面板组默认状态下，面板组位于文档窗口右侧。面板组中包含各种类型的面板，Dreamweaver中的大部分操作都需要在面板中实现。其中最常用的有“插入”面板、“文件”面板和“CSS样式”面板。任务实施——调整DreamweaverCS5工作界面使用Dreamweaver制作或编辑网页时，经常需要打开、关闭某个面板，或对其工作界面进行各种调整。本节我们就来学习一下调整DreamweaverCS5工作界面的基本操作（具体操作见视频1-3）。任务四站点基本操作任务说明一般在Dreamweaver中制作网页之前，最好先定义站点，然后在站点中创建网页。本任务主要学习在DreamweaverCS5中定义和管理站点的方法。预备知识一、在DreamweaverCS5中定义站点在Dreamweaver中定义站点的目的是把本地磁盘中的站点文件夹同Dreamweaver建立一定的关联，从而方便用户使用Dreamweaver管理站点和编辑站点中的网页文档，以及上传或下载站点内容等。二、在DreamweaverCS5中管理站点定义站点后，如果需要修改站点属性、复制或删除站点等，可执行管理站点的操作。任务实施—在DreamweaverCS5中定义站点“欧妮雅”在本书的大部分“任务实施”中，我们都将制作“欧妮雅”化妆品网站的相关页面，下面我们先从定义该站点开始（具体操作见视频1-4）。任务五网页文档基本操作任务说明定义好站点后，便可以在站点中创建网页了。本任务首先学习网页文档和文件夹的命名规则，然后依次学习新建、保存、打开、预览和关闭网页文档的方法，最后学习利用“文件”面板管理站点中网页文档和文件夹的方法。预备知识一、网页文档和文件夹命名规则首页文档一般命名为index.html、index.asp或者index.php。不要用中文命名网页文档和文件夹。网页文档名中不要使用大写英文字母，最好全部使用小写英文字母。运算符符号不能用在文件名的开头。比较长的网页文档名可以使用下划线“_”来隔开多个单词或关键字。在大型网站中，分支页面的文件应存放在单独的文件夹中，每个分支中的图像也应该存放在各自单独的文件夹中，存放网页图像的文件夹一般命名为“images”或者“img”。在动态网站中，用来存放数据库的文件夹一般命名为“data”或者“database”。二、新建和保存网页文档在DreamweaverCS5中可以创建两种类型的网页文档，一种是直接创建的空白网页文档，另一种是通过DreamweaverCS5内置的模板创建具有一定内容和样式的网页文档。三、打开、预览和关闭网页文档若要对已有的文档进行编辑，就需要在Dreamweaver中打开该文档。另外，在Dreamweaver中打开网页文档并执行相应操作后，如果想查看它在浏览器中的效果，可执行预览操作。四、利用“文件”面板管理站点文件和文件夹一般在定义站点后，都会利用“文件”面板来创建、重命名或打开站点中的网页文档和文件夹。任务实施——在站点“欧妮雅”中创建网页在学习了网页文档的基本操作后，本节通过在前面定义的站点“欧妮雅”中创建并保存网页，来进一步巩固前面所学（具体操作见视频1-5）。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业WENJINGKETANG课后作业请同学们扫一扫进入班级做作业引用配套微课，学生线上看，系统自动记成绩；大作业一键收发，在线判分扫码申请免费开通→线上建课WENJINGKETANG扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目二应用表格布局网页任务一创建和选择表格任务二设置表格和单元格属性任务三表格的高级应用所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具任务一创建和选择表格任务说明本任务中，我们将学习创建表格，以及选择表格和单元格的操作。此外，还将应用所学知识为“欧妮雅”网站主页构建主体结构。预备知识一、创建表格表格（Table）是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在HTML语言中以<tr>标签开始，</tr>标签结束），垂直的多个单元格称为列（以<td>标签开始，</td>标签结束），行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。二、选择表格和单元格1．选择表格将鼠标光标移至单元格边框线上，当鼠标光标变为或形状时单击鼠标左键。当表格外框显示为黑色粗实线时，就表示该表格被选中了。将鼠标光标移至表格外框线上，当鼠标光标变为形状时，单击鼠标左键即可将表格选中。在表格内部任意单元格中单击鼠标左键，然后在标签选择器中单击对应的“<table>”标签，该表格便处于选中状态。将插入点置于表格的任意单元格中，表格上方或下方将显示绿线标志，单击最上方或最下方标有表格宽度的绿线中的，在弹出的下拉列表中选择“选择表格”命令。2．选择行或列要选择某行或某列，可将光标置于该行左侧或该列顶部，当光标形状变为黑色箭头或时单击鼠标左键。3．选择单元格要选择某个单元格，可首先将插入点置于该单元格内，然后按【Ctrl＋A】组合键或单击“标签选择器”中对应的“<td>”标签。要选择连续的单元格区域，应首先在要选择的单元格区域的左上角单元格中单击，然后按住鼠标左键向右下角单元格方向拖动鼠标，最后松开鼠标左键。如果希望选择一组不相邻的单元格，可按住【Ctrl】键单击选择各单元格。任务实施——为“欧妮雅”网站主页构建主体结构在学习了表格的创建以及表格和单元格的选择方法后，接下来通过构建“欧妮雅”网站主页的主体结构，来学习表格在网页布局中的应用（具体操作见视频2-1）。任务二设置表格和单元格属性任务说明下面我们将学习设置表格和单元格属性的方法。此外，还将应用所学知识完善“欧妮雅”网站的主页布局。预备知识一、设置表格属性选中表格后，可利用属性检查器查看或修改表格的行、列、宽，以及填充、间距、对齐、边框等属性。二、设置单元格属性在表格的某个单元格中单击，属性检查器中将显示水平、垂直、宽、高等单元格属性，此时可通过属性检查器设置单元格属性。任务实施——完善“欧妮雅”网站主页的布局在学习了表格和单元格属性的设置方法后，接下来通过完善“欧妮雅”网站主页的布局，来进一步加强和巩固前面的学习（具体操作见视频2-1）。任务三表格的高级应用任务说明在实际的网页制作中，经常需要拆分或合并单元格以及插入、删除行和列，本任务就来学习这些知识。此外，还将应用所学知识为“欧妮雅”网站子页构建布局。预备知识一、拆分与合并单元格在网页制作中，经常会用到一些特殊结构的表格，此时就需要拆分或合并单元格。1．拆分单元格拆分单元格就是将一个单元格拆分成两个或多个单元格。2．合并单元格所谓合并单元格，就是将相邻的两个或多个单元格合并成一个单元格。拖动鼠标选中要合并的连续单元格，然后单击属性检查器上的“合并所选单元格，使用跨度”按钮

，则2个单元格合并为1个单元格。二、在表格中添加或删除行与列在使用表格组织大量信息时，往往需要在创建好的表格中添加或删除行与列，以增加或减少记录。任务实施——为“欧妮雅”网站子页构建布局在学习了拆分与合并单元格，以及在表格中添加或删除行与列的方法后，下面通过构建“欧妮雅”网站子页的布局来进一步巩固前面的学习（具体操作见视频2-3）。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业WENJINGKETANG扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目三设置网页内容任务一网页基本设置任务二文本输入与编辑任务三应用图像任务四应用动画和多媒体所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具任务一网页基本设置任务说明新建网页后，一般需要对页面进行一些简单的设置，主要包括头信息和页面属性，下面就来学习这些知识。预备知识一、设置文档头信息头信息包括网页关键字、网页说明等。在使用Google、Baidu、Yahoo等搜索引擎搜索网页时，不是检索网页的所有内容，而是只检索网页的关键字。如果希望自己的网页能够被搜索引擎检索到，最好把关键字设置为人们经常使用的词语。二、设置文档页面属性通过设置页面属性，可以对网页的外观、标题及超链接等属性进行设置。要设置页面属性，可在不选择网页文档中任何对象的前提下，单击“属性检查器”上的“页面属性”按钮，或者选择“修改”菜单下的“页面属性”命令，或按【Ctrl+J】组合键，打开“页面属性”对话框。任务实施——为“欧妮雅”网站主页设置基本信息在学习了头信息和页面属性的设置方法后，下面通过为“欧妮雅”网站主页设置基本信息，来进一步巩固前面所学（具体操作见视频3-1）。任务二文本输入与编辑任务说明文本是网页最基本的组成元素，它能将各种信息有效地传达给浏览者，通常内容丰富的网页都有大量的文本。在Dreamweaver中可以直接输入文本，也可以从其他文档中复制文本，还可以插入水平线和特殊字符等。下面就来学习在网页中输入与编辑文本的相关知识。预备知识一、输入文本在Dreamweaver中输入文本的方法非常简单，只要将插入点定位在网页的某个位置（如某个表格单元格内），然后选择输入法输入文本就可以了。对于大量的外部文本，可利用剪贴板将其拷贝至网页文档中。二、设置文本格式文本属性检查器包括“HTML”和“CSS”两种类型，用户可使用这两种类型中的任一种来设置文本格式。应用HTML类型时，Dreamweaver会将文本格式属性添加到页面正文的HTML代码中。应用CSS类型时，Dreamweaver会将属性写入文档头或单独的样式表中。1．应用HTML类型如果属性检查器没有打开，请选择“窗口”>“属性”菜单将其打开。选择要设置格式的文本或将插入点置于要设置属性的段落中，属性检查器中默认将显示文本的HTML类型属性。2．应用CSS类型单击属性检查器左侧的CSS按钮，可显示文本的CSS类型属性。三、插入水平线和特殊字符1．插入水平线定位插入点后，选择“插入”>“HTML”>“水平线”菜单，即可插入水平线。此外，单击“插入”面板“常用”类别中的“水平线”按钮

，同样可插入水平线。2．插入特殊字符如要插入版权符号，可在定位插入点后，选择“插入”>“HTML”>“特殊字符”>“版权”菜单，插入版权符号。如果在“特殊字符”下级菜单中没有找到需要的字符，可以通过选择该菜单中最下面的“其他字符”命令，打开“插入其他字符”对话框。任务实施一、为“欧妮雅”网站主页设置文本内容下面通过为“欧妮雅”网站主页设置文本内容，来进一步巩固和练习在网页中输入和设置文本的方法（具体操作见视频3-2-1）。二、为“欧妮雅”网站子页设置文本内容下面通过为“欧妮雅”网站子页（sub1.html）设置文本内容，来进一步巩固在网页中输入和设置文本的方法（具体操作见视频3-2-2）。任务三应用图像任务说明只有文字的网页会显得非常单调，而且容易引起视觉疲劳。为增加网页的可看性，我们可以适当地在网页中添加一些图像。下面就来学习图像在网页中的应用。预备知识一、插入与编辑图像在网页中插入图像时，最好能保证网页和要插入的图像均位于当前站点中，否则很容易出现网页发布后看不到图像的情况。二、制作鼠标经过图像要制作鼠标经过图像，需要用到两张大小相同，而内容不同的图像。其中一张作为原始图像，在页面打开的时候就显示；另一张则作为鼠标经过图像，在鼠标滑过的时候替换原始图像显示出来。下面我们来看鼠标经过图像的制作方法。任务实施一、为“欧妮雅”网站主页设置图像内容下面通过为“欧妮雅”网站主页设置图像内容，来进一步巩固和练习在网页中插入与编辑图像的操作（具体操作见视频3-3-1）。二、为“欧妮雅”网站子页设置图像内容下面通过为“欧妮雅”网站子页设置图像内容，来进一步巩固和练习在网页中插入与编辑图像的方法（具体操作见视频3-3-2）。任务四应用动画和多媒体任务说明通过前面的学习，相信读者已经能够制作出简单的网页；不过细心的读者可能已经发现，前面介绍的网页中只有一些静止的图片和文字，显得过于单调。下面就来学习如何为网页添加动画和多媒体元素，以使网页更加丰富多彩。预备知识一、插入Flash动画学过了图像的插入，Flash动画的插入就是小菜一碟了，下面我们来看具体操作。二、插入音频文件音乐不仅能陶冶人的情操，也能给人美的享受，如果在网页中加一段美妙的音乐，那一定能给人不小的震撼。任务实施——为“欧妮雅”网站主页设置动画内容在学习了动画和多媒体的应用后，下面通过为“欧妮雅”网站主页设置动画内容，来进一步巩固前面所学（具体操作见视频3-4）。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业WENJINGKETANG扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目四应用超链接和行为任务一设置超链接（上）任务二设置超链接（下）任务三设置行为所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具任务一设置超链接（上）任务说明超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点。网站是由一个个网页组成的，而连接这些网页的桥梁就是超链接。超链接包括很多种，最常用的是常规超链接，另外还有热点链接、电子邮件链接等。预备知识一、设置常规超链接常规超链接包括内部超链接和外部超链接，内部超链接是指目标端点位于站点内部的超链接；外部超链接是指目标端点位于其他网站中，单击它可跳转到其他网站的超链接。1．内部超链接内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以在属性检查器上的“链接”编辑框中直接输入要链接对象的相对路径；也可以通过单击“链接”编辑框右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择链接对象。2．外部超链接外部超链接的设置一般是在选中对象后，在属性检查器上的“链接”编辑框中直接输入要链接网页的网址。二、设置热点链接通过“设置常规超链接”的学习，相信读者已经学会了为图片设置单个链接的方法；但是，很多时候都需要为一张图片的不同部位设置不同的链接。那么，如何为一张图片设置多个链接呢？这就用到了我们本节要讲的热点链接。热点链接又叫图像映射，就是使用热点工具将一张图片划分成多个区域，并为这些区域分别设置链接。三、设置电子邮件链接使用电子邮件链接可以非常方便地给网站管理者发送邮件。很多网页下方的信息区都留有电子邮件地址，单击该地址可打开“OutlookExpress”的“新邮件”窗口，这就是电子邮件链接。任务实施——为“欧妮雅”网站主页设置超链接在学习了常用超链接的设置方法后，下面通过为“欧妮雅”网站主页设置超链接，来进一步巩固前面所学（具体操作见视频4-1）。任务二设置超链接（下）任务说明除任务一中介绍的几种最常见的超链接外，我们还可以为网页设置图片链接、下载链接和命名锚记链接，下面分别介绍。预备知识一、设置图片链接和下载链接所谓图片链接，就是在单击网页中的某个小图片时在新窗口中打开一幅大图片；下载链接是指单击某个超链接时会打开一个“文件下载”对话框（或自动启动下载工具），通过在该对话框中单击“打开”或“保存”按钮，可以打开或下载文件。二、设置命名锚记链接命名锚记链接主要用于比较长的网页。其源端点和目标端点位于同一个网页中，单击它可以从源端点跳到目标端点。要设置命名锚记链接，应首先插入命名锚记（相当于目标端点），然后创建跳转到该命名锚记的链接。任务实施——为“欧妮雅”网站子页设置链接下面将在已经制作好内容的文档“sub2.html”的基础上，为网页设置链接（具体操作见视频4-2）。任务三设置行为任务说明使用行为可以制作浮动的广告，状态栏文本，以及可以收缩、放大的图像等效果。下面就来学习行为的应用。预备知识一、认识行为要应用行为，首先需要打开“行为”面板。在DreamweaverCS5中，选择“窗口”>“行为”菜单（或按【Shift+F4】组合键）可打开“行为”面板。二、应用行为行为可以应用于HTML标签、图像、链接文本等对象。如果要对某个对象应用行为，需要先选中该对象，然后单击“行为”面板上的“添加行为”按钮

，在打开的行为列表中选择动作，并在打开的窗口中设置效果，最后指定设定的动作在什么情况下发生，也就是事件。三、编辑行为1．修改行为修改行为的方法非常简单，只需双击“行为”面板中相应的动作名称，比如要编辑前面的“设置状态栏文本”行为，只要双击“事件”右侧对应的动作名称“设置状态栏文本”，就会重新打开“设置状态栏文本”对话框，修改后关闭对话框即可。2．删除行为如要删除某行为，只需选中该行为，然后单击“行为”面板上方的“删除事件”按钮

或直接按【Delete】键。也可用鼠标右键单击行为，在弹出的快捷菜单中选择“删除行为”命令。3．获取更多行为单击“行为”面板上的“添加行为”按钮

，在弹出的菜单中选择“获取更多行为”命令，将打开Adobe公司的官方网站，该网站提供网页行为的下载。任务实施——为“欧妮雅”网站主页设置行为在学习了设置行为的方法后，下面将应用行为为欧妮雅网站首页“index.html”添加伴随窗口（具体操作见视频4-3）。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业WENJINGKETANG扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目五应用CSS样式任务一样式表的基本应用任务二样式表的高级应用所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具任务一样式表的基本应用任务说明使用CSS样式表可以为网页中的行、标题或单元格等标签定义样式，也可以为链接文本定义样式，还可以定义可应用于任何元素的样式，从而快速设置或更新网页的外观。在DreamweaverCS5中，我们可以使用两种方式创建CSS样式表，一种是利用“CSS样式”面板，在可视化的操作环境中进行创建；一种是在“代码”视图中直接编写相关的代码。本书我们主要学习利用“CSS样式”面板创建CSS样式表的操作。预备知识一、“CSS样式”面板使用“CSS样式”面板可以非常方便地新建、删除、编辑和应用样式，以及附加外部样式表等。选择“窗口”>“CSS样式”菜单，可打开“CSS样式”面板。二、创建CSS样式下面我们学习创建CSS样式的方法，并在创建过程中了解CSS样式的类型及存在方式。任务实施一、为“欧妮雅”网站主页设置标签样式下面为“欧妮雅”网站主页创建一个“<body>”标签样式，并设置该样式的类型和方框属性（具体操作见视频5-1-1）。二、为“欧妮雅”网站主页设置类样式（上）下面创建一个类样式，并设置该样式的类型和列表属性，然后将创建的样式应用于“欧妮雅”网站主页中的列表文本（具体操作见视频5-1-2）

。三、为“欧妮雅”网站主页设置类样式（下）下面创建一个类样式，并设置该样式的边框属性，然后将创建的样式应用于“欧妮雅”网站主页中的相应单元格中，从而为各栏目制作分界线（具体操作见视频5-1-3）。四、为“欧妮雅”网站主页设置复合样式（上）默认情况下，网页中的链接文本为蓝色且有下划线，下面为“欧妮雅”网站主页创建复合样式，并设置样式的“类型”属性，使该样式的链接文本在默认状态下为白色，而在鼠标经过时为浅紫色（具体操作见视频5-1-4）。五、为“欧妮雅”网站主页设置复合样式（下）为了将“欧妮雅”网站主页文本右侧的日期与文本区分开来，可为日期设置不同于文本的超链接样式。下面通过为日期设置超链接样式，来看看如何在同一个网页中设置两种超链接样式（具体操作见视频5-1-5）。任务二样式表的高级应用任务说明任务一学习了样式表的基本应用，下面学习将定义好的样式文件链接至网站中其他网页的方法，以及CSS滤镜的应用。预备知识一、附加外部样式一般在制作网站时，为保证同一网站中所有网页风格的一致性，可以将共用的样式保存在外部样式表文件中，然后将其链接至各个网页文档。这不仅大大减少了工作量，还方便了后期的维护和更新。下面我们就来学习如何将外部样式表文件链接至网页文档中。二、CSS滤镜简介应用CSS滤镜可为图像设置渐变、透明、阴影等效果。在“***的CSS规则定义”对话框左侧的“分类”列表中选择“扩展”选项，右侧的“过滤器（Filter）”下拉列表中提供了多种滤镜效果。任务实施——为“欧妮雅”网站子页附加外部样式在学习了附加外部样式的方法后，就可以非常方便地为网站中的其他页面设置样式了。下面通过为“欧妮雅”网站子页设置样式，来巩固前面所学（具体操作见视频5-2）。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业WENJINGKETANG扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目六应用Div+CSS布局网页任务一Div+CSS布局基础任务二Div+CSS布局中的定位方式任务三应用Spry布局对象所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具任务一Div+CSS布局基础任务说明下面我们首先在“任务实施”中讲解Div+CSS布局的基础知识，如Web标准和Div的概念，以及创建和选择Div的方法等，然后在“任务实施”中通过构建“伊韵”网站主页结构来巩固所学知识。预备知识一、Web标准概述Web标准可从结构、表现和行为三方面来衡量。这些标准大部分由W3C（万维网联盟，WorldWideWebConsortium）起草和发布，也有一些是其他标准组织制订的。可以说符合Web标准的网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。二、Div简介Div相当于一个容器，由起始标签<Div>和结束标签</Div>之间的所有内容构成。在它里面可以内嵌表格（table）、文本（text）等HTML代码。其中所包含的元素特性由Div标签的属性来控制，或使用样式表块来控制。三、创建DivDiv标签与表格、图像等网页对象的插入方法类似，所不同的是，在插入Div标签的同时可以为其设置样式。四、选择Div要对Div执行某项操作，首先需要将其选中。在DreamweaverCS5中选择Div的方法有两种。将鼠标光标移至Div周围的任意边框上，当边框显示为红色实线时单击鼠标左键可将其选中。将插入点置于Div中，然后单击“标签选择器”中相应的<div>标签，同样可将其选中。任务实施——构建“伊韵”网站主页结构在学习了Div的创建方法后，下面通过构建“伊韵”网站主页的结构，来进一步巩固前面所学知识（具体操作见视频6-1）。任务二Div+CSS布局中的定位方式任务说明要熟练应用Div+CSS布局网页，必须掌握在页面中定位网页元素的方法。在使用Div+CSS方式布局网页时，我们可以使用多种方式定义Div或其他元素框在页面中的位置，其中最常用的有相对定位、绝对定位，以及浮动定位。预备知识一、相对定位与绝对定位在CSS中用于元素定位的属性是“position”，它主要通过两个属性值来进行定位，一个是“relative”，表示相对定位，一个是“absolute”，表示绝对定位，下面分别说明。1．相对定位相对定位是指通过设置垂直或水平位置，让Div或其他元素框“相对于”设置定位属性之前的位置进行移动，其书写格式为：“position:relative;”，如以下代码。#lay{position:relative;top:80px;left:50px;}2．绝对定位绝对定位是指以距元素最近的已定位的父级元素为参照来进行定位，如果元素没有已定位的父级元素，那么它的位置将相对于最初的包含块（如页面左上角）进行定位。绝对定位的书写格式为：“position:absolute;”，如以下代码：#lay{position:absolute;top:80px;left:50px;}3．在Dreamweaver中定位元素在新建样式或编辑样式时打开CSS规则定义对话框后，切换到“定位”属性设置界面，在“Position”（位置）属性下拉列表中选择“relative”（相对定位）或“absolute”（绝对定位）属性值，然后在“Placement”设置区设置Top、Right、Bottom或Left值即可（通常设置Top和Left值）。二、浮动定位在CSS中，我们可以将任何元素都设为浮动，使元素向左或向右移动，直到它的边缘碰到包含框或另一个浮动元素的边缘为止。如果浮动更多的元素，它们将一个挨一个排列，排列不下的元素将转到下一行继续排列。任务实施——为“伊韵”网站主页设置样式在学习了Div+CSS布局中的网页元素定位方式后，下面通过为“伊韵”网站主页设置样式（也就是构建表现形式），来进一步巩固前面所学（具体操作见视频6-2）。任务三应用Spry布局对象任务说明Spry是Dreamweaver内置的代码块，使用它可以在网页中添加Spry菜单栏、Spry选项卡式面板、Spry折叠式和Spry可折叠面板，本任务将分别介绍。预备知识一、Spry菜单栏Spry菜单栏是一系列导航菜单按钮，当光标指向某个按钮时可以弹出项目的子菜单。使用Spry菜单栏可以在有限的空间内显示大量的导航信息。二、Spry选项卡式面板Spry选项卡式面板是一系列可以在收缩的空间内存储内容的面板。浏览者可以单击相应面板标签在各个面板之间切换。定位插入点后，单击“插入”面板“布局”类别中的“Spry选项卡式面板”即可将其插入。三、Spry折叠式Spry折叠式是一系列可以在收缩的空间内存储内容的面板窗口。浏览者可以通过单击面板标题来显示或隐藏面板内容。定位插入点后，单击“插入”面板“布局”类别中的“Spry折叠式”即可将其插入。四、Spry可折叠面板Spry可折叠面板是一个可以在收缩的空间内存储内容的面板，用户可通过单击面板标签来显示或隐藏面板内容。定位插入点后，单击“插入”面板“布局”类别中的“Spry可折叠面板”即可将其插入。任务实施——为“伊韵”网站主页设置特殊效果下面应用“Spry折叠式”为“伊韵”网站主页设置特殊效果，来进一步巩固前面所学（具体操作见视频6-3）。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业WENJINGKETANG扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目七应用框架布局网页任务一框架网页的创建任务二框架和框架集基本操作所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具任务一框架网页的创建任务说明下面我们先认识一下框架网页，然后学习创建框架网页，以及保存框架和框架集的方法。预备知识一、认识框架网页框架网页主要包括两部分，一是框架，二是框架集。框架记录具体的网页内容，每个框架对应一个网页；框架集是特殊的HTML文件，它定义几个框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的页面URL。二、创建框架网页1．使用“新建文档”对话框使用“新建文档”对话框创建框架网页的方法同创建普通网页的方法相似。2．使用“插入”面板使用“插入”面板可以在网页中插入Dreamweaver预定义的框架集。3．手动创建使用前面两种方法创建的都是Dreamweaver预定义的框架集，当这些框架集无法满足用户需求时，可以在其基础上手动分割创建框架集。三、保存框架和框架集一个框架网页中至少包含一个框架集和多个框架，而每个框架又对应一个网页，用户在编辑好这些框架和框架集后，需要将其保存。1．保存框架保存框架实际上就是保存框架所对应的网页文档。2．保存框架集保存框架集和保存框架的方法差不多。任务实施——在“草根视频”网站中创建一个框架网页下面通过在“草根视频”站点中创建一个框架网页，来进一步巩固前面所学知识（具体操作见视频7-1）。任务二框架和框架集基本操作任务说明框架和框架集的基本操作主要包括选择框架和框架集以及设置框架和框架集属性，下面分别介绍。预备知识一、选择框架和框架集选择框架集的方法有两种，一种是在文档编辑窗口中单击框架集上的任意边框；还有一种是在“框架”面板中选择。要选择框架就只能在“框架”面板中操作。二、设置框架和框架集属性1．设置框架属性选择框架后，属性检查器如下图所示。2．设置框架集属性选择框架集后，属性检查器如下图所示。此时属性检查器中各设置项的意义同选中框架时基本相同，不同的是在“行”或“列”文本框（图中显示“行”，该项是随所选框架集的变化而变化的）中可设置框架的行或列的宽度，在“单位”下拉列表框中可选择宽度的单位。任务实施在学习了框架和框架集的基本操作后，下面通过为“草根视频”站点主页“index.html”设置内容，并为其设置链接制作其他网页，来进一步学习框架和框架集的基本操作（具体操作见视频7-2-1和7-2-2）。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业WENJINGKETANG扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目八应用模板和库任务一创建和编辑模板任务二应用和管理模板任务三创建库项目任务四应用和编辑库项目所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具任务一创建和编辑模板任务说明使用模板可以高效率地制作同一网站中结构相同的网页。本任务主要学习创建和编辑模板的基本操作。预备知识一、创建模板在Dreamweaver中创建模板文档的方法有两种。一种是新建空白模板文档，然后像制作普通网页一样设置模板内容；还有一种是将已经制作好的普通网页转换为模板。本节以“梦幻花园”网站为例，详细介绍创建模板文档的两种方法。1．新建空白模板文档在Dreamweaver中模板文档的扩展名为“dwt”。当用户创建并保存空白模板文档后，就可以像编辑普通网页一样编辑模板文档了。2．将现有网页转换成模板可以将网站中已经存在的某个网页另存为模板，然后再利用该模板制作网站中与其结构相同的其他网页。二、编辑模板1．创建可编辑区域一般情况下，模板可分为两部分，一部分是在基于模板创建的文档中不能编辑的区域，称为不可编辑区域；另外一部分是在基于模板创建的文档中可以编辑的区域，称为可编辑区域。要使模板有效，至少要在其中包含一个可编辑区域。2．更改可编辑区域名称用户在创建可编辑区域后，还可以非常方便地更改可编辑区域名称。单击可编辑区域左上角的标签名称将其选中，可看到属性检查器上的“名称”编辑框中显示了该可编辑区域的名称。选中“名称”编辑框中的可编辑区域名称，将其删除后重新输入新名称，可更改可编辑区域名称。3．删除可编辑区域标记如果已经将模板中的一个区域标记为可编辑，而现在想要再次锁定它（使其在基于模板创建的文档中不可编辑），可在选中可编辑区域后，选择“修改”>“模板”>“删除模板标记”菜单。任务实施——创建“宝宝成长日记”网站模板在学习了模板的创建与编辑后，下面通过在“宝宝成长日记”网站中创建一个模板，来进一步学习和巩固模板的创建与编辑（具体操作见视频8-1）。任务二应用和管理模板任务说明用户可基于模板创建文档，从而使创建的文档继承模板的页面布局。基于模板创建的文档与模板保持链接关系（除非以后分离该文档），修改模板后，所有基于该模板创建的文档都可以自动更新。下面就来学习应用和管理模板的基本操作。预备知识一、应用模板创建模板并设置好可编辑区域后，就可以在该模板的基础上创建网页文档了。应用模板创建网页文档的方法有两种，一种是使用“新建文档”对话框，另外一种是使用“资源”面板，下面分别介绍。1．使用“新建文档”对话框使用“新建文档”对话框创建基于模板的网页与创建普通网页的方法差不多。2．使用“资源”面板“资源”面板主要用于对网站中的资源进行分类管理，这些资源包括图像、颜色、链接地址、动画、库和模板等。由于“资源”面板中显示的是当前站点中的资源，所以在使用“资源”面板前，需要先将当前站点设置为目标站点。二、管理模板1．更新模板创建模板并应用其创建网页后，如果对模板中的某些部分不满意，可将其打开并修改。在修改完毕并保存时，Dreamweaver会弹出“更新模板文件”对话框，提示是否更新站点中基于该模板创建的网页文档，单击“更新”按钮可更新通过该模板创建的所有网页，单击“不更新”按钮，则只保存模板而不更新基于该模板创建的网页。2．删除模板如果不再需要某个模板，可将其删除。在“资源”面板中选中不再需要的模板文件，按【Delete】键将会弹出提示框。如果确认删除，单击“是”按钮；如果不想删除，则单击“否”按钮。3．分离模板如果用户需要对网页中的不可编辑区域进行编辑，可以直接将网页文档与模板分离。分离后的文档就变成了普通的网页文档，可以像编辑普通网页文档一样对其进行编辑操作，但更新原模板文档后，分离后的文档无法再自动更新。打开使用模板创建的网页，选择“修改”>“模板”>“从模板中分离”菜单，即可使网页脱离模板。任务实施——应用“宝宝成长日记”网站模板创建网页在学习了模板的应用和管理后，下面使用任务一中创建的模板来制作一个网页，以进一步学习模板的应用（具体操作见视频8-2）。任务三创建库项目任务说明使用库项目可以将网页中的常用页面元素保存起来，然后在多个网页中重复使用。本任务主要学习创建库项目的基本操作。预备知识一、认识库项目库项目是一种特殊类型的Dreamweaver文件，我们可以将当前网页中的任意页面元素定义为库项目，如图像、表格、文本、声音和Flash影片等。二、创建库项目库项目的创建方法非常简单。首先选中对象，然后选择“修改”>“库”>“增加对象到库”菜单，即可将所选对象创建为库项目。需要注意的是，在创建“库”项目前必须保证“文件”面板中显示的是目标站点，也就是要保存“库”项目的站点。任务实施——在“欧妮雅”网站中创建库项目在学习了库项目的创建后，下面通过将“欧妮雅”网站中经常用到的网页元素存储为库项目，来进一步学习和巩固库项目的创建（具体操作见视频8-3）。任务四应用和编辑库项目任务说明在创建库项目后，就可以非常方便地将其应用于网站中的任何网页。本任务主要学习应用和编辑库项目的基本操作。预备知识一、应用库项目库项目的应用方法非常简单，只需从“资源”面板的库窗格中将其拖入到文档的适当位置即可。此外，也可在定位插入点后，选中库中的项目并单击“资源”面板底部的“插入”按钮，将库项目插入到文档中。二、编辑库项目要编辑库项目，可在“资源”面板中双击库项目，Dreamweaver会在文档编辑窗口中打开该库项目。任务实施——应用“欧妮雅”库项目创建网页在学习了库项目的应用和编辑后，下面使用任务三中创建的库项目来制作网页“sub4.html”，以进一步学习和巩固库项目的应用（具体操作见视频8-4）。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业WENJINGKETANG扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目九动态网页制作入门任务一安装和配置IIS任务二配置动态站点任务三应用表单和表单对象所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具任务一安装和配置IIS任务说明为便于测试网页，在制作动态网页之前，一般要先安装并设置好测试服务器。在WindowsXP操作系统下，只要安装了IIS，就可以将自己的电脑设置为测试服务器。下面我们便来学习安装和配置IIS的方法。预备知识一、安装IIS在安装WindowsXP操作系统时，默认状态下是不会安装IIS的，所以需要单独安装，下面就来看看如何安装。二、配置IIS安装IIS后，还需要进行简单的设置（将网站与IIS联系起来）才能用于测试网页，下面我们就来看看具体的设置方法。任务实施——设置“欧妮雅”网站为IIS默认站点在学习了安装和配置IIS的方法后，下面将“欧妮雅”网站设置为IIS默认站点（具体操作见视频9-1）。任务二配置动态站点任务说明创建好动态网页测试环境后，为了能够在Dreamweaver中调试动态网页，还必须对站点进行合适的配置。下面就来学习相关知识。预备知识用户可在新建站点，或管理站点时出现的站点设置对话框中对站点进行配置，具体操作可参考任务实施。任务实施——配置“欧妮雅”动态站点信息下面为“欧妮雅”网站配置动态站点信息（具体操作见视频9-2）。任务三应用表单和表单对象任务说明表单是网页浏览者与网站服务器之间进行信息传递的重要工具。我们可以使用Dreamweaver创建带有文本字段、单选按钮、复选框和文件域等输入类型的表单，这些输入类型又被称为表单对象。下面就来学习表单和表单对象的相关知识。预备知识一、认识表单表单多用于填写用户信息。例如，用户在网页上进行注册、登录、留言等操作时，都是通过表单向网站数据库提交或读取数据的。下图为当当网注册页面，当用户填写完信息，单击“提交注册”按钮后，所填信息将提交到网站数据库中。二、应用表单表单的应用比较简单，但由于默认状态下插入的表单是以100%的宽度显示，所以在插入表单前一般都要先创建一个表格或Div，之后将表单插入到单元格或Div中，下面我们来看看创建表单的具体操作。三、应用表单对象我们可以把表单看做一个容器，表单对象就是放在这个容器里的东西，只有添加了表单对象，表单才能真正起作用，才可以让访问者输入数据或执行其他操作。常用的表单对象主要有文本字段、单选按钮、复选框和按钮等。任务实施一、制作留言列表页面留言列表页面是指显示浏览者留言的页面。由于本任务内容太多，为便于学习和理解，我们将其分为4个小节来讲，分别是插入表单及表单对象、创建数据库连接、创建记录集和设置动