HTML+CSS3网页设计与制作案例课堂PDF|Epub|txt|kindle电子书版本网盘下载

HTML+CSS3网页设计与制作案例课堂PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1章 HTML与CSS 3网页设计概述1

1.1 网页与网站2

1.1.1 什么是网页和网站2

1.1.2 网页的基本构成元素2

1.2 HTML的基本概念3

1.2.1 什么是HTML4

1.2.2 HTML的发展历程4

1.2.3 HTML文件的基本结构4

1.3 CSS的基本概念5

1.3.1 什么是CSS5

1.3.2 HTML与CSS的优缺点5

1.3.3 浏览器对CSS 3的支持6

1.4 HTML与CSS网页的开发环境6

1.4.1 记事本开发环境6

1.4.2 DreamweaverCS6开发环境7

1.5 专家答疑7

第2章 网页文档的结构9

2.1 HTML文档的基本结构10

2.1.1 HTML页面的整体结构10

2.1.2 HTML5新增的结构标记10

2.2 HTML5的基本标记详解11

2.2.1 文档类型说明11

2.2.2 HTML标记11

2.2.3 头标记head11

2.2.4 网页的主体标记body14

2.2.5 页面注释标记＜！----＞15

2.3 HTML.5语法的变化15

2.3.1 标签不再区分大小写15

2.3.2 允许属性值不使用引号16

2.3.3 允许部分属性值的属性省略17

2.4 HTML 5文件的编写方法17

2.4.1 示例1——使用记事本手工编写HTML 517

2.4.2 示例2——使用Dreamweaver CS6编写HTML文件18

2.5 使用浏览器查看HTML5文件20

2.5.1 示例3——查看页面效果20

2.5.2 示例4——查看源文件21

2.6 综合示例——符合W3C标准的HTML5网页21

2.7 上机练习——简单的HTML5网页22

2.8 专家答疑23

第3章 网页文本的设计25

3.1 在网页中添加文本26

3.1.1 普通文本的添加26

3.1.2 特殊字符文本的添加26

3.2 使用HTML5标记添加特殊文本28

3.2.1 添加重要文本28

3.2.2 添加倾斜文本29

3.2.3 添加上标和下标文本29

3.2.4 设置文本旁注的文字大小30

3.2.5 设置已删除文本30

3.2.6 定义文本的方向31

3.3 使用HTML5标记排版网页文本31

3.3.1 网页段落文本换行32

3.3.2 分段显示网页段落文本32

3.3.3 设定网页中的标题文本33

3.3.4 为网页添加水平线34

3.4 文字列表35

3.4.1 建立无序列表＜ul＞35

3.4.2 建立有序列表＜ol＞36

3.4.3 建立不同类型的无序列表37

3.4.4 建立不同类型的有序列表38

3.4.5 建立嵌套列表39

3.4.6 自定义列表39

3.5 综合示例——制作简单的纯文本网页40

3.6 上机练习——制作旅游网网页41

3.7 专家答疑42

第4章 网页色彩和图像的设计43

4.1 网页色彩的应用44

4.1.1 认识色彩44

4.1.2 网页中色彩的搭配45

4.1.3 网页元素的色彩搭配46

4.1.4 网页颜色的使用风格47

4.1.5 精彩配色赏析48

4.2 网页中的图像＜img＞49

4.2.1 在网页中插入图像49

4.2.2 设置图像的宽度和高度51

4.2.3 设置图像的提示文字51

4.2.4 将图片设置为网页背景52

4.2.5 排列图像53

4.3 综合示例——图文并茂的房屋装饰装修网页54

4.4 上机练习——在线购物网站的产品展示55

4.5 专家答疑56

第5章 网页超链接的设计57

5.1 链接和路径58

5.1.1 超链接的概念58

5.1.2 链接路径URL58

5.1.3 创建HTTP路径60

5.1.4 创建FTP路径61

5.1.5 创建电子邮件路径61

5.2 创建网页文本链接62

5.2.1 使用链接元素＜a＞创建文本超链接（1）62

5.2.2 使用链接元素＜a＞创建文本超链接（2）63

5.2.3 设置以新窗口显示超链接页面64

5.2.4 链接到同一页面的不同位置65

5.3 创建网页图像链接66

5.3.1 创建图像超链接67

5.3.2 创建图像局部链接67

5.4 创建浮动框架68

5.5 综合示例——用Dreamweaver精确定位热点区域69

