本文由ｐｐ４２２２２６４贡献
    ｐｄｆ１。
    第　２　章　网站开发工具
    第２章　网站开发工具
    要想成为一名优秀的网页设计师需要具备哪些条件？独特的设计风格，紧跟潮流的设计语言，娴　熟的技术．当然任何艺术设计创作都要靠一定的工具来实现，网页开发设计也不例外．　没有高效，创新的设计开发工具想在激烈的竞争中生存，并成为一名优秀的网页设计师是很难的．　好的设计开发工具就好比嘴巴，可以把心里想的表达出来告诉对方．网页设计意图的准确表达就需要　依赖优秀的设计开发工具．
    ２．１
    Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３概述
    Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３是一款优秀的网站开发工具，是网页设计师在选择开发工具时一个不错的选择．　网页设计师使用Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３能更为高效地设计，开发和维护基于网站标准化的网站．它集成了　众多网站开发中所涉及的最新技术，扩展了页面设计与制作，多媒体开发和动
画设计这类丰富实用的　功能．　在Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３这个新版本中，在很大程度上强化了对于动态网页技术的支持，使得网页设　计师可以制作出更多眩目的互动页面特效．并保留了插件式的软件设计，使得网页设计师可以随意选　择各类扩展性插件进行安装．极具亲和力的操作界面，使网页设计师可以根据自身需要，自定义各类　浮动面板．能够更加方便地使用软件本身的各种内置对象进行开发操作．
    ２．２
    Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３的特点和新增功能
    Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３在实用功能上和操作流程上都有了显著的改进．修正了以往版本中软件本身设　计上的一些缺漏，新增功能更是发挥了其高效开发的特点．它允许网页设计师依据个人开发习惯，选　择在设计环境或是编码环境下进行快速编辑．下面就分别从实用功能，操作模式与最新技术这三个方　面介绍Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３的一些特点和新增功能．　１．　增强ＣＳＳ功能　Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３提供一组预先设计的ＣＳＳ布局模板．使用这些模板，设计人员可以快速设计好　页面并开始运行．这些模板包括Ｗｅｂ上的大多数站点设计的布局，而且每种布局都包含许多附加元素．　同时，Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３提供强大的ＣＳＳ管理功能．用户可以轻松地在文档之间，文档标题与外部表　之间，外部ＣＳＳ文件之间以及更多位置之间移动ＣＳＳ规则
