网页设计课程设计.docx

网页设计课程设计.docx

《网页设计课程设计.docx》由会员分享，可在线阅读，更多相关《网页设计课程设计.docx（14页珍藏版）》请在冰豆网上搜索。

网页设计课程设计

课程教学设计

2013～2014学年第一学期

教学部门信息技术系

课程名称网页设计

专业、班级11计专二　　

主讲教师周瑞华

山东省潍坊商业学校

网页设计课程教学设计

一、管理信息

课程名称：

《网页设计》批准人：

谭宝军

课程代码：

所属部门：

信息技术系

制定人：

周瑞华制定时间：

2013.9

二、基本信息

课程类型：

计算机网络工程专业课学分：

8

必修课：

是学时：

168

选修课：

否授课对象：

11计专二

三、课程设计

1、课程目标设计

能力目标

知识目标

素质目标

学生学完本课程后，能够使用Dreamweaver工具制作美观大方、实用性强的静态网站（不包含动态效果）。

1）会使用CSS设计创建符合企事业美观需求的网页

2）会使用表单制作提交页面

3）能够使用模板、内嵌框架技术对站点内网页进行整体把握

4）掌握网站的开发、配置、测试流程

5）能够使用层进行简单的网页效果处理和网页布局

6）掌握通过Dreamweaver熟练运用网页元素开发静态网页

7）能够熟练使用超链接、图像和多媒体对网页进行布局美化处理

1）熟练通过表格对网页进行布局

2）熟练使用文本、超链接、图像和多媒体元素等制作完整的网页

3）会使用表单制作提交页面

4）会使用CSS设计创建符合企事业美观需求的页面

5）能够使用模板、内嵌框架技术对站点内网页进行整体把握

6）能够使用层进行简单的网页效果处理和网页布局

1）锻炼学生审美素质

2）锻炼学生的团队合作能力

3）锻炼学生的创新能力

2、课程内容设计

模块名称

学时

基本网页制作

60

综合实训

36

3、能力训练项目设计

项目编号

能力训练

项目名称

实现的能

力目标

训练方法手段与步骤

结果

（可展示）

1

淘宝网站的制作

1、熟练通过表格对网页进行布局

2、熟练使用文本、超链接、图像和多媒体元素等制作完整的网页

3、会使用表单制作提交页面

4、会使用CSS设计创建符合企事业美观需求的页面

5、能够使用模板、内嵌框架技术对站点内网页进行整体把握

6、能够使用层进行简单的网页效果处理和网页布局

1．以淘宝网站的制作为纲，逐步分解网页制作的各部分知识点

2．通过单个的理论案例和实练案例完成知识结构的实训

1、实训案例展示

2、淘宝网站

2

当当网的制作

学生能够对所学的知识加以灵活的运用，并完成相应的网站制作

通过当当网网站制作来巩固利用模板技术制作网站的能力

当当网网站展示

3

北京银行信用卡网站的制作

学生能够熟练的利用表格来布局网页，并能利用CSS来控制网页元素，完成相应的网站制作

通过北京银行信用卡网网站制作来强化利用CSS来控制网页元素知识点，完成实训

北京银行网站的展示

4

中国联通网站的制作

学生能够熟练的利用表格来布局网页，并能利用CSS来控制网页元素，进一步提高制作网站的能力。

通过中国联通网网站制作来进一一步提高学生制作网页的能力

中国联通网站的展示

4、教学进度表设计

序号

或周次

学时

教学目标和主要内容

单元标题

能力目标

能力训练项目编号

考核方法

1-2

16

学生未返校

3

6

项目一：

淘宝网站的制作

说明：

以制作淘宝网站为纲，将网页制作所有的知识点逐一渗透其中，完成了项目制作网页所需的知识点讲解完毕。

3

2

开发环境的认识与本地站点的创建

掌握站点创建的技巧

1

通过现场操作、上传作业方式评价学生掌握情况

4

8

表格的运用

掌握DW复杂表格的排版，并能熟练的使用表格进行常见网页布局

1

通过现场操作、上传作业方式评价学生掌握情况

5

6

图像和多媒体的应用

掌握DW中编辑图像和插入Flash文件

1

通过现场操作、上传作业方式评价学生掌握情况

2

测试一

6

4

Html与DW代码视图

读懂和了解html的结构和标记

1

通过现场操作、上传作业方式评价学生掌握情况

4

秋季运动会

7

8

十月一放假

8

6

表单的应用

会使用各种表单元素制作个人信息提交页、注册页面

1

通过现场操作、上传作业方式评价学生掌握情况

2

测试二

9

8

CSS样式表的应用

能够创建CSS样式

1

通过现场操作、上传作业方式评价学生掌握情况

10

8

层的应用

掌握层效果与层布局

1

通过现场操作、上传作业方式评价学生掌握情况

11

8

期中考试

12

4

模板与内嵌框架的使用

掌握模板与内嵌框架技术

1

通过现场操作、上传作业方式评价学生掌握情况

2

淘宝网站项目的综合及网站作品的展示

通过现场操作、上传作业方式评价学生掌握情况

项目二：

当当网站的制作

说明：

通过本项目来进一步巩固学生对所学知识的运用。

13

8

当当网站的制作

（一）

1、当当网首页设计制作

2、当当网版权设计制作

当当网导航设计制作

能够熟练的利用表格进行网页布局，并能利用CSS样式来控制网页元素，提高综合运用知识的能力

2

通过现场操作、上传作业方式评价学生掌握情况

14

8

当当网站的制作

（二）

1、当当网帮助中心页制作