5.6 上机练习——创建热点区域71

5.7 专家答疑72

第6章 网页表单的设计75

6.1 表单概述76

6.2 在网页中添加基本的表单元素76

6.2.1 添加单行文本输入框77

6.2.2 添加多行文本输入框77

6.2.3 添加密码输入框78

6.2.4 添加单选按钮79

6.2.5 添加复选框80

6.2.6 添加下拉选择框80

6.2.7 添加普通按钮81

6.2.8 添加提交按钮82

6.2.9 添加重置按钮83

6.3 在网页中添加高级表单元素84

6.3.1 添加不能为空的网站网址输入框84

6.3.2 添加邮箱输入框85

6.3.3 添加时间类型表单86

6.3.4 添加数值输入框87

6.3.5 添加滚动控件87

6.3.6 添加不能为空的表单元素88

6.4 综合示例——创建用户反馈表单89

6.5 上机练习——制作用户注册表单90

6.6 专家答疑91

第7章 网页表格的设计93

7.1 表格的基本结构94

7.2 创建表格95

7.2.1 创建普通表格95

7.2.2 创建一个带有标题的表格96

7.3 编辑表格97

7.3.1 定义表格的边框类型97

7.3.2 定义表格的表头98

7.3.3 设置表格的背景99

7.3.4 设置单元格的背景101

7.3.5 合并单元格102

7.3.6 排列单元格中的内容106

7.3.7 设置单元格的行高与列宽107

7.4 完整的表格标记108

7.5 综合示例——制作计算机报价表109

7.6 上机练习——制作学生成绩表111

7.7 专家答疑114

第8章 网页音频和视频的设计117

8.1 audio标签118

8.1.1 audio标签概述118

8.1.2 audio标签的属性119

8.1.3 audio标签浏览器的支持情况119

8.2 在网页中添加音频文件120

8.2.1 添加自动播放音频文件120

8.2.2 添加带有控件的音频文件120

8.2.3 添加循环播放的音频文件121

8.2.4 添加预播放的音频文件121

8.3 video标签122

8.3.1 video标签概述122

8.3.2 video标签的属性123

8.3.3 video标签浏览器的支持情况124

8.4 在网页中添加视频文件124

8.4.1 添加自动播放的视频文件124

8.4.2 添加带有控件的视频文件125

8.4.3 添加循环播放的视频文件125

8.4.4 添加预播放的视频文件126

8.4.5 设置视频文件的高度和宽度127

8.5 专家答疑127

第9章 网页图形的绘制129

9.1 添加canvas的步骤130

9.2 绘制基本形状130

9.2.1 绘制矩形131

9.2.2 绘制圆形132

9.2.3 使用moveTo与1ineTo绘制直线133

9.2.4 使用bezierCurveTo绘制贝塞尔曲线134

9.3 绘制渐变图形136

9.3.1 绘制线性渐变136

9.3.2 绘制径向渐变137

9.4 绘制变形图形138

9.4.1 绘制平移效果的图形138

9.4.2 绘制缩放效果的图形139

9.4.3 绘制旋转效果的图形140

9.4.4 绘制组合效果的图形141

9.4.5 绘制带阴影的图形143

9.5 使用图像144

9.5.1 绘制图像145

9.5.2 平铺图像146

9.5.3 裁剪图像147

9.5.4 图像的像素处理149

9.6 绘制文字150

9.7 图形的保存与恢复152

9.7.1 保存与恢复状态152

9.7.2 保存文件153

9.8 综合示例——绘制火柴棒人物154

9.9 上机练习——绘制商标157

9.10 专家答疑158

第10章 CSS 3网页样式核心基础161

10.1 CSS 3基础语法概述162

10.1.1 CSS 3的构造规则162

10.1.2 CSS 3的常用单位162

10.1.3 CSS 3的注释166

10.2 编辑CSS 3文件的方法167

10.2.1 手工编写CSS 3167

10.2.2 用Dreamweaver编写CSS168

10.3 在HTML5中使用CSS 3的方法169

10.3.1 行内样式169

10.3.2 内嵌样式170

10.3.3 链接样式171

10.3.4 导入样式172

10.3.5 优先级问题173

10.4 CSS 3的基本选择器176

10.4.1 标签选择器176

10.4.2 类选择器177

10.4.3 ID选择器178

10.4.4 全局选择器179

10.5 综合示例——制作炫彩网站Logo179

