网页制作与网站建设技术大全

章节摘录

版权页：   插图：   其中，“常用”、“布局”、“表单”和“文本”4栏是在静态网页设计中比较常用的。 1.“常用”栏 在启动Dreamweaver后，将默认显示“常用”栏，如图4—7所示。在“常用”栏中，从上到下依次提供了超级链接、电子邮件链接、命名锚记、水平线、表格、插入Div标签、图像、媒体、构件、日期、服务器端包括、注释、文件头、脚本、模板和标签选择器16个工具。其功能分别介绍如下。 超级链接：在网页中插入超链接。 电子邮件链接：在网页中插入一个电子邮件链接。 命名锚记：在网页中插入一个命名锚记。 水平线：在网页中插入一条水平线。 表格：在网页中插入表格。 插入Div标签：在网页中插入一个Div标签。 图像：在网页中插入图片。 媒体：在网页中插入Flash、程序等媒体。 构件：在网页中插入构件。 日期：在网页中插入日期。 服务器端包括：在网页中包含一个文件，常用于动态网页。 注释：在网页中插入注释。 文件头：在网页中插入文件头标签。 脚本：在网页中插入一个脚本，用于实现一些页面交互功能。 模板：在网页中插入模板。标签选择器：打开标签选择器。当某些不常用的脚本或标签无法书写时，可以在标签选择器中查找和插入这些标签。 2.“布局”栏 “布局”栏如图4—8所示，主要用于表格或段落的排版。其各工具功能分别介绍如下。 插入Div标签：在网页中插入Div标签。 绘制AP Div：用于绘制AP Div。 Spry菜单栏：在网页中插入Spry菜单栏。 Spry选项卡式面板：在网页中插入Spry选项卡式面板。 Spry折叠式：在网页中插入Spry折叠式层。 Spry可折叠面板：在网页中插入Spry可折叠面板。 表格：在网页中插入表格。 IFRAME：在网页中插入浮动框架，即插入包含网页。 框架：在网页中插入框架网页。 3.“表单”栏 “表单”栏如图4—9所示，主要用于添加表单和在表单中添加表单元素。 “表单”栏中的常用工具功能分别介绍如下。 表单：在网页中插入一个表单。 文本字段：在网页中插入一个文本框，用于供用户填写数据。 隐藏域：在网页中插入一个隐藏文本区域，用于网页间数据的传递。 文本区域：插入一个多行文本框。 复选框：用于判断是或不是。复选框可以被组合在一起（但不互斥），共用一个名称，也可以共用一个Name属性值，以实现多项选择的功能。

书籍目录

目    录

第1篇  网站开发入门

第1章  网站开发基础
2

1.1  网站开发概述
3

1.1.1  什么是网站
3

1.1.2  网站设计的目的
3

1.1.3  网站设计的学习内容
4

1.2  网站建设的一般流程
4

1.2.1  网站的定位
4

1.2.2  申请网站域名
8

1.2.3  申请服务器空间
13

1.2.4  确定网站主题
15

1.2.5  网站整体规划
16

1.2.6  收集资料与素材
16

1.2.7  设计网页效果图
16

1.2.8  切图并制作成页面
17

1.2.9  开发动态网站模块
17

1.2.10  发布与上传
18

1.2.11  后期更新与维护
19

1.2.12  网站的推广
19

1.3  常用的网页设计软件
20

1.3.1  网页设计软件Dreamweaver
20

1.3.2  平面设计软件Photoshop
20

1.3.3  网页图片设计和切图软件Fireworks
21

1.3.4  动画设计软件Flash
21

1.4  Web 2.0网站概述
22

1.5  相关问题
23

1.5.1  域名的重要性与法律保护问题
23

1.5.2  网站的空间服务质量与服务商
23

1.5.3  网站的媒体性质与法律道德规范问题
23

1.5.4  与网站内容版权相关的问题
24

1.6  小结
25

第2章  HTML入门
26

2.1  HTML的基本语法
27

