《网页设计与制作项目教程
（HTML+CSS+JavaScript）》课程教学大纲
（课程英文名称）
课程编号：
学分：5 学分
学时：76 学时（其中：讲课学时：50 学时上机学时：26 学时）
先修课程：计算机基础、计算机网络、计算机应用
后续课程：UI 设计、JavaScript 网页特效
适用专业：信息技术及其计算机相关专业
开课部门：计算机系
一、课程的性质与目标
《网页设计与制作项目教程（HTML+CSS+JavaScript）》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML 标记、CSS 样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解 HTML、CSS 及 JavaScript 语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路
课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间
操作相结合”。
三、教学条件要求
开发工具：Dreamweaver CS6
四、课程的主要内容及基本要求
项目1 网页制作基础知识
学习单元项目1 网页制作基础知识学时4学时
✧知识目标
1、了解 Web 标准及基本概念
学习目标
2、熟悉 HTML、CSS 及 JavaScript 语言的发展历史
✧技能目标
1、掌握 Dreamweaver 工具的基本操作
2、能够使用 Dreamweaver 创建简单的网页
知识点了解掌握重点难点认识网页√
网页相关的名词√
Web 标准√
HTML 语言简介√
学习内容CSS 语言简介√
JavaScript 语言简介√
常见浏览器√
Dreamweaver工具简介√
(界面和初始化)
创建第一个网页√
项目2 “说旅游”专题页制作
学习单元项目 2 “说旅游”专题页制作学时8学时
✧知识目标
1、掌握 HTML 文档结构
2、了解 HTML 文档头部相关标记
学习目标
3、熟悉 HTML 文本控制标记
4、掌握 HTML 图像标记
✧技能目标
1、掌握图文混排页面的制作技巧
2、学会制作图文混排页面
学习内容知识点了解掌握重点难点HTML 文档基本格式√
HTML 标记（单标记与双√
标记）
标记属性√√
HTML 文档头部相关标记√
标题和段落标记√
文本样式标记√
（<font></font>标记）
文本格式化标记√
特殊字符标记√
div 标记√√
常用图像格式√
切片√
【项目实现】：准备工作√
与页面布局
【项目实现】：制作头部√
模块
【项目实现】：制作“伊露√
岛”介绍模块
【项目实现】：制作“伊露√
岛”推荐模块
【项目实现】：制作“驴友√
评论”模块
【项目实现】：制作页脚√
模块
项目3 “网上花店”专题页制作
学习单元项目 3 “网上花店”专题页制作学时10学时
✧知识目标
1、了解 CSS 样式规则
2、掌握 CSS 字体样式及文本外观属性
学习目标
3、熟悉 CSS 复合选择器
4、掌握 CSS 层叠性、继承性与优先级
✧技能目标
1、掌握引入 CSS 样式表的不同方式
2、学会控制页面中的文本外观样式
知识点了解掌握重点难点CSS 样式规则√
学习内容引入 CSS 样式表（行内、
内嵌、链入）
√
CSS 基础选择器√CSS 字体样式属性√
CSS 文本外观属性√
CSS 定义背景颜√
CSS 复合选择器（标签指√
定、后代、并集）
CSS 层叠性与继承性√√
CSS 优先级√√
【项目实现】：布局及定√
义基础样式
【项目实现】：制作标题√
模块
【项目实现】：制作商品√
分类模块
【项目实现】：制作“热卖”√
模块
【项目实现】：制作品质√
保障及店主模块
项目4 “儿童摄影网”首页面制作
学习单元项目 4 “儿童摄影网”首页面制作学时12学时
✧知识目标
1、了解盒子模型的概念
2、掌握盒子的相关属性
学习目标
3、熟悉元素的类型与转换
4、掌握元素的浮动与定位
5、掌握清除浮动的方法
✧技能目标
1、能够使用 DIV 标记与浮动样式对页面进行布局
知识点了解掌握重点难点认识盒子模型√
边框属性√
内边距属性√
外边距属性√
背景属性√
盒子的宽与高√
学习内容元素的类型√
<span>标记√
元素的转换√
块元素垂直外边距的合√
并
元素的浮动属性√√
清除浮动√√
overflow 属性√
元素的定位属性√
学javascript前要学什么静态定位√
相对定位√
绝对定位√
固定定位√
z-index 层叠等级属性√
【项目实现】：布局及定√
义基础样式
【项目实现】：制作导航√
及 banner 模块
【项目实现】：制作最新√
动态模块
【项目实现】：制作样片√
欣赏模块
【项目实现】：制作页脚√
及悬浮框模块
项目5 “穿搭速递”首页面制作
学习单元项目 5 “穿搭速递”首页面制作学时8学时
✧知识目标
1、掌握无序列表、有序列表及定义列表
2、熟悉列表的嵌套
学习目标
3、掌握超链接标记
4、掌握链接伪类
✧技能目标
1、能够使用无序列表、有序列表及定义列表对页面进行布局
2、学会使用链接伪类控制页面中超链接的样式
知识点了解掌握重点难点无序列表<ul> √
有序列表<ol> √
定义列表<dl> √
列表的嵌套应用√
list-style 复合属性√
背景图像定义列表项目符√√
学习内容号
创建超链接（超链接标记√
a）
锚点链接√
链接伪类控制超链接√√
【项目实现】：布局及定√
义基础样式
【项目实现】：制作头部√

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。