10.6 上机练习——制作学生信息统计表182

10.7 专家答疑184

第11章 使用CSS 3控制网页字体与段落样式185

11.1 丰富网页文字样式186

11.1.1 设置文字的字体样式186

11.1.2 设置文字的字号187

11.1.3 设置字体风格188

11.1.4 设置加粗字体189

11.1.5 将小写字母转为大写字母190

11.1.6 设置字体的复合属性191

11.1.7 设置字体颜色192

11.2 网页文本的高级样式193

11.2.1 设置文本阴影效果193

11.2.2 设置文本溢出效果194

11.2.3 设置文本的控制换行195

11.2.4 保持字体尺寸不变196

11.3 丰富网页中的段落样式197

11.3.1 设置单词之间的间隔197

11.3.2 设置字符之间的间隔198

11.3.3 设置文字的修饰效果199

11.3.4 设置垂直对齐方式200

11.3.5 转换文本的大小写202

11.3.6 设置文本的水平对齐方式203

11.3.7 设置文本的缩进效果204

11.3.8 设置文本的行高205

11.3.9 文本的空白处理206

11.3.10 文本的反排207

11.4 综合示例——设置网页标题208

11.5 上机练习——制作新闻页面210

11.6 专家答疑211

第12章 使用CSS 3控制网页图片的显示样式213

12.1 缩放图片214

12.1.1 使用描述标记width和height缩放图片214

12.1.2 使用CSS 3中的max-width和max-height缩放图片214

12.1.3 使用CSS 3中的width和height缩放图片215

12.2 网页图片与文字的对齐方式216

12.2.1 横向对齐方式216

12.2.2 纵向对齐方式217

12.3 图文混排样式219

12.3.1 设置文字环绕效果219

12.3.2 设置图片与文字的间距220

12.4 综合示例——制作学校宣传单222

12.5 上机练习——制作简单的图文混排网页224

12.6 专家答疑225

第13章 使用CSS 3控制网页背景与边框的样式227

13.1 使用CSS 3美化背景228

13.1.1 设置背景颜色228

13.1.2 设置背景图片229

13.1.3 背景图片重复230

13.1.4 背景图片显示231

13.1.5 背景图片位置233

13.1.6 背景图片大小234

13.1.7 背景显示区域236

13.1.8 背景图像裁剪区域237

13.1.9 背景复合属性238

13.2 使用CSS 3美化边框239

13.2.1 设置边框的样式240

13.2.2 设置边框的颜色241

13.2.3 设置边框的线宽242

13.2.4 设置边框的复合属性244

13.3 设置边框的圆角效果245

13.3.1 设置圆角边框245

13.3.2 指定两个圆角半径246

13.3.3 绘制四个不同圆角边框247

13.3.4 绘制不同种类的边框249

13.4 综合示例——制作简单的公司主页250

13.5 上机练习——制作简单的生活资讯主页253

13.6 专家答疑255

第14章 使用CSS 3控制表格和表单样式257

14.1 美化表格的样式258

14.1.1 设置表格边框的样式258

14.1.2 设置表格边框的宽度260

14.1.3 设置表格边框的颜色261

14.2 美化表单样式262

14.2.1 美化表单中的元素262

14.2.2 美化提交按钮264

14.2.3 美化下拉菜单265

14.3 综合示例——制作用户登录页面267

14.4 上机练习——制作用户注册页面268

14.5 专家答疑270

第15章 使用CSS 3控制网页超链接和鼠标的样式273

15.1 使用CSS 3丰富超链接样式274

15.1.1 改变超链接的基本样式274

15.1.2 设置带有提示信息的超链接275

15.1.3 设置超链接的背景图276

15.1.4 设置超链接的按钮效果277

15.2 使用CSS 3丰富鼠标样式278

15.2.1 使用CSS 3控制鼠标箭头278

15.2.2 设置鼠标变幻式超链接280

15.2.3 设置网页的页面滚动条281

15.3 综合示例1——图片版本的超链接283

15.4 综合示例2——鼠标特效284

15.5 上机练习——制作一个简单的导航栏287

15.6 专家答疑288

第16章 使用CSS 3控制网页导航菜单的样式291

16.1 使用CSS 3来丰富项目的列表样式292

16.1.1 丰富无序列表样式292

16.1.2 丰富有序列表样式293

16.1.3 丰富自定义列表样式295

16.1.4 制作图片列表296