2、当当网商品分类页制作

当当网商品详细信息页制作

能够熟练的利用表格进行网页布局，并能利用CSS样式来控制网页元素，提高综合运用知识的能力

2

通过现场操作、上传作业方式评价学生掌握情况

15

当当网站的制作（三）

1、当当网购物车页面制作

42、当当网用户注册、用户登录页制作

能够熟练的利用表格进行网页布局，并能利用CSS样式来控制网页元素，提高综合运用知识的能力

2

通过现场操作、上传作业方式评价学生掌握情况

项目三：

北京银行网站的制作

说明：

通过本项目项目来强化利用CSS来控制网页元素知识的运用。

16

8

项目综合实训：

北京银行信用卡网站制作

能够熟练的利用表格进行网页布局，并能利用CSS样式来控制网页元素，提高综合运用知识的能力

3

通过现场操作、上传作业方式评价学生掌握情况

项目四：

中国联通网站的制作

说明：

进一步强化、提高学生对静态网站的综合制作能力。

17

8

项目综合实训：

中国联通网站制作

（一）

能够熟练的利用表格进行网页布局，并能利用CSS样式来控制网页元素，提高综合运用知识的能力

4

通过现场操作、上传作业方式评价学生掌握情况

18

8

项目综合实训：

中国联通网站制作

（二）

能够熟练的利用表格进行网页布局，并能利用CSS样式来控制网页元素，提高综合运用知识的能力

4

通过现场操作、上传作业方式评价学生掌握情况

19

8

第二模块实训作品展示

20

8

期末实践课考试

21

8

全校期末考试

5、第一堂课设计梗概

本次课标题：

开发环境的认识和本地站点的创建

授课班级

11网计专二

课时

2

上课地点

4314机房

教学目标

能力（技能）目标

知识目标

Ø能够熟练创建本地站点

Ø能够创建纯文本页面，并对文本进行格式化处理

Ø熟悉Dreamweaver的操作界面

Ø本地站点的创建方法

Ø网页中文本的插入

Ø文本、段落格式化

Ø设置项目列表、编号列表

重点：

创建站点、文本格式化处理

难点：

列表的运用

能

力

训

练

任

务

、

案

例

、

器

材

准

备

能力训练案例：

案例1：

创建淘宝站点

相关知识点：

●创建本地站点

●在当前站点添加页面并保存

●页面属性的设置

案例2：

淘宝新闻页的制作

相关知识点：

●插入文本

●文本格式化

●设置段落

●列表

素材：

1、网页所需的图片

2、缺少文本的空白新闻网页

器材：

微机

参考资料

《网页制作中文版Dreamweaver8》

《使用Dreamweaver制作网页》

步骤

教学内容

教学方法

教学手段

学生活动

教学内容、目的

一、课前三分钟教育

二、优秀网站作品欣赏

三、展示项目：

淘宝网站

四、知识点拨

1、 网站简述

Ø网站的基本术语

Ø建立网站的流程

Ø构成网页的元素

Ø网页设计遵循的准则

2、站点的创建

Ø创建本地站点

Ø在当前站点添加页面并保存

Ø页面属性的设置

3、文本插入与格式化

Ø普通文本的文本

Ø特殊符号的插入

Ø水平线的插入

Ø文本格式化

4、段落格式化

Ø首行缩行

Ø换行符的使用

5、设置列表

Ø项目列表的设置

Ø编号列表的设置

五、分析任务

老师带领学生分析实现任务所用的步骤

任务驱动法

七步教学法

组实训法

以学生为主体，老师起到启发、引导的作用，充分调动学的学习积极性，并充分调动学生的主动性

跟随老师的思路认真听讲、回答老师的提问

步骤

教学内容

教学方法

教学手段

学生活动

教学内容

六、实现任务

由学生先尝试操作，然后再由老师进行指点

七、总结任务

八、随机抽取学生进行操作实训

制作拍拍网站

九、小结、作业

十、课后一分钟

任务驱动法

七步教学法

组实训法

训练

任务一：

创建淘宝站点

任务二：

淘宝新闻页的制作

老师示范或课件演示

课件演示

学生模仿

深化

练习一：

拍拍新闻页的制作

练习二：

新浪新闻网页的制作

练习三：

NBA西部球队分布网页的制作

老师效果展示、重点提示、重点讲解、个别难点演示

操作演示

讨论、操作完成

归纳

1.网站分类

2.网页的组成元素

3.如何制作网站

4.Dreamweaver简介

5.创建站点

讲授

演示

操作演示

集体思考

个别回答

总结

掌握站点的创建方法

老师讲授

课件

作业

1.准备一个或多个有代表性的网站主页或个人主页（注意保存的方法）。

2.打开这个网页，分析其使用的网页元素。

3.练习创建站点的使用。

后记

本次课是网页制作入门课，关键是培养学生的学习兴趣

四、考核方案设计

1、工作任务评价（平时成绩）

（1）能力目标（检测、报告、综合实训的评价）50%；

（2）相关理论知识掌握程度（课堂发言、讨论、作业等）30%；

（3）其它（出勤、表现）20%。

2、综合评价

（1）课程总成绩=平时成绩（80%）+期末成绩（30%）；

（2）平时成绩（100%）=每次课实训单项成绩（60%）+毕业设计项目（40%）

（3）每个单项成绩根据其在课程中的地位分别占6--7%；

（4）期末成绩（100%）为期终上机考试成绩。

五、教材、资料

教材：

《AdobeDweamweaverCS4中文版经典教程》，人民邮电出版社

参考资料：

《网页制作教程》，清华大学出版社