Web前端开发项目化教程PDF电子书下载

第一阶段 网站的前期准备 3

任务1 “叮当网上书店”项目需求分析 3

1.1 任务描述 3

1.2 相关知识 4

1.2.1 什么是Web标准 4

1.2.2 Web标准的历史 5

1.2.3 Web标准的构成 5

1.2.4 网站项目需求分析的流程 7

1.3 任务实现 8

1.3.1 页面级设计需求 8

1.3.2 网站功能级的需求 10

1.4 任务拓展 12

1.5 任务小结 12

1.6 能力评估 12

任务2 “叮当网上书店”前台版面设计稿 13

2.1 任务描述 13

2.2 相关知识 13

2.2.1 网站常用的布局结构 13

2.2.2 网站常用的页面版式 14

2.3 任务实现 16

2.3.1 “叮当网上书店”首页版面设计稿 16

2.3.2 “叮当网上书店”登录页版面设计稿 19

2.3.3 “叮当网上书店”图书分类页版面设计稿 19

2.3.4 “叮当网上书店”购物车页版面设计稿 22

2.4 任务拓展 23

2.4.1 “叮当网上书店”注册页版面设计稿 23

2.4.2 “叮当网上书店”图书详细页版面设计 24

2.5 任务小结 24

2.6 能力评估 24

任务3 “叮当网上书店”图片素材设计 25

3.1 任务描述 25

3.2 相关知识 26

3.2.1 Photoshop工作环境 26

3.2.2 像素与分辨率 26

3.2.3 位图和矢量图 27

3.2.4 图像的颜色模式 28

3.2.5 图像的格式 28

3.2.6 图层 29

3.2.7 Photoshop常用工具 30

3.2.8 参考线 32

3.2.9 Photoshop与GIF动画 33

3.2.10 蒙版 33

3.3 任务实施 34

3.3.1 “叮当网上书店”Logo制作 34

3.3.2 “购买”按钮图片制作 37

3.3.3 头部高级搜索按钮背景的制作 38

3.3.4 导航按钮背景图片制作 39

3.3.5 分类导航条背景的制作 43

3.3.6 GIF动画设计制作 44

3.3.7 蒙版Banner图制作 47

3.4 任务拓展 50

3.5 任务小结 50

3.6 能力评估 50

第二阶段 网站的结构架设 53

任务4 “叮当网上书店”项目建站 53

4.1 任务描述 53

4.2 相关知识 53

4.2.1 DreamweaverCS6工作环境 53

4.2.2 什么是XHTML 57

4.2.3 XHTML文件结构 57

4.2.4 DTD文件 58

4.2.5 XHTML编码规则 58

4.2.6 头部标签head 59

4.3 任务实现 61

4.3.1 “叮当网上书店”项目建站 61

4.3.2 “叮当网上书店”新建首页 63

4.4 任务拓展 64

4.4.1 SEO——让你的网站排名靠前 64

4.4.2 head三标签SEO 64

4.5 任务小结 65

4.6 能力评估 65

任务5 “叮当网上书店”页面框架结构 66

5.1 任务描述 66

5.2 相关知识 67

5.2.1 div标签 68

5.2.2 span标签 69

5.3 任务实施 69

5.3.1 “叮当网上书店”首页XHTML框架结构 70

5.3.2 “叮当网上书店”购物车页XHTML框架结构 74

5.4 任务拓展 76

5.4.1 “叮当网上书店”登录页XHTML框架结构 76

5.4.2 “叮当网上书店”注册页XHTML框架结构 78

5.4.3 “叮当网上书店”图书分类页XHTML框架结构 79

5.4.4 “叮当网上书店”图书详细页XHTML框架结构 79

5.5 任务小结 81

5.6 能力评估 81

任务6 “叮当网上书店”首页总体结构 82

6.1 任务描述 82

6.2 相关知识 82

6.2.1 插入图片——img标签 82

6.2.2 列表——ul、ol和li标签 84

6.2.3 超链接——a标签 84

6.2.4 表单类标签 85

6.2.5 hn和p标签 88

6.3 任务实现 89

6.3.1 首页header区域XHTML模块结构 89

6.3.2 首页search区域XHTML模块结构 90

6.3.3 首页中间left区域XHTML模块结构 93

6.3.4 首页中间right区域XHTML模块结构 95

6.3.5 首页中间center区域XHTML模块结构 98

6.3.6 首页footer区域XHTML模块结构 102

6.4 任务拓展 103

