第2章网站开发工具

要想成为一名优秀的网页设计师需要具备哪些条件独特的设计风格、紧跟潮流的设计语言、娴熟的技术.
当然任何创作艺术设计创作都要靠一定的工具来实现,网页开发设计也不例外.

没有高效、创新的设计开发工具想在激烈的竞争中生存,并成为一名优秀的网页设计师是很难的.

好的设计开发工具就好比嘴巴,可以把心里想的表达出来告诉对方.
网页设计意图的准确表达就需要依赖优秀的设计开发工具.
2.
1DreamweaverCS3概述DreamweaverCS3是一款优秀的网站开发工具,是网页设计师在选择开发工具时一个不错的选择.

网页设计师使用DreamweaverCS3能更为高效地设计、开发和维护基于网站标准化的网站.
它集成了众多网站开发中所涉及到的最新技术,扩展了页面设计与制作、多媒体开发和动画设计这类丰富实用的功能.
在DreamweaverCS3这个新版本中,其极大程度上强化了对于动态网页技术的支持,使得网页设计师可以制作出更多眩目的互动页面特效.
并保留了一贯插件式的软件设计,使得网页设计师可以随意选择各类扩展性插件进行安装.
极具亲和力的操作界面,使得网页设计师可以根据自身需要,自定义各类浮动面板.
能够更为方便地使用软件本身的各种内置对象进行开发操作.

2.
2DreamweaverCS3的特点和新增功能DreamweaverCS3在实用功能上和操作流程上的都有了显著的改进.
修正了以往版本中软件本身设计上的一些缺漏,新增功能更是发挥了其高效开发的特点.
它允许网页设计师依据个人开发习惯,选择在设计环境或是编码环境下进行快速编辑.
下面就分别从实用功能、操作模式与最新技术这3个方面介绍DreamweaverCS3的一些特点和新增功能.
1.
增强CSS功能DreamweaverCS3提供一组预先设计的CSS布局模板.
使用这些模板,设计人员可以快速设计好页面并开始运行.
这些模板包括Web上的大多数站点设计的布局,而且每种布局都包含许多附加元素.
同时,DreamweaverCS3提供强大的CSS管理功能.
用户可以轻松地在文档之间、文档标题与外部表之间、外部CSS文件之间以及更多位置之间移动CSS规则.
此外,用户还可以将内联CSS转换为CSS规则.
为了设计人员使用,Adobe还提供AdobeCSSAdvisor网站.
通过这个网站,用户可以解决各种CSS的应用问题.
2.
更方便的浏览器兼容性检查在DreamweaverCS3中,浏览器兼容性检查功能可生成报告,指出各种浏览器中和CSS相关的兼容问题.
在代码视图中,这些问题以绿色下划线来标记,帮助用户确认问题代码的位置.
如果用户无法·12·解决问题,还可以在AdobeCSSAdvisor网站获取帮助.
3.
增加Ajax的Spry框架通过DreamweaverCS3,用户可以使用Ajax的Spry框架进行动态用户界面的可视化设计、开发和部署.
Spry与其它Ajax框架不同,它是一个面向Web设计人员的JavaScript库.
设计人员可以向用户提供更丰富体验的网页.
Spry框架包括Spry构件和Spry效果两部分.
Spry构件:它是预置的常用用户界面组件.
用户可以使用CSS自定义这些组件,然后将其添加到网页中.
在DreamweaverCS3,用户可以将多个Spry构件添加到自己的页面中.
在这些构件中,可以包括XML驱动的列表和表格、折叠构件、选项卡式界面和具有验证功能的表单元素.

