网页设计授课教案.docx

网页设计授课教案.docx

《网页设计授课教案.docx》由会员分享，可在线阅读，更多相关《网页设计授课教案.docx（29页珍藏版）》请在冰点文库上搜索。

网页设计授课教案

2014-2015学年第一学期

网页设计授课教案

课程名称：

网页设计

课程号：

教师：

谈伟

编写日期：

2014年9月

教学课题

第1讲　网页制作概要

教学目的

（1）了解网页制作的基础知识和相关概念

（2）熟悉Dreamweaver的界面布局和工作环境

（3）对网页有一个初步的印象，激发学习制作网页的兴趣

教学要求

（1）万维网、网页、网站、主页和HTML的基本概念

（2）熟悉Dreamweaver的界面布局和工作环境

（3）赏析各种经典网页

（4）对网页的布局结构、色彩搭配形成初步印象

教学课时

3学时

能力目标

（1）熟悉Dreamweaver的界面布局和工作环境

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

教学重点

（1）万维网、网页、网站、主页和HTML的基本概念

（2）网页的布局结构认识

（3）网页的色彩搭配认识

教学难点

（1）Dreamweaver帮助系统的使用

（2）对网页的设计与制作形成感性认识

（3）激发学习制作网页的兴趣

教学方法

知识讲授，作品例举，图片展示，课堂讨论。

主要参考书目

《网页设计与制作》王晓红，龚毅编机械工业出版社2011年

《网站建设与网页设计从入门到精通》何新起编著　人民邮电出版社　2013年

思考题

（1）什么是万维网？

和域名中www的区别？

（2）列举一企业网站案列，要求指出其中的布局。

（3）给出Dreamweaver工具栏图标，要求认识并了解其基本功能。

教学课题

第2讲网站的规划与设计

课   时

3学时

教学目的

掌握规划设计网站的方法，掌握站点的创建与管理

教学要求

（1）掌握网站风格定位和网站栏目划分和导航简介

（2）掌握规划站点结构的方法

（3）掌握站点的创建方法和站点的管理方法

能力目标

能够进行网站的规划设计，熟记创建站点的流程，掌握站点管理的方法

素质目标

培养学生的独立思考能力，通过思考管理站点及布局美观的网页，培养学生分析问题、解决问题的能力

重   点

（1）网站的规划设计

（2）站点的创建与管理

难   点

（1）网站的规划设计

（2）站点的创建与管理

参考书目

《MicrosoftIIS6.0管理员必备指南（英文版）》（美）斯坦内克著世界图书出版公司　2007年

《网站建设与网页设计从入门到精通》何新起编著　人民邮电出版社　2013年

思考题

教学课题

第3讲PS设计网页版面基础

课   时

3学时

教学目的

（1）掌握Photoshop软件的使用方法

（2）掌握Photoshop软件工具的使用方法

（3）掌握使用Photoshop软件设计网页版面的方法

教学要求

（1）了解Photoshop软件的参数设置方法

（2）掌握Photoshop文件的创建方法

（3）学习Photoshop软件工具的使用方法

（4）掌握网页版面布局设计的方法

能力目标

（1）了解Photoshop软件的参数设置方法

（2）学习Photoshop软件工具的使用方法

素质目标

培养学生创新能力和独立思考能力，并使其具有分析问题、解决问题的能力

重   点

使用Photoshop软件设计网页版面

难   点

使用Photoshop软件设计网页版面

教学课题

第4讲PS制作网页版面实例分析

课   时

3学时

教学目的

（1）掌握网站的开发流程，了解网站的规划与组织。

（2）掌握网页设计的基本原则与方法。

（3）掌握网页版面布局设计技巧。

教学要求

（1）网站的开发流程，网站的规划与组织。

（2）网页设计的基本原则。

（3）网页版面布局设计技巧。

能力目标

（1）掌握网站的规划与组织。

（2）掌握网页设计的基本原则。

（3）掌握网页版面布局设计技巧。

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）网站的规划与组织

（2）网页版面布局设计技巧

难   点

（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）掌握网页设计的基本原则与方法。

（2）掌握网页Banner设计技巧。

教学要求

（1）了解网页Banner的形式。

（2）了解网页Banner的设计原则。

（3）掌握设计网页Banner的方法。

能力目标

（1）掌握网页Banner的设计方法。

（2）掌握网页Banner的制作方法。

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）网页Banner的设计方法。

（2）掌握网页Banner的制作方法。

难   点

（1）掌握网页Banner的制作方法。

教学课题

第7讲PS设计网页导航条

课   时

3学时

教学目的

（1）掌握网页设计的基本原则与方法。

