- 网页设计与制作(第2版)
- 雷伟军主编
- 1693字
- 2025-02-25 18:48:34
1.2 Dreamweaver CS6概述

Dreamweaver CS6介绍
在诸多的“所见即所得”的网页设计软件中,Dreamweaver是使用最广泛,也是最优秀的一款软件。Macromedia公司(后被Adobe公司收购)推出的Dreamweaver系列软件经过几代的发展,目前较成熟的版本是Dreamweaver CS6。Dreamweaver CS6一经推出,就以其强大的网页设计功能吸引了大量关注,得到用户的广泛好评。
1.2.1 启动与退出Dreamweaver CS6
启动Dreamweaver CS6进入软件界面,如图1-10所示。

图1-10 Dreamweaver CS6界面
若要退出Dreamweaver CS6程序,可以在菜单栏中选择“开始”→“退出”命令,或者使用Ctrl+Q组合键。
1.2.2 Dreamweaver CS6的主界面
启动Dreamweaver CS6软件,在软件主界面中会首先显示一个起始页,在这个页面中包括“打开最近的项目”“新建”和“主要功能”3个项目栏,很多项目在初学时经常会用到,建议大家保留。在熟练之后可以在窗口底部选中“不再显示”复选框来隐藏它。
可以用新建或打开一个网页的方式进入Dreamweaver CS6的标准工作界面,如图1-11所示。下面重点介绍界面中的文档工具栏、“属性”面板和浮动面板组。

图1-11 网页编辑窗口
1.文档工具栏
此工具栏包含一些按钮,它们提供各种“文档”窗口视图(如代码视图、拆分视图和设计视图)的选项、各种查看选项和一些常用操作(如在浏览器中预览),如图1-12所示。

图1-12 文档工具栏
当打开或创建一个网页时,软件就会自动进入文档窗口,在文档区域中进行输入文字、插入表格和编辑图片等操作,就像在Word软件的文档页编辑文字一样。
文档窗口显示当前文档,用户可以通过文档工具栏在代码视图、拆分视图和设计视图三类视图中切换。
● 代码视图是一个用于编写和编辑HTML、JavaScript、服务器语言代码(如PHP或ColdFusion标记语言(CFML))以及任何其他类型代码的手工编码环境,一般初学者较少用到此视图。
● 拆分视图可使用户在单个窗口中同时看到同一文档的代码视图和设计视图,这给网页编辑提供了很大的方便,而且现在的主流显示器屏幕越来越大,这也大大提高了这一视图的使用概率。在拆分视图窗口下方为状态栏,它提供了与正在创建或打开的文档有关的其他信息。标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签都可以选择该标签及其全部内容,而单击正文选择器<body>可以选择文档的整个正文。
● 设计视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中,Dreamweaver 显示文档的完全可编辑的可视化表示形式,类似于在浏览器中查看页面时看到的内容。
2.“属性”面板
“属性”面板主要用来检查和编辑当前选定页面元素(如文本和插入的对象)的最常用属性。“属性”面板中的内容根据选定的元素会有所不同。例如,如果选择页面上的一个图像,则“属性”面板将改为显示该图像的属性(如图像的文件路径、图像的宽度和高度、图像周围的边框等),如图1-13所示。如果选择了文本,那么“属性”面板也会相应地变化成文本的相关属性。

图1-13 “属性”面板
3.浮动面板组
Dreamweaver CS6中的其他面板组可统称为浮动面板组,这些面板都浮动于编辑窗口之外,包括“CSS样式”面板、“插入”面板、“AP元素”面板、“资源”面板和“文件”面板。在窗口菜单中,选择不同的命令,可以打开设计面板组、代码面板组、应用程序面板组、资源面板组和其他面板组,图1-14所示为浮动面板组。如果显示和隐藏浮动面板组,可在菜单栏中选择“窗口”→“插入”等,如图1-15所示。下面介绍常用的“插入”面板、“CSS样式”面板和“文件”面板。

图1-14 窗口中的浮动面板组

图1-15 “窗口”菜单
(1)“插入”面板
“插入”面板包含用于创建和插入对象(如表格、图像和链接)的按钮。这些按钮按类别进行组织,可以通过从“常用”弹出菜单中选择所需类别来进行切换,如图1-14所示。
(2)“CSS样式”面板
使用“CSS样式”面板可以跟踪影响当前所选页面元素的CSS规则和属性(“当前”模式),或影响整个文档的规则和属性(“全部”模式)。若要在两种模式之间切换,可单击“CSS样式”面板顶部的切换按钮。使用“CSS样式”面板还可以在“全部”和“当前”模式下修改CSS属性。
(3)“文件”面板
使用“文件”面板可查看和管理Dreamweaver站点中的文件。
在“文件”面板中查看站点、文件或文件夹时,可以更改查看区域的大小,还可以展开或折叠“文件”面板。当折叠“文件”面板时,它以文件列表的形式显示本地站点、远程站点和测试服务器。在展开时,它会显示本地站点、远程站点和测试服务器。