HTML5+CSS3网页设计案例教程PDF电子书下载

第1章 网页设计基础知识 1

1.1网页相关知识简介 1

1.1.1互联网、因特网、万维网 1

1.1.2网站、网页和主页 2

1.1.3浏览器 4

1.1.4统一资源定位器 4

1.2网页的基本元素 4

1.2.1网页的组成元素 5

1.2.2网页的构成要素 7

1.3网站建设流程 10

1.3.1网站需求分析 10

1.3.2网站规划 10

1.3.3创建本地站点 12

1.3.4组织站点结构 12

1.3.5设计和制作各级页面 13

1.3.6申请空间和域名 13

1.3.7测试和发布网站 14

1.3.8网站的推广与维护 14

1.4网页的版式布局 14

1.4.1网页布局原则 15

1.4.2常见的版式布局形式 15

1.5网页色彩搭配 19

1.6网页设计的原则和成功要素 20

1.7认识HTML和CSS 20

习题 21

第2章 HTML基础 22

2.1认识HTML 22

2.2 HTML文档的基本结构 23

2.3 HTML文件的编写和查看 23

2.3.1 HTML文件的编写和查看 23

2.3.2 HTML文件的命名 25

2.4 HTML基本语法 25

2.4.1 HTML标记 25

2.4.2 HTML属性 25

2.4.3全局属性 26

2.5 HTML文件头部内容〈head〉 28

2.5.1设置页面标题〈title〉 28

2.5.2定义元数据〈meta〉 28

2.5.3常用元数据 29

2.6 HTML文件主体内容〈body〉 30

2.7综合案例——最基本的HTML5网页 30

习题 31

第3章 文字与段落 32

3.1编辑内容 32

3.1.1添加普通文字 32

3.1.2添加特殊符号 33

3.1.3添加注释 33

3.2文字排版 33

3.2.1控制换行〈br〉 33

3.2.2预先格式化〈pre〉 34

3.2.3段落〈p〉 34

3.2.4加入水平线〈hr〉 35

3.2.5标题文字〈hl〉-〈h6〉 36

3.3强调文本 37

3.3.1设置粗体和斜体〈b〉/〈i〉 37

3.3.2标记文本改变〈ins〉/〈del〉 37

3.3.3小型文本〈small〉 38

3.4语义化、结构化的文本 38

3.4.1文字上下标〈sup〉/〈sub〉 38

3.4.2注音显示〈ruby〉/〈rt〉/〈rp〉 39

3.4.3标注〈cite〉 40

3.4.4定义日期时间〈time〉 40

3.4.5其他语义化、结构化文本 41

3.5列表 41

3.5.1无序列表〈ul〉 41

3.5.2有序列表〈ol〉 42

3.5.3定义列表〈dl〉/〈dt〉/〈dd〉 42

3.5.4嵌套列表 43

3.6综合实例——简单文字网页 45

习题 46

第4章 网页图像和多媒体元素 48

4.1图像、视频和音频的格式 48

4.1.1网页图像的格式 48

4.1.2视频格式 49

4.1.3音频格式 49

4.2在网页中加入图像〈img〉 49

4.2.1图像资源属性——src属性 49

4.2.2图像替代文本——alt属性 50

4.2.3图像的宽高——width和height属性 50

4.3在网页中加入视频〈video〉 51

4.3.1视频资源属性——src属性 51

4.3.2视频播放控件属性——controls属性 52

4.3.3视频准备播放控件——preload 52

4.3.4 〈video〉的其他属性 52

4.3.5 〈video〉与〈source〉的配合使用 53

4.4在网页中加入音频〈audio〉 53

4.5插入多媒体文件〈embed〉 55

4.5.1插入Flash动画 55

4.5.2插入视频 56

4.5.3插入音频 56

4.6链入对象〈object〉 57

4.7定义媒介分组和标题〈figure〉/〈figcaption〉 57

4.8综合实例——多媒体页面的设计 58

习题 60

第5章 超链接 63

5.1超链接概述 63

5.2超链接的路径 63

5.2.1绝对路径 63

5.2.2相对路径 64

5.2.3根路径 64

5.3超链接的建立〈a〉 64

5.3.1插入外部链接 65

5.3.2插入内部链接 65

5.3.3以图像为源点的链接 66

5.3.4链接打开目标target属性 66

5.3.5链接的其他属性 66

5.3.6链接的目标类型 67

5.3.7 Email链接 68

5.4锚记（书签）链接 68

5.5设置图像映射 70

5.5.1了解热区和图像映射 70

5.5.2创建图像映射〈map〉/〈area〉 70

5.6浮动窗口及其链接〈iframe〉 71

5.6.1浮动窗口 71

5.6.2链接浮动窗口 71

5.7定义基准网址〈base〉 72

5.8综合实例——设置超链接 73

习题 75

第6章 表格的应用 78

