网页设计与制作入门与实战

图书标准信息

• 作者 智云科技 著
• 出版社 清华大学出版社
• 出版时间 2016-09
• 版次 1
• ISBN 9787302445579
• 定价 85.00元
• 装帧 平装
• 开本 16开
• 纸张 胶版纸
• 页数 340页
• 字数 517千字
• 正文语种 简体中文
• 丛书 学以致用系列丛书

【内容简介】

　　本书共分为16章，主要包括网页设计与制作基础、Photoshop网页图像设计、Dreamweaver网页制作以及综合案例实战4个部分。通过对本书的学习，不仅能让读者学会PhotoshopCS6和DreamweaverCS6的基本操作方法，而且还能通过本书中列举的实战案例帮助读者掌握网页设计与制作中更多的小技巧，使读者更加得心应手地设计与制作网页。

　　本书主要定位于希望快速进入网页设计与制作领域的初、中级用户，特别适合初学网页设计与制作的人员、大中专学生及网页设计制作爱好者。此外，本书也可作为网页设计与制作培训班的教材和自学者的自学读物。

【作者简介】

　　智云科技，是国内一家专门从事计算机和办公相关技术和资讯研究的团队，该团队由数位具有多年大学或培训班计算机教育经验的资深教师和作者组成，在计算机基础应用、电脑安全与维护、Office软件、图形图像软件等方面有着丰富的教学经验、使用经验和写作经验。图书出版经验丰富，曾出版著作上百部，在市场上获得了良好的口碑。

【目录】

Chapter 01 网页设计与制作基础

1.1　 了解网页的基本概念 2

1.1.1　网页设计基础知识 2

1.1.2　网页的基本组成元素 3

1.1.3　网站的分类 5

1.2　 HTML的基本概念 7

1.2.1　HTML的含义与组成 8

1.2.2　认识HTML标签 8

1.2.3　使用记事本编写HTML代码 9

1.2.4　使用浏览器查看页面效果 10

1.3　 网页的色彩搭配 11

1.3.1　网页的配色基础 11

1.3.2　网页色彩搭配方案 12

1.3.3　网页配色的注意事项 14

1.4　 了解域名与网站设计的流程 15

1.4.1　域名的常见分类 15

1.4.2　认识域名服务器（DNS） 17

1.4.3　网站的设计流程 18

1.5　 网页制作的常用工具 20

1.5.1　网页美化工具Photoshop 20

1.5.2　网页编辑工具Dreamweaver 20

给你支招

如何通过网页查看HTML源代码并保存

21

留白在网页中有哪些好处 22

Chapter 02  Photoshop CS6网页界面设计基础

2.1　 熟悉Photoshop CS6的操作界面

24

2.1.1　菜单栏和命令 24

2.1.2　工具选项栏 25

2.1.3　文档窗口 25

2.1.4　工具箱 27

2.1.5　标题栏 28

2.1.6　浮动面板 28

2.1.7　状态栏 28

2.2　 Photoshop CS6的优化设置 29

2.2.1　自定义工作界面 29

2.2.2　修改工作区的背景颜色 30

2.2.3　自定义工具的快捷键 31

2.3　 图像的类型和分辨率 32

2.3.1　图像的类型 32

2.3.2　分辨率 33

2.4　 常见的页面布局辅助工具 34

2.4.1　使用标尺定位图像 34

2.4.2　使用参考线准确编辑图像 35

2.4.3　使用网格精准调整图像 36

2.4.4　为图像添加注释 37

给你支招

如何删除自定义的工作界面 38

如何开启Photoshop CS6的对齐功能 39

Chapter 03  图像的基本处理

3.1　 调整图像与画布 42

3.1.1　调整图像尺寸 42

3.1.2　裁剪图像大小 42

3.1.3　调整画布尺寸 43

3.2　 图像的变换与变形操作 45

3.2.1　移动图像 45

3.2.2　旋转与缩放图像 47

3.2.3　斜切图像 48

3.3　 选择绘图区域 49

3.3.1　选取规则区域 50

3.3.2　选取不规则区域 51

3.4　 使用绘图工具 55

3.4.1　画笔工具 55

3.4.2　铅笔工具 56

3.4.3　仿制图章工具 57

3.4.4　橡皮擦工具 58

3.5　 绘制矢量图像 60

3.5.1　钢笔工具 60

3.5.2　绘制形状 62

给你支招

如何使用铅笔工具快速绘制国际象棋

棋盘 63

如何将人物的头发调整为自己喜欢的

颜色 65

Chapter 04  图层和文本的使用

4.1　 Photoshop图层概述 68

4.1.1　认识“图层”面板 68

4.1.2　创建图层 68

4.1.3　图层的基本操作 69

4.1.4　图层的合并和层组 71

4.2　 应用图层样式效果 73

4.2.1　添加图层样式 73

4.2.2　多种图层样式效果介绍 74

4.3　 创建文字 77

4.3.1　横排文字工具 77

4.3.2　直排文字工具 78

4.3.3　横排文字蒙版工具 79

4.4　 编辑文字 81

4.4.1　创建变形文字 81

4.4.2　沿路径排列文字 82

