dreamweaver8网页设计教案(60页).doc

《dreamweaver8网页设计教案(60页).doc》由会员分享，可在线阅读，更多相关《dreamweaver8网页设计教案(60页).doc（60页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、-dreamweaver8网页设计教案-第 59 页初识Dreamweaver 8课题：Dreamweaver8简介及创建文档一、教学基本内容1、什么是网页和网站 2、网页的分类 3、网页中的常用术语 4、网页设计的相关知识 5、认识Dreamweaver 8 6、Dreamweaver 8的基本操作 7、Dreamweaver 8工作界面介绍二、课型：新授课三、课时：1个课时四、教学重点与难点重点：什么是网页和网站难点：1、网页的分类2、网页设计的一般步骤3、Dreamweaver 8的基本操作五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设

2、计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、什么是网页和网站（1）网页网页是由HTML（超级文本标识语言）或者其他语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。（2）网站网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到Internet上以后，能通过浏览器在Internet上访问的页面 。u 门户网站u 职能网站u 专业网站u 个人网站2、网页的分类（1）按所处位置分类 按网页在网站中所处的位置可将网页分为主页和子页两类。(2) 按表现形式分类按网页的表现形式可

3、将网页分为静态网页和动态网页。3、网页设计的相关知识（1）设计网页的原则A、整体规划B、鲜明的主题C、善用图像D、醒目的导航E、及时更新F、易记的网站名称G、通用网页H、动画适量（2）网页设计的一般步骤A、规划网站B、收集整理资源C、配置站点D、创建页面E、测试站点F、发布站点 G、维护、更新站点（3）网页制作的常用工具A、网页设计软件 Dreamweaver是目前使用最多的网页设计软件。B、图像处理软件制作网页图像的软件种类繁多，大多数网页设计人员选择的是Fireworks或Photoshop。C、动画制作软件 网页动画制作中最常用的软件非Flash莫属。4、Dreamweaver 8的基本

4、操作A、启动Dreamweaver 8 B、新建空白HTML网页 C、保存网页文档 D、预览网页效果 E、退出Dreamweaver 8第一章 Dreamweaver8概述课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型：新授课三、课时：1个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页

5、3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而不用Frontpage?Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。（2）相关工具的介绍因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。 2、讲授新课（1）Dreamweaver的界面 a文档窗口：主菜单、工具栏、底部启动条、文档编辑区 b对象面板：标准、表格、表单、框架、特殊、文件廷冖隐藏、字符 c启动面板：站点管理、代

6、码检查、HTML样式、CSS样式、行为、历史记录、资源管理 d属性面板：随目前对象不同而内容不同(2)创建HTML网页(3)在网页中插入图像输入文字以后，插入图像，并对图像设置对齐的方式，使之与文字呈混排的状态。3、巩固练习练习使用界面中的各个工具七、作业处理根据本节所学的内容，课堂上练习创建一个空白网页，并且输入一段文字，在文本的左边插入一张图片八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。第二章 创建与规划站点课题：规划站点及创建静态站点一、教学基本内容1、站点规划概念2、站点规划的方法3、站点的组成4、定义站点二、课型：新授课三、课时：

7、2个课时四、教学重点与难点重点：1、站点组成2、如何创建静态站点难点：1、站点的定义 2、编辑、删除站点五、教学目的 1、掌握建立静态站点的流程 2、掌握静态站点的基本操作六、教学过程 1、复习引入由上节所学习的建立HTML网页引出站点概念 2、讲授新课 （1）站点规划概念及方法概念：所谓本地站点，就是指定本地硬盘中存放远程站点所有文档的文件夹方法：规划网站一般需要从3个方面去思考，即网站的主题、网站的内容和网站的对象。（2）创建本地站点站点组成：Dreamweaver 8站点由3部分组成，具体内容取决于环境和所开发的Web站点类型。包括本地文件夹、远程文件夹、动态页文件夹定义站点：（01）选

