Dreamweaver理论教案.docx

1、Dreamweaver理论教案课题一 创建个人课时：2一、教学目标 理解的栏目与目录结构的对应关系。 认识常用的网页制作软件。 掌握“文件”面板组的使用方法二、教学分析1. 教学重点 规划个人。 创建站点。 管理站点。 创建目录结构。2教学难点 通过任务提出，分析任务需求，形成解决问题的思路。 创建、管理站点 划分的目录结构。三、教学过程教学环节教学容备注组织课堂导入知识任务流程导入任务分析任务知识讲解集中学生注意力，准备上课。通过提问考察学生对的了解程度。1喜欢浏览什么类型的，这些都有什么用途，通过这些得到了什么信息？2常见的主题类型都有哪些？什么是个人，个人通常包含哪些栏目？通过学生对以上

2、问题的回答，了解学生在学习这门课程之前对的了解程度，在此基础上简单介绍什么是，都有什么作用，为什么要创建。提出任务一：规划个人。1定位的主题和名称。2规划的栏目与目录结构。3选择网页制作软件提出任务二：创建个人站点。启动软件。通过学生尝试操作，使用两种常见方法启动软件。 打开计算机后，单击“开始”菜单中的“程序”选项，选择“Macromedia”目录下的“Macromedia ”选项, 运行。 双击桌面上的“Macromedia ”快捷方式图标，运行。启动软件后，介绍软件的界面及起始页的功能。创建站点。在启动软件的基础上，通过学生尝试操作，使用“站点”菜单中的“新建站点”选项进入新建站点流程。

3、在弹出的“站点定义”对话框中，选取“基本”选项卡，输入名称“幽幽我心的个人”，单击“下一步”按钮。至此，站点定义已经完成，查看界面右边面板组中的“文件”面板，可以在站点列表中发现，名为“幽幽我心的个人”的新站点已经创建，并且该站点下没有任何容。提出任务三：管理个人站点。在站点创建之后，站点文件保存在本地计算机的某一位置上，整个站点形成了整体，便于对站点进行管理，站点的管理通常包括了编辑、复制、删除、导出和导入。导出站点选择“站点”菜单中的“管理站点”选项，在弹出的“管理站点”对话框中可以看到上个任务中创建的“幽幽我心的个人”，选择要导出的站点“幽幽我心的个人”，单击“导出”按钮。在“导出站点”

4、对话框中，选择保存在D盘下的“mysite”文件夹，单击“保存”按钮，在“D:mysite”文件夹中生成了一个扩展名为“.ste”的文件，这个文件就是“幽幽我心的个人”的导出文件。导入站点。选择“站点”菜单中的“管理站点”选项，单击“导入”按钮，在“导入站点”对话框中，选择前面保存的扩展名为“.ste”的文件，单击“打开”按钮，导入的站点便出现在列表中，因为有重名站点，导入的站点名称后面会自动加0。复制删除与编辑站点分组讨论，学生自主完成站点的复制与删除，最终只保留一个站点。提出任务四：实现任务一中规划的目录结构。启动，讲解使用“文件”面板和“文件”菜单里的“新建”选项创建首页。打开首页，分组

5、讨论界面包含几部分，引导学生记住各部分功能。步骤：在“文件”面板中选择已经创建好的站点“幽幽我心的个人”，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”选项。在“文件”面板中选择刚建好的文件，单击鼠标右键，在弹出的快捷菜单中选择“编辑”“重命名”选项。作为首页，将其名称设定为“index.html”在“文件”面板中选择“index.html”文件，单击右键选择“设成首页”选项。通过“文件”面板创建站点目录。步骤：使用“文件”面板新建文件夹，方法和新建文件方法类似根据以上学习，让学生分组讨论总结使用“文件面板”删除、复制、剪切、粘贴、重命名网页或文件夹的操作方法。展示的作品，主题类型为个人。知

