HTML5 CSS3 RWD jQueryMobile跨设备网页设计PDF电子书下载

第1章 网页设计简介 1

1-1网页设计的流程 2

1-1-1搜集资料与规划网站架构 2

1-1-2网页制作与测试 3

1-1-3网站上传与推广 3

1-1-4网站更新与维护 4

1-1-5搜索引擎优化 5

1-2网页设计相关的程序设计语言 5

1-3 HTML的演进 8

1-4 HTML5的新功能 10

1-5 HTML5文件的编写方式 13

1-5-1 HTML5文件的编辑工具 13

1-5-2 HTML5文件的基本语法 15

1-5-3编写第一份HTML5文件 19

1-5-4 HTML5文件的验证 21

习题 22

第2章 文件结构 23

2-1 HTML文件的DOCTYPE—— 〈！doctype〉元素 24

2-2 HTML文件的根元素——〈html〉元素 24

2-2-1全局属性 25

2-2-2事件属性 25

2-3 HTML文件的标头——〈head〉元素 26

2-3-1 〈title〉元素（文件标题） 27

2-3-2 〈meta〉元素（文件相关信息） 27

2-4 HTML文件的主体——〈body〉元素 28

2-4-1 〈h l 〉～〈h6〉元素（标题1～6） 33

2-4-2 〈p〉元素（段落） 34

2-5 HTML5新增的结构元素 36

2-6区段结构 37

2-6-1 〈article〉与〈section〉元素（文章／通用的区段） 37

2-6-2 〈nav〉元素（导航条） 38

2-6-3 〈header〉与〈footer〉元素（页首／页尾） 40

2-6-4 〈aside〉元素（侧边栏） 42

2-7区段的附加信息 43

2-7-1 〈address〉元素（联络信息） 43

2-7-2 〈time〉元素（日期时间） 43

习题 44

第3章 数据编辑与格式化 46

3-1区块格式 47

3-1-1 〈pre〉元素（预先格式化的区块） 47

3-1-2 〈blockquote〉元素（左右缩排的区块） 47

3-1-3 〈hr〉元素（水平线） 48

3-1-4 〈div〉元素（分组成一个区块） 49

3-1-5 〈marquee〉元素（跑马灯） 49

3-1-6〈！一〉（注释） 50

3-2文字格式 51

3-2-1 〈b〉、 〈i〉、 〈u〉、 〈sub〉、 〈sup〉、 〈small〉、 〈em〉、 〈strong〉、 〈dfn〉、 〈code〉、〈samp〉、 〈kbd〉、 〈var〉、 〈cite〉、 〈abbr〉、 〈s〉、 〈q〉、 〈mark〉元素 51

3-2-2 〈ruby〉、 〈rt〉、 〈rp〉元素（注音或拼音） 52

3-2-3 〈font〉、 〈basefont〉元素（字体） 53

3-2-4 〈br〉元素（换行） 54

3-2-5 〈span〉元素（分组成一行） 56

3-3项目符号与编号——〈ul〉、 〈ol〉、 〈li〉元素 57

3-4定义列表——〈dl〉、 〈dt〉、 〈dd〉元素 59

3-5插入或删除数据——〈ins〉、 〈del〉元素 59

3-6提示文字——title属性 60

习题 61

第4章 超链接 64

4-1 URI的类型 65

4-1-1绝对URI 65

4-1-2相对URI 65

4-2标记超链接——〈a〉元素 66

随堂练习 67

4-2-1自定义超链接文字的颜色 68

4-2-2链接至E-mail地址的超链接 69

4-3指定相对URI的路径信息——〈base〉元素 70

4-4指定文件之间的引用——〈link〉元素 70

4-5建立书签 72

4-6嵌入图片——〈img〉元素 73

4-6-1图片的高度、宽度与框线 74

4-6-2图片的对齐方式 74

4-7影像地图——〈map〉、 〈area〉元素 76

4-8标注——〈figure〉、 〈figcaption〉元素 79

4-9建立绘图区——〈canvas〉元素 80

习题 81

第5章 表格 84

5-1建立表格——〈table〉、 〈tr〉、 〈td〉、 〈th〉元素 85

5-2表格与单元格的格式化 88

5-2-1表格的背景颜色与背景图片 89

5-2-2表格的宽度、框线颜色、单元格填充与单元格间距 89

5-2-3表格的对齐方式 90

5-2-4单元格的对齐方式 92

5-2-5单元格的背景颜色与背景图片 93

随堂练习 93

5-3表格标题——〈caption〉元素 94

5-4表格的表头、主体与表尾——〈thead〉、 〈tbody〉、 〈tfoot〉元素 95

5-5直列式表格——〈colgroup〉、 〈col〉元素 97

习题 99

第6章 影音多媒体 102

6-1 HTML5的影音功能 103

