4.1 认识Dreamweaver CC界面

Dreamweaver CC是集网页制作和网站管理于一身的“所见即所得”的网页编辑软件,它以强大的功能和友好的操作界面备受广大网页设计者的欢迎,已经成为网页制作的首选软件。Dreamweaver CC的工作界面主要由菜单栏、文档窗口、属性面板和面板组等部分组成,如图4-1所示。

图4-1 Dreamweaver CC的工作界面

4.1.1 文档工具栏

文档工具栏中包含“代码视图”、“拆分视图”、“设计视图”、“实时视图”等按钮,这些按钮可以在文档的不同视图之间快速切换,工具栏中还包含一些与查看文档、在本地和远程站点之间传输文档有关的常用命令和选项,如图4-2所示。

图4-2 文档工具栏

★知识要点★

●“代码”:显示“代码”视图。只在“文档”窗口中显示“代码”视图。

●“拆分”:显示“代码”视图和“设计”视图。将“文档”窗口拆分为“代码”视图和“设计”视图。当选择了这种组合视图时,“视图选项”菜单中顶部的“设计视图”选项变为可用。

●“设计”:只在“文档”窗口中显示“设计”视图。如果处理的是XML、JavaScript、JAVA、CSS或其他基于代码的文件类型,则不能在“设计”视图中查看文件,而且“设计”和“拆分”按钮将会变暗。

●“实时视图”:显示浏览器用于执行该页面的实际代码。

●“标题”:允许为文档输入一个标题,它将显示在浏览器的标题栏中。如果文档已经有了一个标题,则该标题将显示在该文本框中。

●“文件管理”:显示“文件管理”弹出菜单。

●“在浏览器中预览/调试”:允许在浏览器中预览或调试文档。可从弹出菜单中选择一个浏览器。

4.1.2 常用菜单命令

菜单栏包括“文件(F)”、“编辑(E)”、“查看(V)”、“插入(I)”、“修改(M)”、“格式(O)”、“命令(C)”、“站点(S)”、“窗口(W)”和“帮助(H)”10个菜单,如图4-3所示。

图4-3 菜单命令

★知识要点★

●“文件”菜单:用来管理文件,包括创建和保存文件、导入与导出文件、浏览和打印文件等。

●“编辑”菜单:用来编辑文本,包括撤销与恢复、复制与粘贴、查找与替换、参数设置和快捷键设置等。

●“查看”菜单:用来查看对象,包括代码的查看、网格线与标尺的显示、面板的隐藏和工具栏的显示等。

●“插入”菜单:用来插入网页元素,包括插入图像、多媒体、表格、布局对象、表单、电子邮件链接、日期和HTML等。

●“修改”菜单:用来实现对页面元素修改的功能,包括页面属性、CSS样式、快速标签编辑器、链接、表格、框架、AP元素与表格的转换、库和模板等。

●“格式”菜单:用来对文本进行操作,包括字体、字形、字号、字体颜色、HTML/CSS样式、段落格式化、扩展、缩进、列表、文本的对齐方式等。

●“命令”菜单:收集了所有的附加命令,包括应用记录、编辑命令清单、获得更多命令、扩展管理、清除HTML/Word HTML、检查拼写和排序表格等。

●“站点”菜单:用来创建与管理站点,包括新建站点、管理站点、上传与存回和查看链接等。

●“窗口”菜单:用来打开与切换所有的面板和窗口,包括插入栏、“属性”面板、站点窗口和“CSS”面板等。

●“帮助”菜单:内含Dreamweaver帮助、Spry框架帮助、Dreamweaver支持中心、产品注册和更新等。

4.1.3 插入工具栏

插入栏有两种显示方式,一种是以菜单方式显示,另一种是以制表符方式显示。插入栏中放置的是制作网页过程中经常用到的对象和工具,通过插入栏可以很方便地插入网页对象,有“常用”插入栏、“结构”插入栏、“表单”插入栏、“媒体”插入栏、“jQuer Mobile”插入栏、“jQuer UI”插入栏、“模板”插入栏、“收藏夹”插入栏和隐藏标签,如图4-4所示。

图4-4 “常用”插入工具栏

★知识要点★

●Div:可以使用Div标签创建CSS布局块,并在文档中对它们进行定位。

●HTML 5 Video:HTML 5视频元素提供一种将电影或视频嵌入网页中的标准方式。

●画布:画布元素是动态生成的图形的容器。这些图形是在运行时使用脚本语言(如JavaScript)创建的。

●图像:在文档中插入图像和导航栏等,单击右侧的小三角,可以看到其他与图像相关的按钮。

●表格:建立主页的基本构成元素,即表格。

●Head:用于定义网页文档的头部,它是所有头部元素的容器。

●脚本:插入脚本。

●Hyperlink:创建超链接。

●电子邮件链接:创建电子邮件链接,只要指定要链接邮件的文本和邮件地址,就可以自动插入邮件地址发送链接。

●水平线:在网页中插入水平线。

●日期:插入当前时间和日期。

●IFRAME:插入iframe代码。

●字符:在网页中插入相应的字符符号。

4.1.4 浮动面板组

Dreamweaver中的面板可以自由组合成面板组。每个面板组都可以展开和折叠,并且可以和其他面板组停靠在一起或取消停靠。面板组还可以停靠到集成的应用程序窗口中。这样就能够很容易地访问所需的面板,而不会使工作区变得混乱,如图4-5所示。

图4-5 浮动面板组

4.1.5 “属性”面板

“属性”面板主要用于查看和更改所选对象的各种属性,每种对象都具有不同的属性。在“属性”面板包括两种选项,一种是“HTML”选项,将默认显示文本的格式、样式和对齐方式等属性,如图4-6所示。另一种是“CSS”选项,单击“属性”面板中的“CSS”选项,可以在“CSS”选项的“属性”面板中设置各种属性,如图4-7所示。

图4-6 “属性”面板

图4-7 “CSS”选项