6.1表格概述 78

6.2创建表格 79

6.2.1表格基本结构〈table〉/〈tr〉/〈th〉/〈td〉 79

6.2.2表格边框显示——border属性 80

6.2.3 〈th〉标记的使用 81

6.2.4表格标题〈caption〉 82

6.3合并单元格 83

6.3.1设置跨列——colspan 83

6.3.2设置跨行——rowspan 84

6.4表格嵌套 85

6.5表格的按行分组显示〈thead〉/〈tbody〉/〈tfoot〉 86

6.6综合实例——表格应用 87

6.6.1表格显示数据 87

6.6.2使用表格布局 88

习题 90

第7章 表单 91

7.1表单概述 91

7.2建立表单〈form〉 92

7.3表单控件 93

7.3.1文本框和密码框 94

7.3.2提交按钮、重置按钮和普通按钮 95

7.3.3单选按钮 95

7.3.4复选框 96

7.3.5文件域 96

7.3.6图像域 97

7.3.7多行文字框 98

7.3.8列表 98

7.4表单高级元素使用 100

7.4.1 url属性 100

7.4.2 email属性 100

7.4.3 date和Times 101

7.4.4 number属性 102

7.4.5 range属性 102

7.4.6 color属性 103

7.4.7 fieldset控件组 104

7.4.8其他类型的输入表单控件 105

7.5通用的表单属性 105

7.5.1表单重写属性 105

7.5.2 form属性 106

7.5.3 autofocus属性 107

7.5.4 multiple属性 107

7.5.5 placeholder属性 108

7.5.6 required属性 109

7.5.7 pattern属性 109

7.6综合实例——表单设计 110

习题 111

第8章 CSS语法基础 113

8.1 CSS介绍 113

8.1.1 CSS概述 113

8.1.2 CSS3 114

8.2 CSS的基本语法 114

8.3在HTML文档中使用CSS的方法 115

8.3.1行内样式 115

8.3.2内嵌样式 116

8.3.3链接外部样式 117

8.3.4导入外部样式 118

8.4 CSS元素选择符 119

8.4.1标记选择符 119

8.4.2通用选择符 119

8.4.3类选择符 120

8.4.4 id选择符 121

8.5其他CSS选择符 122

8.5.1伪类选择符 122

8.5.2伪对象选择符 122

8.5.3组合选择符 123

8.5.4关系选择符 123

8.5.5属性选择符 127

8.6综合案例——CSS的简单应用 128

习题 130

第9章 CSS字体与段落 132

9.1颜色color 132

9.2字体属性 133

9.2.1设置字体font-family 133

9.2.2设置字号font-size 134

9.2.3设置字体风格font-style 135

9.2.4设置字体加粗font-weight 136

9.2.5设置小型大写字母font-variant 137

9.2.6字体复合属性font 138

9.3文本高级样式 139

9.3.1行高line-height 139

9.3.2文本缩进text-indent 140

9.3.3水平对齐方式text-align 142

9.3.4垂直对齐方式vertical-align 143

9.3.5大小写text-transfor 144

9.3.6单词间距word-spacing 145

9.3.7字符间隔letter-spacing 146

9.3.8文本修饰text-decoration 147

9.3.9文本阴影text-shadow 148

9.4综合实例——简单图文混排网页 149

习题 152

第10章 CSS盒子 154

10.1基本的盒子BOX概念 154

10.1.1盒子的基本形式 154

10.1.2盒子大小的计算width/height 155

10.1.3改变盒子大小的计算方式box-sizing 156

10.2基本边框属性 157

10.2.1边框样式 157

10.2.2边框线宽 159

10.2.3边框颜色 161

10.2.4边框复合属性 162

10.3补白 164

10.3.1内补白 164

10.3.2外补白 165

10.4其他边框属性 167

10.4.1圆角边框 167

10.4.2图像边框 169

10.4.3盒子阴影box-shadow 172

10.4.4 BOX线条外廓 174

10.5综合案例——简单地产网页 175

习题 180

第11章 CSS颜色和背景 182

11.1背景颜色 182

11.1.1网页背景颜色background-color 182

11.1.2用背景色给页面分块 183

11.2背景图像 185

11.2.1页面背景图像background-image 185

11.2.2背景图像重复background-repeat 186

11.2.3背景图像滚动background-attachment 187

11.2.4背景图像位置background-position 189

11.2.5背景显示区域background-origin 190

11.2.6背景图像大小background-size 191

11.2.7背景图像裁剪区域background-clip 192

11.2.8背景复合属性background 194

11.3定义透明度 194

11.4综合实例——设置背景 195

习题 198

第12章 CSS美化其他页面元素 201

12.1超链接特效 201

12.1.1超链接样式变换 201

12.1.2按钮式超链接 202

12.2鼠标特效 203

12.2.1鼠标指针形状 204

