网页设计与网站建设全攻略

第1章  了解网页网站建设基础.......................................................................................... 1

1.1  网页的基本概念............................................................................................................................... 1

1.1.1  网页....................................................................................................................................... 1

1.1.2  HTML.................................................................................................................................... 2

1.1.3  统一资源定位符URL........................................................................................................ 2

1.1.4  ASP........................................................................................................................................ 3

1.1.5  数据库................................................................................................................................... 4

1.2  网页设计与网站建设需要的常用技术........................................................................................ 4

1.2.1  网页编辑排版软件............................................................................................................. 4

1.2.2  网页动画制作软件............................................................................................................. 5

1.2.3  网页图像设计软件............................................................................................................. 6

1.2.4  网页标记语言HTML......................................................................................................... 6

1.2.5  网页脚本语言JavaScript.................................................................................................. 8

1.2.6  动态网页编程语言ASP.................................................................................................... 8

1.3  常见网站的类型与特点.................................................................................................................. 9

1.3.1  个人网站.............................................................................................................................. 9

1.3.2  企业型网站.......................................................................................................................... 9

1.3.3  娱乐休闲类网站............................................................................................................... 10

1.3.4  机构类网站........................................................................................................................ 10

1.3.5  电子商务类网站............................................................................................................... 11

1.3.6  综合门户类网站............................................................................................................... 12

第2章  网页的色彩搭配.................................................................................................. 13

2.1  色彩的分类..................................................................................................................................... 13

2.1.1  有彩色................................................................................................................................. 13

2.1.2  无彩色................................................................................................................................. 15

2.2  色彩的三要素................................................................................................................................. 16

2.2.1  明度..................................................................................................................................... 16

2.2.2  色相..................................................................................................................................... 17

2.2.3  纯度..................................................................................................................................... 17

2.3  色彩对比.......................................................................................................................................... 19

2.3.1  明度对比............................................................................................................................ 19

2.3.2  色相对比............................................................................................................................ 20

2.3.3  纯度对比............................................................................................................................ 21

2.3.4  色彩的面积对比............................................................................................................... 22

2.3.5  色彩的冷暖对比............................................................................................................... 22

2.4  各种色彩搭配................................................................................................................................. 23

2.4.1  红色色彩搭配.................................................................................................................... 23

2.4.2  黄色色彩搭配.................................................................................................................... 24

2.4.3  蓝色色彩搭配.................................................................................................................... 24

2.4.4  绿色色彩搭配.................................................................................................................... 25

2.4.5  紫色色彩搭配.................................................................................................................... 25

2.4.6  橙色色彩搭配.................................................................................................................... 26

2.4.7  白色色彩搭配.................................................................................................................... 27

2.4.8  黑色色彩搭配.................................................................................................................... 27

2.4.9  灰色色彩搭配.................................................................................................................... 27

2.5  网页配色技巧................................................................................................................................. 28

2.5.1  背景与文字颜色搭配....................................................................................................... 28

2.5.2  使用一种色彩.................................................................................................................... 31

2.5.3  两色搭配是用色的基础.................................................................................................. 31

2.5.4  色彩的数量........................................................................................................................ 33

第3章  快速掌握Dreamweaver设计基本网页................................................................ 34

3.1  Dreamweaver CC简述................................................................................................................... 35

3.2  Dreamweaver CC的工作界面...................................................................................................... 36

3.2.1  菜单栏................................................................................................................................. 36

3.2.2  插入栏................................................................................................................................. 37

3.2.3  浮动面板............................................................................................................................ 38

3.2.4  属性面板............................................................................................................................ 38

3.2.5  文档窗口............................................................................................................................ 38

3.3  创建与管理站点............................................................................................................................. 39

3.3.1  小实例——创建本地站点.............................................................................................. 39

3.3.2  小实例——管理本地站点.............................................................................................. 40

3.4  插入文本.......................................................................................................................................... 42

3.4.1  小实例——插入普通文本.............................................................................................. 42

3.4.2  小实例——设置文本属性.............................................................................................. 44

3.4.3  小实例——插入特殊字符.............................................................................................. 46

3.5  使用列表.......................................................................................................................................... 48

3.5.1  小实例——插入项目列表.............................................................................................. 48

