网页设计与制作项目教程（HTML+CSS+JavaScript）（第2版）

内容简介

Web标准的一大特点是采用“HTML+CSS+JavaScript”将网页内容、外观样式以及动态效果彻底分离，以便于分工设计和代码重用。本书站在初学者的角度，以实用的案例、通俗易懂的语言详细介绍了使用HTML、CSS及JavaScript进行网页制作的技巧。

全书分为8个项目，结合HTML、CSS和JavaScript的基础知识及应用，提供了7种不同类型的网页设计案例。其中，项目1介绍了HTML、CSS以及JavaScript的基础知识，包括Web基本概念、HTML、CSS、JavaScript简介、Dreamweaver工具的使用等；项目2~项目8为7个完整的网页设计项目，涉及“博客”“网店”“家居”“教育”“婚恋”“视频”“美食”多个方向，有助于学生掌握不同网站的设计风格和制作技巧。全书以项目为导向，通过项目将章节知识点串起来，学完一章内容就能制作一个完整的项目页面，能大大激发学生的学习兴趣。

本书附有源代码、习题、教学课件等资源，而且为了帮助初学者更好地学习本书讲解的内容，还提供了在线答疑，希望得到更多读者的关注。

本书既可作为高等院校本、专科相关专业的网页设计与制作课程的教材，也可作为网页平面设计的培训教材，是一本适合网页制作、美工设计、网站开发、网页编程等行业人员阅读与参考的优秀读物。

适合群体

本书既可作为高等院校本、专科计算机相关专业的专用教材，也可以作为技术爱好者的入门用书。

图书特色

HTML、CSS和JavaScript是网页制作技术的核心和基础，也是每个网页制作者都应掌握的基本知识，它们在网页设计中不可或缺。本书是在第一版《网页设计与制作项目教程（HTML+CSS+JavaScript）》的基础上修订而成，在优化原图书内容的同时，又新增了以下内容。

1. 在书中增加了HTML5部分基础标签和CSS3新属性的讲解和应用。

2. 在书中增加了网页视听技术的应用，主要包括音频、视频的嵌入和动画效果。

3. 调整了JavaScript部分知识点的顺序，更符合由浅入深、循序渐进的学习思路。

4. 在书中更换了部分案例，增强本书的实用性。

配套资源

进入高校教辅平台查看资源

图书目录

项目1	网页制作基础知识
【任务1-1】认识网页
需求分析
知识储备
1.	网页的构成
2.	网页的相关名词
3.	Web标准
【任务1-2】网页制作入门技术
需求分析
知识储备
1.	HTML简介
2.	CSS简介
3.	JavaScript简介
4.	常见浏览器介绍
【任务1-3】Dreamweaver工具的使用
需求分析
知识储备
1.	Dreamweaver界面介绍
2.	Dreamweaver初始化设置
3.	Dreamweaver文档的基本操作
4.	创建第一个网页
【项目总结】
【课后练习】

项目2	“博客”页面制作
【项目描述】
【任务2-1】认识HTML
需求分析
知识储备
1.	HTML文档基本格式
2.	HTML标签
3.	HTML标签的属性
4.	HTML标签的关系
5.	HTML文档头部相关标签
【任务2-2】HTML文本控制标签
需求分析
知识储备
1.	页面格式化标签
2.	文本样式标签
3.	文本格式化标签
4.	特殊字符标签
知识拓展
<div>标签
【任务2-3】HTML图像应用
需求分析
知识储备
1.	常用图像格式
2.	图像标签
3.	相对路径和绝对路径
知识拓展
切图
【任务2-4】页面建设准备工作
网站素材整理
1.	网站站点建立
2.	“博客”页面切图
页面结构分析
页面布局
【任务2-5】制作“头部”模块
效果分析
模块制作
【任务2-6】制作“博主简介”模块
效果分析
模块制作
【任务2-7】制作“旅游随笔”模块
效果分析
模块制作
【任务2-8】制作“驴友评论”模块
效果分析
模块制作
【任务2-9】制作“页脚”模块
效果分析
模块制作
【项目总结】
【课后练习】

