灵活WEB设计PDF|Epub|txt|kindle电子书版本网盘下载

灵活WEB设计PDF格式电子书版下载

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

第1章 理解灵活布局1

1．1 布局类型2

1．1．1 固定宽度：固定像素2

1．1．2 可变布局或不固定布局：根据视口调整4

1．1．3 弹性：与文本大小相适7

1．1．4 混合布局10

1．2 可变布局和弹性布局带来的挑战12

1．2．1 摆脱网格束缚：进行设计非舒适区域12

1．2．2 告别像素的完美性13

1．2．3 让设计看上去很大或是很小14

1．2．4 处理文本溢出的问题14

1．2．5 处理水平滚动条的问题15

1．2．6 在弹性框中适配固定宽度的内容15

1．2．7 更长的设计时间和测试时间16

1．2．8 浏览器缺陷16

1．3 为页面选择合适的布局类型16

1．3．1 固定宽度布局17

1．3．2 可变布局18

1．3．3 弹性布局19

第2章 设计灵活布局的方法20

2．1 灵活布局的设计原理21

2．1．1 避免：包含文本的内容采用固定高度21

2．1．2 避免：不规则形状24

2．1．3 避免：与不能扩展的图像相匹配的文字26

2．1．4 避免：固定宽度和全宽度内容33

2．1．5 规划：超出原始尺寸的图像40

2．1．6 规划：设计位于最大宽度之外的白色区域41

2．1．7 规划：折成多行的并排放置的项43

2．2 设计前和设计后：我们的非兼容设计和固定的设计48

第3章 准备网页设计53

3．1 创建图像版式54

3．1．1 设置画布尺寸54

3．1．2 使用图层和页面来管理版式55

3．1．3 非破坏性编辑技术58

3．2 针对灵活设计对图形进行切片处理60

3．2．1 为切片创建多个单独的文件61

3．2．2 切分方框64

3．3 站点创建练习：为构建站点准备 Beechwood Animal Shelter版式65

3．3．1 在版式中导航65

3．3．2 为页眉创建切片66

3．3．3 为主页创建切片68

3．3．4 为步骤页创建切片71

3．3．5 导出图像72

第4章 创建可变布局结构74

4．1 为CSS布局准备页面75

4．1．1 通用页面的创建步骤75

4．1．2 为本章实例准备页面76

4．2 使用浮动创建可变栏79

4．2．1 使用浮动创建栏位并且匹配侧边缘80

4．2．2 通过浮动所有对象创建栏91

4．2．3 使用浮动和负边缘创建栏位95

4．3 禁止布局横跨整个视口100

4．3．1 更改栏位宽度101

4．3．2 指定侧边缘103

4．3．3 为包装器指定百分比宽度108

4．4 站点创建练习：创建Shelter的内页布局结构109

4．4．1 准备页面110

4．4．2 添加基本样式111

4．4．3 创建双栏布局112

4．4．4 减少双栏的宽度115

第5章 创建弹性布局结构117

5．1 将尺寸换成em118

5．1．1 em的定义118

5．1．2 嵌套em度量118

5．1．3 有选择性地采用em度量119

5．2 使用浮动创建弹性栏121

5．2．1 复习：本章实例122

5．2．2 使用浮动创建栏位与匹配侧边缘122

5．2．3 通过浮动所有元素来创建栏135

5．3 站点创建练习：创建Shelter的主页布局结构139

5．3．1 准备页面139

5．3．2 添加基础样式141

5．3．3 创建栏142

第6章 规范灵活性147

6．1 创建混合布局148

6．1．1 固定侧边栏搭配可变居中栏位148

6．1．2 带弹性居中栏的固定侧边栏153

6．2 添加最小和最大宽度165

6．2．1 保护你的用户、设计和内容165

6．2．2 选择min-width和max-width值166

6．2．3 使用min-width和max-width属性168

6．2．4 IE 6和更早版本的浏览器中的不兼容177

6．3 限制灵活性的其他方式178

6．3．1 使用overflow属性178

6．3．2 让栏位下移181

6．4 站点创建练习：限制Shelter的页面的灵活性182

6．4．1 修改Programs页面183

6．4．2 修改主页面184

第7章 设置文字间距187

7．1 匹配度量单位188

7．1．1 可变布局间隔188

7．1．2 弹性布局间隔197

7．2 混合度量单位198

7．2．1 为宽度较窄的div添加边缘和填充199

7．2．2 为内容而非div添加边缘和填充200

7．2．3 添加缓冲div202

7．3 站点创建练习：为主页和内页添加间隔205

7．3．1 为页眉添加间隔205

7．3．2 为页脚添加间隔210

7．3．3 处理边缘塌陷211

7．3．4 为Programs页面内容添加间隔212

7．3．5 为主页内容添加间隔215

第8章 添加背景图像和颜色221

8．1 混合背景图像222

8．1．1 创建渐变222

8．1．2 创建圆角225

8．1．3 创建曲线边缘229

8．2 创建等高栏232

8．2．1 可变-固定宽度混合布局的伪列布局233

8．2．2 可变布局的伪列布局237

8．2．3 弹性布局的伪列布局241

8．3 站点创建练习：为主页和内页添加背景242

8．3．1 调整页眉的背景和颜色242

8．3．2 调整Programs页面背景245

8．3．3 调整主页背景250

第9章 创建灵活的图像252

9．1 动态更改图像的屏幕区域253

9．1．1 与布局同时缩放的前景图像253

9．1．2 隐藏和显示部分图像255

9．1．3 创建变化的合成图像260

9．2 创建灵活的图像组262

9．2．1 趣味缩览图列表263

9．2．2 缩览图库267

9．3 站点创建练习：为主页添加灵活的图像272

9．3．1 添加可变裁切的横幅广告图像272

9．3．2 创建趣味缩览图列表273