6、识讲解知识讲解课题二 添加首页容课时：2一、教学目标 掌握添加和编辑网页文本的基本操作。 能够根据具体需求进行文本各种属性及样式的编辑与设置。 掌握插入图像的各种方法。二、教学分析1. 教学重点 添加首页文本。 使用CSS规则美化文本。 添加图像。 创建与应用CSS美化网页。2教学难点文本样式的设置、应用及修改。 使用CSS规则美化文本。 添加图像。三、教学过程教学环节教学容备注组织课堂导入知识任务流程导入任务分析任务知识讲解集中学生注意力，准备上课。在开始新的课程学习之前，先来了解一下，网页元素的构成，为什么要在首页中添加文本。通过浏览新浪、搜狐等著名的网页，引导学生分析网页的构成元素，得出

7、结论：网页元素归纳起来有文本、图像、表格等，其中最常用的是文本。因而，为首页添加容，最重要的是为首页添加文本。提出任务一：添加首页文本。、建立首页空白文件“index.html”，本单元将对首页修改标题，添加准备好的容并设置其格式。、输入首页文本容并划分段落 输入首页文本将素材“index.txt”文本容复制粘贴到文档窗口。通过比较使学生明确：从普通文档中复制过来的文本不保留格式容，只保留段落结构，并且在文本遇到文档窗口的边界时会自动换行。 换行操作a“自我介绍”、“青春寄语”和“立志飞翔 ”部分进行段落划分b“立志飞翔 ”部分进行强制换行总结，三种换行方式的特点及其实现方法。 输入连续空格演

8、示输入连续空格的几种方式。完成“青春寄语”部分首行缩进的操作。最后，保存网页。提出任务二：完成首页文本样式设置，为首页添加水平分隔线与列表通过浏览，引导学生明白文本字体、字号、颜色、加粗、倾斜及对齐方式等文本样式的设置是必需的，那么，如何完成文本样式的设置与编辑呢？ 文本样式设置与应用 为网页中第一行文字“幽幽我心的个人”设置文本样式回忆Word文本格式设置的设置步骤：首先选中相应文本；接着通过格式工具栏进行设置。网页制作也类似，首先要选中相应文本，接着通过文本属性面板完成设置。简介文本属性面板各部分及其功能，讲解为“字体”列表项添加字体的方法。 为网页中第二段标题文字“自我介绍”设置文本样式

9、。 为标题文字“青春寄语”、“立志飞翔”，应用样式（为“自我介绍”设置的样式）样式重命名演示为“幽幽我心的个人”中的文本样式重命名的方法，并按照课本P37页表格要求，设置“青春寄语”与“立志飞翔”中的文本样式并重命名。修改文本样式演示修改title2样式：单击“样式”列表旁的按钮，打开“CSS样式”面板。对样式“title2”进行编辑，在面板当中修改颜色值为“#FF6600”。让学生观察应用了“title2”样式的文本颜色是否会发生相应的变化。插入列表与水平线选中“自我介绍”部分的文本容，选择“属性”面板中的“项目列表”，为选中文本插入项目列表。将光标插入到“青春寄语”标题之前，将“插入”栏切

10、换到“HTML”类别，选择其中的“水平线”按钮，在“自我介绍”容和“青春寄语”容之间插入一条水平线，起到分隔的作用。提出任务三：为首页添加图像容。通过联想学校宣传栏、报纸、儿童书籍以及课本等容，总结出其中都有图像；引导学生懂得通过插入图像可以使容生动直观，具体形象。进一步打开两个网页，一个是全文本的，一个是图文并茂的，让学生通过比较这两个网页明确哪一个更适用并说明原因，引出要使首页容生动形象，图像的添加和编辑就必不可少了。网页中图像文件的格式及其特点教师提出下列问题让学生分组查找答案：通常在网页中使用什么格式的图像文件，它们的特点是什么？在同学回答上述问题基础上，教师总结并讲解在网页常使用“.

11、jpg”、“.gif”和“.png”格式图像文件及其这三种格式图像文件的特点。准备素材：将本单元素材文件夹中的“images”文件夹下的全部图像素材复制到D:mysiteimages文件夹下。使用文件面板插入图像拖曳文件面板中的 “top.jpg”到“自我介绍”标题前，插入图像“top.jpg”。选中所插入的图像，在属性面板中设置对齐方式为“右对齐”。预览页面效果。通过复习Word中插入图像的方法，总结出另外三种插入图像的方法。A使用菜单栏插入图像定位插入点到“立志飞翔”文字前，选择菜单栏“插入”菜单中的“图像”选项，插入“flying.gif”图像文件并设置对齐方式为“左对齐”。B使用插入栏

