网页设计综合实践教程

内容前后紧密衔接，网页设计中用到的静态图片和Flash动画等在教材的相应章节中均有详细讲解，全书内容有机接合，完整体现一个网站的实现过程。 

本书围绕网站开发和网页设计，重点介绍了基于Dreamweaver CS6平台进行网页制作的知识与技术，以及利用网页设计辅助工具Photoshop CS6和Flash CS6进行网页素材制作的方法与技巧。全书共9章，从介绍网页设计基础知识开始，深入浅出地展示了Dreamweaver CS6基础与网站制作过程、Photoshop CS6图片处理与网站素材制作、Flash CS6动画制作与网站素材制作，*后以网站规划与设计完美诠释了网站设计理念、方法和制作的全过程。
本书采用项目驱动教学模式思路，以项目开发为教学框架，引导学生进行案例分析、案例制作，以及网页知识和技术的学习。全书内容衔接自然，紧密度高，主题案例贯穿始末，能够让读者在掌握网页知识和设计技术的同时，对网站开发与设计有整体清晰的认识和把握。
本书可作为计算机专业和非计算机专业学生学习网页设计的入门教材，也可作为网站开发与制作爱好者的自学参考用书。

目录

第1章网页设计基础知识

1.1网络基础知识

1.1.1WWW简介

1.1.2什么是HTTP、URL和域名

1.2了解网页与网站

1.2.1网页

1.2.2网站

1.3网站的规划与设计

1.4网页设计

1.4.1网页风格设计

1.4.2网页布局设计

1.4.3网页色彩设计

1.4.4网页内容设计

1.4.5网页设计案例分析

1.5常用网页设计工具

1.5.1网页制作软件——Adobe Dreamweaver CS6

1.5.2图像处理软件——Adobe Photoshop CS6

1.5.3动画制作软件——Adobe Flash CS6

1.6网页制作入门

1.6.1HTML简介

1.6.2CSS简介

1.6.3JavaScript简介

1.7常见浏览器介绍

思考与实践

第2章Dreamweaver CS6基础入门

2.1Dreamweaver CS6简介

2.1.1Dreamweaver CS6新增功能

2.1.2Dreamweaver CS6工作区

2.2Dreamweaver CS6站点建设与管理

2.2.1案例分析：  嘉州文化长廊网站

2.2.2网站站点规划与创建

2.2.3站点管理

2.3使用Dreamweaver CS6制作简单网页

2.3.1案例分析：  “嘉州画派”网页设计

2.3.2HTML基础

2.3.3CSS基础

2.3.4案例制作： 图文并茂页面制作

思考与实践

第3章Dreamweaver CS6网页综合设计

3.1表格布局

3.1.1案例分析： “文化动态”网页设计

3.1.2表格基础

3.1.3表格布局综合案例制作

3.2DIV CSS布局

3.2.1网站标准

3.2.2案例分析

3.2.3DIV基础

3.2.4案例制作——页眉Banner制作

3.2.5CSS盒子模型

3.2.6盒子的浮动

3.2.7案例制作——页眉导航条制作

3.2.8导航条专项

3.2.9清除浮动

3.2.10案例制作——主体内容和页脚制作

3.2.11盒子的定位

3.2.12综合提高练习

3.3超链接应用

3.3.1案例分析

3.3.2超链接基础

3.3.3案例制作——实现内部超链接

3.3.4案例制作——实现外部超链接

3.3.5案例制作——实现锚记超链接

3.3.6案例制作——超链接风格美化

3.4创建并使用外部CSS样式

3.4.1创建外部CSS文件

3.4.2链接外部CSS文件

3.4.3案例制作——创建并链接外部样式表

思考与实践

第4章网页设计高级应用

4.1表单

4.1.1表单概述

4.1.2案例分析

4.1.3认识表单控件

4.1.4案例制作

4.2嵌入式框架

4.2.1案例分析

4.2.2认识嵌入式框架

4.2.3案例制作

4.3CSS特效

4.3.1创建圆角

4.3.2添加阴影

4.3.3背景编辑

4.3.4透明度设置

4.3.5转换效果

4.3.6过渡动画设置

4.4JavaScript特效

4.4.1JavaScript简介

4.4.2JavaScript基本语法

4.4.3认识【行为】面板

4.4.4案例制作——滚动图片的停止与运行

4.4.5案例制作——元素的显示与隐藏

思考与实践

第5章Photoshop CS6基础入门

