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