2023年《网页制作》精品讲义.pdf

《2023年《网页制作》精品讲义.pdf》由会员分享，可在线阅读，更多相关《2023年《网页制作》精品讲义.pdf（92页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页制作教案 湖 南 省 商 业 技 术 学 院 学 期 授 课 进 度 计 划(二 年级 第 一 学期)课程名称 网页制作与设计 适用班级 16 高 21、22 制定教师 易会芝 审 批 签 字 教研室主任 年 月 日 教务科长 年 月 日 教务院长 年 月 日 2017-2018 学年第 一 学期制定 课 时 分 配 授 课 周 数 周课时 授 课 总课时 其 中 讲 课 实 验 复习考试 机 动 23 期 末 完 成 情 况 计 划 课 时 完 成 课 时 超 出 或 缺 少 课 时 超 出 缺 少 弥 补 教 学 截 至 章 节 内 容 网页制作教案 备注:用蓝黑或碳素墨水钢笔填写 教

2、 学 计 划 学情分析 本门课程网页设计与制作的教学班级为 14 级计算机班,计算机班对网络知识有一定的了解,基础知识较好,同时根据实际情况,特拟定本计划。大 纲 要 求 通过本学期网页设计与制作的学习,主要要求同学们掌握网页制作的一些基本功能与操作,为以后的一些学习与工作打下较好的基础。通过学习要求同学达到以下要求:1、了解 DreamweaverCS6 的详细功能及操作方法。2、熟练掌握网页制作技巧。3、掌握网页规范以及网页优化与网站推广的知识。4、明确网站建设的流程与站点建设成后需要做的优化推广工作。教 学 重 点 1、超级链接 2、表格表单应用 3、框架使用 4、CSS样式 教 学 难

3、 点 1、超级链接 2、用表格与框架布局页面 3、创建数据库 教 学 方 法 讲授法、演示法、项目教学法、合作学习、对话、任务驱动法、头脑风暴、小组讨论法等教学方法。学 期 授 课 进 度 计 划 表 周次 授 课 内 容 课时 备 注 网页制作教案 3 1、1 网站基础知识 2 1、2 周新生军训 1、2 网站建设概述 2 实训 新建一个网页 2 上机 4 2、1 添加与编辑文本 2 实训 网站素材处理 2 上机 实训 制作简单网页 2 上机 5 6 7 国庆放假 6 机动补周一课 8 2、2 添加与编辑图像 6 2、3 创建超级链接 2 实训 图像处理与创建超级链接 2 上机 9 实训 跳

4、转菜单 2 上机 2、4 使用表格布局页面 2 实训 表格布局实例分析 2 上机 10 2、5 使用框架布局页面 2 运动会 充周三到周五 网页制作教案 运动会 11 实训 框架布局实例分析 2 上机 3、3 添加动画 2 添加音频与视频 2 12 实训 DIV与表格的转换 2 上机 4、3 晃动的图片 2 实训 交换图像 2 上机 13 实训 拼图游戏 2 上机 4、4 修改属性特效及动态菜单制作 2 实训 效果行为应用 2 上机 14 实训 图片展播实例 2 上机 5、1 认识与编辑 CSS 2 实训 美化页面 2 上机 15 实训 应用 CSS到网页中 2 上机 5、2 类型、背景与区块

5、样式 2 实训 方框、边框与导航栏 2 上机 16 实训 超链接样式及设置技巧 2 上机 学 期 授 课 进 度 计 划 表 6、1DIV布局页面 2 6、2 认识 Spry 2 网页制作教案 课题 1、1 网页制作基础知识 教学课时 2 课时 教学目标 知识目标 能了解网页制作软件的特点 能力目标 能掌握网页制作的基本概念 17 实训 调整样式 2 上机 6、3 选择服务器与使用虚拟机 2 6、4 申请域名 2 18 实训 网站发布 2 上机 7、1 个人主页制作 2 7、2 策划构思及设计流程 2 19 实训 页面布局 2 上机 7、3 制作页面头部 2 7、4 制作中间表格内容 2 20

