网页设计授课教案.doc

《网页设计授课教案.doc》由会员分享，可在线阅读，更多相关《网页设计授课教案.doc（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2014-2015学年第一学期网页设计授课教案课程名称：网页设计课程号：教师：谈 伟编写日期：2014年9月教学课题第1讲网页制作概要教学目的（1）了解网页制作的基础知识和相关概念（2）熟悉Dreamweaver的界面布局和工作环境（3）对网页有一个初步的印象，激发学习制作网页的兴趣教学要求（1）万维网、网页、网站、主页和HTML的基本概念（2）熟悉Dreamweaver的界面布局和工作环境（3）赏析各种经典网页（4）对网页的布局结构、色彩搭配形成初步印象教学课时3学时能力目标（1）熟悉Dreamweaver的界面布局和工作环境素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决

2、问题的能力。教学重点（1）万维网、网页、网站、主页和HTML的基本概念（2）网页的布局结构认识（3）网页的色彩搭配认识教学难点（1）Dreamweaver帮助系统的使用（2）对网页的设计与制作形成感性认识（3）激发学习制作网页的兴趣教学方法知识讲授，作品例举，图片展示，课堂讨论。主要参考书目网页设计与制作王晓红，龚毅 编 机械工业出版社 2011年网站建设与网页设计从入门到精通何新起 编著人民邮电出版社2013年思考题（1）什么是万维网？和域名中www的区别？（2）列举一企业网站案列，要求指出其中的布局。（3）给出Dreamweaver工具栏图标，要求认识并了解其基本功能。教学课题第2讲 网站

3、的规划与设计课 时3学时教学目的掌握规划设计网站的方法，掌握站点的创建与管理教学要求（1）掌握网站风格定位和网站栏目划分和导航简介（2）掌握规划站点结构的方法（3）掌握站点的创建方法和站点的管理方法能力目标能够进行网站的规划设计，熟记创建站点的流程，掌握站点管理的方法素质目标培养学生的独立思考能力，通过思考管理站点及布局美观的网页，培养学生分析问题、解决问题的能力重 点（1）网站的规划设计（2）站点的创建与管理难 点（1）网站的规划设计（2）站点的创建与管理参考书目Microsoft IIS 6.0管理员必备指南（英文版）（美）斯坦内克 著世界图书出版公司2007年网站建设与网页设计从入门到精

4、通何新起 编著人民邮电出版社2013年思考题教学课题第3讲 PS设计网页版面基础课 时3学时教学目的（1）掌握Photoshop软件的使用方法（2）掌握Photoshop软件工具的使用方法（3）掌握使用Photoshop软件设计网页版面的方法教学要求（1）了解Photoshop软件的参数设置方法（2）掌握Photoshop文件的创建方法（3）学习Photoshop软件工具的使用方法（4）掌握网页版面布局设计的方法能力目标（1）了解Photoshop软件的参数设置方法（2）学习Photoshop软件工具的使用方法素质目标培养学生创新能力和独立思考能力，并使其具有分析问题、解决问题的能力重 点使用

5、Photoshop软件设计网页版面难 点使用Photoshop软件设计网页版面教学课题第4讲 PS制作网页版面实例分析课 时3学时教学目的（1）掌握网站的开发流程，了解网站的规划与组织。（2）掌握网页设计的基本原则与方法。（3）掌握网页版面布局设计技巧。 教学要求（1）网站的开发流程，网站的规划与组织。（2）网页设计的基本原则。（3）网页版面布局设计技巧。 能力目标（1）掌握网站的规划与组织。（2）掌握网页设计的基本原则。（3）掌握网页版面布局设计技巧。 素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）网站的规划与组织（2）网页版面布局设计技巧难 点（

6、1）网页版面布局设计技巧教学课题第5讲 PS设计网页LOGO课 时3学时教学目的（1）掌握网页设计的基本原则与方法。（2）掌握网页Logo设计技巧。教学要求（1）了解网页Logo的形式。（2）了解网页Logo的规范。（3）掌握设计网页Logo的方法。 能力目标（1）掌握网页Logo的设计方法。（2）掌握网页Logo的制作方法。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）网页Logo的设计方法。（2）掌握网页Logo的制作方法。难 点（1）掌握网页Logo的制作方法。教学课题第6讲 PS设计网页BANNER课 时3学时教学目的（1）掌握网页设计的基本

