网页制作教案

《网页制作教案》由会员分享，可在线阅读，更多相关《网页制作教案（92页珍藏版）》请在装配图网上搜索。

1、湖南省商业技 术 学院学期授课进度计划 二年级 第 一学期课程名称网页制作与设计适用班级16高21、22制定教师易会芝审批签字教研室主任年 月 日教务科长年 月 日教务院长年 月 日2017-2018学年第一 学期制定课 时 分 配授 课周 数周课时授 课总课时其 中讲 课实 验复习考试机 动23期 末 完 成 情 况计 划课 时完 成课 时超 出 或 缺 少 课 时超 出缺 少弥 补教 学 截 至章 节 内 容备注：用蓝黑或碳素墨水钢笔填写教学计划学情分析本门课程网页设计与制作的教学班级为14级计算机班,计算机班对网络知识有一定的了解,基础知识较好,同时根据实际情况,特拟定本计划.大 纲 要

2、 求通过本学期网页设计与制作的学习,主要要求同学们掌握网页制作的一些基本功能和操作,为以后的一些学习和工作打下较好的基础.通过学习要求同学达到以下要求：1、了解DreamweaverCS6的详细功能与操作方法.2、熟练掌握网页制作技巧.3、掌握网页规范以与网页优化和推广的知识.4、明确建设的流程和站点建设成后需要做的优化推广工作.教 学 重 点1、超级2、表格表单应用3、框架使用4、CSS样式教 学 难 点1、超级2、用表格和框架布局页面3、创建数据库教 学 方 法讲授法、演示法、项目教学法、合作学习、对话、任务驱动法、头脑风暴、小组讨论法等教学方法.学 期 授 课 进 度 计 划 表周次授

3、课 内 容课时备 注31.1基础知识21、2周新生军训1.2建设概述2实训 新建一个网页2上机42.1添加和编辑文本2实训 素材处理2上机实训 制作简单网页2上机567国庆放假6机动补周一课82.2添加和编辑图像62.3创建超级2实训 图像处理和创建超级2上机9实训 跳转菜单2上机2.4使用表格布局页面2实训 表格布局实例分析2上机102.5使用框架布局页面2运动会充周三到周五运动会11实训 框架布局实例分析2上机3.3添加动画2添加音频和视频212实训 DIV与表格的转换2上机4.3晃动的图片2实训 交换图像2上机13实训 拼图游戏2上机4.4修改属性特效与动态菜单制作2实训 效果行为应用2

4、上机14实训 图片展播实例2上机5.1认识和编辑CSS2实训 美化页面2上机15实训 应用CSS到网页中2上机5.2类型、背景和区块样式2实训 方框、边框和导航栏2上机16实训 超样式与设置技巧2上机学 期 授 课 进 度 计 划 表6.1DIV布局页面26.2认识Spry217实训 调整样式2上机6.3选择服务器和使用虚拟机26.4申请域名218实训 发布2上机7.1个人主页制作27.2策划构思与设计流程219实训 页面布局2上机7.3制作页面头部27.4制作中间表格内容220元旦放假2机动2充周一课22122222复习考试6教研组意见课题1.1网页制作基础知识教学课时2课时教学目标知识目标

5、能了解网页制作软件的特点能力目标能掌握网页制作的基本概念情感目标提高学生团结合作精神,提高学生竞争意识教学重点网页的组成教学难点网页的分类,网址与域名的区分教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程课前准备导入新课讲授新课动手实践课堂小结作业布置时间分配510501555教学过程过程安排教学内容教师活动 学生活动设计意图课前准备1、教师自我介绍；2、点名；3、课程介绍4、课堂要求1.自我介绍2.按照花名册点名3.课程介绍4.统计学情5.提出期望与要求1.班长

6、统计座次表2.学生自我介绍3.反应学情4.推荐课代表.使师生尽快互相认识,并促使学生答题了解我们的课程.导入新课本次课是本学期第一次上课,简单介绍本课程：1、网页设计相关级别与其薪资待遇2、网页设计的就业方向与其公司类型以提问的方式了解学生对网页设计的认知学生之间相互讨论,加深对网页设计的认识提问跟就业和薪资有关的问题,抓住学生注意力.任务一讲授新课一、网页设计介绍1、是企业向用户和网民提供信息包括产品和服务的一种方式,是企业开展电子商务的基础设施和信息平台,离开去谈电子商务是不可能的.2、企业的被称为网络商标,也是企业无形资产的组成部分,而是Internet上宣传和反映企业形象和文化的重要窗

