中文版Dreamweaver+Flash+Photoshop CC网页设计与制作从入门到精通-edited

7

7.2.2  PhoneGap Build

PhoneGap

PhoneGap Build

PhoneGap Build Dreamweaver

https://build.phonegap.com

free

7-17 图7-18 PhoneGap Build设置

PhoneGap Build
Android SDK

AndroidAndroid
Android SDK
webOS SDK

webOSwebOS
webOS SDK

2. PhoneGap Build

图7-17 注册PhoneGap Build账号 PhoneGap Build
/ PhoneGap Build/
PhoneGap Build

7.2.3 

Dreamweaver PhoneGap Build

Web PhoneGap 7-19

BuildPhoneGap Build

App Store Android

MarketWebOSSymbianBlackberry

1.

PhoneGap Build

/ PhoneGap

Build/ PhoneGap Build

PhoneGap Build7-18

SDK 图7-19 登录和下载应用程序

136

知识大爆炸
——jQuery Mobile的主题应用

jQuery MobileCSS a bcde
jQuery Mobile
7-1
CSS3
默认值，黑色背景白色文本
headbodybutlon 蓝色背景白色文本或灰色背景黑色文本
6 亮灰色背景黑色文本
白色背景黑色文本
jQuery Mobile 橙色背景黑色文本

jQuery Mobile5 jQuery MobilejQuery Mobile
7-1

a
b
c
d
e

Dreamweaver CC/

读书笔记

137

入门篇/Introductory

Chapter

0801 02 03 04 05 06 07 09 10 11 12

动态网站及站点维护

138

8.1

8.1.1  1. Access
Access Office
ASP
ASP.NET PHP JSP ColdFusion

ASP ASP Active Server PagesMicrosoft SQL
ASP+Access
WebWindows Access
Linux
Access
ASPWeb
ASP.NET ASP.NET DCOM
NGWS runtimeASP
VBScript JavaScript .mdb
Visual Basic C#
Access

Access

PHP PHP
PHP

JSP JSP Java Server Pages Sun AccessWindows

JSPWeb ODBC ODBC Open Data Base Connectivity
Apache
WebServerIIS AccessDDE

8.1.2  OLE

Excel

Word

139

Guest guest_mss
8-3
\\8\Database\Guest.mdb
\\8\Guest guest_

Access 2013Guest.
mdb
mss

Step 1 Access 2013

Guest.mdb 图8-3 设置表名
num
8-1
name_1Enter
Step 4 1
Enter
2

8-4

图8-1 设置数据库名称

Step 2

Microsoft Access 2000
8-2

图8-4 输入字段及数据类型

Step 5 3 45
id password email

8-5

Step 3 图8-2 设置数据库的保存类型
1

图8-5 输入字段、数据类型并设置其属性值

140

Step 6 / / MySQLInternet

8-6 MySQL C++
Access 2013 C

AIX FreeBSD HP-UX Linux
Mac OS Novell Netware Windows

APIC C++ Java
PerlPHP
图8-6 查看表格字段并关闭Access CPU
SQL
2. SQL Server
SQL Server GB2312 BIG5
Microsoft ODBC
SQL Server TCP/IP
JDBC
/

SQL Server Windows NT 4. Oracle
NT Oracle
SQL Server SQL
Microsoft Office 2GB

Web 8.1.3 
Web
SQL Server ASP
Oracle
Dreamweaver CC
3. MySQL 管

MySQLSQL

141

1. Windows Step 3 http://localhostEnter
ASP http://127.0.0.1
IIS8-9

IIS

Windows 7 图8-9 IIS页面

\\8\Windows 7 ?

Windows 7
IIS

Step 1 /

8-7

IIS Internet Information Server
M i c r o s o f t We b
Windows NTASP

Windows IIS

图8-7 单击“程序和功能”超链接 IISFTP
HTTP WebSMTP
Step 2 IIS Internet
WindowsWindows Windows
Internet XPIIS

IIS8-8 Windows 7IIS 7

IIS

2. IIS
ASP

图8-8 安装IIS \\8\
142

IISlogin
H:\login

Step 1

Internet
(IIS)8-10

图8-12 添加网站

Step 4
8-13

图8-10 双击“Internet信息服务(IIS)管理器”选项
Step 2 Internet(IIS)

8-11