12.2.2鼠标变换的超链接 204

12.3项目列表 205

12.3.1列表符号list-style-type 206

12.3.2图片符号list-stule-image 208

12.3.3列表位置list-style-position 209

12.3.4列表综合设置list-style 210

12.3.5使用列表制作菜单 211

12.3.6下拉菜单 214

12.4综合实例——Tab菜单 217

习题 222

第13章 用CSS美化表格与表单 224

13.1表格的基本样式 224

13.1.1表格边框样式 224

13.1.2表格颜色 225

13.1.3盒子阴影 226

13.2 〈col〉和〈colgroup〉 228

13.2.1 〈col〉标记 228

13.2.2 〈colgroup〉标记 229

13.2.3 〈colgroup〉分组 230

13.2.4 〈col〉和〈colgroup〉组合应用 231

13.3表格综合实例 232

13.4 CSS美化表单 234

13.4.1美化表单元素边框 234

13.4.2美化表单元素颜色 235

13.4.3美化表单元素背景图像 235

13.4.4按钮样式 236

13.5表格表单综合实例——调查问卷 237

13.5.1页面布局设计 238

13.5.2标题栏的设计 242

13.5.3题目区的设计 243

第14章 CSS定位、布局与分栏 246

14.1理解CSS定位与div布局 246

14.1.1 〈div〉 246

14.1.2 〈span〉 247

14.2 CSS元素的定位 248

14.2.1定位方式————position 248

14.2.2设置位置——top、 bottom、right、 left 249

14.2.3堆叠次序——z-index 251

14.3 CSS布局属性 253

14.3.1可见性—— visibility 253

14.3.2剪裁——clip 254

14.3.3溢出——overflow 255

14.3.4浮动——float 256

14.3.5清除——clear 257

14.4 CSS分栏 259

14.4.1列—— columns 259

14.4.2平衡列——column-fill 261

14.4.3列间距column-gap 261

14.4.4 列边框样式column-rule 263

14.4.5跨列样式——column-span 265

14.5综合案例——页面分块布局 265

习题 269

第15章 DIV+CSS布局 271

15.1 CSS排版概念 271

15.1.1将页面用div分块 271

15.1.2设计各分块位置 271

15.1.3设计各分块细节 273

15.2页面布局方式 274

15.2.1上中下结构布局 274

15.2.2左右结构布局 276

15.2.3“国”字形结构 277

15.2.4隐藏布局 279

15.3各种布局版式 281

15.3.1骨骼型版式 281

15.3.2对称型版式 284

15.3.3满版型版式 287

15.3.4其他版式 289

15.4综合案例——DIV+CSS布局综合应用 290

15.4.1首页设计 290

15.4.2详细页面设计 293

习题 295

第16章 网页编辑工具Dreamweaver 297

16.1 Dreamweaver工具介绍 297

16.1.1 Dreamweaver软件概述 297

16.1.2 DreamweaverCS5.5软件介绍 298

16.1.3 Dreamweaver的工作流程 303

16.2使用Dreamweaver设计网页 304

16.2.1创建站点和组织站点结构 304

16.2.2设计并创建网页 305

16.3使用Dreamweaver设定CSS样式 307

16.3.1 CSS样式在Dreamweaver中设定的基础知识 307

16.3.2 CSS样式的创建和应用案例 312

16.4使用Dreamweaver编码 313

16.4.1使用Dreamweaver对网页编码的常识 313

16.4.2使用Dreamweaver编码的编辑思路 315

16.4.3使用Dreamweaver编码的案例 316

16.5综合实例——使用Dreamweaver制作网页 321

16.5.1规划和设置站点 321

16.5.2设计网页布局 322

16.5.3添加页面内容 322

16.5.4通过手动编码创建页面 322

16.5.5测试和发布 324

习题 324

第17章 综合案例——宝贝花园 326

17.1网页布局概述 326

17.2首页的设计 327

17.3主标题区 335

17.3.1网页首部 336

17.3.2标题新闻区 337

17.4主内容区 338

17.4.1滚动字幕区 338

17.4.2主内容区 339

17.5页尾区 342

17.6内容页的设计 343

17.7联系页面的设计 344

17.7.1页面布局 344

17.7.2左侧栏 345

17.7.3右侧栏 347

第18章 综合案例——购物网站 348

18.1首页设计 348

18.1.1首页页面布局 348

18.1.2首页头部设计 353

18.1.3主体部分设计 354

18.1.4脚注部分设计 356

18.2内容页设计 356

18.2.1商品分类信息页 356

18.2.2单类商品信息页 358

第19章 综合案例——中秋节网站 360

19.1节日类网站设计分析 360

19.2实例制作——中秋节网站设计 360

19.2.1中秋节网站策划 360

19.2.2主页和内页效果 361

19.2.3网站主页的设计 363

19.2.4网站内页的设计 368