（2）掌握网页导航条设计技巧。

教学要求

（1）了解网页导航条的形式。

（2）了解网页导航条的设计原则。

（3）掌握设计网页导航条的方法。

能力目标

（1）掌握网页导航条的设计方法。

（2）掌握网页导航条的制作方法。

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）网页导航条的设计方法。

（2）掌握网页导航条的制作方法。

难   点

（1）掌握网页导航条的制作方法。

教学课题

第8讲PS设计网页内容区域和网页版权声明

课   时

3学时

教学目的

（1）掌握网页设计的基本原则与方法。

（2）掌握网页内容区域和网页版权声明设计技巧。

教学要求

（1）了解网页美容。

（2）了解网页版权声明。

（3）掌握设计网页内容区域和网页版权声明的方法。

能力目标

（1）掌握网页内容区域和网页版权声明的设计方法。

（2）掌握网页内容区域和网页版权声明的制作方法。

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）网页内容区域和网页版权声明的设计方法。

（2）掌握网页内容区域和网页版权声明的制作方法。

难   点

（1）掌握网页内容区域和网页版权声明的制作方法。

教学课题

第9讲PS网页版面切图

课   时

3学时

教学目的

（1）掌握网页版面图的切图基本原则与方法。

（2）掌握网页版面图的切图技巧。

教学要求

（1）了解切片工具的使用方法。

（2）掌握网页版面图的切图方法。

能力目标

（1）掌握网页版面图的切图分割方法。

（2）掌握网页版面图的切图方法。

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）网页版面图的切图分割方法。

（2）掌握网页版面图的切图方法。

难   点

（1）掌握网页版面图的切图方法。

教学课题

第10讲了解制作网页的基础知识

课   时

3学时

教学目的

（1）掌握Dreamweaver的参数、网页页面属性的设置方法

（2）掌握网页对象的插入与设置方法

（3）掌握布局网页的方法

教学要求

（1）了解Dreamweaver的参数设置方法

（2）掌握页面属性和文件头内容的设置方法

（3）学习网页对象的插入与设置方法

（4）掌握使用表格布局网页的方法

能力目标

（1）掌握Dreamweaver的参数、网页页面属性的设置方法

（2）学习网页对象的插入与设置

素质目标

培养学生创新能力和独立思考能力，并使其具有分析问题、解决问题的能力

重   点

页面属性的设置、网页对象的插入与设置

难   点

使用表格对象布局网页

教学课题

第11讲制作第一个网页

课   时

3学时

教学目的

（1）掌握网站的规划。

（2）掌握站点的创建。

（3）学会创建站点目录结构、准备素材。

（4）熟练制作首页。

（5）培养制作布局较为复杂网页的能力。

（6）学会综合利用文字、图片、flash动画等素材制作网页

教学要求

（1）网站的规划。

（2）站点的创建。

（3）创建站点目录结构、准备素材。

（4）制作首页。

（5）制作布局较为复杂网页的能力。

（6）综合利用文字、图片、flash动画等素材制作网页

能力目标

（1）网站的规划。

（2）站点的创建。

（3）综合利用文字、图片、flash动画等素材制作较为复杂网页的能力

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）网站的规划

（2）制作首页

难   点

（1）制作首页

教学课题

第12讲网页的美化

课   时

3学时

教学目的

（1）了解网页美化的重要性。

（2）掌握CSS样式表的基本语法和定义位置。

（3）掌握CSS样式表的编辑方法。

（4）掌握CSS样式表的应用方法。

教学要求

（1）掌握CSS样式表的基本语法和定义位置。

（2）掌握标签样式、高级样式、类样式的定义方法。

（3）掌握样式的编辑方法。

（4）掌握如何使用CSS样式表美化页面。

能力目标

（1）CSS样式表的创建与定义。

（2）CSS样式表编辑。

（3）合理地使用CSS样式表。

素质目标

培养学生创新能力和独立思考能力，并使其具有分析问题、解决问题的能力

重   点

CSS样式表的创建与定义

难   点

合理地使用CSS样式表

教学课题

第13讲网页模板的制作

课   时

3学时

教学目的

（1）理解模板的作用。

（2）学会将已有网页生成模板的操作方法。

（3）掌握如何创建新模板的操作方法。

教学要求

（1）模板的作用。

（2）将已有网页生成模板。

（3）创建新的网页模板。

能力目标

（1）会将已有的网页制作成网页模板

（2）能够独立创建新的网页模板

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

掌握如何创建新的网页模板

难   点

掌握如何创建新的网页模板

教学课题

第14讲使用模板创建网页

课   时

3学时

教学目的

（1）理解模板的作用。