图8-13 查看添加的虚拟站点

图8-11 添加网站 3.

Step 3
login
H:\login8-12

143

\\8\ 8-16

D:\login\ 图8-16 查看添加的虚拟网站
HTML
Step 1 Dreamweaver CC/ Step 4
loginD:\login\ 8-17

8-14

图8-14 设置网站并添加服务器

Step 2

login http://127.0.0.1/8-15
/Web URL

H:\login

图8-17 查看添加的网站服务器

图8-15 服务器的基本设置 在“站点设置对象”对话框中，除了可添加服
务器，还可通过“删除服务器”按钮 、“编辑
在Web URL文本框中输入http://127.0.0.1/表示在本 现有服务器”按钮 和“复制现有服务器”按
地服务器进行测试。 钮 对已经存在的服务器进行删除、编辑和复制
操作。
Step 3
ASP VBScript 4.
144

Access Step 2 A d o b e
ODBC Extension Manager CC
8.1.21 8-19

5. Dreamweaver CC

Dreamweaver CC

1 图8-19 安装扩展插件
Dreamweaver CC Step 3 Adobe Extension Manager CC
8-20
\\8\
图8-20 安装扩展
Dreamweaver CC Step 4 Deprecated_ServerBehaviors
Panel_SupportAdobe Extension
Step 1 Dreamweaver CC Manager CCDreamweaver CC
8-21
configuration\DisabledFeatures

Deprecated_ServerBehaviorsPanel_Support.zxp

8-18

图8-18 选择Dreamweaver CC动态扩展文件 图8-21 完成动态扩展安装

在安装动态扩展时，一定要先在计算机上安装
Adobe Extension Manager CC扩展管理器软件，
否则是不能在Dreamweaver CC中安装任何扩展插
件的。

145

2Dreamweaver CC Step 3 Guest.
Dreamweaver CCDSN DWCC
Web
mdb8-24
ODBC

ODBC

\\8\ODBC

ODBC
Dreamweaver CC DSN

Step 1

ODBC8-22

图8-24 设置数据源名称并选择数据库
Step 4 Dreamweaver CC
/

ASP VBScript
8-25

图8-22 打开“数据源工具”窗口
ODBC
Step 2
DSN

图8-25 将静态网页转换为动态网页

Microsoft Access Driver *.mdb *.accdb Step 5
8-23 DSN
8-26

图8-23 选择驱动程序 图8-26 选择“数据源名称（DSN）”选项
146

Step 6 DSN
guest
DSNDWCC

8-27

图8-28 测试连接 图8-29 查看连接的数据库

图8-27 添加数据源名称 除了使用数据源名称（DSN）连接到数据，还
可通过字符串进行连接，只需在“数据库”浮
Step 7
动面板中单击“加号”按钮 ，在弹出的下拉列
8-28
表中选择“自定义连接字符串”选项，在打开
8-29
的对话框中设置连接名称和连接字符串，并选

中 单选按钮即可。需注意的

是，连接字符串的格式为："Driver={Microsoft
Access Driver (*.mdb)};UID=用户名；PWD＝用
户密码;DBQ="& server.mappath("数据库路径")。

8.2

Web

8.2.1  8-30

Dreamweaver CC

\\8\ 图8-30 打开“绑定”浮动面板
Step 2
Dreamweaver CC Rs_guest
Dreamweaver CC
guestguest_
Step 1 Dreamweaver CC/ mss

8-31

147

图8-31 设置记录集 Ctrl

Step 3 8.2.2 

id \\8\asp\
2014080001 \\8\asp\login.asp
SQL \\8\
8-32
HTML
Step 4 图8-32 测试绑定记录集是否成功 asp
SQL Step 1 login.htmllogin.asp
zhuche.asp
8-33 /8-34

图8-33 绑定记录集 图8-34 选择“登录用户”选项
3
148

Step 2

zc_conn zhuce name_1 URL
password lg_fail.asp
8-35 lg_success.asp

图8-35 设置“登录用户”项 8.2.3 

Step 3 Dreamweaver CC
Ctrl+S /
IE 8-37
8-36
图8-37 “注销用户”对话框

图8-36 “登录用户”对话框

8.2.4 

Dreamweaver CC

HTML

149