项目3	“网上花店”专题页制作
【项目描述】
【任务3-1】CSS核心基础
需求分析
知识储备
1.	结构与表现分离
2.	CSS样式规则
3.	CSS样式表的引入
4.	CSS基础选择器
【任务3-2】CSS文本样式属性
需求分析
知识储备
1.	CSS字体样式属性
2.	CSS文本外观属性
知识拓展
1.	CSS定义背景颜色
【任务3-3】CSS高级特性
需求分析
知识储备
1.	CSS复合选择器
（3） 并集选择器
2.	CSS层叠性与继承性
3.	CSS优先级
【任务3-4】页面建设准备工作
网站素材整理
1.	网站站点建立
2.	切图
页面结构分析
1.	HTML结构分析
2.	CSS样式分析
定义基础样式
1.	页面布局
2.	公共样式设置
【任务3-5】制作“标题”模块
效果分析
1.	结构分析
2.	样式分析
模块制作
1.	搭建结构
2.	控制样式
【任务3-6】制作“分类”模块
效果分析
1.	结构分析
2.	样式分析
模块制作
1.	搭建结构
2.	添加样式
【任务3-7】制作“热卖”模块
效果分析
1.	结构分析
2.	样式分析
模块制作
1.	搭建结构
2.	控制样式
【任务3-8】制作“页脚”模块
效果分析
1.	结构分析
2.	样式分析
模块制作
1.	搭建结构
2.	控制样式
【项目总结】
【课后练习】

项目4“爱家居”企业网站首页制作
【项目描述】
【任务4-1】认识盒子模型
需求分析
知识储备
1.	认识盒子模型
【任务4-2】盒子模型基础属性
需求分析
知识储备
1.	边框属性
2.	内边距属性
3.	外边距属性
4.	背景属性
5.	宽度属性和高度属性
【任务4-3】盒子模型新增属性
需求分析
知识储备
1.	透明
2.	圆角
3.	阴影
4.	渐变
【任务4-3】元素的类型与转换
需求分析
知识储备
1.	元素的类型
2.	<span>标签
3.	元素的转换
知识拓展
1.	块元素垂直外边距的合并
【任务4-4】元素的浮动
需求分析
知识储备
1.	元素的浮动属性
2.	清除浮动
3.	overflow属性
【任务4-5】元素的定位
需求分析
知识储备
1.	元素的定位属性
2.	静态定位
3.	相对定位
4.	绝对定位
5.	固定定位
6.	z-index属性
【任务4-6】布局及定义基础样式
网站素材的整理
页面结构分析
定义基础样式
1.	页面布局
2.	定义基础样式
【任务4-7】制作导航及banner模块
效果分析
1.	结构分析
2.	样式分析
模块制作
1.	搭建结构
2.	控制样式
【任务4-8】制作“热门推荐”模块
效果分析
模块制作
1.	搭建结构
2.	控制样式
【任务4-9】制作“夏日生活”模块
效果分析
1.	结构分析
2.	样式分析
模块制作
1.	搭建结构
2.	控制样式
【任务4-10】制作“版权信息”模块和“悬浮框”模块
效果分析
1.	结构分析
模块制作
【项目总结】
【课后练习】

项目5	“优课教育”网站首页面制作
【项目描述】
【任务5-1】列表标签
需求分析
知识储备
1.	无序列表
2.	有序列表
3.	定义列表
4.	列表的嵌套应用
【任务5-2】CSS控制列表样式
需求分析
知识储备
1.	list-style复合属性
2.	背景图像定义列表项目符号
【任务5-3】超链接标签
需求分析
知识储备
1.	创建超链接
2.	锚点链接
3.	链接伪类控制超链接
【任务5-4】页面建设准备工作
网站素材整理
页面结构分析
定义基础样式
1.	页面布局
2.	定义基础样式
【任务5-5】制作“导航模块”
效果分析
1.	结构分析
2.	样式分析
模块制作
1.	搭建结构
2.	控制样式
【任务5-6】制作“banner模块”和“课程分类模块”
效果分析
1.	结构分析
2.	样式分析
模块制作
1.	搭建结构
2.	控制样式
【任务5-7】制作“精品展示模块”
效果分析
1.	结构分析
2.	样式分析
模块制作
1.	搭建结构
2.	控制样式
【任务5-8】制作“版权信息模块”
效果分析
1.	结构分析
2.	样式分析
模块制作
1.	搭建结构
2.	控制样式
【项目总结】
【课后练习】