2.1.1  网页结构
27

2.1.2  创建HTML文件
28

2.2  常见的HTML标签
29

2.2.1  文本类标记：标签
29

2.2.2  文本类标记：文本加粗、斜体与

下划线
30

2.2.3  表格标记
31

2.2.4  超链接标记
32

2.2.5  段落标记
33

2.2.6  框架标记
35

2.2.7  表单与按钮标记
36

2.2.8  图片标记
40

2.2.9  换行标记
41

2.2.10  水平线标记
42

2.2.11  特殊标签
43

2.3  实例：制作一个注册页面
43

2.4  表格使用技巧
49

2.4.1  表格边框使用技巧：表格边框的

设置
49

2.4.2  表格边框使用技巧：单元格边框

间距的设置
50

2.4.3  表格边框使用技巧：单元格实线

边框的设置
50

2.4.4  使用样式表设置文本边框：文本

各方向相同的边框
51

2.4.5  使用样式表设置文本边框：使用

表格样式设置边框
52

2.4.6  使用样式表设置文本边框：通过

样式表控制不同方向的边框
52

2.5  HTML网页中的META属性
54

2.5.1  name属性
54

2.5.2  http-equiv属性
54

2.6  常见问题
56

2.6.1  网页中代码大小写问题和引号问题
56

2.6.2  HTML与浏览器的不同版本
57

2.6.3  HTML与XML
59

2.7  小结
61

第3章  网站及页面的色彩搭配
62

3.1  色彩基础知识
63

3.1.1  色彩的基本概念
63

3.1.2  网页色彩的冷暖视觉
64

3.1.3  网页安全色
65

3.2  常见网页色彩搭配分析
65

3.2.1  科技与时尚
66

3.2.2  文化与艺术
66

3.2.3  神秘与优雅
67

3.2.4  激情与梦幻
67

3.2.5  简约与高贵
68

3.3  网站总体色彩规划
68

3.3.1  定义网站的色彩基调
69

3.3.2  站点内各栏目色彩搭配原则
69

3.4  页面色彩搭配
70

3.4.1  网页色彩搭配原理
70

3.4.2  网页设计中色彩搭配的技巧
71

3.4.3  常见的几种网页配色方法
71

3.5  Web 2.0用色模式及网页色彩趋势
73

3.6  经典网页设计色彩搭配实例欣赏
74

3.7  小结
74



第2篇  网页设计与制作

第4章  熟悉Dreamweaver CS5的工作环境
76

4.1  安装Dreamweaver CS5
77

4.2  认识Dreamweaver CS5界面
77

4.2.1  常用工具栏
77

4.2.2  常用菜单命令
78

4.2.3  “插入”面板
79

4.2.4  “属性”面板
82

4.2.5  “CSS样式”面板
83

4.2.6  工具使用示例：插入下拉菜单
83

4.2.7  工具使用示例：插入选项卡式面板
85

4.2.8  工具使用示例：插入可折叠面板
87

4.3  使用Dreamweaver CS5制作一个页面
89

4.4  Dreamweaver CS5的使用技巧
93

4.4.1  Dreamweaver中常用的快捷方式
93

4.4.2  Dreamweaver的首选参数
95

4.5  相关问题
95

4.5.1  Dreamweaver CS5的新功能
95

4.5.2  什么是“网页三剑客”
96

4.6  小结
96

第5章  创建与管理站点
97

5.1  创建本地站点
98

5.1.1  使用站点向导创建本地站点
98

5.1.2  选择和更改本地工作站点
101

5.1.3  本地站点和远程服务器同步
101

5.2  管理站点文件
102

5.2.1  创建文件夹和文件
102

5.2.2  移动和复制文件
102

5.3  站点测试
103

5.3.1  检查浏览器的兼容性
103

5.3.2  检测链接
104

5.3.3  站点报告
104

5.4  创建第一个网站并测试
106

5.5  常见问题
107