6-2嵌入视频与音频——〈video〉、 〈audio〉元素 104

6-3嵌入资源文件——〈embed〉元素 106

6-4嵌入对象——〈object〉元素 106

6-4-1嵌入视频 107

6-4-2嵌入音频 108

6-4-3嵌入ActiveX Controls 108

6-5嵌入Scripts——〈script〉、 〈noscript〉元素 110

6-6嵌入 CSS样式窗体——〈style〉元素 111

6-7嵌入浮动框架——〈iframe〉元素 112

6-8网页自动导向 114

习题 115

第7章 窗体与后端处理 117

7-1建立窗体——〈form〉、 〈input〉元素 118

7-2 HTML 4.01现有的输入类型 121

7-2-1按钮 121

7-2-2单行文本框 122

7-2-3单选按钮 123

7-2-4复选框 124

7-2-5多行文本框 124

7-2-6下拉菜单 126

7-2-7窗体的后端处理 129

7-2-8密码字段 132

7-2-9隐藏字段 133

7-2-10上传文件字段 133

7-3 HTML5新增的输入类型 134

7-4标签文字——〈label〉元素 136

7-5将窗体字段框起来——〈fieldset〉、 〈legend〉元素 137

7-6其他新增的窗体元素 139

7-6-1 〈output〉元素 139

7-6-2 〈progress〉元素 140

7-6-3 〈meter〉元素 141

7-6-4 〈keygen〉元素 142

7-6-5 〈optgroup〉元素 143

习题 144

第8章CSS基本语法 146

8-1 CSS的演进 147

8-2 CSS样式规则与选择器 148

8-3链接HTML文件与CSS样式窗体 151

8-3-1在〈head〉元素里面嵌入样式窗体 151

8-3-2使用HTML元素的style属性指定样式窗体 152

8-3-3将外部的样式窗体导入HTML文件 152

8-3-4将外部的样式窗体链接至HTML文件 153

8-4选择器的类型 154

8-4-1类型选择器 154

8-4-2后裔选择器 154

8-4-3万用选择器 154

8-4-4类选择器 155

8-4-5 ID选择器 156

8-4-6属性选择器 158

8-4-7伪类选择器（:link、 ：visited、 ：hover、 ：focus、 ：active、 enabled、：disabled） 161

8-5样式窗体的层叠顺序 164

习题 166

第9章 字体、文本与列表属性 168

9-1字体属性 169

9-1-1 font-family（文字字体） 169

9-1-2 font-size（字体大小） 170

9-1-3 font-style（正常／斜体／粗体） 172

9-1-4 font-weight（字体粗细） 173

9-1-5 line-height（行高） 174

9-1-6 font-stretch（字体延展） 175

9-1-7 font-size-adjust（字体长宽比） 175

9-1-8@font-face（使用服务器端的字体） 175

9-1-9 font（字体属性简便表示法） 175

随堂练习 176

9-2文本属性 177

9-2-1 text-indent（首行缩排） 177

9-2-2 text-align（文本对齐方式） 178

9-2-3 letter-spacing（字母间距） 179

9-2-4 word-spacing（文字间距） 180

9-2-5 text-transform（大小写转换方式） 181

9-2-6 white-space（空格符） 181

9-2-7 text-shadow（文本阴影） 182

9-2-8 text-decoration-line、 text-decoration-color、 text-decoration-style、text-underline-position、 text-decoration-skip、 text-decoration（线条装饰） 183

9-2-9 text-emphasis-style、 text-emphasis-color、 text-emphasis、text-emphasis-position（强调标记） 185

9-3列表属性 185

9-3-1 list-style-type（项目符号与编号类型） 185

9-3-2 list-style-image（图片项目符号） 189

9-3-3 list-style-position（项目符号与编号位置） 189

9-3-4 list-style（列表属性的简便表示法） 191

习题 191

第10章 颜色、背景与渐变属性 195

10-1颜色属性 196

10-1-1 color（前景颜色） 196

10-1-2 opacity（透明度） 198

10-2背景属性 199

10-2-1 background-color（背景颜色） 199

10-2-2 background-image（背景图片） 202

10-2-3 background-repeat（背景图片重复排列方式） 204

10-2-4 background-position（背景图片起始位置） 206

10-2-5 background-attachment（背景图片是否随内容滚动） 209

10-2-6 background-clip（背景显示区域） 210

10-2-7 background-origin（背景显示位置基准点） 212

10-2-8 background-size（背景图片大小） 213

10-2-9 background（背景属性的简便表示法） 215

10-3渐变表示法 215

10-3-1 linear-gradient（）（线性渐变） 216

10-3-2 radial-gradient（）（放射状渐变） 217

10-3-3 repeating-linear-gradient（）、 rep eating-radial -gradient（）（重复渐变） 217

习题 218

第11章Box Model与定位方式 220

11-1 Box Model 221