6、 元旦放假 2 机动 2 充周一课 2 21 2 2 2 22 复习考试 6 教研组意见 网页制作教案 情感目标 提高学生团结合作精神,提高学生竞争意识 教学重点 网页的组成 教学难点 网页的分类,网址与域名的区分 教学资源 1、教学场所:多媒体教室 2、教学设备:安装有 Dreamweaver cs5软件的计算机 3、教学资料:辅助课件、多媒体教学软件 教法 讲解法、任务驱动教学法 学法 小组讨论法 教学过程 课前准备 导 入 新课 讲 授 新课 动 手 实践 课堂小结 作业布置 时间分配 5 10 50 15 5 5 教学过程 过程安排 教学内容 教师活动 学生活动 设计意图 课前准备 1

7、、教师自我介绍;2、点名;3、课程介绍 4、课堂要求 1、自我介绍 2、按照花名册点名 3、课程介绍 4、统计学情 5、提出期望与要求 1、班长统计座次表 2、学生自我介绍 3、反应学情 4、推荐课代表。使师生尽快互相认识,并促使学生答题了解我们的课程。导入新课 本次课就是本学期第一次上课,简单介绍本课程:1、网页设计相关级别及其薪资待遇 2、网页设计的就业方向及其公司类型 以提问的方式了解学生对网页设计的认知 学生之间相互讨论,加深对网页设计的认识 提问跟就业与薪资有关的问题,抓住学生注意力。任务一 讲授新课 一、网页设计介绍 1、网站就是企业向用户与网民提供信息(包括产品与服务)的一种方式

8、,就是企业开展电子商务的基础设施与信息平台,离开网站去谈电子商务就是不可能的。2、企业的网站被称为“网络商简单介绍网页知识 提问:网页设计要点并将学生分组进行讨论 讲述网站设计级别,引导学生对这个行业向往,并鼓励学生向大师阶段努力 吸收新知识并思考生活中常见网页设计知识 分组讨论,并派出代表来总结 思考自己的定位 了解本行业的讲述基础知识,为后面学习打下基础 加强学生之间交流沟通能力,加深学生对网页设计要点理解 引导学生了解这个行业 网页制作教案 标”,也就是企业无形资产的组成部分,而网站就是Internet上宣传与反映企业形象与文化的重要窗口。二、网页设计的要点 1、明确建站目标与需求。2、

9、网站主题鲜明。3、网站版式设计。4、色彩在网站设计中的作用。5、网站设计形式与内容统一。三、网站设计级别 1、新手入行 2、跳槽阶段 3、稳定阶段 4、大师阶段 四、网页设计公司类型 1、门户游戏类 2、企业部门类 3、网站建设类 4、互动设计类 五、网页三剑客 1、Dreamweaver:可视化页面设计、网站管理 2、Fireworks 页面图象设计工具 3、Flash 动画制作 六、网页基础知识 1、网页与网站的区别 简单介绍学生将来从事本行业的范围 介绍网页制作需要的软件 给学生灌输网页设计的基本知识 现状 认识软件基本组成 做笔记,识记教师讲述的知识 引导学生了解本行业从事范围 提前引

10、导学生认识dreamweaver cs5 为 后 面软件学习打下基础 这些知识都就是学网页设计最基本的基础知识,学生基础知识薄弱,必须了解这些才能学习后面的内容 网页制作教案(1)网页就是WWW系统中信息的基本单位,简单来说,就就是后缀名为htm的文件。(2)网站就是指存放在网络服务器上的完整信息的集合体。2、网页的组成(1)文字:最直接、通用、容易的沟通方式(2)图片:网页的一大特点图文并茂(3)动画:1995年,Sun公司开发了Java语言,用户可以创建能调用图片与声音的多媒体应用小程序(4)超链接:要通过一种方式把各独立的网页整与在一起,使之构成一有机整体,而这种链接页面的功能叫超链接。

11、(5)特殊组件:图片与动画可算就是最常见的特殊组件。3、主页Homepage 引导访问者浏览网站。index、main、default 4、网页空间 在Internet上申请的一个存储空间,用以存放网页。5、网址与域名 网址:IP地址 域名:与IP地址相对应,唯一性,善于识别 网页制作教案 最右边:国家(中国cn)其次:机构(商业机构com)再次:子网名称 最左边:服务器类别(web服务器www)6、网页的分类 静态页面与动态页面 7、认识网站 门户网站:sina 个人网站:明星 专业网站:医疗 职能网站:政府 任务二 动手实践 根据网页设计要点,以小组为单位确定一个网站主题,小组讨论需要的步

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

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