7、口.二、网页设计的要点1、明确建站目标和需求.2、主题鲜明.3、版式设计.4、色彩在设计中的作用.5、设计形式与内容统一.三、设计级别1、新手入行2、跳槽阶段3、稳定阶段4、大师阶段四、网页设计公司类型1、门户游戏类2、企业部门类3、建设类4、互动设计类五、网页三剑客1、 Dreamweaver：可视化页面设计、管理2、 Fireworks页面图象设计工具3、 Flash动画制作六、网页基础知识1、网页与的区别1网页是系统#息的基本单位,简单来说,就是后缀名为htm的文件.2是指存放在网络服务器上的完整信息的集合体.2、网页的组成1文字：最直接、通用、容易的沟通方式2图片：网页的一大特点图文并

8、茂3动画：1995年,Sun公司开发了Java语言,用户可以创建能调用图片和声音的多媒体应用小程序4超：要通过一种方式把各独立的网页整和在一起,使之构成一有机整体,而这种页面的功能叫超.5特殊组件：图片与动画可算是最常见的特殊组件.3、主页Homepage引导访问者浏览. index、main、default4、网页空间在Internet上申请的一个存储空间,用以存放网页.5、网址和域名 IP地址域名：与IP地址相对应,唯一性,善于识别最右边：国家中国其次：机构商业机构再次：子网名称最左边：服务器类别web服务器6、网页的分类静态页面与动态页面7、认识门户：sina个人：明星专业：医疗职能：政

9、府简单介绍网页知识提问：网页设计要点并将学生分组进行讨论讲述设计级别,引导学生对这个行业向往,并鼓励学生向大师阶段努力简单介绍学生将来从事本行业的范围介绍网页制作需要的软件给学生灌输网页设计的基本知识吸收新知识并思考生活中常见网页设计知识分组讨论,并派出代表来总结思考自己的定位了解本行业的现状认识软件基本组成做笔记,识记教师讲述的知识讲述基础知识,为后面学习打下基础加强学生之间交流沟通能力,加深学生对网页设计要点理解引导学生了解这个行业引导学生了解本行业从事范围提前引导学生认识dreamweaver cs5 为后面软件学习打下基础这些知识都是学网页设计最基本的基础知识,学生基础知识薄弱,必须了

10、解这些才能学习后面的内容任务二动手实践根据网页设计要点,以小组为单位确定一个主题,小组讨论需要的步骤以与素材巡回指导,给予学生帮助小组讨论,相互沟通加深学生对网页设计要点学习课后作业1、 按照课堂分组课后进行讨论2、 每组确定一个主题方向.3、 每组设计一个调查问卷.课堂小结一、 网页设计师就业方向二、 设计流程三、 常见教学反思本次课是网页设计第一次上课,主要讲述一些网页基础知识,学生基础知识薄弱,需要加强,整体来说计算机班基础知识要好于电子商务班板书一、网页设计介绍二、网页设计的要点三、设计级别四、网页设计公司类型五、网页三剑客六、网页基础知识课题1.2建设概述教学课时2课时教学目标知识目

11、标了解做的准备工作,掌握站点的建立.能力目标1. 能了解开发的基本流程.2. 能掌握开发的基本原则.3. 能学会站点的建立与管理.情感目标提高学生团结合作精神,增强小组合作能力教学重点站点的建立教学难点如何规划好一个教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件、多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动 学生活动设计意图课前准备1、搜集了解开发的基本流程.2、设计、制作过程中的一些原则、注意事项.配合学生搜索资料与解答疑问网上搜索教师提出问题,了解设计事项培养学生自主学习能力导入

12、新课设计大致流程是哪些？每组派出一个代表阐述本组课前搜集的资料听取学生的观点并给予一定的知道阐述观点,组员之间相互讨论锻炼学生的语言表达能力和分析能力任务一讲授新课一、 设计流程架构内容信息搜集整理资料规划结构网页制作整合效果测试上传推广更新维护任务二分组讨论二、 开发原则1、 确定主题讨论：是靠什么赢利的？2、规划站点结构1结构设计2目录结构设计3形象设计4主页设计5其他页面设计6企业站点设计7为站点设计目标对象访问率三、网页版面布局设计1、版面布局的原则1主次分明、中心突出2大小搭配、相互呼应3图文并茂、相得益彰4动静适度、平衡对称2、页面布局的类型1国字型2框架型3标题正文型4封面型5综

13、合型四、规划站点1、建立站点目录2、站点规划规划站点结构是利用不同的文件夹将不同的网页内容分门别类的保存.3、创建导航草图五、搜集素材1、搜集并制作素材无论是文字素材还是图片、动画素材,都应注意其来源是否注明所有.素材要为主题服务.2、整理素材原始素材、编辑处理好的素材3、命名规范六、创建站点1、不使用服务器技术2、本地编辑3、不连接到远程服务器七、管理站点1编辑现有站点2删除已有站点1、确定主题的建议2、给取名3、提示决定的性质小组讨论,相互沟通加深学生对网页设计要点学习课后作业根据这次课的内容、注意事项,构思一个明确的主题,并将站点结构的规划用文件夹表示出来课堂小结一、 设计确定主题二、

