(完整版)《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学时六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。

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网站设计基础教程_教学指导大纲一、引言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网页设计与制作》课程教学大纲（课程英文名称）课程编号：学分：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的基本结构，能够区分两者的结构差异。

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%

第3章 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

2
多媒体
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页面
本节主要内容：

案例分析


用记事本编辑网页
用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文档所要显示的内 容。

11.2.7 渐变效果

线性渐变：绘制左上（0% 0%）到右上（0% 100%）即从左到右水平渐变，代码如下：
►background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

径向渐变：下面是目标半径为0的渐变的代 码：
HTML5+CSS3网页设计基础教程
第11章 CSS3概述
第24页
11.3 CSS3兼容性速查

本书推荐常用的CSS3兼容性速查表： /，在搜索框输入需要 了解其兼容性的指定的CSS3特性，即可显 示该特性的浏览器支持的列表，如图所示。
HTML5+CSS3网页设计基础教程
HTML5+CSS3网页设计基础教程
第11章 CSS3概述
第22页
11.2.11 过渡、形变与动画

在CSS3中，可以通过Transitions实现过渡， Transform实现形变，Animation实现动画。
HTML5+CSS3网页设计基础教程
第11章 CSS3概述
第23页
主要内容
11.1 11.2 11.3 11.4 CSS变迁 了解CSS3新增特性 CSS3兼容性速查 本章小结
►backgroud:-webkit-gradient(radial,50 50,50,50 50,0,from(black),colorstop(0.5,red),to(blue));
HTML5+CSS3网页设计基础教程
第11章 CSS3概述
第18页
11.2.8 阴影和反射效果

阴影效果既可用于普通元素，也可用于文字，例 如：

《HTML5+CSS3 网站设计基础教程》课程教学大纲（课程英文名称）课程编号：201601210011学分：5 学分学时：76 学时（其中：讲课学时：47 学时上机学时：26 学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI 设计、 JavaScript 网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML 标记、CSS 样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页 web 发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。

单纯的技能训练不是提高高等职业教育的理想课程。

以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。

课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。

教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。

三、教学条件要求开发工具：Dreamweaver CS6四、课程的主要内容及基本要求第一章初识 HTML5第二章HTML5 页面元素及属性第三章CSS3 入门第四章CSS3 选择器第五章CSS 盒子模型第六章浮动与定位第七章表单的应用第八章多媒体技术第九章CSS3 高级应用第十章实战开发—制作电商网站首页面…………………………………………………………………五、学时分配六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。

HTMLCSS网站设计基础教程教学大纲(一) HTMLCSS网站设计基础教程教学大纲随着互联网的发展，网站的设计和制作成为一门热门的技能。

而HTML 和CSS无疑是网站设计和制作的基础。

为了帮助初学者更好地掌握HTML和CSS，本文将制定一份HTMLCSS网站设计基础教程教学大纲。

一、课程概述本课程旨在通过讲授HTML和CSS基础知识，帮助学生掌握网站的设计与制作基础技能。

课程内容涵盖HTML基础、CSS基础、页面布局等方面的知识。

二、在线学习资源本课程的学习资源包括视频教程、在线编程环境、课后练习等。

学生可以根据自己的需要，有选择地学习相关内容。

教师也可以通过这些在线学习资源，检查学生的学习情况。

三、课程内容1. HTML基础知识入门知识HTML标签元素属性2. CSS基础知识CSS语法选择器CSS样式框模型布局3. 页面布局盒子模型浮动定位部分布局实战案例四、课程教学方法本课程采用讲授、演示、实践相结合的方法。

在讲解HTML和CSS基础知识的同时，教师会用实例或者案例演示相关概念的应用。

通过互动性强的课堂，可以让学生更好地理解和掌握相关知识。

同时鼓励学生在课后进行实践，强化学习效果。

五、课程考核方式本课程的考核方式采用课堂考试和课后作业相结合的方式。

课堂考试主要考察学生掌握HTML和CSS基础知识以及页面布局方法的能力。

作业主要包括实践类的练习和课程案例应用，以检验学生对知识的掌握情况。

六、总结HTML和CSS是网站设计和制作的基础，学习好HTML和CSS，可以帮助你更高效的进行网站设计和制作。

本课程旨在帮助初学者掌握HTML和CSS基础知识，同时学会应用到实际设计。