8、择“站点”|“新建站点”选项，或者选择“站点”“管理站点”选项，在弹出的“站点管理”对话框中单击“新建”按钮，弹出对话框，在“基本”选项卡的站点名称输入框中输入所要创建站点的名称，如图2-5所示（02）输入站点名称后，单击“下一步”按钮，在弹出的是否使用服务器技术对话框中，根据自己所制作网页的类型，确定是否使用服务器技术。在此制作静态页面，因此不使用服务器技术，如图2-6所示。（03）单击“下一步”按钮，在弹出的设置站点文件夹对话框中，选择或输入一个本地文件夹作为“本地站点文件夹”，如图2-7所示。（04）选择了本地站点文件夹后，单击该对话框中的“下一步”按钮，进入设置是否与远程服务器相连的对

9、话框，在这里选择“无”，设置为不与远程服务器相连，如图2-9所示。（05）单击“下一步”按钮，便会显示在站点定义向导中所选择设置的详细报告，如果感觉满意，单击“完成”按钮，完成本网站的创建，如图2-10所示；否则单击“上一步”按钮重新修改各项设置。（3）站点的基本操作其基本操作包括编辑、复制、删除站点。3、巩固练习练习站点的建立，及其基本操作。七、作业处理在课堂上要求每一个同学在F盘下建立一个名为“我的站点”的文件夹，在dreamweaver中创建一个静态站点，将站点信息存放到我的站点文件夹中。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课

10、题：搭建动态网站服务器及创建动态站点一、教学基本内容1、安装IIS2、动态站点与静态站点的区别3、搭建动态站点二、课型：新授课三、课时：2个课时四、教学重点与难点重点：动态站点与静态站点的区别难点：1、虚拟目录的概念2、动态站点的定义3、站点测试五、教学目的1、学会安装IIS，知道IIS的作用2、学会创建虚拟目录3、会创建动态站点六、教学过程1、引入先提出静态站点的作用及限制性，引入动态站点的功能2、讲授新课（1）安装并启动IIS（现场操作）（2）定义一个动态站点步骤：设置虚拟目录。（1）在本地磁盘“C:”下新建一个site文件夹作为本地站点的根文件夹。（2）设置web共享。找到“C:site

11、”文件夹，选中并右击该文件夹，从弹出的快捷菜单中选择“共享和安全”选项。在打开的“site属性”对话框中，选择“Web共享”选项卡，如图2-19所示（3）设置“编辑别名”对话框。选中“共享文件夹”单选按钮，在弹出的“编辑别名”对话框中将“别名”设置为site；在“访问权限”中选择“读取”；在“应用程序权限”中选择“脚本”，如图2-20所示。最后单击“确定”按钮关闭对话框，便完成了定义动态站点的准备工作。进入“高级”选项卡。（1）选择“站点”|“新建站点”选项，选择“站点定义”对话框中的“高级”选项卡。（2）从“分类”列表框中选择“本地信息”（默认选项）选项，如图2-21所示。设置“本地信息”的

12、各参数（见图2-22设置“测试服务器”的各参数（见图2-23）。显示结果。（3）测试站点将ch02 test.asp文件复制到C:site文件夹中，并使用Dreamweaver 8 打开test.asp。单击浏览器中“预览/调试” 按钮，或者按F12键在浏览器中运行test.asp页面。出现如图2-25所示的成功页面。若浏览器提示找不到服务器，则需重新搭建ASP服务器。3、巩固练习练习站点的建立，及其基本操作。七、作业处理在课堂上要求每一个同学在F盘下建立一个名为”我的动态站点”的文件夹，将其设置为虚拟目录，在dreamweaver中创建一个动态站点，将站点信息存放到我的动态站点文件夹中。八、

13、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。第三章 文本及其格式化课题：输入文本及其格式化一、教学基本内容1、输入普通文本2、插入符号、日期3、使用项目列表二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、插入符号、空格和日期 2、使用项目列表难点：1、项目列表五、教学目的1、掌握文本输入方法2、掌握日期的插入3、掌握项目列表的使用六、教学过程1、引入首先例用一个已完成的网页，让学生来看别人的设置，由此引入文本的格式化。2、讲授新课（1）文本的输入两种方法：a:直接在文档窗口中输入文本。即先选择要插入文本的位置，然后直接输入文本。b