（2）学会使用已有模板创建网页的操作方法。

教学要求

（1）模板的作用。

（2）使用已有模板创建网页。

能力目标

使用已有模板创建网页

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

掌握如何使用模板创建新的网页

难   点

掌握如何使用模板创建新的网页

教学课题

第15讲网页模板的编辑与更新

课   时

3学时

教学目的

（1）理解模板的作用。

（2）学会网页模板的编辑与更新方法。

教学要求

（1）模板的作用。

（2）网页模板的编辑与更新方法。

能力目标

网页模板的编辑与更新方法。

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

掌握网页模板的编辑与更新方法。

难   点

掌握网页模板的编辑与更新方法。

教学课题

第16讲认识网页的超级链接

课   时

3学时

教学目的

（1）掌握创建外部链接和内部链接的操作方法。

（2）掌握制作图像映射的操作方法。

（3）掌握创建E-mail链接的操作方法。

（4）掌握测试链接的有效性的操作方法。

教学要求

（1）创建外部链接和内部链接。

（2）制作图像映射。

（3）创建E-mail链接。

（4）测试链接的有效性。

能力目标

（1）创建常用超链接、导航栏。

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）常用超链接的创建方法。

难   点

（1）首页与其他网页超链接的添加区别。

教学课题

第17讲为网页首页添加超链接

课   时

3学时

教学目的

（1）掌握创建外部链接和内部链接的操作方法。

（2）掌握制作图像映射的操作方法。

（3）掌握创建E-mail链接的操作方法。

（4）掌握测试链接的有效性的操作方法。

教学要求

（1）创建外部链接和内部链接。

（2）制作图像映射。

（3）创建E-mail链接。

（4）测试链接的有效性。

能力目标

（1）创建常用超链接、导航栏。

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）常用超链接的创建方法。

难   点

（1）首页与其他网页超链接的添加区别。

教学课题

第18讲完成其他链接

课   时

3学时

教学目的

（1）掌握创建外部链接和内部链接的操作方法。

（2）掌握制作图像映射的操作方法。

（3）掌握创建E-mail链接的操作方法。

（4）掌握测试链接的有效性的操作方法。

教学要求

（1）创建外部链接和内部链接。

（2）制作图像映射。

（3）创建E-mail链接。

（4）测试链接的有效性。

能力目标

（1）创建常用超链接、导航栏。

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）常用超链接的创建方法。

难   点

（1）首页与其他网页超链接的添加区别。

教学课题

第19讲让网页动起来

课   时

1学时

教学目的

（1）了解flash文件的类型。

（2）掌握在网页中插入flash动画和设置其属性的操作方法。

（3）掌握在网页中插入flash按钮和设置其属性的操作方法。

（4）掌握在网页中插入flash文本和设置其属性的操作方法。

教学要求

（1）flash文件的类型。

（2）在网页中插入flash动画和设置其属性。

（3）在网页中插入flash按钮和设置其属性。

（4）在网页中插入flash文本和设置其属性。

能力目标

（1）制作网页的动感效果

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

插入Flash动画、按钮、文本

难   点

插入Flash动画、按钮、文本

教学课题

第20讲网页的交互功能

课   时

2学时

教学目的

（1）掌握如何在表单网页中插入表单域。

（2）掌握如何在表单域中插入文本域和文本区域

（3）掌握如何在表单域中插入单选按钮、单选按钮组和复选框

（4）掌握如何在表单域中插入列表/菜单、按钮和图像域

教学要求

（1）在表单网页中插入表单域。

（2）在表单域中插入文本域和文本区域

（3）在表单域中插入单选按钮、单选按钮组和复选框

（4）在表单域中插入列表/菜单、按钮和图像域

能力目标

（1）熟悉网页中表单的制作

（2）对网页中的表单对象能够熟练灵活地应用

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）如何在表单中插入文本、列表、复选框对象、插入文本区域、按钮对象

难   点

（1）对网页中的表单对象熟练灵活地应用

教学课题

第21讲网站的发布与维护

课   时

1学时

教学目的

（1）掌握网站测试的方法；

（2）了解域名的设计与申请方法；

（3）掌握网站发布的方法

（4）了解网站的维护与更新

教学要求

（1）网站测试的方法；

（2）域名的设计与申请方法；

（3）网站发布的方法

（4）网站的维护与更新

能力目标

（1）网站测试的方法；

（2）了解网站的维护与更新

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）网站测试的方法；

（2）网站的维护与更新

难   点

（1）网站的维护与更新

教学课题

收取网站作品（随堂考试）

课   时

3学时

教学目的

（1）了解实训的意义、目的、要求、任务和考核方式；