6.4.1 图书分类页XHTML总体结构 104

6.4.2 图书详细页XHTML总体结构 108

6.4.3 登录页XHTML总体结构 113

6.5 任务小结 114

6.6 能力评估 114

任务7 “叮当网上书店”购物车页整体结构 115

7.1 任务描述 115

7.2 相关知识 116

7.2.1 table、tr、th和td标签 116

7.2.2 thead、tbody和tfoot标签 117

7.3 任务实现 118

7.3.1 购物车主体部分整体结构 118

7.3.2 标题shoppingtitle结构 118

7.3.3 表头shoppingtabletop结构 119

7.3.4 中间表格区shoppingtablecenter结构 120

7.3.5 底部shoppingtablefooter结构 125

7.4 任务拓展 125

7.4.1 注册页XHTML总体结构 125

7.4.2 登录页XHTML总体结构 127

7.5 任务小结 128

7.6 能力评估 129

第三阶段 网站的效果设计 133

任务8 “叮当网上书店”页面布局与定位 133

8.1 任务描述 133

8.2 相关知识 133

8.2.1 CSS样式表 135

8.2.2 应用CSS到网页中 137

8.2.3 盒子模型 139

8.2.4 浮动布局 143

8.2.5 定位布局 145

8.3 任务实施 146

8.3.1 首页布局与定位 146

8.3.2 图书分类页布局与定位 150

8.3.3 购物车页布局与定位 152

8.4 任务拓展 152

8.5 任务小结 154

8.6 能力评估 154

任务9 “叮当网上书店”首页navlink区样式 155

9.1 任务描述 155

9.2 相关知识 156

9.2.1 使用列表元素 156

9.2.2 背景控制 156

9.2.3 文本与段落样式 157

9.2.4 超链接样式控制 159

9.3 任务实施 160

9.3.1 首页navlink区Logo图片样式 161

9.3.2 首页navlink区导航菜单样式 162

9.3.3 首页navlink区用户快速导航样式 165

9.4 任务拓展 166

9.5 任务小结 166

9.6 能力评估 167

任务10 “叮当网上书店”首页search区样式 168

10.1 任务描述 168

10.2 相关知识 169

10.2.1 圆角背景控制 169

10.2.2 表单UI设计效果 169

10.3 任务实施 172

10.3.1 首页search区圆角背景样式 174

10.3.2 首页search区表单设计样式 176

10.4 任务拓展 180

10.4.1 首页main_left、main_right两侧样式 180

10.4.2 首页main_right用户登录区样式 180

10.4.3 用户注册页样式 181

10.4.4 用户登录页样式 181

10.5 任务小结 181

10.6 能力评估 182

任务11 “叮当网上书店”首页main_center区样式 183

11.1 任务描述 183

11.2 相关知识 186

11.2.1 CSS缩写 186

11.2.2 CSS Hack技术 188

11.2.3 ul的不同表现 190

11.2.4 容器不扩展问题 191

11.3 任务实施 191

11.3.1 首页main_center区主编推荐区样式 193

11.3.2 首页main_center区本月新出版区样式 196

11.4 任务拓展 198

11.4.1 首页main_center区媒体热点区样式 198

11.4.2 首页footer区样式 198

11.5 任务小结 199

11.6 能力评估 199

任务12 “叮当网上书店”购物车页样式 200

12.1 任务描述 200

12.2 相关知识 201

12.2.1 细线表格 202

12.2.2 表格隔行变色 202

12.3 任务实施 203

12.3.1 购物车页表格列表效果 207

12.3.2 购物车页表格隔行变色效果 211

12.4 任务拓展 212

12.4.1 用户登录页样式 212

12.4.2 用户注册页样式 213

12.5 任务小结 213

12.6 能力评估 213

第四阶段 网站的人机交互 217

任务13 “叮当网上书店”表单验证交互 217

13.1 任务描述 217

13.2 相关知识 218

13.2.1 jQuery概述 218

13.2.2 jQuery文件下载 219

13.2.3 jQuery验证函数 219

13.2.4 jQuery验证代码结构 221

13.2.5 jQuery样式效果 222

13.3 任务实施 223

13.3.1 表单不为空的验证 226

13.3.2 表单邮箱格式验证 227

13.3.3 表单两次密码相同验证 229

13.4 任务拓展 230

13.4.1 用户自定义jQuery方法验证 230

13.4.2 采用jQuery和Ajax实现无刷新验证 231

13.5 任务小结 232

13.6 能力评估 232

参考文献 233