14、:在其他编辑器中复制已经生成的文本，然后切换到Dreamweaver 8文档窗口中，将选取插入点，然后选择“编辑”|“粘贴”选项。（2）创建项目列表类型：无序列表、有序列表、定义列表、目录列表和菜单列表。（3）插入日期3、巩固练习练习各种项目列表的使用七、作业处理要求每一个同学建立一个名为“我的网页”的空白文档，在网页中输入文字，然后在右下角插入日期，在内容当中便用有序列表。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：CSS样式一、教学基本内容1 、演示并讲解 CSS 的应用 2 、 CSS 的基本概念 3 、 CSS 的特点 4 、

15、 CSS 样式定义 5 、 CSS 常用属性与值二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、掌握 CSS 样式定义 2、掌握 CSS 常用属性与值 难点：1、掌握 CSS 样式定义 2、CSS 常用属性与值 3、能独立完成 CSS 样式的应用五、教学目的1 、掌握 CSS 的基本概念 2 、掌握 CSS 样式定义 3 、掌握 CSS 常用属性与值六、教学过程向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。第一步：演示并讲解用 CSS 样式制作的网页。第二步：分步演示并

16、讲解 CSS 样式的基本概念。 第三步：讲解并分析 CSS 常用属性与值。第四步：结合 CSS 样式的使用制作网页第四步：课程小结。七、作业处理课堂上进行计论：第一步：演示并讲解用 CSS 样式制作的网页。 第二步：分步演示并讲解 CSS 样式的基本概念。 第三步：讲解并分析 CSS 的知识点。 第四步：结合 CSS 样式的使用制作网页 第四步：课程小结。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。第四章 表格课题：表格创建及设置一、教学基本内容1 、创建表格2 、 添加表格对象 3 、自动套用表格格式二、课型：新授课三、课时：2个课时四、

17、教学重点与难点重点：1、创建表格 2、自动套用表格格式难点：套用表格格式五、教学目的1 、掌握创建表格的基本方法 2 、会使用自动套用表格格式六、教学过程1、引入网页需要进行排版，由报纸的排版引入网页的排版，由此提出表格的作用2、讲授新课（1）创建表格步骤：将光标停放在页面需要创建表格的位置。如果未打开“插入”工具栏，可以在文档窗口单击按钮。如果在文档窗口中找不到该按钮，可使用Ctrl+F2快捷键切换“插入”工具栏的显示或隐藏状态，在“常用”标签中，单击“表格”按钮 弹出“表格”对话框输入要插入表格的行数，在此输入2。列数 输入要插入表格的列数，在此输入3单击“确定”按钮(2)套用表格格式3、

18、巩固练习创建一个表格，练习格式的套用。七、作业处理在课堂上创建一个五行四列的表格，要求边框为0，宽150，高254的表格。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：表格的应用一、教学基本内容1、设置单元格2、表格的基本操作二、课型：新授课三、课时：2个课时四、教学重点与难点重点：表格的编辑难点：排序表格五、教学目的1 、掌握表格的基本操作2 、能够熟练设置单元格格式六、教学过程1、引入 （1）文字的定位：空格、回车 （2）图片的定位：垂直边距、水平边距2、表格 插入表格：插入（Insert）表格（table），或者在对象面板 行数（

19、row） 列数（column） 边距（cell padding）：单元格中的内容与单元格边框之间的距离 间距（cell spacing）：单元格之间的距离 宽度（width）：可以是像素（pixel）或百分比为单位（percent） 边框（boder）： 属性面板：只有在选定整个表格时才出现表格属性 在表格中也可以通过右击，调出的快捷菜单中选择表格来对表格进行设置清除行高和列宽按钮 改变列宽单位按钮 背景颜色： 边框颜色：设置整个表格的格线颜色 背景图像：3、表格所对应的HTML代码 表格：table/table 行：tr/tr 列：td/td 4、表格的编辑（1） 表格的嵌套（2） 在网页中

20、，要进行复杂的定位，一般需要用到嵌套表格。不过，一般不超过三层。 （2）复制剪切粘贴（3） 插入行、列，删除行列（4） 合并单元格，拆分单元格（5） 改变行、列、表格的大小：拖放，属性面板精确定义（6） 表格模板：命令（command）格式化表格（format table）七、作业处理根据课本上的实训作出一个精美课程表网页 八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。第五章 图像课题：图像插入及属性设置一、教学基本内容1、图像的类型2、插入鼠标经过图像二、课型：新授课三、课时：2个课时四、教学重点与难点重点：插入图像难点：图像属性五、教学目