14、设计流程三、 站点管理教学反思本次主要讲述站点的建立和管理,课程较简单,学生掌握较好板书一、设计流程二、开发原则三、网页版面布局设计四、规划站点五、搜集素材六、创建站点七、管理站点实训课题新建一个网页实训课时2课时实训目标1、 熟悉Dreamweaver cs4界面2、 制作简单网页实训重点1、 学会在网页中输入文字、插入图片等2、 掌握简单代码的编写实训难点代码的编写实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求1. 对照实习报告的要求,完成上机任务；2. 任务完成后与时要求教师考评；3. 完善实习报告,填写实训总结；遵守实训纪律,不游戏,不睡觉,不高声谈论.实训过程内容

15、操作要求与步骤任务一新建网页11、 双击打开软件新建HTML网页网页名字为nes01输入以下文字然后保存2、文字要求：标题 宋体 二号 蓝色 正文：五号 宋体 加粗任务二新建网页2制作如下网页 素材见文件夹 网页命名文字为index 保存在文件夹中上交给老师操作步骤：新建HTML网页输入文字将标题设置为36号,蓝色,宋体插入两根红色的水平线插入时间插入商标插入背景图片保存完善报告填写实训总结,并上交实习报告.自主练习剩余时间,可进行自主练习,内容不限,但不可违反上机纪律实训总结本次课是学生第一次上机,制作一个较简单的网页,学生存在对DW界面不熟,操作不熟练等缺点,需加强操作课题2.1编辑和添加

16、文本教学课时2课时教学目标知识目标1、 掌握输入和编辑文本2、学会插入文本,掌握设置文本格式的方法能力目标掌握网页中三种常见列表的创建,与其各自的特点情感目标提高学生自主学习和团队竞争意识教学重点插入和编辑文本教学难点创建列表教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动 学生活动设计意图导入新课5min提问：在DW中输入文本和在Word中输入文本有何区别？将学生分组,并提出问题,引导学生小组之间讨论并总结讨论并思考以讨论的形式提高学生之

17、间的交流沟通任务一插入文本一、插入文本1、 插入普通文本2、 插入不换行空格3、 插入水平线4、 插入日期和特殊字符二、编辑文本1、基本样式设置2、设置段落格式3、创建列表演示并强调重点认真听讲并记下重点文本插入是基础知识,为下面任务二打下基础任务二完成以下网页实例：1、 引导学生讨论该网页由哪几部分组成2、 引导学生小组组内分工,完成小模块小组讨论本实例即是对任务一的巩固,也为下一次课打下基础作业布置5min1、 找一篇文章输入至页面中,然后利用所学知识,对其进行格式编排课堂小结5min一、 插入文本二、 编辑文本板书一、插入文本5、 插入普通文本6、 插入不换行空格7、 插入水平线8、 插

18、入日期和特殊字符二、编辑文本1、基本样式设置2、设置段落格式3、创建列表三、实例操作教学反思本次课是 一个基础知识内容,文本是一个网页必不可少的内容,对网页设计至关重要,学生必须牢牢掌握文本的各个要点.目前来说学习兴趣较好.实训课题素材处理实训课时2课时实训目标1、 掌握创建本地站点和远程站点2、 学会修改站点和多站点的管理实训重点站点的管理实训难点站点的管理实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求1、 对照实习报告的要求,完成上机任务；2、 任务完成后与时要求教师考评；3、 完善实习报告,填写实训总结；4、遵守实训纪律,不游戏,不睡觉,不高声谈论.实训过程内容操作要

19、求与步骤任务一创建站点1、熟悉DW界面2、在D盘根目录创建一个站点名称为我的足球网,本地站点文件夹为jc,如下图所示任务二设置默认图像文件夹利用教师所给素材,制作简单网页我的偶像,素材见文件夹完善报告填写实训总结,并上交实习报告.自主练习剩余时间,可进行自主练习,内容不限,但不可违反上机纪律实训总结本次上机主要是让学生掌握站点的建立与输入文本和编辑文本等,学生操作较好,大部分能完成任务.实训课题制作简单网页实训课时2课时实训目标1、 掌握新建网页、编辑文字、处理图像2、 新建站点3、 插入水平线、空格、自动更新时间实训重点制作简单网页流程实训难点综合运用HTML工具实训方法上机实训实训准备教案