12、常用类别中的按钮插入图像定位插入点到“立志飞翔”的第三段文字前，选择“插入”栏“常用”类别中的按钮，插入“flying.gif”图像文件并设置对齐方式为“右对齐”。C使用Ctrl+Alt+I组合键插入图像定位插入点到“立志飞翔”的第五段文字前，使用Ctrl+Alt+I组合键，插入“flying.gif”图像文件并设置对齐方式为“左对齐”。提出任务四：使用CSS美化网页。在之前的任务中使用属性面板来设置并应用文本样式，可以简化文本属性的设置过程。其特点主要表现为：样式可以一次设置多次应用，可以同步修改已应用的样式。创建与应用CSS文本样式。使用CSS面板创建文本样式“title3”，并将新样式应

13、用到“青春寄语”部分的标题文本上。讨论这种方法与之前学习的设置方法有什么不同。 CSS样式的三种类型 “类”样式：“类”样式是最为灵活的一种类型的样式，它可以任意定义名称并且应用到网页中的各种对象上。 “标签”样式：“标签”样式的定义是建立在HTML语言基础上的，可以针对网页中的各种标签进行定义，所以用这种类型的样式定义的名称仅限于固定的标签名称，并且在样式定义后，直接被应用到页面中相应的标签对象中。“高级”样式：这种样式仅用于定义超级的4种状态，分别是：“a:link”用于定义超级初始状态；“a:visited”用于定义已经访问过的超级状态；“a:hover”用于定义鼠标经过超级对象时的状态

14、；“a:active”用于定义超级的活动状态。 CSS样式可定义参数。“类型”选项：用于定义常规的文本属性，包括“字体”、“大小”、“颜色”等选项。“背景”选项：用于定义背景属性，可设置“背景颜色”、“背景图像”、背景图像的“水平位置”等选项。“区块”选项：用于定义文本的间距与对齐方式等属性。“方框”选项：用于定义表格、框架等对象的属性。“边框”选项：用于定义各种对象的边框属性，表格、框架、水平线的边框样式都可以使用这一选项进行定义。“列表”选项：用于定义文本列表的属性。“定位”选项：用于定义层对象的属性。“扩展”选项：用于定义光标、图像等容的视觉效果的扩展属性。展示的作品，主题类型为个人。知

15、识讲解知识讲解课题三 创建、编辑表格课时：2一、教学目标 掌握表的创建和编辑，能够根据具体需求灵活应用表格，并能利用表格进行页面布局和排版。 掌握表格的基本操作：如合并、拆分单元格，添加、删除行或列，调整行高、列宽。二、教学分析1. 教学重点 创建表格的基本方法。 创建嵌套表格。 设置单元格属性 设置表格属性2教学难点 分析页面的表格布局。 创建嵌套表格。 单元格和表格属性的区分三、教学过程教学环节教学容备注组织课堂导入知识任务流程导入任务分析任务知识讲解集中学生注意力，准备上课。通过提问考察学生对插入图像基础知识的了解。如何在网页上插入一图片，并调整图片的大小、位置？学生分组讨论如何在网页上

16、制作一个班级通讯录，每行容有“、照片、地址、联系”。通过上面讨论，引导学生认识利用表格制作通讯录是方便快捷的方式，再引导学生联想生活中用到的表格，进而了解表格在网页制作中的广泛应用。在中，表格是用于在页面上显示表格式数据及对文本和图像等元素进行布局的强用力的工具。本任务将学习在网页制作中如何灵活运用表格。提出任务一：利用表格规划、布局作品展示网页。依据设计图样，可以使用四个表格把页面划分为四个区域，四个表格分别命名为“table1”、“table2”、“table3”和“table4”。依据不同的设计容，这四个表格还需要进行相应的编辑与嵌套。分析网页布局 见课本图3-2，教师带领学生进行页面表