21、的1 、掌握图像的插入方法2 、掌握图像属性设置六、教学过程1、引入网页的页面背景颜色和文本颜色在HTML代码中是如何表示的？RGB方式表示颜色：红绿兰，0表示最弱，255表示最强 一共可以表示：256256256=16777216种颜色 由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显示时就可能发生偏差，不能正常显示。 这个范围我们称之为网页安全颜色范畴 网页中运用颜色原则：切忌采用过；背景颜色不要太深；要保持整个网页的色调统一；要围绕网页主题选择颜色2、讲授新课（1）网页中的图像格式 *BMP：位图格式 GIF：Graphics Interchang

22、e Format可交换的图像格式 特点：只支持256种颜色支持透明效果、可以交错下载、可以实现动画效果、文件所占用空间小、不能支持渐变色彩、更改图片大小要从原文件改起 JPEG：Joint Photographic Experts Group联合摄影专家组文件格式 特点：支持24位图像、有损压缩。（2）插入图像3、巩固练习练习设置图像的属性。七、作业处理在表格中插入一张背景图像。 八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：制作地图网页及电子相册一、教学基本内容1、制作地图网页2、电子相册二、课型：实验课三、课时：2个课时四、教学重点

23、与难点重点：制作地图网页难点：热点选择五、教学目的1 、掌握图像使用2 、掌握图像的其它操作六、教学过程此节是实验课，实验步骤为：（01）启动Dreamweaver 8，打开ch05SAMPLE01MAP.ASP文件。（02）选中该文档中“丝绸之路示意图”图像。（03）在菜单栏中依次选择“窗口”|“属性”选项或按下Ctrl+F3组合键，打开“属性”面板，如果没有显示图像地图制作工具，单击“属性”面板右下角的扩展箭头， （04）在“属性”面板中的“地图”文本框中输入图像地图名称。（05）创建图像地图（热区），可根据地图中不同的形状选择不同的热区工具，在所选定图像上拖动鼠标指针，便可完成图像地图的

24、创建。（06）图像地图创建完成后，选中所创建的热区，打开“属性”面板。在热点“属性”面板的“链接”文本框中输入链接文件的名称，或者单击文件夹图标并通过浏览选择在用户单击该热点时要打开的文件。在“目标”下拉列表中，选择用于打开该文件的窗口。（07）在“地中海”创建一个矩形热区，在“替换”框中输入“关于地中海的论述”替代文本，并设置好链接（链接到DZH.ASP）。（08）按照相同的方法分别为不同的路线或地名创建热区，并输入不同的链接和替代文字，保存并预览。当鼠标指针移到图像地图中时将显示“替换”框中的内容，如果设置有链接，单击便可进入所链接的文档。（9）完成创建。第六章 框架课题：框架集的创建及其

25、基本操作一、教学基本内容1 、演示并讲解用框架制作的网页 2 、框架的基本结构 3 、框架的各种属性 4 、框架结构之间的链接二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、框架的各种属性 2、框架结构之间的链接 难点：1、框架的各种属性 2、框架结构之间的链接五、教学目的1 、掌握框架的基本结构 2 、掌握框架的各种属性 3 、掌握框架结构之间的链接六、教学过程1、复习引入 回忆：Frontpage中的框架应用 2、框架的应用 重复出现在不同网页文档中的元素：网页标题、导航栏等等 3、建立框架（1） 将对象面板切换到框架页（Frame）（2）插入不同的框架，一个区域对应于一个页

26、面（3）在框架中打开原有网页：文件（File）在框架中打开（Open in Frame） 4、保存框架 （1） 选择文件（File）/保存所有框架（Save Frameset），先保存框架文件，接着会出现提示，逐个保存框架中的网页（2） 保存时注意名称5、框架编辑框架面板：窗口（Windows）其它（Other）框架（Frame）调出框架面板选定框架组：单击整个框架组的边框；或在框架面板中单击整个框架的边框框架属性：名称、源文件，滚动否，是否可以调整大小，是否有边框，边框颜色，边界宽度，边界高度等拆分框架：按Alt键，拖动边框；修改（Modify）框架页（Frameset）拆分左/右/上/下（