16.1.5 缩进图片列表298

16.1.6 列表的复合属性299

16.2 使用CSS 3制作网页菜单300

16.2.1 制作无需表格的菜单300

16.2.2 制作水平和垂直菜单302

16.3 综合示例——模拟搜搜导航栏304

16.4 上机练习——将段落转变成列表307

16.5 专家答疑309

第17章 掌握CSS 3的高级属性311

17.1 复合选择器312

17.1.1 “交集”选择器312

17.1.2 “并集”选择器313

17.1.3 后代选择器313

17.2 CSS 3新增的选择器314

17.2.1 属性选择器315

17.2.2 结构伪类选择器316

17.2.3 UI元素状态伪类选择器318

17.3 CSS的继承特性319

17.3.1 继承关系319

17.3.2 CSS继承的运用320

17.4 CSS的层叠特性321

17.4.1 同一选择器被多次定义的处理321

17.4.2 同一标签运用不同类型选择器的处理322

17.5 综合示例——制作新闻菜单323

17.6 专家答疑326

第18章 CSS 3定位与DIV布局核心技术327

18.1 了解块级元素和行内级元素328

18.1.1 块级元素和行内级元素的应用328

18.1.2 div元素和span元素的区别330

18.2 盒子模型331

18.2.1 盒子模型的概念331

18.2.2 定义网页的border区域332

18.2.3 定义网页的padding区域333

18.2.4 定义网页的margin区域334

18.3 CSS 3新增的弹性盒模型338

18.3.1 定义盒子的布局取向（box-orient）338

18.3.2 定义盒子的布局顺序（box-direction）339

18.3.3 定义盒子布局的位置（box-ordinal-group）341

18.3.4 定义盒子的弹性空间（box-flex）342

18.3.5 管理盒子空间（box-pack和box-align）344

18.3.6 盒子空间的溢出管理（box-1ines）346

18.4 综合示例——图文排版效果347

18.5 上机练习——淘宝导购菜单349

18.6 专家答疑352

第19章 CSS 3+DIV盒子的浮动与定位353

19.1 定义DIV354

19.1.1 什么是DIV354

19.1.2 创建D1V354

19.2 盒子的定位355

19.2.1 静态定位355

19.2.2 相对定位356

19.2.3 绝对定位357

19.2.4 固定定位358

19.2.5 盒子的浮动359

19.3 其他CSS布局定位方式361

19.3.1 溢出（overflow）定位361

19.3.2 隐藏（visibility）定位362

19.3.3 z-index空间定位364

19.4 新增的CSS 3多列布局366

19.4.1 设置列宽度366

19.4.2 设置列数367

19.4.3 设置列间距369

19.4.4 设置列边框样式370

19.5 综合示例——定位网页布局样式372

19.6 上机练习——制作阴影文字效果374

19.7 专家答疑375

第20章 网页布局剖析与制作377

20.1 固定宽度网页剖析与布局378

20.1.1 示例1——网页单列布局模式378

20.1.2 示例2——网页1-2-1型布局模式381

20.1.3 示例3——网页1-3-1型布局模式384

20.2 自动缩放网页1-2-1型布局模式387

20.2.1 示例4——“1-2-1”等比例变宽布局387

20.2.2 示例5——“1-2-1”单列变宽布局388

20.3 自动缩放网页1-3-1型布局模式389

20.3.1 示例6-—“1-3-1”三列宽度等比例布局390

20.3.2 示例7——“1-3-1”单侧列宽度固定的变宽布局390

20.3.3 示例8——“1-3-1”中间列宽度固定的变宽布局393

20.3.4 示例9——“1-3-1”双侧列宽度固定的变宽布局396

20.3.5 示例10——“1-3-1”中列和左侧列宽度固定的变宽布局399

20.4 分列布局背景色的使用402

20.4.1 示例11——设置固定宽度布局的列背景色402

20.4.2 示例12——设置特殊宽度变化布局的列背景色404

20.4.3 示例13——设置单列宽度变化布局的列背景色405

20.4.4 示例14——设置多列等比例宽度变化布局的列背景406

20.5 专家答疑408

第21章 制作企业门户类网页411

21.1 构思布局412

21.1.1 设计分析412

21.1.2 排版架构412

21.2 模块分割413

21.2.1　Logo与导航菜单413

21.2.2 左侧的文本介绍415

21.2.3 右侧的导航链接417

21.2.4 版权信息418