Spry效果:它是一种提高网站外观吸引力的简洁方式.
这种效果可应用于HTML页面上的大部分元素.
用户可以通过添加Spry效果,对网页元素进行放大、收缩、渐隐和高亮显示.
4.
与其他工具的高度集成DreamweaverCS3实现和PhotoshopCS3、AdobeDeviceCentral和AdobeBridgeCS3高度集成.
Dreamweaver和PhotoshopCS3集成:设计人员可以在Photoshop中选择任一部分,直接将其粘贴到Dreamweaver页面中.
Dreamweaver会显示一个对话框,可在其中为图像指定优化选项.
如果需要编辑图像,只需双击图像,就可在Photoshop中打开原始的带图层PSD文件进行编辑.
Dreamweaver和AdobeDeviceCentral集成:使用AdobeDeviceCentral,用户可以快速访问每个设备的基本技术规范,帮助用户实现内容的移动.
Dreamweaver和AdobeBridgeCS3集成:通过AdobeBridge,用户可以能够集中访问项目文件、应用程序、设置以及XMP元数据标记和搜索功能.
2.
3DreamweaverCS3的安装、删除和启动若要安装DreamweaverCS3,具体的操作步骤如下.
(1)打开DreamweaverCS3安装文件后,程序会自动开始解压.
将所需要的文件提取出来,以供安装.
随后将出现安装欢迎对话框,如图2.
1所示.
(2)接受软件用户使用版权协议后,单击【下一步】按钮,可以对文件所使用默认编辑器进行分类指派.
也就是确认把Dreamweaver作为哪一部分特定类型文件的默认编辑器,如图2.
2所示.
图2.
.
1安装欢迎对话框图2.
.
2默认编辑器设置(3)连续几步操作后,Dreamweaver完成所有安装.
用户可以根据需要选中【显示自述文件】选第2章网站开发工具·13·项框,在安装完毕后来查看软件的说明文件.
也可以选中【启动MacromediaDreamweaverCS3】选项框,在退出安装向导后自动打开软件,如图2.
3所示.
(4)单击【完成】按钮,系统会自动运行DreamweaverCS3,弹出如图2.
4所示的启动画面.
根据用户系统实际情况,可能会出现要求重新启动计算机的相应提示.
图2.
.
3安装完成画面图2.
.
4启动画面(5)查看DreamweaverCS3的工作环境,它的操作界面由主菜单、状态栏、工作区和浮动面板组成,如图2.
5所示.
图2.
.
5工作环境删除DreamweaverCS3的方法与卸载别的应用程序一样,具体的操作步骤如下.
(1)在【控制面板】右侧列表框中选中【添加或删除程序】列表项,打开【添加或删除程序】窗口,如图2.
6所示.
·14·图2.
.
6【添加或删除程序】窗口(2)在【添加或删除程序】窗口右侧的【当前安装的程序】列表框中,选中【MacromediaDreamweaverCS3】列表项.
单击【删除】按钮,会出现确认删除的对话框,如图2.
7所示.
(3)确定删除操作后,系统会开始对DreamweaverCS3进行删除信息收集操作,如图2.
8所示.
之后会弹出相应的进度显示.
图2.
.
7删除DreamweaverCS3图2.
.
8信息收集对话框2.
4熟悉DreamweaverCS3的工作窗口DreamweaverCS3所提供的工作区环境,将全部功能面板集成到了一个应用程序窗口中.
网页设计师可以选择面向设计人员的布局模式进行开发,也可以选择面向手工编码人员的布局模式进行开发.

DreamweaverCS3的工作窗口包含如下的几个组成部分:【插入】工具栏、【文档】窗口、【文档】工具栏、面板组、标签选择器、【属性】检查器、文件面板等,如图2.
9所示.
第2章网站开发工具·15·图2.
.
9工作窗口【插入】工具栏:包含了一系列的插入按钮,使用这些按钮可以将各类对象(如链接、表格和图像)插入到编辑文档中,如图2.
10所示.
在代码编辑模式下,每一个对象都会对应一段HTML代码.
图2.
.
10【插入】工具栏【文档】窗口:是用来显示当前创建和编辑的文档内容,是网站设计和开发的主要工作区.

【文档】工具栏:包含一系列的操作按钮,使用这些按钮可以在编辑文档的不同视图间快速切换,例如"代码"视图、"设计"视图、同时显示"代码"和"设计"的拆分视图.
工具栏中还包括查看文档、传输文档相关的常用命令,如图2.
11所示.
图2.
.
11【文档】工具栏面板组:针对具体功能模块,DreamweaverCS3把一些相关面板进行分组并集成在了一起.
单击面板组名称,例如【文件】面板左侧的倒三角箭头,就能展开相对应的面板组,如图2.
12所示.
标签选择器:可以理解成一个标签导航功能,这个功能可以很方便地定位到插入至页面中的任意标签.
选中要编辑的插入对象,对其进行相关的属性设置.
【属性】检查器:一个用于查看和编辑所选对象或文本的各类属性(如格式、样式、字体等)的功能面板,如图2.
13所示.
·16·图2.
.
12面板组图2.
.
13【属性】检查器【文件】面板:一个用户管理文件和文件夹的功能面板.
通过这个面板还使网页设计师可以访问本地磁盘上的全部文件,或是服务器整个站点中的所有文件.
操作模式类似于Windows的资源管理器,如图2.
14所示.
图2.
.
14【文件】面板2.
5DreamweaverCS3的参数设置在实际使用中,网页设计师通常会通过设置DreamweaverCS3的参数来自定义工作区环境,去适应个人的开发习惯.
例如,对于不熟悉编写代码的设计师,可以选择"设计器"模式的工作区布局.

如若要更改工作区布局,可以在【窗口】主菜单下选中【工作区布局】子菜单.
DreamweaverCS3内置了三种布局模式编码器、设计器和双重屏幕,设计师可以根据需要选择适合自己的工作区布局.

