描述
开 本: 16开纸 张: 轻型纸包 装: 平装是否套装: 否国际标准书号ISBN: 9787302445579丛书名: 学以致用系列丛书
本书是“学以致用系列丛书”的全新升级版，其具有如下明显的特色。
? 讲解上——实用为先，语言精练
? 外观上——单双混排，全程图解
? 结构上——布局科学，学习 提升同步进行
? 信息上——栏目丰富，延展学习
本书主要定位于希望快速进入网页设计与制作领域的初、中级用户，特别适合初学网页设计与制作的人员、大中专学生及网页设计制作爱好者。此外，本书也可作为网页设计与制作培训班的教材和自学者的自学读物。
目录
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
前言
关于本丛书
如今，学会使用电脑已不再是一种休闲娱乐的生活方式，在工作节奏如此之快的今天，电脑已成为各类人士工作中不可或缺的一种工具。
为了回馈广大读者，让更多的人学会使用电脑这个***工具和一些常用软件的操作，时隔一年，我们对“学以致用系列丛书”进行了全新升级改版，不仅优化了版式效果，更对内容进行了全面更新，让全书更具深度，让读者能学到更多实用的技巧。
本丛书分别涉及了电脑基础与入门、网上开店、Office办公软件、图形图像和网页设计等方面，每本书的内容和讲解方式都根据其特有的应用要求进行了量身打造，目的是让读者真正学得会，用得好。其具体包括的书目如下。
Excel高效办公入门与实战
Excel函数与图表入门与实战
Excel数据透视表入门与实战
Access 数据库基础及应用（第2版）
PPT设计与制作（第2版）
新手学开网店（第2版）
网店装修与推广（第2版）
Office 2013入门与实战（第2版）
新手学电脑（第2版）
中老年人学电脑（第2版）
电脑组装、维护与故障排除（第2版）
电脑安全与黑客攻防（第2版）
网页设计与制作入门与实战
AutoCAD 2016中文版入门与实战
Photoshop CS6平面设计入门与实战
丛书两大特色
本丛书主要体现了我们的“理论知识和操作学得会，实战工作中能够用得好”这两个创作宗旨。
理论知识和操作学得会
讲解上——实用为先，语言精练
本丛书在内容挑选方面注重3个“”——内容实用，操作常见，案例典型，并且精练讲解理论部分的文字，用通俗的语言将知识讲解清楚，提高读者的阅读和学习效率。
外观上——单双混排，全程图解
本丛书采用灵活的单双混排方式，主打图解式操作，并且每个操作步骤在内容和配图上均采用编号进行逐一对应，让整个操作更清晰，让读者能够轻松和快速掌握。
结构上——布局科学，学习 提升同步进行
在每章知识的结构安排上，采取“主体知识 给你支招”的结构，其中“主体知识”是针对当前章节中涉及的所有理论知识进行讲解；“给你支招”是对本章相关知识的延伸与提升，其实用性和技巧性更强。
信息上——栏目丰富，延展学习
本丛书在知识讲解过程中，还穿插了各种栏目板块，如“给你支招”“小绝招”和“长知识”等。通过这些栏目，有效增加了本书的知识量，扩展了读者的学习宽度，从而帮助读者掌握更多实用的技巧操作。
实战工作中能够用得好
在讲解过程中采用“知识点 实例操作”的结构来讲解的，为了让读者清楚这些知识在实战工作中的具体应用，所有的案例均来源于实战工作中的典型案例，比较有针对性。通过这种讲解方式，让读者能在真实的环境中体会知识的应用，从而达到举一反三，在工作中用得好的目的。
本书内容
本书共分为16章。主要包括网页设计与制作基础、Photoshop网页图像设计、Dreamweaver网页制作以及综合案例实战4个部分，各部分的具体内容如下。
章节介绍 内容体系 作 用?
Chapter 01
这部分内容是学习网页设计 通过对本部分的学习，
与制作的步，其内容 主要是为后面网页设计与
包括：了解网页的基本概念、
制作的各种操作打下基础
HTML的基本概念及网页的
色彩搭配，了解域名与网站
设计流程与网页制作的
常用工具等
Chapter 02~06 这部分为Photoshop
CS6 通过对本部分的学习，
设计网页的内容专题， 读者可熟练掌握Photoshop CS6
具体内容包括：Photoshop 的使用方法以及设计中
CS6网页界面的设计基础、 各种网页用到的元素
图像的基本处理、图层和
文本的使用、网页切片输出
与动画制作以及常用网页
元素的设计等
Chapter 07~14 这部分为 Dreamweaver
CS6 通过对本部分的学习，
制作网页的内容专题， 读者可以熟练掌握
具体内容包括：初识 Dreamweaver CS6
Dreamweaver CS6、 的操作方法，
在网页中插入基础的 从而制作出网页
网页元素、用图像、
多媒体与超链接丰富网页、
使用表格布局页面、
使用CSS样式表美化页面、
用Div CSS布局网页、
表单元素、模板和库的
运用以及运用J avaScript
行为创建特效网页
Chapter 15~16 这部分为综合案例实战， 读者可轻松掌握网页设计
其具体内容包括： 制作的技巧和操作流程
在线出境游网站设计和
制作现代家居装饰网站
本书特点
特
点 特点说明
系统全面 本书体系完善，由浅入深地对网页
设计与制作的知识进行了全面讲解，
其内容从网页设计与制作和Photoshop
CS6网页的界面设计等基础到图像的
处理、图层和文本的使用、
网页切片输出与动画制作、
初识Dreamweaver CS6、
在网页中插入基础网页元素、
用图像、多媒体与超链接丰富
网页以及使用表格布局页面等
升级操作，逻辑递进，结构完整
案例实用 本书为了让读者更容易学会理论知识，
不仅给理论知识配备了大量的案例操作，
而且在案例选择上也很注重实用性，
这些案例不单单是为了验证知识操作，
更是我们实际工作和生活中常遇到的问题。
因此，通过这些案例可以让我们在学会
知识的同时，解决工作和生活中的问题，
达到双赢的目的
拓展知识丰富 在本书讲解的过程中安排了上百个
“小绝招”和“长知识”板块，
用于对相关知识进行提升和拓展。
另外，在每章的后还专门增加了
“给你支招”板块，让读者学会更多的
进阶技巧，从而提高工作效率
语言轻松 本书语言通俗易懂、贴近生活，
让读者能充分享受阅读的过程。
语言的逻辑感较强，前后呼应，
随时激发读者的记忆
读者对象
本书主要定位于希望快速进入网页设计与制作领域的初、中级用户，特别适合初学网页设计与制作的人员、大中专学生及网页设计制作爱好者。此外，本书也可作为网页设计与制作培训班的教材或自学用书。
关于创作团队
本书由智云科技编著，参与本书编写的人员有邱超群、杨群、罗浩、林菊芳、马英、邱银春、罗丹丹、刘畅、林晓军、周磊、蒋明熙、甘林圣、丁颖、蒋杰、何超等，在此对大家的辛勤工作表示衷心的感谢！
由于编者经验有限，加之时间仓促，书中难免会有疏漏和不足，恳请专家和读者不吝赐教。
Chapter 01
网页设计与制作基础
学习目标
在网站制作的整个过程中，网页的设计与制作是重要的环节。因此，我们在进行网页设计与制作之前，首先需要对它的基础知识进行学习，如网页的基本概念、HTML的基本概念等。
本章要点
网页设计基础知识
网页的基本组成元素
网站的分类
HTML的含义与组成
认识HTML标签
使用记事本编写HTML
使用浏览器查看页面效果
网页的配色基础
网页色彩搭配方案
网页配色的注意事项
知识要点 学习时间 学习难度
了解网页和HTML的基本概念 40分钟 ★★
网页色彩搭配与制作的常用工具 40分钟 ★★
了解域名与网站设计流程 30分钟 ★★
1.1 了解网页的基本概念
阿智：小白，跟我说说你理解中的网页是什么？
小白：网页就是我们平时使用浏览器打开的页面吧。
阿智：浏览器打开的页面是网页，但是它只是用来给浏览者浏览的。其实网页的概念非常复杂，它的组成部分也相当多，想要设计和制作出网页，首先需要对它的基本概念有所
了解。
当前，随着网络的高速发展，网站在我们的工作与生活中无处不在，学习网页设计与制作的用户也越来越多。不过用户在学习之前，应该对网页的基本知识有一定的了解，以便能更好地设计和制作网页，如图1-1所示为东东网首页。
图1-1 东东网首页
1.1.1 网页设计基础知识
网页是我们在浏览网站时，看到的一个个画面，而网站则是一些相关网页的集合，一个网站可以有几个页面，也可以包含数以千万个网页，下面我们就来认识一下网站和网页。
网站
网站是发布在网络服务器上的一系列网页文件的集合，访问者可以通过网站获取需要的资讯或服务，也可发布自己想要公开的资讯。网站示例如图1-2所示。
图1-2 网易门户网站
网页
我们在通过浏览器浏览网站时，其实浏览的就是网页。网页不仅需要把各种信息简单直白地表达出来，还需要通过各种制作技巧，让用户更有效地接收到这些信息。网页示例如图1-3所示。
图1-3 精美的网页
1.1.2 网页的基本组成元素
想要顺利地设计与制作出网页，认识网页的基本组成元素必不可少。在图1-1中标识出了大部分的网页组成元素，下面我们就来认识一下网页的基本组成元素。
LOGO
在互联网中，LOGO主要是各个网站用来与其他网站链接的图形标志。在设计和制作的网页时，通常使用图像或动画来制作LOGO，如图1-4所示为展示商城的LOGO。
图1-4 网页中的LOGO
LOGO含义补充说明
LOGO是LOGOtype的缩写，其具体含义是徽标或者商标，它起到对徽标拥有公司的识别和推广的作用，通过形象的徽标可以让消费者记住公司主题及其品牌文化。
文本
在网页中，文本内容是基础、重要的组成元素，也是网页信息传递的主要载体。为了让文本更有特色，用户可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置，如图1-5所示。
图1-5 网页中的文本
图像
丰富多彩的图像是美化网页必不可少的元素，网页中的图像一般为JPG格式和GIF格式。图像不仅可以美化网页，还能让浏览者更加直观地了解信息，如图1-6所示。
图1-6 网页中的图像
超链接
超链接是网页的主要特色，通过它可以快速跳转到当前网站的另一个页面或其他网站的页面中。超链接可以是文本、按钮或图片，只有通过超链接将各个页面链接在一起，才能真正构成一个网站，如图1-7所示。
图1-7 使用超链接实现页面跳转
超链接的识别方法
在网页中，只要将鼠标指针移动到对象上，当鼠标指针变为手型形状，就可以说明该对象就是超链接。在默认情况下，文本超链接都会出现下划线。
导航栏
导航栏是一组超链接，其作用就是链接到各个页面中，方便浏览者快速找到需要的资源。导航栏一般由多个按钮或者多个文本超链接组成，它可以是文字、图片，还可以是SWF动画。网页中的导航栏如图1-8所示。
图1-8 网页中的导航栏
表单
表单主要的作用就是采集数据，如用户的注册资料。然后将这些信息发送到用户设置的目标端，实现浏览者与服务器之间的信息交互。网页中的表单如图1-9所示。
图1-9 网页中的表单
动画
动画实质上是动态的图像，网页中可以使用的动画有GIF图形动画、Flash动画等。制作精致的动画更容易吸引到浏览者眼球。网页中的动画如图1-10所示。
图1-10 网页中的动画
1.1.3 网站的分类
网站是一种新型的媒体，种类繁多，涉及我们身边的方方面面，如日常生活、娱乐游戏、商业活动以及新闻资讯等，下面就来认识几种常见的网站。
个人网站
个人网站是指可以发布个人信息及相关内容的小型网站，即网站内容是介绍自己或是以自己的信息为中心的网站，如图1-11
所示。
图1-11 个人博客网站
企业网站
企业网站主要围绕企业、产品及服务信息进行网络宣传，通过网站树立企业的网络形象，从而提高企业的影响力及知名度，如图1-12所示。
图1-12 企业网站
电子商务网站
电子商务网站就是为浏览者与卖家搭建的一个网络平台，将网络信息、商品、物流与资金结合起来，从而实现商务活动，如
图1-13所示。
图1-13 电子商务网站
娱乐游戏网站
娱乐游戏网站大多是以提供娱乐信息、流行音乐以及各种游戏为主的网站，具有非常强的时效性。因此，页面上具有丰富的信息，如图1-14所示。
图1-14 娱乐游戏网站
行业信息网站
行业信息网站是指能够满足某一特定领域上网的人群或特定需要的网站，这些网站的内容和服务都更为专业，如图1-15所示。
图1-15 财经信息网站
综合门户网站
综合门户网站将互联网上大量信息进行整合、分类，为浏览者打开方便之门，在该类网站上可以浏览到各方面的资讯，如图1-16所示。
网站按主题性质分类
网站按照主题性质不同，可分为政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其他非营利机构网站等。
图1-16 新浪门户网站
1.2 HTML的基本概念
阿智：当你对网页的基本概念有所了解后，还需要对它的基础语言进行认识，你知道什么是网页的基础语言吗？
小白：是支持网页后台的代码吗？它们也能称作为语言吗？
阿智：当然能，不同的网站后台由不同的计算机语言所支持，而基础的就是HTML，下面我就来给你介绍一下。
目前，几乎所有的大中型网站，甚至一些小型网站的制作都是运用可视化编辑软件来完成，这也使许多设计人员对编辑软件产生了很大依赖。虽然这些软件功能强大，操作方便，但要制作更符合标准的网页，还需要熟练掌握HTML。
1.2.1 HTML的含义与组成
HTML（Hyper Text Mark-up
Language ）即超文本标记语言，是标准通用标记语言下的一个应用。而“超文本”是指页面中的图片和链接，甚至音乐、程序等非文字元素。
同时，HTML还是全球互联网上描述网页和外观的标准，用来描述超文本中内容的显示方式，常用扩展名为.html或.htm。
标准的HTML文档的结构包括“头”部分（Head）和“主体”部分（Body）两部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容，如图1-17所示。
图1-17 HTML的组成
1.2.2 认识HTML标签
HTML标记（标签）通常被称为HTML标签(HTML tag)，是由尖括号包围的关键词，如、
。
其中HTML标签通常是成对出现的，如和、
页面标题标签
标签用于定义正文内容的开始，用于定义正文内容的结束。在…之间的内容即为页面的主体内容。使用标签的各种属性可以定义页面主体内容的不同表达效果，标签的主要属性如图1-19所示。
图1-19
标签的主要属性
辅助标签
标签用于定义页面的相关信息，为非成对标记，位于
标签之间。使用标签可以描述页面的作者、摘要、关键词、版权、自动刷新等页面信息，其语法格式如图1-20所示。
图1-20 标签的语法格式
标签举例说明
例如，一个指定页面20秒后自动刷新到abc.html页面，则其标签的语句格式是：。
基底网址标签
标签中包含的是文档的基本网址，其他为与其相对的网址，其语法格式如图1-21所示。
图1-21 语法格式
1.2.3 使用记事本编写HTML代码
HTML是一款以文字为基础的语言，并不需要什么特殊的开发环境，可以直接在Windows自带的记事本中编写，其具体操作
如下。
单击“开始”按钮，在弹出的“开始”菜单中选择“所有程序”|“附件”|“记事本”命令，如图1-22所示。
图1-22 选择命令新建记事本文件
打开一个空白记事本，在记事本中输入相应的HTML代码，如图1-23所示。
图1-23 输入HTML代码
HTML代码编辑完成后，在菜单栏中单击“文件”菜单项，在弹出的下拉菜单中选择“保存”命令，如图1-24所示。
图1-24 选择“文件”丨“保存”命令
打开“另存为”对话框，选择文件的保存位置，在“文件名”文本框中输入扩展名为.html（或.htm）的名称，单击“保存”按钮即可，如图1-25所示。
HTML文件的编写方法
HTML文件的编写方法有两种：一种是利用记事本手工编写；另一种就是在特定的编辑软件中编写HTML代码，如Dreamweaver软件。
图1-25 保存记事本文件
1.2.4 使用浏览器查看页面效果
将HTML源代码输入到记事本并保存之后，可以在浏览器中打开文档来查看其效果（默认以Internet Explorer（IE）浏览器进行查看），其具体操作如下。
在index.html素材文件上右击，在弹出的快捷菜单中选择“打开方式”丨Internet Explorer命令，如图1-26所示。
图1-26 选择Internet Explorer命令
此时，在打开的浏览器中即可浏览到页面效果，如图1-27所示。
图1-27 查看页面效果
静态网页与动态网页的区别
网页是构成网站的基本元素，是包含文字、图片等元素的HTML文件（文件扩展名为.htm、.html、.asp、.php等）。网页又分为静态网页和动态网页，它们之间的区别如图1-28所示。
图1-28 静态网页与动态网页的区别
1.3 网页的色彩搭配
小白：我在浏览一些网站时，发现它们的网站都设计得非常漂亮，这是怎么做到的？
阿智：一般漂亮的网站，除了要有合理的布局之外，重要的就是色彩的搭配，下面我就给你介绍一些常见的色彩搭配方案。
在网页中，色彩的搭配会使整个网页的视觉效果受到影响。而页面中的所有色彩都是由设计者决定的，因此为了制作出好看、有特色的网页，掌握一些网页的色彩搭配技巧就很有必要。
1.3.1 网页的配色基础
一个网页页面中，基本不会出现单一颜色的情况，也不会出现应用所有颜色的情况。一般情况下，网页中必须要有一两种主色，但尽量不要超过4种颜色。在搭配颜色之前，需要对一些网页配色的基础知识进行
了解。
色彩的搭配
色彩与人们的心理、生活体验息息相关，从客观上来理解，色彩好像拥有非常复杂的性格。
因此，设计者可以利用色彩的这个特点，在设计网页时设计出有针对性的色彩效果，从而使网页画面给人一种心旷神怡的感觉，让浏览者印象深刻，如图1-29所示为常见的色彩和色彩搭配。
企业网站色彩搭配技巧
在设计企业网站时，可以使用金属色作为主色，这样能显示出企业大气、沉稳的特点。
图1-29 常见的色彩和色彩搭配
色彩模式
色彩模式是将某种颜色表现为数字形式的模型，或者说是一种记录图像颜色的方式。常见的色彩模式有RGB色彩模式、CMYK色彩模式、灰度模式、索引色彩模式、双色调模式及位图模式等，如图1-30所示为RGB色彩模式和CMYK色彩模式。
图1-30 RGB模式与CMYK模式
1.3.2 网页色彩搭配方案
色彩搭配在网页设计中的重要性不言而喻，它不仅注重设计者的一些个人感觉、经验和风格，还需要设计者掌握一些常用的色彩搭配方案，下面就来介绍一些配色方案。
同种色彩搭配
在使用单一色彩时，可以通过调整色彩的透明度和饱和度，使页面看起来色彩统一，并且比较具有层次感，如图1-31所示。
图1-31 同种色彩的搭配效果
邻近色彩搭配
邻近色彩就是指在色带上相邻的颜色，如绿色和蓝色、红色和黄色就是邻近色彩，使用邻近色彩进行搭配，可以使页面的整体达到和谐统一的效果，如图1-32所示。
图1-32 邻近色彩的搭配效果
冷色色彩搭配
冷色色彩搭配方案可以为网页营造出宁静、高雅及清凉的感觉，这种效果一般使用绿色、紫色及蓝色等色彩搭配，如图1-33
所示。
图1-33 冷色色彩的搭配效果
暖色色彩搭配
暖色色彩搭配方案可以给网页营造出稳定、热情的氛围，一般可使用红色、橙色、黄色以及褐色等色彩搭配，如图1-34所示。
图1-34 暖色色彩的搭配效果
对比色的使用
在页面中使用对比色可以突出重点，让浏览者产生强烈的视觉效果。在设计网页配色时，一般以一种颜色为主色调，对比色作为点缀。
1.3.3 网页配色的注意事项
色彩心理学被广泛地运用到网页设计与制作中，从简单的LOGO设计到整个页面的制作，网页配色所起到的作用越来越大，它是给浏览者传递信息的重要因素之一。
色彩为视觉语言，具有影响人的心理，唤醒人们感情的作用，网页色彩也是树立网站形象的关键之一，所以网页配色时需特别注意以下事项。
色彩的鲜明性
色彩鲜明的网页，更加吸引浏览者的注意力。使用与众不同的色彩，才会给浏览者留下较为深刻的印象，如图1-35所示。
图1-35 色彩鲜明的网页
色彩的独特性
网站用色的独特风格，与众不同的色彩，可以使浏览者对网页产生深刻的印象，如图1-36所示。
图1-36 色彩独特的网页
色彩的合理性
色彩搭配需要根据网站主题来设计，不同的主题应搭配不同的色彩。同时，色彩还需要与设计者所要传递的气氛相适合，如
图1-37所示。
图1-37 色彩的合理性
色彩的艺术性
网页设计也要遵循艺术规律，因此它的色彩搭配可以具有一些艺术性，如图1-38
所示。
图1-38 色彩的艺术性
网页配色的其他注意事项
色彩是网页设计的重要部分，同时也是品牌设计中至关重要的一环。所以在设计网站时，色彩传达的意义必须同企业或个人契合，将企业或个人故事和意义融入设计到中来。
通常情况下，设计者会直接从LOGO或设计指南来取色，虽然这样会有局限，但是这确实可以让设计变得更简单。
1.4 了解域名与网站设计的流程
小白：我对网页设计与制作的基础知识有所了解了，但不知道如何开始设计与制作网站，网站制作好后怎样让他人浏览？
阿智：简单的方式就是将网站进行本地浏览，但你不可能将网站发给每个浏览者，让他们都通过本地进行浏览。此时，就需要对域名进行认识，同时，要开始进行网站设计，了解它的设计流程必不可少。
每个网站都有一个地址，如同每套房子都有一个门牌号一样，于是就引入了域名的概念，它是为了让浏览者更方便地记住该网站的地址。同时，要制作出一个完整的网站，整体的方案规划必不可少，下面我们就先对域名的相关知识及网站设计的流程进行了解。
1.4.1 域名的常见分类
域名是由一串用点分隔的名字组成的网络上某台计算机或某个计算机组的名称，这个名称具有性。
域名的分类有多种方式，常见的就是按照域名等级划分，可以将其划分为域名、二级域名和子域名3种。
域名
域名由两个或两个以上的词构成，中间由点号分隔开，右边的那个词称为域名，如“.com”“.net”“.org”“.gov”等。
域名是只有一个后缀的域名，如在百度网址http:\www.baidu.com中，“.com”就是一个域名，如图1-39所示。
图1-39 百度首页
域名的分类
我们接触到的域名又可分为两类：一是国家和地区域名（nTLDs），如中国是cn，日本是jp等；二是国际域名（gTLDs），如表示工商企业的.com，表示网络提供商的 .net，表示非营利组织的.org等。目前，只有美国是没有域名的国家。
二级域名
二级域名是指域名之下的域名，在国际域名下，它是指域名注册人的网上名称；在国家域名下，它表示注册企业类别的符号，如在新浪网址http:\www.sina.com.cn网址中，“.com”就是一个二级域名，如图1-40所示。
图1-40 新浪首页
我国二级域名的分类
在国内，二级域名又分为类别域名和行政区域名两类。其中，类别域名共6个，包括ac（科研机构）、com、edu、gov、net和org；行政区域名有34个，分别对应于我国各省、自治区和直辖市。
子域名
子域名是域名的下一级，在同一个域名前使用不同的主机名，就可以划分出多个子域名，默认情况下使用www主机名，新闻网站使用news主机名，如图1-41所示为网易新闻网站域名com下的子域名。
图1-41 网易新闻首页
1.4.2 认识域名服务器（DNS）
把域名翻译成IP地址的软件称为域名系统，即DNS，它是一种管理名称的方法。而所谓域名服务器（即Domain Name Server，简称DNS）实际上就是装有域名系统的主机，它是一种能够实现名称解析的分层结构数据库。
域名服务器是指保存有该网络中所有主机的域名和对应IP地址，并具有将域名转换为IP地址功能的服务器。
1．域名服务器的解析过程
连接到互联网中的每台电脑都会被自动分配一个IP地址，数据的传输实际上就是通过不同的IP地址进行的。
当一个域名被解析到某台服务器上，并且把网页文件放到这台服务器上后，浏览者想要浏览某个网页文件时，自己的电脑就知道去相应服务器中获取对应域名的网页信息，这都是通过域名服务器来实现的，如
图1-42所示。
图1-42 域名服务器的解析过程
在图1-42中可以看出域名服务器的解析过程，其中主要经历了6个步骤，其具体解释如图1-43所示。
图1-43 域名服务器解析过程解释
2．域名服务器的类型
域名服务也有多种类型，主要可以分为4种，分别是主域名服务器、辅助域名服务器、缓存域名服务器和转发域名服务器，其具体介绍如图1-44所示。
图1-44 域名服务器的类型
1.4.3 网站的设计流程
在设计与制作网页的过程中，要遵循一定的顺序才能协调分配整个制作过程的资源和进度。
建站之前应该有一个整体的规划，规划好网页的大致框架后即可进行设计，然后对网站进行测试，成功后就可发布到网上，用户就能开始访问设计好的网站了。下面我们来看看具体的网页设计流程。
确定网站主题
一个网站要有明确的主题，只有主题鲜明，才能做出切实可行的计划，然后“按部就班”地进行设计与制作。
收集相关素材
在设计和制作网站主体前，设计者应先计划好每个页面的具体内容，包括文字、图片和声音等素材。这些素材有的需要自己创造，有的需要从其他素材网站中下载并加工，如图1-45所示。
图1-45 素材网站
规划网页布局
确立主题和搜集素材完成后，就可以进行具体的网页设计操作。但网页设计先做的是对网页布局进行规划，只有布局和内容结合非常成功的网页，才是受欢迎的网页。如图1-46所示，这是一种左右框架类型
网页。
图1-46 左右框架型网页
确定网页的主色调
一个网站必须要有一种或两种主色调，才不至于让用户迷失方向，也不会单调，所以确定网页的主题色也是需要考虑的步骤
之一。
设计与制作页面
规划好设计和布局之后，制作效果页面就可以得心应手了，这里可以使用Fireworks或Photoshop软件来制作合成页面效果图。
测试和发布网站
网站制作完成后，需要进行测试，若还存在问题可及时更改，然后就能上传发布站点。发布站点即将制作好并通过测试的站点发布到指定的服务器空间里，之后就可以通过指定的IP或域名访问该站点，其流程如
图1-47所示。
图1-47 网站测试发布流程图
后期的更新与维护
后期的更新与维护指的是，当已经发布的站点有内容或结构上的变动时，需要及时对站点页面进行再次编辑，以此保持网站内容的新鲜感。同时，我们也要对站点的安全、性能等进行维护，以确保用户能正常浏览网页，如图1-48所示。
图1-48 在网站后台更新数据
1.5 网页制作的常用工具
小白：如果要编写网站程序，有没有一些辅助软件呢？如果只是通过记事本来编写，工作量太大了。
阿智：当然有，在记事本中编写代码只是为了帮助设计者更快速地掌握代码的使用方法。如果要设计和制作网页，可以使用Photoshop和Dreamweaver两个工具来简化操作。
在网页设计与制作中，除了使用配色技术搭配出精美的网页外，还需要综合运用各种网页设计工具来提高开发效率。而用于网页设计与制作的工具软件有很多，但常使用的还是Photoshop和Dreamweaver，Photoshop用于美化网页，Dreamweaver则用于编辑网页内容。
1.5.1 网页美化工具Photoshop
Adobe Photoshop，简称PS，它是由Adobe公司开发和发行的图像处理软件。它凭借直观的用户体验、强大的图形处理功能以及广泛的应用范围，成为当前秀的平面设计编辑软件之一，一直占据着图形处理软件的领先地位，如图1-49所示为Photoshop CS6的启动界面。
图1-49 Photoshop CS6的启动界面
1.5.2 网页编辑工具Dreamweaver
Dreamweaver是网页设计领域中应用广泛、功能强大的网页编辑工具，利用它可以轻而易举地制作出网页。
同时，Dreamweaver还具有所见即所得的页面编辑特点，由于支持Styles Sheet样式表单，所以可以创造丰富的页面效果，而且提供无限的扩展能力等功能，如图1-50所示为Dreamweaver CS6的启动界面。
图1-50 Dreamweaver CS6的启动界面
动画制作工具Flash
在制作网页时，常常插入动画丰富页面或制作具有特效的导航栏界面，而这些大部分都是通过Flash动画制作工具制作出来的。Flash是一款功能强大的动画制作软件，它将动画的设计与处理推向了一个更高、更灵活的艺术水准。
给你支招|如何通过网页查看HTML源代码并保存
小白：既然我们运行记事本中的HTML代码就能浏览到网页，那么可不可以通过网页查看HTML源文件呢？
阿智：当然可以，只需要在打开的页面中，通过快捷菜单中的命令即可查看。其实，想要提高网页的制作水平，经常阅读他人的HTML源代码是一个有效的方式，查看HTML源代码的具体操作如下。
使用浏览器打开网页，在页面上右击，在弹出的快捷菜单中选择“查看源”命令，如图1-51所示。
图1-51 选择“查看源”命令
此时，在打开页面中可以查看到该网页中所有的源代码。在菜单栏中单击“文件”菜单项，在弹出的下拉菜单中选择“保存”命令，如图1-52所示。
图1-52 查看源代码并保存
打开“另存为”对话框，设置存储位置，在“文件名”文本框中输入名称，
单击“保存”按钮，如图1-53所示。
图1-53 “另存为”对话框
此时，网页将会被存储到本地电脑中，用户可随时查看其源代码。在网页文件上右击，在弹出的快捷菜单中选择“打开方式”丨“记事本”命令，如图1-54所示。
图1-54 选择“记事本”命令
此时，用户即可通过记事本在本地查看网页的HTML源代码，如图1-55所示。
图1-55 使用记事本查看网页源代码
给你支招|留白在网页中有哪些好处
小白：我在浏览某些网站时，常常会看到一些网页中，有大部分的区域没有进行配色，也就是这部分区域只是以白色呈现，这是为什么呢？
阿智：白色是网站中基础的颜色，或多或少都要占有一部分区域，很多网页甚至会留出大部分的白色空间，并将其作为网页的重要组成部分，而这就是留白艺术。按照艺术审美的观念，留白与网页中的其他组成元素一样必不可少，如文本、图片、动画等。留白，不仅可以给浏览者遐想的空间，还能恰当协调页面中的多个元素，如图1-56所示。
图1-56 拥有留白的网页
评论
还没有评论。