27、split frame top/bottom/left/right） *注意区别：插入一个新的框架与拆分框架的区别6、框架所对应的HTML代码 框架组：通过设置rows或cols来设定是横的还是竖的，是顶部还是底部 框架组属性：frameborder框架是否有边框，border边框的宽度多少，framespacing框架间距框架项： 框架属性：src指向的页面，name框架名，scrolling是否有滚动条，noresize不能由用户改变大小 七、作业处理1、建立框架页面如图，菜单链接到不同的图片，单击菜单中的一项，图片在右边的框架中打开2、建立左右型的框架，并在其中的左框架中插入上下型的框架

28、3、建立左右型框架，并将左边的框架拆分为上下型八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：创建电子图书一、教学基本内容利用框架制作电子图书网页 二、课型：实验课三、课时：2个课时四、教学重点与难点重点：框架结构之间的链接 难点： 框架集五、教学目的1 、掌握框架的运用 2 、掌握框架结构之间的链接六、教学过程步骤：（01）打开或新建一个空白的文档，在该文档中创建一个 框架集。（02）命名框架。将左列框架命名为index、右列上部框架命名为_top、右列下部框架命名为main。（03）保存框架。将框架集保存为06A.asp文档，inde

29、x框架保存为06B.asp文档，_top框架保存为06C.asp文档，main框架保存为06D.asp，文档均保存在ch06文件夹下。（04）设置框架的行或列。将index框架的列设置为150像素，_top框架的行设置为90像素。（05）设置页面的配色方案。单击“属性”面板中的“页面属性”按钮，将index框架的06B.asp文档的文本颜色设置为#669966，背景颜色设置为#FFCC99。（06）将链接颜色按图6-14右侧图进行设置，然后单击“确定”按钮。（07）定义样式。选择“文本”|“CSS样式”|“新建”选项，将index框架的06B.asp文档的tr标签定义为宋体9points。（0

30、8）填充页面。在index框架06B.asp文档中输入如图6-15所示的文本并插入一个9行1列的表格。其中“休闲娱乐”文本为隶书5号字体，颜色为#66CC00；表格边框的颜色为白色；单元格的高度为30像素，单元格的对齐方式为水平居中、垂直居中。（09）在“页面属性”对话框中将_top框架的标题设置为“标题栏”，将所有边界都设置为0（10）将光标停留在_top框架中，输入文本并插入images文件夹下的图像，其中文本为4号宋体，颜色为#66CC00。（11）设置链接。选中左边框架（index）中目录下的“考试作弊”文本，在“属性”面板中的“链接”框中设置与之对应的笑话内容（WJ/wj6-1.as

31、p）的链接。这时“目标”框变为激活状态，从“目标”下拉列表框中选择链接的目标为main。（12）使用相同的方法设置其他“笑话”目录所链接的内容和链接目标，其他的链接目标均为main框架。笑话目录各项和WJ文件夹中wj6-1.aspwj6-8.asp是一一对应的关系。（13）指定框架源文件。选中main框架，在“属性”面板中的“源文件”文本框中设置框架的源文件。单击旁边的文件夹，选择WJ文件夹中wj6-1.asp文件（14）在文档窗口的菜单栏中选择“文件”|“保存全部”选项，将所有的框架进行保存。（15）按F12键便可预览该实例第七章 页面布局视图的使用课题：布局表格和布局单元格的基本知识及操作

32、一、教学基本内容1、布局表格和布局单元格的基本知识2、布局表格和布局单元格的创建二、课型：新授课三、课时：2个课时四、教学重点与难点重点：创建布局表格和布局单元格难点：布局表格的使用五、教学目的1 、掌握布局的基本知识2 、熟练运用布局表格和布局单元格六、教学过程1、引入在第四章学习过了表格的布局，用表格与布局表格相比，看其特点，从而使学生更加了解什么是布局表格和布局单元格。2、讲授新课（1）布局表格的基本知识（2）布局表格和布局单元格的基本操作选择布局表格：须要执行下列操作之一：a:双击所绘制的布局表格中的 标志。b:单击文档窗口左下角的标签，如图7-3所示。调整布局单元格的大小:具体操作步