（2）了解网站开发要求、开发规范；

（3）掌握一个网站的完整制作步骤和操作方法。

教学要求

（1）规划网站的内容结构、目录结构、链接结构的方法。

（2）网页制作软件Dreamweaver8的基本操作和使用技能。

（3）页面的整体控制和头部内容设置的方法。

（4）网页页面布局的各种方法。

（5）在网页中输入、设置标题和正文文字的方法。

（6）在网页中插入图像、flash动画、背景音乐的方法。

（7）建立各种形式超级链接的方法。

（8）网站测试的方法。

能力目标

（1）应用前面所学的知识和技能制作网页

（2）按规范流程开发网站

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）网站开发规范

（2）网站的开发流程

难   点

（1）网站的开发流程

四、实践性教学环节要求

教学课题

实训一站点的规划设计（书写网站策划方案）

课   时

2学时

教学目的

（1）熟悉Dreamweaver软件的界面布局和工作环境。

（2）熟练掌握本地站点创建和管理的方法。

（3）掌握网站策划方案的写作方法。

教学要求

（1）创建站点、管理站点

（2）页面属性的设置

能力目标

（1）创建站点、管理站点

（2）创建页面、在页面中输入文字

（3）设置页面属性

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）创建本地站点

（2）创建网页文档

（3）设置页面属性

难   点

（1）创建本地站点

（2）设置网页属性

教学课题

实训二设计案例网站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）熟悉Photoshop软件的使用方法。

（2）熟练掌握网站BANNER的设计方法。

（3）创建项目案例网站的BANNER。

教学要求

（1）了解网页Banner的形式。

（2）了解网页Banner的规范。

（3）掌握设计网页Banner的方法。

能力目标

（1）掌握网页Banner的设计方法。

（2）掌握网页Banner的制作方法。

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）网页Banner的设计方法。

（2）掌握网页Banner的制作方法。

难   点

（1）掌握网页Banner的制作方法。

教学课题

实训四设计案例网站导航条

课   时

3学时

教学目的

（1）熟悉Photoshop软件的使用方法。

（2）熟练掌握网站导航条的设计方法。

（3）创建项目案例网站的导航条。

教学要求

（1）了解网页导航条的形式。

（2）了解网页导航条的规范。

（3）掌握设计网页导航条的方法。

能力目标

（1）掌握网页导航条的设计方法。

（2）掌握网页导航条的制作方法。

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）网页导航条的设计方法。

（2）掌握网页导航条的制作方法。

难   点

（1）掌握网页导航条的制作方法。

教学课题

实训五设计案例网站网页内容和网页版权声明

课   时

3学时

教学目的

（1）熟悉Photoshop软件的使用方法。

（2）熟练掌握网站网页内容和网页版权声明的设计方法。

（3）创建项目案例网站的网页内容和网页版权声明。

教学要求

（1）了解网页内容的布局方法。

（2）了解网页版权声明的设计方法。

（3）掌握网页内容和网页版权声明的制作完成方法。

能力目标

（1）掌握Photoshop软件多种工具结合的使用方法。

（2）查看网络上相关网站网页。

（3）根据小组讨论结果，实际动手完成网站的网页内容和网页版权声明。

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）网页布局的设计方法。

（2）掌握网页主要内容的制作方法。

难   点

（1）掌握网页主要内容的制作方法。

教学课题

实训六对案例网站版面切图

课   时

3学时

教学目的

（1）熟悉Photoshop软件的使用方法。

（2）掌握网站版面设计的方法。

（3）对案例网站版面进行切图。

教学要求

（1）掌握Photoshop软件中切片工具的使用方法。

（2）了解网页内容的布局方法。

（3）掌握网页版面图的切图方法。

能力目标

（1）掌握Photoshop软件切片工具的使用方法。

（2）查看网络上相关网站网页。

（3）根据小组讨论结果，实际动手对网站版面进行切图。

素质目标

培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。

重   点

（1）Photoshop软件中切片工具的使用方法。

（2）对设计网站版面进行切图。

难   点

（1）掌握网页版面图的切图方法。

教学课题

实训七制作完成案例网站首页

课   时

3学时

教学目的

（1）掌握在网页中输入文本、输入空格、实现文本换行和编辑文本的方法。

（2）学会在网页中插入水平线和日期。

（3）掌握网页文本格式化操作。

（4）掌握图像的插入方法，图像属性的设置方法。

（5）掌握图像与文本混合编排的方法。

（6）掌握使用CSS样式美化网页的方法。

教学要求

（1）在网页中输入文本、输入空格、实现文本换行和编辑文本。

（2）在网页