20、、素材、案例、教材、计算机机房实训要求4、 对照实习报告的要求,完成上机任务；5、 任务完成后与时要求教师考评；6、 完善实习报告,填写实训总结；4、遵守实训纪律,不游戏,不睡觉,不高声谈论.实训过程内容操作要求与步骤任务一足球偶像网页1、 熟悉DW菜单栏常用界面2、 完成以下简单,素材见素材库完善报告填写实训总结,并上交实习报告.自主练习剩余时间,可进行自主练习,内容不限,但不可违反上机纪律实训总结本次上机内容较多,主要考察学生综合性的练习,如图片的插入,文字的编辑与水平线的插入等,需要学生对前面的知识非常熟悉,13高12班整体班级学习氛围较好,所有学生都能按时上交作业,值得表扬课题2.2添

21、加和编辑图像教学课时2课时教学目标知识目标1、 掌握图像裁剪、重新取样、亮度、锐化的设置2、掌握图像属性设置能力目标掌握运用软件对图像处理的能力情感目标提高学生团结合作精神,提高学生竞争意识教学重点图像的编辑教学难点图像的编辑教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动 学生活动设计意图导入新课前面介绍网页的时候有说过,在保证画质的情况下,图片的数据量越小越好.问题：如果一张图片数据量很大,我们该如何编辑？演示cluo.jpeg这张图片

22、,分析数据量为93k、画质为1024*768规格的图片如何更改数据量和规格？分组讨论用什么方法来更改数据量和规格提出问题引发学生思考,引出这次课的主题任务一编辑图片给出cluo.jpeg和gg.jpeg两张图片进行对比,提出任务：如何从cluo.jpeg变化到gg.jpeg？具体操作步骤：打开DW软件插入图像cluo.jpeg,对图片属性设置如下目标值：编辑完成后与原图像进行对比,会发现数据量、规格都发生变化,但浏览网页更友好对图片宽、高、裁切、重新采样、锐化等设置进行演示观看教师演示,并思考cluo.jpeg变成cluo.jpeg的方法引导学生学习理论的时候思考如何理论运用到实践任务二制作翻

23、转图像概念：在网页浏览中,有时当鼠标移到某个图像上或者单击时,图像会变成另外一副图像.浏览时效果：鼠标放上去时效果：1、 鼓励学生小组讨论如何完成翻转图像效果；2、 给学生展示翻转图像做出来的效果,然后讲解如何才能完成这个效果小组讨论如何完成该效果并进行尝试课堂小结一、 如何编辑图像二、 制作翻转图像效果板书设计一、编辑图像1、 重新采样2、 裁剪、锐化二、翻转图像制作效果教学反思本次教学学生较感兴趣,特别是鼠标经过的图像,学生完成得较好,值得鼓励课题2.3创建超级教学课时2课时教学目标知识目标1、 掌握创建超的方法2、 掌握相对和绝对的区别3、 创建锚点能力目标提高学生学习创作能力情感目标提

24、高学生团结合作精神,提高学生竞争意识教学重点1、 正确认识路径2、 理解相对和绝对的区别教学难点添加超、相对路径、绝对路径教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动 学生活动设计意图导入新课每次浏览网页的时候点击某个文字或者图片,能自动跳转到另一个页面,提问：这样的形式叫什么？如何实现？进入新浪网给学生演示超级的效果并进行提问观看效果并讨论如何才能实现该效果以提问且学生较熟悉的浏览网页的方式吸引学生的注意任务一创建超级20min一、新

25、建站点jcww,并在站点内新建默认图像文件夹images,将网页Index.HTML里的我与足球到news.HTML,目标为-blank；足球新闻到逢入京使.HTML,目标为-new；足球明星到我与足球网.HTML,目标为-self.二、对比每个目标不同,网页新建窗口不同并进行总结给学生演示如何插入；演示不同目标新建窗口的区别观看教师演示,并思考-new、-blank、-self几个目标值窗口的区别让学生熟悉DW添加超级的界面任务二相对和绝对任务三锚点区别：相对是指的地址是本站点之内的对象；绝对是指的地址是远程对象,用域名或IP作为地址一、概念：在本页进行的叫做锚点,一般在长篇的文章或技术文档

26、中是使用,到某个特殊的段落.二、打开第4章/4-3/jieshao.html网页,演示锚点效果演示教材P60实例演示如何插入锚点思考并正确理解相对和绝对概念观看教师演示并思考锚点的应用正确理解相对和绝对,为下面的学习打下基础锚点应用比较广泛,学生需要掌握并应用课堂小结一、 页面与页面之间的超二、 相对和绝对三、 锚点本页之间作业布置一、 网上查找哪些页面常用页面与页面,哪些是用锚点并总结二、 利用教材第4章/4-3/jieshao.html的素材,自己动手创建锚点板书三、 创建超级的方法与步骤四、 相对和绝对五、 创建锚点教学反思本次课主要介绍超的常用方法,超在学生上网中随处可见,较易理解,学

