内容简介

本书以零基础讲解为宗旨，用实例引导读者深入学习，采取“网站基础入门→制作静态网页→网页美化布局→设计网页元素→开发动态网站→网站开发实战→网站全能扩展”的讲解模式，深入浅出地讲解网页设计和网站建设的各项技术及实战技能。

本书第1篇【网站基础入门】主要内容包括网页设计与网站建设基础、网站配色与布局、HTML语言速成、网站建设基本流程与制作工具等。第2篇【制作静态网页】主要内容包括使用Dreamweaver CC创建站点、使用文本丰富网页内容、使用图像与多媒体网页元素、设计网页中的超链接、使用网页表单和行为等。第3篇【网页美化布局】主要内容包括使用表格布局网页、使用CSS层叠样式表、利用CSS+Div布局网页等。第4篇【设计网页元素】主要内容包括调整与修饰图像、制作网页按钮与导航条、制作网页特效边线与背景、制作网页Logo与网页Banner、制作简单网页动画元素、创建交互式动画、制作动态网站的Logo与Banner等。第5篇【开发动态网站】主要内容包括认识PHP语言、配置动态网站运行环境、使用MySQL数据库、动态网站应用模块开发等。第6篇【网站开发实战】主要内容包括开发网站用户管理系统和开发信息资讯管理系统等。第7篇【网站全能扩展】主要内容包括网站的测试与发布、网站安全与防御、网站优化与推广等。

 

本书面向初、中级用户，适合任何想学习网页设计和网站建设的人员，无论您是否从事计算机相关行业，无论您是否接触过网页设计和网站建设，通过学习本书均可快速掌握设计网页和开发动态网站的方法和技巧。

 

 

前    言

　　“网站开发案例课堂”系列图书是专门为办公技能和网页设计初学者量身定制的一套学习用书。整套书涵盖网页设计、网站开发、数据库设计等方面。整套书具有以下几个特点。

面向前沿科技

　　无论是网站建设、数据库设计还是HTML 5、CSS 3、JavaScript，我们都精选较为前沿或者用户群最大的领域推进，帮助大家认识和了解最新动态。

权威的作者团队

　　组织国家重点实验室和资深应用专家联手编著该套图书，融合丰富的教学经验与优秀的管理理念。

学习型案例设计

　　以技术的实际应用过程为主线，全程采用图解和同步多媒体结合的教学方式，生动、直观、全面地剖析使用过程中的各种应用技能，降低难度以提升学习效率。

为什么要写这样一本书

　　随着网络的发展，很多企事业单位和广大网民对于建立网站的需求越来越强烈。另外，对于大中专院校，很多学生需要做网站毕业设计，但是这些读者又不懂网页代码程序，不知道从哪里下手。针对这些情况，我们编写了本书，以期引导读者学习网页设计和网站建设的全面知识。通过本书的实训，读者可以很快地学会设计网页和开发网站，提高职业化能力，从而帮助解决公司与求职者的双重需求问题。

本书特色

零基础、入门级的讲解

　　无论您是否从事计算机相关行业，无论您是否接触过网页设计和动态网站开发，都能从本书中找到最佳起点。

超多、实用、专业的范例和项目

　　本书在编排上紧密结合深入学习网页制作技术的先后过程，从网页设计的基本概念开始，带领大家逐步深入地学习各种应用技巧，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者读起来简明轻松，操作起来有章可循。

随时检测自己的学习成果

　　大部分章末的“疑难解惑”板块，均根据本章内容精选而成，从而帮助读者解决自学过程中最常见的疑难问题。

细致入微、贴心提示

　　本书在讲解过程中，在各章中使用了“注意”“提示”“技巧”等小贴士，使读者在学习过程中更清楚地了解相关操作、理解相关概念，并轻松掌握各种操作技巧。

专业创作团队和技术支持

　　您在学习过程中遇到任何问题，可加入QQ群(案例课堂VIP，号码为451102631)进行提问，专家人员会在线答疑。

超值资源大放送

全程同步教学录像

　　涵盖本书所有知识点，详细讲解每个实例及项目的过程及技术关键点。比看书更轻松地掌握书中所有的动态网站开发的知识，而且扩展的讲解部分使您得到比书中更多的收获。

超多容量王牌资源