33、骤如下：（01）选中要调整的布局单元格。（02）选择布局单元格边线上的调整手柄，拖动鼠标便可调整布局单元格的大小移动布局表格和布局单元格:（01）选中要移动的布局表格或布局单元格。（02）使用方向键便可移动布局表格或布局单元格了，但这样每次只能移动1像素的距离；如果是在按下Shift键的同时再利用方向键移动，每次可移动10像素的距离。设置布局宽度为固定宽度:具体操作步骤如下：（01）选择要设置固定宽度的布局表格。（02）在菜单栏中选择“窗口”|“属性”选项，打开“属性”面板。（03）在“属性”面板中选择“固定”单项按钮，并在后面的文本框中输入一个数值，在此输入640，其单位在默认的条件下是像素

34、。七、作业处理进入布局模式，练习布局与布局单元格八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：制作完整页面一、教学基本内容利用布局制作完整页面 二、课型：实验课三、课时：2个课时四、教学重点与难点重点：布局表格的创建 难点：布局单元格的使用五、教学目的1 、掌握布局表格的运用 2 、掌握布局单元格的作用六、教学过程步骤：（01）选中在布局表格中所绘制的布局单元格，在“属性”面板中将该布局单元格的宽度也设置为775像素，高度为68像素。（02）将光标停留在布局单元格内，选择菜单栏中的“插入”|“图像”选项，在弹出的“选择图像源文件”对话框

35、中，选择存放在ch07IMAGES文件夹下的BANER.JPG图像（03）选择图像文件后，单击“确定”按钮，便可在布局单元格内插入该图像文件（04）单击“绘制布局单元格”按钮 ，在已经插入图像的布局表格下面绘制3个布局单元格（05）分别选中所绘制的布局单元格，并打开“属性”面板，将布局单元格的宽度和高度分别设置为：（156、40）、（338、40）、（199、40）。（06）在所绘制布局单元格1和2内分别输入文本“生活空间”和“音乐天地”，并在布局单元格3内插入存放在ch07IMAGES文件夹下的01.GIF图像（07）在其下绘制2个布局单元格，分别选中并同时打开“属性”面板，将单元格的宽度和

36、高度分别设置为：（148、326）、（516、326），如（08）在图7-17所示布局单元格（1）中绘制4个宽度为136像素，高度为34像素的布局单元格，并在其单元格内分别输入文本，（09）填充布局单元格内容。完成所对应的布局单元格文本的输入（10）最后将“布局模式”转化为“标准模式”。在“标准模式”中根据自己的审美观进行调整，可为布局单元格的边框进行修饰第八章 链接课题：链接与路径介绍一、教学基本内容1、链接的基本知识2、路径的基本知识二、课型：新授课三、课时：2个课时四、教学重点与难点重点：链接与路径的概念难点：路径的理解五、教学目的1 、掌握路径的类型2 、能够正确运用路径六、教学过程1

37、、引入在打开一个文件或插入一张图片的时候都会用到路径，由此来引入究竟什么是路径。2、讲授新课（1）URL简介URL（Uniform Resource Locator，统一资源定位符）主要用于指定欲取得因特网上资源的位置与方式。一个URL的构成如下：资源取得方式：/URL地址port/目录/文件名称（2）路径类型要正确创建链接，必须了解链接与被链接文档之间的路径。每个网页都有一个唯一的地址，即URL。常用的文档路径类型有3种：绝对路径 ：绝对路径就是被链接文档的完整URL，包括所使用的传输协议（对于网页通常是http:/）。文档相对路径 ：文档相对路径指以原来文档所在位置为起点到被链接文档所经过

38、的路径。这是用于本地链接最适宜的路径。根相对路径：根相对路径是指从站点根文件夹到被链接文档所经过的路径。一个根相对路径以正斜杠开头，其代表站点根文件夹。给出例子以区分这三种类型：例：a: c:/website/img/photo.jpg(这是photo.jpg的绝对路径)b: c:/website/web/index.htm c:/website/img/photo.jpg（指出photo.jpg的相对路径）七、作业处理通过在地址栏中输入一个文件的地址来练习路径的使用。八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。课题：创建链接一、教学基本内

