网页设计制作教学设计.doc

课程教学设计2013 2014 学年第 二 学期教学部门 信息技术系 课程名称 网页设计 专业、班级 13网络 主讲教师 丁宁 山东省潍坊商业学校网页设计课程整体教学设计一、 管理信息课程名称：网页设计 制定时间：2014年3月课程代码： 所属部门：信息技术系制 定 人：丁宁 批准人：二、 基本信息学分： 4 课程类型：专业课学时： 80 先修课： 授课对象：13网络 后续课： 三、 课程设计1 课程目标设计 (1) 能力目标总体目标：学生学习完本课程后，能掌握不同应用领域中常用的平面设计手法，并将这些手法揉合到网页设计中；熟练应用Photoshop制作页面的平面效果图，并能够运用多dreamweaver制作简单的静态网页。具体目标： 掌握网页当中卡通元素的设计和制作。 熟练应用Photoshop制作页面的平面效果图的能力。(2) 知识目标了解网站制作流程,布局方法以及不同方法的差异、优缺点，学会书写网站设计说明书了解各类网站的各自特点及设计原则分析并用Photoshop临摹制作各类优秀网站效果图运用dreamweaver将制作好的平面效果图制作成静态网页 (3)素质目标 养成良好的开关机的习惯。 养成小组合作学习的习惯。 在表述与回答问题的过程中提高语言表达能力。2 课程内容设计模块名称学时Dreamweaver的基本应用方法和简单命令52网页制作的基本流程（综合实训）20 学生学习完本课程后，能掌握不同应用领域中常用的平面设计手法，并将这些手法揉合到网页设计中；熟练应用Photoshop制作页面的平面效果图，从临摹到带有一定自己的创意，为毕业设计做好准备。3 能力训练项目设计编号能力训练项目名称拟实现的能力目标相关支撑知识训练方式、手段及步骤结果（可展示）单元一创建站点与浏览网页创建和管理本地站点工作界面的认识简单的基本操作以及参数的设置管理网站中的文件和文件夹打开网页浏览网页保存网页文档和关闭网页文档等基本操作浏览窗口的基本组成和网页基本元素组成使用“资源”面板管理网站中的资源设置页面头部内容讲解操作方法及注意事项；上机加以实践练习通过现场操作、上传作业方式评价学生掌握情况单元二制作基本页面基本页面的制作方法与制作流程初步认识和使用html代码网页文档和页面属性网页中文字，图片和特殊符号等内容的插入表格的基本用法讲解操作方法及注意事项；上机加以实践练习通过现场操作、上传作业方式评价学生掌握情况单元三创建超链接与导航栏了解导航栏的用途，掌握导航栏的制作方法创建导航链接学会制作导航特殊效果导航栏的创建以及内部链接和外部链接的添加命名锚记和热点区域的创建电子邮件和空连接的创建讲解操作方法及注意事项；上机加以实践练习通过现场操作、上传作业方式评价学生掌握情况单元四制作表单网页掌握注册页面的制作方法美化注册登陆页面了解注册登录页面的具体用途表单，表单域的插入与属性设置在表单中插入按钮，文本域，文本区域美化页面讲解操作方法及注意事项；上机加以实践练习通过现场操作、上传作业方式评价学生掌握情况单元五布局与美化网页掌握网页样式美化页面的方法初步认识css+div利用表格布局页面利用css+div布局页面创建样式，美化页面利用标签对网页布局讲解操作方法及注意事项；上机加以实践练习通过现场操作、上传作业方式评价学生掌握情况单元六创建与应用模版和库掌握网页模板的制作方法能够创建包含库项目的网页制作模板网页页面，并存为模板模板页面的编辑方法利用模板生成新网页，并对新网页进行编辑讲解操作方法及注意事项；上机加以实践练习通过现场操作、上传作业方式评价学生掌握情况单元七实现网页特效掌握制作网页特效的具体方法能够将网页特效运用到适合的页面当中网页中日期和问候语的显示文字滚动效果字体大小的改变自动切换焦点图片讲解操作方法及注意事项；上机加以实践练习通过现场操作、上传作业方式评价学生掌握情况单元八规划网站与设计网页掌握一个较完整网站的制作流程掌握网站的测试，发布和推广熟悉网站的开发流程网页模板等基础知识的应用页面等级的划分网站测试讲解操作方法及注意事项；上机加以实践练习通过现场操作、上传作业方式评价学生掌握情况4 进度表设计序号或周次学时教学目标和主要内容单元标题能力目标能力训练项目编 号知识目标其他内容12新学期课程导入24基本页面的制作掌握网页制作的基本操作方法学会简单的网页布局形式单元一新页面的创建以及页面属性的设置文本输入，空格，拆分单元格等基本操作方法网页中图像的编辑方法与技巧通过现场操作、上传作业方式评价学生掌握情况34基本页面的制作掌握各种属性的设置方法html语言标记掌握简单的链接的添加单元二利用外观设置属性html的各种标记语言的掌握网页标题的属性设置超链接的添加通过现场操作、上传作业方式评价学生掌握情况44基本页面的制作掌握各种属性的设置方法html语言标记掌握简单的链接的添加单元二、三利用外观设置属性html的各种标记语言的掌握网页标题的属性设置超链接的添加通过现场操作、上传作业方式评价学生掌握情况54创建超链接与导航栏创建横向导航栏创建多种形式的导航栏单元三导航的设计与制作导航链接的添加下拉菜单的制作超链接标记通过现场操作、上传作业方式评价学生掌握情况64制作表单网页制作用户登陆页面美化用户登陆页面单元四表单和表单域的使用以及属性的设置按钮，文本域的插入与设置字符宽度和最多字数的设置页面的美化通过现场操作、上传作业方式评价学生掌握情况74制作表单网页制作用户注册页面美化用户注册页面单元四表单和表单域的使用以及属性的设置按钮，文本域的插入与设置字符宽度和最多字数的设置页面的美化通过现场操作、上传作业方式评价学生掌握情况84布局与美化网页利用表格布局网页页面为页面添加样式美化页面单元五表格的使用创建样式文件，定义布局样式利用css定义样式美化页面通过现场操作、上传作业方式评价学生掌握情况94布局与美化网页利用表格布局网页页面为页面添加样式美化页面单元五表格的使用创建样式文件，定义布局样式利用css定义样式美化页面通过现场操作、上传作业方式评价学生掌握情况10期中考试114布局与美化网页利用Div+css布局网页页面为页面添加样式美化页面单元五插入div标签，搭建网页结构创建样式文件，定义布局样式利用css定义样式美化页面通过现场操作、上传作业方式评价学生掌握情况124创建与应用模板和库能够创建网页模板页面创建包含库项目和代码片段的网页单元六创建与编辑网页模板定义修改可编辑区域、可选区域的方法利用模板生成新网页创建库项目和代码片段，并在网页插入已有的代码片段通过现场操作、上传作业方式评价学生掌握情况134创建与应用模板和库能够创建网页模板页面创建包含库项目和代码片段的网页单元六创建与编辑网页模板定义修改可编辑区域、可选区域的方法利用模板生成新网页创建库项目和代码片段，并在网页插入已有的代码片段通过现场操作、上传作业方式评价学生掌握情况144实现网页特效掌握绘制房产类网站的布局图掌握房产类网站界面设计全流程单元七编写简单的java程序，明确他的具体意义在网页中实现当前日期，不同时段显示不同的问候语滚动效果的实现鼠标指示时切换图片的方法通过现场操作、上传作业方式评价学生掌握情况154实现网页特效掌握绘制房产类网站的布局图掌握房产类网站界面设计全流程单元七编写简单的java程序，明确他的具体意义在网页中实现当前日期，不同时段显示不同的问候语滚动效果的实现鼠标指示时切换图片的方法通过现场操作、上传作业方式评价学生掌握情况164规划网站与设计网页掌握绘制房产类网站的布局图掌握房产类网站界面设计全流程单元八熟悉网站的开发流程和规范合理的规划布局网站风格和结构设计模板测试网站通过现场操作、上传作业方式评价学生掌握情况174期末复习184期末考试5 第一堂课设计（网页制作流程和设计常识）1.简介2.案例解析-斑马网1）网站的分类2）构成网页的元素3）网页制作的基本步骤3.案例解析-布局新浪1）布局实用原则2）布局应用3）优秀布局赏析4.案例解析-配色亚马逊1）网页配色实用原则2）配色应用3）经典配色赏析5.案例解析-08奥运网站设计说明书1）设计说明书的目的2）设计说明书写注意事项3）设计说明书的一般步骤四、 考核方案设计（供参考）本课程属于实践性、应用性很强的课程，所以要加强过程性考核，加强动手应