14、教师提出问题,了解 网站设计事项 培养学生自主学习能力 导入新课(5min)网站设计大致流程就是哪些？每组派出一个代表阐述本组课前搜集的资料 听取学生的观点并给予一定的知道 阐述观点,组员之间相互讨论 锻炼学生的语言表达能力与分析能力 任务一 讲授新课(35min)一、网站设计流程 架构内容信息 搜集整理资料 规划网站结构 网页制作 整合网站 效果测试 网站上传 网站推广 更新维护 网页制作教案 任务二 分组讨论(40min)二、网站开发原则 1、确定主题 讨论:网站就是靠什么赢利的？2、规划站点结构(1)结构设计(2)目录结构设计(3)形象设计(4)主页设计(5)其她页面设计(6)企业站点设

15、计(7)为站点设计目标对象 访问率 三、网页版面布局设计 1、版面布局的原则(1)主次分明、中心突出(2)大小搭配、相互呼应(3)图文并茂、相得益彰(4)动静适度、平衡对称 2、页面布局的类型(1)“国”字型(2)框架型(3)标题正文型(4)封面型(5)综合型 四、规划站点 1、建立站点目录 2、站点规划 规划站点结构就是利用不同的文件夹将不同的网页内容分1、确定网站主题的建议 2、给网站取名 3、提示决定网站的性质 小组讨论,相互沟通 加深学生对网页设计要点学习 网页制作教案 门别类的保存。3、创建导航草图 五、搜集素材 1、搜集并制作素材 无论就是文字素材还就是图片、动画素材,都应注意其来

16、源就是否注明版权所有。网站素材要为网站主题服务。2、整理素材 原始素材、编辑处理好的素材 3、命名规范 六、创建站点 1、不使用服务器技术 2、本地编辑 3、不连接到远程服务器 七、管理站点(1)编辑现有站点(2)删除已有站点 课后作业(5min)根据这次课的内容、注意事项,构思一个明确的网站主题,并将站点结构的规划用文件夹表示出来 课堂小结(5min)一、网站设计确定主题 二、网站设计流程 三、站点管理 教学反思 本次主要讲述站点的建立与管理,课程较简单,学生掌握较好 板书 一、网站设计流程 二、网站开发原则 三、网页版面布局设计 网页制作教案 四、规划站点 五、搜集素材 六、创建站点 七、

17、管理站点 实训课题 新建一个网页 实训课时 2 课时 实训目标 1、熟悉 Dreamweaver cs4 界面 2、制作简单网页 实训重点 1、学会在网页中输入文字、插入图片等 2、掌握简单代码的编写 实训难点 代码的编写 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 1.对照实习报告的要求,完成上机任务;2.任务完成后及时要求教师考评;3.完善实习报告,填写实训总结;遵守实训纪律,不游戏,不睡觉,不高声谈论。实训过程 内容 操作要求及步骤 任务一 新建网页 1 1、双击打开软件新建 HTML 网页网页名字为 nes01输入以下文字然后保存 2、文字要求:标题 宋

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

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

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

21、辑文本 网页制作教案 板书 一、插入文本 5、插入普通文本 6、插入不换行空格 7、插入水平线 8、插入日期与特殊字符 二、编辑文本 1、基本样式设置 2、设置段落格式 3、创建列表 三、实例操作 教学反思 本次课就是 一个基础知识内容,文本就是一个网页必不可少的内容,对网页设计至关重要,学生必须牢牢掌握文本的各个要点。目前来说学习兴趣较好。实训课题 网站素材处理 实训课时 2 课时 实训目标 1、掌握创建本地站点与远程站点 2、学会修改站点与多站点的管理 实训重点 站点的管理 实训难点 站点的管理 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 1、对照实习报告的

