《静态网页设计技术》PPT课件 常州信息职业技术学院 殷兆燕

 
课件内容： 
单元1 HTML5基础 
了解网页的相关概念。了解开发工具HBuilder的基本操作。掌握HTML5文档基本结构。掌握HTML5基本语法。 
1.1 网页的相关概念 
1.2 网页的编辑与运行 
1.3 HTML5文档的基本结构和标签的语法 
1.4 实践任务 制作第一个简单的网页 
单元2 HTML5基本标签 
掌握文本、图像、超链接、列表、表格、表单等常用HTML5标签的应用。理解相对路径与绝对路径。能够使用HTML5基本标记编写简单的网页。 
2.1 文本控制标签 
2.2 图像标签 
2.3 实践任务1 制作图文混排的网页 
2.4 超链接和列表标签 
2.5 实践任务2 制作新闻列表页 
2.6 表格标签 
2.7 表单标签 
2.8 实践任务3 制作注册页面 
单元3 元素分类与语义化标签 
熟悉元素的类型。理解标签语义化。掌握HTML5常用语义化标签的使用，使页面分区更明确。 
3.1 div标签、span标签及模块命名规范 
3.2 元素分类与HTML语义化 
3.3 HTML5中常用语义化结构标签 
3.4 实践任务1 使用语义化标签搭建公司简介网页HTML结构 
单元4 CSS3概述与基本语法 
掌握CSS3的相关概念。熟悉CSS3的基本语法。掌握HTML页面中引入CSS样式的方法。掌握CSS选择器的用法。 
4.1 CSS3概述与基本语法 
4.2 如何插入样式表 
4.3 实践任务1 使用CSS设置文本颜色 
4.4 基本选择器 
4.5 复合选择器 
4.6 伪类选择器 
4.7 伪元素选择器 
4.8 样式的层叠与继承 
4.9 实践任务2 选择合适的选择器设置网页文字颜色 
单元5 CSS3基本样式设计 
掌握文字、段落、边框、图片等CSS3基本样式的应用。能够使用CSS3基本样式设计网页的显示效果。 
5.1 字体样式和文本样式 
5.2 边框样式 
5.3 实践任务1 设置公司简介页面样式 
5.4 背景样式 
5.5 列表和超链接样式 
5.6 实践任务2 设置新闻中心版块样式 
5.7 表格样式和表单样式 
5.8 实践任务3 设置会员注册页面样式 
单元6 CSS3定位与布局 
掌握盒子模型的概念及其相关属性的含义。能够正确计算盒子在网页上的占位。理解浮动的原理及其对页面的影响，掌握多行多列布局方法。理解不同定位布局的区别，综合运用定位布局实现网页元素的精确定位。 
6.1 盒子模型 
6.2 外边距合并 
6.3 实践任务1 制作产品展示模块 
6.4 文档流简介与元素的转换 
6.5 浮动 
6.6 清除浮动 
6.7 实践任务2 制作公司网站首页 
6.8 定位布局简介 
6.9 相对定位 
6.10 绝对定位 
6.11 固定定位 
6.12 任务3 公司网站首页实现固定侧边菜单 
单元7 项目实践—制作传统文化网站首页 
掌握HTML5+CSS3进行网页布局的方法。能够综合应用HTML5、CSS3完成网页制作。了解CSS代码优化的作用和方法。 
7.1 实践任务1 建立站点并完成页面整体布局 
7.2 实践任务2 制作网页头部和导航 
7.3 实践任务3 制作banner和最新更新栏目 
7.4 实践任务4 制作国学百家栏目 
7.5 实践任务5 制作传统节日栏目 
7.6 实践任务6 制作底部版权区域与CSS代码优化 
单元8 项目实践—制作传统文化网站子页 
掌握网页模板的使用。掌握完整网站制作的思路和流程。能够综合应用HTML5、CSS3完成静态网站开发。 
8.1 实践任务1 创建传统文化网站子页模板 
8.2 实践任务2 制作文章列表页 
8.3 实践任务3 制作文章详情页