《Dreamweaver-CS3教案.pdf》由会员分享，可在线阅读，更多相关《Dreamweaver-CS3教案.pdf（48页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Dreamweaver CS3教案第第 1 1 章章基础知识基础知识5 5 课时课时教学目标1掌握 HTML 的基本知识及作用；2掌握安装和配置 IIS 的方法；3熟悉 Dreamweaver CS3 的工作界面；4掌握创建和设置 Dreamweaver CS3 站点的方法。教学重点1HTML 语言2熟悉 Dreamweaver CS3 的工作界面3创建本地站点教学难点HTML 的基本知识教学方法任务驱动法，以学生做为主，教师使用多媒体投影演示制作过程并讲解关键环节。学生上机操作完成实例与实训。任务 1 认识网页教学目标：1理解掌握网页的概念2HTML 的概念3掌握 HTML 的基本知识及作用
2、教学重点：1网页的实质2HTML 的基础知识教学难点：HTML 标记教学方法：任务驱动法，讲练结合法教具准备：多媒体教学教学内容：第 1 课时一、网页1、网页的概念：网页是网站的基本组成元素。网页文件的扩展名通常为.htm 或.html。一般是由 HTML语言编写的文本文件。2、网页的实质网页文档本身是一个文本文件，这些文本能够将文字及其他媒体文件有机的组织在一起，在浏览器中合适地显示。二、HTML1、Html 的中文含义Html 是 Hypertext Markup Language的缩写，其中文含义是“超文本标记语言”。2、Html 的概念它是使用特殊标记来描述文档结构和表现形式的一种语言
3、，可以用来实现WEB 页面。13、网页文档的组成一个 HTML 文档通常分为文档头和文档主体两部分。三、标记1、标记的格式在 HTML 中定义了许多标记，这些标记用来描述文档。这些标记使用“”括起来。标记通常分为开始标记和结束标记。其格式为：标记内容注意：假设一个标记有多个属性，属性和属性之间要用空格隔开。例如：简单的网页文档我的第一个网页这是我的第一个网页欢迎大家第 2 课时2、常用标记 标记一个 HTML 文档的开始和结束。Html 文档的所有内容就书写在这两个标记之间。用于标记文当首部的开始和结束，首部通常包括网页标题、创作信息等内容，在浏览网页时不会在浏览器窗口内显示。和 用于设置网页
4、的标题。该标记中不能包含其它标记，且只能在标记中出现一次。当浏览网页时，网页的标题会出现在浏览器窗口的标题处。和 标记是主体标记，该标记包含在 Html 标记内。文档主体包括了网页显示的内容，如文字、链接、图像、表格和其它对象。和 标记一个段落的开始和结束。和 说明其后的文字是一级标题。注释标记。说明：1每个标记在标识名以外还可以包含一个或多个“属性”，用于控制标记内容的大小、颜色、位置、边框等。例如：“bgcolor=blue”就是 body 标记的一个属性，进一步说明网页的背景色为蓝色。2如果一个标记有多个属性，中间要用空格隔开。3、标记的常用属性2属性名BackgroundBgcolor
5、TextLinkVlink作用用图像设置网页背景设置网页的背景颜色设置网页中所有文本的颜色设置超文本链接尚未访问时文本的颜色，默认为蓝色设置超文本链接已经访问后四、网页的基本元素网页中包括的元素主要有文本、图像、视频、声音、动画、表格、表单等。1网站 LOGOLogo 的中文含义是标志、标识，在网页设计中，Logo 常作为公司或站点的标识出现，起着非常重要的作用，集中表达了这个网站的文化内涵和内容定位。2网站 BannerBanner 的中文含义是横幅、标语，通常被称为网络广告。3导航栏导航栏实质上是一组超链接，通过这组超链接可以浏览到整个网站的其他页面。4文本文本作为人类最重要的信息载体的交
6、流工具，是最重要的网页元素之一。与图像、动画等其他网页元素相比，文本不易在第一时间吸引浏览者的注意，但文本能够更加准确详细地表达网页信息内容和含义，是对其他网页元素的补充。5图像图像在网页中起着非常重要的作用，适当的图像能够为网页增添生动性和活泼性，不仅丰富网页内容、提供更多更直接的信息，还能给浏览者视觉上的美感。6动画动画能够形象生动地表现事物的变化发展过程，增加网页的动态效果，使网站更加生动有趣，因此，动画已经成为现代网站中不可缺少的元素之一。7表单表单实质上是一个服务器程序，用户可以在网页上的表单域中输入文本或数据，提交表单，该表单程序在服务器上执行，并将执行结果反馈到相应的页面上，从而
7、实现了用户与网站之间的交互。教学小结：主要介绍了网页的概念、标记的应用及书写格式还有网页的基本组成元素。课堂作业：1、总结网页的概念及网页的实质？2、列举 Dreamweaver CS3 中常用标记及其含义？板书设计：任务 2让别人通过网络访问你的网页教学目标1理解和掌握网站的概念2掌握安装 IIS 的步骤3掌握在 IIS 中配置站点的方法3教学重点1网站的含义2IIS 的含义及功能教学难点IIS 的配置教学方法演示法，任务驱动法教具准备多媒体教学教学内容一、网站网站是许多相关网页有机结合而形成的一个信息服务中心。网站的设计者将要提供的内容和服务制作成许多个网页，并且经过组织规划，让网页互相链
8、接，然后把相关文件存放在WEB 服务器的一个文件夹中。这样一个文件夹就是一个网站。二、主页当用户没有指定网页文件名时，网站的默认显示的网页。主页文件名通常为index.htm、index.html、default.htm三、IIS1、IIS 的含义IISInternet Information Server，互联网信息服务是一种Web网页服务组件，其中包括 Web 服务器、FTP 服务器、NNTP 服务器和 SMTP 服务器，分别用于网页浏览、文件传输、新闻服务和邮件发送等方面，它使得在网络包括互联网和局域网上发布信息成了一件很容易的事。2、IIS 的运行环境IIS 通常运行在 WINDOWS
9、 的 SERVER版本上，可支持大量用户的访问。在 WINDOWSXP professional中，IIS 组件主要用于开发测试，不适宜大量用户的访问。另外，在 WINDOWSXP 的家庭版中未提供 IIS 组件。教学小结：介绍了网页中常用术语的含义及IIS 的含义和站点的配置。任务 3、初识 Dreamweaver CS3教学目标1掌握启动 Dreamweaver CS3 的方法2认识 Dreamweaver CS3 的工作界面3掌握 Dreamweaver CS3 界面中常用部分的用途教学重点熟悉 Dreamweaver CS3 界面各部分的名称及作用教学难点熟悉 Dreamweaver
10、CS3 界面各部分的名称及作用教学方法多媒体演示法、任务驱动法、挂图法教具准备教学内容4一、启动 Dreamweaver CS3 的方法1、从“开始”菜单2、双击桌面上的快捷方式二、Dreamweaver CS3 的工作界面；文档窗口：“文档”窗口显示当前文档。可以选择设计视图、代码视图、拆分代码视图、代码和设计视图之一进行网页的编辑和开发。当“文档”窗口处于最大化状态默认值时，“文档”窗口顶部会显示选项卡，上面显示了所有打开的文档的文件名。如果尚未保存已做的更改，则Dreamweaver CS3 会在文件名后显示一个星号。假设要切换到某个文档，单击其选项卡即可。三、网页开发平台早期的网页制作
11、，网页设计师要通过手工编写 HTML 代码来实现，开发效率非常低。网页开发平台的出现，使得这些复杂代码的编写变得十分容易。在这些网页开发平台中，只需要点点鼠标，软件就能帮助用户书写出相应代码，即使不懂得 HTML，也能制作出漂亮的网页来。Dreamweaver 就是一种网页开发平台，其最新版本就是Adobe Dreamweave cs3。该软件同时适用于初学者和专业网页设计师，是一款优秀的“所见即所得”的可视化网页编辑软件。另外，FrontPage 也是一款常用的网页开发平台，它是由微软公司开发的，适合于初学者。四、网页制作辅助工具1、图像处理工具-PhotoshopPhotoshop 软件一
12、直是图像处理软件的龙头老大，它不仅能创造出不朽的电脑图形艺术，而且为网页图像制作提供了强大的支持，现在已经成为使用最为广泛的网页图像处理软件。2、动画制作工具-FLASHFALSH 是目前网络上最为流行的矢量动画设计制作软件，在网页动画制作中有广泛应用。教学小结：介绍了 Dreamweaver CS3 的启动方法，认识并掌握了界面的组成及常用部分的含义。课外作业：尝试使用菜单对面板组进行设置。任务 4、创建 DreamweaverCS3 站点5教学目标：1理解并掌握站点的含义2掌握在 Dreamweaver CS3 中设置本地站点的步骤教学重点：设置本地站点教学难点：本地站点的设置教学内容：一
13、、站点1站点的含义在 DreamweaverCS3中，术语“站点”指属于某个 Web 站点的文档的本地或远程存储位置。DreamweaverCS3站点提供了一种方法，使您可以组织和管理您所有的 Web 文档，将您的站点上传到 Web 服务器，跟踪和维护您的链接以及管理和共享文件。应定义一个站点以充分利用 DreamweaverCS3的功能。2站点的类型DreamweaverCS3站点由三个部分或文件夹组成，具体取决于开发环境和所开发的 Web 站点类型：1本地根文件夹存储您正在处理的文件。DreamweaverCS3将此文件夹称为“本地站点”。此文件夹可以位于本地电脑上，也可以位于网络服务器上
14、。如果您直接在服务器上工作，每次您保存文件时 Dreamweaver CS3都会将文件上传到服务器。2远程文件夹存储用于测试、生产和协作等用途的文件。DreamweaverCS3在“文件”面板中将此文件夹称为“远程站点”。远程文件夹通常位于运行 Web 服务器的电脑上。3本地根文件夹和远程文件夹的关系本地文件夹和远程文件夹使您能够在本地硬盘和 Web 服务器之间传输文件；这使您可以轻松管理 DreamweaverCS3站点中的文件。二、创建本地站点的步骤1、创建本地站点的注意事项：1第一步必须先在本地电脑的磁盘上建立一个文件夹。作为本地站点的根文件夹提示：为了方便以后管理站点上的文件，先在本地
15、文件夹中创建几个目录：htm、img、others，分别存放网页设计中用到的资源及网页文件。2建立本地站点，选择主菜单中的“站点”“新建站点”命令，在弹出的新建站点对话框进行设置。2、新建站点的操作步骤：第一步：选择菜单中的“站点”“新建站点”命令，如下列图：6在弹出的对话框中选择“基本”选项卡，出现定义站点向导，如以下列图所示：第二步：单击“下一步”按钮，询问是否要使用服务器技术，选择“否”选项表示目前该站点是一个静态站点，没有动态页即不使用Web应用程序：如 ASP、JavaServer Page JSP第三步：单击“下一步”按钮，选择“编辑我的电脑上的本地副本，完成后再上传到服务器推荐”
16、单项选择项，然后指定本地机磁盘上的一个文件夹储存站点文件包括网页文件及设计网页用到的其它资源第四步：单击“下一步”按钮，在弹出的对话框中设置如何连接到远程服务器，单击下拉菜单，选择“无”。如以下列图所示：7第五步：单击“下一步”按钮，弹出如以下列图设置概要。单击“完成”按钮，完成设置。思考：如何使用高级模式创建或设置站点？教学小结：给大家介绍了使用向导及高级模式两种创建站点的方法步骤。第第 2 2 章章 创建简单网页创建简单网页6 6 学时学时教学目标1掌握输入空格、普通文本、特殊字符、日期、列表等项目的操作方法2掌握文本的断行3掌握设置文本的属性及滚动文字的制作4掌握设置网页的属性5了解网页
17、图像的格式6掌握图像插入、编辑的方法7掌握网站相册的建立教学重点1文本段落的编辑2文本属性的设置3网页中图像的应用及属性的设置教学难点1图像的编辑为难点2滚动文字的制作教学方法教师使用多媒体投影演示制作过程，学生上机操作完成实例与实训。任务 1 制作文本网页教学目标1掌握建立网站站点；2掌握制作简单的文本网页；3掌握输入普通文本及设置文本属性；4掌握插入水平线的方法；5掌握滚动文字的制作方法；6掌握预览网页的方法；教学重点81文本的输入与属性设置2水平线的插入与应用3滚动文字的制作教学难点1水平线的应用及属性设置2滚动文字的应用教学内容一、新建网页文件1、方法一：启动了 Dreamweaver
18、CS3 软件，如同启动 Word 等其它应用软件一样打开了一个新的空的网页文档，就可以在这个新的文档中进行网页设计编辑；或者单击“文件”菜单中的“新建”命令，或直接按Ctrl+N 键，打开一个新页面，在该页面中也可以进行网页的设计编辑。网页设计编辑完毕后，保存网页文件：保存的位置在战点根目录下，新文件取名为“index.html”即建立了主页文件。2、方法二：打开站点管理窗口，在站点管理窗口右边的本地文件夹列表框中建立新文件，新文件取名为“index.html”按回车键，即建立了主页文件。双击“index.html”文件，进入编辑“index.html”的网页文件窗口，进行主页设计。二、输入普
19、通文本1、输入文本1“文件”“导入”2复制已有的文本：“复制”“粘贴”3直接输入：在文档编辑窗口中直接输入2、输入网页中的空格汉字输入状态下输入“属性”面板“格式”“预先格式化的”Shift+Ctrl+空格“编辑”“首选参数”“常规”“允许多个连续的空格”3、文本换行Enter分段隔一行Shift+Enter换行不分段4、文本的属性设置1选用字体在“字体”下拉表框中找到字体。如果在“字体”下拉表框中，没有找到字体。“字体”下拉表框中找到字体。单击“文本”“字体”“编辑字体列表”命令。或者在“属性”面板中选择“字体”下拉列表中选择“编辑字体列表选项”。要添加字体组合，可单击对话框中的加号按钮，假
20、设要删除字体组合，可单击减号按钮。在该对话框中的“可用字体”列表中选择所要添加的字体。2设置字号字号指的是相对缺省字体而言的字体的大小。我们可以在浏览器中使用缺省字号，可在“属性”在面板的“大小”下拉列表框中选择。3设置颜色颜色是网页外观的一个重要因素，要改变文本的颜色，可选中要设置的文本，单击“文本”“颜色”命令。9三、插入水平线1插入水平线1将光标置于“我的简历”后面2执行菜单“插入记录”中的“HTML”中的“水平线”命令2水平线的属性面板可以通过水平线的“属性”面板设置水平线的宽度、高度、类型、对齐方式及是否有阴影。水平线的“属性”面板如下：四、时间日期在 Dreamweaver CS3
21、 系统中可以插入页面的制作日期和时间。将光标置于要插日期和时间的位置，选择“插入”“日期”命令，可以在页面上插入插日期和时间，还可以设置日期和时间的格式。五、滚动文字的应用1基本格式.例如：啦啦啦，我会移动耶！2属性1方向#=left,right,up,down举例：啦啦啦，我从右向左移！啦啦啦，我从左向右移！2方式#=scroll,slide,alternate举例：啦啦啦，我一圈一圈绕着走！啦啦啦，我只走一次就歇了！啦啦啦，我来回走耶！3循环#=次数；假设未指定则循环不止举例：啦啦啦，我只走 3 趟哟！啦啦啦，我只走 3 趟哟！啦啦啦，我只走 3 趟哟！4速度举例：啦啦啦，我走得好快哟！5
22、对齐方式(Align)#=top,middle,bottom对齐上沿、中间、下沿举例：啦啦啦，我会移动耶！6。六、预览网页1执行“文件”菜单下的“保存”命令，保存网页1 02按快捷键 F12 预览网页教学小结：介绍了简单文本网页的制作方法。课外作业：1试写出网页中空格字符的输入方法？2试写出使用 Enter 键与 Shift+Enter 键在网页中的效果有什么不同？板书设计：任务 2插入图像教学目标1掌握网页“页面属性”的设置；2掌握网页中图像的插入与属性设置；3掌握鼠标经过图像的设置；教学重点1“页面属性”的设置；2图像的插入与属性设置；教学难点图像的应用与属性设置教学内容一、“页面属性”设
23、置使用 Dreamweaver CS3 创建了空白网页后可以对页面进行属性设置。执行“修改”“页面属性”命令，打开“页面属性”对话窗口：使用“页面属性”对话框，可以设置页面的整个外观，如页面的字体、大小、颜色、背景颜色、背景图象，还可以设置链接的样式、页面的标题等。虽然页面的属性有很多，并不是一个页面要将所有的属性全部都设置，用户在使用过程中根据自己的需要进行设置。二、插入图像1步骤：1光村定位；2执行菜单“插入记录”下的“图像”命令。2设置属性1 11在“属性”面板的“替代”列表中输入替代文字；2在“属性”面板的“对齐”列表框中对齐方式。三、鼠标经过图像步骤：1执行菜单“插入记录”中的“图像
24、对象”中的“鼠标经过图像”命令；2在“原始图像”文本框中选取图像文件；3在“鼠标经过图像”文本框中选取图像文件；4单击“确定”按钮。提示：该效果只有在网页预览时才能看到。教学小结：讲述了网页中页面属性的设置、图片的应用及鼠标经过图像的设置与应用，这使得网页效果更加美观，突出显示了图文并茂的效果。课外作业：1鼠标经过图像的含义是什么？2制作鼠标经过图像的步骤有哪些？任务 3制作网站相册教学目标：1掌握网站相册的含义；2掌握网站相册的制作及应用；教学重点：1网站相册的制作及应用教学难点：网站相册的制作教学方法：例如演示法教学内容：一、创建网站相册步骤：1执行菜单“命令”“创建网站相册”命令；2根据
25、对话框设置参数。二、美化网站相册步骤：1设置标题文字的大小、颜色；2设置标题文字所在的表格的背景颜色。提示：在创建网站相册时，应把照片事先存在一个文件夹中，然后创建一个文件夹在创建网页时应用。教学小结：介绍了网页中网站相册的创建与应用。板书设计：课外作业：1网站相册的含义？1 22写出制作网站相册的步骤？第第 3 3 章章网页布局网页布局8 8 学时学时本章教学目标1理解表格与层的概念及特点2掌握表格的创建与编辑3掌握表格与单元格的属性设置4掌握通过表格进行网页页面布局的方法5掌握层的创建、编辑6掌握层属性的设置7时间轴的基本操作教学重点1表格和层的布局2表格和单元格属性的设置3时间轴的应用教
26、学难点表格的嵌套，时间轴的使用教学方法教师使用多媒体投影演示制作过程，学生上机操作完成实例与实训。任务 1 制作“班级课程表”网页教学目标：1掌握创建表格的方法；2掌握表格和单元格属性设置的方法；3掌握表格的编辑；4掌握嵌套表格的应用；教学重点：1表格和单元格的属性设置；2掌握嵌套表格的应用；教学难点：表格和单元格的应用及属性设置教学方法：任务驱动法，例如讲解法，讲练法教具准备：多媒体教学环境教学内容：第 1 课时一、表格1表格1表格的含义表格是用于在网页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。2表格的两种模式1 3Dream
27、weaver CS3 提供了两种查看和操作表格的方式：“标准”模式在该模式下，表格显示为行和列的网格和“布局”模式允许您在将表格用作基础结构的同时在页面上绘制方框、调整方框的大小以及移动方框。3表格的标记在 HTML 语言中，表格标签用表示，表格元素标签位于和之间。行标签为，单元格标签为。2布局网页布局是根据网站主题和所需的栏目，对网页上的内容进行精确定位。可使用表格、层和框架布局。一般以 800600 像素和 1024768 像素下全屏显示时的网页宽度来确定网页的大小。一般来说，除去浏览器的边框，800600 像素下全屏显示时的网页宽度是778 或 776 像素；1024768 像素下全屏显
28、示时的网页宽度为1002 或 1000 像素。用户也可以根据设计效果指定所需的宽度。网页高度一般不受限制，可以向下适当延展。3嵌套表格在使用表格对网页进行布局时，嵌套表格使用得十分广泛。嵌套表格是指在表格的单元格中再插入表格来放置网页元素。一般而言，一个网页中嵌套表格的层次不能超过3 层。层次越多，文件越大，因此，应尽量采用较少的嵌套层次来进行网页布局。第 2 课时二、表格基本操作1.表格的创建：选择菜单“插入记录”“表格”命令，或在插入工具栏中单击“常用”“表格”按钮。2表格元素的选择：1表格的选择方法一：鼠标指向表格右框线或下框线，当指针变成双向箭头时单击鼠标左键。方法二：将光标置于表格中
29、任意位置，在状态栏单击前面的标签。2行的选择单行的选择：用鼠标指向要选择行的左边线，当指针变成黑色箭头时单击鼠标左键。连续多行的选择：选择一行后，拖动鼠标选择多行。不连续多行的选择：按住Ctrl 键，分别选择各行。3列的选择单列的选择：用鼠标指向要选择列的上边线，当指针变成黑色箭头时单击鼠标左键。连续多列的选择：选择一列后，拖动鼠标选择多列。不连续多列的选择：按住Ctrl 键，分别选择各列。4单元格的选择单个单元格的选择：按住Ctrl 键，用鼠标左键单击单元格。连续单元格的选择：按下鼠标左键在表格中拖动，选择鼠标指针划过的矩形区域中的单元格。不连续单元格的选择：按住Ctrl 键，用鼠标左键依次
30、单击各单元格。3改变表格大小方法一：首先选择表格选定的表格带有粗黑的外边框，在下边中点、右边中点和右下角分别显示控制柄，用鼠标拖动控制柄调整表格大小。方法二：选择表格，在表格属性面板中输入表格高度和宽度的数值。4行高和列宽的调整1 41列宽的调整：方法一：拖动要更改的列的右边线。相邻列的宽度也 更改了，表格的总宽度不变。按下 Shift 键后再拖动可以保持其他列宽不受影响。方法二：选择列，在属性面板中指定宽度。2行高的调整：方法一：拖动要更改的行的下边线。相邻行的高度也更改了，表格的总高度改变。按下 Shift 键后再拖动可以保持其他行高不受影响。方法二：选择行，在属性面板中指定高度。注意：当
31、选定了表格或表格中有插入点时，Dreamweaver CS3 会显示表格宽度和每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。如果没有看到表格的宽度或列的宽度，则说明没有指定该表格或列的宽度。如果出现两个数，则说明“设计”视图中显示的可视宽度与 HTML 代码中指定的宽度不一致。当拖动表格的右下角来调整表格的大小，或者添加到单元格中的内容比该单元格的设置宽度大时，会出现这种情况。例如，如果将某列的宽度设置为 200 像素，而添加的内容将宽度延长为 250 像素，则该列将显示两个数：200 属性中指定的宽度和(250)带括号，表示该列呈现在屏幕上的可视宽度。5行、列的添加与删除1行或
32、列的插入：用鼠标指向某单元格单击右键，在弹出菜单中执行“表格”“插入行”或“表格”“插入列”命令，可在当前光标所在行或列位置插入一行或一列。将光标定位在末行的最后一个单元格中，按“Tab”键可在表格的最下边添加一行。2行或列的删除：用鼠标指向某单元格单击右键，在弹出菜单中执行“表格”“删除行”或“表格”“删除列”命令，可在删除当前光标所在行或列。6删除表格方法：选中表格，按 Delete 键，或者执行“编辑”“清除”命令。第 3 课时三、设置表格属性在设置表格属性前，首先要插入表格并选择表格。将光标定位在插入的表格中，此时表格的上方或下方出现带有标注的绿线，单击绿线区域即可选取光标所在的表格。
33、如果没有绿线，则可以通过在表格左下方的标签栏上单击标签来选取表格。选取表格后，【属性】面板如以下列图所示。四、设置单元格属性按住鼠标左键拖动选取需要的单元格后，其【属性】面板如以下列图所示。教学小结：1 5介绍了网页布局中常用的布局方式-表格和创建、编辑、属性设置及在网页中的应用。课堂作业：在网页布局中表格有什么作用？板书设计：任务 2AP 元素的应用教学目标：1AP 元素的概念；2在网页中插入 AP 元素；3AP 元素属性的设置；教学重点：1网页中 AP 元素的应用；2AP 元素的属性设置；教学难点：网页中 AP 元素的应用教学方法：任务驱动法、实例演练法教具准备：多媒体教学环境教学内容：一
34、、AP 元素的概念1 AP 元素的概念它是分配有绝对位置的HTML 页面元素，就是div 标签或其他任何标签，但通常是绝对定位的 div 标签。在以前的版本中，通常称为“层”。AP 元素可以包含文本、图像或其他任何可放置到 HTML 文档正文中的内容。可以将它定位在页面上的任何位置，对页面上的元素进行重叠和复杂的布局。2 AP 元素的面板二、层的基本操作层也是进行网页布局的一种工具。由于层具有浮动性，可以在窗口中随意拖动，因此它的定位相对于表格更为灵活。例如，要在网页左右侧空白处或浮于网页上方添加一些广告、宣传画等，就可以通过层来完成。1创建层1 6选择插入工具栏上“布局”选项，单击“布局”面
35、板上的“绘制AP Div”按钮，移动鼠标到文档区域，鼠标指针变成十字形，在网页中看拖动鼠标，绘出蓝色矩形区域。2层的选择单击层的边框。单击层的选择柄位于层的左上方。3层的删除选择层后按键。三、层属性的设置单击层边框选中层，其【属性】面板如以下列图所示。如果要使多个层对齐、大小一致等，则按住【Shift】键选中这些层，然后在【属性】面板中设置对应的参数。1可见性Default：默认Inherit：继承Visible：可见Hidden：隐藏2溢出Visible：AP 元素将向右向下扩大以显示AP 元素内的全部内容。Hidden：只显示 AP 元素尺寸以内的内容。Scroll：不改变 AP 元素的大
36、小，但增加滚动条，不管AP 元素是否能够显示全部的内容都会显示滚动条。Auto：只有在 AP 元素不能显示全部内容的时候才出现滚动条。3Z 轴其数值代表在垂直平面的方向上AP 元素的序号，序号大的AP 元素显示在上面。四、表格与层的相互转换在 DreamweaverCS3 中，表格与层之间可以相互转换。有些低版本的浏览器不支持层功能，为了使网页的访问面扩大，可以将网页中的层转换为表格。选择【修改】【转换】【AP DIV转换为表格】命令，可将层转换为表格。选择【修改】【转换】【表格转换为AP DIV】命令，可将表格转换为层。教学小结：介绍了另外一种网页布局的方法-AP 元素，讲述了 AP 元素的
37、创建、编辑及属性设置方法。教学作业：说出 AP 元素在网页布局中的作用及它与表格之间的区别？板书设计：教学反思：AP 元素这种网页布局的方法比较灵活，可以弥补表格布局的缺陷，它们可以相互配合地运用使得网页的效果更好。1 7第第 4 4 章章 超级链接超级链接本章教学目标：1掌握超链接基础知识以及超链接的创建、设置、更改方法；2能运用超链接知识，创建文本链接、锚点链接、电子邮件链接、图像映射；3掌握链接基础知识；4掌握链接的创建、设置与更改；5掌握锚点链接、电子邮件链接、图像映射等创建和设置方法；6了解链接检查与测试；本章教学重点：文本链接和图片链接的创建方法本章教学难点：创建映射图像链接的方法
38、教学方法：讲授、多媒体演示及观看声像资料等任务 1 为“我的作品”添加超文本链接教学目标：1理解掌握超级链接的含义及精髓；2掌握超链接的分类；3掌握超级链接的链接目标；教学重点：1超链接的分类；2超级链接的链接目标；教学难点：超级链接的创建方法；教学方法：例如讲述法，任务驱动法教学内容：一、超级链接的分类在“属性”面板中的“链接”文本框中直接输入要链接地址“.htm”，如果链接文件位于本地站点目录中，也可以点击“浏览文件”按钮在硬盘上查找文件。1链接目标：_blank：将被链接文档显示在一个新的未命名的框架或窗口内，在内部链接或外部链接中的主要分类页面时多用于此方式。_parent：将被链接文
39、档显示在包含链接的框架的上一级框架或者窗口内。多应用在框架结构的网页中。_seft：将被链接文档显示在和链接所在的同一框架或窗口内，这是默认的链接打开方式，通常没有指定时就会被采用。_top：将被链接文档显示在整个浏览器窗口并取消所有框架，同样多应用在框架结构的网页中。2链接的类型一个网站是由多个页面组成的，而这些页面之间依据链接确定相互之间的导航关系。超级链接由两部分组成：链接载体如：文本、图像、图像热区、动画等 和链接目1 8标如：页面、图像、声音、程序、其他网站、Email 甚至是页面中的某个位置 锚点。链接的类型*内部链接：同一网站文档之间的链接。*外部链接：不同网站文档之间的链接。*
40、锚点链接：同一网页或不同网页中指定位置的链接。*E-mail 链接：发送电子邮件的链接。3链接路径1绝对路径，为文件提供完全的路径，包括适用的协议，例如、ftp，rtsp 等。如：:/2相对路径，相对路径最适合网站的内部链接。如果链接到同一目录下，则只需要输入要链接文件的名称。要链接到下一级目录中的文件，只需要输入目录名。然后输入“/”，再输入文件名。如链接到上一级目录中的文件，则先输入“./”再输入目录名，文件名。3根路径：是指从站点根文件夹到被链接文档经由的路径，以前斜杠开头。例如：/pag/grzl.html 就是站点根文件夹下的 pag 子文件夹中的一个文件grzl.html 的根路径
41、。二、超级链接的创建1外部链接1直接输入地址选中要加超链接元素，在属性面板中，“链接”文本框直接输入外部绝对地址，如以下列图所示。2使用超级链接对话框选中要加超链接元素,单击常用快捷栏中的“超级链接”按钮。如下列图。弹出“超级链接”对话框，2内部链接在文档窗口选中文字，单击属性面板“链接”后的按钮，弹出“选择文件”对话框，选择要链接到的网页文件，即可链接到这个网页。我们也可以拖动“链接”后的按钮到站点面板上的相应网页文件，则链接将指向这个网页文件。3Email 链接单击常用快捷栏中的“电子邮件链接”按钮。弹出“电子邮件链接”对话框，在对话框的文本框那输入要链接的文本，然后在 E-mail 文本
42、框内输入邮箱地址即可。也可以直接在“属性”对话框中直接输入mailto:E-mail。4锚点链接1 91定义所谓锚点链接，是指在同一个页面中的不同位置的链接。2锚点链接的作用作用是当页面内容较长时，为了浏览更加方便，可以在页面的某个分项内容的标题上设置锚点，然后在页面上设置锚点的链接，这样用户就可以通过链接快速地直接跳转到指定页面中。5创建其他超链接：1空链接有时候我们需要一种超链接的样式效果，但不需要其链接跳转到任何其他页面或站点。此时，空链接无疑是非常适合的。空链接指向的被链接文件是文件本身，操作方法是在“属性”面板“链接”文本框中直接输入“#”即可。2下拉菜单链接多个超链接使用一个下拉的
43、菜单包括，单击显示菜单项选择择其中的链接文本即可打开对应的超链接，多应用在超链接较多、超链接分类的页面中。3框架网页链接主要应用在框架结构的网页中，在效果方面的显示是这样的：一个页面，在某块区域为页面的链接导航，某块区域为内容的显示，单击不同的超链接，该区域显示不同的信息内容。教学小结：超级链接是网页的灵魂，它能使网页成为一个有机的整体。本任务主要介绍了超级链接的分类、创建、地址的应用。课外作业：1超级链接可以分为哪几类？2举例说明几种地址的应用？3什么是锚点链接？如何创建锚点链接？板书设计：任务 2 图像地图的创建教学目标：1掌握图像地图的含义；2掌握热点区域的创建及绘制；3掌握图像地图的创
44、建；教学重点：1热点区域的创建及应用；2图像地图的创建；教学难点：图像地图的创建教学方法：教学内容：一、图像地图映射概念所谓图像映射，就是将一幅图像分成假设干区域，并且每个区域都有自己的链接。图像映射可用于地图，导航等应用中。二、热点区域的应用1绘制热点区域从插入栏中选择“绘制矩形热点”选项，单击要映像的区域的一角，然后沿对角线拖动2 0鼠标绘制出一个矩形，释放鼠标，则会显示出指定区域。最后在“属性”面板中设置链接、目标和替换文本框。2修改热点区域每个热点区域边框上都有控点，可用来改变热点的大小及形状。移动修改各控点之前，应先选中“属性”面板中的指针热点工具。矩形图形有四个控点，位于图形的四个
45、角上。拖曳任意一个控点可以改变图形大小及形状。提示：1拖动时按住 Shift 键，将保持矩形为正方形。2椭圆形热点也有四个控点，拖曳任意一个控点都可以缩小或放大圆形的直径。教学小结：介绍了图像地图的创建及应用，了解了这一类网页的应用及编辑。课外作业：1图像地图的含义？2热点区域有哪几类？如何应用？第 4 章内容小结一、超级链接1概念：是指站点内不同网页之间、站点与 Web 之间的链接关系，它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。超级链接由两部分组成：链接载体和链接目标。超链接元素：文本、图像、图像热区、动画等链接目标：可以是任意网络资源。例如：页面、图像、声音、程序、
46、其他网站、Email 甚至是页面中的某个位置-锚点。2超链接的类型：内部链接：同一网站文档之间的链接。外部链接：不同网站文档之间的链接。锚点链接：同一网页或不同网页中指定位置的链接。E-mail 链接：发送电子邮件的链接。3超链接路径1绝对路径，为文件提供完全的路径，包括适用的协议，例如、ftp，rtsp 等。2相对路径，相对路径最适合网站的内部链接。如果链接到同一目录下，则只需要输入要链接文件的名称。要链接到下一级目录中的文件，只需要输入目录名。然后输入“/”，再输入文件名。如链接到上一级目录中的文件，则先输入“./”再输入目录名，文件名。3根路径：是指从站点根文件夹到被链接文档经由的路径，
47、以前斜杠开头。二、超级链接的创建1创建外部链接的方法：1直接输入地址：选中要加超链接元素，在属性面板中，“链接”文本框直接输入外部绝对地址。2使用超级链接对话框：选中要加超链接元素,单击常用快捷栏中的“超级链接”按钮。输入“文本”、“链接”、“目标”、“标题”等信息。2创建内部链接的方法：在文档窗口选中文字，单击属性面板“链接”后的按钮，弹出“选择文件”对话框，选择要链接到的网页文件，即可链接到这个网页。我们也可以拖动“链接”后的2 1按钮到站点面板上的相应网页文件，则链接将指向这个网页文件。此外，我们还可以直接将相对地址输入到“链接”文本框里来链接一个页面。3创建 E-mail 链接：单击常
48、用快捷栏中的“电子邮件链接”按钮，弹出“电子邮件链接”对话框，在对话框的文本框那输入要链接的文本，然后在E-mail 文本框内输入邮箱地址。三、图像地图的应用1图像地图映射概念就是将一幅图像分成假设干区域，并且每个区域都有自己的链接。图像映射可用于地图，导航等应用中。2使用绘图工具：从插入栏中选择“绘制矩形热点”选项，单击要映像的区域的一角，然后沿对角线拖动鼠标绘制出一个矩形，释放鼠标，则会显示出指定区域。最后在“属性”面板中设置链接、目标和替换文本框。按照以上步骤，在插入栏中选择“绘制椭圆热点”或“绘制多边形热点”选项，可以使用椭圆热点工具或多边形热点工具绘制热点区域。3修改热点区域：每个热
49、点区域边框上都有控点，可用来改变热点的大小及形状。移动修改各控点之前，应先选中“属性”面板中的指针热点工具。矩形图形有四个控点，位于图形的四个角上。拖曳任意一个控点可以改变图形大小及形状。拖动时按住 Shift 键，将保持矩形为正方形。椭圆形热点也有四个控点，拖曳任意一个控点都可以缩小或放大圆形的直径。例如，如果拖住圆形顶部的控点向上移动，圆形将往上扩展。每一个多边形热点的角上都有一个控点，单击某个控点将其拖至新的位置，多边形的形状也会随之变化。第第 5 5 章章框框架架4 4 学时学时本章学习目标：1了解使用框架的优缺点；2掌握框架网页在创建、选择、设置、存储方面的特点；3掌握框架和框架集的
50、创建；4掌握框架结构网页的制作；5掌握嵌入式框架的使用；教学重点：1框架结构网页的制作；2框架与框架集的创建；教学难点：嵌入式框架教学方法：教师使用多媒体投影演示制作过程，学生上机操作完成实例与实训任务 1 创建框架网页教学目标：1理解掌握框架的作用及创建；2理解掌握框架及框架集属性的设置；3掌握框架下超级链接的创建；2 2教学重点：1框架的创建及属性设置；2框架及框架集的设置及关系；教学难点：框架与框架集的应用及超级链接的创建；教学方法：例如演示法，任务驱动法教具准备：多媒体教学环境教学内容：一、框架和框架集1框架的概念框架是浏览器窗口中的一个区域，用于显示独立的 HTML 文档。两个或两个