　　赠送大量王牌资源，包括本书实例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模板、12部网页开发必备参考手册、11个精彩JavaScript案例、Dreamweaver CC快捷键速查手册、HTML标签速查表、精彩网站配色方案赏析、网页样式与布局案例赏析、CSS+Div布局赏析案例、Web前端工程师常见面试题等。读者可以通过QQ群(案例课堂VIP，号码为451102631)获取赠送资源，也可以扫描二维码，下载本书资源。

读者对象

没有任何网页设计和网站建设基础的初学者。

有一定的网页设计和网站建设的基础，想精通网站开发的人员。

有一定的动态网站开发基础，没有项目经验的人员。

正在进行毕业设计的学生。

大专院校及培训学校的老师和学生。

创作团队

　　本书由刘春茂编著，参加编写的人员还有刘玉萍、张金伟、蒲娟、周佳、付红、李园、郭广新、侯永岗、王攀登、刘海松、孙若淞、王月娇、包慧利、陈伟光、胡同夫、王伟、展娜娜、李琪、梁云梁和周浩浩。在编写过程中，我们竭尽所能地将最好的讲解呈现给读者，但也难免有疏漏和不妥之处，敬请不吝指正。若您在学习中遇到困难或疑问，或有任何建议，可写信至信箱357975357@qq.com。

　　　　

 

　　                                                      编  者  

 

 

目    录

第1篇  网站基础入门

 

第1章  网站建设入门——网页设计与

网站建设基础 3

1.1  认识网页和网站 4

1.1.1  网页 4

1.1.2  网站 4

1.1.3  网站的分类 5

1.2  认识网页的基本组成 6

1.2.1  网址 7

1.2.2  网页标题 7

1.2.3  Logo 7

1.2.4  文本 8

1.2.5  图像 8

1.2.6  导航栏 9

1.2.7  超链接 9

1.2.8  表单 9

1.2.9  动画 10

1.2.10  Banner 10

1.3  认识静态网页与动态网页 11

1.3.1  静态网页 11

1.3.2  动态网页 11

1.4  网站建设的相关概念 12

1.4.1  因特网与万维网 12

1.4.2  浏览器与HTML 12

1.4.3  URL、域名与IP地址 13

1.4.4  上传和下载 14

1.5  疑难解惑 14

第2章  第一视觉最重要——网站配色

与布局 15

2.1  善用色彩设计网页 16

2.1.1  认识色彩 16

2.1.2  确定网站的主题色 17

2.1.3  网页中色彩的搭配 19

2.1.4  网页元素的色彩搭配 20

2.1.5  网页色彩搭配的技巧 21

2.2  常见的网站布局结构 23

2.2.1  “国”字型 24

2.2.2  标题正文型 24

2.2.3  左右框架型 24

2.2.4  上下框架型 25

2.2.5  综合框架型 25

2.2.6  封面型 25

2.2.7  Flash型 26

2.3  网站的色彩应用案例 26

2.3.1  案例1——网络购物类网站的

色彩应用 26

2.3.2  案例2——游戏类网站的色彩

应用 27

2.3.3  案例3——企业门户网站的色彩

应用 28

2.3.4  案例4——时政新闻类网站的

色彩应用 28

2.3.5  案例5——影音类网站的色彩

应用 29

2.3.6  案例6——娱乐类网站的色彩

应用 30

2.4  综合案例——定位网站页面的框架 30

2.5  疑难解惑 31

第3章  读懂网页密码——HTML语言

速成 33

3.1  网页的HTML构成 34

3.1.1  文档标记 34

3.1.2  头部标记 35

3.1.3  主体标记 35

3.2  HTML的常用标记 36

3.2.1  标题标记<h1>到<h6> 36

3.2.2  段落标记<p> 36

3.2.3  换行标记<br> 37

3.2.4  链接标记<a> 38

3.2.5  列表标记<ul> 39

3.2.6  图像标记<img> 41

3.2.7  表格标记<table> 44

3.2.8  表单标记<form> 45

3.3  综合案例——制作日程表 46

3.4  疑难解惑 49

第4章  开启网页制作之路——网站建设

基本流程与制作工具 51

4.1  建站方式 52

4.1.1  自助建站 52

4.1.2  智能建站 52

4.1.3  专业设计 53

4.2  建站流程 53

4.2.1  网站规划 53

4.2.2  搜集资料 54

4.2.3  制作网页 54

4.2.4  网站测试 55

4.2.5  申请域名 55

4.2.6  申请空间 55

4.2.7  网站备案 55

4.2.8  发布网页 57

