Dreamweaver教案.docx

1、Dreamweaver教案课程表一二三四五1234567网页网页8网页网页授课班级：班 授课内容：网页制作合计：4节课学 期 授 课 进 度 表周 次课次课 时备 注第一周1定义本地站点创建文字环绕图像网页创建背景图像网页4第二周1创建鼠标经过图像网页在网站中查找与替换4第三周1在网页中插入说明信息清理Word生成的HTML代码在网页中输入上下标4第四周1插入图像并设置属性在Dreamweaver中插入Flash按钮4第五周1在Dreamweaver中插入Flash文本创建图片超级连接创建空地址连接4第六周1创建以新窗口的形式打开目标连接制作描点连接4学 期 授 课 进 度 表周 次课次课 时

2、备 注第七周1创建文件下载链接制作 E-mail链接并显示预定的主题创建图象热点链接网页4第八周1在Dreamweaver中导入数据表格创建细线表格4第九周1创建圆角表格制作虚线表格美化网页使表格背景色在鼠标经过时改变4第十周1制作立体表格效果表格的亮边框和暗边框4第十一周1给表格数据排序制作阴影表格制作网页中的竖线4第十二周1运用表格排版布局首页创建框架网页4学 期 授 课 进 度 表周 次课次课 时备 注第十三周1设置框架中的链接创建时间轴动画利用层制作下拉菜单4第十四周1利用层布局网页创建库文件4第十五周1应用库文件创建模板利用模板创建网页4第十六周1修改和更新模板利用标签提示加入背景音

3、乐4第十七周1制作完整的网站首页（摆渡人网上书店）4第十八周1期末考试4本 学 期 学 时 分 配标准化试题统计表 本 学 科 课 程 总 时 数72章 节ABCDEF本 学 期 课 程 时 数72本 学 期 周 学 时 数4本 学 期 授 课 周 数18本学期学时分配理 论 讲 授30技 能教 学 实 习42技 能生 产 实 习复 习 考 试机 动教 学 大 纲名称网页制作实例大讲堂版本时间20071出版单位人民邮电出版社使 用 教 材名称网页制作实例大讲堂版本时间20071编者孙宇出版单位人民邮电出版社参 考 书名称网页设计与制作版本时间2006、8编者刘雪松 徐向阳出版单位人民邮电出版社

4、变动说明学 生 名 册序号姓名性别平时成绩期中期末平均分123456789101112131415161718192021222324252627282930学 生 名 册序号姓名性别平时成绩期中期末平均分313233343536373839404142434445464748495051525354555657585960教 案计算机专业 07 年 3 月 5 日 第 1 周 第 1 次章节课题定义本地站点教学目的本章知识目标：学会定义本地站点。 技能目标：学会使用【站点】|【管理站点】命令教学重点【站点】|【管理站点】命令【修改】|【页面属性】命令教学难点【站点】|【管理站点】命令技能使学

5、生掌握【站点】|【管理站点】命令的使用技能课型新课教法(教具)讲练结合板书设计作业定义一个新站点创建文字环绕图像网页创建背景图像网页课后小结班班完成情况良好标 准 化 试 题 及 答 案分类章节题 根 及 答 案时间级别教 学 内 容时间方法教学过程一、组织教学：师生问候 检查一下机器是否正常，做好记录工作，了解一下学生的出勤情况，准备上课。二、新课：Dreamweaver8网页制作篇内容导读Dreamweaver8是专业的网页排版布局软件，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。它将网页可视化布局、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开

6、发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。本章就通过大量实例讲述用Dreamweaver8进行网页的布局排版。第1例 定义本地站点在使用Dreamweaver制作网页以前，最好先定义一个新站点，这是为了更好地利用站点对文件进行管理，也可以尽可能地减少错误，如路径出错、链接出错。新手做网页时往往一个文件放这里，另一个文件放那里，或者所有文件都放在同一文件夹内，这样显得很乱。建议建立一个文件夹用于存放网站的所有文件，HTML文件放在根目录下。如果站点比较大，文件比较多，可以先按栏目分类，在栏目里再进行细分。1 启动Dreamweaver8，选择【站点】|【管理站点】命令，

7、弹出【管理站点】对话框，如图1-1所示。2 在对话框中单击【新建】按钮，在弹出的菜单中选择【站点】选项，如图1-2所示。3 选择以后弹出【站点定义为】对话框，选择【基本】选项卡，将站点名称设置为“完美网页设计”，如图1-3所示。4 单击【下一步】按钮，询问是否使用服务器技术，选择【否，我不想使用服务器技术】，因为本站点是一个静态站点，如图1-4所示。5 单击【下一步】按钮，询问用户如何使用该文件，在【您将把文件存储在计算机上的什么位置】选择存储文件的位置，如图1-5所示。6 单击【下一步】按钮，询问如何连接到远程服务器，在【您如何连接到远程服务器】下拉列表中选择【无】选项，如图1-6所示。7

8、单击【下一步】按钮，弹出如图1-7所示的对话框，表明初步设置已经完成。8 单击【完成】按钮，弹出【管理站点】对话框，在对话框中显示新建站点，如图1-8所示。9 单击【完成】按钮，在【文件】面板中显示站点中的内容，如图1-9所示。第2例 创建文字环绕图像网页美化页面最简单直接的方法是在网页上添加图像。而很大程度上，一个网页漂亮，通常就是指导网页上的图像漂亮。图1-10所示是创建文字环绕图像效果，在文字中插入一个图像时，要设置图像的对齐方式即可创建文字环绕图像效果，具体操作步骤如下。1 打开网页文档，如图1-11所示。2 将光标放置在要输入文字的位置，输入文字，如图1-12所示。3 将光标放置在插

9、入图像的位置，选择【插入】|【图像】命令，弹出【选择图像源文件】对话框，如图1-13所示。4 在对话框中选择图像images/l.jpg，单击【确定】按钮，插入图像，如图1-14所示。5 选中图像，在【属性】面板中将【对齐】设置为【右对齐】，如图1-15所示。6 保存文档，按F12键浏览器中预览效果，如图1-10所示。第3例 创建背景图像网页在浏览网页时，经常看到漂亮的网页背景，使用背景图像大大增强了网页的美观。图1-16所示是创建背景图像效果，利用在【页面属性】对话框中选择【分类】列表中的【外观】选项中的【背景图像】，即可设置整个网页的背景图像，具体操作步骤如下。1 打开网页文档，如图1-1

10、7所示。2 选择【修改】|【页面属性】命令，如图2-18所示。提示： 将光标放在页面中，单击【属性】面板中的页面属性按钮，也可以弹出【页面属性】对话框。3 弹出【页面属性】对话框，在对话框中选择【分类】列表中的【外观】选项，如图1-19所示。4 在对话框中单击【背景图像】文本框右边的【浏览】按钮，弹出【选择图像源文件】对话框，如图1-20所示。5 在对话框中选择背景图像images/8.jpg，单击【确定】按钮，添加到【背景图像】文本框中。单击【确定】按钮，如图1-21所示。保存文档，按F12键在浏览器中预览效果，如图1-16所示。三、学生练习（老师进行个别制导）四、点评：（针对学生完成作品的情况进行点评，指出创作中应该注意的地方。）五、作业：定义一个新站点创建文字环绕图像网页创建背景图像网页