响应式网页设计 BOOTSTRAP开发速成PDF|Epub|txt|kindle电子书版本网盘下载

响应式网页设计 BOOTSTRAP开发速成PDF格式电子书版下载

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

第1章 响应式网页简介1

1.1何谓响应式网页1

1.2响应式网页的优点2

1.3响应式网页的缺点3

1.4响应式的概念3

1.5 Viewport4

1.6流式网格5

1.6.1网格设计5

1.6.2流式布局6

1.7媒体查询的基础7

1.7.1使用方法8

1.7.2设置方式8

1.7.3媒体类型8

1.7.4判断条件9

1.7.5媒体特征10

1.8流式图像10

1.9字体11

第2章 Bootstrap简介12

2.1何谓Bootstrap12

2.2 Bootstrap具有哪些内容12

2.3下载Bootstrap13

2.4链接Bootstrap框架15

2.5下载与链接jQuery文件16

2.6快速体验——运用CSS样式17

第3章 网站的开发流程20

3.1项目20

3.2企划21

3.3设计21

3.4前端22

3.5后端22

3.6测试23

3.7上线23

第4章 响应式网页的设计思维25

4.1与传统网站开发的差异25

4.2响应式网页的设计考虑26

4.3移动设备的设计考虑28

4.3.1移动设备的特征28

4.3.2移动设备优先28

第5章 视觉设计师与前端工程师的专业认知31

5.1网页与印刷的差异31

5.2网页向量格式SVG32

5.3版面设计时的常见词汇33

5.4网格的运用与制作35

5.4.1网格辅助——PSD35

5.4.2网格辅助——AI36

5.4.3网格辅助——自行设置38

5.5让视觉设计师懂得切版42

5.5.1切版重点42

5.5.2了解版面的构成42

第6章 SEO简介44

6.1何谓SEO44

6.2改善网站标题与描述45

6.3改善网站架构47

6.3.1网站架构简介47

6.3.2架构最佳做法48

6.3.3让网站更易于浏览48

6.3.4易于浏览的最佳做法49

6.4可优化的内容与做法50

6.4.1优质内容与服务50

6.4.2链接50

6.4.3图片51

6.4.4标题52

6.5管理与营销53

6.5.1使用网站管理工具53

6.5.2网站营销工作要点54

第7章 网页设计趋势56

7.1响应式网页设计56

7.2全幅背景57

7.3单页式网页57

7.4固定式菜单59

7.5扁平化设计59

7.6微动画60

7.7卡片式设计61

7.8隐藏式菜单61

7.9超大的字体62

7.10幽灵按钮63

第8章 HTML5＋CSS3的基础知识64

8.1认识DIV与CSS64

8.1.1认识DIV64

8.1.2 CSS Class与CSS ID65

8.2 HTML5与CSS3的新增内容67

8.2.1认识HTML567

8.2.2 HTML5的新元素与属性68

8.2.3认识CSS371

8.2.4 CSS3新增的属性71

第9章 响应式网页的布局方式76

9.1 Grid System简介76

9.1.1何谓Grid System76

9.1.2网页的Grid System77

9.1.3网页设计为何需要Grid System78

9.1.4 Grid System的使用方法78

9.2布局规则79

9.2.1 Bootstrap中的Grid System79

9.2.2不同设备的Grid设置80

9.2.3嵌套排版82

9.2.4移动与调整Column的位置83

9.2.5 Column的规则83

9.2.6调整Column的顺序84

第10章 Bootstrap CSS样式的使用86

10.1排版86

10.1.1标题86

10.1.2页面主题87

10.1.3行内文字元素88

10.1.4对齐类90

10.1.5转换类91

10.1.6联系字段91

10.1.7引用91

10.1.8列表93

10.2表格95

10.2.1表格类95

10.2.2状态类97

10.2.3响应式表格97

10.3窗体98

10.3.1基本范例98

10.3.2窗体布局99

10.3.3支持的控件100

10.3.4焦点状态105

10.3.5禁用状态105

10.3.6只读状态106

10.3.7验证状态106

10.4按钮108

10.4.1按钮标签108

10.4.2颜色类109

10.4.3大小类109

10.4.4启用状态111

10.4.5禁用状态111

10.5图片113

10.5.1响应式图片113

10.5.2图片形状113

第11章 Bootstrap布局组件的使用115

11.1字体图标115

11.2下拉式菜单116

11.2.1说明116

11.2.2使用的方法116

11.2.3其他辅助项目117

11.2.4范例119

11.3按钮群组120

11.3.1说明120

11.3.2使用方法120

11.3.3其他辅助项目120

11.3.4范例122