4.2.9  网站推广和维护 57

4.3  制作网页的常用软件 58

4.3.1  案例1——认识网页布局

软件Dreamweaver CC 58

4.3.2  案例2——认识图像处理

软件Photoshop CC 58

4.3.3  案例3——认识动画制作

软件Flash CC 59

4.4  综合案例——网页制作软件间的

相互关系 60

4.5  疑难解惑 61

 

　　

第2篇  制作静态网页

 

第5章  磨刀不误砍柴工——使用

DreamweaverCC创建站点 65

5.1  认识Dreamweaver CC 66

5.1.1  启动Dreamweaver CC 66

5.1.2  认识Dreamweaver CC的

工作区 67

5.1.3  体验Dreamweaver CC的新增

功能 69

5.2  创建站点 72

5.2.1  案例1——创建本地站点 72

5.2.2  案例2——创建远程站点 73

5.3  管理站点 74

5.3.1  案例3——打开站点 74

5.3.2  案例4——编辑站点 75

5.3.3  案例5——删除站点 76

5.3.4  案例6——复制站点 76

5.3.5  案例7——导出与导入站点 77

5.4  操作站点文件及文件夹 79

5.4.1  案例8——创建文件夹 79

5.4.2  案例9——创建文件 79

5.4.3  案例10——文件或文件夹的

移动和复制 80

5.4.4  案例11——删除文件或

文件夹 80

5.5  综合案例——创建本地站点 81

5.6  疑难解惑 82

第6章  制作我的第一个网页——使用文本

丰富网页内容 83

6.1  网页文档的基本操作 84

6.1.1  案例1——创建网页 84

6.1.2  案例2——页面属性 84

6.1.3  案例3——保存网页 87

6.1.4  案例4——打开网页 87

6.1.5  案例5——预览网页 88

6.2  使用文字添加网页内容 89

6.2.1  案例6——插入文字 89

6.2.2  案例7——设置字体 90

6.2.3  案例8——设置字号 90

6.2.4  案例9——设置字体颜色 91

6.2.5  案例10——设置字体样式 92

6.2.6  案例11——编辑段落 94

6.2.7  案例12——创建项目列表 99

6.3  使用特殊文本添加网页内容 101

6.3.1  案例13——插入换行符 101

6.3.2  案例14——插入水平线 102

6.3.3  案例15——插入日期 102

6.3.4  案例16——插入特殊字符 103

6.4  综合案例——制作图文并茂的网页 104

6.5  疑难解惑 107

第7章  有图有真相——使用图像与

多媒体网页元素 109

7.1  常用图像格式 110

7.1.1  GIF格式 110

7.1.2  JPEG格式 110

7.1.3  PNG格式 111

7.2  用图像美化网页 111

7.2.1  案例1——插入图像 111

7.2.2  案例2——设置图像的属性 113

7.2.3  案例3——设置图像对齐

方式 115

7.2.4  案例4——剪裁需要的图像 116

7.2.5  案例5——调整图像的亮度

与对比度 117

7.2.6  案例6——设置图像的锐化

效果 118

7.3  插入其他图像元素 119

7.3.1  案例7——插入鼠标经过

图像 119

7.3.2  案例8——插入图像占位符 121

7.3.3  案例9——插入图像热点

区域 122

7.4  在网页中插入多媒体 123

7.4.1  案例10——插入背景音乐 123

7.4.2  案例11——插入Flash动画 124

7.4.3  案例12——插入FLV视频 125

7.4.4  案例13——插入HTML 5

音频 127

7.4.5  案例14——插入HTML 5

视频 129

7.5  综合案例1——制作精彩的多媒体

网页 130

7.6  综合案例2——在代码中插入背景

音乐 132

7.7  疑难解惑 134

第8章  不在网页中迷路——设计网页中

的超链接 135

8.1  超级链接 136

8.1.1  链接的概念 136

8.1.2  常规的链接 136

8.1.3  链接的类型 137

8.2  链接路径 138

8.2.1  什么是URL 138

8.2.2  绝对路径 138

8.2.3  相对路径 139

8.2.4  根相对路径 139

8.3  创建超级链接的方法 139

8.3.1  案例1——使用菜单命令创建

链接 139

8.3.2  案例2——使用【属性】面板

创建链接 140

8.3.3  案例3——使用【指向文件】

按钮创建链接 140

8.4  创建不同种类的网页超链接 141