7、原则与方法。（2）掌握网页Banner设计技巧。教学要求（1）了解网页Banner的形式。（2）了解网页Banner的设计原则。（3）掌握设计网页Banner的方法。 能力目标（1）掌握网页Banner的设计方法。（2）掌握网页Banner的制作方法。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）网页Banner的设计方法。（2）掌握网页Banner的制作方法。难 点（1）掌握网页Banner的制作方法。教学课题第7讲 PS设计网页导航条课 时3学时教学目的（1）掌握网页设计的基本原则与方法。（2）掌握网页导航条设计技巧。教学要求（1）了解网页导航条

8、的形式。（2）了解网页导航条的设计原则。（3）掌握设计网页导航条的方法。 能力目标（1）掌握网页导航条的设计方法。（2）掌握网页导航条的制作方法。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）网页导航条的设计方法。（2）掌握网页导航条的制作方法。难 点（1）掌握网页导航条的制作方法。教学课题第8讲 PS设计网页内容区域和网页版权声明课 时3学时教学目的（1）掌握网页设计的基本原则与方法。（2）掌握网页内容区域和网页版权声明设计技巧。教学要求（1）了解网页美容。（2）了解网页版权声明。（3）掌握设计网页内容区域和网页版权声明的方法。 能力目标（1）掌握

9、网页内容区域和网页版权声明的设计方法。（2）掌握网页内容区域和网页版权声明的制作方法。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）网页内容区域和网页版权声明的设计方法。（2）掌握网页内容区域和网页版权声明的制作方法。难 点（1）掌握网页内容区域和网页版权声明的制作方法。教学课题第9讲 PS网页版面切图课 时3学时教学目的（1）掌握网页版面图的切图基本原则与方法。（2）掌握网页版面图的切图技巧。教学要求（1）了解切片工具的使用方法。（2）掌握网页版面图的切图方法。 能力目标（1）掌握网页版面图的切图分割方法。（2）掌握网页版面图的切图方法。素质目标培

10、养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）网页版面图的切图分割方法。（2）掌握网页版面图的切图方法。难 点（1）掌握网页版面图的切图方法。教学课题第10讲 了解制作网页的基础知识课 时3学时教学目的（1）掌握Dreamweaver的参数、网页页面属性的设置方法（2）掌握网页对象的插入与设置方法（3）掌握布局网页的方法教学要求（1）了解Dreamweaver 的参数设置方法（2）掌握页面属性和文件头内容的设置方法（3）学习网页对象的插入与设置方法（4）掌握使用表格布局网页的方法能力目标（1）掌握Dreamweaver的参数、网页页面属性的设置方法（2）学习网

11、页对象的插入与设置素质目标培养学生创新能力和独立思考能力，并使其具有分析问题、解决问题的能力重 点页面属性的设置、网页对象的插入与设置难 点使用表格对象布局网页教学课题第11讲 制作第一个网页课 时3学时教学目的（1）掌握网站的规划。（2）掌握站点的创建。（3）学会创建站点目录结构、准备素材。（4）熟练制作首页。（5）培养制作布局较为复杂网页的能力。（6）学会综合利用文字、图片、flash动画等素材制作网页教学要求（1）网站的规划。（2）站点的创建。（3）创建站点目录结构、准备素材。（4）制作首页。（5）制作布局较为复杂网页的能力。（6）综合利用文字、图片、flash动画等素材制作网页能力目标

12、（1）网站的规划。（2）站点的创建。（3）综合利用文字、图片、flash动画等素材制作较为复杂网页的能力素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）网站的规划（2）制作首页难 点（1）制作首页教学课题第12讲 网页的美化课 时3学时教学目的（1）了解网页美化的重要性。（2）掌握CSS样式表的基本语法和定义位置。（3）掌握CSS样式表的编辑方法。（4）掌握CSS样式表的应用方法。教学要求（1）掌握CSS样式表的基本语法和定义位置。（2）掌握标签样式、高级样式、类样式的定义方法。（3）掌握样式的编辑方法。（4）掌握如何使用CSS样式表美化页面。能力目标