27、生之间的讨论也非常激烈,较好.实训课题图像处理和创建超实训课时2课时实训目标3、 学会利用DW处理图像4、 掌握创建超级的方法5、 理解相对和绝对概念实训重点1、 图片处理2、 超级实训难点超级的使用实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求7、 对照实习报告的要求,完成上机任务；8、 任务完成后与时要求教师考评；9、 完善实习报告,填写实训总结；4、遵守实训纪律,不游戏,不睡觉,不高声谈论.实训过程操作要求与步骤任务一处理图像1、 将图片6.jpeg修改为尺寸为240*160,数据量设置为8K左右6-11k都可以并进行裁剪和锐化等设置,熟悉图片处理几个设置,设置完成后

28、以网页的形式保存,保存在文件夹中,保存名称为xiugai.html任务二超级2、 将教师发送的Index.HTML网页进行编辑,将我与足球四个字到我与足球网.html,目标为-self；将足球新闻四个字到逢入京使.html,目标为-blank；将足球明星四个字到news.html,目标为-new.3、 修改页面属性：在页面属性对话框中,设置选项中的大小为16像素,颜色为#6666cc,变换图像颜色为#ff6600,已访问为#663366,活动为#99cc00,下划线样式为仅在变换图像时显示下划线.设置的对话框如下图所示：完善报告填写实训总结,并上交实习报告.自主练习剩余时间,可进行自主练习,内

29、容不限,但不可违反上机纪律实训总结本次实习内容较多,大部分学生能在规定时间内完成任务,较好.实训课题跳转菜单实训课时2课时实训目标6、 掌握图像热点的使用7、 掌握脚本8、 掌握检查器的使用实训重点路径的正确使用实训难点的运用与检查器的使用实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求10、 对照实习报告的要求,完成上机任务；11、 任务完成后与时要求教师考评；12、 完善实习报告,填写实训总结；4、遵守实训纪律,不游戏,不睡觉,不高声谈论.实训过程操作要求与步骤任务一创建图像热点在地图中创建热点任务二制作跳转菜单打开news.HTML网页,在如下图所示的位置插入图片,图片

30、为鼠标经过的图片,到本页的冠军杯新闻处提示：利用锚点打开jieshao.html网页,在下载资源文本中将教师提供的 .rar放入站点,做成的效果是点击下载资源就能下载 .rar,同理在联系我们中设置下载完善报告填写实训总结,并上交实习报告.自主练习剩余时间,可进行自主练习,内容不限,但不可违反上机纪律实训总结本次实习内容较多,大部分学生能在规定时间内完成任务,较好.课题2.4使用表格布局页面教学课时2课时教学目标知识目标1、了解表格在网页设计中的作用.2、掌握网页中表格的制作方法、表格属性的设置方法以与单元格属性的设置方法,能够在单元格中正确插入文字和图片.3、能够根据网页设计内容,正确布局表

31、格的结构,掌握表格嵌套的设计方法.能力目标1、利用对比学习,培养学生知识迁移的能力.2、通过用表格结构设计网页,使学生进一步理解表格的作用、功能与网页设计方法的多样性,培养学生的发散思维能力情感目标通过自主探究,使学生掌握软件的使用规则,培养学生自主学习的能力.教学重点1、了解表格在网页设计中的重要作用.2、掌握插入、编辑表格的方法与表格的属性设置.3、掌握单元格属性的设置.教学难点表格的嵌套在网页设计中的应用教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安

32、排教学内容教师活动 学生活动设计意图导入新课1展示两个页面并进行比较：一个使用表格布局,表格边框隐藏,其页面工整,文本、图片摆放对称,具有一定的规律；另一个页面凌乱,图文混杂,摆放杂乱.问题1：你喜欢那个页面的布局？问题2：用什么方法可以达到第二个页面的效果？展示并引导学生思考学生仔细观察并比较两个网页,讨论、交流,回顾Word中学习过的表格,领悟表格在Dreamweaver中的作用.通过对比学习,培养学生知识迁移的能力.任务一网页框架一、仿照网页3的样式,制作一个网页框架.在学生自主探究的基础上,教师总结插入表格的一般方法.并插入一个2行1列,表格宽度800像素,边框粗细0像素的表格.演示如