\\8\asp\ Step 3 zhuce.asp
\\8\zhuce.asp
\\8\ /
8-40
Dreamweaver CC
Dreamweaver CC 图8-40 选择“检查新用户名”选项
zhuce.html
zhuce.asp
Step 1 zhuce.htmlzhuce.asp

8-38

Step 4
id
zhuce.asp

8-41

图8-38 选择“插入记录”选项 图8-41 设置检查新用户名项

Step 2 Step 5

zc_conn zhuce zhuce_success.asp Ctrl+S8-42
name_1 8-39

图8-42 在Dreamweaver CC中查看效果

图8-39 设置插入记录项
150

HTML Step 2 图8-43 设置插入记录
IE Ctrl+S
8.2.5 

Dreamweaver CC

liuyan_data.aspguest liuyan
8-44

\\8\asp\ liuyan_data.asp
\\8\liuyan.asp
\\8\

Dreamweaver CC liuyan.asp liuyan_ 图8-44 在数据库中查看数据
Dreamweaver CC
liuyan.html Step 3 liuyan_data.html
liuyan_data.html liuyan_data.asp
data.asp
liuyan_data.asp

8-45

Step 1 liuyan.htmlliuyan.asp

zc_conn liuyan liuyan_data.asp name_a 图8-45 转换网页并选择“记录集（查询）”选项
8-43

151

Step 4 zc_conn
liuyan
8-46

图8-46 设置记录集并查看数据记录 图8-48 添加重复区域 ]

Step 5 Step 7
[]