13、（1）CSS样式表的创建与定义。（2）CSS样式表编辑。（3）合理地使用CSS样式表。素质目标培养学生创新能力和独立思考能力，并使其具有分析问题、解决问题的能力重 点CSS样式表的创建与定义难 点合理地使用CSS样式表教学课题第13讲 网页模板的制作课 时3学时教学目的（1）理解模板的作用。（2）学会将已有网页生成模板的操作方法。（3）掌握如何创建新模板的操作方法。教学要求（1）模板的作用。（2）将已有网页生成模板。（3）创建新的网页模板。能力目标（1）会将已有的网页制作成网页模板（2）能够独立创建新的网页模板素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点

14、掌握如何创建新的网页模板难 点掌握如何创建新的网页模板教学课题第14讲 使用模板创建网页课 时3学时教学目的（1）理解模板的作用。（2）学会使用已有模板创建网页的操作方法。教学要求（1）模板的作用。（2）使用已有模板创建网页。能力目标使用已有模板创建网页素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点掌握如何使用模板创建新的网页难 点掌握如何使用模板创建新的网页教学课题第15讲 网页模板的编辑与更新课 时3学时教学目的（1）理解模板的作用。（2）学会网页模板的编辑与更新方法。教学要求（1）模板的作用。（2）网页模板的编辑与更新方法。能力目标网页模板的编辑与更

15、新方法。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点掌握网页模板的编辑与更新方法。难 点掌握网页模板的编辑与更新方法。教学课题第16讲 认识网页的超级链接课 时3学时教学目的（1）掌握创建外部链接和内部链接的操作方法。（2）掌握制作图像映射的操作方法。（3）掌握创建E-mail链接的操作方法。（4）掌握测试链接的有效性的操作方法。教学要求（1）创建外部链接和内部链接。（2）制作图像映射。（3）创建E-mail链接。（4）测试链接的有效性。能力目标（1）创建常用超链接、导航栏。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重

16、 点（1）常用超链接的创建方法。难 点（1）首页与其他网页超链接的添加区别。教学课题第17讲 为网页首页添加超链接课 时3学时教学目的（1）掌握创建外部链接和内部链接的操作方法。（2）掌握制作图像映射的操作方法。（3）掌握创建E-mail链接的操作方法。（4）掌握测试链接的有效性的操作方法。教学要求（1）创建外部链接和内部链接。（2）制作图像映射。（3）创建E-mail链接。（4）测试链接的有效性。能力目标（1）创建常用超链接、导航栏。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）常用超链接的创建方法。难 点（1）首页与其他网页超链接的添加区别。教学

17、课题第18讲 完成其他链接课 时3学时教学目的（1）掌握创建外部链接和内部链接的操作方法。（2）掌握制作图像映射的操作方法。（3）掌握创建E-mail链接的操作方法。（4）掌握测试链接的有效性的操作方法。教学要求（1）创建外部链接和内部链接。（2）制作图像映射。（3）创建E-mail链接。（4）测试链接的有效性。能力目标（1）创建常用超链接、导航栏。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）常用超链接的创建方法。难 点（1）首页与其他网页超链接的添加区别。教学课题第19讲 让网页动起来课 时1学时教学目的（1）了解flash文件的类型。（2）掌握

18、在网页中插入flash动画和设置其属性的操作方法。（3）掌握在网页中插入flash按钮和设置其属性的操作方法。（4）掌握在网页中插入flash文本和设置其属性的操作方法。教学要求（1）flash文件的类型。（2）在网页中插入flash动画和设置其属性。（3）在网页中插入flash按钮和设置其属性。（4）在网页中插入flash文本和设置其属性。能力目标（1）制作网页的动感效果素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点插入Flash动画、按钮、文本难 点插入Flash动画、按钮、文本教学课题第20讲 网页的交互功能课 时2学时教学目的（1）掌握如何在表单网

19、页中插入表单域。（2）掌握如何在表单域中插入文本域和文本区域（3）掌握如何在表单域中插入单选按钮、单选按钮组和复选框（4）掌握如何在表单域中插入列表/菜单、按钮和图像域教学要求（1）在表单网页中插入表单域。（2）在表单域中插入文本域和文本区域（3）在表单域中插入单选按钮、单选按钮组和复选框（4）在表单域中插入列表/菜单、按钮和图像域能力目标（1）熟悉网页中表单的制作（2）对网页中的表单对象能够熟练灵活地应用素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）如何在表单中插入文本、列表、复选框对象、插入文本区域、按钮对象难 点（1）对网页中的表单对象熟练灵活