3.5.2  使用编号列表.................................................................................................................... 50

3.6  在网页中插入文件头部内容....................................................................................................... 52

3.6.1  插入Meta信息................................................................................................................. 53

3.6.2  插入关键字........................................................................................................................ 53

3.6.3  插入说明............................................................................................................................ 54

3.7  插入其他对象................................................................................................................................. 54

3.7.1  小实例——插入日期....................................................................................................... 54

3.7.2  小实例——插入水平线.................................................................................................. 57

3.8  实战——创建基本文本网页....................................................................................................... 59

第4章  设计丰富多彩的图像和多媒体网页...................................................................... 62

4.1  在网页中插入图像........................................................................................................................ 63

4.1.1  网页中图像的常见格式.................................................................................................. 63

4.1.2  小实例——插入图像....................................................................................................... 64

4.2  鼠标经过图像................................................................................................................................. 66

4.3  插入声音.......................................................................................................................................... 69

4.3.1  关于音频文件格式........................................................................................................... 69

4.3.2  小实例——添加背景音乐.............................................................................................. 69

4.4  插入视频.......................................................................................................................................... 73

4.4.1  视频的文件格式............................................................................................................... 73

4.4.2  小实例——在网页中插入视频..................................................................................... 73

4.5  插入Flash........................................................................................................................................ 75

4.6  网页链接的创建............................................................................................................................. 78

4.6.1  网页链接的基本类型....................................................................................................... 78

4.6.2  小实例——图像链接....................................................................................................... 78

4.6.3  小实例——E-mail链接.................................................................................................... 80

4.6.4  小实例——下载文件链接.............................................................................................. 82

4.6.5  小实例——脚本链接....................................................................................................... 83

4.7  实战——图文混排网页................................................................................................................ 84

第5章  使用表格排版网页............................................................................................... 88

5.1  插入表格.......................................................................................................................................... 88

5.1.1  小实例——插入表格....................................................................................................... 89

5.1.2  小实例——添加内容到单元格..................................................................................... 90

5.2  编辑表格.......................................................................................................................................... 90

5.2.1  选择表格及其元素........................................................................................................... 91

5.2.2  调整表格和单元格的大小.............................................................................................. 93

5.2.3  添加、删除行或列........................................................................................................... 94

5.2.4  拆分单元格........................................................................................................................ 96

5.2.5  合并单元格........................................................................................................................ 96

5.2.6  拷贝、粘贴表格............................................................................................................... 97

5.3  设置表格属性................................................................................................................................. 97

5.3.1  设置整个表格的属性....................................................................................................... 98

5.3.2  设置行、列和单元格属性.............................................................................................. 99

5.4  排序和整理表格内容.................................................................................................................... 99

5.4.1  导入表格式数据............................................................................................................... 99

5.4.2  排序表格.......................................................................................................................... 102

5.5  实战——制作圆角表格.............................................................................................................. 104

第6章  使用模板和库快速创建网页............................................................................... 109

6.1  创建模板........................................................................................................................................ 110

6.1.1  小实例——新建模板..................................................................................................... 110

6.1.2  小实例——从现有文档创建模板............................................................................... 112

6.2  创建可编辑区域........................................................................................................................... 113

6.2.1  小实例——插入可编辑区域........................................................................................ 113

6.2.2  删除可编辑区域............................................................................................................. 114

6.3  使用模板创建网页...................................................................................................................... 114

6.4  创建与应用库项目...................................................................................................................... 119

6.4.1  小实例——创建库项目................................................................................................ 119

6.4.2  小实例——应用库项目................................................................................................ 121

6.4.3  小实例——修改库项目................................................................................................ 122

6.5  实战................................................................................................................................................ 125

实战1——创建模板.................................................................................................................. 125

实战2——利用模板创建网页................................................................................................. 135

第7章  使用行为设计动感 特效网页............................................................................. 140

7.1  了解行为........................................................................................................................................ 141

7.1.1  动作................................................................................................................................... 141

7.1.2  事件................................................................................................................................... 142

7.2  行为的添加与编辑...................................................................................................................... 143

7.2.1  行为的添加...................................................................................................................... 143

7.2.2  行为的修改...................................................................................................................... 144