8.4.1  案例4——添加文本链接 141

8.4.2  案例5——添加图像链接 142

8.4.3  案例6——创建外部链接 143

8.4.4  案例7——创建锚记链接 143

8.4.5  案例8——创建图像热点

链接 145

8.4.6  案例9——创建电子邮件

链接 146

8.4.7  案例10——创建下载文件的

链接 147

8.4.8  案例11——创建空链接 148

8.4.9  案例12——创建脚本链接 148

8.5  综合案例——为企业网站添加友情

链接 149

8.6  疑难解惑 150

第9章  让网页互动起来——使用网页

表单和行为 151

9.1  认识表单 152

9.1.1  什么是表单 152

9.1.2  认识表单对象 152

9.1.3  案例1——插入表单 155

9.1.4  案例2——设置表单属性 156

9.2  常用表单对象的应用 157

　　

　　

9.2.1  案例3——插入文本域 157

9.2.2  案例4——插入密码域 158

9.2.3  案例5——插入复选框 159

9.2.4  案例6——插入单选按钮 160

9.2.5  案例7——插入下拉菜单 160

9.2.6  案例8——插入滚动列表 161

9.2.7  案例9——插入按钮 162

9.2.8  案例10——插入图像按钮 162

9.2.9  案例11——插入文件上传域 163

9.3  认识行为 164

9.3.1  行为的概念 164

9.3.2  案例12——打开【行为】

面板 164

9.4  常用内置行为的应用 165

9.4.1  案例13——交换图像 165

9.4.2  案例14——弹出信息 167

9.4.3  案例15——打开浏览器窗口 168

9.4.4  案例16——检查表单行为 170

9.4.5  案例17——设置状态栏文本 171

9.5  综合案例——使用表单制作留言本 173

9.6  疑难解惑 176

 

　　

第3篇  网页美化布局

 

第10章  简单的网页布局——使用表格

 布局网页 179

10.1  案例1——插入表格 180

10.2  选中表格 181

10.2.1  案例2——选中完整的表格 181

10.2.2  案例3——选中行和列 182

10.2.3  案例4——选中单元格 183

10.3  表格属性 183

10.3.1  案例5——设置单元格属性 184

10.3.2  案例6——设置整个表格

 属性 185

10.4  操作表格 185

10.4.1  案例7——调整表格的大小 185

10.4.2  案例8——增加行和列 186

10.4.3  案例9——删除行、列、

 单元格 187

10.4.4  案例10——剪切、复制和粘贴

 单元格 188

10.4.5  案例11——合并和拆分

 单元格 189

10.5  操作表格数据 190

10.5.1  案例12——在表格中输入

 文本 190

10.5.2  案例13——在表格中插入

 图像 191

10.5.3  案例14——表格中的数据

 排序 191

10.5.4  案例15——导入Excel表格

 数据 192

10.6  综合案例——使用表格布局网页 193

10.7  疑难解惑 196

第11章  读懂样式表密码——使用CSS

 层叠样式表 197

11.1  初识CSS样式表 198

11.1.1  什么是CSS 198

11.1.2  CSS的3种类型 198

11.1.3  CSS的语法格式 199

11.1.4  案例1——使用Dreamweaver

 编写CSS 200

11.2  CSS的使用方式 201

11.2.1  案例2——行内样式 201

11.2.2  案例3——内嵌样式 202

11.2.3  案例4——链接样式 203

11.2.4  案例5——导入样式 204

11.3  CSS中的常用样式 205

11.3.1  案例6——使用字体样式 206

11.3.2  案例7——使用文本样式 210

11.3.3  案例8——使用背景样式 214

11.3.4  案例9——设计边框样式 221

11.3.5  案例10——设置列表样式 225

11.4  综合案例——制作简单公司主页 229

11.5  疑难解惑 232

第12章  架构师的大比拼——利用CSS+

 Div布局网页 233

12.1  认识并创建层 234

12.1.1  什么是层 234

12.1.2  案例1——使用Dreamweaver

 创建层 234

12.2  Div层的定位方法 235

12.2.1  盒子模型的概念 235

12.2.2  案例2——定义网页border

 区域 236

12.2.3  案例3——定义网页padding

 区域 237

12.2.4  案例4——定义网页margin

 区域 239

12.3  使用CSS排版 242

12.3.1  案例5——将页面用DIV

 分块 242

12.3.2  案例6——设置各块位置 243