20、地应用教学课题第21讲 网站的发布与维护课 时1学时教学目的（1）掌握网站测试的方法；（2）了解域名的设计与申请方法；（3）掌握网站发布的方法（4）了解网站的维护与更新教学要求（1）网站测试的方法；（2）域名的设计与申请方法；（3）网站发布的方法（4）网站的维护与更新能力目标（1）网站测试的方法；（2）了解网站的维护与更新素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）网站测试的方法；（2）网站的维护与更新难 点（1）网站的维护与更新教学课题收取网站作品（随堂考试）课 时3学时教学目的（1）了解实训的意义、目的、要求、任务和考核方式；（2）了解网站开发

21、要求、开发规范；（3）掌握一个网站的完整制作步骤和操作方法。教学要求（1）规划网站的内容结构、目录结构、链接结构的方法。（2）网页制作软件Dreamweaver 8的基本操作和使用技能。（3）页面的整体控制和头部内容设置的方法。（4）网页页面布局的各种方法。（5）在网页中输入、设置标题和正文文字的方法。（6）在网页中插入图像、flash动画、背景音乐的方法。（7）建立各种形式超级链接的方法。（8）网站测试的方法。能力目标（1）应用前面所学的知识和技能制作网页（2）按规范流程开发网站素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）网站开发规范（2）网站的

22、开发流程难 点（1）网站的开发流程四、实践性教学环节要求教学课题实训一 站点的规划设计（书写网站策划方案）课 时2学时教学目的（1）熟悉Dreamweaver软件的界面布局和工作环境。（2）熟练掌握本地站点创建和管理的方法。（3）掌握网站策划方案的写作方法。教学要求（1）创建站点、管理站点（2）页面属性的设置能力目标（1）创建站点、管理站点（2）创建页面、在页面中输入文字（3）设置页面属性素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）创建本地站点（2）创建网页文档（3）设置页面属性难 点（1）创建本地站点（2）设置网页属性教学课题实训二 设计案例网站

23、LOGO课 时3学时教学目的（1）熟悉Photoshop软件的界面布局和工作环境。（2）熟练掌握网站LOGO的设计方法。（3）创建项目案例网站的LOGO。教学要求（1）了解网页Logo的形式。（2）了解网页Logo的规范。（3）掌握设计网页Logo的方法。 能力目标（1）掌握网页Logo的设计方法。（2）掌握网页Logo的制作方法。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）网页Logo的设计方法。（2）掌握网页Logo的制作方法。难 点（1）掌握网页Logo的制作方法。教学课题实训三 设计案例网站BANNER课 时3学时教学目的（1）熟悉Phot

24、oshop软件的使用方法。（2）熟练掌握网站BANNER的设计方法。（3）创建项目案例网站的BANNER。教学要求（1）了解网页Banner的形式。（2）了解网页Banner的规范。（3）掌握设计网页Banner的方法。 能力目标（1）掌握网页Banner的设计方法。（2）掌握网页Banner的制作方法。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）网页Banner的设计方法。（2）掌握网页Banner的制作方法。难 点（1）掌握网页Banner的制作方法。教学课题实训四 设计案例网站导航条课 时3学时教学目的（1）熟悉Photoshop软件的使用方

25、法。（2）熟练掌握网站导航条的设计方法。（3）创建项目案例网站的导航条。教学要求（1）了解网页导航条的形式。（2）了解网页导航条的规范。（3）掌握设计网页导航条的方法。 能力目标（1）掌握网页导航条的设计方法。（2）掌握网页导航条的制作方法。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）网页导航条的设计方法。（2）掌握网页导航条的制作方法。难 点（1）掌握网页导航条的制作方法。教学课题实训五 设计案例网站网页内容和网页版权声明课 时3学时教学目的（1）熟悉Photoshop软件的使用方法。（2）熟练掌握网站网页内容和网页版权声明的设计方法。（3）创建

