《《网页制作》教案-.pdf》由会员分享,可在线阅读,更多相关《《网页制作》教案-.pdf(192页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、08年度 1月 221月 25日工作内容页脚内容 1湖 南 省 商 业 技 术 学 院学 期 授 课 进 度 计 划(二 年级第一 学期)课程名称网页制作与设计适用班级16高 21、22制定教师易会芝审批签字教 研 室 主任年月日教务科长年月日教务院长年月日08年度 1月 221月 25日工作内容页脚内容 22017-2018 学年第一学期制定课时分配授课周数周 课时授课总 课时其中讲课实验复习考试机动2308年度 1月 221月 25日工作内容页脚内容 3期 末 完 成 情 况计划课时完成课时超 出 或 缺 少 课 时超出缺少弥补教学截至章节内容备注:用蓝黑或碳素墨水钢笔填写教学计划学情分析
2、本门课程网页设计与制作的教学班级为14级计算机班,计算机班对网络知识有一定的了解,基础知识较好,同时根据实际情况,特拟定本计划。08年度 1月 221月 25日工作内容页脚内容 4大纲要求通过本学期网页设计与制作的学习,主要要求同学们掌握网页制作的一些基本功能和操作,为以后的一些学习和工作打下较好的基础。通过学习要求同学达到以下要求:1、了解 DreamweaverCS6的详细功能及操作方法。2、熟练掌握网页制作技巧。3、掌握网页规范以及网页优化和网站推广的知识。4、明确网站建设的流程和站点建设成后需要做的优化推广工作。教学重点1、超级链接2、表格表单应用3、框架使用4、CSS 样式教学难点1
3、、超级链接2、用表格和框架布局页面3、创建数据库教学方法讲授法、演示法、项目教学法、合作学习、对话、任务驱动法、头脑风暴、小组讨论法等教学方法。08年度 1月 221月 25日工作内容页脚内容 5学 期 授 课 进 度 计 划 表周次授课内容课时备注31.1网站基础知识21、2周新生军训1.2网站建设概述2实训 新建一个网页2上机42.1添加和编辑文本2实训 网站素材处理2上机实训 制作简单网页2上机508年度 1月 221月 25日工作内容页脚内容 667国庆放假6机动补周一课82.2添加和编辑图像62.3创建超级链接2实训 图像处理和创建超级链接2上机9实训 跳转菜单2上机2.4使用表格布
4、局页面208年度 1月 221月 25日工作内容页脚内容 7实训 表格布局实例分析2上机102.5使用框架布局页面2运动会充周三到周五运动会11实训 框架布局实例分析2上机3.3添加动画2添加音频和视频212实训 DIV与表格的转换2上机4.3晃动的图片2实训 交换图像2上机13实训 拼图游戏2上机08年度 1月 221月 25日工作内容页脚内容 84.4修改属性特效及动态菜单制作2实训 效果行为应用2上机14实训 图片展播实例2上机5.1认识和编辑 CSS2实训 美化页面2上机15实训 应用 CSS 到网页中2上机5.2类型、背景和区块样式2实训 方框、边框和导航栏2上机16实训 超链接样式
5、及设置技巧2上机学 期 授 课 进 度 计 划 表08年度 1月 221月 25日工作内容页脚内容 96.1DIV布局页面26.2认识 Spry217实训 调整样式2上机6.3选择服务器和使用虚拟机26.4申请域名218实训 网站发布2上机7.1个人主页制作27.2策划构思及设计流程219实训 页面布局2上机7.3制作页面头部27.4制作中间表格内容220元旦放假2机动08年度 1月 221月 25日工作内容页脚内容 102充周一课22122222复习考试6教研组意见08年度 1月 221月 25日工作内容页脚内容 11课题1.1网页制作基础知识教学课时2课时教学目标知识目标能了解网页制作软件
6、的特点能力目标能掌握网页制作的基本概念情感目标提高学生团结合作精神,提高学生竞争意识教学重点网页的组成教学难点网页的分类,网址与域名的区分教学资源1.教学场所:多媒体教室2.教学设备:安装有Dreamweaver cs5 软件的计算机3.教学资料:辅助课件.多媒体教学软件08年度 1月 221月 25日工作内容页脚内容 12教法讲解法、任务驱动教学法学法小组讨论法教学过程课 前准备导入新课讲授新课动手实践课 堂小结作业布置时间分配510501555教学过程过程安排教学内容教师活动学 生 活动设 计 意图课前准备1、教师自我介绍;2、点名;3、课程介绍4、课堂要求1.自我介绍2.按照花名册点名3
7、.课程介绍4.统计学情5.提出期望与要求1.班长统计座次表2.学 生自我介绍3.反 应学情4.推 荐课代表。使师生尽快互相认识,并促使学生答题了解我们的课程。08年度 1月 221月 25日工作内容页脚内容 13导入新课本次课是本学期第一次上课,简单介绍本课程:1、网页设计相关级别及其薪资待遇2、网页设计的就业方向及其公司类型以 提 问 的方 式 了 解 学 生对 网 页 设 计 的认知学 生 之间相互讨论,加 深 对 网 页设计的认识提 问 跟就业和薪资有 关 的 问题,抓住学生注意力。任务一讲授新课一、网页设计介绍1、网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电
8、子商务的基础设施和信息平台,离开网站去谈电子商务是不可能的。2、企业的网站被称为“网络商标”,也是企业无形资产的组成部分,而网站是 Internet上宣传和反映企业形象和文化的简 单 介 绍网页知识提问:网页设 计 要 点 并 将吸 收 新知 识 并 思 考生 活 中 常 见网 页 设 计 知识讲 述 基础知识,为后面学习打下基础加 强 学08年度 1月 221月 25日工作内容页脚内容 14重要窗口。二、网页设计的要点1、明确建站目标和需求。2、网站主题鲜明。3、网站版式设计。4、色彩在网站设计中的作用。5、网站设计形式与内容统一。三、网站设计级别1、新手入行2、跳槽阶段3、稳定阶段4、大师
9、阶段四、网页设计公司类型1、门户游戏类2、企业部门类学 生 分 组 进 行讨论讲 述 网 站设计级别,引导学 生 对 这 个 行业向往,并鼓励学 生 向 大 师 阶段努力简 单 介 绍学 生 将 来 从 事本行业的范围介 绍 网 页制 作 需 要 的 软分 组 讨论,并派出代表来总结思 考 自己的定位了 解 本行业的现状认 识 软件基本组成生之间交流沟通能力,加深学生对网页设计要点理解引 导 学生了解这个行业引 导 学生了解本行业从事范围提 前 引导学生认识08年度 1月 221月 25日工作内容页脚内容 153、网站建设类4、互动设计类五、网页三剑客1、Dreamweaver:可视化页面设计
10、、网站管理2、Fireworks页面图象设计工具3、Flash动画制作六、网页基础知识1、网页与网站的区别(1)网页是 WWW 系统中信息的基本单位,简单来说,就是后缀名为 htm的文件。(2)网站是指存放在网络服务器上的完整信息的集合体。件给 学 生 灌输 网 页 设 计 的基本知识做笔记,识 记 教 师 讲述的知识dreamweaver cs5 为 后 面软件学习打下基础这 些 知识都是学网页设计最基本的基础知识,学生基础 知 识 薄弱,必须了解这些才能学习后面的内容08年度 1月 221月 25日工作内容页脚内容 162、网页的组成(1)文字:最直接、通用、容易的沟通方式(2)图片:网页
11、的一大特点图文并茂(3)动画:1995 年,Sun公司开发了 Java 语言,用户可以创建能调用图片和声音的多媒体应用小程序(4)超链接:要通过一种方式把各独立的网页整和在一起,使之构成一有机整体,而这种链接页面的功能叫超链接。(5)特殊组件:图片与动画可算是最常见的特殊组件。3、主页 Homepage引导访问者浏览网站。index、main、default4、网页空间在Internet上申请的一个存08年度 1月 221月 25日工作内容页脚内容 17储空间,用以存放网页。5、网址和域名网址:IP地址域名:与 IP地址相对应,唯一性,善于识别最右边:国家(中国cn)其次:机构(商业机构com
12、)再次:子网名称最左边:服务器类别(web服务器 www)6、网页的分类静态页面与动态页面7、认识网站门户网站:sina个人网站:明星专业网站:医疗08年度 1月 221月 25日工作内容页脚内容 18职能网站:政府任务二动 手实践根据网页设计要点,以小组为单位确定一个网站主题,小组讨论需要的步骤以及素材巡回指导,给予学生帮助小 组 讨论,相互沟通加 深 学生对网页设计要点学习课后作业1、按照课堂分组课后进行讨论2、每组确定一个网站主题方向。3、每组设计一个网站调查问卷。课堂小结一、网页设计师就业方向二、网站设计流程三、常见网站教学反思本次课是网页设计第一次上课,主要讲述一些网页基础知识,学生
13、基础知识薄弱,需要加强,整体来说计算机班基础知识要好于电子商务班08年度 1月 221月 25日工作内容页脚内容 19板书一、网页设计介绍二、网页设计的要点三、网站设计级别四、网页设计公司类型五、网页三剑客六、网页基础知识课题1.2网站建设概述教学课时2课时教学目标知识目标了解做网站的准备工作,掌握站点的建立。能力目标1.能了解网站开发的基本流程。2.能掌握网站开发的基本原则。3.能学会站点的建立与管理。情感目提高学生团结合作精神,增强小组合作能力08年度 1月 221月 25日工作内容页脚内容 20标教学重点站点的建立教学难点如何规划好一个网站教学资源1.教学场所:多媒体教室2.教学设备:安
14、装有Dreamweaver cs5 软件的计算机3.教学资料:辅助课件、多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动学 生 活动设 计 意图课前准备1、搜集了解网站开发的基本流程。2、网站设计、制作过程中配 合 学 生搜 索 资 料 及 解答疑问网 上 搜索 教 师 提 出问题,了解网培养学生自主学习能力08年度 1月 221月 25日工作内容页脚内容 21的一些原则、注意事项。站设计事项导入新课(5min)网 站 设计 大 致流 程是哪些?每组派出一个代表阐述本组课前搜集的资料听 取 学 生的 观 点 并 给 予一定的知道阐 述 观点,组员之间相互讨
15、论锻 炼 学生的语言表达能力和分析能力任务一讲授新课(35min)一、网站设计流程架构内容信息网页制作网站上传08年度 1月 221月 25日工作内容页脚内容 22任务二分 组讨论(40min)二、网站开发原则1、确定主题讨论:网站是靠什么赢利的?2、规划站点结构(1)结构设计(2)目录结构设计(3)形象设计(4)主页设计(5)其他页面设计(6)企业站点设计(7)为站点设计目标对象访问率三、网页版面布局设计1、版面布局的原则(1)主次分明、中心突出1、确定网站主题的建议2、给网站取名3、提示决定网站的性质小 组 讨论,相互沟通加 深 学生对网页设计要点学习08年度 1月 221月 25日工作内
16、容页脚内容 23(2)大小搭配、相互呼应(3)图文并茂、相得益彰(4)动静适度、平衡对称2、页面布局的类型(1)“国”字型(2)框架型(3)标题正文型(4)封面型(5)综合型四、规划站点1、建立站点目录2、站点规划规划站点结构是利用不同的文件夹将不同的网页内容分门别类的保存。3、创建导航草图五、搜集素材08年度 1月 221月 25日工作内容页脚内容 241、搜集并制作素材无论是文字素材还是图片、动画素材,都应注意其来源是否注明版权所有。网站素材要为网站主题服务。2、整理素材原始素材、编辑处理好的素材3、命名规范六、创建站点1、不使用服务器技术2、本地编辑3、不连接到远程服务器七、管理站点(1
17、)编辑现有站点(2)删除已有站点课 后作根据这次课的内容、注意事项,构思一个明确的网站主题,并将站点结构08年度 1月 221月 25日工作内容页脚内容 25业(5min)的规划用文件夹表示出来课堂小结(5min)一、网站设计确定主题二、网站设计流程三、站点管理教学反思本次主要讲述站点的建立和管理,课程较简单,学生掌握较好板书一、网站设计流程二、网站开发原则三、网页版面布局设计四、规划站点五、搜集素材六、创建站点七、管理站点08年度 1月 221月 25日工作内容页脚内容 26实训课题新建一个网页实训课时2课时实训目标1、熟悉 Dreamweaver cs4 界面2、制作简单网页实训重点1、学
18、会在网页中输入文字、插入图片等2、掌握简单代码的编写实训难点代码的编写实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求1.对照实习报告的要求,完成上机任务;2.任务完成后及时要求教师考评;3.完善实习报告,填写实训总结;遵守实训纪律,不游戏,不睡觉,不高声谈论。08年度 1月 221月 25日工作内容页脚内容 27实训过程内容操作要求及步骤任务一新 建网页 11、双击打开软件新建HTML 网页网页名字为nes01 输入以下文字然后保存2、文字要求:标题宋体 二号 蓝色正文:五号 宋体 加粗任务二新 建网页 2制作如下网页素材见文件夹网页命名文字为 index 保存在文件夹中上
19、交08年度 1月 221月 25日工作内容页脚内容 28给老师操作步骤:新建 HTML 网页输入文字将标题设置为36号,蓝色,宋体插入两根红色的水平线插入时间插入商标插入背景图片保存完 善报告填写实训总结,并上交实习报告。自 主练习剩余时间,可进行自主练习,内容不限,但不可违反上机纪律实 训总结本次课是学生第一次上机,制作一个较简单的网页,学生存在对DW界面不熟,操作不熟练等缺点,需加强操作08年度 1月 221月 25日工作内容页脚内容 29课题2.1编辑和添加文本教学课时2课时教学目标知识目标1、掌握输入和编辑文本2、学会插入文本,掌握设置文本格式的方法能力目标掌握网页中三种常见列表的创建
20、,及其各自的特点情感目标提高学生自主学习和团队竞争意识教学重点插入和编辑文本教学难点创建列表教学资源1.教学场所:多媒体教室2.教学设备:安装有Dreamweaver cs5 软件的计算机3.教学资料:辅助课件.多媒体教学软件08年度 1月 221月 25日工作内容页脚内容 30教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动学 生 活动设 计 意图导入新课(5min)提问:在 DW 中输入文本和在Word 中输入文本有何区别?将 学 生 分组,并 提 出 问题,引导学生小组 之 间 讨 论 并总结讨 论 并思考以 讨 论的形式提高学生之间的交流沟通任务一插入文本(20
21、min)一、插入文本1、插入普通文本2、插入不换行空格3、插入水平线4、插 入 日期 和 特 殊字符演 示 并 强调重点认 真 听讲 并 记 下 重点文 本 插入是基础知识,为下面任务二打下基础08年度 1月 221月 25日工作内容页脚内容 31二、编辑文本1、基本样式设置2、设置段落格式3、创建列表任务二(55min)完成以下网页实例:1、引导学生讨论该网页由哪几部分组成2、引导学生小组组内分工,完成小模块小 组 讨论本 实 例即是对任务一的巩固,也为下一次课打下基础作业布置(5min)1、找一篇文章输入至页面中,然后利用所学知识,对其进行格式编排08年度 1月 221月 25日工作内容页
22、脚内容 32课堂小结(5min)一、插入文本二、编辑文本板书一、插入文本5、插入普通文本6、插入不换行空格7、插入水平线8、插入日期和特殊字符二、编辑文本1、基本样式设置2、设置段落格式3、创建列表三、实例操作教学反思本次课是 一个基础知识内容,文本是一个网页必不可少的内容,对网页设计至关重要,学生必须牢牢掌握文本的各个要点。目前来说学习兴趣较好。08年度 1月 221月 25日工作内容页脚内容 33实训课题网站素材处理实训课时2课时实训目标1、掌握创建本地站点和远程站点2、学会修改站点和多站点的管理实训重点站点的管理实训难点站点的管理实训方法上机实训实训准备教案、素材、案例、教材、计算机机房
23、实训要求1、对照实习报告的要求,完成上机任务;2、任务完成后及时要求教师考评;3、完善实习报告,填写实训总结;08年度 1月 221月 25日工作内容页脚内容 344、遵守实训纪律,不游戏,不睡觉,不高声谈论。实训过程内容操作要求及步骤任务一创 建站点1、熟悉 DW界面2、在 D盘根目录创建一个站点名称为我的足球网,本地站点文件夹为jcwww,如下图所示任务二设 置默认图像文件夹利用教师所给素材,制作简单网页我的偶像,素材见文件夹完 善报告填写实训总结,并上交实习报告。自 主练剩余时间,可进行自主练习,内容不限,但不可违反上机纪律08年度 1月 221月 25日工作内容页脚内容 35习实 训总
24、结本次上机主要是让学生掌握站点的建立及输入文本和编辑文本等,学生操作较好,大部分能完成任务。实训课题制作简单网页实训课时2课时实训目标1、掌握新建网页、编辑文字、处理图像2、新建站点3、插入水平线、空格、自动更新时间实训重点制作简单网页流程实训难点综合运用 HTML 工具实训方法上机实训08年度 1月 221月 25日工作内容页脚内容 36实训准备教案、素材、案例、教材、计算机机房实训要求4、对照实习报告的要求,完成上机任务;5、任务完成后及时要求教师考评;6、完善实习报告,填写实训总结;4、遵守实训纪律,不游戏,不睡觉,不高声谈论。实训过程内容操作要求及步骤任务一足 球偶像网页1、熟悉 DW
25、菜单栏常用界面2、完成以下简单网站,素材见素材库08年度 1月 221月 25日工作内容页脚内容 37完 善报告填写实训总结,并上交实习报告。自 主练习剩余时间,可进行自主练习,内容不限,但不可违反上机纪律实 训总结本次上机内容较多,主要考察学生综合性的练习,如图片的插入,文字的编辑及水平线的插入等,需要学生对前面的知识非常熟悉,13高 12班整体班级学习氛围较好,所有学生都能按时上交作业,值得表扬课题2.2添加和编辑图像教学课时2课时教学目标知识目标1、掌握图像裁剪、重新取样、亮度、锐化的设置2、掌握图像属性设置能力目标掌握运用软件对图像处理的能力情感目标提高学生团结合作精神,提高学生竞争意
26、识教学重图像的编辑08年度 1月 221月 25日工作内容页脚内容 38点教学难点图像的编辑教学资源1.教学场所:多媒体教室2.教学设备:安装有Dreamweaver cs5 软件的计算机3.教学资料:辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动学 生 活动设 计 意图导入新课(5min)前面介绍网页的时候有说过,在保证画质的情况下,图片的数据量越小越好。问题:如果一张图片数据量很大,我们该如何编辑?演示cluo.jpeg这张图片,分析数据量为 93k、画质为1024*768 规 格的 图 片 如 何 更改 数 据 量 和 规分 组 讨论 用
27、 什 么 方法 来 更 改 数据量和规格提 出 问题引发学生思考,引出这次课的主题08年度 1月 221月 25日工作内容页脚内容 39格?任务一编辑图片(30min)给 出 cluo.jpeg和 gg.jpeg两张图片进行对比,提出任务:如 何 从 cluo.jpeg 变 化 到gg.jpeg?具体操作步骤:打开DW 软件插入图像 cluo.jpeg,对图片属性设置如下目标值:编辑完成后与原图像进行对比,会发现数据量、规格都发生变化,但浏览网页更友好对图片宽、高、裁切、重新采样、锐化等设置进行演示观 看 教师演示,并思考 cluo.jpeg变成 cluo.jpeg的方法引 导 学生学习理论的
28、时候思考如何理论运用到实践08年度 1月 221月 25日工作内容页脚内容 40任务二制作翻转图像(50min)概念:在网页浏览中,有时当鼠标移到某个图像上或者单击时,图像会变成另外一副图像。浏览时效果:鼠标放上去时效果:1、鼓励学生小组讨论如何完成翻转图像效果;2、给学生展示翻转图像做出来的效果,然后讲解如何才 能 完成这个效果小组讨论如何完成该效果并进行尝试课堂小结(5min)一、如何编辑图像二、制作翻转图像效果08年度 1月 221月 25日工作内容页脚内容 41板书设计一、编辑图像1、重新采样2、裁剪、锐化二、翻转图像制作效果教学反思本次教学学生较感兴趣,特别是鼠标经过的图像,学生完成
29、得较好,值得鼓励课题2.3创建超级链接教学课时2课时教学目标知识目标1、掌握创建超链接的方法2、掌握相对链接和绝对链接的区别3、创建锚点链接能力目标提高学生学习创作能力情感目提高学生团结合作精神,提高学生竞争意识08年度 1月 221月 25日工作内容页脚内容 42标教学重点1、正确认识路径2、理解相对链接和绝对链接的区别教学难点添加超链接、相对路径、绝对路径教学资源1.教学场所:多媒体教室2.教学设备:安装有Dreamweaver cs5 软件的计算机3.教学资料:辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动学 生 活动设 计 意图导 入新
30、课(5min)每次浏览网页的时候点击某个文字或者图片,能自动跳转到另一个页面,提问:这样进 入 新 浪网 给 学 生 演 示超 级 链 接 的 效观 看 效果 并 讨 论 如何 才 能 实 现以提问且学生较熟悉的浏览网页的08年度 1月 221月 25日工作内容页脚内容 43的链接形式叫什么?如何实现?果并进行提问该效果方式吸引学生的注意任务一创建超级链接(20min)一、新建站点 jcww,并在站点内新建默认图像文件夹images,将网页 Index.HTML 里的“我 与 足 球”链 接 到news.HTML,目标为-blank;“足球 新 闻”链 接 到“逢 入 京使.HTML”,目标为
31、-new;“足球明 星”链 接 到“我 与 足 球网.HTML”,目标为-self。二、对比每个目标不同,网页新建窗口不同并进行总结给 学 生 演 示 如何插入链接;演示 不 同 目 标 新建窗口的区别观 看 教师演示,并思考-new、-blank、-self几 个 目 标 值窗口的区别让 学 生熟悉DW添加超级链接的界面任务二相对链接和绝对链接(20min)区别:相对链接是指链接的地址是本站点之内的对象;绝对链接是指链接的地址是远程对象,用域名或 IP作为地址一、概念:在本页进行链演 示 教 材P60实例演 示 如 何插入锚点链接思 考 并正 确 理 解 相对 链 接 和 绝对链接概念观 看
32、 教正 确 理解相对链接和 绝 对 链接,为下面的学习打下基础08年度 1月 221月 25日工作内容页脚内容 44任务三锚点链接(35min)接的叫做锚点,一般在长篇的文章或技术文档中是使用,链接到某个特殊的段落。二、打开第4章/4-3/jieshao.html 网页,演示锚点链接效果师 演 示 并 思考 锚 点 链 接的应用锚 点 链接应用比较广泛,学生需要掌握并应用课堂小结(5min)一、页面与页面之间的超链接二、相对链接和绝对链接三、锚点链接(本页之间链接)作 业布置(5min)一、网上查找哪些页面常用页面与页面链接,哪些是用锚点链接并总结二、利用教材第 4 章/4-3/jieshao
33、.html 的素材,自己动手创建锚点链接板书三、创建超级链接的方法与步骤四、相对链接和绝对链接五、创建锚点链接08年度 1月 221月 25日工作内容页脚内容 45教学反思本次课主要介绍超链接的常用方法,超链接在学生上网中随处可见,较易理解,学生之间的讨论也非常激烈,较好。实训课题图像处理和创建超链接实训课时2课时实训目标3、学会利用 DW处理图像4、掌握创建超级链接的方法5、理解相对链接和绝对链接概念实训重点1、图片处理2、超级链接实训难点超级链接的使用实训方法上机实训实训准备教案、素材、案例、教材、计算机机房08年度 1月 221月 25日工作内容页脚内容 46实训要求7、对照实习报告的要
34、求,完成上机任务;8、任务完成后及时要求教师考评;9、完善实习报告,填写实训总结;4、遵守实训纪律,不游戏,不睡觉,不高声谈论。实训过程操作要求及步骤任务一处 理图像1、将图片 6.jpeg修改为尺寸为 240*160,数据量设置为 8K左右(6-11k都可以)并进行裁剪和锐化等设置,熟悉图片处理几个设置,设置完成后以网页的形式保存,保存在文件夹中,保存名称为“xiugai.html”08年度 1月 221月 25日工作内容页脚内容 47任务二超 级链接2、将教师发送的 Index.HTML 网页进行编辑,将“我与足球”四个字链接到“我与足球网.html”,目标为-self;将“足球新闻”四个
35、字链接到“逢入京使.html”,目标为-blank;将“足球明星”四个字链接到“news.html”,目标为-new。3、修改页面属性:在页面属性对话框中,设置链接选项中的大小为16像素,链接颜色为“#6666cc”,变换图像颜色为“#ff6600”,已访问链接为“#663366”,活 动 链 接 为“#99cc00”,下 划 线 样 式为“仅在变换图 像 时 显 示下划线”。设置的对话框如下图所示:完 善报告填写实训总结,并上交实习报告。自 主练习剩余时间,可进行自主练习,内容不限,但不可违反上机纪律实 训总结本次实习内容较多,大部分学生能在规定时间内完成任务,较好。08年度 1月 221月
36、 25日工作内容页脚内容 48实训课题跳转菜单实训课时2课时实训目标6、掌握图像热点链接的使用7、掌握脚本链接8、掌握链接检查器的使用实训重点路径的正确使用实训难点链接的运用及链接检查器的使用实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求10、对照实习报告的要求,完成上机任务;11、任务完成后及时要求教师考评;08年度 1月 221月 25日工作内容页脚内容 4912、完善实习报告,填写实训总结;4、遵守实训纪律,不游戏,不睡觉,不高声谈论。实训过程操作要求及步骤任务一创 建图像热点链接在地图中创建热点链接任务二制 作跳转菜单打开 news.HTML 网页,在如下图所示的位
37、置插入图片,图片为“鼠标经过的图片”,链接到本页的“冠军杯新闻”处(提示:利用锚点链接)打开“jieshao.html”网页,在下载资源文本中将教师提供的“qq.rar”放入站点,做成的效果是点击“下载资源”就能下载“qq.rar”,同理在“联系我们”中设置邮件下载08年度 1月 221月 25日工作内容页脚内容 50完 善报告填写实训总结,并上交实习报告。自 主练习剩余时间,可进行自主练习,内容不限,但不可违反上机纪律实 训总结本次实习内容较多,大部分学生能在规定时间内完成任务,较好。课题2.4使用表格布局页面教学课时2课时教学目标知识目标1、了解表格在网页设计中的作用。2、掌握网页中表格的
38、制作方法、表格属性的设置方法以及单元格属性的设置方法,能够在单元格中正确插入文字和图片。3、能够根据网页设计内容,正确布局表格的结构,掌握表格嵌套的设计方法。能力目1、利用对比学习,培养学生知识迁移的能力。08年度 1月 221月 25日工作内容页脚内容 51标2、通过用表格结构设计网页,使学生进一步理解表格的作用、功能及网页设计方法的多样性,培养学生的发散思维能力情感目标通过自主探究,使学生掌握软件的使用规则,培养学生自主学习的能力。教学重点1、了解表格在网页设计中的重要作用。2、掌握插入、编辑表格的方法及表格的属性设置。3、掌握单元格属性的设置。教学难点表格的嵌套在网页设计中的应用教学资源
39、1.教学场所:多媒体教室2.教学设备:安装有Dreamweaver cs5 软件的计算机3.教学资料:辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安教学内容教师活动学 生 活设 计 意08年度 1月 221月 25日工作内容页脚内容 52排动图导 入新课(5min)(1)展示两个页面并进行比较:一个使用表格布局,表格边框隐藏,其页面工整,文本、图片摆放对称,具有一定的规律;另一个页面凌乱,图文混杂,摆放杂乱。问题 1:你喜欢那个页面的布局?问题 2:用什么方法可以达到第二个页面的效果?展 示 并 引导学生思考学 生 仔细 观 察 并 比较两个网页,讨论、交流,回
40、顾 Word中学 习 过 的 表格,领悟表格在 Dreamweaver 中的作用。通 过 对比学习,培养学生知识迁 移 的 能力。任务一网页框架(25min)一、仿照网页3 的样式,制作一个网页框架。在 学 生自 主 探究 的基础上,教师总结插入表格的一般方法。并插入一个 2行1列,表格宽度 800像素,边框粗细 0像素的表格。演 示 如 何插 入 表 格 并 对表格的设置分 析 网页 3,找出其中 使 用 的 表格,仿照插入图像的方法,探 索 插 入 表格的方法。插 入 表格,通过实际引 导 学生学习理论的时候思考如何理论运用到实践动 手 分析和进行创08年度 1月 221月 25日工作内容
41、页脚内容 53操 作 强 化 对表 格 属 性 的认识。意设计,培养学生的模仿以及创新能力任务二表 格合并 和 拆 分(20min)二、在任务一的基础上,探索表格基本属性:合并与拆分单元格;单元格的宽度与高度;用 实 例 来演 示 如 何 合 并和拆分单元格根 据 需要,插 入 图片,在第二行拆分为两列,左边放文字,右边放图通 过 实例,培养学生 分 析 问题、解决问题的能力。任务三表格嵌套(30min)表格的嵌套。在大表中插入一个小的表格,这是创建复杂表格样式的有效方法。要提示学生不要嵌套过多。展示几种常见的图文混排样式,让学生选择自己喜欢的一种完成网页。完 善 网页,制作完成的 同 学 把
42、 网页通过 FTP上传。让 学 生自主发挥,充分展示个性风采课堂小结(5min)一、网页框架和表格基本操作二、表格的合并和拆分三、表格嵌套08年度 1月 221月 25日工作内容页脚内容 54课堂作业(5min)完成教材第五章/Index.html的表格教学反思通过表格的嵌套及分析,对页面进行布局。需要加强学生对表格合并和拆分的运用实训课题表格布局实例分析实训课时2课时实训目标1、能运用表格为页面布局2、能掌握表格的嵌套操作3、4、能做出“超越公司简介”页面。实训重点1、掌握插入、编辑表格的方法及表格的属性设置。2、掌握单元格属性的设置。实训难点表格的嵌套在网页设计中的应用08年度 1月 22
43、1月 25日工作内容页脚内容 55实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求13、对照实习报告的要求,完成上机任务;14、任务完成后及时要求教师考评;15、完善实习报告,填写实训总结;4、遵守实训纪律,不游戏,不睡觉,不高声谈论。实训过程操作要求及步骤任务一创 建图像热点链接制作如下图所示的界面:08年度 1月 221月 25日工作内容页脚内容 56操作要求:1、top区(1)一行三列:788px=128+540+120 Logo+Banner+主页常用选项(2)第三列嵌套三行两列表格:120px=30+90 小图标+文本选项2、menu区08年度 1月 221月 25
44、日工作内容页脚内容 57(1)一行两列:788px=148+640 显示当前日期+导航条(2)第二列嵌套 1行 17列表格:奇数列单元格输入栏目文本,宽65px;偶数列单元格输入“|”,宽为 6px。3、main区(1)2行 3 列:788px宽,500px高 788=150+10+628 500=5+495(2)A、maintop区合并单元格(3)B、mainleft区嵌套 13行 1列表格:145px宽,2px间距第 1行与第 7行:高 25px 第 2-6行:高 36px,输入文本第 8-13行:高 40px,插入图片(3)C、mainmiddle区空单元格(4)D、mainright区
45、嵌套 3行 1列表格:495px高495=30+375+90第一行:输入文本第二行:嵌套 1行 2列表格(628px=304+324)第一列:输入文本第二列:嵌套 2行 1列表格08年度 1月 221月 25日工作内容页脚内容 58300px宽,右对齐375px高=220+160 第 1行:插入图片第 2行:嵌套 3行 5列表格高 160=30+65+65 宽 300=80+30+80+30+80 第三行:鼠标经过图像4、bottom区3行 1列:788px宽,45px高第一行:水平线第二行:版权信息第三行:联系方式完 善报告填写实训总结,并上交实习报告。自 主练习剩余时间,可进行自主练习,内
46、容不限,但不可违反上机纪律08年度 1月 221月 25日工作内容页脚内容 59实 训总结表格布局是最常见的一种布局方式,本次实训学生较积极,特别是13 高12班同学学习氛围特别好。课题2.5使用框架布局页面教学课时2课时教学目标知识目标1、能掌握框架的基本操作。2、能理解框架技术的实质。能力目标能用框架布局页面情感目标通过自主探究,使学生掌握软件的使用规则,培养学生自主学习的能力。教学重点框架的基本操作教学难点用框架为页面布局教学资源1.教学场所:多媒体教室08年度 1月 221月 25日工作内容页脚内容 602.教学设备:安装有Dreamweaver cs5 软件的计算机3.教学资料:辅助
47、课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动学 生 活动设 计 意图导 入新课(5min)在学习过表格布局后,我们可以做一些常规的页面布局了,但有些特殊效果我们却无法实现。如图所示的网页:今天我们来学习另一种页面布局技术框架。展 示 框 架页面给学生,引发学生思考预 习并思 考 框 架 页面布局通 过 实例来展示,引发学生思考特殊效果如何实现,培养学生积极思考问题的能力任务一基本知识一、基本概念:框架是一种网页布局技术。二、创建框架与框架集加 强 学 生对 框 架 布 局 的理 解 并 进 行 简单操作认 真 听讲 并 对 概 念进 行 消 化
48、理解学 生 只有在牢固的掌握了基本概念后才能08年度 1月 221月 25日工作内容页脚内容 61(35min)1、手动设计2、插入预定义框架三、创建嵌套框架四、选择框架和框架集1、在编辑区中选择2、在框架面板中选择五、删除框架六、保存框架与框架集文件为任务二的学习打下基础任务二实 例操作(40min)完成如下图所示的页面:要求如下:(1)topFrame:(2)高:100px(3)表 格:2x2,宽-788px,高-100px(4)高:100=75+25(5)宽:788=1将学生分 7组,并引导学生分 组 讨 论 如 何完 成 如 图 所 示的效果讨 论 如何 才 能 实 现如 图 所 示
49、的效果并总结通 过 实例,培养学生 分 析 问题、解决问题的能力。08年度 1月 221月 25日工作内容页脚内容 6228+660(6)第一行:Logo+Banner(7)第 二行:当前页位置信息+导航栏(8)导航栏:1x7表格(9)宽:660px(10)高:25px(11)字号:9pt(12)行高:14pt(13)mainFrame:(14)表格:2x2(15)宽:788Px,高:400Px(16)边框:5px,间距:5px 08年度 1月 221月 25日工作内容页脚内容 63(17)表格:3x1(18)宽:788px,高:45px(19)边框:0px,间距:0px课堂小结(5min)四
50、、框架基本概念二、创建框架与框架集三、创建嵌套框架四、选择框架和框架集五、删除框架六、保存框架与框架集文件课后作业设计一系列框架型页面,然后将之实现。要求结合超链接的相关知识。08年度 1月 221月 25日工作内容页脚内容 64(5min)教学反思本次主要讲述框架和框架集布局页面,运用实例学生加深了对框架的理解,运用起来得心应手。14高31 班学生学习氛围待加强实训课题框架布局实例分析实训课时2课时实训目标5、能掌握布局表格和布局单元格的基本操作。6、能在布局模式下对页面进行整体布局。实训重点掌握布局表格和布局单元格的基本操作。实训难点项目的实现实训方上机实训08年度 1月 221月 25日