学生需要花费一定的时间和精力学习，相信在学习的过程中，你会发现学习网站设计和制作是一件有趣的事情。

HTMLCSS网站设计基础教程教学大纲(1) HTMLCSS网站设计基础教程教学大纲I. 前言A. 阐述HTMLCSS网站设计的重要性及它在当前互联网时代的应用B. 引出教学大纲的目的以及教学内容C. 简述HTMLCSS网站设计的历史及发展II. HTML基础A. 讲解HTML的基本语法及规则B. 着重解析HTML元素的分类以及使用方法1. 文本标签2. 图像标签3. 列表标签4. 表格标签5. 表单标签C. 列举实际案例演示HTML标签处理方式D. 练习演示III. CSS基础A. 讲解CSS的基本语法及规则B. 解析CSS样式的使用方法1. 内联样式2. 嵌入式样式3. 外部样式C. 着重讲解CSS样式的基本属性及嵌套应用D. 列举实际案例演示CSS样式的处理方式E. 练习演示IV. 图像处理A. 介绍图像处理的必要性及应用B. 讲解基础的图像格式及其压缩处理C. 基于案例演示图像处理的高级应用D. 学生练习案例V. 响应式设计A. 介绍设计响应式的必要性及特点B. 解析设计响应式的基本原则C. 通过案例演示挖掘响应式设计的价值及主要优点D. 学生练习响应式设计的案例VI. 前端开发A. 探究前端开发的必要性B. 介绍常用前端开发框架的使用方法及特点C. 着重讲解JavaScript语言的基本编写语法及常用方法D. 学生练习前端开发案例VII. SEO优化A. 介绍SEO的概念及其在网络营销中的重要性B. 提供基础SEO技巧和白帽SEO技术标准C. 探讨SEO的进阶技巧和方案应用D. 学生模拟SEO案例VIII. 站点发布A. 介绍站点发布的任务及其用途B. 使用FTP及在线编辑器发布网站C. 基于Apache主机环境实际部署站点D. 学生虚拟部署案例IX. 总结A. 总结本教学大纲涉及的内容B. 总结HTMLCSS网站设计的方法及其在实际应用中的优点C. 预测HTMLCSS技术的未来进展及其在不同行业中的应用D. 颁发证书证明学生的学习成果和实践能力。

第3章￿CSS3入门《HTML5+CSS3网站设计基础教程》学习目地/Target了解CSS3地发展历史以及主流浏览器地支持情况。

掌握CSS基础选择器,能够运用CSS选择器定义标记样式。

熟悉CSS文本样式属性,能够运用相应地属性定义文本样式。

理解CSS优先级,能够区分复合选择器权重地大小。

章节概述/￿Summary随着网页制作技术地不断发展,陈旧地CSS特性与标准已经无法满足现今地交互设计需求,开发者往往需要更多地字体选择,更方便地样式效果,更绚丽地图形动画。

CSS3地出现,在不需要改变原有设计结构地情况下,增加了许多新特性,极大地满足了开发者地需求。

本章将对CSS3地发展史,浏览器地支持情况以及有关文本样式属性进行详细讲解。

目录/Contents01 02CSS3简介CSS核心基础03文本样式属性04CSS高级特性05阶段案例—制作服装推广软文01CSS3简介在网页设计,运用CSS3技术能够让原有地网站变得趣味盎然,很多站点都为自己地页面添加了各种炫酷地CSS3效果。

但是CSS3技术是怎样发展起来地？哪些浏览器能够很好地兼容CSS3？本节将对CSS地发展史及浏览器兼容情况进行介绍。

了解CSS3,能够说出CSS地概念,CSS3地发展历史与CSS3浏览器支持情况。

学习目地1.￿CSS概述使用HTML对网页进行修饰,存在很大地局限与不足维护困难不利于代码地阅读1.￿CSS概述1.￿CSS概述如果希望网页美观,大方,并且升级轻松,维护方便,就需要使用CSS,实现结构与表现地分离。

1.￿CSS概述CSS提供了丰富地样式font:属性值;字体属性color:属性值;颜色属性float:属性值;浮动属性background:属性值;背景属性1.￿CSS概述例如:图文字地颜色,粗体,背景,行间距与左右两列地排版等,都是通过CSS控制地。

1.￿CSS概述CSS非常灵活,既可以嵌入在HTML文档,也可以是一个单独地外部文件,如果是独立地文件,则需要以.css为后缀名。