6、Windows7SP1(x64)/Windows8.1(x64)/Windows10(x64) MicrosoftVisualC++Redistributable2010/2012/2013/2017
在多个显示器上显示Dreamweaver,从而扩大您的工作区。例如,将某个文档窗口拖出应用程序框,并在第二个显示器中查看它。
4、Git支持
Dreamweaver2018现已支持Git,因此可在该应用程序内管理所有源代码。在全新的“Git”面板执行所有常用的Git操作,包括推送、拉取、提交更新和取回。通过“文件”面板,您可以在FTP和Git视图之间切换,并查看您的团队的文件状态。
5、全新代码主题
两款全新的代码主题-Monaki款和经典款-提供与DreamweaverCC2015版中代码相近的颜色,让您的代码更易于阅读
6、CEF支持升级
Dreamweaver现已与新版CEF相集成,因此可在“代码视图”和“实时视图”中查看自定义HTML元素和CSS自定义属性等等。
7、支持PHP7
DreamweaverCC2018使用最受欢迎的最新版Web脚本语言创建动态网页和服务。PHP7包括代码执行、内存使用等方面的主要性能改进。直接从Dreamweaver中访问代码提示和错误检查。
8、改进了“查找和替换”
DreamweaverCC2018使用新的查找栏,您可以在代码中快速搜索简单文本、标签或代码元素,且不会遮挡屏幕。您还可以使用新的”高级搜索“功能,通过简单的键盘快捷键或下拉菜单,在打开的文件、网站和文件夹中搜索
9、全新代码编辑器
DreamweaverCC2018借助全新的编码引擎,更快、更灵活地编写代码。代码提示可帮助新用户了解HTML、CSS和其他Web标准,自动缩进、代码着色和可调整大小的字体等视觉辅助功能可帮助减少错误,使您的代码更易于阅读。
10、开发人员工作区
借助专为开发人员设计的性能得到提升且无干扰的全新工作区,快速加载和打开文件,并加快项目完成速度。
11、CSS预处理器支持
Dreamweaver现在支持SASS、Less和SCSS等常用的CSS预处理器,同时具备完整的代码着色和编译功能,使您可以节省时间并生成更简洁的代码。
12、实时浏览器预览
DreamweaverCC2018实时查看您的页面编辑,无需手动刷新浏览器。
13、HTML文件中的快速CSS编辑
DreamweaverCC2018新增的“快速编辑”为HTML文件中的相关CSS提供内联编辑器,使您可以快速进行代码更改。
14、上下文CSS文档
新增的“快速文档”功能可直接在代码视图中显示CSS属性的相关WebPlatformDocs参考信息,从而节省您的时间。
15、用于重复任务的多个光标
一次编写多行代码,从而快速完成创建项目符号列表、更新字符串序列,以及同时进行多项编辑等任务。
16、新式UI
根据数千位测试版测试人员的反馈,Dreamweaver已经过重新设计,具备更直观的可自定义界面,更易于访问的菜单和面板,以及仅显示您所需工具的可配置的上下文工具栏。
17、UI颜色主题
DreamweaverCC2018的界面现在提供从浅色到深色的四级对比度,因此更便于阅读和编辑代码行。
功能特色
1、快速、灵活的编码。
借助经过简化的智能编码引擎,轻松地创建、编码和管理动态网站。访问代码提示,即可快速了解HTML、CSS和其他Web标准。使用视觉辅助功能减少错误并提高网站开发速度。
2、通过更少的步骤轻松设置网站。
利用起始模板更快地启动并运行您的网站,您可以通过自定义这些模板来构建HTML电子邮件、“关于”页面、博客、电子商务页面、新闻稿和作品集。代码着色和视觉提示可帮助您更轻松地阅读代码,进而快速地进行编辑和更新。
3、在各个设备上动态显示。
构建可以调整自动适应任何屏幕尺寸的网站。实时预览网站并进行编辑,确保在进行发布之前网页的外观和工作方式均符合您的需求。
使用帮助
1、使用Dreamweaver设计和开发网站的高级工作流程
本文将帮助您了解如何使用Dreamweaver来完成Web开发的各个阶段。
注意:
本文假定您在了解Web域、HTML、CSS和JavaScript方面处于初级到中级阶段。
Web开发的第一个阶段是规划阶段,在此阶段您分析受众需求以及技术和市场需求。您还收集有关设计和发布网站所需的必要信息,回答类似以下的这些问题:
我选择哪个服务提供商来托管网站?我是否可以将文件上传到发布服务器?
网站使用什么域名?
如果您正在将现有网站迁移到Dreamweaver,当前这些文件和资源存储在何处?我是否可以访问存储此信息的服务器?
如果您需要一个动态网站,我能使用哪个服务器来测试数据是否动态显示?我是否有要用于加载动态数据的Web应用程序服务器的详细信息?
网站需要哪些种类的资源?
这些资源将从头开始设计吗?如果这些资源已提供,我是否可以访问它们?
我想使用什么应用程序来设计资源?
我是否计划创建一个响应性网站?
假定您对要开发的网站、如何以及在何处托管它有清楚的了解,并且选择了Dreamweaver和CreativeCloud用于Web开发流程,请继续执行下一步。
检查您是否有您的网站所需的所有资源。在您的本地文件夹或Adobe的CreativeCloudLibraries中收集和整理它们。
使用以下项在Dreamweaver中创建新文档:
新的空白文档,
随Dreamweaver打包的起始页模板,或
其他人创建的模板文件(*.dwt)
注意:
如果您不熟悉Dreamweaver或刚刚开始学习Web开发,起始页模板对于您入门和开始设计网页有很大帮助。
即使您计划从头开始,也最好参考一下这些页面了解好的网页设计应具备哪些要素。
请花几分钟时间熟悉Dreamweaver工作区。找到适合您的工作区,然后设置颜色主题。以适合您的方式重新组织不同的面板。
在Dreamweaver中设置您的站点。开始使用文件和资源创建文件夹结构。在组织好信息并确定结构后,您就可以开始创建站点了。(请参阅关于Dreamweaver站点。)
在此阶段,最好还设置到远程服务器的连接,如果有动态内容,还要设置测试服务器。在此阶段,最好还设置到远程服务器的连接,如果有动态内容,还要设置测试服务器。
开始在“代码”视图中编写网页代码,或在“设计”/“实时”视图中设计网页。
如果您计划使用Photoshop复合,可以将它们提取到Dreamweaver并处理它们。有关使用Photoshop图层复合的详细信息,请参阅在DreamweaverCC中提取.
添加设计元素,如文本、图像、鼠标经过图像、图像地图、颜色、影片、声音、HTML链接、表格等。
使用CSS确定网页外观样式。
您可以使用不同方式在Dreamweaver中处理CSS:
您可以将手动编写CSS代码。有关帮助您手动编写CSS代码的Dreamweaver编码功能的信息,请参阅Dreamweaver中的编码环境。
如果您不十分熟悉创建CSS页,可以使用CSSDesigner面板帮助生成CSS。更多信息,请参阅使用CSSDesigner布局页面。
如果您更喜欢使用Sass和Less文件,Dreamweaver也支持该选项,允许您将Sass和Less文件导入Dreamweaver站点并处理它们。Dreamweaver然后自动编译它们(或您可以选择手动编译它们)并实时查看CSS更改的结果。有关将Sass和Less文件用于Dreamweaver的信息,请参阅CSS预处理器。
针对创建动态内容设置Web应用程序。
许多Web站点都包含了动态页,动态页使访问者能够查看存储在数据库中的信息,并且一般会允许某些访问者在数据库中添加新信息或编辑信息。若要创建此类页面,则必须先设置Web服务器和应用程序服务器,创建或修改Dreamweaver站点,然后连接到数据库。更多信息,请参阅Dynamic网站、页面和网页表单.
创建动态页.
在Dreamweaver中,您可以定义动态内容的多种来源,其中包括从数据库提取的记录集、表单参数和JavaBeans组件。要将动态内容添加到网页,仅将该动态内容拖放到网页即可。
您可以通过设置页面来同时显示一个记录或多个记录,显示多页记录,添加用于在记录页之间来回移动的特殊链接,以及创建记录计数器来帮助用户跟踪记录。更多信息,请参阅Dynamic网站、页面和网页表单。
测试、预览和发布网站。测试、预览和发布网站。
在创建页面后,您需要预览它们以查看网站是否符合设计目标。您可以在“拆分”视图中编码,同时使“编码”视图和“实时”视图并排放置。
您还可以在设备上实时预览网页(如果您创建的是响应式网页),或在浏览器中预览。
如果您不需要实时预览体验,可以使用常规的“在浏览器中预览”体验。
如果您已定义到远程服务器的连接,则要发布您的网站,需要向远程服务器上传文件以使它们变为活动的。
2、Dreamweaver工作区
了解Dreamweaver工作区、对您可用的各种视图和工作区,以及Dreamweaver中的所有不同的面板和工具栏。
载入Dreamweaver
安装Dreamweaver后,在您首次启动应用程序时,屏幕上将显示一个快速入门菜单,该菜单会询问您三个问题,帮助您根据需求对Dreamweaver工作区进行个性化设置。
基于您对这些问题的回答,Dreamweaver会在开发人员工作区(包含最少代码的布局)或标准工作区(具有代码可视化工具和应用程序内预览的拆分布局)中打开。
选择工作区后,可选择您喜欢的颜色主题。然后,您可以开始使用。
注意:
以后您可随时使用“编辑”>“首选参数”对话框来更改这些工作区首选参数。
“开始”体验
Dreamweaver中的“开始”屏幕可让您快速访问最近的文件、CC库文件和起始页模板。
根据您的订阅状态,“开始”工作区可能还会显示专门针对您的需求定制的内容。
Dreamweaver会在启动时或没有打开的文档时显示“开始”屏幕。
Dreamweaver中的“开始”工作区
Dreamweaver中的“开始”工作区
Dreamweaver“开始”体验中的选项
最近浏览的文件
从最近的文件列表中打开最近打开的文件。
CC文件
打开存在于CC库云中的最近打开的文件。
快速开始
通过单击显示的任意文件类型,开始在Dreamweaver中创建文件。
起始页模板
使用Dreamweaver打开打包的起始页模板之一。
请注意此屏幕顶部的“工作”和“学习”选项卡。单击“工作”选项卡可访问您使用过的最近打开的文件。如果您没有任何最近打开的文件,则此选项卡为空。
单击“学习”选项卡可从此屏幕中立即访问Dreamweaver教程。
您还可以通过使用此屏幕右上角的搜索图标来使用搜索功能。当您键入搜索查询内容时,该应用程序将显示与搜索查询内容相匹配的最近打开的文件、CreativeCloud资源、帮助链接和库存图像。
注意:此“开始”屏幕已启用,并且默认情况下处于打开状态。如果您不需要此“开始”屏幕,请在“首选参数”>“常规”对话框中取消选中“显示开始屏幕”。
有关在Dreamweaver中创建和打开文档的信息,请参阅创建和打开文件。
工作区概述
使用Dreamweaver工作区,可以查看文档和对象属性。工作区还将许多常用操作放置于工具栏中,使您可以快速更改文档。
A.应用程序栏B.文档工具栏C.“文档”窗口D.工作区切换器E.面板F.“代码”视图G.状态栏H.标签选择器I.“实时”视图J.工具栏
工作区元素概述
工作区中包括以下元素:
应用程序栏
位于应用程序窗口顶部,包含一个工作区切换器、几个菜单(仅限Windows)以及其他应用程序控件。
文档工具栏
包含的按钮可用于选择“文档”窗口的不同视图(例如,“设计”视图、“实时”视图和“代码”视图)。
“标准”工具栏
若要显示“标准”工具栏,请选择“窗口”>“工具栏”>“标准”。工具栏包含从“文件”和“编辑”菜单执行的常见操作的按钮:“新建”、“打开”、“保存”、“全部保存”、“打印代码”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。
工具栏
位于应用程序窗口的左侧,并且包含特定于视图的按钮。
“文档”窗口
显示您当前创建和编辑的文档。
属性检查器
用于查看和更改所选对象或文本的各种属性。每个对象都具有不同的属性。
标签选择器
位于“文档”窗口底部的状态栏中。显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。
面板
帮助您监控和修改工作。示例包括“插入”面板、CSSDesigner面板和文件面板。若要展开某个面板,请双击其选项卡。
Extract面板
允许您上传和查看CreativeCloud中的PSD文件。使用此面板,您可以将PSD复合中的CSS、文本、图像、字体、颜色、渐变和度量值提取到您的文档。
“插入”面板
包含用于将图像、表格和媒体元素等各种类型的对象插入到文档中的按钮。每个对象都是一段HTML代码,允许您在插入它时设置不同的属性。例如,您可以通过单击“插入”面板中的“表格”按钮来插入一个表格。如果愿意,可以使用“插入”菜单来插入对象,而不用通过使用“插入”面板。
“文件”面板
无论它们是Dreamweaver站点的一部分还是位于远程服务器,都可以将它们用于管理文件和文件夹。使用“文件”面板,还可以访问本地磁盘上的所有文件。有关详细信息,请参阅管理文件和文件夹。
“代码片段”面板
可让您跨不同的网页、不同的站点和不同的Dreamweaver安装保存和重复使用代码片段(使用同步设置)。有关详细信息,请参阅使用代码片段重用代码。
CSSDesigner面板
为CSS属性检查器,可让您“可视化”创建CSS样式和文件,并设置属性和媒体查询。
注意:
Dreamweaver提供了很多其他面板、检查器和窗口。若要打开面板、检查器和窗口,请使用“窗口”菜单。
“文档”窗口概述
“文档”窗口显示当前文档。要切换文档的视图,请使用“文档”工具栏上的视图选项。
您也可以使用“视图”菜单中的“视图”选项来切换视图。
“实时”视图
可以真实地呈现您的文档在浏览器中的实际样子,并且您可以就像在浏览器中一样与文档进行交互。您还可以在“实时”视图中直接编辑HTML元素并在同一视图中即时预览更改。有关在“实时”视图中进行编辑的详细信息,请参阅在“实时”视图中编辑HTML元素。
“设计”视图
是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在此视图中,Dreamweaver显示文档的完全可编辑的可视化表示形式,类似于在浏览器中查看页面时看到的内容。
“代码”视图
是一个用于编写和编辑HTML、JavaScript和其他任何类型代码的手动编码环境。
代码-代码
是“代码”视图的一种拆分版本,可以通过滚动方式同时对文档的不同部分进行操作。
代码-实时
使您可以在一个窗口中看到同一文档的“代码”视图和“实时”视图。
代码-设计
使您可以在一个窗口中看到同一文档的“代码”视图和“设计”视图。
实时代码
显示浏览器用于执行该页面的实际代码,当您在“实时”视图中与该页面进行交互时,它可以动态变化。
当“文档”窗口处于最大化状态(默认值)时,“文档”窗口顶部会显示选项卡,其中显示所有打开的文档的文件名。如果您尚未保存已做的更改,则Dreamweaver会在文件名后显示一个星号。
Dreamweaver还会在文档的选项卡下(如果在单独窗口中查看文档,则在文档标题栏下)显示相关文件工具栏。相关文档指与当前文件关联的文档,例如CSS文件或JavaScript文件。若要在“文档”窗口中打开这些相关文件之一,请在“相关文件”工具栏中单击其文件名。
在视图之间切换
使用“文档”工具栏可在各种视图之间快速切换。有关详细信息,请参阅“文档”工具栏概述。
您也可以使用“视图”菜单中的以下选项在视图之间切换:
仅显示“代码”视图:选择“代码”
“拆分”视图:选择“拆分”并选择任一拆分选项
视图模式:在“实时”视图和“设计”视图之间切换
切换视图:从一个视图切换到另一个视图。
以层叠方式、平铺方式放置文档窗口或重新排列文档窗口
如果一次打开了多个文档,您可以采用层叠方式或平铺方式放置这些文档。
要以层叠方式放置文档窗口:请选择“窗口”>“排列”>“层叠”。
以平铺方式放置文档窗口:
(Windows)选择“窗口”>“排列”>“水平平铺”或“垂直平铺”。
(Macintosh)选择“窗口”>“排列”>“平铺”。
打开多个文件时,“文档”窗口将以选项卡方式显示。要重新排列选项卡式“文档”窗口的顺序,请将窗口的选项卡拖至组中的新位置。
调整“文档”窗口的大小
状态栏显示“文档”窗口的当前尺寸(以像素为单位)。若要将页面设计为在使用某一特定尺寸大小时具有最好的显示效果,可以将“文档”窗口调整到任一预定义大小、编辑这些预定义大小或者创建新的大小。
更改“设计”视图或“实时”视图中页面的视图大小时,仅更改视图大小的尺寸。而不更改文档大小。
除了预定义和自定义大小外,Dreamweaver还会列出在媒体查询中指定的大小。选择与媒体查询对应的大小后,Dreamweaver将使用该媒体查询显示页面。还可更改页面方向以预览用于移动设备的页面,在这些页面中根据设备的持握方式更改页面布局。
要调整“文档”窗口的大小,请从“文档”窗口底部的“窗口大小”弹出菜单中选择一种大小。
显示的窗口大小反映浏览器窗口的内部尺寸(不包括边框);右侧列出显示器大小或移动设备。
注意:
如果对调整大小的精确程度要求不高,可使用操作系统标准的调整窗口大小的方法,如拖动窗口的右下角。
注意:
(仅限Windows)“文档”窗口中的文档在默认情况下是最大化的,文档最大化后,您无法调整其大小。若要取消最大化文档,请单击文档右上角的取消最大化按钮。
更改窗口大小弹出菜单中列出的值
从“窗口大小”弹出菜单中选择“编辑大小”。
单击“窗口大小”列表中的任意宽度值或高度值,并键入新值。要使“文档”窗口仅调整为某个特定的宽度(高度保持不变),请选择一个高度值,然后将其删除。
单击“描述”框,输入关于某个特定大小的说明性文本。
向窗口大小弹出菜单中添加新的大小
从“窗口大小”弹出菜单中选择“编辑大小”。
向“窗口大小”弹出菜单添加窗口大小
向“窗口大小”弹出菜单添加窗口大小
单击“宽度”列中最后一个值下面的空白。
输入“宽度”和“高度”的值。
若要仅设置“宽度”或“高度”,只需将一个字段保留为空。
单击“描述”字段以输入关于所添加大小的说明性文本。
例如,您可能在800x600像素显示器项的旁边键入SVGA或一般PC,而在832x624像素显示器项的旁边键入17英寸Mac。大多数显示器可以调整为不同的像素尺寸。
单击“应用”并关闭对话框。
现在,可从“窗口大小”弹出菜单中使用您的新窗口大小。
文档工具栏概述
使用“文档”工具栏包含的按钮,可以在文档的不同视图之间快速切换。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。
文档工具栏(CC)
文档工具栏
以下选项将显示在“文档”工具栏中:
“代码”视图
仅在“文档”窗口中显示“代码”视图。
“拆分”视图
在“代码”视图和“实时/设计”视图之间拆分“文档”窗口。流体网格文档无“设计”视图选项可用。
“实时”视图
是一个交互式预览,可准确地实时呈现HTML5项目和更新,以便在您做出更改时显示您的更改。您也可以在“实时”视图中编辑HTML元素。利用“实时”选项旁边的下拉列表,可以在“实时”视图和“设计”视图之间切换。此下拉列表在流体网格文档中不可用。
“设计”视图
显示文档的表现形式,以说明用户如何在Web浏览器中查看文档。
“标准”工具栏概述
标准工具栏
若要显示“标准”工具栏,请选择“窗口”>“工具栏”>“标准”。工具栏包含从“文件”和“编辑”菜单执行的常见操作的按钮:“新建”、“打开”、“保存”、“全部保存”、“打印代码”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。
“浏览器导航”工具栏概述
浏览器导航工具栏在实时视图中成为活动状态(仅当您通过选择窗口->工具栏->标准完成设置时),并显示您正在文档窗口中查看的页面地址。“实时”视图的作用类似于常规的浏览器,因此即使浏览到您的本地站点以外的站点(例如http://www.adobe.com),Dreamweaver也将在“文档”窗口中加载该页面。
浏览器导航工具栏(CC)
浏览器导航工具栏
A.浏览器控件B.地址框
默认情况下,不激活“实时”视图中的链接。在不激活链接的情况下可选择或单击“文档”窗口中的链接文本,而不进入另一个页面。若要在实时视图中测试链接,可通过选择“视图”>“实时视图选项”>“跟踪链接”(按下Ctrl时单击链接)或“持续跟踪链接”来启用一次性单击或连续单击。
工具栏概述
工具栏垂直显示在“文档”窗口的左侧,在所有视图(“代码”、“实时”和“设计”视图)中可见。工具栏上的按钮是特定于视图的,并且仅在适用于您所使用的视图时显示。例如,如果您正在使用“实时”视图,则特定于“代码”视图的选项(例如“格式化源代码”)将不可见。
自定义工具栏
您可以选择根据需要自定义此工具栏,方法是添加菜单选项或从工具栏删除不需要的菜单选项。
要自定义工具栏,请执行以下操作:
单击工具栏中的以打开“自定义工具栏”对话框。
自定义工具栏
自定义工具栏
选择或取消选择要在工具栏中显示的菜单选项,并单击“完成”以保存工具栏。
若要恢复默认工具栏按钮,请单击“自定义工具栏”对话框中的“恢复默认值”。
状态栏概述
“文档”窗口底部的状态栏提供与正创建的文档有关的其他信息。
状态栏(CC)
状态栏
A.标签选择器B.“输出”面板C.代码颜色D.插入和覆盖切换E.行和列编号
标签选择器
显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击<body>可以选择文档的整个正文。若要在标签选择器中设置某个标签的class或ID属性,请右键单击(Windows)或按住Ctrl单击(Macintosh)该标签,然后从上下文菜单中选择一个类或ID。
“输出”面板
单击此图标可显示在文档中显示编码错误的“输出”面板。
代码颜色
(仅在“代码”视图中可用)
从此弹出菜单中选择任意编码语言,以根据编程语言更改要显示的代码的颜色。
插入和覆盖切换
(仅在“代码”视图中可用)
可让您在“代码”视图中工作时在“插入”模式和“覆盖”模式之间切换。
行和列编号
(仅在代码视图中可用。)
显示光标所在位置的行号和列号。
属性检查器概述
使用属性检查器(“窗口”>“属性”),可以检查和编辑当前选定页面元素(如文本和插入对象)的最常用属性。
属性检查器的内容根据选定的元素的不同会有所不同。例如,如果选择页面上的图像,则属性检查器将改为显示该图像的属性(如图像的文件路径、图像的宽度和高度、图像周围的边框(如果有),等等)。
属性检查器(CC)
属性检查器
默认情况下,属性检查器位于工作区的底部边缘,但是可以将其取消停靠并使其成为工作区中的浮动面板。
注意:
使用标签检查器可以查看和编辑与给定的标签属性(property)关联的每个属性(attribute)。
若要访问特定属性检查器的帮助,请单击属性检查器右上角的帮助按钮,或者从属性检查器的“选项”菜单中选择“帮助”。
查看并更改页面元素的属性
在“文档”窗口中选择页面元素。
可能必须展开属性检查器才能查看选定元素的所有属性。
在属性检查器中更改任意属性。
注意:
有关特定属性的信息,请在“文档”窗口中选择一个元素,然后单击属性检查器右上角的“帮助”图标。
如果您所做的更改没有立即体现在“文档”窗口中,请通过以下方式之一来应用更改:
在属性编辑文本字段外单击。
按Enter(Windows)或Return(Macintosh)。
按Tab切换到另一属性。
上下文菜单
使用上下文菜单可以很方便地访问与正在处理的对象或窗口有关的最有用的命令和属性。上下文菜单仅列出那些适用于当前选定内容的命令。
要打开上下文菜单,请右键单击(Windows)或按住Ctrl键并单击(Mac)部分代码(在“代码”视图中)或对象(在“实时”视图或“设计”视图中)。
在Dreamweaver中重新排列面板
您可以根据需要自定义Dreamweaver的所有面板的位置和外观。
停放和取消停放面板
要停放面板,请将其选项卡拖到该停放中(顶部、底部或两个其他面板之间)。
要停放面板组,请将其标题栏(选项卡上方的实心空白栏)拖入该停放中。
要删除面板或面板组,请将其标签或标题栏从停放中拖走。您可以将其拖移到另一个停放中,或者使其变为自由浮动。
移动面板
在移动面板时,您会看到蓝色突出显示的放置区域,您可以在该区域中移动面板。例如,通过将一个面板拖移到另一个面板上面或下面的窄蓝色放置区域中,可以在停放中向上或向下移动该面板。如果拖移到的区域不是放置区域,该面板将在工作区中自由浮动。
要移动面板,请拖动其选项卡。
要移动面板组,请拖动其标题栏。
注意:
在移动面板的同时按住Ctrl(Windows)或Command(MacOS)可防止其停放。在移动面板时按Esc可取消该操作。
添加和删除面板
如果从停放中删除所有面板,该停放将会消失。您可以通过将面板移动到工作区右边缘直到出现放置区域来创建停放。
要删除面板,请右键单击(Windows)或按住Ctrl单击(Mac)其选项卡,然后选择“关闭”,或从“窗口”菜单中取消选中该面板。
要添加面板,请从“窗口”菜单中选择该面板,然后将其停放在所需的位置。
操纵面板组
要将面板移入某个组,请将该面板的选项卡拖至该组中高亮显示的放置区域。
要重新排列组中的面板,请将面板标签拖移到组中的一个新位置。
要从组中删除面板以使其自由浮动,请将该面板的选项卡拖出该组。
要移动组,请拖动其标题栏(选项卡上方的区域)。
堆叠浮动的面板
当您将面板拖出停放但并不将其拖入放置区域时,面板会自由浮动。您可以将浮动的面板放在工作区的任何位置。您可以将浮动的面板或面板组堆叠在一起,以便在拖动最上面的标题栏时将它们作为一个整体进行移动。
要堆叠浮动的面板,请将面板的选项卡拖到另一个面板底部的放置区域中以拖动该面板。
要更改堆叠顺序,请向上或向下拖动面板选项卡。
要从堆栈中删除面板或面板组以使其自由浮动,请拖走其选项卡或标题栏。
调整面板大小
要将面板、面板组或面板堆叠最小化或最大化,请双击选项卡。也可以双击选项卡区域(选项卡旁边的空白区)。
若要调整面板大小,请拖动面板的任意一条边。
折叠和展开面板图标
您可以将面板折叠为图标以避免工作区出现混乱。在某些情况下,在默认工作区中将面板折叠为图标。
若要折叠或展开列中的所有面板图标,请单击停放区顶部的双箭头。
若要展开单个面板图标,请单击它。
若要调整面板图标大小以便仅能看到图标(看不到标签),请调整停放的宽度直到文本消失。若要再次显示图标文本,请加大停放的宽度。
若要将展开的面板重新折叠为其图标,请单击其选项卡、其图标或面板标题栏中的双箭头。
创建自定义工作区
您可以根据需要添加或删除面板来自定义工作区。然后可以将这些更改保存到工作区,以便稍后从“文档”工具栏中的“工作区切换器”进行访问。
通过将面板的当前大小和位置另存为命名的工作区,即使移动或关闭了面板,您也可以恢复该工作区。
保存自定义工作区:
选择“窗口”>“工作区布局”>“新建工作区”。
键入工作区的名称。
工作区将保存,并在“文档”工具栏中的工作区切换器中可见。
要删除自定义工作区,请执行以下操作:
从应用程序栏的工作区切换器中选择“管理工作区”以打开“管理工作区”对话框。选择工作区,然后单击“删除”。
显示或切换工作区
从“文档”工具栏上的工作区切换器中选择一个工作区。
在多用户系统中自定义Dreamweaver
即使在WindowsXP或MacOSX等多用户操作系统中,也可自定义Dreamweaver以满足自己的需求。
Dreamweaver可防止任何用户的自定义配置影响任何其他用户的自定义配置。为此,当您首次在Dreamweaver可识别的某个多用户操作系统中运行它时,该应用程序将创建各种配置文件的副本。这些用户配置文件存储在一个属于您的文件夹中。
如果重新安装或升级Dreamweaver,则Dreamweaver自动制作现有用户配置文件的备份副本,以使您如果手工自定义了这些文件,仍可访问已作出的更改。
显示选项卡式文档(仅在Mac上)
可以在一个“文档”窗口中显示多个文档,并使用选项卡来标识每个文档。还可以将这些文档显示为浮动工作区的一部分,此时每个文档都显示在自己单独的窗口中。
在单独的窗口中打开选项卡式文档
按住Ctrl键单击选项卡,然后从上下文菜单中选择“移至新窗口”。
更改默认选项卡式文档的设置
选择“Dreamweaver”>“首选参数”,然后选择“常规”类别。
选择或取消选择“以选项卡方式打开文档”并单击“确定”。
在您更改首选参数时,Dreamweaver不会更改当前打开的文档的显示。但是,在选择新的首选参数之后打开的文档将按照您所选的首选参数进行显示。
在启动Dreamweaver时以及未打开任何文档时,将显示欢迎屏幕。您可以选择隐藏“欢迎”屏幕,并在以后再显示它。当欢迎屏幕被隐藏且没有打开任何文档时,“文档”窗口处于空白状态。
常见Dreamweaver面板
您在Dreamweaver中将使用大量面板。下面介绍了一些常用面板。
“插入”面板概述
“插入”面板(“窗口”>“插入”)包含用于创建和插入对象(例如表格、图像和链接)的按钮。这些按钮按几个类别进行组织,您可以通过从顶端的下拉列表中选择所需类别来进行切换。
某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时,该选项将成为按钮的默认操作。例如,如果从“字符”按钮的弹出菜单中选择“换行符”,则下次单击“字符”按钮时,Dreamweaver会插入一个换行符。每当从弹出菜单中选择一个新选项时,该按钮的默认操作都会改变。
“插入”面板按以下类别进行组织:
HTML
可让您创建和插入最常用的HTML元素,例如div标签和对象(如图像和表格)。
表单
包含用于创建表单和用于插入表单元素(如搜索、月和密码)的按钮。
模板
用于将文档保存为模块并将特定区域标记为可编辑、可选、可重复或可编辑的可选区域。
Bootstrap组件
包含Bootstrap组件以提供导航、容器、下拉菜单以及可在响应式项目中使用的其他功能。
jQueryMobile
包含使用jQueryMobile构建站点的按钮。
jQueryUI
用于插入jQueryUI元素,例如折叠式、滑块和按钮。
收藏夹
用于将“插入”面板中最常用的按钮分组和组织到某一公共位置。
注意:
如果您处理的是某些类型的文件(如XML、JavaScript、Java和CSS),则“插入”面板和“设计”视图选项将变暗,因为您无法将项目插入到这些代码文件中。
插入对象
使用“插入”面板插入对象:
从“插入”面板的“类别”弹出菜单中选择适当的类别。
执行下列操作之一:
单击一个对象按钮或将该按钮的图标拖到“文档”窗口中(进入“设计”、“实时”或“代码”视图)。
单击按钮上的箭头,然后从菜单中选择一个选项。
根据对象的不同,可能会出现一个相应的对象插入对话框,提示您浏览到一个文件或者为对象指定参数。或者,Dreamweaver可能会在文档中插入代码,也可能会打开标签编辑器或者面板以便您在插入代码插入指定信息。
对于有些对象,如果您在“设计”视图中插入对象将不会出现对话框,但是在“代码”视图中插入对象时则会出现一个标签编辑器。对于少数对象,在“设计”视图中插入对象会导致Dreamweaver在插入对象前切换到“代码”视图。
编辑“插入”面板首选参数
选择“编辑”>“首选参数”(Windows)或“Dreamweaver”>“首选参数”(Macintosh)。
在“首选参数”对话框的“常规”类别中,取消选择“插入对象时显示对话框”,以便在插入图像、表、脚本和文件头元素等对象时禁止显示对话框,在创建对象时按住Ctrl(Windows)或Option(Macintosh)键也可达到同样的效果。
注意:
当您在禁用该选项的情况下插入对象时,将给该对象指定默认属性值。插入对象后,可以使用属性检查器更改对象的属性。
在“插入”面板的“收藏夹”类别中添加、删除或管理项目
在“插入”面板中选择任意类别。
在显示按钮的区域内右键单击(Windows)或按住Ctrl单击(Macintosh),然后选择“自定义收藏夹”。
在“自定义收藏夹对象”对话框中,根据需要进行修改,然后单击“确定”。
若要添加对象,请在左侧的“可用对象”窗格中选择一个对象,然后单击两个窗格之间的箭头,或在“可用对象”窗格中双击该对象。
注意:
一次只能添加一个对象。无法通过选择某个类别名称(如“常用”)而将整个类别添加到收藏夹列表中。
若要删除对象或分隔符,请在右侧的“收藏夹对象”窗格中选择一个对象,然后单击该窗格上方的“删除从收藏夹对象列表中选择的对象”按钮。
若要移动对象,请在右侧的“收藏夹对象”窗格中选择一个对象,然后单击该窗格上方的向上或向下箭头按钮。
若要在对象下面添加分隔符,请在右侧的“收藏夹对象”窗格中选择一个对象,然后单击该窗格下方的“添加分隔符”按钮。
如果当前不是位于“插入”面板的“收藏夹”类别中,请选择该类别以查看所做的更改。