11-2 边界属性 222

11-3留白属性 224

11-4框线属性 225

11-4-1 border-style（框线样式） 225

11-4-2 border-color（框线颜色） 226

11-4-3 border-width（框线宽度） 228

11-4-4 border（框线属性的简便表示法） 229

11-4-5 border-radius（框线圆角） 230

11-4-6 border-image（框线图片） 231

11-5定位方式 232

11-5-1 display （HTML元素的显示层级） 232

11-5-2 width、 height、 top、 bottom、 left、 right （BlockBox的宽度与高度、上下左右位移量） 233

11-5-3 max-width、 min-width、 max-height、 min-height （Block Box的宽度与高度的最大值及最小值） 234

11-5-4 position （Box的定位方式） 234

11-5-5 float、 clear（指定图旁配字、解除图旁配字） 241

11-5-6 z-index（重叠顺序） 243

11-5-7 visibility（显示或隐藏Box） 244

11-5-8 overflow（显示或隐藏溢出Box的内容） 245

11-5-9 object-fit（配合Box调整对象大小） 247

11-5-10 object-position（对象在Box内的显示位置） 248

11-5-11 box-shadow （Box阴影） 249

11-5-12 vertical-align（垂直对齐） 250

习题 252

第12章 表格属性 254

12-1表格模式 255

12-2表格属性 258

12-2-1 caption-side（表格标题位置） 258

12-2-2 border-collapse（表格框线模式） 259

12-2-3 table-layout（表格版面编排方式） 260

12-2-4 empty-cells（显示或隐藏空白单元格） 262

12-2-5 border-spacing（表格框线间距） 263

习题 264

第13章 特殊效果与媒体查询 266

13-1鼠标光标形状——cursor属性 267

13-2 外框线——outline属性 268

13-3多字段排版 270

13-3-1 column-count、 column-width、 columns（字段数目与宽度） 270

13-3-2 column-gap（字段间距） 272

13-3-3 column-rule（字段分隔线） 273

13-3-4 reak-before、 break-after、 break-inside（换列或换页） 274

13-3-5 column-span（跨列显示） 276

13-3-6 column-fill（字段内容分配比例） 277

13-4变形处理 278

13-4-1 transform （2D、 3D变形处理） 278

13-4-2 transform-origin（变形处理的原点） 280

13-5媒体查询 282

习题 284

第14章 响应式网页设计 286

14-1移动版网页VS PC版网页 287

14-2移动版网页设计原则 287

14-3响应式网页设计的技巧 290

14-4响应式网页设计的实例 293

14-4-1设定viewport 294

14-4-2设置媒体查询与样式窗体 295

14-4-3设计网页的版型 296

14-4-4设计网页的内容 299

第15章 移动版网页的实用技巧 303

15-1触控式按钮 304

15-2将页首／页尾固定在画面上方／下方 305

15-3导航条 307

15-4可折叠区块 308

15-5 窗体 310

第16章 使用jQuery Mobile开发移动网页 313

16-1移动网页的相关技术 314

16-2 移动网页的开发工具 315

16-3编写第一份jQuery Mobile文件 319

16-4主题 325

16-5超链接 326

16-5-1内部链接 327

16-5-2外部链接 329

16-5-3绝对外部链接 331

16-6页面切换动画 333

16-7对话框 333

习题 335

第17章jQuery Mobile UI组件 337

17-1按钮 338

17-1-1建立按钮 338

17-1-2设置按钮的图标 338

17-1-3设置按钮的主题 340

17-1-4设置按钮的特殊效果 340

17-1-5 设置控件组 341

17-2工具栏 341

17-2-1页首行 341

17-2-2页尾行 343

17-3导航条 344

17-4可折叠区块 345

17-5可折叠区块分组 346

17-6列表视图 347

17-6-1创建列表视图 347

17-6-2设置分隔线 348

17-6-3设置嵌套列表视图 349

17-6-4格式化项目内容 350

17-6-5设置计数气泡与侧边内容 351

17-6-6设置搜索功能 352

17-6-7设置图标与缩略图 353

17-6-8设置分割按钮列表 353

17-7窗体 354

17-7-1字段容器 354

17-7-2文字输入字段 356

17-7-3日期时间输入字段 357

17-7-4多行文本框 358

17-7-5拨动式切换开关 358

17-7-6下拉式菜单 359

17-7-7复选框 363

17-7-8单选按钮 364

17-8移动版网站实例 366

17-8-1设计移动版网站的界面 367

17-8-2加入JavaScript程序代码 370

习题 371

附录 HTML框架元素 373

附录1建立框架——〈frameset〉、 〈frame〉、 〈noframes〉元素 374

附录2包含水平框架与垂直框架的网页 385

附录3嵌入浮动框架——〈iframe〉元素 387

附录4制作导航条 388

习题 392