22、要求,完成上机任务;2、任务完成后及时要求教师考评;3、完善实习报告,填写实训总结;4、遵守实训纪律,不游戏,不睡觉,不高声谈论。实训过程 内容 操作要求及步骤 任务一 创建站点 1、熟悉 DW 界面 2、在 D 盘根目录创建一个站点名称为我的足球网,本地站点文件夹为 jcwww,如下图所示 网页制作教案 任务二 设置默认图像文件夹 利用教师所给素材,制作简单网页我的偶像,素材见文件夹 完善报告 填写实训总结,并上交实习报告。自主练习 剩余时间,可进行自主练习,内容不限,但不可违反上机纪律 实训总结 本次上机主要就是让学生掌握站点的建立及输入文本与编辑文本等,学生操作较好,大部分能完成任务。实

23、训课题 制作简单网页 实训课时 2 课时 实训目标 1、掌握新建网页、编辑文字、处理图像 2、新建站点 3、插入水平线、空格、自动更新时间 实训重点 制作简单网页流程 实训难点 综合运用 HTML 工具 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 4、对照实习报告的要求,完成上机任务;5、任务完成后及时要求教师考评;6、完善实习报告,填写实训总结;4、遵守实训纪律,不游戏,不睡觉,不高声谈论。实训过程 内容 操作要求及步骤 任务一 足球偶像网页 1、熟悉DW 菜单栏常用界面 2、完成以下简单网站,素材见素材库 网页制作教案 完善报告 填写实训总结,并上交实习报告

24、。自主练习 剩余时间,可进行自主练习,内容不限,但不可违反上机纪律 实训总结 本次上机内容较多,主要考察学生综合性的练习,如图片的插入,文字的编辑及水平线的插入等,需要学生对前面的知识非常熟悉,13 高 12 班整体班级学习氛围较好,所有学生都能按时上交作业,值得表扬 课题 2、2 添加与编辑图像 教学课时 2 课时 教学目标 知识目标 1、掌握图像裁剪、重新取样、亮度、锐化的设置 2、掌握图像属性设置 能力目标 掌握运用软件对图像处理的能力 情感目标 提高学生团结合作精神,提高学生竞争意识 教学重点 图像的编辑 教学难点 图像的编辑 教学资源 1、教学场所:多媒体教室 2、教学设备:安装有

25、Dreamweaver cs5软件的计算机 3、教学资料:辅助课件、多媒体教学软件 教法 讲解法、任务驱动教学法 学法 小组讨论法 教学过程 网页制作教案 过程安排 教学内容 教师活动 学生活动 设计意图 导入新课(5min)前面介绍网页的时候有说过,在保证画质的情况下,图片的数据量越小越好。问题:如果一张图片数据量很大,我们该如何编辑？演示cluo、jpeg这张图片,分析数据量为 93k、画质为1024*768 规 格的图片如何更改数据量与规格？分组讨论用什么方法来更改数据量与规格 提出问题引发学生思考,引出这次课的主题 任务一 编辑图片(30min)给出cluo、jpeg 与gg、jpeg

26、 两张图片进行对比,提出任务:如何从cluo、jpeg 变化到gg、jpeg？具体操作步骤:打开DW 软件插入图像cluo、jpeg,对图片属性设置如下目标值:编辑完成后与原图像进行对比,会发现数据量、规格都发生变化,但浏览网页更友好 对图片宽、高、裁切、重新采样、锐化等设置进行演示 观 瞧 教 师 演示,并 思 考cluo、jpeg 变成 cluo、jpeg的方法 引导学生学习理论的时候思考如何理论运用到实践 网页制作教案 任务二 制作翻转图像(50min)概念:在网页浏览中,有时当鼠标移到某个图像上或者单击时,图像会变成另外一副图像。浏览时效果:鼠标放上去时效果:1、鼓励学生小组讨论如何完

27、成翻转图像效果;2、给学生展示翻转图像做出 来 的 效果,然 后 讲解如何 才能完成这个效果 小组讨论如何完成该效果并进行尝试 课堂小结(5min)一、如何编辑图像 二、制作翻转图像效果 板书设计 一、编辑图像 1、重新采样 2、裁剪、锐化 二、翻转图像制作效果 教学反思 本次教学学生较感兴趣,特别就是鼠标经过的图像,学生完成得较好,值得鼓励 课题 2、3 创建超级链接 教学课时 2 课时 教学目标 知识目标 1、掌握创建超链接的方法 2、掌握相对链接与绝对链接的区别 3、创建锚点链接 能力目标 提高学生学习创作能力 情感目标 提高学生团结合作精神,提高学生竞争意识 网页制作教案 教学重点 1

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