7.3  使用Dreamweaver内置行为..................................................................................................... 144

7.3.1  小实例——交换图像..................................................................................................... 145

7.3.2  恢复交换图像.................................................................................................................. 146

7.3.3  小实例——打开浏览器窗口........................................................................................ 147

7.3.4  小实例——调用JavaScript.......................................................................................... 149

7.3.5  小实例——转到URL.................................................................................................... 151

7.3.6  小实例——弹出信息..................................................................................................... 153

7.3.7  小实例——预先载入图像............................................................................................ 155

7.3.8  小实例——设置状态栏文本........................................................................................ 157

7.3.9  小实例——检查表单..................................................................................................... 158

7.3.10  小实例——Blind效果................................................................................................. 161

7.3.11  小实例——跳转菜单................................................................................................... 162

7.4  使用JavaScript制作网页特效.................................................................................................. 165

7.4.1  小实例——制作滚动文字公告................................................................................... 165

7.4.2  小实例——禁止下载网页图像................................................................................... 167

7.4.3  小实例——设置为IE首页........................................................................................... 169

7.4.4  小实例——添加到收藏夹............................................................................................ 170

第8章  使用CSS样式表美化网页................................................................................. 172

8.1  了解CSS样式表.......................................................................................................................... 173

8.2  CSS基本语法............................................................................................................................... 174

8.3  设置CSS属性.............................................................................................................................. 175

8.3.1  设置CSS类型属性........................................................................................................ 175

8.3.2  设置CSS背景属性........................................................................................................ 175

8.3.3  设置区块样式.................................................................................................................. 176

8.3.4  设置CSS方框属性........................................................................................................ 177

8.3.5  设置边框样式.................................................................................................................. 178

8.3.6  设置CSS列表属性........................................................................................................ 178

8.3.7  设置CSS定位属性........................................................................................................ 179

8.3.8  设置CSS扩展属性........................................................................................................ 180

8.3.9  过渡样式的定义............................................................................................................. 180

8.4  链接到或导出外部CSS样式表................................................................................................ 181

8.4.1  小实例——创建内部样式表........................................................................................ 181

8.4.2  小实例——创建外部样式表........................................................................................ 183

8.4.3  小实例——链接外部样式表........................................................................................ 185

8.5  实战................................................................................................................................................ 186

实战1——应用CSS样式固定字体大小............................................................................... 186

实战2——应用CSS样式制作阴影文字............................................................................... 189

第9章  用CSS DIV灵活布局页面................................................................................ 193

9.1  初识DIV........................................................................................................................................ 193

9.1.1  DIV概述........................................................................................................................... 193

9.1.2  CSS DIV布局的优势.................................................................................................... 194

9.1.2  创建DIV........................................................................................................................... 194

9.2  CSS定位........................................................................................................................................ 195

9.2.1  盒子模型.......................................................................................................................... 196

9.2.2  元素的定位...................................................................................................................... 196

9.3  CSS DIV布局的常用方法......................................................................................................... 200

9.3.1  使用DIV对页面整体规划............................................................................................ 200

9.3.2  使用CSS定位................................................................................................................. 201

9.3.3  设计各块的位置............................................................................................................. 203

9.4  常见的布局类型........................................................................................................................... 203

9.4.1  使用CSS定位单行单列固定宽度.............................................................................. 203

9.4.2  一列自适应...................................................................................................................... 205

9.4.3  两列固定宽度.................................................................................................................. 205

9.4.4  两列宽度自适应............................................................................................................. 207

9.4.5  三列浮动中间宽度自适应............................................................................................ 207

第10章  动态网站设计基础........................................................................................... 210

10.1  动态网页的特点与制作过程................................................................................................. 210

10.1.1  动态网页特点............................................................................................................ 210

10.1.2  动态网页工作原理................................................................................................... 211

10.1.3  动态网站技术核心................................................................................................... 211

10.2  动态网站技术类型................................................................................................................... 213

10.2.1  ASP.............................................................................................................................. 213

10.2.2  PHP.............................................................................................................................. 213

10.2.3  JSP................................................................................................................................ 214

10.2.4  ASP、PHP和JSP比较............................................................................................ 214