给你支招

如何将背景图层转换为普通图层 84

如何修改图层的名称和颜色 85

如何创建段落文字 86

Chapter 05 网页切片输出与动画制作

5.1　 图像的优化与输出 88

5.1.1　图像的格式 88

5.1.2　优化图像 89

5.1.3　输出Web图像 91

5.2　 创建和编辑切片 92

5.2.1　切片的类型 92

5.2.2　创建切片 92

5.2.3　编辑切片 93

5.3　 管理切片 94

5.3.1　选择、移动和调整切片 94

5.3.2　组合与锁定切片 95

5.3.3　将切片输出到网页 96

5.4　 创建GIF动画 99

5.4.1　认识“时间轴”面板 99

5.4.2　创建动画 99

5.4.3　保存动画 102

给你支招

如何基于图层创建切片 103

如何处理浏览器不显示输出的动画的

情况 104

Chapter 06  常用网页元素的设计

6.1　 设计网页主要元素 106

6.1.1　认识网页主图 106

6.1.2　设计标题文字 107

6.1.3　设计网页按钮 109

6.1.4　制作网页背景图像 112

6.2　 设计网页Logo 114

6.2.1　Logo的尺寸规格 114

6.2.2　Logo的表现形式 115

6.2.3　Logo的定位 115

6.2.4　Logo的设计方法 116

6.3　 设计网页Banner 119

6.3.1　网页Banner的设计策划 119

6.3.2　网页Banner的设计技巧 121

给你支招

如何在网页按钮上添加放大镜图标 123

如何对多个图层同时进行操作 124

Chapter 07  初识Dreamweaver CS6

7.1　 Dreamweaver CS6的工作界面

126

7.1.1　菜单栏 126

7.1.2　文档窗口 127

7.1.3　面板组 129

7.1.4　“插入”面板 129

7.2　 网页制作的基本操作 131

7.2.1　新建网页 131

7.2.2　保存网页 132

7.2.3　打开网页 133

7.2.4　预览网页 134

7.2.5　关闭网页 135

7.3　 创建、配置与发布本地站点 136

7.3.1　创建本地站点 136

7.3.2　配置远程服务器 137

7.3.3　发布站点 139

7.4　 管理站点 139

7.4.1　删除站点 140

7.4.2　编辑站点 140

7.4.3　导出站点 141

7.4.4　添加文件和文件夹 142

7.4.5　重命名与删除文件/文件夹 142

给你支招

如何改变预览网页时的浏览器 143

如何导入站点文件 145

Chapter 08  在网页中插入基础网页元素

8.1　 在对话框中设置页面属性 148

8.1.1　设置外观 148

8.1.2　设置外观 149

8.1.3　设置链接 150

8.1.4　设置标题 152

8.1.5　设置标题/编码 153

8.2　 设置字体与页面背景的效果 155

8.2.1　添加页面标题 155

8.2.2　为文字添加加粗和倾斜样式 156

8.2.3　设置文字的大小 157

8.2.4　设置文本的颜色 157

8.3　 文本的简单操作 158

8.3.1　在网页中录入文本 158

8.3.2　让文本换行分段 158

8.3.3　设置文本的对齐方式 159

8.3.4　设置文本的字体格式 160

8.4　 项目列表和编号列表的使用 161

8.4.1　插入项目列表 161

8.4.2　插入编号列表 162

8.5　 插入特殊页面元素 163

8.5.1　插入换行符 163

8.5.2　插入水平线 164

8.5.3　插入日期 164

给你支招

如何利用跟踪图像制作网页 166

如何插入特殊符号 167

Chapter 09  用图像、多媒体与超链接丰富网页

9.1　 在网页中插入图像 170

9.1.1　插入图像 170

9.1.2　调整图像大小 172

9.1.3　调整图片的亮度和对比度 173

9.1.4　裁剪页面中的图像 174

9.2　 在网页中插入多媒体 175

9.2.1　插入背景音乐 175

9.2.2　插入Flash动画 177

9.2.3　插入FLV视频 178

9.3　 超链接概述 180

9.3.1　认识超链接的类型 180

9.3.2　链接路径有哪些分类 182

9.4　 创建网页常用的超链接 184

9.4.1　创建文本链接 184

9.4.2　创建图像链接 186

9.4.3　创建热点链接 187

9.4.4　创建空链接 188

9.4.5　创建脚本链接 189

给你支招

如何插入非FLV格式的视频文件 190

如何在网页中插入E-mail链接 192

Chapter 10  使用表格布局页面

10.1　 创建表格并输入内容 194

10.1.1　精确插入指定行列的表格 194

10.1.2　在表格中输入内容 195

10.2　 格式化表格效果 196

10.2.1　表格与单元格的选择 196

10.2.2　设置单元格大小和对齐方式 198

10.2.3　为表格添加边框 199

10.2.4　单元格中文本格式和背景格式的

设置 200

10.3　 编辑表格 201

10.3.1　插入行或列 201

10.3.2　删除行或列 202

10.3.3　复制、剪切和粘贴单元格 203

10.3.4　合并单元格 205

10.4　 表格的特殊处理 206

