dreamweaver8网页实用设计教案

《dreamweaver8网页实用设计教案》由会员分享，可在线阅读，更多相关《dreamweaver8网页实用设计教案（66页珍藏版）》请在金锄头文库上搜索。

1、dreamweaver8dreamweaver8 网页设计网页设计课程课程 教教 案案 教师姓名 刘丹丹 所在系别 软件学院 授课专业 软件技术专业 总 学 时 68 学分 4 教材名称 dreamweaver8 网页设计案例实训教程 目 录 第一章第一章 遨游遨游 DREAMWEAVER8 精彩世界精彩世界 3 第二章第二章 创建与规划站点创建与规划站点 .5 第三章第三章 文本及其格式化文本及其格式化 .13 第四章第四章 表格表格 .17 第五章第五章 图像图像 .21 第六章第六章 框架框架 .25 第七章第七章 页面布局视图的使用页面布局视图的使用 .29 第八章第八章 链接链接 .

2、33 第九章第九章 层与时间轴层与时间轴 .37 第十章第十章 表单表单 .41 第十一章第十一章 行为行为 .44 第十二章第十二章 制作动态页面制作动态页面 .48 第十三章第十三章 代码片断、库项目和模板代码片断、库项目和模板 .52 第十四章第十四章 网页的制作网页的制作 .56 第十五章第十五章 网站的测试与上传网站的测试与上传 .60 第十六章使用第十六章使用 FIREWORKS 8 处理网页图像处理网页图像63 第一章第一章 遨游遨游 Dreamweaver8 精彩世界精彩世界 课题：课题：Dreamweaver8 简介及创建文档简介及创建文档 一、教学基本内容 1、Dreamw

3、eaver8 的工作界面 2、建立 html 文档 二、课型：新授课 三、课时：2 个课时 四、教学重点与难点 重点：熟悉 Dreamweaver8 工作界面中各个工具的作用 难点：1、各个面板的调用 2、建立一个 HTML 的网页 3、插处图像 五、教学目的 1 、对 Dreamweaver 这个制作网页的工具及网页有一定的认识，激发学生学 习网页设计的兴趣 2、一定要学会建立一个空白网页 3、会对页面有一个简单的设置 六、教学过程 1、引入 （1）为什么要用Dreamweaver 而不用 Frontpage? Dreamweaver 是 Macromedia 公司的出品，它以程序小、运行速

4、度快、所制作网页代码少这 些优点，赢得了网页制作人员的喜爱。 （2）相关工具的介绍 因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具， 比如与 Dreamweaver 合称为网页三剑客的 Flash 和 Fireworks。 2、讲授新课 （1） Dreamweaver 的界面 a文档窗口：主菜单、工具栏、底部启动条、文档编辑区 b对象面板：标准、表格、表单、框架、特殊、文件廷冖隐藏、字符 c启动面板：站点管理、代码检查、HTML 样式、CSS 样式、行为、历史记录、资源 管理 d属性面板：随目前对象不同而内容不同 (2)创建 HTML 网页 (3)在网页中插入图像 输入文

5、字以后，插入图像，并对图像设置对齐的方式，使之与文字呈混排的状 态。 3、巩固练习 练习使用界面中的各个工具 七、作业处理 根据本节所学的内容，课堂上练习创建一个空白网页，并且输入一段文字，在 文本的左边插入一张图片 八、教具 所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上 用 PPT 课件进行演示。 第二章第二章 创建与规划站点创建与规划站点 课题：规划站点及创建静态站点课题：规划站点及创建静态站点 一、教学基本内容 1、站点规划概念 2、站点规划的方法 3、站点的组成 4、定义站点 二、课型：新授课 三、课时：2 个课时 四、教学重点与难点 重点：1、站点组成 2、如

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

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

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

9、室，因此所要板书的内容及使用的工具均在计算 机上用 PPT 课件进行演示。 课题：搭建动态网站服务器及创建动态站点课题：搭建动态网站服务器及创建动态站点 一、教学基本内容 1、安装 IIS 2、动态站点与静态站点的区别 3、搭建动态站点 二、课型：新授课 三、课时：2 个课时 四、教学重点与难点 重点：动态站点与静态站点的区别 难点：1、虚拟目录的概念 2、动态站点的定义 3、站点测试 五、教学目的 1、学会安装 IIS，知道 IIS 的作用 2、学会创建虚拟目录 3、会创建动态站点 六、教学过程 1、引入 先提出静态站点的作用及限制性，引入动态站点的功能 2、讲授新课 （1）安装并启动 II