26、项目案例网站的网页内容和网页版权声明。教学要求（1）了解网页内容的布局方法。（2）了解网页版权声明的设计方法。（3）掌握网页内容和网页版权声明的制作完成方法。 能力目标（1）掌握Photoshop软件多种工具结合的使用方法。（2）查看网络上相关网站网页。（3）根据小组讨论结果，实际动手完成网站的网页内容和网页版权声明。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）网页布局的设计方法。（2）掌握网页主要内容的制作方法。难 点（1）掌握网页主要内容的制作方法。教学课题实训六 对案例网站版面切图课 时3学时教学目的（1）熟悉Photoshop软件的使用方法

27、。（2）掌握网站版面设计的方法。（3）对案例网站版面进行切图。教学要求（1）掌握Photoshop软件中切片工具的使用方法。（2）了解网页内容的布局方法。（3）掌握网页版面图的切图方法。 能力目标（1）掌握Photoshop软件切片工具的使用方法。（2）查看网络上相关网站网页。（3）根据小组讨论结果，实际动手对网站版面进行切图。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）Photoshop软件中切片工具的使用方法。（2）对设计网站版面进行切图。难 点（1）掌握网页版面图的切图方法。教学课题实训七 制作完成案例网站首页课 时3学时教学目的（1）掌握在

28、网页中输入文本、输入空格、实现文本换行和编辑文本的方法。（2）学会在网页中插入水平线和日期。（3）掌握网页文本格式化操作。（4）掌握图像的插入方法，图像属性的设置方法。（5）掌握图像与文本混合编排的方法。（6）掌握使用CSS样式美化网页的方法。教学要求（1）在网页中输入文本、输入空格、实现文本换行和编辑文本。（2）在网页中插入水平线和日期。（3）网页文本格式化。（4）图像插入和图像属性设置。（5）图像与文本混合编排。（6）掌握使用CSS样式美化网页的方法。能力目标（1）在网页中输入文本、输入空格、实现文本换行和编辑文本。（2）在网页中插入水平线和日期。（3）网页文本格式化操作。（4）图像插入和

29、图像属性设置。（5）图像与文本混合编排。（6）CSS样式的创建与应用。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）在网页中输入文本、输入空格、实现文本换行、编辑文本；（2）在网页中插入水平线和日期；（3）对网页中的文本进行格式化操作；（4）在网页中插入图像，设置图像属性；（5）CSS样式的创建与应用。难 点合理地使用CSS样式美化网页。教学课题实训八 案例网站模板的制作课 时3学时教学目的（1）学会将已有网页生成模板的操作方法。（2）掌握如何将模板生成新网页的操作方法。（3）掌握编辑模板和更新模板的操作方法。教学要求（1）将已有网页生成模板。（2）

30、将模板生成新网页。（3）编辑模板和更新模板。能力目标（1）将已有网页生成模板。（2）将模板生成新网页。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）将已有网页生成模板。（2）将模板生成新网页。（3）编辑模板和更新模板。难 点（1）将模板生成新网页。（2）编辑模板和更新模板。教学课题实训九 案例网页超级链接的添加课 时3学时教学目的（1）掌握网页超链接的创建方法；（2）掌握网页超链接的应用方法；（3）为案例网站首页添加所有的新闻链接；（4）为制作好的二级网页超链接到首页。教学要求（1）网页超链接的理解；（2）网页超链接的应用；（3）网页超链接的创建。能

31、力目标（1）为案例网站添加超链接；（2）在网页上正确应用各种超链接。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）为指定文字设置超链接；（2）为指定图片设置超链接；（3）为二级网页超链接到首页。难 点（1）创建各种形式的超级链接。教学课题实训十 案例网站加入动态元素课 时2学时教学目的（1）复习在网页中指定位置输入文字的方法；（2）复习在网页中指定位置插入图片的方法；（3）复习在网页中插入库项目的方法；（4）掌握在网页中插入Flash动画的操作方法；（5）掌握设置Flash动画属性的操作方法；（6）掌握ASP代码创建滚动效果的方法。教学要求（1）在网页中插入Flash动画；（2）设置Flash动画属性；（3）使用ASP代码创建滚动效果。能力目标（1）在网页中插入Flash动画并属性；（2）使用ASP代码创建滚动效果。素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重 点（1）在网页中指定位置插入Flash动画，且设置其属性；（2）设置Flash动画的参数；（3）使用ASP代码创建滚动效果。难 点（1）使用ASP代码创建滚动效果。