29、 创建超级链接(20min)一、新建站点 jcww,并在站点内新建默认图像文件夹 images,将网页 Index、HTML 里的“我与足球”链接到 news、HTML,目标为-blank;“足球新闻”链接到“逢入京使、HTML”,目标为-new;“足球明星”链接到“我与足球网、HTML”,目标为-self。二、对比每个目标不同,网页新建窗口不同并进行总结 给学生演示如何插入链接;演示不同目标新建窗口的区别 观 瞧 教 师 演示,并 思 考-new、-blank、-self几个目标值窗口的区别 让学生熟悉DW添加超级链接的界面 任务二 相对链接与绝对链接(20min)任务三 锚点链接(35mi

30、n)区别:相对链接就是指链接的地址就是本站点之内的对象;绝对链接就是指链接的地址就是远程对象,用域名或IP作为地址 一、概念:在本页进行链接的叫做锚点,一般在长篇的文章或技术文档中就是使用,链接到某个特殊的段落。二、打开第4章/4-3/jieshao、html 网页,演示锚点链接效果 演示教材 P60 实例 演示如何插入锚点链接 思考并正确理解相对链接与绝对链接概念 观瞧教师演示并思考锚点链接的应用 正确理解相对链接与绝对链接,为下面的学习打下基础 锚点链接应用比较广泛,学生需要掌握并应用 课堂小结(5min)一、页面与页面之间的超链接 二、相对链接与绝对链接 三、锚点链接(本页之间链接)网页

31、制作教案 作业布置(5min)一、网上查找哪些页面常用页面与页面链接,哪些就是用锚点链接并总结 二、利用教材第 4 章/4-3/jieshao、html 的素材,自己动手创建锚点链接 板书 三、创建超级链接的方法与步骤 四、相对链接与绝对链接 五、创建锚点链接 教学反思 本次课主要介绍超链接的常用方法,超链接在学生上网中随处可见,较易理解,学生之间的讨论也非常激烈,较好。实训课题 图像处理与创建超链接 实训课时 2 课时 实训目标 3、学会利用 DW 处理图像 4、掌握创建超级链接的方法 5、理解相对链接与绝对链接概念 实训重点 1、图片处理 2、超级链接 实训难点 超级链接的使用 实训方法

32、上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 7、对照实习报告的要求,完成上机任务;8、任务完成后及时要求教师考评;9、完善实习报告,填写实训总结;4、遵守实训纪律,不游戏,不睡觉,不高声谈论。实训过程 操作要求及步骤 任务一 处理图像 1、将图片 6、jpeg 修改为尺寸为 240*160,数据量设置为 8K 左右(6-11k都可以)并进行裁剪与锐化等设置,熟悉图片处理几个设置,设置完成后以网页的形式保存,保存在文件夹中,保存名称为“xiugai、html”网页制作教案 任务二 超级链接 2、将教师发送的 Index、HTML 网页进行编辑,将“我与足球”四个字链接到“我

33、与足球网、html”,目标为-self;将“足球新闻”四个字链接到“逢入京使、html”,目标为-blank;将“足球明星”四个字链接到“news、html”,目标为-new。3、修改页面属性:在页面属性对话框中,设置链接选项中的大小为 16 像素,链接颜色为“#6666cc”,变换图像颜色为“#ff6600”,已访问链接为“#663366”,活动链接为“#99cc00”,下划线样式为“仅在变换图像时显示下划线”。设置的对话框如下图所示:完善报告 填写实训总结,并上交实习报告。自主练习 剩余时间,可进行自主练习,内容不限,但不可违反上机纪律 实训总结 本次实习内容较多,大部分学生能在规定时间内

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

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

36、的设置方法,能够在单元格中正确插入文字与图片。3、能够根据网页设计内容,正确布局表格的结构,掌握表格嵌套的设计方法。能力目标 1、利用对比学习,培养学生知识迁移的能力。2、通过用表格结构设计网页,使学生进一步理解表格的作用、功能及网页设计方法的多样性,培养学生的发散思维能力 网页制作教案 情感目标 通过自主探究,使学生掌握软件的使用规则,培养学生自主学习的能力。教学重点 1、了解表格在网页设计中的重要作用。2、掌握插入、编辑表格的方法及表格的属性设置。3、掌握单元格属性的设置。教学难点 表格的嵌套在网页设计中的应用 教学资源 1、教学场所:多媒体教室 2、教学设备:安装有 Dreamweave