17、格分析。引导学生了解：“table1”是一个2行1列的表格。第一行用于放置标题及图像，第二行嵌套一个1行5列的表格“table1-1”，用于放置五个导航按钮。“table2”是一个1行4列的表格。左右单元格为空白区域，中间两个单元格分别用于放置“作品展示”和“友情”两图像。“table3”是一个1行3列的表格。左右单元格为空白区域，中间单元格用于放置作品分类标题和图像。在中间单元格嵌套一个6行1列的表格“table3-1”。“table3-1”表格的每一行再嵌套一个表格，其中第一、三、五行分别嵌套一个1行2列的表格，用于放置图标及作品题目；第二、四、六行分别嵌套一个1行5列的表格，放置三幅作品

18、及左右两个空白区域。“table4”是一个3行1列的表格，第一行是空白区域，第二行通过设置行属性显示为一条细线，第三行放置信息。 教师举一些网页布局的实际例子让学生进行协同分析。总结：通过以上几个实际页面的例子，介绍表格布局知识，即许多网页的表格布局可分为上、中、下三个部分，上面部分放置网页的标题，中间部分放置网页的主要容,下部分放置制作者的信息及信息等。上、中、下三个部分又包含各自的嵌套表格来布局相应的容。提问：回想以前打开一网页的时候是所有的容都同时全部显示吗？如果不是的话是怎样进行显示的呢？为什么这样显示？表格布局在这里有什么作用？总结：如果使用表格布局网页结构不合理，会降低网页浏览速度

19、。因为浏览器在解析网页时，先将整个网页的结构下载完后才显示容，如果不使用嵌套表格布局网页只使用一个表格会非常复杂，浏览者要等待很长时间才能看到网页容。通常用表格布局页面时，应该循以下几点：a整个网页不要放在一个表格里，尽量使用多个表格来进行布局。b表格的嵌套层次尽量要少。c单一表格的结构尽量整齐，不要太复杂。 创建目录结构在Dreamweaver cs5中打开“幽幽我心的个人”，依据第一单元建立的目录结构，在本栏目“works”文件夹中新建文件“works.html”，然后把光盘中本单元素材中的“wkimages”、“flash”、“links”文件夹复制到本栏目“works”文件夹中。本栏目

20、目录结构如课本表3-1所示。创建表格的知识 练习插入一个表格：学会使用菜单、“插入”栏、快捷键创建表格。 回答表格对话框中如下选项的作用：“页眉”选项组、“标题”、“对齐标题”、“摘要”。 要求学生回答下列问题：a大多数浏览器默认显示单元格边距、间距是多少？若要确保浏览器显示的表格没有边距和间距，必须把单元格边距和单元格间距设置为多少？b如果没有明确指定边框的值，则浏览器怎么显示表格边框呢？大多数浏览器默认显示边框粗细是多少？若要确保浏览器显示的表格没有边框应该怎么办？若把边框设置为0，则如何查看单元格和表格的边框呢？c在网页制作过程中，元素的长度单位可以选用百分比或像素来表示。请解释什么是像

21、素、百分比？它们的区别是什么？“百分比”是相对于谁说的？（教师在最后总结时一定要强调是父元素，其绝对大小会随所属父元素的大小变化而发生变化。）d在用表格布局页面时，宽度设置为多少时页面不会出现水平方向的滚动条？（教师总结：为防止浏览过程中出现水平方向的滚动条，通常在800*600分辨率下，把表格宽度最大设置为778像素，在1024*768分辨率下最大设置为1002像素。）e如何给当前表格命名？如何删除当前选中的表格？f嵌套表格的宽度受所在单元格宽度的限制吗？提出任务二：编辑任务一中已创建成的表格。表格插入后和课本图3-1的表格相比较，会发现相差甚远，至少表格的高度就相差很多，有些单元格还需要调

22、整。要完成最终效果，就必须对表格进行编辑。观察任务一中创建的表格，对比最终效果，需要分别对表格“table1”、“table2”、“table3”、“table4”及其嵌套表格，设置对齐、行高与列宽、背景颜色、背景图像和边框等属性。知识点讲解 选中单元格和表格a引导学生利用已经学过的Word表格知识迁移总结什么是表格、单元格、行、列。b介绍表格的3个重要标签“table、tr、td”并演示用法。c学生分组讨论选择表格的方法，并最后总结。d学生分组讨论选择表格中行、列、单元格的方法，并最后总结。思考：选中表格中所有单元格和选中整个表格是一个概念吗？带着问题学习下面知识。 设置单元格属性、表格属性