5.5.1  FTP不能上传和下载的问题
107

5.5.2  FTP远程文件夹设置的问题
108

5.5.3  其他的网站开发工具是否

支持Dreamweaver中的站点
108

5.5.4  复制Dreamweaver中的站点
108

5.6  小结
108

第6章  制作页面内容和多媒体元素
109

6.1  文本的输入和编辑
110

6.1.1  输入文本
110

6.1.2  设置文本属性
111

6.1.3  使用
标签进行排版
112

6.1.4  输入特殊字符
113

6.2  在网页中插入图像
115

6.2.1  插入图像
115

6.2.2  设置图像属性
115

6.2.3  设置图像超链接
117

6.2.4  图像的边距设置
118

6.2.5  插入鼠标经过图像
119

6.3  创建网页超链接
121

6.3.1  创建文字超链接
121

6.3.2  创建锚记超链接
122

6.3.3  创建电子邮件超链接
124

6.3.4  创建图像热点超链接
125

6.4  利用CSS美化网页
126

6.4.1  CSS的基本语法
127

6.4.2  在Dreamweaver CS5中自动生成

CSS样式标记
127

6.4.3  根据Dreamweaver CS5提供的样式

模板设计网页样式
129

6.4.4  在Dreamweaver CS5中利用“CSS

样式”面板链接和编辑样式
130

6.4.5  应用CSS设置文本格式
132

6.4.6  实例：CSS样式表的使用
133

6.5  插入多媒体
136

6.5.1  插入Flash动画
136

6.5.2  插入Java Applet
137

6.5.3  插入ActiveX控件
139

6.5.4  插入Shockwave动画
139

6.5.5  插入视频
140

6.5.6  插入背景音乐
141

6.6  实例：制作图文混排的多媒体页面
141

6.7  常见问题
145

6.7.1  网页中Flash动画大小的问题
145

6.7.2  网页中音乐或视频文件不能

播放的问题
145

6.7.3  网页中音乐或视频文件大小的问题
145

6.7.4  网页中对象不同属性的优先级问题
146

6.7.5  网页粘贴文本时的格式问题
146

6.8  小结
147

第7章  网页的排版与布局
148

7.1  网页的基本构成
149

7.2  网页排版方法
150

7.2.1  使用表格布局页面
150

7.2.2  使用层结构布局
150

7.3  常见的网页结构类型
150

7.3.1  “国”字型布局
150

7.3.2  “厂”字型布局
150

7.3.3  框架型布局
151

7.3.4  封面型布局
152

7.3.5  Flash型布局
152

7.3.6  页面排版布局趋势（Web 2.0）
153

7.4  常见问题
154

7.4.1  处理好布局的丰富与简约的关系
154

7.4.2  在布局中需要考虑到的其他问题
154

7.5  小结
155

第8章  使用Photoshop进行页面设计
156

8.1  Photoshop CS5简介
157

8.2  使用Photoshop CS5设计页面
158

8.2.1  常见页面大小
158

8.2.2  确定网页的主题色
159

8.2.3  设计网页的功能结构
160

8.3  网页中的设计元素
161

8.3.1  导航区
161

8.3.2  页面布局区
163

8.3.3  版权区
163

8.3.4  使用辅助线对网页效果图进行

基本分区
164

8.4  网页内容的设计实例
164

8.4.1  网页中按钮的设计
165

8.4.2  网页中艺术字的设计
167

8.5  输出准备
168

8.5.1  Photoshop常用的图像格式
169

8.5.2  将图片保存为PSD格式
169

8.5.3  将图像导出为JPG格式
170

8.5.4  将图像导出为GIF格式
170

8.6  实例：用Photoshop CS5设计一个

网页效果图
171

8.6.1  新建一幅网页效果图
171

8.6.2  使用辅助线划分网页区域
172

8.6.3  添加网站的Logo
173

8.6.4  添加网站的Banner
173

8.6.5  设计网页的导航条
175

8.6.6  设计网页的内容布局
175