．此外，用户还可以将内联ＣＳＳ转换为ＣＳＳ　规则．为了设计人员使用，Ａｄｏｂｅ还提供Ａｄｏｂｅ　ＣＳＳ　Ａｄｖｉｓｏｒ网站．通过这个网站，用户可以解决各种　ＣＳＳ的应用问题．　２．　更方便地浏览器兼容性检查　在Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３中，浏览器兼容性检查功能可生成报告，指出各种浏览器中和ＣＳＳ相关的兼
    １１
    励志照亮人生　编程改　变　命　运
    零基础学　Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３＋ＡＳＰ
    容问题．在代码视图中，这些问题以绿下划线来标记，帮助用户确认问题代码的位置．如果用户无　法解决问题，还可以在Ａｄｏｂｅ　ＣＳＳ　Ａｄｖｉｓｏｒ网站获取帮助．　３．　增加Ａｊａｘ的Ｓｐｒｙ框架　通过Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３，用户可以使用Ａｊａｘ的Ｓｐｒｙ框架进行动态用户界面的可视化设计，开发和　部署．Ｓｐｒｙ与其他Ａｊａｘ框架不同，它是一个面向Ｗｅｂ设计人员的ＪａｖａＳｃｒｉｐｔ库．设计人员可以向用户提　供更丰富体验的网页．Ｓｐｒｙ框架包括Ｓｐｒｙ构件和Ｓｐｒｙ效果两部分．
    Ｓｐｒｙ构件：它是预置的常用用户界面组件．用户可以使用ＣＳＳ自定义这些组件，然后将其添
    加到网页中．在Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３，用户可以将多个Ｓｐｒｙ构件添加到自己的页面中．在这些　构件中，可以包括ＸＭＬ驱动的列表和表格，折叠构件，选项卡式界面和具有验证功能的表单　元素．
    Ｓｐｒｙ效果：它是一种提高网站外观吸引力的简洁方式．这种效果可应用于ＨＴＭＬ页面上的大部
    分元素．用户可以通过添加Ｓｐｒｙ效果，对网页元素进行放大，收缩，渐隐和高亮显示．　４．　与其他工具的高度集成　Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３实现和Ｐｈｏｔｏｓｈｏｐ　ＣＳ３，Ａｄｏｂｅ　Ｄｅｖｉｃｅ　Ｃｅｎｔｒａｌ和Ａｄｏｂｅ　Ｂｒｉｄｇｅ　ＣＳ３高度集成．
    Ｄｒｅａｍｗｅａｖｅｒ和Ｐｈｏｔｏｓｈｏｐ　ＣＳ３集成：设计人员可以在Ｐｈｏｔｏｓｈｏｐ中选择任一部分，直接将其粘
    贴到Ｄｒｅａｍｗｅａｖｅｒ页面中．Ｄｒｅａｍｗｅａｖｅｒ会显示一个对话框，可在其中为图像指定优化选项．　如果需要编辑图像，只需双击图像，就可在Ｐｈｏｔｏｓｈｏｐ中打开原始的带图层ＰＳＤ文件进行编辑．
    Ｄｒｅａｍｗｅａｖｅｒ和Ａｄｏｂｅ　Ｄｅｖｉｃｅ　Ｃｅｎｔｒａｌ集成：使用Ａｄｏｂｅ　Ｄｅｖｉｃｅ　Ｃｅｎｔｒａｌ，用户可以快速访问每
    个设备的基本技术规范，帮助用户实现内容的移动．
    Ｄｒｅａｍｗｅａｖｅｒ和Ａｄｏｂｅ　Ｂｒｉｄｇｅ　ＣＳ３集成：通过Ａｄｏｂｅ　Ｂｒｉｄｇｅ，用户可以能够集中访问项目文件，
    应用程序，设置以及ＸＭＰ元数据标记和搜索功能．
    ２．３
    Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３的安装，删除和启动
    安装Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３，具体的操作步骤如下．　（１）打开Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３安装文件后，程序会自动开始解压，将所需要的文件提取出来，以供　安装．随后将出现安装欢迎对话框并要求接受协议，如图２．１所示．　（２）接受软件用户使用版权协议后，单击【下一步】按钮，可以对文件所使用的默认编辑器进行　分类指派．也就是确认把Ｄｒｅａｍｗｅａｖｅｒ作为哪一部分特定类型文件的默认编辑器，如图２．２所示．　（３）连续几步操作后，Ｄｒｅａｍｗｅａｖｅｒ完成所有安装．用户可以根据需要选中【显示自述文件】选　项框，在安装完毕后查看软件的说明文件．也可以选中【启动Ｍａｃｒｏｍｅｄｉａ　Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３】选项　框，在退出安装向导后自动打开软件，如图２．３所示．　（４）单击【完成】按钮，系统会自动运行Ｄｒ