23、利用属性面板设置属性。a表格“属性”面板参数介绍“表格Id”：表格的Id，为表格命名。“行”和“列”：表格中行、列的数目。“宽”和“高”：以像素为单位或按百分比指定表格宽度、高度。通常不需要设置表格的高度。“填充”：指的是单元格边距，即单元格容和单元格边框之间距离，单位为像素。“间距”：指的是单元格间距，即相邻单元格之间的距离，单位为像素。“对齐”：确定表格相对于同一段落中其他元素（例如文本和图像）的显示位置。“边框”：指定表格边框的宽度，单位为像素。“清除列宽”按钮：从表格中删除所有明确指定的列宽。“清除行高”按钮：从表格中删除所有明确指定的行高。“将表格宽度转换成像素”按钮和“将表格高度转

24、换成像素”按钮：将表格中每列的宽度或高度设置为以像素为单位的当前宽度，同时将整个表格的宽度设置为以像素为单位的当前宽度。“将表格宽度转换成百分比”按钮和“将表格高度转换成百分比”按钮：将表格中每列的宽度或高度设置为按百分比表示的当前宽度，同时将整个表格的宽度设置为按百分比表示的当前宽度。b单元格“属性”面板参数介绍“合并单元格”按钮：将所选的单元格、行或列合并为一个单元格。“拆分单元格”按钮：将一个单元格拆分成多个单元格。一次只能拆分一个单元格；如果选择的单元格多于一个，则此按钮将禁用。“水平”：设置单元格、行或列容的水平对齐方式。“垂直”：设置单元格、行或列容的垂直对齐方式。“宽”和“高”：

25、可以以像素为单位或按占整个表格宽度或高度的百分比进行设置。若让浏览器根据单元格的容以及其他列和行的宽度和高度自动确定适当的宽度或高度，此文本框采取默认设置（空）。“不换行”：可以防止换行，从而使给定单元格中的所有文本都在同一行。如果启用了“不换行”，则当键入数据或将数据粘贴到单元格时，单元格会加宽来容纳所有数据。“标题”：可以将所选的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的容为粗体并且居中。“背景”和“背景颜色”：设置所选单元格、列或行的背景图像和背景颜色。“边框”：单元格的边框颜色。操作示 编辑表格“table1”设置表格“table1”在页面中居中对齐。设置表格“tab

26、le1”的第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像素

27、，边框颜色为“#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像素、颜色为“#EFEFE

28、F”的细线（注意：必须在“代码”视图里将表格“table4”第2行单元格的“ ”删除，否则行高不会以1像素显示）。至此，完成了“作品展示”网页中所有表格的编辑工作。展示的作品，主题类型为个人。知识讲解知识讲解课题四 添加表格容及建立超课时：2一、教学目标 掌握在单元格中插入图片、文字。 掌握在单元格中设置图片格式、文字格式。 理解超级的含义，超级中的源和目标。 掌握为网页中的文本、图像建立超级。二、教学分析1. 教学重点 在单元格中插入图片、文字。 在单元格中设置图片格式、文字格式。 为网页中的文本、图像建立超级。2教学难点使用表格的“扩展”、“布局”视图模式。理解不同类型的路径。三

29、、教学过程教学环节教学容备注组织课堂导入知识任务流程导入任务分析任务知识讲解集中学生注意力，准备上课。通过提问考察学生对插入表格的掌握情况和上节课作业的完成情况。用表格布局好页面后，就可以添加相应容了，本次课任务就是在上一任务完成的表格添加容。提出任务一：向表格中添加容添加并编辑表格容 向表格“table1”中添加容利用第二单元所学的方法，在“文件”面板中打开“works”文件夹，把“wkimages”文件夹下的“title.jpg”图像添加到表格“table1”的第1行中。将光标放入表格“table1-1”的第1列的单元格中，输入导航文字“首页”。在第2至5列的单元格中分别输入文字“作品展示

30、”、“心情日记”、“家乡山水”和“访客信息”。 用鼠标拖拽选中表格“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作品”，并与“网页作品”文字进行同样的样式设置