10.4.1　外部导入表格数据 206

10.4.2　对表格数据排序 207

给你支招

如何插入嵌入式表格 208

如何拆分合并后的单元格 209

Chapter 11 使用CSS样式表美化页面

11.1　 认识CSS层叠样式表 212

11.1.1　CSS层叠样式表概述 212

11.1.2　CSS的3种类型 212

11.1.3　CSS的基本语法 213

11.2　 网页中应用CSS样式的方法 215

11.2.1　嵌入式CSS 215

11.2.2　内联式CSS 216

11.2.3　外联式CSS 216

11.3　 各种CSS样式选择器的创建 218

11.3.1　创建ID选择器 218

11.3.2　创建标签选择器 220

11.3.3　创建类选择器 221

11.3.4　创建复合选择器 223

11.4　 CSS中的常用样式 225

11.4.1　字体样式的设置 226

11.4.2　文本段落样式的设置 228

11.4.3　背景样式的设置 229

11.4.4　方框样式的设置 231

11.4.5　边框样式的设置 231

11.4.6　列表样式的设置 233

11.4.7　定位样式的设置 233

给你支招

创建外部CSS样式文件 234

如何将筛选结果保存到新工作表中 236

Chapter 12 利用Div+CSS布局网页

12.1　 初识Div标签 238

12.1.1　Div标签概述 238

12.1.2　插入Div标签 238

12.1.3　为Div标签添加CSS样式表 240

12.1.4　Div+CSS的布局优势 241

12.2　 Div标签的定位方法 242

12.2.1　盒子模型的概念 242

12.2.2　通过float属性定位Div标签 243

12.2.3　通过position属性定位Div

标签 244

12.3　 Div标签的常见布局模式 245

12.3.1　单行单列固定宽度 245

12.3.2　一列自适应 246

12.3.3　一列固定宽度居中 246

12.3.4　两列固定宽度 247

12.3.5　两列宽度自适应 248

12.3.6　两行右列宽度自适应 248

给你支招

如何创建嵌套Div标签 249

如何设置Div标签对象的行高 250

Chapter 13  表单元素、模板和库的运用

13.1　 插入表单元素 252

13.1.1　什么是表单 252

13.1.2　初步认识表单对象 252

13.1.3　插入表单域 256

13.1.4　插入文本域 257

13.1.5　插入密码域 259

13.1.6　插入复选框 260

13.1.7　插入按钮 261

13.2　 使用模板 263

13.2.1　创建空白模板 263

13.2.2　定义模板中的可编辑区域 264

13.2.3　创建基于模板的网页 265

13.2.4　从模板中分离网页 266

13.3　 创建和应用库项目 267

13.3.1　创建库项目 267

13.3.2　向页面中插入库项目 268

13.3.3　修改并更新库项目 268

给你支招

如何自动选择文本框中所有文本内容 270

如何将当前网页创建为模板 271

如何在现有网页文件上应用模板 272

Chapter 14 使用JavaScript行为创建特效网页

14.1　 认识JavaScript 274

14.1.1　JavaScript的含义 274

14.1.2　事件 274

14.1.3　熟悉动作类型 275

14.1.4　如何使用JavaScript 275

14.2　 在网页中添加行为 276

14.2.1　交换图像 276

14.2.2　打开浏览器窗口 278

14.2.3　调用JavaScript 279

14.2.4　检查表单 280

14.3　 jQuery的应用 281

14.3.1　使用jQuery的核心函数 282

14.3.2　使用jQuery选择器 282

14.3.3　使用jQuery操作对象的属性 284

给你支招

如何恢复交换图像 285

解决预览页面时脚本的执行问题 286

Chapter 15 在线出境游网站设计

15.1　 案例制作的效果和思路 288

15.2　 网站的结构设计 289

15.2.1　制作网站布局结构 289

15.2.2　创建网站文档 289

15.2.3　为页面设置辅助线 290

15.2.4　制作页面背景 291

15.3　 设计页面主体的内容 292

15.3.1　设计页面的头部 292

15.3.2　设计页面的中部 295

15.3.3　设计页面的底部 297

15.4　 输出网站页面设计图 298

15.4.1　将图像保存为JPG格式 298

15.4.2　切割并输出图像 299

15.5　 案例制作总结和答疑 301

给你支招

如何下载网站前台的布局模板 301

如何避免导出的切片图像呈现黑白色 302

Chapter 16 制作现代家居装饰网站

16.1　 案例制作效果和思路 304

16.2　 创建网站的基础框架 306

16.2.1　创建网站站点 306

16.2.2　创建网站模板 307

16.2.3　创建样式文件 309

16.2.4　将样式表链接到模板中 311

16.3　 在模板中制作头部和底部 312

16.3.1　制作页面头部 312

16.3.2　制作页面底部 316

16.4　 通过模板制作网页 317

16.4.1　制作现代家居装饰网首页 317

16.4.2　制作现代家居装饰网展示页 320

16.4.3　修改模板页中的导航菜单 322

16.5　 案例制作总结和答疑 323

给你支招

如何在Dreamweaver中使用注释

标签 324

如何在Dreamweaver中添加外部

字体 325