37、r cs5软件的计算机 3、教学资料:辅助课件、多媒体教学软件 教法 讲解法、任务驱动教学法 学法 小组讨论法 教学过程 过程安排 教学内容 教师活动 学生活动 设计意图 导 入 新课(5min)(1)展示两个页面并进行比较:一个使用表格布局,表格边框隐藏,其页面工整,文本、图片摆放对称,具有一定的规律;另一个页面凌乱,图文混杂,摆放杂乱。问题 1:您喜欢那个页面的布局？问题 2:用什么方法可以达到第二个页面的效果？展示并引导学生思考 学生仔细观察并比较两个 网 页,讨论、交流,回顾Word中学习过的表格,领悟表格在Dreamweaver 中的作用。通 过 对 比学习,培养学 生 知 识迁 移

38、 的 能力。任务一 网页框架(25min)一、仿照网页 3 的样式,制作一个网页框架。在学生自主探究的基础上,教师总结插入表格的一般方法。并插入一个2行1列,表格宽度800像素,边框粗细0像素的表格。演示如何插入表格并对表格的设置 分析网页 3,找出其中使用的表格,仿照插入图像的方法,探索插入表格的方法。插入表格,通过实际操作强化对表格属 性 的 认识。引导学生学习理论的时候思考如何理论运用到实践 动 手 分析 与 进 行创意设计,培 养 学 生的 模 仿 以及 创 新 能力 网页制作教案 任务二 表格合并与拆分(20min)二、在任务一的基础上,探索表格基本属性:合并与拆分单元格;单元格的宽

39、度与高度;用实例来演示如何合并与拆分单元格 根据需要,插入图片,在第二行拆分为两列,左边放文字,右边放图 通过实例,培 养 学 生分析问题、解 决 问 题的能力。任务三 表格嵌套(30min)表格的嵌套。在大表中插入一个小的表格,这就是创建复杂表格样式的有效方法。要提示学生不要嵌套过多。展示几种常见的图文混排样式,让学生选择自己喜欢的一种完成网页。完善网页,制作完成的同学把网页通过 FTP上传。让 学 生 自主发挥,充分 展 示 个性风采 课堂小结(5min)一、网页框架与表格基本操作 二、表格的合并与拆分 三、表格嵌套 课堂作业(5min)完成教材第五章/Index、html 的表格 教学反

40、思 通过表格的嵌套及分析,对页面进行布局。需要加强学生对表格合并与拆分的运用 实训课题 表格布局实例分析 实训课时 2 课时 实训目标 1、能运用表格为页面布局 2、能掌握表格的嵌套操作 3、4、能做出“超越公司简介”页面。实训重点 1、掌握插入、编辑表格的方法及表格的属性设置。2、掌握单元格属性的设置。实训难点 表格的嵌套在网页设计中的应用 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 13、对照实习报告的要求,完成上机任务;14、任务完成后及时要求教师考评;15、完善实习报告,填写实训总结;4、遵守实训纪律,不游戏,不睡觉,不高声谈论。实训过程 操作要求及步骤

41、 网页制作教案 任务一 创建图像热点链接 制作如下图所示的界面:操作要求: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、main 区(1)2 行 3 列:788px 宽,500px 高 788=150+10+628 500=5+495(2)A、maintop 区 合并单

42、元格(3)B、mainleft 区 嵌套 13 行 1 列表格:145px 宽,2px 间距 第 1 行与第 7 行:高 25px 第 2-6行:高 36px,输入文本 第 8-13行:高 40px,插入图片(3)C、mainmiddle 区 空单元格(4)D、mainright 区 嵌套 3 行 1 列表格:495px 高 495=30+375+90 第一行:输入文本 第二行:嵌套 1 行 2 列表格(628px=304+324)第一列:输入文本 网页制作教案 第二列:嵌套 2 行 1 列表格 300px 宽,右对齐 375px 高=220+160 第 1 行:插入图片 第 2 行:嵌套 3

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