5.1图像处理基本知识

5.1.1像素、图像分辨率与位图

5.1.2图像的颜色模式

5.1.3图像的文件格式

5.2Photoshop CS6工作环境及优化设置

5.2.1Photoshop CS6的新增功能

5.2.2认识Photoshop CS6工作界面组件

5.2.3切换工作界面

5.2.4自定义工作界面

5.2.5工作界面相关参数设置

5.3Photoshop CS6的基本操作

5.3.1基本文件操作

5.3.2调整图像与画布

5.3.3图像的显示

5.3.4恢复错误操作或文件

思考与实践

第6章Photoshop CS6图像处理

6.1选区的创建与编辑

6.1.1选框工具

6.1.2套索工具

6.1.3快速选择工具和魔棒工具

6.1.4裁剪工具

6.1.5选区编辑

6.2图层的创建与应用

6.2.1图层的基本概念

6.2.2图层的基本操作

6.2.3编辑图层

6.2.4图层效果和样式

6.3图像的绘制和修饰

6.3.1设置颜色

6.3.2画笔工具

6.3.3渐变工具与油漆桶

6.3.4图章工具

6.3.5橡皮擦与魔术橡皮擦工具

6.3.6修复、修补和红眼工具的使用

6.3.7模糊、锐化和涂抹工具的使用

6.3.8减淡、加深和海绵工具的使用

6.4路径与文字工具

6.4.1创建路径

6.4.2编辑路径

6.4.3文字工具

6.5色彩与色调的调整

6.5.1色彩平衡调整

6.5.2【色相/饱和度】命令

6.5.3亮度对比度调整

6.5.4【色阶】命令

6.6蒙版

6.6.1图层蒙版

6.6.2快速蒙版

6.6.3图像合成案例制作

6.7滤镜

6.7.1滤镜基础知识

6.7.2风格化滤镜

6.7.3扭曲滤镜

6.7.4像素化

6.7.5渲染

6.7.6画笔描边滤镜

6.7.7素描滤镜

6.7.8纹理滤镜

6.7.9蒙版与滤镜示例制作

6.8动画的制作

6.8.1认识帧模式【时间轴】面板

6.8.2创建帧动画

6.9常见网页元素设计及图像制作综合案例

6.9.1网页背景图案制作

6.9.2网站Logo制作

6.9.3按钮案例制作

6.9.4网站Banner制作

思考与实践

第7章Flash CS6动画设计基础

7.1Flash基础入门

7.1.1Flash CS6概述

7.1.2Flash CS6的操作界面

7.2Flash动画基础

7.2.1与Flash文档相关的文件类型

7.2.2时间轴

7.2.3元件与示例

7.2.4选取对象

7.2.5Flash CS6影片制作的基本流程

7.3Flash CS6基本工具的使用

7.3.1线条、刷子、颜料桶、变形工具

7.3.2椭圆、矩形、多角星形工具

7.3.3橡皮擦、铅笔、钢笔工具

思考与实践

第8章Flash CS6动画制作

8.1制作逐帧动画

8.1.1逐帧动画的创建

8.1.2绘图纸

8.1.3逐帧动画示例

8.2制作形状补间动画

8.2.1形状补间动画的创建

8.2.2形状补间动画示例——文字变国旗

8.3制作传统补间动画

8.3.1创建传统补间的方法

8.3.2传统补间动画示例——渐变的广告动画

8.4制作补间动画

8.4.1制作补间动画

8.4.2补间动画和传统补间之间的差异

8.4.3补间动画示例——珍爱生命

8.5制作路径动画

8.5.1创建沿路径运动的传统补间

8.5.2应用沿路径运动的传统补间动画的技巧

8.5.3路径动画制作示例——蝴蝶飞舞

8.6制作遮罩动画

8.6.1创建遮罩动画

8.6.2遮罩动画制作示例

8.7为Flah动画添加声音

8.7.1导入声音

8.7.2添加声音到影片帧中

8.7.3查看声波

8.8制作交互式动画

8.8.1【动作】面板介绍

8.8.2为关键帧添加ActionScript

8.8.3为按钮添加ActionScript

8.8.4为影片剪辑添加ActionScript

8.8.5stop和play语句

8.8.6goto语句

8.8.7getURL语句

8.8.8综合案例——动画Banner制作

思考与实践

第9章网站的规划与设计

9.1网站规划概念

9.2网站内容规划