ｅａｍｗｅａｖｅｒ　ＣＳ３，弹出如图２．４所示的启动画面．根据　用户系统实际情况，可能会出现要求重新启动计算机的相应提示．　（５）查看Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３的工作环境，它的操作界面由主菜单，状态栏，工作区和浮动面板组　成，如图２．５所示．
    励志　照　亮　人　生　编程改变命运
    １２
    第　２　章　网站开发工具
    图２．１　接受许可协议对话框
    图２．２　默认编辑器设置
    图２．３　安装完成画面
    图２．４　启动画面
    图２．５　工作环境
    励志照亮人生　编程改　变　命　运
    １３
    零基础学　Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３＋ＡＳＰ
    删除Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３的方法与卸载其他应用程序一样，具体的操作步骤如下．　（１）在【控制面板】右侧列表框中选中【添加或删除程序】列表项，打开【添加或删除程序】窗　口，如图２．６所示．
    图２．６　【添加或删除程序】窗口
    （２）在【添加或删除程序】窗口右侧的【当前安装的程序】列表框中，选中【Ｍａｃｒｏｍｅｄｉａ　Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３】列表项．单击【删除】按钮，会出现确认删除的对话框，如图２．７所示．　（３）确定删除操作后，系统会开始对Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３进行删除信息收集操作，如图２．８所示．之　后会弹出相应的进度显示．
    图２．７　删除Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３
    图２．８　信息收集对话框
    ２．４
    熟悉Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３的工作窗口
    Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３所提供的工作区环境，将全部功能面板集成到了一个应用程序窗口中．网页设　计师可以选择面向设计人员的布局模式进行开发，也可以选择面向手工编码人员的布局模式进行开发．　Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３的工作窗口包含如下几个组成部分：　【插入】工具栏，　【文档】窗口，　【文档】　工具栏，面板组，标签选择器，　【属性】检查器，文件面板等，如图２．９所示．
    励志　照　亮　人　生　编程改变命运
    １４
    第　２　章　网站开发工具
    【插入】工具栏　【文档】窗口　【文档】工具栏　面板组
    标签选择器
    【属性】检查器
    【文件】面板
    图２．９　工作窗口
    【插入】工具栏：包含了一系列插入按钮，使用这些按钮可以将各类对象（如链接，表格和图像）　插入到编辑文档中，如图２．１０所示．在代码编辑模式下，每一个对象都会对应一段ＨＴＭＬ代码．
    图２．１０　【插入】工具栏
    【文档】窗口：是用来显示当前创建和编辑的文档内容，是网站设计和开发的主要工作区．　【文档】工具栏：包含一系列的操作按钮，使用这些按钮可以在编辑文档的不同视图间快速切换，　例如＂代码＂视图，　＂设计＂视图，同时显示＂代码＂和＂设计＂的拆分视图．工具栏中还包括查看　文档，传输文档相关的常用命令，如图２．１１所示．
    图２．１１　【文档】工具栏
    面板组：针对具体功能模块，Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３把一些相关　面板进行分组并集成在了一起．单击面板组名称，例如【文件】　面板左侧的倒三角箭头，就能展开相对应的面板组，如图２．１２　所示．　标签选择器：可以理解成一个标签导航功能，这个功能可　以很方便地定位到插入至页面中的任意标签．选中要编辑的插　入对象，对其进行相关的属性设置．　【属性】检查器：一个用于查看和编辑所选对象或文本的各　类属性（如格式，样式，字体等）的功能面板，如图２．１３所示．　【文件】面板：一个用户管理文件和文件夹的功能面板．通
    １５　图２．１２　面板组
    励志照亮人生　编程改　变　命　运
    零基础学　Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３＋ＡＳＰ
    过这个面板使网页设计师可以访问本地磁盘上的全部文件，或是服务器整个站点中的所有文件．操作　模式类似于Ｗｉｎｄｏｗｓ的资源管理器，如图２．１４所示．
    图２．１３　【属性】检查器
    图２．１４　【文件】面板
    ２．５
    Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３的参数设置
    在实际使用中，网页设计师通常会通过设置Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３的参数来自定义工作区环境，去适　应个人的开发习惯．例如，对于不熟悉编写代码的设计师，可以选择＂设计器＂模式的工作区布局．　如若要更改工作区布局，可以在【窗口】主菜单下选中【工作区布局】子菜单．Ｄｒｅａ
