Dreamweaver理论教案.doc

学习资料收集于网络，仅供参考女字旁：奶、妈、姑、妹一条尾巴 一只猴子 一群猴子 一枝铅笔 一袋洗衣粉又细又长 又白又胖 又唱又跳 又紫又亮王 马 日 巴 义 里 那 力 对 云 心 日虫字旁：蚂、蚁、虾女 女字旁（好 妈 奶） 心 心字底（想 思 念）杨树高高的高高的杨树（20）燕子会捉（空中）的害虫，青蛙会捉（田里）的害虫，啄木鸟会捉（树干上）的害虫，七星瓢虫专（爱吃）（叶子上）的蚜虫。越来越快 越来越黑宝盖头：完、家、定课题一 创建个人网站课时：2一、教学目标 理解网站的栏目与目录结构的对应关系。 认识常用的网页制作软件。 掌握“文件”面板组的使用方法二、教学分析1. 教学重点 规划个人网站。 创建站点。 管理站点。 创建网站目录结构。2教学难点 通过任务提出，分析任务需求，形成解决问题的思路。 创建、管理站点 划分网站的目录结构。三、教学过程教学环节教学内容备注组织课堂导入知识任务流程导入任务分析任务知识讲解集中学生注意力，准备上课。通过提问考察学生对网站的了解程度。1喜欢浏览什么类型的网站，这些网站都有什么用途，通过这些网站得到了什么信息？2常见的网站主题类型都有哪些？什么是个人网站，个人网站通常包含哪些栏目？通过学生对以上问题的回答，了解学生在学习这门课程之前对网站的了解程度，在此基础上简单介绍什么是网站，网站都有什么作用，为什么要创建网站。提出任务一：规划个人网站。1定位网站的主题和名称。2规划网站的栏目与目录结构。3选择网页制作软件提出任务二：创建个人网站站点。启动软件。通过学生尝试操作，使用两种常见方法启动软件。 打开计算机后，单击“开始”菜单中的“程序”选项，选择“Macromedia”目录下的“Macromedia ”选项, 运行。 双击桌面上的“Macromedia ”快捷方式图标，运行。启动软件后，介绍软件的界面及起始页的功能。创建网站站点。在启动软件的基础上，通过学生尝试操作，使用“站点”菜单中的“新建站点”选项进入新建站点流程。在弹出的“站点定义”对话框中，选取“基本”选项卡，输入网站名称“幽幽我心的个人网站”，单击“下一步”按钮。至此，站点定义已经完成，查看界面右边面板组中的“文件”面板，可以在站点列表中发现，名为“幽幽我心的个人网站”的新站点已经创建，并且该站点下没有任何内容。提出任务三：管理个人网站站点。在站点创建之后，站点文件保存在本地计算机的某一位置上，整个站点形成了整体，便于对站点进行管理，站点的管理通常包括了编辑、复制、删除、导出和导入。导出站点选择“站点”菜单中的“管理站点”选项，在弹出的“管理站点”对话框中可以看到上个任务中创建的网站“幽幽我心的个人网站”，选择要导出的站点“幽幽我心的个人网站”，单击“导出”按钮。在“导出站点”对话框中，选择保存在D盘下的“mysite”文件夹，单击“保存”按钮，在“D:mysite”文件夹中生成了一个扩展名为“.ste”的文件，这个文件就是“幽幽我心的个人网站”的导出文件。导入站点。选择“站点”菜单中的“管理站点”选项，单击“导入”按钮，在“导入站点”对话框中，选择前面保存的扩展名为“.ste”的文件，单击“打开”按钮，导入的站点便出现在列表中，因为有重名站点，导入的站点名称后面会自动加0。复制删除与编辑站点分组讨论，学生自主完成站点的复制与删除，最终只保留一个站点。提出任务四：实现任务一中规划的目录结构。启动，讲解使用“文件”面板和“文件”菜单里的“新建”选项创建首页。打开首页，分组讨论界面包含几部分，引导学生记住各部分功能。步骤：在“文件”面板中选择已经创建好的站点“幽幽我心的个人网站”，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”选项。在“文件”面板中选择刚建好的文件，单击鼠标右键，在弹出的快捷菜单中选择“编辑”“重命名”选项。作为首页，将其名称设定为“index.html”在“文件”面板中选择“index.html”文件，单击右键选择“设成首页”选项。通过“文件”面板创建站点目录。步骤：使用“文件”面板新建文件夹，方法和新建文件方法类似根据以上学习，让学生分组讨论总结使用“文件面板”删除、复制、剪切、粘贴、重命名网页或文件夹的操作方法。展示的作品，网站主题类型为个人网站。知识讲解知识讲解学习资料课题二 添加首页内容课时：2一、教学目标 掌握添加和编辑网页文本的基本操作。 能够根据具体需求进行文本各种属性及样式的编辑与设置。 掌握插入图像的各种方法。二、教学分析1. 教学重点 添加首页文本。 使用CSS规则美化文本。 添加图像。 创建与应用CSS美化网页。2教学难点文本样式的设置、应用及修改。 使用CSS规则美化文本。 添加图像。三、教学过程教学环节教学内容备注组织课堂导入知识任务流程导入任务分析任务知识讲解集中学生注意力，准备上课。在开始新的课程学习之前，先来了解一下，网页元素的构成，为什么要在首页中添加文本。通过浏览新浪、搜狐等著名网站的网页，引导学生分析网页的构成元素，得出结论：网页元素归纳起来有文本、图像、表格等，其中最常用的是文本。因而，为首页添加内容，最重要的是为首页添加文本。提出任务一：添加首页文本。、建立首页空白文件“index.html”，本单元将对首页修改标题，添加准备好的内容并设置其格式。、输入首页文本内容并划分段落 输入首页文本将素材“index.txt”文本内容复制粘贴到文档窗口。通过比较使学生明确：从普通文档中复制过来的文本不保留格式内容，只保留段落结构，并且在文本遇到文档窗口的边界时会自动换行。 换行操作a“自我介绍”、“青春寄语”和“立志飞翔 ”部分进行段落划分b“立志飞翔 ”部分进行强制换行总结，三种换行方式的特点及其实现方法。 输入连续空格演示输入连续空格的几种方式。完成“青春寄语”部分首行缩进的操作。最后，保存网页。提出任务二：完成首页文本样式设置，为首页添加水平分隔线与列表通过浏览网站，引导学生明白文本字体、字号、颜色、加粗、倾斜及对齐方式等文本样式的设置是必需的，那么，如何完成文本样式的设置与编辑呢？ 文本样式设置与应用 为网页中第一行文字“幽幽我心的个人网站”设置文本样式回忆Word文本格式设置的设置步骤：首先选中相应文本；接着通过格式工具栏进行设置。网页制作也类似，首先要选中相应文本，接着通过文本属性面板完成设置。简介文本属性面板各部分及其功能，讲解为“字体”列表项添加字体的方法。 为网页中第二段标题文字“自我介绍”设置文本样式。 为标题文字“青春寄语”、“立志飞翔”，应用样式（为“自我介绍”设置的样式）样式重命名演示为“幽幽我心的个人网站”中的文本样式重命名的方法，并按照课本P37页表格要求，设置“青春寄语”与“立志飞翔”中的文本样式并重命名。修改文本样式演示修改title2样式：单击“样式”列表旁的按钮，打开“CSS样式”面板。对样式“title2”进行编辑，在面板当中修改颜色值为“#FF6600”。让学生观察应用了“title2”样式的文本颜色是否会发生相应的变化。插入列表与水平线选中“自我介绍”部分的文本内容，选择“属性”面板中的“项目列表”，为选中文本插入项目列表。将光标插入到“青春寄语”标题之前，将“插入”栏切换到“HTML”类别，选择其中的“水平线”按钮，在“自我介绍”内容和“青春寄语”内容之间插入一条水平线，起到分隔的作用。提出任务三：为首页添加图像内容。通过联想学校宣传栏、报纸、儿童书籍以及课本等内容，总结出其中都有图像；引导学生懂得通过插入图像可以使内容生动直观，具体形象。进一步打开两个网页，一个是全文本的，一个是图文并茂的，让学生通过比较这两个网页明确哪一个更适用并说明原因，引出要使首页内容生动形象，图像的添加和编辑就必不可少了。网页中图像文件的格式及其特点教师提出下列问题让学生分组查找答案：通常在网页中使用什么格式的图像文件，它们的特点是什么？在同学回答上述问题基础上，教师总结并讲解在网页中通常使用“.jpg”、“.gif”和“.png”格式图像文件及其这三种格式图像文件的特点。准备素材：将本单元素材文件夹中的“images”文件夹下的全部图像素材复制到D:mysiteimages文件夹下。使用文件面板插入图像拖曳文件面板中的 “top.jpg”到“自我介绍”标题前，插入图像“top.jpg”。选中所插入的图像，在属性面板中设置对齐方式为“右对齐”。预览页面效果。通过复习Word中插入图像的方法，总结出另外三种插入图像的方法。A使用菜单栏插入图像定位插入点到“立志飞翔”文字前，选择菜单栏“插入”菜单中的“图像”选项，插入“flying.gif”图像文件并设置对齐方式为“左对齐”。B使用插入栏常用类别中的按钮插入图像定位插入点到“立志飞翔”的第三段文字前，选择“插入”栏“常用”类别中的按钮，插入“flying.gif”图像文件并设置对齐方式为“右对齐”。C使用Ctrl+Alt+I组合键插入图像定位插入点到“立志飞翔”的第五段文字前，使用Ctrl+Alt+I组合键，插入“flying.gif”图像文件并设置对齐方式为“左对齐”。提出任务四：使用CSS美化网页。在之前的任务中使用属性面板来设置并应用文本样式，可以简化文本属性的设置过程。其特点主要表现为：样式可以一次设置多次应用，可以同步修改已应用的样式。创建与应用CSS文本样式。使用CSS面板创建文本样式“title3”，并将新样式应用到“青春寄语”部分的标题文本上。讨论这种方法与之前学习的设置方法有什么不同。 CSS样式的三种类型 “类”样式：“类”样式是最为灵活的一种类型的样式，它可以任意定义名称并且应用到网页中的各种对象上。 “标签”样式：“标签”样式的定义是建立在HTML语言基础上的，可以针对网页中的各种标签进行定义，所以用这种类型的样式定义的名称仅限于固定的标签名称，并且在样式定义后，直接被应用到页面中相应的标签对象中。“高级”样式：这种样式仅用于定义超级链接的4种状态，分别是：“a:link”用于定义超级链接初始状态；“a:visited”用于定义已经访问过的超级链接状态；“a:hover”用于定义鼠标经过超级链接对象时的状态；“a:active”用于定义超级链接的活动状态。 CSS样式可定义参数。“类型”选项：用于定义常规的文本属性，包括“字体”、“大小”、“颜色”等选项。“背景”选项：用于定义背景属性，可设置“背景颜色”、“背景图像”、背景图像的“水平位置”等选项。“区块”选项：用于定义文本的间距与对齐方式等属性。“方框”选项：用于定义表格、框架等对象的属性。“边框”选项：用于定义各种对象的边框属性，表格、框架、水平线的边框样式都可以使用这一选项进行定义。“列表”选项：用于定义文本列表的属性。“定位”选项：用于定义层对象的属性。“扩展”选项：用于定义光标、图像等内容的视觉效果的扩展属性。展示的作品，网站主题类型为个人网站。知识讲解知识讲解课题三 创建、编辑表格课时：2一、教学目标 掌握表的创建和编辑，能够根据具体需求灵活应用表格，并能利用表格进行页面布局和排版。 掌握表格的基本操作：如合并、拆分单元格，添加、删除行或列，调整行高、列宽。二、教学分析1. 教学重点 创建表格的基本方法。 创建嵌套表格。 设置单元格属性 设置表格属性2教学难点 分析页面的表格布局。 创建嵌套表格。 单元格和表格属性的区分三、教学过程教学环节教学内容备注组织课堂导入知识任务流程导入任务分析任务知识讲解集中学生注意力，准备上课。通过提问考察学生对插入图像基础知识的了解。如何在网页上插入一张图片，并调整图片的大小、位置？学生分组讨论如何在网页上制作一个班级通讯录，每行内容有“姓名、照片、地址、联系电话”。通过上面讨论，引导学生认识利用表格制作通讯录是方便快捷的方式，再引导学生联想生活中用到的表格，进而了解表格在网页制作中的广泛应用。在中，表格是用于在页面上显示表格式数据及对文本和图像等元素进行布局的强用力的工具。本任务将学习在网页制作中如何灵活运用表格。提出任务一：利用表格规划、布局作品展示网页。依据设计图样，可以使用四个表格把页面划分为四个区域，四个表格分别命名为“table1”、“table2”、“table3”和“table4”。依据不同的设计内容，这四个表格还需要进行相应的编辑与嵌套。分析网页布局 见课本图3-2，教师带领学生进行页面表格分析。引导学生了解：“table1”是一个2行1列的表格。第一行用于放置网站标题及图像，第二行嵌套一个1行5列的表格“table1-1”，用于放置五个导航按钮。“table2”是一个1行4列的表格。左右单元格为空白区域，中间两个单元格分别用于放置“作品展示”和“友情链接”两张图像。“table3”是一个1行3列的表格。左右单元格为空白区域，中间单元格用于放置作品分类标题和图像。在中间单元格嵌套一个6行1列的表格“table3-1”。“table3-1”表格的每一行再嵌套一个表格，其中第一、三、五行分别嵌套一个1行2列的表格，用于放置图标及作品题目；第二、四、六行分别嵌套一个1行5列的表格，放置三幅作品及左右两个空白区域。“table4”是一个3行1列的表格，第一行是空白区域，第二行通过设置行属性显示为一条细线，第三行放置版权信息。 教师举一些网页布局的实际例子让学生进行协同分析。总结：通过以上几个实际网站页面的例子，介绍表格布局知识，即许多网页的表格布局可分为上、中、下三个部分，上面部分放置网页的标题，中间部分放置网页的主要内容,下部分放置制作者的信息及版权信息等。上、中、下三个部分又包含各自的嵌套表格来布局相应的内容。提问：回想以前打开一张网页的时候是所有的内容都同时全部显示吗？如果不是的话是怎样进行显示的呢？为什么这样显示？表格布局在这里有什么作用？总结：如果使用表格布局网页结构不合理，会降低网页浏览速度。因为浏览器在解析网页时，先将整个网页的结构下载完后才显示内容，如果不使用嵌套表格布局网页只使用一个表格会非常复杂，浏览者要等待很长时间才能看到网页内容。通常用表格布局页面时，应该循以下几点：a整个网页不要放在一个表格里，尽量使用多个表格来进行布局。b表格的嵌套层次尽量要少。c单一表格的结构尽量整齐，不要太复杂。创建目录结构在Dreamweaver cs5中打开“幽幽我心的个人网站”，依据第一单元建立的网站目录结构，在本栏目“works”文件夹中新建文件“works.html”，然后把光盘中本单元素材中的“wkimages”、“flash”、“links”文件夹复制到本栏目“works”文件夹中。本栏目目录结构如课本表3-1所示。创建表格的知识 练习插入一个表格：学会使用菜单、“插入”栏、快捷键创建表格。 回答表格对话框中如下选项的作用：“页眉”选项组、“标题”、“对齐标题”、“摘要”。 要求学生回答下列问题：a大多数浏览器默认显示单元格边距、间距是多少？若要确保浏览器显示的表格没有边距和间距，必须把单元格边距和单元格间距设置为多少？b如果没有明确指定边框的值，则浏览器怎么显示表格边框呢？大多数浏览器默认显示边框粗细是多少？若要确保浏览器显示的表格没有边框应该怎么办？若把边框设置为0，则如何查看单元格和表格的边框呢？c在网页制作过程中，元素的长度单位可以选用百分比或像素来表示。请解释什么是像素、百分比？它们的区别是什么？“百分比”是相对于谁说的？（教师在最后总结时一定要强调是父元素，其绝对大小会随所属父元素的大小变化而发生变化。）d在用表格布局页面时，宽度设置为多少时页面不会出现水平方向的滚动条？（教师总结：为防止浏览过程中出现水平方向的滚动条，通常在800*600分辨率下，把表格宽度最大设置为778像素，在1024*768分辨率下最大设置为1002像素。）e如何给当前表格命名？如何删除当前选中的表格？f嵌套表格的宽度受所在单元格宽度的限制吗？提出任务二：编辑任务一中已创建成的表格。表格插入后和课本图3-1的表格相比较，会发现相差甚远，至少表格的高度就相差很多，有些单元格还需要调整。要完成最终效果，就必须对表格进行编辑。观察任务一中创建的表格，对比最终效果，需要分别对表格“table1”、“table2”、“table3”、“table4”及其嵌套表格，设置对齐、行高与列宽、背景颜色、背景图像和边框等属性。知识点讲解 选中单元格和表格a引导学生利用已经学过的Word表格知识迁移总结什么是表格、单元格、行、列。b介绍表格的3个重要标签“table、tr、td”并演示用法。c学生分组讨论选择表格的方法，并最后总结。d学生分组讨论选择表格中行、列、单元格的方法，并最后总结。思考：选中表格中所有单元格和选中整个表格是一个概念吗？带着问题学习下面知识。 设置单元格属性、表格属性利用属性面板设置属性。a表格“属性”面板参数介绍“表格Id”：表格的Id，为表格命名。“行”和“列”：表格中行、列的数目。“宽”和“高”：以像素为单位或按百分比指定表格宽度、高度。通常不需要设置表格的高度。“填充”：指的是单元格边距，即单元格内容和单元格边框之间距离，单位为像素。“间距”：指的是单元格间距，即相邻单元格之间的距离，单位为像素。“对齐”：确定表格相对于同一段落中其他元素（例如文本和图像）的显示位置。“边框”：指定表格边框的宽度，单位为像素。“清除列宽”按钮：从表格中删除所有明确指定的列宽。“清除行高”按钮：从表格中删除所有明确指定的行高。“将表格宽度转换成像素”按钮和“将表格高度转换成像素”按钮：将表格中每列的宽度或高度设置为以像素为单位的当前宽度，同时将整个表格的宽度设置为以像素为单位的当前宽度。“将表格宽度转换成百分比”按钮和“将表格高度转换成百分比”按钮：将表格中每列的宽度或高度设置为按百分比表示的当前宽度，同时将整个表格的宽度设置为按百分比表示的当前宽度。b单元格“属性”面板参数介绍“合并单元格”按钮：将所选的单元格、行或列合并为一个单元格。“拆分单元格”按钮：将一个单元格拆分成多个单元格。一次只能拆分一个单元格；如果选择的单元格多于一个，则此按钮将禁用。“水平”：设置单元格、行或列内容的水平对齐方式。“垂直”：设置单元格、行或列内容的垂直对齐方式。“宽”和“高”：可以以像素为单位或按占整个表格宽度或高度的百分比进行设置。若让浏览器根据单元格的内容以及其他列和行的宽度和高度自动确定适当的宽度或高度，此文本框采取默认设置（空）。“不换行”：可以防止换行，从而使给定单元格中的所有文本都在同一行。如果启用了“不换行”，则当键入数据或将数据粘贴到单元格时，单元格会加宽来容纳所有数据。“标题”：可以将所选的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中。“背景”和“背景颜色”：设置所选单元格、列或行的背景图像和背景颜色。“边框”：单元格的边框颜色。操作示范 编辑表格“table1”设置表格“table1”在页面中居中对齐。设置表格“table1”的第2行的单元格背景图像为“wkimages”文件夹下的dhJpg。 编辑表格“table1-1”设置表格“table1-1”宽500像素、高34像素、左对齐。把“table1-1每个单元格宽度设为100像素。 编辑表格“table2”设置表格“table2”的属性：“表格Id”为“table2”、高“50像素”、对齐方式为“居中对齐”，背景颜色为“#FFFFFF”，第一列和第四列的列宽均为17像素。 编辑表格“table3”及其中的嵌套表格设置表格“table3”为“居中对齐”，背景颜色为“#FFFFFF”，第1列与第3列列宽均设置为17像素。设置“table3-1”边框粗细为1像素，边框颜色为“#EFEFEF”。分别设置表格“table3-1”第一行、第三行和第五行单元格中嵌套的表格“web1”、“flash1”和“3D1”的属性：高30像素，对齐方式为左对齐，第1列列宽为30像素。分别设置表格“table3-1”第二行、第四行和第六行单元格中嵌套的表格“web2”、“flash2”和“3D2”的属性：第1列和第5列的列宽均设置为40像素。 编辑表格“table4”设置表格“table4”对齐方式为居中对齐，背景颜色为“#FFFFFF”。将第2行行高设置为1像素、背景颜色设置为“#EFEFEF”，这样表格“table4”的第2行就显示为一条高1像素、颜色为“#EFEFEF”的细线（注意：必须在“代码”视图里将表格“table4”第2行单元格内的“ ”删除，否则行高不会以1像素显示）。至此，完成了“作品展示”网页中所有表格的编辑工作。展示的作品，网站主题类型为个人网站。知识讲解知识讲解课题四 添加表格内容及建立超链接课时：2一、教学目标 掌握在单元格中插入图片、文字。 掌握在单元格中设置图片格式、文字格式。 理解超级链接的含义，超级链接中的链接源和链接目标。 掌握为网页中的文本、图像建立超级链接。二、教学分析1. 教学重点 在单元格中插入图片、文字。 在单元格中设置图片格式、文字格式。 为网页中的文本、图像建立超级链接。2教学难点使用表格的“扩展”、“布局”视图模式。理解不同类型的链接路径。三、教学过程教学环节教学内容备注组织课堂导入知识任务流程导入任务分析任务知识讲解集中学生注意力，准备上课。通过提问考察学生对插入表格的掌握情况和上节课作业的完成情况。用表格布局好页面后，就可以添加相应内容了，本次课任务就是在上一任务完成的表格内添加内容。提出任务一：向表格中添加内容添加并编辑表格内容 向表格“table1”中添加内容利用第二单元所学的方法，在“文件”面板中打开“works”文件夹，把“wkimages”文件夹下的“title.jpg”图像添加到表格“table1”的第1行中。将光标放入表格“table1-1”的第1列的单元格中，输入导航文字“首页”。在第2至5列的单元格中分别输入文字“作品展示”、“心情日记”、“家乡山水”和“访客信息”。 用鼠标拖拽选中表格“table1-1”的全部单元格，在单元格“属性”面板中设置各单元格内容的对齐方式为“居中”，文字大小保持默认值，文字颜色为“#5E5C5D”并加粗显示。 向表格“table2”、“table3”中添加内容将光标放入表格“table2”的第2个单元格中，添加图像“works.jpg”。将光标放入表格“table2”的第3个单元格中，添加图像“link.jpg”。将光标放入表格“web1”的第1个单元格中，在“属性”面板中设置单元格水平对齐方式为“居中”，在其中添加图像“arrow.gif”。然后将光标放入表格“web1”的第2个单元格中，输入文字“网页作品”，设置文字大小为14像素，颜色为“#336666”、字体为加粗。使用同样方法在表格“flash1”和“3D1”中添加图像“arrow.gif”和文本，文本内容分别为“flash作品”和“3D作品”，并与“网页作品”文字进行同样的样式设置。选择表格“web2”的第2至4个单元格，在“属性”面板中将单元格水平对齐方式设为“居中”。在“web2”的第2个单元格中，添加图像“w1.gif”；在“web2”的第3个单元格中，添加图像“w2.gif”；在“web2”的第4个单元格中，添加图像“w3.gif”。添加好图像文件后，可以看到图像与所在行等高，为了网页美观，让图像与表格边框之间适当留白，将表格“web2”的行高设置为159像素。接下来分别选择上述三幅图像，在图像“属性”面板里设置边框为1。为这三幅图像加上边框。采用如上方法分别在表格“flash2”和“3D2”中添加内容：在“flash2”中添加的图像文件分别为“f1.gif”、“f2.gif”和“f3.gif”，在“3D2”中添加的图像文件分别为“d1.jpg”、“d2.jpg”和“d3.jpg”。 向表格“table4”中添加内容将光标放入表格“table4”第3行的单元格中，将其行高设为48像素，单元格水平对齐方式为“居中”，文字大小为12像素，然后在其中输入文字“版权所有：幽幽我心欢迎来信QQ:123456789”。 添加网页背景图像单击“页面属性”按钮，在“分类”中选择“外观”，在“外观”中设置背景图像为“D:mysiteworkswkimagesbgfill.jpg”。至此，页面内容添加完毕。思考：单元格设置背景图像和插入图像又什么区别呢？你能区别开吗？单元格背景图像的大小对单元格的显示又什么影响呢？知识讲解：表格的三种布局模式在“插入”栏的“布局”类别中提供了“标准”、“扩展”和“布局”三种表格视图模式，如图所示。“标准”模式：标准模式是表格默认的视图模式，对于表格及其内容的绝大部分操作适合在该模式下进行。“扩展”模式：在标准模式中，当图像填满整个单元格时，很难直接将光标定位在单元格中，为了解决这个问题，可以切换到“扩展表格”模式。在“扩展”模式下，临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，可以方便地选择表格中的内容或者精确地定位插入点。“布局”模式：在“布局”模式中，可以在表格添加内容前，使用“布局”单元格和“布局”表格对页面进行灵活的布局。文档窗口的顶部显示“布局模式”，指示当前正处于“布局”模式中，原来页面上的每个表格都显示为布局表格。“布局”模式的主要功能是绘制或编辑复杂的表格。“布局单元格”不能存在于布局表格之外，可以在“布局表格”中任意位置绘制“布局单元格”。单击绘制“布局表格”或“布局单元格”按钮后，可以通过拖拽鼠标来绘制“布局表格”或“布局单元格”，也可以按住Ctrl键拖拽鼠标，实现连续绘制多个“布局表格”或“布局单元格”。在布局表格内，布局单元格可以任意移动。在“作品展示“网页中已制作好网页导航，但这时的导航还没有实现超级链接。请大家回忆在以前的学习中，哪些软件利用到了超级链接？在这些软件中超级链接起什么作用？通过讨论总结使学生理解超级链接的含义。展示两个网页，一个已经创建了超级链接，一个没有超级链接，让学生进行比较找出区别。学生展开交流，通过对比找出不同点，回答教师的问题。使学生明白在因特网上有“小手”的地方就有超级链接就有信息资源，超级链接让网页“活”了起来。从而引出本课课题。提出任务二：为“作品展示”网页创建超级链接在建立超级链接之前，要明确链接源与链接目标及其链接关系，然后根据不同的超级链接类型建立超级链接。为文本添加超级链接 为网页中的导航文本添加超级链接。a超级链接的添加方法：使用“浏览文件”按钮。使用“指向文件”按钮。输入超级链接路径：直接在“链接”下拉列表框中输入文本的链接对象的路径。b“目标”下拉列表选项简介。 介绍链接路径的三种类型。提示学生注意观察：创建不同类型的超级链接时在属性面板中“链接”下拉列表框看到的路径有何不同。 结合以前的学习经验，讨论如何使用“插入”菜单或“插入”栏的“常用”类别中的“超级链接”按钮，建立超级链接。在同一站点内不同页面之间建立链接。学生实践完成教材p92页题3。设置文本超级链接样式学生讨论并回答：上网时见过哪些超级链接？它们的文本样式是什么？实际制作时如何实现这些样式？为了区别未建立链接的普通文本，可以为超级链接文本设置不同的样式。设置文本超级链接样式练习，学生实践完成教材p92页题2。为图像添加超级链接安排学生示范操作并讲解如何为图像添加超级链接，然后教师总结补充。教师讲解如何设置“提示文本”。添加“友情链接”通过在“属性”面板中的链接文本框中输入绝对路径，实现在浏览器中预览网页时，单击图像“link.jpg”，即可打开“”（网页教学网）。实现与Internet上的目标对象间的超级链接。学生实践完成教材p91页题1。添加电子邮件超级链接在网页中经常看到一些用于运行邮件发送程序的超级链接，这就是电子邮件超级链接。 教师演示建立电子邮件超级链接的三种方法。展示的作品，网站主题类型为个人网站。知识讲解知识讲解课题五 框架集课时：2一、教学目标掌握框架集的创建。掌握框架集属性设置。掌握框架中超链接的设置。掌握在网页中插入FLASH动画。二、教学分析1. 教学重点创建框架集，设置框架属性。框架中超链接的设置。在网页中插入FLASH动画。2教学难点框架的边框样式。属性面板中“目标”的种类和含义。三、教学过程教学环节教学内容备注组织课堂导入知识任务流程导入任务分析任务知识讲解通过学生总结考察学生对布局页面知识和美化页面的了解情况。1网页常见的几种布局？2布局网页的方法？如何新建和使用css样式美化页面？教师总结，通过前面的学习已经掌握了网页的基本概念以及制作网页的基本知识，包括使用css样式美化网页、使用表格进行页面布局、添加链接等。本任务学习如何在同一个网页中显示更多的内容，即在一个窗口中显示多个页面，要完成的就是创建“心情日记”页面的框架结构、使用链接控制框架内容。（同时演示任务）提出任务一：创建“心情日记”页面的框架结构。依据“心情日记”效果图，页面分为上部、左下、右下三个部分，每个部分可以用一个框架页来实现。上部框架页用于放置标题“心情日记”和图像；左下部框架页用于放置“个人日记”等五个导航链接，每个导航链接一个页面；右下部框架页用于显示与导航链接相对应的页面。下面讲解完成任务的步骤。1创建本单元的目录结构打开要完成的任务，引导学生分析本任务、创建目录，拷贝素材，结果“心情日记”目录结构如下：所在路径文件/文件夹的名字说明D:mysitediarydiary.html“心情日记”框架集网页left.html左下部框架页top.html上部框架页main1.html右下部框架显示的“个人日记”网页main2.html“情感天地”网页main3.html“休闲搞笑”网页main4.html“天下杂侃”网页main5.html“媒体日记”网页存放本栏目需要的图片存放多媒体文件创建框架集 创建框架集有两种方法，引导学生通过课本或帮助将两种方法找出来，并根据任务要求选择框架集的类型，即“上方固定，左侧嵌套”。选择框架并设置属性让学生自己找选择框架的方法（通过课本或使用帮助）。然后按照课本步骤，设置框架属性，添加每个框架的内容。讲解属性面板各选项的含义：“框架名称”：用于设置链接的“目标”属性或脚本中引用该框架时所用的名称。“源文件”：用于设置在该框架中显示的网页文件。可以单击“浏览文件”按钮 选择要显示的网页文件。“滚动”：用于设置是否显示滚动条。其中“默认”表示由浏览器的默认设置确定是否显示滚动条。大多数浏览器默认设置为在浏览器窗口中没有足够空间来显示框架内容时，显示滚动条。“不能调整大小”：用于设置在浏览器中是否可以通过拖动框架边框来调整框架大小。“边框”：用于设置在浏览器中是否显示框架边框。大多数浏览器默认设置显示边框。“边框颜色”：用于设置边框颜色。“边界宽度”：以像素为单位设置框架左边框和内容之间的距离。“边界高度”：以像素为单位设置框架上边框和内容之间的距离。提个醒：在页面中单击框架区域内部，表示要编辑该框架内容，不等于选中了框架。在“框架”面板中框架内部单击，才会选中相应框架。选择框架集并设置属性 给出选择框架集的方法，然后提问学生，应该在哪里设置属性。最后按课本步骤操作讲解。保存框架和框架集按课本步骤操作注意：上述任务创建了一个框架集网页，它包含三个框架页，其中左下部和右下部框架页已经通过“属性”面板的“源文件”选项设置为从素材中拷贝过来的网页，页面内容没有修改，所以不需要保存；而框架集页面和上部框架页是新建的，因此需要保存。保存单个框架页面时，可以先将光标定位到该框架页面，再选择菜单栏“文件”菜单的“保存框架”选项。进行下列操作前，首先要勾选菜单栏“查看”“可视化助理”“框架边框”选项（默认不被勾选），在页面中显示框架结构。 手动创建框架集用鼠标拖拽“文档窗口”中的任一边界，都可以创建包含两个框架的框架集。用鼠标拖拽“文档窗口”的任一角，都可以创建包含上下左右4个框架的框架集。 拆分框架先选中要拆分的框架，再按住键盘的Alt键用鼠标拖拽边框拆分框架。 删除框架用鼠标拖拽框架边框到相邻边框，即可删除相应框架。提出任务二：使用链接控制框架内容添加框架页的内容 制作顶部框架页所需要的网页“top.html”，创建一个空白页面“main5.html”。创建超级链接控制框架显示内容讲解“个人日记”的链接方法，让学生自己完成其他的链接，最终结果如下：文本内容链接对象目标情感天地“main2.html”mainFrame休闲搞笑“main3.html”mainFrame天下杂侃“main4.html”mainFrame媒体日记“main5.html”mainFrame完成本任务学习了在网页中创建超级链接，实现控制框架显示内容。学生分组讨论下列问题。1什么是媒体文件？2媒体文件有哪些？3列举日常生活中的媒体文件。学生回答上述问题，教师总结，从而引导学生学习媒体文件。浏览包含多媒体文件的网页，吸引学生兴趣。通过前面的学习已经系统的了解了图形图像在网页制作中的应用，但是还没有使用过媒体文件，本任务将系统学习多媒体文件在网页制作中的应用。提出任务三：在网页中插入视频文件在“媒体日记”链接的网页“main5.html”中，插入一段视频文件。在上部框架页面“top.html”中，插入Flash动画作为装饰，美化页面。1布局“媒体日记”页面运行Dreamweaver 8，在“文件”面板中，选择并打开上一任务创建的网页文件“main5.html”，通过“页面属性”设置网页上、下边距为0像素，背景色设置为“#EEF0FF”，其他采用默认值。选择菜单栏“插入”菜单的“表格”选项，插入一个宽366像素、2行2列的表格，表格边框为0。设置第一行高20像素，第二行高272像素，第一列宽17像素，第二列宽349像素（第二列列宽可以不设）。在第一行、第一列单元格中插入“D:mysitediarydiaryimages”文件夹中“point1.gif”图像，在第一行的第二列中输入文字“媒体日记”，文字大小为12像素。然后合并第二行的两个单元格。2插入媒体插件在“文档窗口 ”中，用鼠标在表格第二行内单击，选择菜单栏“插入”“媒体”“插件”选项，弹出“选择文件”对话框，如课本图4-16所示。选择“D:mysitediarymedia”文件夹中的视频文件“ljsy.mpg”，单击“确定”按钮。结合插入媒体菜单讲解有哪些媒体文件可以应用在网页设计中。3插入FLASH动画文件在顶部框架页插入Flash动画。在Dreamweaver 8中，打开“D:mysitediary”文件夹下的网页“top.html”，将插入点放到图像“biaoti.jpg”的右边，选择菜单栏“插入”“媒体”“Flash”选项，在弹出的“选择文件”对话框中选择“D:mysitediarymedia”文件夹中的Flash动画文件“top.swf”，单击“确定”按钮。保存网页“top.html”，按F12键预览插入FLASH文件后，FLASH背景与网页背景不协调。为此，在“文档窗口 ”中，单击选中刚插入的Flash动画，然后单击“属性”面板中的“参数”按钮，弹出“参数”对话框，设置“参数”为“wmode”，“值”为“transparent”，表示背景为透明。然后单击“确定”按钮，完成插入Flash及其参数设置，保存页面。多媒体文件包含Flash动画、Shockwave、Applet、ActiveX和插件等，每一类文件都有其相应的可设置参数，用于设置多媒体文件的各种属性。“wmode”是动画模式参数，“wmode”值设置为transparent代表显示Flash动画时，背景为透明。展示的作品，网站主题类型为个人网站。知识讲解知识讲解课题六 热点与锚记链接、AP元素课时：4一、教学目标掌握添加热点、创建锚记、创建锚记链接。掌握层的基本操作：选中、移动、对齐、调整大小，掌握层的属性设置。掌握在层中添加内容。为页面的热点添加“显示-隐藏层”行为。为页面的热点添加“设置层文本”行为。二、教学分析1. 教学重点添加热点、创建锚记、创建锚记链接。层的基本操作，层的属性设置。为页面的热点添加“显示-隐藏层”行为。2教学难点添加热点、创建锚记、创建锚记链接。层的基本操作，层的属性设置。三、教学过程教学环节教学内容备注组织课堂导入知识任务流程导入任务分析任务知识讲解集中学生注意力，准备上课。在设计网页时，有时网页内容比较多，需要占用好几屏，当用户浏览内容时如果让他通过滚动条一屏屏查找所要浏览内容是非常费事的。这时可以在网页中添加热点和链接，通过单击热点快速定位到所要查找内容。本任务将制作家乡山水页面，在“家乡山水”页面中添加热点来划分景区地图上的各个景区，为景区地图上各个热点设置属性，链接到“景区介绍”页面中的相应位置。通过完成此任务学习创建热点和锚记链接的方法。提出任务二：为景区添加热点和创建锚记链接。建立好本单元的目录结构，在“景区介绍”页面中为每个景区的介绍内容添加锚记，之后在景区地图上按景区绘制热点，然后为每个热点添加锚记链接，链接到“景区介绍”页面的对应位置。1创建本单元的目录结构打开要完成的任务，引导学生分析本任务需要创建的目录结