33、何插入表格并对表格的设置分析网页3,找出其中使用的表格,仿照插入图像的方法,探索插入表格的方法.插入表格,通过实际操作强化对表格属性的认识.引导学生学习理论的时候思考如何理论运用到实践动手分析和进行创意设计,培养学生的模仿以与创新能力任务二表格合并和拆分二、在任务一的基础上,探索表格基本属性：合并与拆分单元格；单元格的宽度与高度；用实例来演示如何合并和拆分单元格根据需要,插入图片,在第二行拆分为两列,左边放文字,右边放图通过实例,培养学生分析问题、解决问题的能力.任务三表格嵌套表格的嵌套.在大表中插入一个小的表格,这是创建复杂表格样式的有效方法.要提示学生不要嵌套过多.展示几种常见的图文混排样

34、式,让学生选择自己喜欢的一种完成网页.完善网页,制作完成的同学把网页通过FTP上传.让学生自主发挥,充分展示个性风采课堂小结一、 网页框架和表格基本操作二、 表格的合并和拆分三、 表格嵌套课堂作业完成教材第五章/Index.html的表格教学反思通过表格的嵌套与分析,对页面进行布局.需要加强学生对表格合并和拆分的运用实训课题表格布局实例分析实训课时2课时实训目标1、 能运用表格为页面布局2、 能掌握表格的嵌套操作3、 能做出超越公司简介页面.实训重点1、掌握插入、编辑表格的方法与表格的属性设置.2、掌握单元格属性的设置.实训难点表格的嵌套在网页设计中的应用实训方法上机实训实训准备教案、素材、案

35、例、教材、计算机机房实训要求13、 对照实习报告的要求,完成上机任务；14、 任务完成后与时要求教师考评；15、 完善实习报告,填写实训总结；4、遵守实训纪律,不游戏,不睡觉,不高声谈论.实训过程操作要求与步骤任务一创建图像热点制作如下图所示的界面：操作要求：1、 top区1一行三列：788px=128+540+120 Logo+Banner+主页常用选项2第三列嵌套三行两列表格：120px=30+90小图标+文本选项2、menu区1一行两列：788px=148+640 显示当前日期+导航条2第二列嵌套1行17列表格：奇数列单元格输入栏目文本,宽65px；偶数列单元格输入|,宽为6px.3、m

36、ain区12行3列：788px宽,500px高 788=150+10+628 500=5+4952A、maintop区合并单元格3B、mainleft区嵌套13行1列表格：145px宽,2px间距第1行与第7行：高25px第2-6行：高36px,输入文本第8-13行：高40px,插入图片3C、mainmiddle区空单元格4D、mainright区嵌套3行1列表格：495px高 495=30+375+90第一行：输入文本第二行：嵌套1行2列表格628px=304+324第一列：输入文本第二列：嵌套2行1列表格300px宽,右对齐375px高=220+160 第1行：插入图片 第2行：嵌套3行5

37、列表格 高160=30+65+65 宽300=80+30+80+30+80第三行：鼠标经过图像4、bottom区3行1列：788px宽,45px高第一行：水平线第二行：信息第三行：联系方式完善报告填写实训总结,并上交实习报告.自主练习剩余时间,可进行自主练习,内容不限,但不可违反上机纪律实训总结表格布局是最常见的一种布局方式,本次实训学生较积极,特别是13高12班同学学习氛围特别好.课题2.5使用框架布局页面教学课时2课时教学目标知识目标1、能掌握框架的基本操作.2、能理解框架技术的实质.能力目标能用框架布局页面情感目标通过自主探究,使学生掌握软件的使用规则,培养学生自主学习的能力.教学重点框

38、架的基本操作教学难点用框架为页面布局教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动 学生活动设计意图导入新课在学习过表格布局后,我们可以做一些常规的页面布局了,但有些特殊效果我们却无法实现.如图所示的网页：今天我们来学习另一种页面布局技术框架.展示框架页面给学生,引发学生思考预习 并思考框架页面布局通过实例来展示,引发学生思考特殊效果如何实现,培养学生积极思考问题的能力任务一基本知识一、基本概念：框架是一种网页布局技术.二、创建框架与框架

39、集1、手动设计2、插入预定义框架三、创建嵌套框架四、选择框架和框架集1、在编辑区中选择2、在框架面板中选择五、删除框架六、保存框架与框架集文件加强学生对框架布局的理解并进行简单操作认真听讲并对概念进行消化理解学生只有在牢固的掌握了基本概念后才能为任务二的学习打下基础任务二实例操作完成如下图所示的页面：要求如下：（1） topFrame：高：100px表格：2x2,宽-788px,高-100px高：100=75+25宽：788=128+660（2） 第一行：Logo+Banner第二行：当前页位置信息+导航栏导航栏：1x7表格宽：660px高：25px字号：9pt行高：14pt（3） mainF

