(完整版)《HTML5+CSS3网站设计基础教程》_教学大纲
《HTML5+CSS3网站设计基础教程》_教学大纲
《HTML5+CSS3网站设计基础教程》课程教学大纲（课程英文名称）课程编号：201601210011学分：5学分学时：76学时（其中：讲课学时：47一、课程的性质与目标《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。
开发工具：DreamweaverCS6第一章初识HTML5第二章HTML5页面元素及属性第四章CSS3选择器背景与图片不透明度的设√置设置背景图像平铺√设置背景图像的位置√设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变√Array第七章表单的应用textarea元素√select元素√datalist元素√keygen元素√output元素√CSS控制表单样式√√第八章多媒体技术?animation-duration属性√animation-timing-function√属性animation-delay属性√animation-iteration-count√属性animation-direction属性√animation属性√第十章实战开发—制作电商网站首页面76学时合计47学时29学时六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
html5+css3课件
1.8 html：有含义的标记
html 描述的是网页内容的含义， 既语义。语义化的html指那些使用最 恰当的html元素进行标记的内容，在 标记的过程中并不关心内容显示。 语义化html的原因： 1 、提升访问性和互操作性（内容对 于借助辅助技术的残障访问者是可访 问的，同时对于台式机、手机、平板 电脑及其他设备上的浏览器都是可访 问的。 2、提升搜索引擎优化的效果。 3 、使维护代码和添加样式变得容易 。 4、使代码更少，页面加载更快。
1.9 浏览器对网页的默认显示效果
每个web浏览器都有一个内置的css文件（一张样式表），它决定了每 个HTML元素的默认样式，可以自己创建css覆盖这些样式。 通常标题、段落和article这样的元素从新行开始显示，而短语内容（ 如em、a和small)则与外围内容的同一行显示。
在一个网页中，我们通常可以看到的不只是文字，还有图像和一些可 以点击的链接，外部文件（如图像）实际上并没有放在html文件中，而 是单独保存的，页面只是简单地引用了这些文件。
1.6 文件名和文件夹
1、文件名采用小写字母： mywebpage.html 2、使用正确的扩展名： .htm或.html 3、用短横线分割单词: -
• 理解html5的元素、属性和值及其他的含义
• Байду номын сангаас悉寻找文件的目录命名方法
• 理解html5的语义化
第一章：网页的构造块
1.1 html思想 当我们打开橱柜，为每一份调料贴上一些标签，如：油、盐、醋等等， 我们就很容易认出它们；编写html跟这个贴标签的过程类似，不同的是编写html 并非向调料上贴标签，而是为网页内容打上能够描述他们的标签。这些标签名称 不需要我们自己创建。 html描述的不是内容，而是看起来是什么样。如我们在为调料贴名字的 时候是油、盐等，我们贴的是物质本身的名称，但在html里就是油腻的液体、白 色的小颗粒状粉末。
HTML5CSS3网站设计基础教程_教学指导大纲
HTML5CSS3网站设计基础教程_教学指导大纲一、引言A. 简介1. 概述HTML5和CSS32. 网站设计的重要性和必要性B. 目标读者1. 网站设计初学者2. 对HTML和CSS有一定了解的读者C. 教学目标1. 理解HTML5和CSS3的基本概念和语法2. 掌握基本的网站设计技巧和方法3. 能够设计简单但具有吸引力的网页布局4. 运用HTML5和CSS3创建响应式网站二、HTML5基础A. HTML5简介1. HTML5的发展历程2. HTML5的新特性和改进之处B. HTML5的基本结构1. DOCTYPE声明2. HTML文档的基本结构C. HTML5常用标签1. 文本标签2. 超链接标签3. 图像标签4. 表格标签5. 表单标签D. HTML5多媒体1. 音频和视频标签的使用2. 使用Canvas绘制图形3. 嵌入地图和地理定位E. HTML5表单和表单验证1. 表单元素2. 表单验证的基本原理和方法三、CSS3基础A. CSS3简介1. CSS的发展历程2. CSS3的新特性和改进之处B. CSS选择器和样式规则1. ID选择器和类选择器2. 标签选择器和属性选择器3. 组合选择器和伪类选择器C. CSS盒模型1. 盒子的尺寸和边框2. 盒子的内边距和外边距D. CSS布局和定位1. 流式布局2. 弹性盒子布局3. 定位布局E. CSS3过渡和动画1. 过渡效果的基本原理和用法2. 动画效果的实现方法四、响应式网站设计A. 响应式网站设计的概念1. 什么是响应式网站设计2. 为什么需要响应式网站设计B. 响应式网站设计的原则和方法1. 弹性网格布局2. 媒体查询的应用3. 图像和媒体资源的处理C. 响应式网站设计的实践1. 设计响应式布局2. 适配不同设备和屏幕尺寸3. 进行兼容性测试和优化五、总结A. 知识回顾1. HTML5的基本概念和语法2. CSS3的样式规则和布局B. 学习建议1. 实践和练习的重要性2. 深入学习和进阶的方向C. 结束语1. 网站设计的未来发展趋势2. 鼓励读者继续学习和探索六、附录A. HTML5和CSS3的常用资源和工具推荐B. 参考文献和学习资料以上为《HTML5CSS3网站设计基础教程_教学指导大纲》的详细内容概述，本教程将通过逐步引导读者学习HTML5和CSS3的基础知识，同时指导读者如何运用所学知识进行网站设计。
HTML5+CSS3网页设计与制作—教学大纲
《HTML5+CSS3网页设计与制作》课程教学大纲（课程英文名称）课程编号：学分：5学分学时：74学时（其中：讲课学时：50学时上机学时：24学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3网页设计与制作》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
该课程属于“1+X证书制度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。
二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6或其他代码编辑工具四、课程的主要内容及基本要求第一章HTML5+CSS3网页设计概述学习单元HTML5+CSS3网页设计概述学时2学时学习目标◆了解网页概念和组成。
◆理解HTML、CSS和JavaScript的功能和作用。
◆熟悉Dreamweaver工具的基本操作。
学习内容知识点了解掌握重点难点认识网页√网页名词解释√Web标准√HTML简介√CSS简介√JavaScript简介√网页的展示平台—浏览器√认识Dreamweaver界面√Dreamweaver初始化设置√Dreamweaver基本操作√【阶段案例—创建第一个网页】√第二章初识HTML5学习单元初识HTML5 学时6学时学习目标◆了解HTML和HTML5的基本结构，能够区分两者的结构差异。
HTML5+CSS3 Web前端设计基础教程(第4章)
4.3 控制图像和颜色
此处图片通过横向 平铺实现效果。此 外，同时设置图像 高度，如果不设置， div元素内又没有内 容将容器撑起来， 将无法显示背景图 片 此处图片设置了跟 随滚动条滚动的效 果，即便不设置， 浏览器默认状态就 是滚动效果
图4-15 背景色、背景图预览效果
此 处 为 box 容 器同时设置背 景图和背景色
此处文本溢出，文 字折返到下一行
此列表项内容超出了容器设 置的范围，出现了省略标记
图4-7 文本溢出处理预览效果
4.2 控制超链接
4.2.1 文本链接、邮件链接与锚链接 4.2.2 CSS伪类与超链接 1．什么是CSS伪类 伪类的语法形式为：
选择符：伪类 { 属性: 属性值; }
表4-3 常见的伪类及其含义 伪类 :link、:visited、:hover、:active :focus :not(s)（CSS 3新增） :root（CSS 3新增） :first-child :last-child（CSS 3新增） :nth-child(n) （CSS 3新增） 解释 设置超链接被访问前后的4个状态样式。 设置对象在成为输入焦点时的样式。 匹配不含有s选择符的元素。 匹配某一个元素在文档的根元素。 匹配父元素的第一个子元素。 匹配父元素的最后一个子元素。 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
4.1 控制文本
1．font-family（字体类型） 2．font-size（字号大小）
3．font-style（字体风格）
标题设置固定字号， 字体风格为斜体
此行设置为“宋体” 此行设置为“华文彩云 此行设置为“微软雅黑”
图4-3 字体类型、字号和风格预览效果
此行设置为“黑体”， 字号大小为父级的 80%
HTML5+CSS3网页设计基础 第三章 CSS入门
HTML5+CSS3网页设计基础
第3页
主要内容
3. 1 CSS定义与使用 3. 2 CSS 选择器
3. 3 CSS属性单位
3. 4 CSS高级特性 3. 5 实训 3. 6 本章小结
HTML5+CSS3网页设计基础
第3章 CSS入门
第4页
3.1 CSS定义与使用
本节主要内容：
第3章 CSS入门
HTML5+CSS3网页设计基础
第26页
3.3.1 长度、百分比单位
2．百分比单位 百分比单位也是一种常用的相对长度类型，通常的参考依 据为元素的font-size属性。百分比值总是相对于另一个值 来说的，该值可以是长度单位或其他单位。每一个可以使 用百分比值单位指定的属性，同时也自定义了这个百分比 值的参照值。在大多数情况下，这个参照值是该元素本身 的字体尺寸。并非所有属性都支持百分比单位。 一个百分比值由可选的正号“+”或负号“-”，接着一个 数字，后跟百分号“%”组成。如果百分比值是正的，正 号可以不写。正负号、数字与百分号之间不能有空格。
HTML5+CSS3网页设计基础
第3章 CSS入门
第11页
3.1.2 CSS定义和引用
(2)样式表文件的格式 样式表文件可以用任何文本编辑器(如记事本)打开并编辑 ，一般样式表文件的扩展名为.css。样式表文件的内容是 定义的样式表，不包含HTML标签。样式表文件的格式为 ： 选择符1{属性：属性值；属性：属性值…} /*注释内容*/ 选择符2{属性：属性值；属性：属性值…} … 选择符n{属性：属性值；属性：属性值…} 参考示例：3-1-3.html
HTML5 CSS3网页设计与制作教学大纲
多媒体
27
设计与制作电脑版网站首页0801.html
规划与设计电脑版网站首页的主体布局结构
设计与实现电脑版网站首页的导航结构
设计网站首页的主体布局结构和导航结构
2
计算机
28
设计与制作电脑版网站首页0801.html
设计与实现电脑版网站首页的各个局部版块内容
实现网站首页各个局部版块内容
2
计算机
29
设计与制作电脑版网站首页0801.html
2
计算机
18
设计与制作电脑版商品筛选页面0501.html
布局与美化商品筛选页面的右侧主体内容
对商品筛选页面左侧内容的布局与美化
2
计算机
19
设计与制作电脑版商品推荐页面0601.html
规划与设计商品推荐页面的布局结构
制作用于生成网页模板的网页0601.html
制作用来生成模板的网页
2
计算机
20
制作基于模板的电脑版商品推荐页面0602.html
规划与设计商品筛选页面的布局结构
学会使用使用Div+CSS结构布局页面
2
计算机
16
设计与制作电脑版商品筛选页面0501.html
规划与设计商品筛选页面的布局结构
学会使用使用Div+CSS结构布局页面
2
计算机
17
设计与制作电脑版商品筛选页面0501.html
布局与美化商品筛选页面的左侧列表内容
利用CSS样式美化页面元素
创建帮助导航栏
设置多种文本形式的超链接
2
计算机
7
设计与制作电脑版帮助信息页面0201.html
创建电子邮件链接、图像热点链接等多种形式的超级链接
HTML5+CSS3网页设计基础 第一章 网页设计基础
HTML5+CSS3网页设计HTML5页面
本节主要内容：
案例分析
用记事本编辑网页
用HBuilder编辑网页
HTML5+CSS3网页设计基础
第1章 网页设计基础
第7页
1.3.1 案例分析
【案例展示】设计一个简单的页面，包含了网页标题文字 和一行文本信息，本例文件1-1.html在IE浏览器中的浏览 效果如图1-3所示。 【知识要点】HTML文档的结构、创建网页、保存网页与 浏览网页。 【学习目标】掌握使用记事本和HBuilder创建、保存和 浏览网页的方法。
HTML5+CSS3网页设计基础
第1章 网页设计基础
第13页
1.4.2 CSS的层叠和继承性
1. <!doctype>声明：<!DOCTYPE> 声明必须是 HTML 文档的第一 行，位于 <html> 标签之前。 2. <html>文档标签：<html>标记位于<!doctype>标记之后，也称为 根标记，表示HTML文档的开始。 3. <head>头标签：<head>标签用于定义HTML文档的头部信息，紧 跟在<html>标签之后。 4. 文档编码：HTML5文档使用meta元素的 charset属性指定文档编 码，格式为：<meta charset="UTF-8"> 5. <title>标题标签：<title>标签用来定义文档的标题。 6. <body>主体标签：<body>标记用于定义HTML文档所要显示的内 容。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML5+CSS3 网站设计基础教程》课程教学大
纲
（课程英文名称）
课程编号：201601210011
学分： 5 学分
学时：76 学时（其中：讲课学时：47 学时上机学时：26 学时）
先修课程：计算机基础、计算机网络、计算机应用
后续课程：UI 设计、JavaScript 网页特效
适用专业：信息技术及其计算机相关专业
开课部门：计算机系
一、课程的性质与目标
《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML 标记、CSS 样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web 发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路
课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。
三、教学条件要求
开发工具：Dreamweaver CS6
四、课程的主要内容及基本要求第一章初识HTML5
第二章HTML5 页面元素及属性
第三章CSS3 入门
第四章CSS3 选择器
第五章CSS盒子模型
第六章浮动与定位
第七章表单的应用
第八章多媒体技术
第九章CSS3 高级应用
第十章实战开发—制作电商网站首页面
五、学时分配
六、考核模式与成绩评定办法
本课程为考试课程，期末考试采用百分制的闭卷考试模式。
学生的考试成绩由平时成
绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、上机成绩（20%）。
七、选用教材和主要参考书
本大纲是根据教材《HTML5+CSS3 网站设计基础教程》所设计的。
参考书籍：
传智播客.《网页设计与制作（HTML+CSS ）》中国铁道出版社.201408 传智播客.
《HTML+CSS+JavaScript 网页制作案例教程》人民邮电出版社.201508
八、大纲说明
本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，要求学生动手完成指定的程序设计或验证。
撰写人：
执行时间：审定人：
批准人：。