水晶石技法CSS+DIV商业网站设计

《水晶石技法css+div商业网站设计》

第1章　网页基础与网站开发流程　13

1.1　本书术语讲述　14

1.1.1　文本　14

1.1.2　图像　14

1.1.3　超链接　14

1.1.4　表格　14

1.1.5　表单　14

1.1.6　导航栏　14

1.1.7　动画　14

1.1.8　框架　14

1.1.9　其他　14

1.2　显示网页的主流浏览器　15

1.3　静态网页和动态网页的区别　15

1.4　网站重构　16

1.4.1　什么是网站重构　16

1.4.2　为什么要网站重构　16

1.5　网站开发的流程　17

1.5.1　需求分析　17

1.5.2　平台规划　17

.1.5.3　项目开发　17

1.5.4　测试验收　17

1.6　web标准　18

1.6.1　结构标准语言　18

1.6.2　表现标准语言　18

1.6.3　行为标准　18

1.7　css布局与table布局的区别　18

1.8　网页重构用到的技术　19

1.9　网页制作核心　19

1.9.1　div+css的组成元素　19

1.9.2　块级元素(block element)　19

1.9.3　内联元素(inline element)　19

1.9.4　常用块元素(block element)　19

1.9.5　常用内联元素(inline element)　20

1.9.6　div+css的盒子模型理论　20

1.9.7　外边距的叠加机理　20

1.9.8　css文档流　21

1.9.9　定位　21

1.10　本章总结　22

第2章　设计类企业项目解析(艾古互动网)　23

2.1　案例概述　24

2.1.1　项目背景分析　24

2.1.2　网站布局　24

2.2　项目目录安排　27

2.3　主容器搭建　28

2.4　头部制作　30

2.4.1　网站logo的布局　31

2.4.2　导航布局　32

2.4.3　服务内容布局　33

2.5　内容部分布局　34

2.5.1　互动体验专家与手形布局　35

2.5.2　新闻动态部分布局　36

2.5.3　成功案例滚动banner布局　37

2.5.4　图标链接布局　39

2.5.5　解决方案banner布局　40

2.6　尾部布局　41

2.6.1　site map布局　42

2.6.2　网站地图部分布局　42

2.6.3　版权申明部分布局　45

2.6.4　友情链接部分布局　46

2.7　解决方案版块布局　48

2.7.1　头尾部分的延续布局　48

2.7.2　头部与内容部分间小导航的布局　49

2.7.3　解决方案内容的布局　50

2.7.4　链接图标的布局　52

2.8　网站建设版块布局　53

2.8.1　头尾部分的延续布局　54

2.8.2　banner部分布局　54

2.8.3　服务流程部分布局　55

2.8.4　服务套餐部分布局　56

2.9　本章总结　58

第3章　摄影类项目解析(尚格视觉)　59

3.1　案例概述　60

3.1.1　项目背景分析　60

3.1.2　网站布局　60

3.2　项目目录安排　63

3.3　主容器搭建　64

3.4　头部制作　66

3.4.1　网站logo的布局　67

3.4.2　qq服务内容布局　68

3.4.3　导航布局　70

3.5　banner与音乐控件布局　73

3.5.1　主banner与音乐控件布局　74

3.5.2　热点新闻部分布局　76

3.5.3　横向banner布局　79

3.6　主内容部分布局　80

3.6.1　服务报价部分布局　81

3.6.2　小贴士部分布局　83

3.6.3　友情链接部分布局　84

3.6.4　精彩客片部分布局　88

3.7　页尾部分布局　90

3.7.1　页脚导航部分布局　91

3.7.2　热贴部分布局　92

3.7.3　花絮部分布局　94

3.7.4　留言部分布局　96

3.7.5　联系方式部分布局　96

3.8　网站留言版块布局　98

3.8.1　头尾部分的延续布局　99

3.8.2　搜索部分布局　99

3.8.3　页面洋葱皮部分布局　101

3.8.4　留言记录部分布局　102

3.8.5　页码部分布局　103

3.8.6　留言列表部分布局　104