40、rame：表格：2x2宽：788Px,高：400Px边框：5px,间距：5px表格：3x1宽：788px,高：45px边框：0px,间距：0px将学生分7组,并引导学生分组讨论如何完成如图所示的效果讨论如何才能实现如图所示的效果并总结通过实例,培养学生分析问题、解决问题的能力.课堂小结四、 框架基本概念二、创建框架与框架集三、创建嵌套框架四、选择框架和框架集五、删除框架六、保存框架与框架集文件课后作业设计一系列框架型页面,然后将之实现.要求结合超的相关知识.教学反思本次主要讲述框架和框架集布局页面,运用实例学生加深了对框架的理解,运用起来得心应手.14高31班学生学习氛围待加强实训课题框架布局

41、实例分析实训课时2课时实训目标4、 能掌握布局表格和布局单元格的基本操作.5、 能在布局模式下对页面进行整体布局.实训重点掌握布局表格和布局单元格的基本操作.实训难点项目的实现实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求16、 对照实习报告的要求,完成上机任务；17、 任务完成后与时要求教师考评；18、 完善实习报告,填写实训总结；4、遵守实训纪律,不游戏,不睡觉,不高声谈论.实训过程操作要求与步骤任务一利用框架排版步骤1 选择文件菜单栏中的新建命令,创建一个新的页面,并将其命名为个人主页.步骤2 选择插入工具栏中布局任务栏中的框架命令,单击按钮,选择下拉菜单的顶部和嵌套

42、的左侧框架命令.步骤3 弹出框架标签辅助功能属性对话框,将网页中框架的各个部分进行命名.步骤4 选择窗口菜单栏中框架命令.步骤5 右侧的面板中就加入了框架面板,选中topFrame框架进行编辑.步骤6 页面下方出现了topFrame框架的属性面板.对top Frame框架进行编辑.步骤7 选中mainFrame框架进行编辑,页面下方出现了mainFrame框架的属性面板,对mainFrame框架进行编辑.步骤8 选中leftFrame框架进行编辑,页面下方出现了leftFrame框架的属性面板,对leftFrame框架进行编辑.步骤9 选择文件菜单栏中的保存全部命令,对文件进行保存.步骤10

43、弹出保存整体文件的对话框,为文件命名为index.html.步骤11 对各个框架部分进行保存,为各个框架进行命名.步骤12 单击F12,在浏览器中预览效果. 任务二创建框架集创建框架集,可以自己设计,也可以从预定义的框架集中选择,还可以修改一个已存在的Dreamweaver文件来创建.实验内容：步骤1 选择修改菜单栏中的框架集命令.步骤2 根据需要在其子菜单中选择任意一个分割命令.步骤3 若要删除一个子框架,将其边框拖至页面或其父框架之外即可. 完善报告填写实训总结,并上交实习报告.自主练习剩余时间,可进行自主练习,内容不限,但不可违反上机纪律实训总结本次实训学生需要的掌握的内容较多,对于框架

44、布局的位置要准确掌握,难度较大课题3.3添加动画教学课时2课时教学目标知识目标1、掌握在网页中添加各种动态元素2、掌握Flash属性设置能力目标1、学会区分源文件和影片文件格式2、掌握在网页中插入各种Flash元素3、能为网页添加音视频元素.情感目标通过自主探究,使学生掌握软件的使用规则,培养学生自主学习的能力.教学重点添加flash的具体操作教学难点规划一个多媒体导航条教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件、多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动 学生活动设计意图 导

45、入新课试想网页中只有文字和图片,那么网页跟杂志报纸还有什么区别呢？动态元素能够更加丰富页面的效果,是网页是一大特色.注意：不要把动态元素和动态页面划上等号.将本次课的作品展示给学生,学生在欣赏精美网页的同时思考如何完成该作品欣赏作品并思考通过作品来展示,引发学生思考如何实现,培养学生积极思考问题的能力任务一基本知识一、flash文件基本知识1、Flash源文件：*.fla2、Flash影片文件：*.swf二、添加flash动画文件Flash动画是一种基于矢量格式的多媒体动画元件,它体积小,其扩展名为.swf.Flash动画被广泛应用于网页中.操作步骤：1.光标定位2.插入flash文件3.保存

46、、预览三、添加flash按钮Dreamweaver中内置了一些flash按钮,用户可以很方便将他们添加到网页中.注意：在页面中添加flash按钮和flash文本之前必须先保存网页.操作步骤：1.光标定位2.插入flash按钮3.设置按钮属性4.保存、预览四、添加flash文本插入媒体Flash文本五、为网页添加音频插入媒体插件教授新知识,为任务二的完成做准备吸收动画新知识让学生吸收新知识,为后面的实例操作打下基础任务二拓展训练要求：制作如下图所示网页,插入三行一列表格,插入Flash动画要求动画大小宽高为400*300,第二行插入图片,第三行输入文字并排版,最后得到的结果如下图所示：课堂小结一

