湖南省商业技术学院学期授课进度计划（二年级第一学期）课程名称网页制作与设计适用班级 16高21、22制定教师易会芝审批签字2017-2018 学年第一学期制定教学计划学期授课进度计划表学期授课进度计划表实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求1.对照实习报告的要求，完成上机任务；2.任务完成后及时要求教师考评；3.完善实习报告，填写实训总结；遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程内容操作要求及步骤任务一新建网页11、双击打开软件——新建HTML网页——网页名字为nes01——输入以下文字然后保存2、文字要求：标题宋体二号蓝色正文：五号宋体加粗任务二新建网页2制作如下网页素材见文件夹网页命名文字为index 保存在文件夹中上交给老师操作步骤：新建HTML网页——输入文字——将标题设置为36号，蓝色，宋体——插入两根红色的水平线——插入时间——插入商标——插入背景图片——保存完善报告填写实训总结，并上交实习报告。
自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次课是学生第一次上机，制作一个较简单的网页，学生存在对DW界面不熟，操作不熟练等缺点，需加强操作课题 2.1编辑和添加文本教学课时2课时教学目标知识目标1、掌握输入和编辑文本2、学会插入文本，掌握设置文本格式的方法能力目标掌握网页中三种常见列表的创建，及其各自的特点情感目标提高学生自主学习和团队竞争意识教学重点插入和编辑文本教学难点创建列表教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动学生活动设计意图导入新课（5min）提问：在DW中输入文本和在Word中输入文本有何区别？将学生分组，并提出问题，引导学生小组之间讨论并总结讨论并思考以讨论的形式提高学生之间的交流沟通任务一插入文本(20min) 一、插入文本1、插入普通文本2、插入不换行空格3、插入水平线4、插入日期和特殊字符二、编辑文本1、基本样式设置2、设置段落格式3、创建列表演示并强调重点认真听讲并记下重点文本插入是基础知识，为下面任务二打下基础任务二(55min) 完成以下网页实例：1、引导学生讨论该网页由哪几部分组成2、引导学生小组组内分工，完成小模块小组讨论本实例即是对任务一的巩固，也为下一次课打下基础作业布置1、找一篇文章输入至页面中，然后利用所学知识，对其进行格式编排实训过程内容操作要求及步骤任务一创建站点1、熟悉DW界面2、在D盘根目录创建一个站点名称为《我的足球网》，本地站点文件夹为jcwww，如下图所示任务二设置默认图像文件夹利用教师所给素材，制作简单网页《我的偶像》，素材见文件夹完善报告填写实训总结，并上交实习报告。
自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次上机主要是让学生掌握站点的建立及输入文本和编辑文本等，学生操作较好，大部分能完成任务。
实训课题制作简单网页实训课时2课时实训目标1、掌握新建网页、编辑文字、处理图像2、新建站点3、插入水平线、空格、自动更新时间实训重点制作简单网页流程实训难点综合运用HTML工具实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求4、对照实习报告的要求，完成上机任务；5、任务完成后及时要求教师考评；6、完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程内容操作要求及步骤任务一足球偶像网页1、熟悉DW菜单栏常用界面2、完成以下简单网站，素材见素材库完善报告填写实训总结，并上交实习报告。
自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次上机内容较多，主要考察学生综合性的练习，如图片的插入，文字的编辑及水平线的插入等，需要学生对前面的知识非常熟悉，13高12班整体班级学习氛围较好，所有学生都能按时上交作业，值得表扬课题 2.2添加和编辑图像教学课时2课时教学目标知识目标1、掌握图像裁剪、重新取样、亮度、锐化的设置2、掌握图像属性设置能力目标掌握运用软件对图像处理的能力情感目标提高学生团结合作精神，提高学生竞争意识教学重点图像的编辑教学难点图像的编辑教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动学生活动设计意图导入新课(5min) 前面介绍网页的时候有说过，在保证画质的情况下，图片的数据量越小越好。
问题：如果一张图片数据量很大，我们该如何编辑？演示cluo.jpeg这张图片，分析数据量为93k、画质为1024*768规格的图片如何更改数据量和规格？分组讨论用什么方法来更改数据量和规格提出问题引发学生思考，引出这次课的主题任务一编辑图片(30min) 给出cluo.jpeg和gg.jpeg两张图片进行对比，提出任务：如何从cluo.jpeg变化到gg.jpeg？具体操作步骤：打开DW软件——插入图像cluo.jpeg，对图片属性设置如下目标值：编辑完成后与原图像进行对比，会发现数据量、规格都发生变化，但浏览网页更友好对图片宽、高、裁切、重新采样、锐化等设置进行演示观看教师演示，并思考cluo.jpeg变成cluo.jpeg的方法引导学生学习理论的时候思考如何理论运用到实践任务二制作翻转图像(50min) 概念：在网页浏览中，有时当鼠标移到某个图像上或者单击时，图像会变成另外一副图像。
浏览时效果：鼠标放上去时效果：1、鼓励学生小组讨论如何完成翻转图像效果；2、给学生展示翻转图像做出来的效果，然后讲解如何才能完成这个效果小组讨论如何完成该效果并进行尝试课堂小结(5min) 一、如何编辑图像二、制作翻转图像效果板书设计一、编辑图像1、重新采样2、裁剪、锐化二、翻转图像制作效果教学反思本次教学学生较感兴趣，特别是鼠标经过的图像，学生完成得较好，值得鼓励课题 2.3创建超级链接教学课时2课时教学目标知识目标1、掌握创建超链接的方法2、掌握相对链接和绝对链接的区别实训过程操作要求及步骤任务一处理图像1、将图片6.jpeg修改为尺寸为240*160，数据量设置为8K左右（6-11k都可以）并进行裁剪和锐化等设置，熟悉图片处理几个设置，设置完成后以网页的形式保存，保存在文件夹中，保存名称为“xiugai.html”任务二超级链接2、将教师发送的Index.HTML网页进行编辑，将“我与足球”四个字链接到“我与足球网.html”，目标为-self；将“足球新闻”四个字链接到“逢入京使.html”，目标为-blank；将“足球明星”四个字链接到“news.html”，目标为-new。
3、修改页面属性：在页面属性对话框中，设置链接选项中的大小为16像素，链接颜色为“#6666cc”，变换图像颜色为“#ff6600”，已访问链接为“#663366”，活动链接为“#99cc00”，下划线样式为“仅在变换图像时显示下划线”。
设置的对话框如下图所示：完善报告填写实训总结，并上交实习报告。
自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次实习内容较多，大部分学生能在规定时间内完成任务，较好。
实训课题跳转菜单实训课时2课时实训目标6、掌握图像热点链接的使用7、掌握脚本链接8、掌握链接检查器的使用实训重点路径的正确使用实训难点链接的运用及链接检查器的使用实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求10、对照实习报告的要求，完成上机任务；11、任务完成后及时要求教师考评；12、完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程操作要求及步骤任务一创建图像热点链接在地图中创建热点链接任务二制作跳转菜单打开news.HTML网页，在如下图所示的位置插入图片，图片为“鼠标经过的图片”，链接到本页的“冠军杯新闻”处（提示：利用锚点链接）打开“jieshao.html”网页，在下载资源文本中将教师提供的“qq.rar”放入站点，做成的效果是点击“下载资源”就能下载“qq.rar”，同理在“联系我们”中设置邮件下载完善报告填写实训总结，并上交实习报告。
自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次实习内容较多，大部分学生能在规定时间内完成任务，较好。
展名为.swf。
Flash动画被广泛应用于网页中。
操作步骤：1.光标定位2.插入flash文件3.保存、预览三、添加flash按钮Dreamweaver中内置了一些flash 按钮，用户可以很方便将他们添加到网页中。
注意：在页面中添加flash按钮和flash文本之前必须先保存网页。
操作步骤：1.光标定位2.插入flash按钮3.设置按钮属性4.保存、预览四、添加flash文本插入—媒体—Flash文本五、为网页添加音频插入—媒体—插件任务二拓展训练(40min) 要求：制作如下图所示网页，插入三行一列表格，插入Flash动画要求动画大小宽高为400*300，第二行插入图片，第三行输入文字并排版，最后得到的结果如下图所示：任务制作Flash网页要求：（利用DW cs3版本）一、插入swf动画1、新建站点和默认图像文件夹2、新建网页文件Flash.html，插入1行2列的表格，表格宽度720px，边框粗细、表格间距、表格边距都为0.选择第二个单元格设置宽度为600px，高度设置为100px。
然后在第一个单元格插入logo.jpeg，并且水平和垂直居中；在第二个单元格里插入背景图片（选择单元格——点击拆分——找到td——在td后空一格——选择background——选择bj.jpeg图片插入），并将图片设置为宽高600px，100px。
保存3、在第二个单元格插入005的Flash，并将Flash设置为宽高600px，100px规格，并设置Flash为透明二、插入Flash按钮：1、利用DW cs3版本插入导航栏：插入一行一列的表格，宽度为720px，边框粗细、表格间距、表格边距都为0，居中对齐。
然后点击插入Flash按钮，选择下图所示的按钮并输入文字，如图所示：2、然后在导航栏的下一行插入一行2列的表格，宽度为720px，边框粗细、表格间距、表格边距都为0，居中对齐。
左边单元格设置为宽200px，然后再嵌套一个表格，3行1列宽度为100%，边框粗细、表格间距、表格边距都为0，居中对齐。
右边单元格插入一行一列宽度为98%的单元格居中对齐，边框为1，颜色为#FF00FF，然后在此表格中插入Flash 文本，字体为宋体，大小30px，输入文本：我的个性空间，颜色为#FF0000，滚动颜色设置为：#00FF00，另存为wen.swf，如下图所示：4、插入Flashpaper：首先在电脑上安装Flashpaper软件，然后将“Flash.doc”Word文件转换为Flash.swf文件，将文件插入到网页中，设置Flashpaper宽高分别为480和400px三、插入播放器1、在左边的三个单元格范围中，将光标放入第一个单元格，点击插入媒体中的图像查看器，将Flash命名为abc，并将播放器设置为宽高180,135教学难点层的高级应用教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweaver cs5软件的计算机3.教学资料：辅助课件、多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动学生活动设计意图导入新课（5min）层是一种HTML页面元素，可被放在页面的任意位置，在网页排版定位方面具有独特优势。