39、容1、创建锚记链接2、创建空链接3、创建下载链接二、课型：讲授+实验三、课时：2个课时四、教学重点与难点重点：下载链接难点：锚记链接五、教学目的1 、掌握链接创建的不同方法2 、掌握锚记链接的创建六、教学过程1、创建链接方法：（01）选择窗口中要链接的文本或图像。选择“窗口”|“属性”选项，打开“属性”面板，并执行以下操作之一a:单击“链接”框右边的“浏览文件”图标 ，如图8-1所示，在弹出的“选择文件”对话框中浏览并选择一个文件。注意，在“选择文件”对话框中的“相对于”下拉列表中，通常选择“文档”而不选择“站点根目录”。单击“选择文件”对话框中的“确定”按钮，在“链接”框中将显示出被链接文件

40、的路径。b:在“属性”面板的“链接”框中，输入要链接的文档的路径，如图8-2所示。（02）选择被链接文档的载入位置。在默认情况下，被链接文档在当前窗口或框架中打开。要使被链接的文档显示在其他地方，需要从“属性”面板的“目标”下拉列表中选择一个选项。2、创建锚记链接锚记链接（简称锚记）就是在文档中插入一个位置标记，并给该位置设置一个名称。步骤：（01）打开ch08LIANJIE.ASP文件，把光标置于文档中“比输赢”文本的右边（文档中需要设置锚记的地方）。（02）在文档窗口的菜单栏中依次选择“插入”|“命名锚记”选项（03）在“命名锚记”对话框的“锚记名称”文本框中输入锚记名：mj1（注意，所命

41、名锚记是区分大小写的）。（04）如果锚记标记没有出现在插入点，选择“查看”|“可视化助理”|“不可见元素”选项，在所选择插入“锚记”的位置便会出现锚记标志，如图8-16所示。（05）同样的方法，分别在笑话栏下的“先生尿裤”、“大街上叫喊的人”文本的右边插入锚记，并且分别命名为mj2、mj3。（06）在菜单栏中选择“窗口”|“属性”选项，打开“属性”面板。（07）选中窗口左边“笑话集锦”下的“比输赢”文本，在“属性”面板中的“链接”框中输入#mj1。（08）同样的方法，分别创建“笑话集锦”栏下的“先生尿裤”、“大街上叫喊的人”文本与#mj2、#mj3的锚记链接。（09）保存操作结果。七、教具所用

42、的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。第九章 层与时间轴课题：层的创建与设置一、教学基本内容1、层的创建2、层的基本操作3、层的属性二、课型：新授课三、课时：2个课时四、教学重点与难点重点：层的属性难点：z-index、子层五、教学目的掌握层的相关操作，为动画设置打基础六、教学过程1、复习引入 网页中的定位-表格2、 建立层（1）菜单，插入（Insert）层（Layer），默认大小：200115（2） 对象面板3、 层的意义（1）可以将元素重叠（2）可以用于精确定位网页元素（3）可以通过应用时间线使层移动和变换，实现简单的动画效果（4）网页和网页

43、元素的可见或不可见可以通过层的显示和隐藏属性实现（5）层可以转换成表格 4、层属性 （1）层编号（LayerID）（2）Z轴（Z-index）：控制层重叠时谁在前谁在后的问题 （3）背景图像（Bgimage） （4）显示（Vis）：默认（default）、（继承）inherit、（可见）visible、隐藏（hidden）四个选项之一 （5）标签（Tag）：DIV、SPAN、LAYER、ILAYER，选DIV （6）溢出（Overflow）：当层内容超过层大小的时候如何显示。显示层内的全部内容（visible）、只显示层尺寸以内的内容（hidden）、不改变层大小、只添加滚动条（scroll）、只有层不够大时才显示滚动条（auto） （7）剪裁（Clip）：指定层的哪一部分是可见的，输入的数值是距离层的4个边界的距离 6、 子层 （1）在一个层中再插入一个层，后者就是前者的子层（2）子层不一定在父层里面（3） 移动子层，父层位置不发生变化（4）移动父层，子层跟着变化，对父层的相对位置不变（5）子层可以继承父层的可见性 7、层与表格的转换 （1）层转换为表格：修改-转换层到表格 （2）表格转换为层：修改-转换表格到层七、作业处理1、制作阴影字 2、用层将5个图片放置围绕一个图片 3、将上题结果转换为表格八、教具所用的教室为多媒体实验室，因此所要板书的内容