8.6.7  设计网页的版权栏
176

8.7  常见问题
177

8.7.1  在网页中体现出“眼球经济”
177

8.7.2  在Photoshop中使用图层样式
178

8.7.3  在网页的版权区中插入网站

备案信息
179

8.8  小结
179

第9章  使用Fireworks切图输出
180

9.1  Fireworks CS5的介绍
181

9.2  使用Fireworks切图
181

9.2.1  页面切图
181

9.2.2  切片属性的设置与超链接
183

9.2.3  热点超链接设置
184

9.2.4  优化和导出图像
185

9.3  使用Dreamweaver进行页面制作
186

9.3.1  设置Fireworks CS5导出网页的

属性
186

9.3.2  设置Fireworks CS5导出网页的

对齐方式
188

9.3.3  添加页面元素
189

9.4  常见问题
190

9.4.1  在网页中如何使用PNG格式的图像
190

9.4.2  Fireworks切割图像的规则
191

9.5  小结
191

第10章  制作网站的Logo和Banner
192

10.1  什么是网站Logo
193

10.1.1  网站Logo的重要性
193

10.1.2  网站标识的可识别性
193

10.2  什么是Banner
194

10.3  如何设计制作
194

10.3.1  网站Logo设计标准
194

10.3.2  网站Logo设计软件与制作
195

10.3.3  Banner的制作标准
195

10.4  精美Logo和Banner赏析
196

10.4.1  著名网站Logo分析
196

10.4.2  Banner欣赏
197

10.5  实例：制作网站Logo
197

10.6  实例：制作有动画效果的Banner
201

10.7  小结
203

第11章  页面中图像的优化处理
204

11.1  优化页面中的图像
205

11.2  Fireworks与Dreamweaver的关联

操作
205

11.3  优化页面图像
205

11.3.1  关联至图像设计软件
205

11.3.2  图像的优化处理
206

11.3.3  图像大小的调整
208

11.3.4  图像亮度与对比度的设置
210

11.3.5  图像的锐化设置
211

11.3.6  图像的裁剪
212

11.4  实例：在Dreamweaver中优化

页面
213

11.5  常见问题
215

11.5.1  网页中的图像失真问题
216

11.5.2  网页中显示的图像大小与实际

图像大小的问题
216

11.6  小结
217

第12章  布局实现
218

12.1  基本的表格布局方法
219

12.1.1  插入表格
219

12.1.2  设置表格属性
219

12.1.3  合并/拆分单元格
220

12.1.4  选取表格对象
221

12.1.5  通过表格的复杂嵌套实现网页的

排版
222

12.2  使用层布局页面
223

12.2.1  创建层
223

12.2.2  设置层的属性
224

12.2.3  设置层的Z轴
224

12.2.4  层的样式
225

12.2.5  利用层实现网页的布局
225

12.2.6  层中的样式代码
225

12.2.7  使用层制作下拉菜单
227

12.3  实例：通过表格与层布局页面
229

12.3.1  “厂”字型布局
229

12.3.2  DIV+层布局（Web 2.0）
232

12.4  常见问题
235

12.4.1  网页的基本布局风格问题
235

12.4.2  在表格布局时表格边框颜色、

背景颜色的搭配问题
236

12.4.3  在标签式布局中对单元格背景

样式的控制
237

12.5  小结
238

第13章  网页模板与框架
239

13.1  创建模板网页
240

13.1.1  库项目
240

13.1.2  创建模板
242

13.1.3  创建可编辑区域
243

13.1.4  创建其他模板区域
244

13.1.5  实例：创建一个网页模板
244

13.1.6  利用模板创建网页
246

13.2  框架网页
247

13.2.1  创建框架网页
247

13.2.2  保存框架
248

13.2.3  框架结构页面的编辑
248

13.3  实例：制作一个框架结构网页
249

13.4  常见问题
250

13.4.1  网页模板与库项目的实质
250

13.4.2  在网页中使用