在【编辑】主菜单下选中【首选参数】子菜单,打开【首选参数】对话框.
在这个对话框中可以进行一系列的自定义操作,包括常规、CSS样式、标记色彩等.
下面就以介绍如何在【代码】视图模式下,在快速标签编辑器中显示代码提示为例,来介绍DreamweaverCS3首选参数设置的方法.
在【首选参数】对话框的左侧"分类"列表框内选中【代码提第2章网站开发工具·17·示】列表项,在此对话框右侧就会显示所有【代码提示】功能的设置参数,如图2.
15所示.
图2.
.
15首选参数设置【结束标签】选项组可指定希望Dreamweaver插入结束标签的方式.
默认情况下,网页设计师在"代码"编辑窗口中键入字符""后插入结束标签,或者从不插入结束标签.
在启用【选项】参数设置下的"启用代码提示"功能后,可以拖动【延迟】滑块来设置Dreamweaver在显示适当的提示之前进行延时操作的时间长短,以秒为单位.
【菜单】列表框内允许设置在键入代码时具体需要提示的代码类型,可以使用选择使用全部或部分菜单类型.
注意:在DreamweaverCS3中即便是禁用了代码提示功能,网页设计师也可以通过"Ctrl+空格"的热键组合,在"代码"视图中调出代码提示功能.
2.
6DreamweaverCS3的文件操作DreamweaverCS3还提供了全面的文件管理面板,用于实现文件管理以及与远端服务器进行文件传输的功能.
例如,通过适当的设置可以维持本地站点和远端站点之间的文件平行结构,也就是站点内容的统一.
在实现文件传输时,如果远程服务器上不存在必要的文件夹,Dreamweaver就会自动创建这些文件夹.
通过这种方式来实现本地和远端站点之间的文件同步功能.
Dreamweaver还简化了站点上的协作功能.
通过简单的设置就可以在远端服务器中存回和取出文件,使得所有开发人员都能够实时了解各个文件的处理进度.
并根据需要对所属的站点文件添加设计备注,以便与他人了解文件的共享状态等.
DreamweaverCS3所增添的"工作流程报告"功能,可以在自己的站点上运行报告,查看有关文件存回、取出状态的信息,并收集附加到文件的设计备注中.
【文件】面板中提供了所有的文件操作,例如打开文件、更改文件名、添加与删除文件等.
由于这些文件操作的方法都大同小异,下面就以重命名文件或文件夹来说明这些操作的具体操作步骤.

·18·(1)在【窗口】主菜单下选中【文件】子菜单,打开【文件】面板.
在右侧下拉列表框中可以选择本地视图、远程视图、测试服务器或是地图视图来查看对应站点的文件结构,如图2.
16所示.
(2)选定要操作的对象后,在文件列表框中就会以高亮形式显示.
右击该文件,选择【编辑】分支,选择【重命名】命令,来更改文件名,如图2.
17所示.
图2.
.
16【文件】面板图2.
.
17文件重命名操作(3)输入要更改的新文件名,按回车键,会弹出【更新文件】对话框.
Dreamweaver会检索出站点中所有与之前操作对象相关联的所有文件,要求网页设计师选择是否进行自动更新操作,如图2.
18所示.
图2.
.
18更新文件2.
7DreamweaverCS3的快捷键要成为一个合格的网页设计师,DreamweaverCS3的熟练使用者,必须拥有一定的软件操作熟练度来保证实际开发效率.
而使用快捷键将是一个行之有效的方法,下面就提供了最常用的快捷键列表,如表2.
1所示.

表2.
1Dreamweaver快捷键列表快捷键功能说明Ctrl+F/H调出查找/替换对话框Shift+Enter插入一个换行(Linebreak)Ctrl+F2显示/隐藏Object面板Ctrl+F3显示/隐藏属性面板F4显示/隐藏浮动窗口F5显示站点文件列表F7调出Styles窗口F8调出Behaviors窗口第2章网站开发工具·19·F9调出历史窗口F10启动HTML源代码编辑器F11调出图层窗口F12在主浏览器中浏览页面Ctrl+Tab文档窗口与HTML检查器间切换Ctrl+U调出参数选择(Preferences)对话框Ctrl+J调出页面属性(PageProperties)对话框Ctrl+E启动外部编辑器Ctrl+双击在Dreamweaver中打开链接对象文档Ctrl+Shift+S保存所有打开文档Ctrl+Shift+I隐藏/显示不可见元素Ctrl+Alt+Shift+R显示/隐藏标尺Ctrl+Alt+Shift+G显示/隐藏网格Ctrl+Shift+C只复制文本,不复制HTML标记Ctrl+Shift+V只粘贴文本,不粘贴HTML标记Ctrl+T快速标签编辑器,连续按可切换编辑方式Ctrl+Shift+Space生成一个non-breaking空格2.
8学会使用DreamweaverCS3的帮助【帮助】菜单中的联机帮助系统提供了有关使用DreamweaverCS3可执行任务的详细信息.
初学者可以在帮助文件中执行全文搜索,找到想解决的问题的相关帮助信息,具体步骤如下.