11.4输入框群组123

11.4.1说明123

11.4.2使用方法123

11.4.3其他辅助项目124

11.4.4范例125

11.5导航127

11.5.1说明127

11.5.2使用方法127

11.5.3其他辅助项目127

11.5.4范例129

11.6导航栏130

11.6.1说明130

11.6.2使用方法130

11.6.3其他辅助项目131

11.6.4范例133

11.7分页135

11.7.1说明135

11.7.2使用方法135

11.7.3其他辅助项目135

11.7.4范例137

11.8提示标志137

11.8.1说明137

11.8.2范例138

11.9大屏幕效果138

11.9.1说明138

11.9.2范例139

11.10缩略图139

11.10.1说明139

11.10.2使用方法140

11.10.3范例140

11.11进度条141

11.11.1说明141

11.11.2使用方法142

11.11.3其他辅助项目142

11.11.4范例144

11.12面板144

11.12.1说明144

11.12.2使用方法144

11.12.3其他辅助项目145

11.12.4范例146

11.13响应式嵌入内容147

11.13.1说明147

11.13.2范例147

第12章 Bootstrap JS插件的使用149

12.1概观149

12.2页签149

12.2.1说明149

12.2.2使用方法150

12.2.3淡入效果150

12.2.4范例150

12.3提示工具152

12.3.1说明152

12.3.2使用方法152

12.3.3范例153

12.4弹出提示154

12.4.1说明154

12.4.2使用方法154

12.4.3范例155

12.5折叠效果156

12.5.1说明156

12.5.2使用方法156

12.5.3范例157

12.6轮播效果159

12.6.1说明159

12.6.2使用方法159

12.6.3标题制作161

12.6.4范例161

第13章 网站实践——书籍宣传网页164

13.1套入链接164

13.2网格布局165

13.3页面设计166

13.3.1左边容器166

13.3.2右边容器167

13.4 CSS美化与运用171

第14章 网站实践——产品推广网页174

14.1套入链接174

14.2网格布局175

14.2.1建立分层说明文字175

14.2.2最外层与第一层的布局176

14.2.3第二层的布局177

14.2.4第三层左边的布局178

14.2.5第三层右边的布局179

14.2.6第四层的布局180

14.3页面设计180

14.3.1第一层设计180

14.3.2第二层设计180

14.3.3第三层左边的设计181

14.3.4第三层右边的设计183

14.3.5第四层设计183

14.4运用CSS184

14.4.1第一层184

14.4.2第二层185

14.4.3第三层左边186

14.4.4第三层右边187

14.4.5第四层189

第15章 网站实践——网站首页制作190

15.1套入链接190

15.2网格布局191

15.2.1建立层次说明文字192

15.2.2第一层与第二层布局193

15.2.3第三层布局193

15.2.4第四层布局194

15.2.5第五层与第六层布局195

15.3第一层设计——菜单195

15.3.1运用导航栏JavaScript195

15.3.2修改类196

15.3.3运用CSS样式197

15.4第二层设计——广告横幅198

15.4.1使用轮播JavaScript198

15.4.2修改内容199

15.4.3运用CSS样式200

15.5第三层设计——最新公告与广告区200

15.5.1加入最新公告图片200

15.5.2应用折叠效果JavaScript201

15.5.3修改类201

15.5.4加入广告图片202

15.5.5运用CSS样式203

15.6第四层设计——课程分享204

15.6.1加入课程标题图片204

15.6.2加入课程1图片与内容204

15.6.3加入课程2图片与内容205

15.6.4加入课程3图片与内容206

15.6.5加入课程4图片与内容206

15.6.6运用CSS样式207

15.7第五层设计——按钮链接210

15.7.1加入图片210

15.7.2运用CSS样式211

15.8第六层页面设计——页脚212

15.8.1加入文字212

15.8.2运用CSS样式212

15.9回到顶部按钮的制作212

15.10检查各尺寸浏览状态214

15.10.1问题一的解决方式214

15.10.2问题二的解决方式215

第16章 辅助工具217

16.1 Bootstrap套件下载217

16.2可视化Bootstrap在线编辑器219

16.2.1 GRID SYSTEM219

16.2.2 BASIC CSS220

16.2.3 COMPONENTS221

16.2.4 JAVASCRIPT222

16.2.5预览版式222

16.2.6下载结果223

16.3浏览器开发者模式检测224

16.3.1 Firefox浏览器224

16.3.2 IE浏览器226

16.3.3 Google Chrome浏览器226

16.3.4在线检测228

16.3.5插件的辅助检测231

16.4尺寸对照工具232

16.5检测优化工具233

16.6设备尺寸参考234