HTML5+CSS3网页设计案例教程PDF|Epub|txt|kindle电子书版本网盘下载

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和CSS20

习题21

第2章 HTML基础22

2.1认识HTML22

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视频准备播放控件——preload52

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设置跨列——colspan83

6.3.2设置跨行——rowspan84

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和Times101

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 CSS3114

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颜色color132

9.2字体属性133

9.2.1设置字体font-family133

9.2.2设置字号font-size134

9.2.3设置字体风格font-style135

9.2.4设置字体加粗font-weight136

9.2.5设置小型大写字母font-variant137

9.2.6字体复合属性font138

9.3文本高级样式139

9.3.1行高line-height139

9.3.2文本缩进text-indent140

9.3.3水平对齐方式text-align142

9.3.4垂直对齐方式vertical-align143

9.3.5大小写text-transfor144

9.3.6单词间距word-spacing145

9.3.7字符间隔letter-spacing146

9.3.8文本修饰text-decoration147

9.3.9文本阴影text-shadow148

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

习题152

第10章 CSS盒子154

10.1基本的盒子BOX概念154

10.1.1盒子的基本形式154

10.1.2盒子大小的计算width/height155

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

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-shadow172

10.4.4 BOX线条外廓174

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

习题180

第11章 CSS颜色和背景182

11.1背景颜色182

11.1.1网页背景颜色background-color182

11.1.2用背景色给页面分块183

11.2背景图像185

11.2.1页面背景图像background-image185

11.2.2背景图像重复background-repeat186

11.2.3背景图像滚动background-attachment187

11.2.4背景图像位置background-position189

11.2.5背景显示区域background-origin190

11.2.6背景图像大小background-size191

11.2.7背景图像裁剪区域background-clip192

11.2.8背景复合属性background194

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-type206

12.3.2图片符号list-stule-image208

12.3.3列表位置list-style-position209

12.3.4列表综合设置list-style210

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定位方式————position248

14.2.2设置位置——top、 bottom、right、 left249

14.2.3堆叠次序——z-index251

14.3 CSS布局属性253

14.3.1可见性—— visibility253

14.3.2剪裁——clip254

14.3.3溢出——overflow255

14.3.4浮动——float256

14.3.5清除——clear257

14.4 CSS分栏259

14.4.1列—— columns259

14.4.2平衡列——column-fill261

14.4.3列间距column-gap261

14.4.4 列边框样式column-rule263

14.4.5跨列样式——column-span265

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章 网页编辑工具Dreamweaver297

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