47、、 添加多媒体元素使页面具有动态效果二、 插入Flash按钮和Flashpaper三、 插入播放器课后作业用Flash按钮或文本制作一个导航条,然后为页面添加背景音乐.教学反思学生对动画、音视频有敏锐的触觉,学习起来颇有兴致.实训课题添加音频和视频实训课时2课时实训目标6、 掌握插入表格、图片、背景图片设置7、 掌握插入Flash文本、Flashpaper、Flash视频、背景音乐等实训重点Flash属性、Flash元素实训难点Flash元素实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求19、 对照实习报告的要求,完成上机任务；20、 任务完成后与时要求教师考评；21、 完

48、善实习报告,填写实训总结；4、遵守实训纪律,不游戏,不睡觉,不高声谈论.实训过程操作要求与步骤任务制作Flash网页要求：利用DW cs3版本一、插入swf动画1、 新建站点和默认图像文件夹2、 新建网页文件Flash.html,插入1行2列的表格,表格宽度720px,边框粗细、表格间距、表格边距都为0.选择第二个单元格设置宽度为600px,高度设置为100px.然后在第一个单元格插入logo.jpeg,并且水平和垂直居中；在第二个单元格里插入背景图片选择单元格点击拆分找到td在td后空一格选择background选择bj.jpeg图片插入,并将图片设置为宽高600px,100px.保存3、

49、在第二个单元格插入wangyeba 005的Flash,并将Flash设置为宽高600px,100px规格,并设置Flash为透明二、插入Flash按钮：1、利用DW cs3版本插入导航栏：插入一行一列的表格,宽度为720px,边框粗细、表格间距、表格边距都为0,居中对齐.然后点击插入Flash按钮,选择下图所示的按钮并输入文字,如图所示：2、然后在导航栏的下一行插入一行2列的表格,宽度为720px,边框粗细、表格间距、表格边距都为0,居中对齐.左边单元格设置为宽200px,然后再嵌套一个表格,3行1列宽度为100%,边框粗细、表格间距、表格边距都为0,居中对齐.右边单元格插入一行一列宽度为9

50、8%的单元格居中对齐,边框为1,颜色为#FF00FF,然后在此表格中插入Flash文本,字体为宋体,大小30px,输入文本：我的个性空间,颜色为#FF0000,滚动颜色设置为：#00FF00,另存为wen.swf,如下图所示：4、 插入Flashpaper：首先在电脑上安装Flashpaper软件,然后将Flash.docWord文件转换为Flash.swf文件,将文件插入到网页中,设置Flashpaper宽高分别为480和400px三、插入播放器1、在左边的三个单元格范围中,将光标放入第一个单元格,点击插入媒体中的图像查看器,将Flash命名为abc,并将播放器设置为宽高180,1352、点

51、击右边的Flash元素,对图片进行设置,选择选项imageURLs表示图片的位置,选择你需要展播的图片,showControls显示控制条设置为否,slideAutoPlay自动播放设置为是,slideDelay每张图切换停留时间设置为2,slideloop循环播放是3、在左边第二个单元格插入媒体插件,插入sound声音,设置插件高宽分别为180,41,参数设置为,autostart false4、插入背景音乐完善报告填写实训总结,并上交实习报告.自主练习剩余时间,可进行自主练习,内容不限,但不可违反上机纪律实训总结本次实训内容较多,网页添加音频和视频使得网页内容更加丰富多彩,学生兴趣较浓课题

52、4.1编辑和创建AP DIV元素教学课时2课时教学目标知识目标1、掌握层的概念2、掌握如何编辑AP DIV层3、掌握层的嵌套能力目标1、掌握层的基本操作.2、能将层和时间轴联系起来制作漂浮效果情感目标通过自主探究,使学生掌握软件的使用规则,培养学生自主学习的能力.教学重点层的基本操作教学难点层的高级应用教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件、多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动 学生活动设计意图 导入新课5min层是一种HTML页面元素,可被放在页面的任意位置,在网页排版定位方面具有独特优势.展示课前准备的层的叠加,引导学生思考：如何制作这样的网页？欣赏作品并思考通过作品展示,引出本次课的主题任务一基本知识20min任务二综合实例25min一、创建AP DIV元素什么是Ap Div？AP元素绝对定位元素, 是一种HTML网页元素,一般称为 层.即网页内容的容器,包含文本,图像或其他任何可以在HTML文档正文中放入的内容.且可以精确定位在网页中的任何地方.二、编辑AP DIV元素1、调整层的大小2、层的层次关系3、层的首选设置4、层的对齐三、制作如图所示的网页强调重点：1、作为容器,可以放置其他网页元素.2、灵活定位.分组让学生讨论如何完成左图所示的任