HTML5+CSS3 网站设计基础教程 》课程教学大
纲
（课程英文名称）
课程编号： 0011
学 分： 5 学分
学 时： 76 学时 （其中：讲课学时： 47 学时 上机学时： 26 学时） 先修课程 ：计算机基础、计算机网络、计算机应用 后续课程 ： UI 设计、 JavaScript 网页特效 适用专业：信息技术及其计算机相关专业 开课部门：计算机系
一、课程的性质与目标
《HTML5+CSS网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网 页基础、HTML
标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能 够了解网页web发展历史及其未来方向， 熟悉网页设计流程、 掌握网络中常见的网页布局效 果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路
课程设计理念： 高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面 的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。 以能力的培养为重点， 以就业为导向， 培养学生具备职业岗位所需的职业能力， 职业生涯发 展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路： 基于工作过程开发课程内容， 以行动为导向进行教学内容设计， 以学生 为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。 教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间 操作相结合” 。
三、教学条件要求
开发工具：Dreamweaver CS6
四、课程的主要内容及基本要求
第一章初识HTML5
学习单元 初识HTML5 1. 学时 10学时 了解HTML5发展历程 理解HTML5浏览器支持情况 熟悉HTML5基本语法，掌握HTML5语法新特性。 重点 学习目标 2. 3. 4. 掌握HTML5相关标记及属性，能够制作简单的网页页面。 知识点 了解 掌握 HTML5发展历史 HTML5的优势 HTML5浏览器支持情况 难点 V V V 创建第一个HTML5页面 HTML5文档基本格式 HTML5语法 HTML标记 V V V V V V 标记的属性 学习内容 HTML5文档头部相关标记 标题和段落标记 文本格式化标记 特殊字符标记 常用图像格式 V V V V 图像标记 绝对路径和相对路径 V V 创建超链接 锚点链接 V V V 第二章HTML5页面元素及属性
学习单元 HTML5页面兀素及属性 1. 2. 学时 6学时 掌握结构兀素的使用，可以使页面分区更明确。 理解分组元素的使用，能够建立简单的标题组。 掌握页面交互兀素的使用，能够实现简单的交互效果。 理解文本层次语义兀素，能够在页面中突出所标记的文本内容。 掌握全局属性的应用，能够使页面兀素实现相应的操作。 了解 学习目标 3. 4. 5. 学习内容 知识点 ul兀素 掌握 重点 难点 V
ol兀素 dl兀素 列表的嵌套应用 header兀素 nav兀素 article 兀素 secti on 兀素 footer 兀素 figure 禾口 figcaption 元 素 V V V V V V V V V V V V V V hgroup兀素 details 禾口 summary 兀素 progress 兀素 meter兀素 time兀素 mark兀素 cite 兀素 draggable 属性 hidden属性 spellcheck 属性 conten teditable 属性 V V V V V V V 第三章CSS3入门
学习单元 CSS3入门 1. 学时 8学时 了解CSS3的发展历史以及主流浏览器的支持情况。 掌握CSS基础选择器，能够运用 CSS选择器疋义标记样式。 熟悉CSS文本样式属性，能够运用相应的属性定义文本样式。 理解CSS优先级，能够区分复合选择器权重的大小。 了解 掌握 学习目标 2. 3. 4. 知识点 CSS3概述 CSS3发展历史 CSS3浏览器支持情况 CSS样式规则 重点 难点 V V V V 学习内容 弓1入CSS样式表 CSS基础选择器 V V V V 字体样式属性 文本外观属性 V V V V CSS层叠性和继承性 CSS优先级 V 第四章CSS3选择器
学习单元 CSS3选择器 1. 学时 8学时 掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的兀素 添加样式。 学习目标 2. 3. 4. 5. 理解关系选择器的用法，能够准确判断元素与元素间的关系。 掌握常用的结构化伪类选择器，能够为相冋名称的兀素定义不冋样式。 掌握伪兀素选择器的使用，能够在页面中插入所需要的文字或图片内容。 重点 掌握CSS伪类，会使用CSS伪类实现超链接特效。 知识点 了解 掌握 E[attA=value] 难点 属性选择 V V V V V V 器 E[att$=value]属性选择 器 E[att*=value]属性选择 器 子代选择器（＞） 兄弟选择器（+、~） :root 选择器 :not选择器 :only-child 选择器 V V 学习内容 :first-child V V 和:last-child :n th-child( n) 选择器 V 和:n th-last-child( n) 择器 选 V :n th-of-type( n) 禾口:n th-last-of-type( n) 选择器 :empty选择器 V :target 选择器 V :before 选择器 :after 选择器 V V V V V 链接伪类 第五章css盒子模型
学习单元 CSS盒子模型 1. 学时 8学时 掌握盒子的相关属性，能够制作常见的盒子模型效果。 掌握背景属性的设置方法，能够设置背景颜色和图像。 理解渐变属性的原理，能够设置渐变背景。 熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。 了解 学习目标 2. 3. 4. 知识点 学习内容 掌握 重点 难点 认识盒子模型
盒子的宽与高 边框属性 边距属性 box-shadow 属性 box-siz ing 属性 V V V V V V V V 设置背景颜色 设置背景图像 背景与图片不透明度的设 置 V V 设置背景图像平铺 设置背景图像的位置 设置背景图像固定 设置背景图像的大小 设置背景的显示区域 设置背景图像的裁剪区域 设置多重背景图像 背景复合属性 V V V V V V V V V 线性渐变 径向渐变 重复渐变 第六章浮动与定位
学习单元 浮动与定位 1. 学时 8学时 理解兀素的浮动，能够为兀素设置浮动样式。 熟悉清除浮动的方法，可以使用不同方法清除浮动。 重点 难点 学习目标 2. 3. 掌握兀素的疋位，能够为兀素设置常见的疋位模式。 知识点 了解 掌握 兀素的浮动属性float 清除浮动 overflow 属性 V V V V V 兀素的疋位属性 静态定位static V 学习内容 相对定位 relative 绝对定位 absolute 固定定位 fixed z-index层叠等级属性 V V V V V V 兀素的类型
HTML5+CSS3网站设计基础教程_教学大纲
