全新CSS3+DIV网页样式与布局案例课堂(第2版)刘春茂9787302515432

第Ⅰ篇基础知识
章网页设计的技能
1.1认识网页和
1.1.1什么是网页
1.1.2什么是
1.2网页中需要包含的要素
1.2.1需要HTML文件
1.2.2需要DIV层
1..需要CSS定义网页样式
1.2.4需要JavaScript设置网页动画
1.2.5需要域名与服务器空间
1.3一个简单网页的基本构成
1.3.1Head部分
1.3.2Body部分
1.3.3注释部分
1.4设计网页的总体流程
1.4.1网页规划
1.4.2搜集资料
1.4.3设计网页的总体效果
1..制作页素材文件
1.4.5搭建网页DIV层
1.4.6使用CSS与JavaScript
1.4.7测试网页
1.5的种类与网页布局方式
1.5.1的种类
1.5.2网页布局方式
1.6在Photoshop中构建网页结构
1.7大神解惑
1.8跟我练练手
第2章CSS样式入门
2.1认识CSS
2.1.1CSS功能
2.1.2浏览器与CSS
2.1.3CSS发展历史
2.2CSS常用单位
2.2.1颜色单位
2.2.2长度单位
.编辑和浏览CSS
..1案例1——手工编写CSS
..2案例2——使用Dreamweaver编写CSS
2.4在HTML中调用CSS的方法
2.4.1案例3——行内样式
2.4.2案例4——内嵌样式
2.4.3案例5——链接样式
2.4.4案例6——导入样式
2.5调用CSS方法的优先级问题
2.5.1案例7——行内样式和内嵌样式比较
2.5.2案例8——内嵌样式和链接样式比较
2.5.3案例9——链接样式和导入样式比较
2.6综合案例——制作产品销售统计表
2.7大神解惑
2.8跟我练练手
第3章CSS3样式的基本语法
3.1CSS基本语法
3.1.1CSS构造规则
3.1.2CSS的注释
3.2CSS的常用选择器
3.2.1案例1——标签选择器
3.2.2案例2——类选择器
3..案例——选择器
3.2.4案例4——选择器的声明
3.3综合案例——制作炫彩Logo
3.4大神解惑
3.5跟我练练手
第II篇核心技术
第4章设计网页字体与段落样式
4.1美化字体样式
4.1.1案例1——控制字体类型
4.1.2案例2——定义字体小 4.1.3案例3——定义字体风格
4.1.4案例4——控制文字的粗细
4.1.5案例5——将小写字母转为大写字母
4.1.6案例6——设置字体的复合属
4.1.7案例7——定义文字的颜色
4.2CSS3中新增的文本不错样式
4.2.1案例8——添加文本的阴影效果
4.2.2案例9——设置文本溢出效果
4..案例10——控制文本的换行
4.2.4案例11——设置字体尺寸
4.3通过CSS控制文本间距与对齐方式
4.3.1案例12——设置单词之间的间隔
4.3.2案例13——设置字符之间的间隔
4.3.3案例14——为文本添加下画线、上画线、删除线
4.3.4案例15——设置垂直对齐方式
4.3.5案例16——转换文本的大小写
4.3.6案例17——设置文本的水平对齐方式
4.3.7案例18——设置文本的缩进效果
4.3.8案例19——设置文本的行高
4.3.9案例20——文本的空白处理
4.3.10案例21——文本的反排
4.4综合案例1——设置网页标题
4.5综合案例2——制作新闻页面
4.6大神解惑
4.7跟我练练手
第5章设计网页图片样式
5.1图片缩放
5.1.1案例1——通过描述标记width和height缩放图片
5.1.2案例2——使用CSS3中的max-width和max-height缩放图片
5.1.3案例3——使用CSS3中的width和height缩放图片
5.2设置图片的对齐方式
5.2.1案例4——设置图片横向对齐
5.2.2案例5——设置图片纵向对齐
5.3图文混排
5.3.1案例6——设置文字环绕效果
5.3.2案例7——设置图片与文字的间距
5.4综合案例1——制作学校宣传单
5.5综合案例2——制作简单图文混排网页
5.6大神解惑
5.7跟我练练手
第6章设计网页背景与边框样式
6.1设计网页背景样式
6.1.1案例1——设置背景颜色
6.1.2案例2——设置背景图片
6.1.3案例3——背景图片重复
6.1.4案例4——背景图片显示
6.1.5案例5——设置背景图片位置
6.2CSS3中新增的控制网页背景属
6.2.1案例6——设置背景图片小 6.2.2案例7——设置背景显示区域
6..案例——设置背景图像裁剪区域
6.2.4案例9——设置背景的复合属
6.3设计边框样式
6.3.1案例10——设置边框样式
6.3.2案例11——设置边框颜色
6.3.3案例12——设置边框线宽
6.3.4案例13——设置边框的复合属
6.4CSS3中新增的边框圆角效果
6.4.1案例14——设置圆角边框
6.4.2案例15——指定两个圆角半径
6.4.3案例16——绘制四个不同圆角边框
6.4.4案例17——绘制不同种类的边框
6.5CSS3中的渐变效果
6.5.1案例18——线渐变效果
6.5.2案例19——径向渐变效果
6.6综合案例1——制作简单公司主页
6.7综合案例2——制作简单生活资讯主页
6.8大神解惑
6.9跟我练练手
第7章设计网页链接和鼠标样式
7.1使用CSS3美化超链接
7.1.1案例1——改变链接基本样式
7.1.2案例2——设置带有提示信息的链接
7.1.3案例3——设置链接的背景图
7.1.4案例4——设置链接的按钮效果
7.2使用CSS3美化鼠标
7.2.1案例5——使用CSS3控制鼠标箭头
7.2.2案例6——设置鼠标变幻式超链接
7..案例——设置网页页面滚动条
7.3综合案例1——图片版本链接
7.4综合案例2——关于鼠标案例
7.5综合案例3——制作一个简单的导航栏
7.6大神解惑
7.7跟我练练手
第8章设计表格和表单样式
8.1美化表格样式
8.1.1案例1——设置表格边框样式
8.1.2案例2——设置表格边框宽度
8.1.3案例3——设置表格边框颜色
8.2美化表单样式
8.2.1案例4——美化表单中的元素
8.2.2案例5——美化提交按钮
8..案例——美化拉菜
8.3综合案例1——制作用户登录页面
8.4综合案例2——制作用户注册页面
8.5大神解惑
8.6跟我练练手
第9章设计列表和菜单样式
9.1美化项目列表的样式
9.1.1案例1——美化无序列表
9.1.2案例2——美化有序列表
9.1.3案例3——美化自定义列表
9.1.4案例4——制作图片列表
9.1.5案例5——缩进图片列表
9.1.6案例6——列表复合属
9.2使用CSS制作网页菜单
9.2.1案例7——制作动态导航菜单
9.2.2案例8——制作水平和垂直菜单
9.3综合案例1——模拟SOSO导航栏
9.4综合案例2——将段落转变成列表
9.5大神解惑
9.6跟我练练手
0章使用滤镜美化网页元素
10.1滤镜概述
10.2设置基本滤镜效果
10.2.1案例1——高斯模糊(blur)滤镜
10.2.2案例2——明暗度(brightness)滤镜
10..案例——对比度(contrast)滤镜
10.2.4案例4——阴影(drop-shadow)滤镜
10.2.5案例5——灰度(grayscale)滤镜
10.2.6案例6——反相(invert)滤镜
10.2.7案例7——透明度(opacity)滤镜
10.2.8案例8——饱和度(saturate)滤镜
10.2.9案例9——深褐色(sepia)滤镜
10.3使用复合滤镜效果
10.4大神解惑
10.5跟我练练手
第III篇不错应用
1章CSS3的不错特
11.1复合选择器
11.1.1案例1——全局选择器
11.1.2案例2——交集选择器
11.1.3案例3——并集选择器
11.1.4案例4——继承(后代)选择器
11.2CSS3新增的选择器
11.2.1案例5——属选择器
11.2.2案例6——结构伪类选择器
11..案例——UI元素状态伪类选择器
11.2.4案例8——伪类选择器
11.3CSS3的继承特
11.3.1案例9——继承关系
11.3.2案例10——CSS继承的运用
11.4CSS3的层叠特
11.4.1案例11——同一选择器被多次定义的处理
11.4.2案例12——同一标签运用不同类型选择器的处理
11.5综合案例——制作新闻菜单
11.6大神解惑
11.7跟我练练手
2章过渡和动画效果
12.1认识过渡效果
12.2案例1——添加过渡效果
1.了解动画效果
12.4案例2——添加动画效果
12.5大神解惑
12.6跟我练练手
3章D和D变幻效果
13.1认识2D转换效果
13.2添加2D转换效果
13.2.1案例1——添加移动效果
13.2.2案例2——添加旋转效果
13..案例——添加缩放效果
13.2.4案例4——添加倾斜效果
13.2.5案例5——添加综合变幻效果
13.3添加3D转换效果
13.4大神解惑
13.5跟我练练手
4章CSS3和JavaScript的搭配应用
14.1JavaScript语法基础
14.1.1什么是JavaScript
14.1.2数据类型
14.1.3变量
14.1.4案例1——运算符的简单应用
14.1.5案例2——流程控制语句的简单应用
14.1.6案例3——函数的简单应用
14.2常见的JavaScript编写工具
14.2.1记事本编写工具
14.2.2Dreamweaver编写工具
14.3JavaScript在HTML中的使用
14.3.1案例4——在HTML网页头中嵌入JavaScript代码
14.3.2案例5——在HTML网页中嵌入JavaScript代码
14.3.3案例6——在HTML网页的元素事件中嵌入JavaScript代码14.3.4案例7——在HTML中调用已经存在的JavaScript文件
14.3.5案例8——通过JavaScript伪URL引入JavaScript脚本代码
14.4JavaScript与CSS3的结合使用
14.4.1案例9——设置动态内容
14.4.2案例10——改变动态样式
14.4.3案例11——动态定位网页元素
14.4.4案例12——设置网页元素的显示与隐藏
14.5HTML5、CSS3和JavaScript的搭配应用
14.5.1案例13——设定左右移动的图片
14.5.2案例14——制作颜色选择器
14.5.3案例15——制作跑马灯效果
14.6综合案例——制作树形导航菜单
14.7大神解惑
14.8跟我练练手
5章CSS与XML的综合运用
15.1XML语法基础
15.1.1实例1——XML的基本应用
15.1.2实例2——XML文档的组成和声明
15.1.3实例3——XML元素介绍
15.2使用CSS修饰XML文件
15.2.1实例4——XML使用CSS
15.2.2实例5——设置字体属
15..实例——设置色彩属
15.2.4实例7——设置边框属
15.2.5实例8——设置文本属
15.3综合实例1——招聘广告
15.4综合实例2——图文混排页面
15.5综合实例3——古诗欣赏
15.6大神解惑
15.7跟我练练手
第IV篇网页布局
6章CSS定位与DIV布局核心技术
16.1认识块级元素和行内级元素
16.1.1案例1——块级元素和行内级元素的应用
16.1.2案例2——div元素和span元素的区别
16.2盒子模型
16.2.1盒子模型的概念
16.2.案例——定义网页border区域
16..案例4——定义网页padding区域
16.2.4案例5——定义网页margin区域
16.3弹盒模型
16.3.1案例6——定义盒子布局方向(box-orient)
16.3.2案例7——定义盒子布局顺序(box-direction)
16.3.3案例8——定义盒子布局位置(box-ordinal-group)
16.3.4案例9——定义盒子弹空间(box-flex)
16.3.5案例10——管理盒子空间(box-pack和box-align)
16.3.6案例11——盒子空间的溢出管理(box-lines)
16.4综合案例1——图文排版效果
16.5综合案例2——导购菜单
16.6大神解惑
16.7跟我练练手
7章CSS+DIV盒子的浮动与定位
17.1定义DIV
17.1.1什么是DIV
17.1.2案例1——创建DIV
17.2盒子的定位
17.2.1案例2——静态定位
17.2.案例——相对定位
17..案例4——定位
17.2.4案例5——固定定位
17.2.5案例6——盒子的浮动
17.3CSS布局定位方式
17.3.1案例7——溢出(overflow)定位
17.3.2案例8——隐藏(visibility)定位
17.3.3案例9——z-index空间定位
17.4新增CSS3多列布局
17.4.1案例10——设置列宽度
17.4.2案例11——设置列数
17.4.3案例12——设置列间距
17.4.4案例13——设置列边框样式
17.5综合案例1——定位网页布局样式
17.6综合案例2——制作阴影文字效果
17.7大神解惑
17.8跟我练练手
8章固定宽度网页布局剖析与制作
18.1CSS排版的观念
18.1.1将页面用div分块
18.1.2设置各块位置
18.1.3案例1——用CSS定位
18.2固定宽度网页剖析与布局
18.2.1案例2——网页单列布局模式
18.2.案例——网页“1-2-1”型布局模式
18..案例4——网页“1-3-1”型布局模式
18.3大神解惑
18.4跟我练练手
9章自动缩放网页布局剖析与制作
19.1自动缩放网页“1-2-1”型布局模式
19.1.1案例1——“1-2-1”等比例变宽布局
19.1.2案例2——“1-2-1”单列变宽布局
19.2自动缩放网页“1-3-1”型布局模式
19.2.1“1-3-1”三列宽度等比例布局
19.2.案例——“1-3-1”单侧列宽度固定的变宽布局
19..案例4——“1-3-1”中间列宽度固定的变宽布局
19.2.4案例5——“1-3-1”双侧列宽度固定的变宽布局
19.2.5案例6——“1-3-1”中列和左侧列宽度固定的变宽布局
19.3分列布局背景色的使用
19.3.1案例7——设置固定宽度布局的列背景色
19.3.2案例8——设置特殊宽度变化布局的列背景色
19.4综合案例1——单列宽度变化布局
19.5综合案例2——多列等比例宽度变化布局
19.6大神解惑
19.7跟我练练手
第20章创建响应式页面
20.1了解弹盒子
20.2案例1——使用弹盒子
20.3案例2——设置弹子元素的位置
20.4案例3——设置弹子元素的横向对齐方式
20.5案例4——设置弹子元素的纵向对齐方式
20.6案例5——设置弹子元素的换行方式
20.7综合案例——使用弹盒子创建响应式页面
20.8大神解惑
20.9跟我练练手
第V篇项目案例实战
2章设计商业门户类网页
21.1整体设计
21.1.1颜色应用分析
21.1.2架构布局分析
21.2主要模块设计
21.2.1网页整体样式插入
21.2.2网页局部样式
21..顶部模块样式代码分析
21.2.4中间主体代码分析
21.2.5底部模块分析
21.3调整
21.3.1部分内容调整
21.3.2模块调整
21.3.3调整后预览测试
第22章设计图像影音类网页
22.1整体设计
22.1.1颜色应用分析
22.1.2架构布局分析
22.2主要模块设计
22.2.1样式代码分析
22.2.2顶部模块样式代码分析
22..主体模块代码分析
22.2.4底部模块分析
2.调整
2..1部分内容调整
2..2模块调整
2..调整后预览测试
第章设计娱乐休闲类网页
.1整体设计
.1.1应用设计分析
.1.2架构布局分析
.2主要模块设计
.2.1网页整体样式插入
.2.2顶部模块代码分析
..视频模块代码分析
.2.4评论模块代码分析
.2.5热门模块代码分析
.2.6底部模块分析
.网页调整
..1部分内容调整
..2调整后预览测试
第24章设计企业门户类网页
24.1构思布局
24.1.1设计分析
24.1.2排版架构
24.2主要模块设计
24.2.1Logo与导航菜单
24.2.2Banner区
24..资讯区
24.2.4版权信息
第25章设计在线购物类网页
25.1整体布局
25.1.1设计分析
25.1.2排版架构
25.2主要模块设计
25.2.1Logo与导航区
25.2.2Banner与资讯区
25..产品类别区域
25.2.4页脚区域