ｍｗｅａｖｅｒ　ＣＳ３内置了三种布局模式编码器，设计器和双重屏幕，设计师可以根据需要选择适合自己的工作区　布局．　在【编辑】主菜单下选中【首选参数】子菜单，打开【首选参数】对话框．在这个对话框中可以　进行一系列的自定义操作，包括常规，ＣＳＳ样式，标记彩等．　下面就以介绍如何在【代码】视图模式下，在快速标签编辑器中显示代码提示为例，来介绍　Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３首选参数设置的方法．在【首选参数】对话框的左侧＂分类＂列表框内选中【代码　提示】列表项，在此对话框右侧就会显示所有【代码提示】功能的设置参数，如图２．１５所示．　【结束标签】选项组可指定希望Ｄｒｅａｍｗｅａｖｅｒ插入结束标签的方式．默认情况下，网页设计师在　＂代码＂编辑窗口中键入字符＂＜∧＂后，Ｄｒｅａｍｗｅａｖｅｒ会自动闭合标签与之匹配．可以更改此选项，　设置为在键入开始标签的最后尖括号＂＞＂后插入结束标签，或者从不插入结束标签．　在启用【选项】参数设置下的＂启用代码提示＂功能后，可以拖动【延迟】滑块来设置　Ｄｒｅａｍｗｅａｖｅｒ　在显示适当的提示之前进行延时操作的时间长短，以秒为单位．　【菜单】列表框内允许设置在键入代码时具体需要提示的代码类型，可以选择使用全部或部分菜　单类型．    励志　照　亮　人　生　编程改变命运
    １６
    第　２　章　网站开发工具
    注意　在Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３中即便是禁用了代码提示功能，网页设计师也可以通过【Ｃｔｒｌ＋空格】的热　键组合，在＂代码＂视图中调出代码提示功能．
    图２．１５　首选参数设置
    ２．６
    Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３的文件操作
    Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３还提供了全面的文件管理面板，用于实现文件管理以及与远端服务器进行文件　传输的功能．例如，通过适当的设置可以维持本地站点和远端站点之间的文件平行结构，也就是站点　内容的统一．　在实现文件传输时，如果远程服务器上不存在必要的文件夹，Ｄｒｅａｍｗｅａｖｅｒ就会自动创建这些文　件夹．通过这种方式来实现本地和远端站点之间的文件同步功能．　Ｄｒｅａｍｗｅａｖｅｒ还简化了站点上的协作功能．通过简单的设置就可以在远端服务器中存回和取出文　件，使得所有开发人员都能够实时了解各个文件的处理进度．并根据需要对所属的站点文件添加设计　备注，以便与他人了解文件的共享状态等．　Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３所增添的＂工作流程报告＂功能，可以在自己的站点上运行报告，查看有关文　件存回，取出状态的信息，并收集附加到文件的设计备注中．　【文件】面板中提供了所有的文件操作，例如打开文件，更改文件名，添加与删除文件等．由于这　些文件操作的方法都大同小异，下面就以重命名文件或文件夹来说明这些操作的
具体步骤．　（１）在【窗口】主菜单下选中【文件】子菜单，打开【文件】面板．在右侧下拉列表框中可以选　择＂本地视图＂　＂远程视图＂　＂测试服务器＂或是＂地图视图＂来查看对应站点的文件结构，如图　，　，　２．１６所示．　（２）选定要操作的对象后，在文件列表框中就会以高亮形式显示．右击该文件，选择【编辑】分　支，选择【重命名】命令，来更改文件名，如图２．１７所示．
    励志照亮人生　编程改　变　命　运
    １７
    零基础学　Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３＋ＡＳＰ
    （３）输入要更改的新文件名，按回车键，会弹出【更新文件】对话框．Ｄｒｅａｍｗｅａｖｅｒ会检索出站　点中所有与之前操作对象相关联的所有文件，要求网页设计师选择是否进行自动更新操作，如图２．１８　所示．
    图２．１６　【文件】面板
    图２．１７　文件重命名操作
    图２．１８　更新文件
    ２．７
    Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３的快捷键
    要成为一个合格的网页设计师，Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３的熟练使用者，必须拥有一定的软件操作熟练　度来保证实际开发效率．而使用快捷键将是一个行之有效的方法，下面就提供了最常用的快捷键列表，　如表２．１所示．
    表２．１
    快　捷　键　Ｃｔｒｌ＋Ｆ／Ｈ　Ｓｈｉｆｔ＋Ｅｎｔｅｒ　功能说明　调出查／替换对话框　插入一个换行（Ｌｉｎｅ　ｂｒｅａｋ）