10.3  搭建本地服务器....................................................................................................................... 215

10.3.1  安装IIS....................................................................................................................... 215

10.3.2  配置Web服务器...................................................................................................... 218

10.4  创建数据库连接....................................................................................................................... 219

第11章  HTML5与CSS3指南...................................................................................... 221

11.1  HTML5简介.............................................................................................................................. 221

11.1.1  HTML5的特点.......................................................................................................... 221

11.1.2  HTML5基本布局...................................................................................................... 223

11.2  HTML5结构元素..................................................................................................................... 225

11.2.1  header.......................................................................................................................... 226

11.2.2  nav............................................................................................................................... 227

11.2.3  footer........................................................................................................................... 227

11.2.4  article........................................................................................................................... 228

11.3  预览激动人心的CSS3............................................................................................................. 229

11.3.1  CSS3的发展历史...................................................................................................... 229

11.3.2  CSS3新增特性.......................................................................................................... 230

11.3.3  主流浏览器对CSS3的支持.................................................................................... 235

11.4  使用CSS3实现圆角表格....................................................................................................... 236

第12章  使用Photoshop

绘制与修饰网页图像............................................................. 238

12.1  Photoshop CC工作界面......................................................................................................... 238

12.1.1  菜单命令..................................................................................................................... 239

12.1.2  工具箱......................................................................................................................... 240

12.1.3  工具选项栏................................................................................................................ 240

12.1.4  浮动面板..................................................................................................................... 241

12.1.5  文档窗口..................................................................................................................... 241

12.2  图像的调整................................................................................................................................ 242

12.2.1  小实例——调整图像大小...................................................................................... 242

12.2.2  小实例——调整画布大小...................................................................................... 243

12.3  设置前景色和背景色.............................................................................................................. 244

12.3.1  默认的前景色与背景色........................................................................................... 244

12.3.2  更改和恢复前景色与背景色.................................................................................. 244

12.4  创建选择区域........................................................................................................................... 246

12.4.1  选框工具..................................................................................................................... 246

12.4.2  套索工具..................................................................................................................... 246

12.4.3  魔棒工具..................................................................................................................... 247

12.4.4  小实例——制作透明图像...................................................................................... 247

12.5  基本绘图工具........................................................................................................................... 250

12.5.1  画笔工具..................................................................................................................... 250

12.5.2  铅笔工具..................................................................................................................... 251

12.5.3  减淡和加深工具的应用........................................................................................... 251

12.6  综合实战——创建基本文本网页实例................................................................................ 252

第13章  使用Photoshop

CC设计网页中的特效文字.................................................... 257

13.1  使用文字工具........................................................................................................................... 258

13.1.1  小实例——文字的输入........................................................................................... 258

13.1.2  小实例——设置文字属性...................................................................................... 258

13.1.3  小实例——文字的变形........................................................................................... 260

13.2  Photoshop图层基本操作....................................................................................................... 261

13.2.1  添加图层..................................................................................................................... 261

13.2.2  删除图层..................................................................................................................... 261

13.2.3  合并图层..................................................................................................................... 262

13.2.4  设置图层样式............................................................................................................ 262

13.3  设计常见的网页特效文字...................................................................................................... 269

13.3.1  实战1——发光文字................................................................................................ 270

13.3.2  实战2——渐变文字................................................................................................ 272

13.3.3  实战3——晶莹浮雕文字........................................................................................ 274

第14章  设计网页元素.................................................................................................. 277

14.1  设计网站Logo.......................................................................................................................... 278

14.1.1  Logo的特点............................................................................................................... 278

14.1.2  Logo设计标准.......................................................................................................... 278

14.1.3  实战1——网站Logo设计实例............................................................................ 279

14.2  网络广告的制作....................................................................................................................... 282

14.2.1  网络广告设计技巧................................................................................................... 282

14.2.2  实战2——设计网络广告........................................................................................ 283

14.3  设计网站首页........................................................................................................................... 287

14.3.1  实战3——首页的制作............................................................................................ 287

14.3.2  实战4——切割输出首页图像............................................................................... 296

14.4  设计网页按钮........................................................................................................................... 298

14.4.1  实战5——制作圆角按钮........................................................................................ 298

