在诸多的“所见即所得”的网页开发工具中,Dreamweaver是使用广泛、非常优秀的一款软件。Dreamweaver系列软件经过几代的发展,目前较成熟的版本是Dreamweaver CS6。Dreamweaver CS6一经推出,就以其强大的网页设计功能吸引了大量关注,得到用户的广泛好评。
1-1 Dreamweaver CS6概述
启动Dreamweaver的方法有两种:
(1)在桌面上找到Dreamweaver程序的快捷方式图标,用鼠标左键双击图标。
(2)打开“开始”菜单—“程序”—“Dreamweaver CS6”,用鼠标左键单击启动Dreamweaver CS6,打开的界面如图1-10所示。
图1-10 Dreamweaver CS6界面
若要退出Dreamweaver CS6,可以在菜单栏中选择“文件”→“退出”命令,或者按【Ctrl+Q】组合键。
启动Dreamweaver CS6后,软件会显示一个起始页面,在这个页面中包括“打开最近的项目”“新建”“主要功能”3个项目栏,在初学时很多项目经常会用到,建议大家保留该页面。熟练之后可以在页面底部勾选“不再显示”复选框来隐藏它们。
用新建或打开一个网页的方式进入Dreamweaver CS6的工作界面,如图1-11所示。下面将重点介绍工作界面中的文档工具栏、“属性”面板和浮动面板组。
图1-11 Dreamweaver CS6的工作界面
此工具栏包含一些按钮,提供各种“文档”窗口视图(如“代码”视图、“拆分”视图和“设计”视图)的选项、各种查看选项和一些常用功能(如在浏览器中预览),如图1-12所示。
图1-12 文档工具栏
新建或打开一个网页,软件就会自动打开文档窗口,用户可以在文档区域中输入文字、插入表格和编辑图片等,就像在Word软件的文档窗口编辑内容一样。
文档窗口显示当前文档,用户可以通过文档工具栏在“代码”视图、“拆分”视图和“设计”视图3种视图中切换。
● “代码”视图。“代码”视图用于编写HTML、JavaScript、服务器语言代码(如PHP或ColdFusion标记语言(CFML)),以及任何其他类型的代码,一般初学者较少用到此视图。
● “拆分”视图。“拆分”视图可让用户同时看到同一文档的“代码”视图和“设计”视图,这给网页编辑提供了很大的方便,而且现在的主流显示器屏幕越来越大,这也大大提高了该视图的使用率。“拆分”视图下方为状态栏,它提供了与正在创建或打开的文档有关的其他信息。标签选择器显示当前选定内容的标签的层次结构。单击该层次结构中的任何标签都可以选择该标签及该标签之间的全部内容,如单击正文标签<body>可以选择整个正文。
● “设计”视图。“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中,Dreamweaver CS6显示文档的完全可编辑的可视化表示形式,类似于在浏览器中查看页面时看到的内容。
“属性”面板主要用来检查和编辑当前选定的页面元素(如文本和插入的对象)的常用属性。“属性”面板中的内容根据选定的元素会有所不同。例如,如果选择页面中的一个图像,则“属性”面板将显示该图像的属性(如图像的文件路径、图像的宽度和高度、图像周围的边框等),如图1-13所示。如果选择文本,那么“属性”面板会相应地显示文本的相关属性。
图1-13 “属性”面板
Dreamweaver CS6中的其他面板统称为浮动面板组,如图1-14所示,包括“CSS样式”面板、“插入”面板、“AP元素”面板、“资源”面板和“文件”面板。在“窗口”菜单中,选择不同的命令,可以打开“CSS样式”面板、“文件”面板、“资源”面板等。如果需要显示和隐藏浮动面板组,可在菜单栏中选择“窗口”命令,取消对应面板前面的“ ”,如图1-15所示。
图1-14 浮动面板组
图1-15 “窗口”菜单
下面介绍常用的“插入”面板、“CSS样式”面板和“文件”面板。
(1)“插入”面板
“插入”面板包含用于创建和插入对象(如表格、图像和链接等)的按钮。这些按钮按类别进行分组,可以在“常用”项中选择所需类别来进行切换。
(2)“CSS样式”面板
在“CSS样式”面板中可以查看影响当前所选页面元素的CSS规则和属性(“当前”模式),或影响整个文档的规则和属性(“全部”模式)。若要在两种模式之间切换,可单击“CSS样式”面板中的“全部”“当前”按钮。使用“CSS样式”面板,还可以在“全部”和“当前”模式下修改CSS属性。
(3)“文件”面板
在“文件”面板中可查看和管理Dreamweaver站点中的文件。
在“文件”面板中查看站点、文件或文件夹时,可以更改查看区域的大小。此外,还可以折叠或展开“文件”面板。当折叠“文件”面板时,它以文件列表的形式显示本地站点、远程站点和测试服务器。当展开“文件”面板时,它会显示本地站点、远程站点和测试服务器。