12.3.3  案例7——用CSS定位 243

12.4  常见网页布局模式 246

12.4.1  案例8——网页单列布局

 模式 246

12.4.2  案例9——网页1-2-1型布局

 模式 250

12.4.3  案例10——网页1-3-1型布局

 模式 253

12.5  综合案例——创建左右布局页面 257

12.6  疑难解惑 260

　　

 

　　

第4篇  设计网页元素

 

第13章  网页图像说变就变——调整

 与修饰图像 263

13.1  图像色调的调整 264

13.1.1  案例1——调整图像的亮度

 与对比度 264

13.1.2  案例2——使用【色阶】命令

 调整图像 264

13.1.3  案例3——使用【曲线】命令

 调整图像 268

13.1.4  案例4——调整图像的

 曝光度 271

13.2  图像色彩的调整 272

13.2.1  案例5——使用【色相/饱和度】

 命令 272

13.2.2  案例6——使用【自然饱和度】

 命令 274

13.2.3  案例7——使用【色彩平衡】

 命令 274

13.2.4  案例8——使用【黑白】

 命令 275

13.2.5  案例9——使用【照片滤镜】

 命令 276

13.2.6  案例10——使用【通道混合器】

 命令 277

13.2.7  案例11——使用【匹配颜色】

 命令 278

13.2.8  案例12——使用【替换颜色】

 命令 280

13.2.9  案例13——使用【可选颜色】

 命令 282

13.2.10  案例14——使用【阴影/高光】

  命令 283

13.3  修复图像中的污点与瑕疵 284

13.3.1  案例15——修复图像中的

 污点 284

13.3.2  案例16——修复图像中的

 瑕疵 285

13.3.3  案例17——修复图像选中的

 区域 286

13.3.4  案例18——内容感知移动

 工具 286

13.3.5  案例19——消除照片中的

 红眼 287

13.4  通过图像或图案修饰图像 288

13.4.1  案例20——通过复制图像修饰

 图像 288

13.4.2  案例21——通过图案修饰

 图像 289

13.5  通过橡皮擦修饰图像 290

13.5.1  案例22——擦除图像中指定的

 区域 290

13.5.2  案例23——擦除图像中的指定

 颜色 290

13.5.3  案例24——擦除图像中相近的

 颜色 291

13.6  修饰图像中的细节 292

13.6.1  案例25——修饰图像中生硬的

 边缘 292

13.6.2  案例26——提高图像的

 清晰度 293

13.6.3  案例27——通过涂抹修饰

 图像 293

13.7  通过调色修饰图像 294

13.7.1  案例28——减淡工具和加深

 工具 294

13.7.2  案例29——改变图像色彩的

 饱和度 295

13.8  综合案例——制作放射线背景图 295

13.9  疑难解惑 296

第14章  网页中的路标与导航——制作

 网页按钮与导航条 297

14.1  按钮与导航条的设计原则 298

14.1.1  网页按钮的设计注意事项 298

14.1.2  网页导航条的设计注意

 事项 298

14.2  制作按钮 299

14.2.1  案例1——制作普通按钮 299

14.2.2  案例2——制作迷你按钮 301

14.2.3  案例3——制作水晶按钮 303

14.2.4  案例4——制作木纹按钮 307

14.3  制作导航条 310

14.3.1  案例5——制作横向导航条 310

14.3.2  案例6——制作垂直导航条 313

14.4  综合案例——制作水晶风格网站

 导航条 314

14.5  疑难解惑 320

第15章  网页中迷人的蓝海——制作

 网页特效边线与背景 321

15.1  制作装饰边线 322

15.1.1  案例1——制作装饰虚线 322

15.1.2  案例2——制作内嵌线条 324

15.1.3  案例3——制作斜纹线条 325

15.2  制作网页背景图片 327

15.2.1  案例4——制作渐变背景

 图片 327

15.2.2  案例5——制作透明背景

 图像 330

15.3  综合案例——制作梦幻星光网页

 背景 331

15.4  疑难解惑 336

第16章  网页中的标志与旗帜——制作

 网页Logo与网页Banner 337

16.1  网页Logo与Banner概述 338

16.1.1  网页Logo设计标准 338

16.1.2  网页Logo的标准尺寸 339

16.1.3  网页Logo的一般形式 340

16.1.4  网页Banner的标准尺寸 341

16.1.5  Banner设计的注意要点 341

16.2  制作文字Logo