个人网页设计模板html文件
    Ｄｒｅａｍｗｅａｖｅｒ快捷键列表
    快　捷　键　Ｃｔｒｌ＋Ｕ　Ｃｔｒｌ＋Ｊ　功能说明　调出参数选择（Ｐｒｅｆｅｒｅｎｃｅｓ）对话框　调出页面属性（Ｐａｇｅ　Ｐｒｏｐｅｒｔｉｅｓ）对　话框
    Ｃｔｒｌ＋Ｆ２　Ｃｔｒｌ＋Ｆ３　Ｆ４　Ｆ５　Ｆ７　Ｆ８　Ｆ９　Ｆ１０　Ｆ１１
    显示／隐藏Ｏｂｊｅｃｔ面板　显示／隐藏属性面板　显示／隐藏浮动窗口　显示站点文件列表　调出Ｓｔｙｌｅｓ窗口　调出Ｂｅｈａｖｉｏｒｓ窗口　调出历史窗口　启动ＨＴＭＬ源代码编辑器　调出图层窗口
    Ｃｔｒｌ＋Ｅ　Ｃｔｒｌ＋双击　Ｃｔｒｌ＋Ｓｈｉｆｔ＋Ｓ　Ｃｔｒｌ＋Ｓｈｉｆｔ＋Ｉ　Ｃｔｒｌ＋Ａｌｔ＋Ｓｈｉｆｔ＋Ｒ　Ｃｔｒｌ＋Ａｌｔ＋Ｓｈｉｆｔ＋Ｇ　Ｃｔｒｌ＋Ｓｈｉｆｔ＋Ｃ　Ｃｔｒｌ＋Ｓｈｉｆｔ＋Ｖ　Ｃｔｒｌ＋Ｔ
    启动外部编辑器　在Ｄｒｅａｍｗｅａｖｅｒ中打开链接对象文档　保存所有打开文档　隐藏／显示不可见元素　显示／隐藏标尺　显示／隐藏网格　只复制文本，不复制ＨＴＭＬ标记　只粘贴文本，不粘贴ＨＴＭＬ标记　快速标签编辑器，连续按可切换编　辑方式
    Ｆ１２　Ｃｔｒｌ＋Ｔａｂ
    在主浏览器中浏览页面　文档窗口与ＨＴＭＬ检查器间切换
    Ｃｔｒｌ＋Ｓｈｉｆｔ＋Ｓｐａｃｅ
    生成一个ｎｏｎ－ｂｒｅａｋｉｎｇ空格
    励志　照　亮　人　生　编程改变命运
    １８
    第　２　章　网站开发工具
    ２．８
    学会使用Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３的帮助
    【帮助】菜单中的联机帮助系统提供了有关使用Ｄｒｅａｍｗｅａｖｅｒ　ＣＳ３可执行任务的详细信息．初学　者可以在帮助文件中执行全文搜索，到想解决的问题的相关帮助信息，具体步骤如下．　（１）单击【帮助】｜【Ｄｒｅａｍｗｅａｖｅｒ帮助】命令，打开【Ａｄｏｂｅ　Ｈｅｌｐ　Ｖｉｅｗｅｒ】窗口，如图２．１９所示．
    图２．１９　【Ａｄｏｂｅ　Ｈｅｌｐ　Ｖｉｅｗｅｒ】窗口
    （２）单击【索引】标签，选择索引首字母．系统将显示所有的以该字母开始的主题．选中要查看　的主题，单击【显示】按钮，在窗口右侧就会显示该主题的明细内容，如图２．２０所示．
    图２．２０　帮助全文搜索
    １９
    励志照亮人生　编程改　变　命　运

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。