[
][
8-49

num

8-47

图8-49 统计记录数

图8-47 插入数据项 Step 8
8-50
Step 6
图8-50 输入文本
5
8-48

152

Step 9
/
8-51

图8-53 选择选项 图8-54 设置显示区域
Step 12

8-55

图8-51 设置分页操作 图8-55 设置显示区域

在插入分页链接时，所打开的“移至第一条记
录”对话框中的“链接”和“记录集”项分别表
示的是：创建要移到记录的链接文本和选择要显
示的记录集名称。如果在网页中没有创建多余的
记录集，则保持默认即可。

Step 10
8-52

图8-52 添加分页服务器行为 Step 13 Ctrl+SIE
8-56

Step 11

/
8-53

8-54

图8-56 查看记录效果

153

8.2.6  8-58

Dreamweaver CC

8-57 图8-58 更新记录
HTML
图8-57 转到详细页面 ID
URL
读书笔记
URL

8.2.7 

Dreamweaver CC

154

8.3 Step 2 /
8-61
Dreamweaver CCDreamweaver CC
FTPDreamweaver CC

8.3.1 

1.

Dreamweaver CC 图8-61 检查断裂链接

\\8\ 其实在“链接检查器”选项卡的“显示”下拉列
表框下还包括另外两个选项，外部链接和孤立的
Dreamweaver CC 文件选项，下面将分别介绍这两个选项的含义。

Step 1 Dreamweaver CC 2.
aa Dreamweaver CC
8-59
index.html 8-60 HTML

图8-59 设置当前站点 图8-60 打开网页 /
8-62

155

图8-62 “报告”对话框 Flash

\\8\Java_img\img.html
\\8\Java_img\img.html
\\8\

Step 1 Dreamweaver CCJava_img
img.html
8-63

<img> 图8-63 选择“设计备注”命令

HTML Step 2
3.
8-64
Dreamweaver CC
HTML 图8-64 设置备注信息
156

在“设计备注”对话框的“基本信息”选项卡中
设置的所有信息，都会在“所有信息”选项卡中
显示，如图8-65所示。

8.3.2 

图8-65 “所有信息”选项卡 1.
Step 3 img.html Internet
8-66
偱

national top-level domainnames
nTLDsinternational top-

level domain namesiTDs

图8-66 查看备注信息 baidu yahoo gov net
1 com A~Z a~z

0~9-
.
20

.cn .de .uk .jpt
ccTLDs

157

\\8\

Step 1
http://www.sudu.cn/Enter8-67

图8-67 打开域名注册网站 图8-69 选择域名

Step 2 在该网站进行域名注册时，需要先登录，否则在
lxldj 添加到购物车时，也会提醒用户先登录。因此，
8-68 最好先登录再注册，否则在提示登录时，需要重
新输入要注册的域名。

Step 4
8-70

8-71

图8-70 单击“立即支付”超链接

图8-68 输入要注册的域名

Step 3

8-69 图8-71 单击“配置”超链接
158

Step 5 2.
8-72
IPInternet
1

ISP IP
IP
Internet IP
Internet

Step 6 图8-72 输入配置信息 Internet
8-73 IP

2

图8-73 选择支付方式 虚拟主机的性能会受服务器的配置、操作系统、
软件本身以及外界环境影响，如机房的温度、湿
度及人为管控等。

159

?

如果用户要购买虚拟主机，建议在万网或西部数
码网站购买，因为这两个网站是知名的虚拟主机
网站。

3.
Colocation

ISPISP

IP 8.3.3 

ICP Dreamweaver CC
Web Dreamweaver CC
IDC
GB Shift+Ctrl+U8-74
读书笔记 Email

160 图8-74 连接并上传文件
一般情况下，第一次上传都需要上传整个站点，
然后在更新站点时，只需要上传被更新的文件
即可。

8.3.4 

8-75ICP

读书笔记

知识大爆炸 图8-75 ICP备案流程图
——域名解析 161

IPIP

IP

IP DNS

ACNAMEMX

AA IPMXTTL

3600

CNAME CNAMEA

CNAME

MX MXMX

3IP

TTL 3600MX10

MX

入门篇/Introductory

Chapter

0901 02 03 04 05 06 07 08 10 11 12

Flash

162

9.1 Flash Flash
MTV
FlashFlashFlash 9-2
FlashFlashFlash Flash

9.1.1  Flash 图9-2 Flash片头广告

1/16~1/12 9.1.2  Flash

Flash Flash
Flash
9-1
1.
图9-1 动画 Flash
9-3
Flash
Flash 如果使用的矢量图形越多，Flash动画就越小；而
如果位图图像、声音或视频等内容过多，则会影
响动画的下载速度，增加用户的等待时间。

163

图9-3 网站形象展示页 图9-5 Flash导航菜单

2. Flash Banner 4. Flash
Banner Flash

FlashBanner 9-6
9-4
Flash Banner

图9-4 Flash Banner广告 图9-6 Flash展示动画

3. Flash
Flash

9-5Flash
164

5. Flash FlashActionScriptFlash

9-7 Flash
Flash 9-9Flash

图9-9 Flash网站

图9-7 Flash片头

6. Flash Flash 在完整的Flash网站中，不管是开场动画、导航
条、图片或按钮等内容，都是通过Flash软件进行
Flash 编辑的。
9-8Flash

9.1.3  Flash

Flash

Flash

图9-8 Flash广告 1. Flash
FlashFlash.fla
7. Flash Flash

Flash Flash
Flash
FlashFlash Flash CC
Flash FlashActionScript 3.09-10

.fla

165

图9-11 Flash影片

图9-10 Flash文档 3. Flash Flash
Flash Player 9
? FlashActionScript 2.0
ActionScript 3.0
Flash CC
Flash Player 9
ActionScript 2.0Flash Flash
/ .swd
Player 8 trace()
Flash.swf
ActionScript 2.0 Flash

Flash Player 9

ActionScript 3.0

ActionScript 3.0 Flash

2. Flash Flash 4. Flash

FlashFlash FlashFlash Flash
.swf .swc Flash CC
Flash CC

\Documents and Settings\\
Local settings\Application Data\Adobe\Flash 8\en\
Configuration\Components

Flash 5. Flash
Flash Flash.flpXML
9-11
Flash

用户可以通过浏览器、Flash软件或播放器软件直 Flash CC
接查看Flash影片的效果。

166

9.1.4  Flash 2. GIF

Flash JPG
1. PNG BMP
9-13300
9-12300
图9-13 位图
图9-12 矢量图
除了直接在Flash中使用矢量绘图工具绘制矢量图
9.2 Flash 外，还可在一些专业的矢量图制作软件中进行绘
制，如Illustrator和CorelDRAW等。
Flash
Flash 9.2.2 

9.2.1  Flash

FlashFlash

167

9.2.3  9.2.5 

Flash Flash
Flash
9.2.6 
9.2.4 
Flash
Flash
Flash CCFlash
9.3 Flash CC Flash CC
Flash CC9-14
Flash
图9-14 Flash CC欢迎界面
CC

9.3.1  Flash CC

Flash CC
Flash CC
Flash CC

/Adobe Flash Professional CC
Flash CC

Flash CC Flash
Flash
.fla

168

FlashFlash CC 9-16
Flash
图9-16 “从模板新建”对话框
Flash CC Flash
ActionScript 3.0 Flash
4 CC
Flash CC /
9-17
Flash CCFlash CreateJS
ActionScript
4 Adobe Exchange
Adobe
9-15

图9-15 Adobe Exchange页面 图9-17 “首选参数”对话框
3
读书笔记

169

9.3.2  Flash CC 用户也可在Flash CC的工作界面左上角单击 按
钮，在弹出的下拉列表中选择“关闭”选项也可
Flash CC 以关闭Flash CC，如图9-18所示。

Flash CC 图9-18 “关闭”选项
Flash CC/
-1 Flash
Flash CCCtrl+Q
Flash CC 窗口控制按钮
工作区切换器
9.4 Flash CC

Flash CC ActionScript 3.0
9-19

快速启动按钮

菜单栏

绘图工作区

工具箱

面板

图9-19 Flash CC的工作界面

9-19Flash CC
170

9.4.1 

Flash CC

11
9-20

图9-22 动画模式
Flash
Flash CS39-23

图9-20 “视图”和“控制”菜单 图9-23 传统模式

9.4.2  9-24

Flash CC

9-21

图9-21 工作区模式 图9-24 调试模式
9-22
9-25

171

9-28

图9-25 设计人员模式 选择工具 部分选取工具
Flash 3D旋转工具
9-26 任意变形工具
套索工具 文本工具
矩形工具
钢笔工具 多角星形工具
线条工具 刷子工具
椭圆工具 墨水瓶工具
铅笔工具 橡皮擦工具
颜料桶工具 缩放工具
滴管工具

手形工具

笔触颜色

紧贴至对象 平滑
伸直

图9-28 工具箱

图9-26 开发人员模式 9-29 图9-29 任意变形工具组
Flash CC 3D 3D
3D
9-27 9-30 9-31

图9-30 3D旋转工具组 图9-31 套索工具组

9-32
9-33
9-34

图9-27 小屏幕模式

9.4.3 

图9-32 钢笔工具组 图9-33 矩形工具组 图9-34 椭圆工具组

172

9.4.4  9-36

Flash CC 图层列表区 时间轴编辑区

Flash 图9-36 “时间轴”面板
1.
Flash

9-35

图9-35 场景 Flash

2. ?

9-35 Flash
Flash 2.

9.4.5  9-37

Flash CC 读书笔记

1.
Flash CC
Flash

173

图9-37 “属性”面板 4.

3. RGB
Dreamweaver 9-39

9-38 图9-39 “颜色”和“样本”面板
根据需要，用户还可以对Flash CC的工作界面进
图9-38 “库”面板 行自定义设置，如设置界面的颜色或加亮颜色
等。其方法是：选择“编辑”/“首选参数”命
? 令，打开“首选参数”对话框，在其中选择“常
规”选项卡，在右侧窗格中的“用户界面”下拉
Flash CC 列表框中选择“浅”选项可使工作界面的颜色变
Flash CC 亮（“深”选项为默认选项，此时工作界面以黑
Flash CC 色显示），也可在“加亮颜色”栏中设置图层颜
色或自定义颜色，如图9-40所示。
174
图9-40 “首选参数”对话框

9.5 Flash AIR for Desktop AIR

Flash CC AIR
FlashFlashFlashFlash
AIR for Android Android
9.5.1  Flash
AIR for Android
FlashFlash
Flash AIR for iOS Apple iOS

1. Flash AIR for iOS
Flash
Flash CC ActionScript 3.0 .as
Flash
Flash CC/ ActionScript 3.0
Ctrl+N
ActionScript 3.0 .as
9-41
ActionScript 3.0

ActionScript .as

FlashJavaScript
.jsflJavaScript

图9-41 “常规”选项卡 24.00fps24

ActionScript 3.0 2. Flash
.fla Flash Flash CCFlash

ActionScript 3.0

175

\\9\

Step 1 / /Adobe Flash
Professional CCFlash CC
图9-44 查看新建的模板文件
9-42 FlashCtrl+Enter

Step 4

9-45

图9-42 选择“更多”选项 图9-45 预览动画效果
AIRAlpha9-46
Step 2
9-43

图9-43 选择需要的模板 图9-46 范例文件

Step 3 MovieClip
9-44 160

×600

176

AS3 160×600 9.5.2 

468×60729 ×90

9-47729 ×90 Flash

图9-47 水平横幅 1.
Flash
AIR for Android Android
800 ×480 /
5 9-50
AIR for iOS AIR for iOS
480 ×320 960×640 1024×768 1136× 6
6402048 ×15365

9-51
9-48

图9-50 “文档设置”对话框 图9-51 单位

图9-48 广告模板类别 1 ×1
9-49 8192
×8192

图9-49 媒体播放类别

177

9.5.3  Flash

Flash

Flash

在舞台中右击，在弹出的快捷菜单中选择“文 1. Flash
Flash CCFlash
档”命令，或直接按Ctrl+J快捷键，也可打开
“文档设置”对话框。

2. / Ctrl+S
9-53
Flash CC /
/ Shift+Ctrl+S
Ctrl+F3

SWF4 图9-52 “属性”面板
9-52

Flash 图9-53 “另存为”对话框

Flash 当首次对未保存过的Flash文档进行保存操作时，
Flash 也会打开“另存为”对话框，对文件进行保存操
Flash CCActionScript 3.0 作，以后再执行保存操作则不再打开该对话框。
.as
/
FPS Flash 9-54

SWF SWF 9-55

178

/
Flash

9-56

图9-54 “另存为模板警告”对话框

图9-55 “另存为模板”对话框 图9-56 “打开”对话框
Flash CC Flash CC

/ Flash CC/

2. Flash 9-57
Flash CCFlash
Flash CC

/ 图9-57 打开最近的文件
Flash CC Flash
/
Flash CC Flash CC

9.5.4  Flash Flash

FlashFlash CC

Flash CC 在Flash CC中选择“文件”/“在Bridge中浏览”
命令，将打开Documents窗口，在窗口中双击要
打开的文档即可进行打开操作。

Flash CC

9.6

Flash

179

9.6.1  Step 3 2
9-61
Flash
Enter9-62

\\9\.fla \\9\.fla
\\9\

.fla

图9-61 可编辑状态 图9-62 修改完成

Step 1 Flash CC /

Flash.fla
9-58

9-63

图9-63 删除场景

Step 2 图9-58 打开Flash文档 9.6.2 
/ Flash CC
Flash

9-59Flash CC
2

9-60

9-64

图9-64 在绘图工作区中切换

图9-59 添加场景 图9-60 查看添加的场景
180

9.6.3  Flash CC 9-66

Flash CC 图9-66 缩放工具
1. 9-67

Flash CC

9-65

图9-65 以不同比例显示场景

图9-67 放大某一部分

181

2. 图9-69 标尺

9-68 2.
Flash CC
图9-68 移动场景 9-70

9.6.4  图9-70 创建辅助线

Flash CC /
1. /
/ 9-71
9-69
/ 图9-71 “辅助线”对话框

读书笔记

182

3

选择“视图”/“辅助线”命令，在弹出的子菜单 / 图9-72 网格
中选择“锁定辅助线”命令可锁定辅助线；选择 9-73 /
“清除辅助线”命令可删除场景中的辅助线。

3.

// 图9-73 “网格”对话框
Ctrl+'9-72

读书笔记

知识大爆炸
—— Flash动画与传统动画的比较

Flash

Flash
Flash

Flash
Flash
Flash

183

入门篇/Introductory

Chapter

1001 02 03 04 05 06 07 08 09 11 12

184

10.1 选择“选择工具” 后，工具箱底部还有3个按
钮，其中“紧贴至对象”按钮 具有吸附功能，
Flash CC 能够自动搜索线条的端点和图形边框；“平衡”
按钮 用于使曲线趋于平滑；“伸直”按钮 用于
10.1.1  修饰曲线，使曲线趋于直线。

1. 10.1.2 

10-1 Flash
Shift
10-2 \\10\.fla
10-3 \\10\

Flash10-5
图10-1 选择一条 图10-2 选择多条 图10-3 选择所有线段

2.

Alt 图10-5 最终效果
10-4
Step 1 Flash CCActionScript
图10-4 复制线条 3.0 Flash
#
7C8B2F10-6

185