《网页设计与制作项目教程（HTML+CSS+JavaScript）》（第2版）.doc

网页设计与制作项目教程（HTML+CSS+JavaScript）（第2版）课程教学大纲（课程英文名称）课程编号：学 分：5学分课 时：56课时 （其中：讲课42课时 上机14课时）先修课程：适用专业课程：电子商务、视觉传达、影视数媒一、 课程的性质与目标网页设计与制作项目教程（HTML+CSS+JavaScript）（第2版）是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。二、 课程设计思路和教学要求课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的升华与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。操作系统：Windows 7及以上版本开发工具：Dreamweaver CS6（可替换为VS Code/Hbuilder等）。三、 课程的主要内容及基本要求项目一 网页制作基础知识学习单元网页制作基础知识课时4课时学习目标² 知识目标了解Web标准，对网页的结构、表现、行为有一个基本的认识。熟悉HTML、CSS和JavaScript语言的发展历史。² 技能目标掌握Dreamweaver工具的基本操作。掌握Dreamweaver工具的初始化设置。学习内容知识点了解熟悉掌握重点难点网页的构成网页相关的名词Web标准HTML简介CSS简介JavaScript简介常见浏览器介绍Dreamweaver界面介绍Dreamweaver初始化设置Dreamweaver文档的基本操作创建第一个网页项目二 “博客”页面制作学习单元“博客”页面制作课时6课时学习目标² 知识目标掌握HTML文档基本格式，对HTML文档格式有一个基本的认识。了解HTML文档头部相关标签，知道一些常用头部标签的作用。² 技能目标掌握图像标签的用法，能够制作图文混排页面。掌握网页中文本的字体、字号和颜色的设置方法。学习内容知识点了解熟悉掌握重点难点HTML文档基本格式 HTML标签HTML标签的属性HTML标签的关系HTML文档头部相关标签页面格式化标签文本样式标签文本格式化标签特殊字符标签<div>标签常用图像格式图像标签相对路径和绝对路径切图【项目实现】：页面建设准备工作【项目实现】：制作“头部”模块【项目实现】：制作“博主简介”模块【项目实现】：制作“旅游随笔”模块【项目实现】：制作“驴友评论”模块【项目实现】：制作“页脚”模块项目三 “网上花店”专题页制作学习单元“网上花店”专题页制作课时8课时学习目标² 知识目标掌握CSS样式规则的特点，能够区分HTML属性和CSS样式的写法差异。掌握CSS层叠性、继承性、优先级等特点，能够清晰描述并举例说明。² 技能目标掌握引入CSS样式表的不同方式，能够在网页中引入CSS样式。掌握使用CSS样式控制网页中的文本外观的技巧。学习内容知识点了解熟悉掌握重点难点结构与表现分离CSS样式规则CSS样式表的引入CSS基础选择器CSS字体样式属性CSS文本外观属性CSS定义背景颜色CSS复合选择器CSS层叠性与继承性CSS优先级【项目实现】：页面建设准备工作【项目实现】：制作“标题”模块【项目实现】：制作“分类”模块【项目实现】：制作“热卖”模块【项目实现】：制作“页脚”模块项目四 “爱家居”企业网站首页制作学习单元“爱家居”企业网站首页制作课时8课时学习目标² 知识目标了解盒子模型的概念，能够举例描述盒子模型结构。掌握元素的类型，能够归纳不同元素类型的特点。熟悉常见的布局类型，能够总结不同类型布局的差异。² 技能目标掌握使用盒子模型相关属性设置不同的盒子模型样式的方法。掌握使用浮动和定位属性对页面进行布局的方法。掌握清除元素浮动的方法。学习内容知识点了解熟悉掌握重点难点认识盒子模型边框属性内边距属性外边距属性背景属性宽度属性和高度属性透明圆角阴影渐变元素的类型<span>标签元素的转换块元素垂直外边距的合并元素的浮动属性清除浮动overflow属性元素的定位属性静态定位相对定位绝对定位固定定位z-index层叠等级属性【项目实现】：面建设准备工作【项目实现】：制作导航及banner模块【项目实现】：制作“热门推荐”模块【项目实现】：制作“夏日生活”模块【项目实现】：制作“版权信息”模块和“悬浮框”模块项目五 “优课教育”网站首页面制作学习单元“优课教育”网站首页面制作课时8课时学习目标² 知识目标掌握无序列表、有序列表和定义列表的特点，能够区分它们之间的差异。掌握四种链接伪类的特点，能够区分不同链接伪类的作用。² 技能目标掌握列表嵌套方法，能够使用无序列表、有序列表及定义列表对模块进行排列。掌握创建超链接的方法，能够为网页添加超链接。熟悉常见的页面布局类型，能够使用这些布局类型完成简单的页面布局。学习内容知识点了解熟悉掌握重点难点无序列表有序列表定义列表列表的嵌套应用list-style复合属性背景图像定义列表项目符号创建超链接锚点链接链接伪类控制超链接【项目实现】：页面建设的准备工作【项目实现】：制作“导航模块”【项目实现】：制作“banner模块”和“课程分类模块”【项目实现】：制作“精品展示模块”【项目实现】：制作“版权信息模块”项目六 “千年之恋”注册页面制作学习单元“千年之恋”注册页面制作课时8课时学习目标² 知识目标了解表格相关标签，能够区分不同表格标签的作用。熟悉表单的结构，能够知道各部分表单结构的作用。掌握不同类型表单控件的特点，能够区分它们之间的差异。² 技能目标掌握CSS控制表格样式的方法，能够在网页中设置不同的表格样式。掌握CSS控制表单样式的方法，能够在网页中设置不同的表单样式。学习内容知识点了解熟悉掌握重点难点表格的创建<table>标签的属性<tr>标签的属性<td>标签的属性<th>标签的属性CSS控制表格边框CSS控制单元格边距CSS控制单元格的宽高初识表单创建表单input控件textarea控件select控件新增input控件类型新增input控件属性CSS控制表单样式【项目实现】：页面建设准备工作【项目实现】：制作“头部和导航”模块【项目实现】：制作“banner和内容”模块【项目实现】：制作“页脚”模块项目七 “视频8”首页制作学习单元“视频8”首页制作课时6时学习目标² 知识目标了解网页中常见的音频和视频格式，能够了解不同音频和视频格式的兼容性。² 技能目标掌握网页中音频和视频的嵌入技术，能够在网页中嵌入音频和视频。掌握网页中添加过渡的方法，能够在网页中设置过渡效果。掌握网页中添加变形的方法，能够在网页中设置变形效果。掌握网页中添加动画的方法，能够在网页中设置动画效果。学习内容知识点了解熟悉掌握重点难点音频、视频嵌入技术概述嵌入视频嵌入音频浏览器对音视频文件的兼容性控制视频宽高transition-property属性transition-duration属性transition-timing-function属性transition-delay属性transition属性2D变形3D变形keyframes规则animation-name属性animation-duration属性animation-timing-function属性animation-delay属性animation-iteration-count属性animation-direction属性animation属性【项目实现】：页面建设准备工作【项目实现】：制作“引导栏”模块【项目实现】：制作“导航”模块【项目实现】：制作“banner”模块【项目实现】：制作“内容”模块【项目实现】：制作“页脚”模块项目八 “甜蜜约会”首页制作学习单元“甜蜜约会”首页制作课时8时学习目标² 知识目标熟悉JavaScript的基础知识，包括JavaScript的基本语法和引入方式。了解常用的数据类型和运算符种类。了解流程控制语句的语法格式和判定逻辑。熟悉数组的常用属性和方法。² 技能目标掌握变量的用法，能够声明变量，并为变量赋值。认识函数，掌握调用函数的方法。认识对象，掌握创建对象和删除对象的方法。掌握调用JavaScript事件的方法。学习内容知识点了解熟悉掌握重点难点JavaScript简介JavaScript引入方式JavaScript基本语法第一个简单的JavaScript程序变量的声明变量的赋值数据类型运算符条件语句循环语句跳转语句函数的定义函数的调用函数中变量的作用域认识对象创建对象和删除对象属性内置对象初识数组创建数组数组的常用属性和方法二维数组BOM对象DOM对象事件和事件调用常用的JavaScript事件【项目实现】：页面建设准备工作【项目实现】：制作“头部及导航”模块【项目实现】：制作“banner”模块【项目实现】：制作“简介”模块【项目实现】：制作“推荐”模块【项目实现】：制作“页脚”模块四、 课时分配章目讲课上机合计项目1 网页制作基础知识4/4项目2 “博客”页面制作426项目3 “网上花店”专题页制作628项目4 “爱家居”企业网站首页制作628项目5 “教育培训”网站首页面制作628项目6 “千年之恋”注册页面制作628项目7 “视频8”首页制作426项目8 “甜蜜约会”首页制作628合计421456五、 考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、实验和上机成绩（20%）。六、 选用教材和主要参考书本大纲是根据黑马程序员编著的教材网页设计与制作项目教程（HTML+CSS+JavaScript）（第2版）所设计的。七、 大纲说明本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，要求学生动手完成指定的程序设计或验证。撰写人： 审定人：批准人： 执行时间：