第一周（1-10课时） (2).doc

谷城中等职业教育中心学校电子教案20142015学年度第一学期网页制作课程电子教案 授课课题：建站预备知识 授课教师：蒋红艳 NO：1 授课班级14春微机、14春商务授课日期授课类型讲授、演示学 时 数2教学目标1、了解网站、网页、主页的基本概念；2、认识网页的基本组成、网页分类和网页制作工具；3、了解网站的工作原理。教学内容1、 相关概念：网站、网页、主页；2、 认识网页重点难点重点：认识网页 难点：网站的工作原理教学方法演示、讲解学习方法观察、思考教学过程设计备注（时间分配、个性修改等）教学步骤及主要内容一、问题激趣导入 同学们平时上网吗？在网上都看到些什么？二、网站欣赏 欣赏网站，了解网页、网站、主页的概念。三、基本概念l 网页：就是把文字、图像、图形、声音、动画、视频等多种形式的信息，以及分布在因特网上的各种相关信息，互相链接起来而构成的一种信息表达方式。网页通常是HTML格式（文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等）。l 主页：进入网站后显示的第一个画面。主页通常命名为index.html或index.asp 。l 网站：表达一个主题需要制作多个网页，把这个网页互相链接起来，就构成网站。网站中除了网页外，还有网页中用到的图片、声音、动画、视频等素材文件夹。网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。如果只有域名和虚拟主机而没有制作任何网页的话，客户仍旧无法访问您的网站。四、网页的基本组成（结合网站讲解、标注）标题站标即网站标识（logo）页眉导航栏内容页脚五、网页的分类按所处位置分类：主页和子页按表现形式分类：静态网页和动态网页六、网页制作工具Html frontpage dreamweaver flash七、网站的工作原理3分钟20分钟10分钟10分钟10分钟10分钟课堂练习打开一个网站，让同学们指出每部分的名称。10分钟小结与作业课堂小结1、 你对网页认识了多少？2、 网页制作课程学习之后，可以用来干什么？3、 网站、网页、主页三者之间的联系是什么？本课作业打开一个网站，观察并指出各部分的名称。本课教学后记（课堂设计理念，实际教学效果及改进设想）学生对网络、网站表现出较大的兴趣，在网站欣赏阶段，学生的积极性和好奇心表现强烈，但当进入理论讲授阶段，就觉得枯燥乏味。尤其是网站工作原理，这种看不见摸不着的东西，更是一副事不关已，高高挂起的态度。教研组长签字： 年 月 日20142015学年度第一学期网页制作课程电子教案 授课课题：建站预备知识 授课教师：蒋红艳 NO： 2授课班级14春微机、14春商务授课日期授课类型实训学 时 数2教学目标1、 认识网站、网页、主页和素材； 2、 认识网页的基本组成部分；3、 感知网站的风格与版式教学内容1、浏览范例网站，了解网站的构成形式，网站、网页、主页间的关联；2、知道主页在网站中的地位；3、了解一些常见网站的风格与版式。重点难点感知网站的风格与版式教学方法展示、指导学习方法观赏领悟教学过程设计备注（时间分配、个性修改等）教学步骤及主要内容一、布置任务1、欣赏网站，思考网站、主页、网页之间的关系；2、观察网页的组成部分，指出各部分的名称；3、观察网页的版面，细心体会网站主题与网页用色、版式之间的微妙关系；4、思考：制作一个好的网页，你认为哪些方面最重要？二、分发范例网站 用教师软件，把准备好的范例网站发送到学生机上，让学生自主浏览欣赏网站。三、学生欣赏网站，思考上述问题时尚网站摇滚网站动漫网站艺术网站球迷网站化妆品网站影集运动品牌网综合网站数码商店课堂练习小结与作业课堂小结1、 网站、网页、主页之间的关系；2、 网页的组成；3、 一个好的网页表现在哪些方面？本课作业本课教学后记（课堂设计理念，实际教学效果及改进设想）教研组长签字： 年 月 日20142015学年度第一学期网页制作课程电子教案 授课课题：创建站点 授课教师：蒋红艳 NO： 3授课班级14春微机、14春商务授课日期授课类型讲授、演示学 时 数2教学目标1、 熟悉Dreamweaver界面；2、 掌握创建站点的方法及添加删除重命名网页的方法；3、 掌握更改网页标题的方法；4、 了解HTML基本结构。教学内容熟悉Dreamweaver界面，创建一个空站点，在站点内添加网页、文件夹，更改网页标题。重点难点1、设置站点的存储位置2、HTML基本结构教学方法演示、讲解学习方法观察、练习教学过程设计备注（时间分配、个性修改等）教学步骤及主要内容一、 Dreamweaver简介Adobe Dreamweaver，简称DW，“梦想纺织者”之意，是美国MACROMEDIA公司开发的集网页制作与管理网站于一身的所见即所得的网页编辑器，它是第一套针对专业网页设计师特别、发展的视觉化网页开发工具。二、 熟悉Dreamweaver工作环境1、 启动Dreamweaver软件；2、 认识Dreamweaver界面；菜单栏、工具栏、编辑区、面板组、编辑模式三、 创建站点、素材文件夹和主页 1、打开网页制作软件dreamweaver;2、选择“站点”菜单“新建站点”命令；3、在定义站点窗口中输入站点名称4、在上述窗口中打开“浏览浏览夹”，打开“计算机”，在D盘新建一个文件夹，命名站点名称，选择该文件夹；5、在“文件”面板中，选中“站点”，右击，选择“新建文件夹”，命名为images;6、同步骤5，新建文件，命名为index,html四、 网页操作1、 添加、删除、重命名网页；2、 修改网页标题； 3、 网页编辑模式：代码、拆分、设计五、 HTML基本结构 无标题文档课堂练习练习创建一个站点，并在站点内添加素材文件夹、主页、修改网页标题。小结与作业课堂小结本课作业本课教学后记（课堂设计理念，实际教学效果及改进设想）教研组长签字： 年 月 日20142015学年度第一学期网页制作课程电子教案 授课课题：创建站点 授课教师：蒋红艳 NO： 4授课班级14春微机、14春商务授课日期授课类型上机实训课学 时 数2教学目标1、 熟悉Dreamweaver界面；2、 掌握创建站点的方法及添加删除重命名网页的方法；3、 掌握更改网页标题的方法；教学内容熟悉Dreamweaver界面，创建一个空站点，在站点内添加网页、文件夹，更改网页标题。重点难点设置站点的存储位置教学方法指导、检查学习方法实训教学过程设计备注（时间分配、个性修改等）教学步骤及主要内容一、 布置任务新建一个站点，在站点内添加素材文件夹和主页，并为主页修改标题。二、 教师演示学生初次接触新课程，教师在教室的操作容易忘，再现操作是必要的。三、 学生实训 老师整理好实训步骤分发给学生，让学生更好完成上机任务： 1、打开网页制作软件dreamweaver;2、选择“站点”菜单“新建站点”命令；3、在定义站点窗口中输入站点名称4、在上述窗口中打开“浏览浏览夹”，打开“计算机”，在D盘新建一个文件夹，命名站点名称，选择该文件夹；5、在“文件”面板中，选中“站点”，右击，选择“新建文件夹”，命名为images;6、同步骤5，新建文件，命名为index,html7、修改网页标题； 8、保存站点课堂练习练习创建一个站点，并在站点内添加素材文件夹、主页、修改网页标题。小结与作业课堂小结本课作业本课教学后记（课堂设计理念，实际教学效果及改进设想）教研组长签字： 年 月 日20142015学年度第一学期网页制作课程电子教案 授课课题：交互式图像菜单 授课教师：蒋红艳 NO： 5授课班级14春微机、14春商务授课日期授课类型讲授、练习学 时 数2教学目标1、 知道交互式图像的作用；2、 掌握交互式图像的制作方法；教学内容制作交互式图像导航菜单重点难点交互式图像的制作方法教学方法演示、讲解学习方法观察、练习教学过程设计备注（时间分配、个性修改等）教学步骤及主要内容一、范例展示菜单原始状态鼠标经过菜单二、教师演示 1、把制作交互式图像需要的图像素材复制到站点的images文件中；2、打开index.htm3、使用“插入”/“表格”命令，插入一行一列的表格，设置表格边框为0；4、选择“插入”/“图像对象”/“鼠标经过图像”命令；5、在打开的窗口中“原始图像”和“鼠标经过图像”两栏中分别选择对应的图像6、保存，预览效果。（强调：用于创建交互式图像的两幅图像大小必须相同。否则，交换的图像在显示时会进行压缩或展开以适应原有图像的尺