9.2.1网站类型

9.2.2网站应该包括的内容

9.2.3目录结构规划

9.2.4链接结构规划

9.2.5图片文字规格

9.3网站策划

9.3.1网站功能分析

9.3.2网站非功能分析

9.4网页制作

9.4.1首页版面设计

9.4.2首页制作

9.4.3模板制作

9.4.4其他页面制作

9.5测试和发布网站

9.5.1站点的本地测试

9.5.2域名空间的申请

9.5.3发布站点

9.5.4更新维护站点

思考与实践

参考文献

前言

计算机网络已成为社会发展和进步的重要推动力。在互联网时代，人们的工作、学习和生活方式与网络紧密联系，甚至还在被日益强大的网络所不断改变。网站作为网络应用的重要平台，早已成为人们进行信息交流的有效途径。各级政府、企业，甚至个人，都在积极地利用网站进行信息推广、形象展示和各类商业活动。作为当代大学生，有必要对网站相关技术进行了解和掌握，以具备一定的计算机技能。
1. 本书主要内容
本书从介绍网站基础知识出发，以“嘉州文化长廊”网站项目作为教材框架，融会贯通地介绍了Dreamweaver CS6、Photoshop CS6和Flash CS6的理论和实践操作。整本书通过大量的案例和示例，系统性地介绍了网站设计前端技术。
第1章：网页设计基础知识，向读者提供全面的网站设计理论知识。
第2章：Dreamweaver CS6基础入门，帮助读者快速掌握Dreamweaver CS6的基本操作界面、站点管理，并能制作简单的图文并茂的页面。
第3章：Dreamweaver CS6 网页综合设计，帮助读者熟练掌握网站布局工具表格和DIV CSS，同时指导读者进行超链接应用。
第4章：网页设计高级应用，帮助读者了解交互式技术，如表单。学习CSS3和JavaScript，提高用户网页体验。
第5章：Photoshop CS6基础入门，介绍Photoshop CS6的基本操作和版本新增功能。
第6章：Photoshop CS6图像处理，通过示例演示对选区、图层等知识进行介绍，实现“嘉州文化长廊”网站所需图片素材制作，如网站Logo和Banner的制作。
第7章：Flash CS6 动画设计基础，介绍Flash动画基础和基本工具的使用方法。
第8章：Flash CS6动画制作，通过示例演示对各类动画进行介绍，从而实现“嘉州文化长廊”网站动画Banner制作和“乌木文化”广告动画制作。
第9章：网站的规划与设计，以“王阳明心学网站”为例，引导读者对前面所学理论和实践操作知识进行综合性运用，从而具备独立制作网站的能力。
2. 本书特色
本书采用理论 实践的方式循序渐进地进行各类知识和技术的讲解。
1) 项目驱动
从网站站点建设开始，以一个完整网站为例进行系统性的知识和技术讲解，引导读者进行网站搭建，感受真实的项目开发过程，进行有意义的、更具针对性的网页知识和技术的学习。

2) 内容衔接紧密
无论是网页设计，还是素材制作，都紧密围绕同一主题网站进行讲解，使知识衔接自然，内容完整，整体更具鲜活力。
3) 案例丰富
所有知识点通过案例和示例进行实践操作，使理论和实践完美结合，且每个例子都进行了详细步骤说明，读者能轻松上手，并能举一反三。
4) 完备练习
每章后面都备有实践操作练习，以便读者对每节知识进行深度学习和掌握，从而具备灵活运用所学知识和技术的能力。
5) 地方特色
本书网站内容具有鲜明的地方特色，以介绍和推广当地各类文化为目的，进行网站知识的讲解，具有一定的社会意义。
本书作者均为高校从事计算机教学的一线教师，为了方便读者学习，本书提供了完整的教学案例素材、综合网站项目、PPT课件、实验练习题目及素材等丰富资源。
本书由蔡宗吟、杜丽君和张贵红任主编，由杨霞、李勤任副主编。其中，第1、2章由杜丽君编写，第3、4章由蔡宗吟编写，第5、6章由李勤编写，第7、8章由张贵红编写，第9章由杨霞编写。全书由蔡宗吟和杜丽君负责项目框架搭建、统稿和定稿工作。另外，苏炳均、秦洪英、李林、李彬等也参与了本书的策划、编写及审稿工作。整本书的编写工作还得到了乐山师范学院教务处、计算机科学学院领导的大力支持，在此一并感谢。
由于编者水平有限，书中难免出现纰漏和不足之处，欢迎广大读者批评指正。
编者
2017年8月

