《网页设计与制作》
课程教学大纲
课程代码：xx3327教育层次：专科层次学制：三年适用对象：初中起点高职□中职起点高职□高中起点高职■课程教学时数：90学分数：6
制订或修订执笔人：李瑞强
系（部）教研室主任审核意见
系（部）教学主任审核意见
完成日期：
审核小组：院教学工作委员会审核日期：
签发人：沈苏林签发日期：无锡商业职业技术学院
《网页设计与制作》教学大纲
课程名称：网页设计与制作
课程代码：xx3327建议课时数：90学分：6
适用专业：计算机网络技术、计算机应用技术
一、课程性质和任务
课程性质：
本课程是网络技术专业重点建设课程之一。本课程是计算机应用专业的专业基础课，是计算机网络技术专业的专业核心课程。
课程任务：
《网页设计与制作》这门课程通过感性、直观的实践操作，指导学生完成网站作品，从而激发学生开发网站项目的热情，带动学生对ASP、ASP.NET、网络安全技术等其他专业核心课程的学习积极性。
二、课程教学目标
本课程的教学目标是，使学生具备网站策划、效果图设计与制作、网站后期编辑、动态代码编写等方面的技能，提高学生的团队协作能力、沟通能力、分析解决问题能力和项目实施能力，注重学生在学习和实践过程中职业素质的养成。
通过学习，使学生了解网页系统的起源和发展、常用的网页制作软件及图像处理软件和JavaScript程序，掌握运用Dreamweaver网页制作软件制作网页，掌握运用Photoshop图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的方法，进而掌握将这三个软件互相配合、各司其职，完成网页设计综合任务的方法。为今后从事网页设计与制作、网站开发和管理工作奠定基础。在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。
本课程要求用网页设计方法，设计一个网站，提高综合应用所学知识的能力，积累网页制作的经验，提高色彩搭配能力，团队协作能力，具体目标如下：
◆培养系统设计的整体思想
◆培养网页版面设计和制作网页的能力
◆学习编写技术文档
◆培养学习、吸取他人的经验、探讨技术的习惯
◆培养团队协作能力
（一）知识教学目标
1、熟悉互联网。
2、掌握网页设计软件Dreamweaver的使用方法。
3、掌握图像处理软件Photoshop的使用。
4、掌握动画制作软件Flash的使用。
（二）能力培养目标
1、理解掌握设计、制作网站的基本工作流程与方法。
2、能运用Photoshop图像处理软件进行网页版式设计与素材的制作。
3、能运用Flash动画制作软件进行网页素材的制作。
4、能综合运用Dreamweaver网页设计软件，设计制作一个公司网站。
（三）思想教育目标
1、通过初步学习分析和解决计算机应用过程中的实际问题，培养科学求实的态度和创新意识。
2、按时守信的诚实作风；乐观向上的敬业精神；沟通协作的团队意识；知识获取和应用的自主学习能力；探索实践的创新能力。
3、树立科学态度及知识产权意识，自觉依法进行信息技术活动。
三、教学内容与教学基本要求
（2）了解网页Logo的规范。（3）掌握设计网页Logo的方法。
能力目标（1）掌握网页Logo的设计方法。（2）掌握网页Logo的制作方法。
素质目标培养学生的创新能力与思考能力，并使其具有分析问题、解决问题的能力。
重点（1）网页Logo的设计方法。（2）掌握网页Logo的制作方法。
难点（1）掌握网页Logo的制作方法。
（4）掌握使用表格布局网页的方法
能力目标（1）掌握Dreamweaver的参数、网页页面属性的设置方法（2）学习网页对象的插入与设置
素质目标培养学生创新能力和思考能力，并使其具有分析问题、解决问题的能力重点页面属性的设置、网页对象的插入与设置
难点使用表格对象布局网页
（2）掌握标签样式、高级样式、类样式的定义方法。（3）掌握样式的编辑方法。
（4）掌握如何使用CSS样式表美化页面。
能力目标（1）CSS样式表的创建与定义。（2）CSS样式表编辑。
（3）合理地使用CSS样式表。
素质目标培养学生创新能力和思考能力，并使其具有分析问题、解决问题的能力重点CSS样式表的创建与定义
难点合理地使用CSS样式表
能力目标（1）创建常用超链接、导航栏。
素质目标培养学生的创新能力与思考能力，并使其具有分析问题、解决问题的能力。重点（1）常用超链接的创建方法。
难点（1）首页与其他网页超链接的添加区别。
（2）了解网站开发要求、开发规范；
（3）掌握一个网站的完整制作步骤和操作方法。
知识目标（1）规划网站的内容结构、目录结构、链接结构的方法。（2）网页制作软件Dreamweaver8的基本操作和使用技能。（3）页面的整体控制和头部内容设置的方法。
（4）网页页面布局的各种方法。
（5）在网页中输入、设置标题和正文文字的方法。
（6）在网页中插入图像、flash动画、背景音乐的方法。（7）建立各种形式超级链接的方法。
（8）网站测试的方法。
能力目标（1）应用前面所学的知识和技能制作网页（2）按规范流程开发网站
素质目标
培养学生的创新能力与思考能力，并使其具有分析问题、解决问题的能力。
重点（1）网站开发规范（2）网站的开发流程
难点（1）网站的开发流程四、实践性教学环节要求
点（2）设置网页属性
（3）创建项目案例网站的导航条。
知识目标（1）了解网页导航条的形式。（2）了解网页导航条的规范。（3）掌握设计网页导航条的方法。
能力目标（1）掌握网页导航条的设计方法。（2）掌握网页导航条的制作方法。
素质目标培养学生的创新能力与思考能力，并使其具有分析问题、解决问题的能力。
重点（1）网页导航条的设计方法。（2）掌握网页导航条的制作方法。
难点（1）掌握网页导航条的制作方法。
（2）查看网络上相关网站网页。
（3）根据小组讨论结果，实际动手对网站版面进行切图。
素质目标培养学生的创新能力与思考能力，并使其具有分析问题、解决问题的能力。
重点（1）Photoshop软件中切片工具的使用方法。（2）对设计网站版面进行切图。
难点（1）掌握网页版面图的切图方法。
课时3学时
教学目的（1）学会将已有网页生成模板的操作方法。（2）掌握如何将模板生成新网页的操作方法。（3）掌握编辑模板和更新模板的操作方法。
知识目标（1）将已有网页生成模板。（2）将模板生成新网页。（3）编辑模板和更新模板。
能力目标（1）将已有网页生成模板。（2）将模板生成新网页。
素质目标培养学生的创新能力与思考能力，并使其具有分析问题、解决问题的能力。
重点（1）将已有网页生成模板。（2）将模板生成新网页。（3）编辑模板和更新模板。
难点（1）将模板生成新网页。（2）编辑模板和更新模板。
（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代码创建滚动效果。
五、学生学习要求及考核
（一）学习要求
要求学生在学习过程中做好预习，在学习过程中认真听课，认真完成每次任务，课余时间能够主动多找时间上网观看优秀网站，学习每个优秀网站的版式格局。
（二）考核要求
该课程实行“以完成仿真型网站项目为基础，以完成某公司网站为重点，兼顾学习态度、学习纪律、协作能力等，全方位、多角度”的考核评价模式。
将课程考核分为平时、阶段（期中）和期末三部分。
平时评价主要根据学生的出勤率、学习态度、学习纪律、协作能力等进行。学生在教师引导下完成学习任务情况能准确地反映出学生基本知识、技能掌握情况。每完成一个子任务，教师选用请学生自评、学生间互评、教师评价的方式给每一个学生恰如其分的评价，并记录为平时成绩。考核后，如学生对本人完成任务情况不满意，允许进一步完善，重新考核。平时考核与巡回指导同步进行，当场完成。
阶段考核依据完成仿真型公司网站的质量。将完成仿真型公司网站任务分为若干阶段，学生完成每一阶段任务后都要撰写制作说明，然后提交阶段性作品和制作说明，由教师根据每阶段考核要求进行评价，同时兼顾原有水平。
期末考核依据完成某公司网站的质量，兼顾原有水平。完成完成任务的质量，较好地反映了学生自主学习、协作学习、知识综合运用、拓展创新的能力。
（三）某公司网站制作说明
学生可根据自身能力选择相应的主题，公司或者企业的名称和内容可以虚构，网站中所有内容可以从网上获取，也可以自己设计。
（1）基础设计能力层次：（完成以下要求得分为60-85分）
要求：
●熟练使用常用网页制作工具设计网页
●熟练掌握CSS
●网站中应应用上述技术
●网站美观大方得体
●能正确使用JavaScript
（2）“高级”设计能力层次：（完成以下要求得分为85-100分）
要求：在完全实现基础设计能力层次后，追加以下要求
●熟练掌握JavaScript基本语法
●能完全理解网页中使用的“特效”
●掌握常用的网站管理和维护方法
●合理的使用静态网页设计的新技术
●*网站中可以适当运用新技术*（打*为可选内容，作为加分参考）
（四）项目实训文档写作说明
规范的文档资料是软件的一部分。高质量的文档对于发挥软件产品的效益、对于转让、变更、修改、扩充、使用文档具有重要的意义。
编写设计文档的目的是为了培养学生在制作、开发过程中，书写规范的文档资料的能力。学生在项目实训结束时提交一份文档，文档应该包括以下内容。
系统运行环境：运行系统所需要的软、硬件环境
概要设计：网站主题，网站规划，网站结构，网站风格、特色、网站结构图
详细设计：站点各板块详细介绍（功能、技术等）
网站的改进方法或升级方案
个人（组长、框架、编码、美工）主要负责部分说明
个人角色体会、获得的经验、自学并应用的新知识、今后努力的方向
（五）某公司网站作品评分说明
A--优秀：网站很好的运用了新技术
界面实用、美观、友好。
程序有一定难度。
文档清晰、完整。
设计报告逻辑性强，条理清晰，有独到的设计方法
B--良好：网站较好的运用了新技术界面友好。
程序有一定难度。
文档清晰、完整。
设计报告条理清晰。
C--中等：网站正确使用了一些新技术界面友好。
文档清晰、完整。
设计报告条理清晰。
D--及格：网站正确的运用了新技术界面友好。
文档完整。
设计报告编写缺乏条里。
E--不及格：浏览网页时，运行时错误较多。
界面不友好，浏览不方便。
文档、设计报告编写缺乏条里。
（六）某公司网站作品评分细则
序号一级指标二级指标分值
1需求分析充分、栏
目设置合理、功能
完善（15%）
调研对象完备，文档齐全，功能无遗漏4
主栏目/子栏目名称简洁，个数合理，层次分
明
4
各栏目归类明确、恰当，内容无交叉，无歧义3
有通用栏目，如日期显示/加入收藏/设为首页
/联系方式/友情链接等
2
主页、子页导航相同，方便浏览2
2主题鲜明，能体现
网站功能（15%）
主要栏目位置显著，一目了然5
主页内容紧扣主题，充分表达客户愿望6
主页内容从上向下、从左向右轻重有序，层次
感强
4
3页面布局（排版）
美观大方，有个性
（16%）
排版风格能体现行业特点，清新、大气、个性5
栏间距、行间距、图文间距恰当，图标、线条
精致
4
排版规范，各区域占地大小符合美学原理4
文字（含标题）的字体、字号、字色运用科学，
前景色/背景色互映生辉
3
4色彩搭配合理，能
表现主题，特色鲜
明（16%）
色彩选择科学，主色彩能充分体现网站主题6
主色/辅色搭配合理，轻重适宜，过度自然6
主页/子页色调统一，无太大反差4
5多媒体元素运用得
当，适合网络传输，
运行速度快。（12%）
多媒体元素个数恰当，能传达主题，文件格式
正确
3
图片清晰，大小适度3
动画精美，赏心悦目3视频播放流畅1网页特效不求多，但求合理2
6操作方便、适应不
同人群（8%）
页面长度、宽度适宜2
链接恰当（页内/页间链接、文字/图片链接等）3
栏目区别布置（隐式/明式，文字/图片，文字
/表格），输入/输出界面体选择现人性化
3
7方便后期开发与维
护（8%）
页面不过渡复杂，方便后台管理2
页面顶部、底部、菜单和若干通用模块以文件
方式代码共用
2
各栏目内容、各多媒体元素动态管理2
数据库、开发语言选择合理，注重跨平台性、
安全性、快捷性，方便升级
2
8内容健康、正确、
合法，链接准确
（10%）
文字、标点、格式正确3
文字内容、图片内容健康、合法3
链接准确，被链接对象亦符合本项要求4
合计一级指标二级指标30条100六、学时分配
序号实训内容
学习时数
备注
理论实训
1第1讲网页制作概要21 2第2讲网站的规划与设计21 3实训一站点的规划设计（书写网站策划方案）3 4第3讲PS设计网页版面基础21 5第4讲PS制作网页版面实例分析21 6第5讲PS设计网页LOGO3 7实训二设计案例网站LOGO3 8第6讲PS设计网页BANNER3 9实训三设计案例网站BANNER3 10第7讲PS设计网页导航条311实训四设计案例网站导航条3
12第8讲PS设计网页内容区域和网页版权声明3
13实训五设计案例网站网页内容和网页版权声明3
14第9讲PS网页版面切图3
15实训六对案例网站版面切图3
16第10讲了解制作网页的基础知识3
17第11讲制作第一个网页3
18第12讲网页的美化3
19实训七制作完成案例网站首页3
20第13讲网页模板的制作3
21第14讲使用模板创建网页3
22第15讲网页模板的编辑与更新3
23实训八案例网站模板的制作3
24第16讲认识网页的超级链接3
25第17讲为网页首页添加超链接3
26第18讲完成其他链接3
27实训九案例网页超级链接的添加3
28第19讲让网页动起来
3
实训十案例网站加入动态元素
29第20讲网页的交互功能
3
第21讲网站的发布与维护
30收取网站作品（随堂考试）21
1080
合计
90
七、说明
1.大纲的适用范围
本大纲适用于我院计算机网络技术专业高中起点三年制高职、计算机应用技术专业高中起点三年制高职。
2.教学建议
网页设计技术（一）课程是计算机网络技术专业的专业课程，它涉及的知识面广，因此要注重学生对已学专业知识的综合应用能力的培养。
3.前置课程：计算机信息处理、Flash动画制作、数据结构、图形图像处理、网络技术基础、INTERNET等。下载本文