3.8.7　分割线与页码部分布局　107

3.8.8　留言发布布局　108

3.9　本章总结　110

第4章　商品类项目解析(养乐多)　111

4.1　案例概述　112

4.1.1　项目背景分析　112

4.1.2　网站布局　112

4.2　项目目录安排　115

4.3　主容器搭建　116

4.4　头部制作　118

4.4.1　网站logo的布局　118

4.4.2　地区选择部分布局　119

4.4.3　导航布局　120

4.5　主内容部分布局　122

4.5.1　调查问卷部分布局　123

4.5.2　最新消息部分布局　125

4.5.3　banner布局　127

4.6　页尾部分布局　128

4.6.1　版权部分布局　128

4.6.2　页尾连接部分布局　129

4.7　新闻活动版块部分布局　130

4.7.1　头尾部分的延续布局　131

4.7.2　新闻活动竖向菜单布局　132

4.7.3　新闻公告部分布局　135

4.7.4　来源选择部分布局　137

4.7.5　新闻列表部分布局　137

4.7.6　新闻列表翻页部分布局　140

4.8　本章总结　141

第5章　个人展示类项目解析(like-v)　142

5.1　案例概述　143

5.1.1　项目背景分析　143

5.1.2　网站布局　143

5.2　项目目录安排　147

5.3　主容器搭建　148

5.4　 头部制作　149

5.5　主内容部分布局　152

5.5.1　图形设计部分布局　152

5.5.2　网页设计部分布局　160

5.5.3　关于我们部分布局　167

5.5.4　联系我们部分布局　170

5.6　页尾部分布局　174

5.6.1　版权部分布局　174

5.6.2　页尾连接部分布局　175

5.7　播放器制作　176

5.8　移动广告牌　177

5.9　本章总结　178

第6章　游戏类项目解析(英雄联盟)　179

6.1　案例概述　180

6.1.1　项目背景分析　180

6.1.2　网站布局　180

6.2　项目目录安排　181

6.3　首页主容器搭建　182

6.4　首页头部制作　184

6.4.1　标识　184

6.4.2　导航　185

6.4.3　荣誉墙　188

6.5　首页主内容部分布局　190

6.5.1　banner部分布局　190

6.5.2　赛事与活动　197

6.5.3　边栏　204

6.5.4　合作媒体　211

6.6　首页页尾部分布局　212

6.7　列表页主容器搭建　214

6.8　列表页头部制作　215

6.8.1　标识　216

6.8.2　导航　217

6.8.3　荣誉墙　219

6.9　列表页主内容部分布局　221

6.9.1　边栏导航　221

6.9.2　列表主内容　223

6.9.3　边栏banner　228

6.10　列表页页尾部分布局　228

6.11　本章总结　230

第7章　项目经验总结(一)　231

7.1　高级文字排版分析　232

7.1.1　倒影字　232

7.1.2　齐线字　233

7.1.3　修饰标题字　234

7.1.4　google字　235

7.1.5　fedex字　236

7.1.6　yahoo字　237

7.2　控制字符宽度省略号效果　239

7.3　居中浏览器的半透明布局　241

7.4　div高度随窗口变化而变化　243

7.5　建立交叉浮动层　244

7.6　三列自适应等高且中列宽度自适应　247

7.7　三级弹出css导航菜单　249

7.8　web前端开发规范文档　258

7.8.1　规范目的　258

7.8.2　基本准则　258

7.8.3　文件规范　258

7.8.4　html书写规范　259

7.8.5　css书写规范　260

7.8.6　javascript书写规范　260

7.8.7　图片规范　260

7.8.8　注释规范　261

7.9　本章总结　261

第8章　项目经验总结(二)　262

8.1　css中以图片替换文字的表现方法　263

8.2　纯css代码实现翻页　266

8.3　隔行换色　268

8.4　评分星级效果　270

8.5　柱状图表　272

8.6　鼠标经过弹性放大div　274

8.7　双语导航　276

8.8　banner滚动切换　277

8.9　透明flash上方的层　281

8.10　本章总结　284