项目6	“千年之恋”注册页面制作
【项目描述】
【任务6-1】认识表格相关标签
需求分析
知识储备
1.	表格的创建
2.	<table>标签的属性
3.	<tr>标签的属性
4.	<td>标签的属性
5.	<th>标签的属性
【任务6-2】CSS控制表格样式
需求分析
知识储备
1.	CSS控制表格边框
2.	CSS控制单元格边距
3.	CSS控制单元格的宽高
【任务6-3】表单概述
需求分析
知识储备
1.	初识表单
2.	创建表单
【任务6-4】基础表单控件
需求分析
知识储备
1.	input控件
2.	textarea控件
3.	select控件
【任务6-5】新增表单控件类型和属性
需求分析
知识储备
1.	新增input控件类型
2.	新增input控件属性
【任务6-5】CSS控制表单样式
需求分析
知识储备
1.	CSS控制表单样式
【任务6-6】页面建设准备工作
网站素材整理
效果分析
定义基础样式
【任务6-7】制作“头部和导航”模块
效果分析
模块制作
【任务6-8】制作“banner和内容”模块
效果分析
模块制作
【任务6-9】制作“页脚”模块
效果分析
模块制作
【项目总结】
【课后练习】

项目7	“视频8”首页制作
【项目描述】
【任务7-1】网页中嵌入视频和音频
需求分析
知识储备
1.	音频、视频嵌入技术概述
2.	嵌入视频
3.	嵌入音频
4.	浏览器对音视频文件的兼容性
5.	控制视频宽高
【任务7-2】网页中添加过渡效果
需求分析
知识储备
1.	transition-property属性
2.	transition-duration属性
3.	transition-timing-function属性
4.	transition-delay属性
5.	transition属性
【任务7-3】网页中添加变形效果
需求分析
知识储备
1.	2D变形
2.	3D变形
【任务7-5】网页中添加动画效果
需求分析
知识储备
1.	@keyframes规则
2.	animation-name属性
3.	animation-duration属性
4.	animation-timing-function属性
5.	animation-delay属性
6.	animation-iteration-count属性
7.	animation-direction属性
8.	animation属性
【任务7-6】页面建设准备工作
网站素材整理
效果分析
定义基础样式
【任务7-7】制作“引导栏”模块
效果分析
模块制作
【任务7-8】制作“导航”模块
效果分析
模块制作
【任务7-9】制作“banner”模块
效果分析
模块制作
【任务7-10】制作“内容”模块
效果分析
模块制作
【任务7-11】制作“页脚”模块
效果分析
模块制作
【项目总结】
【课后练习】

项目8	“甜蜜约会”首页制作
【项目描述】
【任务8-1】JavaScript基础知识
需求分析
知识储备
1.	JavaScript简介
2.	JavaScript引入方式
3.	JavaScript基本语法
4.	第一个简单的JavaScript程序
【任务8-2】变量
需求分析
知识储备
1.	变量的声明
2.	变量的赋值
【任务8-3】数据类型和运算符
需求分析
知识储备
1.	数据类型
2.	运算符
【任务8-4】流程控制语句
需求分析
知识储备
1.	条件语句
2.	循环语句
3.	跳转语句
【任务8-5】函数
需求分析
知识储备
1.	函数的定义
2.	函数的调用
3.	函数中变量的作用域
【任务8-6】对象
需求分析
知识储备
1.	认识对象
2.	创建对象和删除对象属性
3.	内置对象
【任务8-7】数组
需求分析
知识储备
1.	初识数组
2.	创建数组
3.	数组的常用属性和方法
4.	二维数组
【任务8-8】BOM对象与DOM对象
需求分析
知识储备
1.	BOM对象
2.	DOM对象
【任务8-9】事件处理
需求分析
知识储备
1.	事件和事件调用
2.	常用的JavaScript事件
【任务8-10】页面建设准备工作
网站素材整理
效果分析
定义基础样式
1.	页面布局
2.	定义基础样式
【任务8-11】制作“头部及导航”模块
效果分析
1.	结构分析
2.	样式分析
模块制作
1.	搭建结构
2.	控制样式
【任务8-12】制作“banner”模块
效果分析
1.	结构分析
2.	样式分析
3.	JavaScript特效分析
模块制作
1.	搭建结构
2.	控制样式
【任务8-13】制作“简介”模块
效果分析
1.	结构分析
2.	样式分析
3.	JavaScript特效分析
模块制作
1.	搭建结构
2.	控制样式
3.	添加JS效果
【任务8-14】制作“推荐”模块
效果分析
1.	结构分析
2.	样式分析
3.	JavaScript特效分析
模块制作
1.	搭建结构
2.	控制样式
3.	添加JS效果
【任务8-15】制作“页脚”模块
效果分析
1.	结构分析
2.	样式分析
模块制作
1.	搭建结构
2.	控制样式
【项目总结】
【课后练习】

展开全部内容