网页设计教案1.doc

xxx理实一体课程教师教案本（ 2009 2010 学年 第二学期）xxx教案课程名称网页设计与制作授课教师xxx课题名称第一章 初识Dreamweaver81、Dreamweaver8工作界面介绍2、Dreamweaver8新功能第二章 Dreamweaver8基本操作1、利用Dreamweaver8创建站点课题序号1-8授课日期第 1 周2010年 2 月 24 日 至 2010年 2月 26 日课题总课时8课时分配讲课：2 示范：4 练习：2 结合生产：理实一体化授课班级07计网大专（1）班授课班级人数39教学目的 1、了解Dreamweaver 8的工作界面2、了解Dreamweaver 8的新功能3、了解如何利用Dreamweaver 创建站点重点与难点1、了解Dreamweaver 8的工作界面2、了解Dreamweaver 8的新功能3、了解如何利用Dreamweaver 创建站点示范内容1、Dreamweaver 8的工作界面介绍2、Dreamweaver站点建立实训课题图或操作工序安排课程日安排（分课题操作教学安排）课程名称网页设计与制作授课教师xxx课题名称第一章 初识Dreamweaver81、Dreamweaver8工作界面介绍2、Dreamweaver8新功能授课日期2010年 2月 24 日授课课时4讲课：1 示范：3 练习： 结合生产：理实一体化教学目的1、了解Dreamweaver 8的工作界面2、了解Dreamweaver 8的新功能教学重点了解Dreamweaver 8的工作界面教学难点了解Dreamweaver 8的工作界面设备（材料、工具准备）教程、试题汇编、计算机讲解与示范工艺规程操作要领巡回重点及注意事项本单元主要介绍了Dreamweaver 8的工作界面，主要介绍了菜单栏、插入栏、文档工具栏、文档窗口、属性面板、状态栏和功能面板组，以及Dreamweaver 8的一些新功能，其它对于工作界面的掌握为本单元的重点。布置作业掌握并熟悉Dreamweaver 8的工作界面教学后记及改进措施第 页教 案 纸教学环节及时间分配、备注师生活动教学内容第一章 初识Dreamweaver81、Dreamweaver8工作界面介绍2、Dreamweaver8新功能共四节课第一节课（45分钟）第二节课（45分钟）第三节课（45分钟）第四节课（45分钟）1、 让学生初步认识Dreamweaver 8这个网页设计软件，介绍Dreamweaver 8这个软件的主要功能：Dreamweaver 8的可视化编辑功能Dreamweaver 8 还提供了全面的编码环境Dreamweaver 8还使用户可以使用服务器技术生成动态的、数据库驱动的Web应用程序 （15分钟）2、 让学生浏览一些优秀的网页，了解网页的基本结构。 （5分钟）以上是这节课的讲解内容3、详细向学生介绍Dreamweaver 8的工作界面（该部分为示范讲解操作课）Dreamweaver 8的工作界面，主要介绍了菜单栏、插入栏、文档工具栏、文档窗口、属性面板、状态栏和功能面板组1）菜单栏：Dreamweaver 8中的菜单共有10个，即文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助。（20分钟）文件：主要用于对网页文档进行基本操作与管理编辑：主要用来对网页文档进行编辑操作查看：主要用来控件工作界面的显示方式插入：该菜单包含了丰富的内容，利用它可以向网页文档中插入各种网页元素修改：具有对页面元素修改的功能文本：主要用于设置所选文本的段落属性和文本属性命令：主要用于录制、编辑命令、清理代码等一些操作，还可以设置配色方案、创建网站相册等。站点：主要用于对站点进行各种管理与编辑操作窗口：主要用来显示和隐藏控制面板以及切换文档窗口帮助：该菜单提供了各种帮助信息4、 课堂小结（5分钟）继续详细向学生介绍Dreamweaver 8的工作界面（该部分为示范讲解操作课）1、 2）插入栏插入栏包含用于创建和插入对象的按钮。插入栏中包含以下几个类别：常用、布局、表单、文本、HTML、应用程序、Flash元素、收藏夹。（20分钟）常用：该类别使用户可以创建和插入最常用的对象布局：该类别可以插入表格、div标签、层和框架。还可以从三个表格视图中进行选择：标准、扩展和布局。表单：该类别包含用于创建表单和插入表单元素的按钮文本：该类别允许用户可以插入各种文本格式设置标签和列表格式设置标签HTML：该类别使用户可以插入用于水平线、文件头内容、表格、框架和脚本的HTML标签应用程序：该类别使用户可以插入动态元素Flash元素：该类别使用户可以插入Flash元素收藏夹：该类别使用户可以将插入栏中最常用的按钮分组和组织到某一公共位置3)文档工具栏文档工具栏使用户可以在文档的不同视图间快速切换：代码视图、设计视图、同时显示代码和设计视图的拆分视图。文档工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。（20分钟）文档工具栏中包含：显示代码视图显示代码视图和设计视图显示设计视图文档标题：允许用户为文档输入一个标题，它将显示在浏览器的标题栏中没有浏览器/检查错误：使用户可以检查跨浏览器兼容性验证标记：使用户可以验证当前文档或选中的标签文件管理：显示“文档管理”弹出式菜单在浏览器中预览/调试：允许用户在浏览器中预览或调试文档刷新设计视图：在“代码”视图中进行更改后刷新文档的“设计”视图视图选项：允许用户为“代码”视图和“设计”视图设置选项可视化助理：使用户可以使用不同的可视化助理来设计页面2、 课堂小结（5分钟）继续详细向学生介绍Dreamweaver 8的工作界面（该部分为示范讲解操作课）1、 4）文档窗口（15分钟） 文档窗口显示当前文档可选择下列任一视图：l “设计”视图l “代码”视图l “代码和设计”视图5）属性面板（15分钟）属性面板使用户可以检查和编辑当前选定页面元素的最常用属性。属性面板的内容根据选定的元素会有所不同。6）状态栏（10分钟）文档窗口底部的状态栏提供与用户正创建的文档有关的其他信息。它包含：l 标签选择器l 选取工具l 手形工具l 缩放工具l 设置缩放比率l 窗口大小l 文档大小和估计下载时间2、 课堂小结（5分钟）继续详细向学生介绍Dreamweaver 8的工作界面（该部分为示范讲解操作课）1、 7）功能面板组（25分钟）Dreamweaver 8的一些辅助功能面板罗列在工作界面的右侧，默认情况下显示了CSS、应用程序、标签检查器、文件四个功能面板。“CSS样式”面板：使用“CSS样式”面板可以跟踪影响当前所选页面元素的CSS规则和属性或影响整个文档的规则和属性。“文件”面板：“文件”面板用于查看和管理Dreamweaver 站点中的文件。2、 Dreamweaver 8的新功能（15分钟）Dreamweaver 8主要新增的功能有：l “缩放工具”和辅助线l 可视化XML数据绑定l 新的CSS样式面板l CSS布局的可视化l 代码折叠l “编码”工具栏l 后台文件传输l Flash视频支持3、 课堂小结（5分钟）1、“时间分配”中4节及以上连排的课程，要标明课时分配及每课时的时间分配；其他课程标明时间分配。“时间分配”为预设时间，实施过程中根据情况适当微调。2、教学重点和难点及解决措施、板书、辅助手段等内容在“备注”栏中注明。第 页 xxx教务处编印课程日安排（分课题操作教学安排）课程名称网页设计与制作授课教师xxx课题名称第二章 Dreamweaver8基本操作1、利用Dreamweaver8创建站点授课日期2010年 2月 26 日授课课时4讲课：1 示范：1 练习：2 结合生产：理实一体化教学目的了解如何利用Dreamweaver 创建站点教学重点利用Dreamweaver 创建站点教学难点利用Dreamweaver 创建站点设备（材料、工具准备）教程、试题汇编、计算机讲解与示范工艺规程操作要领利用菜单栏上的“站点”菜单下的“新建站点”命令来完成站点的建立巡回重点及注意事项利用菜单栏上的“站点”菜单下的“新建站点”命令来完成站点的建立布置作业试题汇编：1.1-1.2教学后记及改进措施第 页教 案 纸教学环节及时间分配、备注师生活动教学内容第二章Dreamweaver8基本操作1、利用Dreamweaver8创建站点共四节课第一节课第二节课（90分钟）第三节课（45分钟）第四节课（45分钟）1、 复习上一节课学的内容（5分钟）1）Dreamweaver 8的工作界面主要由哪几个部分组成？2）Dreamweaver 8的插入栏主要由哪个类别组成？3）Dreamweaver 8的新功能主要有哪些？2、 介绍Dreamweaver 8中站点的作用（5分钟）Web站点是一组具有共享属性的链接文档和资源。Dreamweaver 8是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的Web站点 以上是讲解部分3、 Dreamweaver 8 站点的创建（该部分为讲解示范操作部分）1）建立并设置本地根文件夹（10分钟）建立一个网站，首先要创建一个本地站点，并在本地计算机中对网站进行设计、制作和调试等操作，然后再上传到服务器中。建立本地站点的第一步就是在硬盘中建立一个本地根文件夹。2）定义站点（20分钟）若要设置Dreamweaver 站点，操作步骤如下：1选择菜单栏中“站点”“新建站点”。2单击“高级”选项卡，切换到高级模式下，选择分类列表中的“本地信息”选项，然后设置本地信息的各项参数。站点名称：用于输入站点的名称 本地根文件夹：用于输入本地磁盘中用来存储站点文件的文件夹名称 自动刷新本地文件列表：选择此项后，每次将文件复制到本地站点时，系统将自动刷新本地文件列表 默认图像文件夹：用于输入站点的默认图像文件夹路径 链接相对于：用于更改所创建的到站点其他页面的链接的相对路径 HTTP地址：用于输入已完成的Web站点将使用的URL地址 使用区分大小的链接检查：选择些项后在DW检查链接时可以确保链接的大小写与文件名的大小写匹配，此选项用于文件名区分大小写的UNIX系统 启用缓存：选择该项后，可以创建高速缓存，可以提高链接和站点管理任务的速度3单击确定按钮，完成本地站点的创建4、 根据上面讲解示范的步骤，给十分钟让学生自己试着创建（10分钟）5、 讲解并示范书上第13页的“实例一”（10分钟）6、 讲解示范完后让学生自己练习（10分钟）7、 为学生讲解本课堂的重点难点及要注意的事项（10分钟）8、 课堂小结（10分钟）1、 总结前两节课的内容，并将需要注意事项跟学生讲解清楚（5分钟）2、 讲解并示范试题汇编“第一单元基本操作”的第一题（20分钟）3、 示范操作完成后，让学生自行练