第3章Dreamweaver CS6网页综合设计
第2章介绍了图文并茂的网页设计，设计者采用自上而下的布局方式将文字和图片内容进行顺序放置。除文字和图片外，网页元素还包含动画、声音、视频等，仅仅是自上而下的设计太过单一，设计者需要实现更丰富的结构呈现，来合理放置各类元素，使网页结构丰满、界面友好，且便于操作。本章将介绍布局工具表格和DIV CSS，进行丰富多样的结构设计。同时引入网页设计的重要应用——超链接。

3.1表格布局

表格是网页布局的一种常用工具，由于表格具有整齐规范的特点，因此，将它用于网页布局中，将会实现整齐简洁的页面结构。
3.1.1案例分析： “文化动态”网页设计
1. 网页结构分析

本节将以嘉州文化长廊网站中的子页“文化动态”网页为例(如图31所示)，使用表格进行基本数据的排版和整体页面的布局。

图31“文化动态”页面效果图

使用表格将页面划分为三个区域： 页眉、主体内容和页脚。通过表格嵌套，实现了页眉部分网站Banner和导航条的分割与组合，页面主体内容区域“新闻动态”和“图说新闻”版块的分割与组合。
2. 网页内容分析
页眉部分插入了Flash动画，融合了网站Logo和Banner。主导航条包含网站的8个栏目，方便用户进行浏览。此页面的主要内容是展示嘉州的各类文化新闻，主体内容部分的左侧以文字新闻方式展开信息显示，右侧以图片新闻方式突出热点或重要新闻，包含静态图片和动画图片。
3. 网页风格分析
为展示嘉州深厚的文化底蕴，整个网站选择了棕色和红色为主色调，使网页厚重而又不失蓬勃生机，此页面也延续了这种风格。绝大多数文字字体为宋体，文字颜色以黑色为主，大小为12像素，标题信息加粗。
导航条文字字体为【微软雅黑】，大小为16像素。导航条的“文化动态”加亮显示，以红色背景加图片衬托白色文字，以提示用户当前所处位置在“文化动态”页面。
3.1.2表格基础
本节将以“新闻动态”版块为操作实例，实现表格插入与编辑，如图32所示。

图32“新闻动态”版块

1. 插入表格
在文档【视图】窗口中，将光标放在需要创建表格的位置，单击【插入】面板中【常用】分类的【表格】图标，或者选择【插入】菜单中的【表格】命令，弹出【表格】对话框，如图33所示。【表格】对话框中主要属性说明如下。

图33【表格】对话框

(1) 行数： 设置表格的行数。
(2) 列： 设置表格的列数。
(3) 表格宽度： 设置表格的宽度，可以填入数值，在其后的下拉列表框中有【百分比】和【像素】两个单位选项。百分比是相对单位，表格的宽度会随浏览器窗口的大小而改变，像素是绝对单位，其宽度不随浏览器窗口改变。
(4) 单元格边距： 设置单元格的内容与所在单元格边框之间的距离，以“像素”为单位。如果未设置具体值，表格默认有边距。

(5) 单元格间距： 设置单元格与单元格之间的距离，以“像素”为单位。如果未设置具体值，表格默认有间距。
(6) 边框粗细： 设置表格边框的宽度，以“像素”为单位。输入数字0表示没有边框，在【设计】视图中用虚线表示表格边框。
(7) 页眉： 设置页眉样式，有以下4种样式。
① 无： 表格不使用列或行标题。
② 左： 将表格的第一列作为标题列，可以为表格的每一行输入一个标题。
③ 顶部： 将表格的第一行作为标题行，可以为表格的每一列输入一个标题。
④ 两者： 用户能够在表格的左边和顶部同时输入行标题和列标题。
被设置为页眉的单元格中字体默认为黑体居中。
1) 实例演示
新建网页文件news_left.html，插入无边框表格： 列数和行数都为3的表格，宽度为640像素，边框粗细、单元格边距、单元格间距分别设为0，其余项不设置。插入的表格如图34所示。如果插入有边框表格： 将边框改为1，则插入的表格如图35所示。如果插入有边框有间距表格： 再将间距设为2，则插入的表格如图36所示。

图34无边框表格

图35有边框表格

图36有边框有间距表格

2) 图34表格HTML代码说明

表格有三个基本标签：