10、S（现场操作） （2）定义一个动态站点 步骤：设置虚拟目录。 （1）在本地磁盘“C:”下新建一个 site 文件夹作为本地站点的根文件夹。 （2）设置 web 共享。找到“C:site”文件夹，选中并右击该文件夹，从弹出的快 捷菜单中选择“共享和安全”选项。在打开的“site 属性”对话框中，选择“Web 共 享”选项卡，如图 2-19 所示 （3）设置“编辑别名”对话框。选中“共享文件夹”单选按钮，在弹出的“编辑别 名”对话框中将“别名”设置为 site；在“访问权限”中选择“读取”；在“应用程序权 限”中选择“脚本”，如图 2-20 所示。最后单击“确定”按钮关闭对话框，便完成了 定义动态

11、站点的准备工作。 进入“高级”选项卡。 （1）选择“站点”|“新建站点”选项，选择“站点定义”对话框中的“高级”选项卡。 （2）从“分类”列表框中选择“本地信息”（默认选项）选项，如图 2-21 所示。 设置“本地信息”的各参数（见图 2-22 设置“测试服务器”的各参数（见图 2-23） 。 显示结果。 （3）测试站点 将 ch02 test.asp 文件复制到 C:site 文件夹中，并使用 Dreamweaver 8 打开 test.asp。 单击浏览器中“预览/调试” 按钮，或者按 F12 键在浏览器中运行 test.asp 页 面。出现如图 2-25 所示的成功页面。若浏览器提示找不

12、到服务器，则需重新搭 建 ASP 服务器。 3、巩固练习 练习站点的建立，及其基本操作。 七、作业处理 在课堂上要求每一个同学在 F 盘下建立一个名为”我的动态站点”的文件夹， 将其设置为虚拟目录，在 dreamweaver 中创建一个动态站点，将站点信息存放 到我的动态站点文件夹中。 八、教具 所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算 机上用 PPT 课件进行演示。 第三章第三章 文本及其格式化文本及其格式化 课题：输入文本及其格式化课题：输入文本及其格式化 一、教学基本内容 1、输入普通文本 2、插入符号、日期 3、使用项目列表 二、课型：新授课 三、课时：2 个课

13、时 四、教学重点与难点 重点：1、插入符号、空格和日期 2、使用项目列表 难点：1、项目列表 五、教学目的 1、掌握文本输入方法 2、掌握日期的插入 3、掌握项目列表的使用 六、教学过程 1、引入 首先例用一个已完成的网页，让学生来看别人的设置，由此引入文本的格式化。 2、讲授新课 （1）文本的输入 两种方法：a:直接在文档窗口中输入文本。即先选择要插入文本的位置，然后 直接输入文本。 b:在其他编辑器中复制已经生成的文本，然后切换到 Dreamweaver 8 文档窗口中，将选取插入点，然后选择“编辑”|“粘贴”选项。 （2）创建项目列表 类型：无序列表、有序列表、定义列表、目录列表和菜单列

14、表。 （3）插入日期 3、巩固练习 练习各种项目列表的使用 七、作业处理 要求每一个同学建立一个名为“我的网页”的空白文档，在网页中输入文 字，然后在右下角插入日期，在内容当中便用有序列表。 八、教具 所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算 机上用 PPT 课件进行演示。 课题：课题：CSS 样式样式 一、教学基本内容 1 、演示并讲解 CSS 的应用 2 、 CSS 的基本概念 3 、 CSS 的特点 4 、 CSS 样式定义 5 、 CSS 常用属性与值 二、课型：新授课 三、课时：2 个课时 四、教学重点与难点 重点：1、掌握 CSS 样式定义 2、掌握 CSS

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

16、。 七、作业处理 课堂上进行计论： 第一步：演示并讲解用 CSS 样式制作的网页。 第二步：分步演示并讲解 CSS 样式的基本概念。 第三步：讲解并分析 CSS 的知识点。 第四步：结合 CSS 样式的使用制作网页 第四步：课程小结。 八、教具 所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算 机上用 PPT 课件进行演示。 第四章第四章 表格表格 课题：表格创建及设置课题：表格创建及设置 一、教学基本内容 1 、创建表格 2 、 添加表格对象 3 、自动套用表格格式 二、课型：新授课 三、课时：2 个课时 四、教学重点与难点 重点：1、创建表格 2、自动套用表格格式 难点：套用表格格式 五、教学目的 1 、掌握创建表格的基本方法 2 、会使用自动套用表格格式 六、教学过程 1、引入 网页需要进行排版，由报纸的排版引入网页的排版，由此提出表格的作用 2、讲授新课 （1）创建表格 步骤：将光标停放在页面需要创建表格的位置。 如果未打开