项目1  HTML5与CSS3基础知识

项目导读

学习目标

素养目标

任务1.1  HTML5基础

1.1.1  网站前端开发技术

1.1.2  HTML的发展历程

1.1.3  HTML5的文档结构

1.1.4  HTML5基本语法

1.1.5  HTML5主结构元素

任务实施——创建第一个HTML5文档

任务1.2  CSS3基础

1.2.1  CSS3的发展历程

1.2.2  CSS3的语法规则

1.2.3  在HTML5页面中添加CSS3样式

任务实施——为“1-2.html”文档设置样式

任务1.3  CSS3中的选择器

1.3.1  基本选择器

1.3.2  组合选择器

1.3.3  属性选择器

1.3.4  伪类选择器

1.3.5  CSS3的继承性和层叠性

任务实施——使用选择器设置CSS3样式

德育课堂

项目实训

项目考核

项目2  应用和美化文本

项目导读

学习目标

素养目标

任务2.1  应用HTML5中的文本

2.1.1  标题和段落标签

2.1.2  基本的文本格式化标签

2.1.3  HTML5新增的文本标签

2.1.4  特殊字符

任务实施——创建“图书简介”页面

任务2.2  使用CSS3美化文本

2.2.1  文本样式

2.2.2  段落样式

2.2.3  特殊样式

任务实施——美化“图书简介”页面中的文本

德育课堂

项目实训

项目考核

项目3  应用和美化图像及多媒体

项目导读

学习目标

素养目标

任务3.1  应用HTML5中的图像及多媒体

3.1.1  添加图像与图标

3.1.2  添加流

3.1.3  嵌入多媒体文件

任务实施——为“图书简介”页面添加图像及视频

任务3.2  使用CSS3美化图像与背景

3.2.1  图像样式

3.2.2  背景样式

3.2.3  图文混排

3.2.4  渐变样式

任务实施——美化“图书简介”页面的图像、视频与背景

德育课堂

项目实训

项目考核

项目4  应用和美化列表

项目导读

学习目标

素养目标

任务4.1  使用HTML5添加列表

4.1.1  无序列表

4.1.2  有序列表

4.1.3  自定义列表

4.1.4  嵌套列表

任务实施——制作“网上书店”页面的导航条

任务4.2  使用CSS3美化列表

4.2.1  设置项目符号

4.2.2  使用列表制作水平导航条

4.2.3  制作图文列表

4.2.4  使用列表制作排行榜

任务实施——美化“网上书店”页面的导航条

德育课堂

项目实训

项目考核

项目5  应用和美化超链接

项目导读

学习目标

素养目标

任务5.1  使用HTML5添加超链接

5.1.1  URL

5.1.2  普通链接与内容块链接

5.1.3  图像链接与下载链接

5.1.4  锚点链接

5.1.5  电子邮件链接

5.1.6  图像热点链接

任务实施——为“网上书店”页面添加超链接

任务5.2  使用CSS3美化超链接

5.2.1  与超链接相关的基本样式

5.2.2  制作新闻列表

5.2.3  制作图形化按钮

任务实施——美化“网上书店”页面中的超链接

德育课堂

项目实训

项目考核

项目6  应用和美化表格

项目导读

学习目标

素养目标

任务6.1  使用HTML5添加表格

6.1.1  添加表格

6.1.2  表头与标题

6.1.3  表格分组

6.1.4  整体边框与单元格内外边距

6.1.5  表格内外边框

6.1.6  单元格跨行、跨列显示

任务实施——使用表格制作“网上书店”页面的“热销排行榜”

任务6.2  使用CSS3美化表格

6.2.1  设置表格标题样式

6.2.2  制作细线表格

6.2.3  制作圆角表格

6.2.4  制作隔行换色表格

6.2.5  制作自适应表格

任务实施——美化“网上书店”页面“热销排行榜”区域的表格

德育课堂

项目实训

项目考核

项目7  应用和美化表单

项目导读

学习目标

素养目标

任务7.1  使用HTML5添加表单

7.1.1  表单的基本结构

7.1.2  表单域

7.1.3  常用表单控件

7.1.4  其他表单控件

7.1.5  表单控件的属性

7.1.6  提示信息

7.1.7  表单对象分组

任务实施——制作“反馈意见”页面

任务7.2  使用CSS3美化表单

7.2.1  设置表单背景

7.2.2  设置表单控件获得焦点时的样式

7.2.3  设置单选钮与复选框的样式

7.2.4  表单控件的其他样式

任务实施——美化“反馈意见”页面

德育课堂

项目实训

项目考核

项目8  CSS3布局基础

项目导读

学习目标

素养目标

任务8.1  盒子模型

8.1.1  盒子模型的基本结构

8.1.2  盒子模型的边框与边距

8.1.3  盒子模型的背景属性

8.1.4  盒子模型的其他属性

8.1.5  不同类型元素的盒子模型

任务实施——对“图书简介”页面进行布局

任务8.2  元素的浮动与定位

8.2.1  浮动属性

8.2.2  清除浮动

8.2.3  定位属性

8.2.4  相对定位

8.2.5  绝对定位

8.2.6  固定定位

8.2.7  层叠等级属性

任务实施——完善“网上书店”页面

德育课堂

项目实训

项目考核

项目9  CSS3布局

项目导读

学习目标

素养目标

任务9.1  CSS3常见布局形式

9.1.1  单列和双列布局

9.1.2  三列布局

9.1.3  弹性伸缩盒

任务实施——构建“书店简介”页面布局

任务9.2  适配移动端的设置

9.2.1  视口

9.2.2  响应式适配移动设备

任务实施——使“反馈意见”页面适配移动端

德育课堂

项目实训

项目考核

项目10  变形、过渡与动画

项目导读

学习目标

素养目标

任务10.1  变形效果

10.1.1  变形属性

10.1.2  2D变形

10.1.3  3D变形

任务实施——为“书店简介”页面导航条设置变形效果

任务10.2  过渡效果

10.2.1  过渡效果相关属性

10.2.2  常见过渡效果应用场景及其触发方式

任务实施——为“书店简介”页面的变形过程添加过渡效果

任务10.3  动画效果

10.3.1  关键帧

10.3.2  动画效果相关属性

10.3.3  制作动画片段

任务实施——为“书店简介”页面侧边栏中的链接文字设置动画

德育课堂

项目实训

项目考核

项目11  网页设计综合实例

项目导读

学习目标

素养目标

任务11.1  准备工作

任务实施——站点规划和创建

任务11.2  制作网站首页

任务实施——制作“WJ自制女装品牌店网站”首页

任务11.3  制作网站二级页面

任务实施——制作“WJ自制女装品牌店网站”全部商品页

德育课堂

参考文献