14.4.2  实战6——制作矩形按钮........................................................................................ 300

14.5  制作导航栏................................................................................................................................ 302

14.5.1  实战7——制作简单精美的导航栏...................................................................... 302

14.5.2  实战8——制作透明导航........................................................................................ 305

第15章  Flash CC绘图基础......................................................................................... 309

15.1  Flash CC简介............................................................................................................................ 309

15.2  Flash CC的工作界面............................................................................................................... 311

15.2.l  菜单栏.......................................................................................................................... 312

15.2.2  舞台............................................................................................................................. 312

15.2.3  工具箱......................................................................................................................... 313

15.2.4  时间轴......................................................................................................................... 313

15.2.5  属性面板..................................................................................................................... 314

15.3  绘制图形工具........................................................................................................................... 314

15.3.1  线条工具..................................................................................................................... 314

15.3.2  椭圆工具与矩形工具............................................................................................... 316

15.2.3  多角星形工具............................................................................................................ 317

15.3.4  铅笔工具..................................................................................................................... 319

15.3.5  刷子工具..................................................................................................................... 320

15.3.6  钢笔工具..................................................................................................................... 321

15.4  选择对象工具........................................................................................................................... 322

15.4.1  选择工具..................................................................................................................... 322

15.4.2  部分选取工具............................................................................................................ 323

15.5  编辑图形颜色工具................................................................................................................... 324

15.5.1  颜料桶工具................................................................................................................ 324

15.5.2  墨水瓶工具................................................................................................................ 325

15.5.3  滴管工具..................................................................................................................... 326

15.5.4  橡皮擦工具................................................................................................................ 326

15.6  文本工具的基本使用.............................................................................................................. 327

15.7  实战............................................................................................................................................. 330

15.7.1  实战1——制作立体投影文字............................................................................... 330

15.7.2  实战2——创建简单的向日葵花........................................................................... 332

第16章  使用Flash

CC创建基本动画.......................................................................... 335

16.1  时间轴与关键帧....................................................................................................................... 336

16.1.1  时间轴......................................................................................................................... 336

16.1.2  时间轴中的图层........................................................................................................ 336

16.1.3  关键帧......................................................................................................................... 337

16.2  创建基本动画........................................................................................................................... 338

16.2.1  实战1——逐帧动画................................................................................................ 338

16.2.2  实战2——补间动画................................................................................................ 341

16.3  创建引导动画........................................................................................................................... 344

16.3.1  引导动画的创建原理............................................................................................... 344

16.3.2  实战3——创建引导动画........................................................................................ 344

16.4  创建遮罩动画........................................................................................................................... 348

16.4.1  遮罩动画的创建原理............................................................................................... 348

16.4.2  实战4——制作遮罩的图片效果........................................................................... 348

16.5  创建有声动画........................................................................................................................... 352

16.5.1  Flash CC中可使用的声音文件类型..................................................................... 352

16.5.2  添加声音..................................................................................................................... 352

16.5.3  编辑声音..................................................................................................................... 354

16.5.4  实战6——利用按钮控制声音播放...................................................................... 355

第17章  使用Flash

CC创建交互动画.......................................................................... 359

17.1  ActionScript概述..................................................................................................................... 360

17.1.1  ActionScript的发展史............................................................................................. 360

17.1.2  ActionScript

3.0的优点........................................................................................... 361

17.2  ActionScript 3.0语句中的参数.............................................................................................. 361

17.2.1  ActionScript中的相关术语.................................................................................... 361

17.2.2  ActionScript

3.0基本语法....................................................................................... 363

17.3  常用ActionScript语句........................................................................................................... 364

17.3.1  for循环....................................................................................................................... 365

17.3.2  while和do while循环.............................................................................................. 365

17.3.3  if语句.......................................................................................................................... 366

17.3.4  特殊条件判断............................................................................................................ 367

17.4  ActionScript的编辑环境........................................................................................................ 367

17.5  利用ActionScript制作交互网页动画................................................................................. 368

17.5.1  实战1——创建多种图片过渡效果...................................................................... 368

17.5.2  实战2——创建精美的遮罩动画效果.................................................................. 370

17.5.3  实战3——制作下雨效果........................................................................................ 373