44、 情感目标 通过自主探究,使学生掌握软件的使用规则,培养学生自主学习的能力。教学重点 框架的基本操作 教学难点 用框架为页面布局 教学资源 1、教学场所:多媒体教室 2、教学设备:安装有 Dreamweaver cs5软件的计算机 3、教学资料:辅助课件、多媒体教学软件 教法 讲解法、任务驱动教学法 学法 小组讨论法 教学过程 过程安排 教学内容 教师活动 学生活动 设计意图 网页制作教案 导 入 新课(5min)在学习过表格布局后,我们可以做一些常规的页面布局了,但有些特殊效果我们却无法实现。如图所示的网页:今天我们来学习另一种页面布局技术框架。展示框架页面给学生,引发学生思考 预 习 并

45、思考框架页面布局 通 过 实 例来展示,引发 学 生 思考 特 殊 效果 如 何 实现,培养学生 积 极 思考 问 题 的能力 任务一 基本知识(35min)一、基本概念:框架就是一种网页布局技术。二、创建框架与框架集 1、手动设计 2、插入预定义框架 三、创建嵌套框架 四、选择框架与框架集 1、在编辑区中选择 2、在框架面板中选择 五、删除框架 六、保存框架与框架集文件 加强学生对框架布局的理解并进行简单操作 认真听讲并对概念进行消化理解 学生只有在牢固的掌握了基本概念后才能为任务二的学习打下基础 任务二 实例操作(40min)完成如下图所示的页面:要求如下:（1）topFrame:（2）高

46、:100px（3）表格:2x2,宽-788px,高-100px（4）高:100=75+25（5）宽:788=128+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（17）表格:3x1（18）宽:788px,高:45px（19）边框:0px,间距:0px 将学生分 7 组,并引导学生分组讨论如何完成如图所示的效果 讨论如何才能实现如图所示的

47、效果并总结 通过实例,培 养 学 生分析问题、解 决 问 题的能力。网页制作教案 课堂小结(5min)四、框架基本概念 二、创建框架与框架集 三、创建嵌套框架 四、选择框架与框架集 五、删除框架 六、保存框架与框架集文件 课后作业(5min)设计一系列框架型页面,然后将之实现。要求结合超链接的相关知识。教学反思 本次主要讲述框架与框架集布局页面,运用实例学生加深了对框架的理解,运用起来得心应手。14高31班学生学习氛围待加强 实训课题 框架布局实例分析 实训课时 2 课时 实训目标 5、能掌握布局表格与布局单元格的基本操作。6、能在布局模式下对页面进行整体布局。实训重点 掌握布局表格与布局单元

48、格的基本操作。实训难点 项目的实现 实训方法 上机实训 实训准备 教案、素材、案例、教材、计算机机房 实训要求 16、对照实习报告的要求,完成上机任务;17、任务完成后及时要求教师考评;18、完善实习报告,填写实训总结;4、遵守实训纪律,不游戏,不睡觉,不高声谈论。实训过程 操作要求及步骤 网页制作教案 任务一 利用框架排版 步骤1 选择文件菜单栏中的新建命令,创建一个新的页面,并将其命名为“个人主页”。步骤 2 选择插入工具栏中布局任务栏中的框架命令,单击按钮,选择下拉菜单的“顶部与嵌套的左侧框架”命令。步骤 3 弹出框架标签辅助功能属性对话框,将网页中框架的各个部分进行命名。步骤 4 选择

49、窗口菜单栏中框架命令。步骤 5 右侧的面板中就加入了框架面板,选中“topFrame”框架进行编辑。步骤 6 页面下方出现了“topFrame”框架的属性面板。对“top Frame”框架进行编辑。步骤 7 选中“mainFrame”框架进行编辑,页面下方出现了“mainFrame”框架的属性 面板,对“mainFrame”框架进行编辑。步骤 8 选中“leftFrame”框架进行编辑,页面下方出现了“leftFrame”框架的属性面 板,对“leftFrame”框架进行编辑。步骤 9 选择文件菜单栏中的保存全部命令,对文件进行保存。步骤 10 弹出保存整体文件的对话框,为文件命名为“inde

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