《网页版式设计》教学大纲
湖南应用技术学院
《网页设计与制作》课程
教
学
大
纲
信息工程学院
《网页设计与制作》教 学（实 验） 大 纲
课程代码：59010102 开课学期：2016-2017 学年第二 学期
适用专业：计算机应用技术、计算机网络专业 学 时： 72
编写教师：刘鑫 学 分：4
审 核：
第一部分 说 明
一、课程的性质、作用
网页设计与制作课程的实践性非常强，属于技术类的课程，其知识的理解与技术的掌握需要大量的实验的配合。整个实验的设计是根据课程内容而展开的，主要分为两大部分：章节实验和课程设计。本课程包含XHTML技术、CSS技术，及Dreamweaver等设计制作工具，每一部分都有配套实验，其目的是帮助学生消化和掌握相关的知识和技术。通过实验学生应能熟练使用Dreamweaver工具设计制作网站网页，能使用CSS技术进行网页布局，并能利用Dreamweaver发布到Web服务器上。
二、课程的任务与基本要求
学生根据自己的特长、喜好自定主题，设计并制作网站，但应是健康、积极的内容，不应是庸俗、反动的内容。具体要求如下：
1． 每人一份作业，相互之间不能相同。
2． 主题要鲜明，尽量做到小而精，内容要充实；图文并茂，动静结合；配色舒适美观，应突出主色，文字大小适中，风格与主题相适应。
3． 一定要包含下面的知识点：
图像、超链接、字幕滚动、表格（不能用于布局）、CSS布局统一风格。
4． 利用Dreamweaver MX设计排版全部网页。
5． 网页的结构至少至二级页面，且二级页面不能为空，应有内容。
三、教学方法建议
讲授法
网上学习法
小组学习法
案例法
三、本课程与其它课程的关系
本课程是计算机应用技术专业的基础核心专业课，为后续开设的《电子商务》、《SQL数据库管理》、《网页美工》、《ASP.NET》、《网站规划与建设》等都打下知识基础。
四、本课程与专业核心技术、能力培养的关系及作用
本课程是网站前台设计的入门课程，为后续《ASP.NET》等课程打下学习基础。学生学完本课程之后能够：1、掌握构建网站的基本知识；2、能够熟练使用Dreamweaver MX的操作环境，掌握HTML的常用语法规则，CSS样式的用法及DIV布局的方法；3、并能够利用Dreamweaver的强大功能制作出精美的网页，同时能独立创建并管理网站。
第二部分 本 文
一、基本内容与学时分配
|
单元 |
项目 |
任务 |
课时 |
教学目的 |
作业设置 |
|
1 |
网站开发入门 |
1.了解网站开发流程 |
2 |
了解网站开发的基本流程和相关知识；了解DM工作环境及使用方法，能够建立站点及新建网页 |
项目实训（P26） |
|
2.创建DM站点 |
|||||
|
3.制作简单的HTML+CSS页面 |
|||||
|
4.项目实训－制作简单的页面 |
2 |
了解HTML和CSS在网页制作中的作用，了解WEB标准的概念，能够用HTML标签创建简单的网页 |
|||
|
2 |
HTML标签与CSS样式基础 |
1.制作鲜花导购网页的结构－HTML标签 |
4 |
掌握HTML的语法规则；掌握DM中插入文字、图片、列表、超链接等HTML元素的方法以及HTML标签的写法 |
项目实训－制作个人主页（P57） |
|
2.修饰鲜花导购网页－CSS样式基础 |
4 |
掌握CSS语法规则；掌握CSS的3种选择器的使用，能够使用CSS对网页元素进行简单修饰 ；掌握在页面中引入CSS的4种方式，能够根据需要选择合适的方式将CSS引入到网页中。 |
|||
|
3.项目实训－制作个人主页 |
2 |
|
|||
|
3 |
使用CSS设置文字效果 |
1.制作个人博客首页－设置文字样式 |
2 |
掌握CSS属性对网页文字进行修饰，包括文字字体、文字大小、文字加粗及文字颜色等 |
制作企业新闻网（P81） |
|
2.制作个人博客子页－设置段落和其他文字样式 |
2 |
使用CSS属性设置文本和段落格式 |
|||
|
3.制作个人博客排行榜－设置列表样式 |
2 |
掌握CSS列表样常用属性；掌握如何清除列表的默认边距；<DIV>与<SPAN>的区别；块级元素与行内元素的区别 |
|||
|
4 |
使用CSS设置图片效果与网页背景 |
1.制作休闲文章页面－设置图片效果图
|
2 |
运用CSS属性对网页背景和插入的图片效果进行设置，包括大小、边框、对齐方式、图文混排 |
制作旅游景点介绍网页（P98） |
|
2.制作童话故事页面－设置网页元素背景 |
2 |
掌握设置背景颜色和背景图片的CSS样式属性，能够对背景图片进行各种控制；能够为网页中的各元素，如<div>、<body>、<p>等标签设置背景。 |
|||
|
5 |
使用CSS设置导航栏 |
1.制作简单纵向导航栏 |
2 |
掌握将列表标签设置为导航栏，以及使用CSS美化列表的方法 |
制作一个纵向列表菜单。（P122） |
|
2.制作简单横向导航栏 |
1 |
掌握使用CSS转换列表的方法，制作横向导航栏 |
制作一个横向菜单。（P123） |
||
|
3.制作带图片效果的横向导航栏 |
1 |
掌握带有背景图片变换效果的横向导航栏的制作 |
|||
|
4.制作带下拉菜单的横向导航栏 |
2 |
掌握下拉菜单的导航栏制作方法 |
制作一个带有下拉菜单的仿京东商品列表的横向菜单（P123） |
||
|
6 |
制作表格并使用CSS美化 |
1.制作2012年世界杯分组表－构建和美化表格 |
2 |
掌握与表格相关的HTML标签，能够在网页中使用表格来显示数据 |
设计一个图6-19所示的表格（P143） |
|
2.制作日历表格－使用CSS控制表格进阶 |
2 |
掌握设置表格样式的CSS属性，能够使用CSS美化表格 |
设计一个图6-20所示的表格（P143） |
||
|
7 |
制作表单并使用CSS美化 |
1.制作注册页面－表单的HTML结构 |
4 |
掌握与表单相关的HTML标签，能够根据需要在网页中插入表单标签 |
制作快递信息输入页面(P167) |
|
2.美化注册页面－使用CSS控制表单 |
2 |
掌握设置表格样式的CSS代码，能够使用CSS对表单进行美化 |
|||
|
8 |
CSS与浏览器兼容问题 |
1.无序列表的兼容性 |
0.2 |
1.掌握兼容性的相关概念，了解各类浏览浏览网页时常出现的问题； 2.掌握浏览器的相关标准，能设计出合理的、兼容性好的CSS样式； 3.了解与兼容性关的CSS问题（以IE和火狐为例），能够顺利解决网页出现的各类兼容性问题。 |
|
|
2.浮动在IE下产生的双倍距离 |
0.3 |
||||
|
3.在IE6中图片下方有空隙产生 |
0.3 |
||||
|
4.3像素问题 |
0.2 |
||||
|
5.浏览器不能自适应高度 |
0.5 |
||||
|
6.margin值加倍问题 |
0.5 |
||||
|
9 |
CSS标准流布局－制作企业网站的新闻显示页面 |
1.对页面进行整体布局 |
2 |
掌握标准流的基本概念；掌握盒子模型的基本概念 |
制作博客网站日志页面（P202） |
|
2.制作页头部分－标准流布局概念 |
2 |
掌握块元素和行内元素的区别；掌握设置元素边框、边界、填充和宽度等控制大小和间距的CSS属性。 |
|||
|
3.制作新闻正文显示部分 |
2 |
能够对整个页面进行HTML结构设计；能够让页面整体居中，以及对整体页面及页面各局部的大小进行控制；能够计算每个元素所占的宽度。 |
制作企业简介页面（P202） |
||
|
10 |
CSS浮动布局－制作企业网站新闻列表页面 |
1.对页面进行整体布局－浮动布局概念 |
3 |
掌握浮动布局的基本原理，浮动元素盒子模型的计算，float和clear属性，浮动的要点，以及常用的浮动布局方法等。 |
制作个人文集页面（P231） |
|
2.制作搜索栏目 |
1 |
掌握搜索栏目的制作，进一点认识浮动的基本原理 |
|||
|
3.制作新闻栏目 |
1 |
进一步掌握浮动的使用和其他方式进行网页布局 |
制作博客网站主页（P232） |
||
|
4.制作新闻列表 |
1 |
||||
|
11 |
CSS定位布局－制作企业网站首页 |
1.对页面进行整体布局－CSS定位属性 |
2 |
认识CSS中的定位属性；掌握CSS相对定位，绝对定位；认识元素的堆叠顺序、溢出和剪裁。 |
制作博客网站日志页面（P258） |
|
2.制作图片新闻栏目 |
2 |
进一步学习用绝对定位、相对定位和浮动法 |
制作学校网站主页（P259） |
||
|
3.制作新闻列表栏目 |
1 |
||||
|
4.制作企业首页的其他栏目 |
1 |
||||
|
12 |
综合应用－制作婚礼策划机构首页（6课时） |
1.搭建页面整体框架 |
|
|
|
|
2.制作网页头部 |
|
|
|
||
|
3.制作网页导航部分 |
|
|
|
||
|
4.制作主体内容的上面部分 |
|
|
|
||
|
5. 制作主体内容的中间部分 |
|
|
|
||
|
6. 制作主体内容的下面部分 |
|
|
|
||
|
7.制作友情链接部分 |
|
|
|
||
|
8.制作网页底部 |
|
|
|
||
|
13 |
综合应用－制作海南旅游网首页（6课时） |
1.搭建页面整体框架 |
|
|
|
|
2.制作网页头部 |
|
|
|
||
|
3.制作主体内容的上面部分 |
|
|
|
||
|
4. 制作主体内容的下面部分 |
|
|
|
||
|
5.制作友情链接栏目 |
|
|
|
||
|
6.制作页面底部 |
|
|
|
二、技术能力培养目标、措施、步骤
三、课程实验
（一）实验仪器设备、主要技术指标及配置要求
|
仪器设备名称 |
主要技术指标（或型号规格） |
配套数 |
备注 |
|
装有网页三剑客的PC机一台 |
|
56 |
|
（二）实验项目一览表
|
序 号 |
实验名称 |
内容提要 |
实验 要 求 |
实验 类型 |
实验时数 |
每组 人数 |
所在实验室名称 |
备注 |
|
1 |
项目实训 |
制作简单网页（P26） |
必做 |
验证 |
1 |
12 |
501 |
|
|
2 |
项目实训 |
制作个人主页（P57） |
必做 |
设计 |
2 |
12 |
|
|
|
3 |
项目实训 |
制作企业新闻网（P81） |
必做 |
综合 |
2 |
12 |
501 |
|
|
4 |
项目实训 |
制作旅游景点介绍网页（P98） |
必做 |
设计 |
2 |
12 |
501 |
|
|
5 |
项目实训 |
制作一个纵向列表菜单。（P122） |
必做 |
创新 |
2 |
12 |
|
|
|
6 |
项目实训 |
制作一个横向菜单（P123） |
必做 |
创新 |
2 |
12 |
501 |
|
|
7 |
项目实训 |
制作一个带有下拉菜单的仿京东商品列表的横向菜单（P123） |
选做 |
创新 |
2 |
12 |
|
|
|
8 |
项目实训 |
制作自己网站的导航条 |
必做 |
综合 |
2 |
12 |
|
|
|
9 |
项目实训 |
设计一个图6-19所示的表格（P143） |
必做 |
设计 |
2 |
12 |
501 |
|
|
10 |
项目实训 |
设计一个图6-20所示的表格（P143） |
必做 |
设计 |
2 |
12 |
501 |
|
|
11 |
项目实训 |
制作快递信息输入页面(P167) |
必做 |
设计 |
2 |
12 |
501 |
|
|
12 |
项目实训 |
制作博客网站日志页面（P202） |
必做 |
综合 |
2 |
12 |
501 |
|
|
13 |
项目实训 |
制作企业简介页面（P202） |
必做 |
综合 |
2 |
12 |
501 |
|
|
14 |
项目实训 |
制作个人文集页面（P231） |
必做 |
设计 |
2 |
12 |
501 |
|
|
15 |
项目实训 |
制作博客网站主页（P232） |
选做 |
设计 |
2 |
12 |
501 |
|
|
16 |
项目实训 |
制作博客网站日志页面（P258） |
必做 |
综合 |
2 |
12 |
501 |
|
|
17 |
项目实训 |
制作学校网站主页（P259） |
选做 |
综合 |
2 |
12 |
501 |
|
|
18 |
期末作品 |
个人网站设计 |
必做 |
综合 |
2 |
12 |
501 |
|
（三）综合性、设计性、研究创新性实验介绍
实验序号 实验名称（X X 性）
一、实验目的
学生掌握HTML、CSS、DIV的基本技术，通过本学期多个经典网页布局案例，包括企业网站、博客网站、学校网站、婚礼策划网站和旅游网站相关页面的制作，让学生学会网页布局的精髓，为学心HTML5和CSS3打下夯实的基础。
二、实验内容与基本要求
本门课程安排了十三个项目实训，项目一和项目二：主要学习HTML+CSS网页设计的基础知识，包括见面设计软件Dreamweaver的使用方法、HTM和CSS基本概念、HTML语法基础、HTML常用标签、CSS的选择器类型、在HTML文档中引入CSS样式的方法等。
项目三至项目八：学习使用CSS设置和美化网页中文字、图片、背景、超链接、导航栏、表格和表单的方法，以及如何解决灵活应用这些属性设置网页元素的外观。
项目九至项目十一：掌握使用CSS+DIV对网页进行布局的方法，包括标准流布局、浮动布局和定位布局等。其中，读者除了需要掌握相关HTML标签和CSS属性外，还应了解盒子模型的概念，掌握计算盒子模型大小和位置的方法。
项目十二和项目十三：安排了两个综合实例，以帮助学生总结前面所学知识，能够综合应用HTML和CSS各种技术制作出符合实际应用需要的网页。
三、主要仪器设备材料
装有网页三剑客的PC机一台，学生最好备有U盘。
四、习题与作业
习题和作业以教材中的十三个项目为素材，依次完成练习。
五、课程考核形式与成绩评定
2016-2017年第二学期期末考核（考查）方案
课 程： 网页版式设计》 适考班级： 计应1601~1603、计网1601
制定教师： 刘鑫 考核方式： 上交作品 （上交作品、面试、考查等）
|
本课程要求达到的知识、能力、素质目标： |
|
|
以现代职业教育理念为指导，通过先进的教学手段，使学生充分掌握网页设计的各种技能。如：网页布局，DIV+CSS,标题及小图片的制作等多个方面的理论知识并结合实例进行设计，加深对网页设计的理解，让学生有能力制作或参与制作中小型企业网站。 |
|
|
考核（考查）内容与要求 制定《网页版式设计》期末考查试卷，本试卷包含本课程各章知识要点，主要有网页布局技巧、创建网站模板、网页内容填充和处理、用CSS设置网站各元素的格式、网站上传、管理和维护等多个方面的理论知识并结合实例进行设计等。 |
|
|
评分标准： |
|
|
100-90分 |
完成个人主题网站的设计，主题新颖、健康，色彩搭配合理，超链接成功，知识点应用全面(DIV布局，CSS设计样式)。 |
|
90-80分 |
完成个人主题网站的设计，色彩搭配合理，超链接成功，用Photoshop制作标题和装饰图片，首页布局及其他子页设计完整，无死链。 |
|
80-70分 |
完成个人主题网站的设计，主导航条上的链接成功，内容完整。. |
|
70-60分 |
完成个人网站首页的设计，DIV布局合理，和CSS命名合理、样式应用合理。 |
|
60分以下 |
不能掌握本课程的基本知识。以下三种情况属非正常考试：A、不交作品；B、复制别人作品；C、下载网上作品。 |
|
考核安排： 教学周的最两次课安排考查，以小组为单位分批考查，最后一次课公布作品评分结果，并点评作品。 |
|
第三部分 附 录
一、教学参考书
[1] HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通
明日科技主编，清华大学 出版社(第1 版），， 2016 年 10 月。
[2] HTML CSS JavaScript网页设计与制作 李东博主编，清华大学出版社，2016年5月
二、建立课程网站
正在整理完善实训素材，争取本学期末完成课程网站设计。
说明：①纯理论课程删除“第二部分本文”中的“课程实验”部分。并重新编标题号。
纯实验课程删除“第二部分本文”中的“基本内容与学时分配”部分。并重新编标题号。
有实验的课程“三性”实验比例合格课程达30%以上、优质课程达50%以上、精品课程达70%以上。
④大纲审核人为教研（实验）室主任和一名具有副高以上职称的教师。
集中实践环节教学大纲
《 网页版式设计》实 践 教 学 大 纲
课程代码：59010102 开课学期：2016-2017 学年第二 学期
适用专业：计算机应用技术、计算机网络技术专业 学 时： 18 周
编写教师：刘鑫 学 分： 4
审 核：
一、课程与技术、能力培养的关系、作用
学生根据自己的特长、喜好自定主题，设计并制作网站，但应是健康、积极的内容，不应是庸俗、反动的内容。具体要求如下：
a) 每人一份作业，相互之间不能相同。
b) 主题要鲜明，尽量做到小而精，内容要充实；图文并茂，动静结合；配色舒适美观，应突出主色，文字大小适中，风格与主题相适应。
c) 一定要包含下面的知识点：
图像、超链接、字幕滚动、表格（不能用于布局）、CSS布局统一风格。
d) 利用Dreamweaver MX设计排版全部网页。
e) 网页的结构至少至二级页面，且二级页面不能为空，应有内容。
二、课程内容与基本要求
本门课程安排了十三个项目实训，项目一和项目二：主要学习HTML+CSS网页设计的基础知识，包括见面设计软件Dreamweaver的使用方法、HTM和CSS基本概念、HTML语法基础、HTML常用标签、CSS的选择器类型、在HTML文档中引入CSS样式的方法等。
项目三至项目八：学习使用CSS设置和美化网页中文字、图片、背景、超链接、导航栏、表格和表单的方法，以及如何解决灵活应用这些属性设置网页元素的外观。
项目九至项目十一：掌握使用CSS+DIV对网页进行布局的方法，包括标准流布局、浮动布局和定位布局等。其中，读者除了需要掌握相关HTML标签和CSS属性外，还应了解盒子模型的概念，掌握计算盒子模型大小和位置的方法。
项目十二和项目十三：安排了两个综合实例，以帮助学生总结前面所学知识，能够综合应用HTML和CSS各种技术制作出符合实际应用需要的网页。
三、集中实践场所及相关设施要求
1、实践场所选择
东校区实训大楼501.503.401机房
2、设施要求
以机房为单位局域网连接，可以用红蜘蛛等软件进行广播教学，工作站要求有网页三剑客及Photoshop软件。
四、课程考核形式与成绩评定
五、2016-2017年第二学期期末考核（考查）方案
六、
七、课 程： 网页版式设计》 适考班级： 计应1601~1603、计网1601
八、制定教师： 刘鑫 考核方式： 上交作品 （上交作品、面试、考查等）
九、
|
本课程要求达到的知识、能力、素质目标： |
|
|
以现代职业教育理念为指导，通过先进的教学手段，使学生充分掌握网页设计的各种技能。如：网页布局，DIV+CSS,标题及小图片的制作等多个方面的理论知识并结合实例进行设计，加深对网页设计的理解，让学生有能力制作或参与制作中小型企业网站。 |
|
|
考核（考查）内容与要求 制定《网页版式设计》期末考查试卷，本试卷包含本课程各章知识要点，主要有网页布局技巧、创建网站模板、网页内容填充和处理、用CSS设置网站各元素的格式、网站上传、管理和维护等多个方面的理论知识并结合实例进行设计等。 |
|
|
评分标准： |
|
|
100-90分 |
完成个人主题网站的设计，主题新颖、健康，色彩搭配合理，超链接成功，知识点应用全面(DIV布局，CSS设计样式)。 |
|
90-80分 |
完成个人主题网站的设计，色彩搭配合理，超链接成功，用Photoshop制作标题和装饰图片，首页布局及其他子页设计完整，无死链。 |
|
80-70分 |
完成个人主题网站的设计，主导航条上的链接成功，内容完整。. |
|
70-60分 |
完成个人网站首页的设计，DIV布局合理，和CSS命名合理、样式应用合理。 |
|
60分以下 |
不能掌握本课程的基本知识。以下三种情况属非正常考试：A、不交作品；B、复制别人作品；C、下载网上作品。 |
|
考核安排： 教学周的最两次课安排考查，以小组为单位分批考查，最后一次课公布作品评分结果，并点评作品。 |
|
十、教学参考书
[1] HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通 明日科技主编，清华大学 出版社(第1 版），， 2016 年 10 月。
[2] HTML CSS JavaScript网页设计与制作 李东博主编，清华大学出版社，2016年5月
《网页版式设计》考 试 大 纲
课程代码：59010102 学 时： 18 周
适用专业：计算机应用技术、计算机网络技术专业 学 分： 4
编写教师：刘鑫 审 核：
一、课程的性质和目的
制定《网页版式设计》期末考查试卷，本试卷包含本课程各章知识要点，主要有网页布局技巧、创建网站模板、网页内容填充和处理、用CSS设置网站各元素的格式、网站上传、管理和维护等多个方面的理论知识并结合实例进行设计等。
二、考试要求
考试类型：考查(考试、考查）； 考试总分： 100 分
考试方法：开卷 (开卷、闭卷）； 考试时间：120分钟（现场答辩）
三、考核知识点
|
编 号
|
知识点 |
知识点简介 |
能力层次 |
|
1 |
网站开发入门 |
HTML的基本语法 |
理解 |
|
1.1 |
创建站点 |
网站站点的建立、复制、删除、移动等。 |
理解 |
|
1.2 |
HTML基本语法 |
HTML常见标签 |
应用 |
|
2 |
HTML标签与CSS样式 基础 |
学习HTML标签及CSS层叠样式表的类型 |
应用 |
|
2.1 |
HTML常用标签 |
h1~h6,hr,ul,img,a |
识记 |
|
2.2 |
样式及选择器的类型 |
样式的类型包括行内样式、内部样式、链接样式和导入样式。选择器的类型包括标签、ID，class等 |
应用 |
|
3 |
设置文字效果 |
设置文字字体、字号、颜色及段落样式 |
应用 |
|
4 |
设置图片效果及网页背景 |
设置图片大小、对齐方式、图文混排 |
应用 |
|
5 |
设置导航栏 |
制作纵向导航栏、横向导航栏、下拉菜单、TAB菜单（选做） |
应用 |
|
6 |
制作表格及美化 |
表格元素的标签及设计表格样式 |
应用 |
|
7 |
制作及美化表单 |
表单元素的标签及设计表单样式 |
综合 |
|
8 |
CSS与浏览器兼容问题 |
解析各种BUG |
理解 |
|
9 |
CSS标准流布局 |
DIV标签、盒子模型 |
应用 |
|
10 |
CSS浮动布局 |
Float和clear属性的应用 |
应用 |
|
11 |
CSS定位布局 |
CSS中的相对定位和绝对定位 |
应用 |
注：1、能力层次为“识记”、“理解”、“应用”、“综合”四个层次；
2、表格不够可自行扩充。
四、教学参考书
[1] HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通
明日科技主编，清华大学 出版社(第1 版），， 2016 年 10 月。
[2] HTML CSS JavaScript网页设计与制作 李东博主编，清华大学出版社，2016年5月
说明：大纲审核人为教研（实验）室主任和一名具有副高以上职称的教师。