17.5.4  实战4——制作翻转发光文字效果...................................................................... 377

第18章  网站的整体策划.............................................................................................. 380

18.1  为什么要进行网站策划.......................................................................................................... 380

18.2  怎样进行网站策划................................................................................................................... 381

18.2.1  网站策划的原则........................................................................................................ 381

18.2.2  网站策划的关键点................................................................................................... 382

18.3  如何确定网站的定位.............................................................................................................. 383

18.4  确定网站的目标用户.............................................................................................................. 384

18.5  网站的内容策划....................................................................................................................... 385

18.5.1  网站内容策划的重要性........................................................................................... 385

18.5.2  如何做好网站内容策划........................................................................................... 385

第19章  网站的发布与维护........................................................................................... 387

19.1  站点的测试................................................................................................................................ 387

19.1.1  检查链接..................................................................................................................... 387

19.1.2  站点报告..................................................................................................................... 388

19.1.3  清理文档..................................................................................................................... 389

19.2  网页的上传................................................................................................................................ 390

19.2.1  利用Dreamweaver上传网页.................................................................................. 390

19.2.2  使用LeapFtp软件上传文件................................................................................... 392

19.3  网站的维护................................................................................................................................ 393

19.3.1  网站的软硬件维护................................................................................................... 393

19.3.2  网站内容维护............................................................................................................ 394

19.3.3  网站备份..................................................................................................................... 394

19.4  网站安全维护........................................................................................................................... 395

19.4.1  目录和应用程序访问权限的设置......................................................................... 395

19.4.2  匿名和授权访问控制............................................................................................... 396

19.4.3  隐藏IP地址............................................................................................................... 397

19.4.4  操作系统账号管理................................................................................................... 398

19.4.5  安装必要的安全软件............................................................................................... 399

第20章  网站的宣传推广.............................................................................................. 400

20.1  注册到搜索引擎....................................................................................................................... 400

20.1.1  搜索引擎..................................................................................................................... 400

20.1.2  搜索引擎的原理........................................................................................................ 401

20.1.3  搜索引擎分类............................................................................................................ 402

20.1.4  搜索引擎注册............................................................................................................ 403

20.1.5  搜索引擎优化原则................................................................................................... 403

20.2  导航网站登录........................................................................................................................... 405

20.3  友情链接.................................................................................................................................... 405

20.4  网络广告.................................................................................................................................... 406

20.5  发布信息推广........................................................................................................................... 407

20.6  利用群组消息即时推广.......................................................................................................... 408

20.7  电子邮件.................................................................................................................................... 409

20.7.1  电子邮件推广............................................................................................................ 409

20.7.2  电子邮件推广的技巧............................................................................................... 409

20.8  问答式免费推广....................................................................................................................... 410

20.9  在博客中推广........................................................................................................................... 411

20.10  传统网下推广......................................................................................................................... 413

第21章  设计企业宣传展示型网站................................................................................ 415

21.1  网站前期策划........................................................................................................................... 415

21.2  企业网站的主要功能.............................................................................................................. 416

21.3  设计网站首页........................................................................................................................... 417

21.4  创建本地站点........................................................................................................................... 427

21.5  二级模板页面的设计.............................................................................................................. 428

21.5.1  创建库文件................................................................................................................ 428

21.5.2  创建模板..................................................................................................................... 430

21.5.3  利用模板创建二级页面 438

本书全面系统地介绍了网页设计与网站建设的方法和技巧，通过大量实例，让读者逐步掌握网站建设软件的使用方法，真正完成从入门到精通的转变。全书穿插大量的操作技巧与学习心得，让读者迅速成为网页设计的高手。本书共21章，以网站建设入门、Dreamweaver静态网页的制作、动态网站与HTML5、Photoshop设计美观的网页图像、Flash设计网站动画、网站的策划与发布推广、商业网站建设实战为线索具体展开，循序渐进地讲述了网页设计与网站建设方方面面的知识。本书知识全面实用、浅显易懂，让读者轻松实现自己拥有网站的梦想。本书可作为大专院校、高职高专、中等职业学校计算机专业的教材，各种计算机培训班的教材，也可以作为想学习网页制作与网站建设的自学者的参考手册。