7天精通Dreamweaver CS5网页设计与制作
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

1.6.4 面板组

浮动面板组是Dreamweaver操作界面的一大特色,通过浮动面板组,用户可以根据自己的需要选择打开相应的浮动面板,既方便用户使用,又节省了屏幕空间。

1.“文件”面板

通过“文件”面板能够查看站点。在默认情况下,系统会显示本地站点,更改“文件”面板的布局后可查看远程站点或测试服务器,如图1-23所示。“站点”面板包含了一个集成的文件浏览器,除浏览当前站点以外,还可以在文件浏览器中浏览本地磁盘和网络。

图1-23 “文件”面板

2.“插入”面板

在“插入”面板中包含了用于创建和插入对象的按钮,如表格、图像和链接,这些按钮按8个类别进行组织,分别为常用、布局、表单、数据、Spry、InContext Editing、文本和收藏夹。除此以外,还有颜色图标和隐藏标签,如图1-24所示。用户可以根据需要选择插入的对象。若当前文档包含服务器代码,如ASP或CFML文档,还会显示其他类别。

图1-24 “插入”面板

·常用:包含表格、图像等网页制作中较常用的对象。

·布局:包含Div标签、Spry菜单栏和框架等命令。

·表单:包含表单、文本字段、文本区域和复选框等命令。

·数据:包括记录集、动态数据等命令。

·Spry:包含用于构建Spry页面的按钮,以及Spry数据对象和构件。

·InContext Editing:包含用于生成InContext编辑页面的按钮,以及用于可编辑区域、重复区域和管理CSS类的按钮。

·文本:包含对字体、标题的相关操作命令。

·收藏夹:用户可以通过自定义方式把常用操作添加到收藏夹中。

·颜色图标:选中后将显示彩色图标,否则为灰色图标。

·隐藏标签:显示或隐藏标签。

3.CSS样式面板

CSS是Cascading Style Sheet的缩写,它是用于增强或控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS简化了网页的格式代码,使外部样式表保存在浏览器的缓存里,从而加快了网页下载显示的速度,并减少了需要上传的代码量。另一方面,只要修改保存了网站格式的CSS样式表文件就可以改变整个站点的风格特色,在修改页面数量庞大的站点时,显得格外有用,其避免了一个一个地修改网页,大大减少了用户重复劳动的工作量,如图1-25所示。

图1-25 “CSS样式”面板

·在“当前”模式下,“CSS样式”面板将显示3个窗格:“所选内容的摘要”窗格,显示了文档中当前内容的CSS属性;“规则”窗格,显示了所选属性的位置;“属性”窗格,允许用户编辑定义所选规则的CSS属性。

·在“全部”模式下,“CSS样式”面板将显示两个窗格:“所有规则”窗格(顶部)和“属性”窗格(底部):“所有规则”窗格显示了当前文档中定义的规则以及附加到当前文档样式表中定义的所有规则的列表;“属性”窗格(底部)可以编辑“所有规则”窗格中任何规则的CSS属性。

·对于“属性”窗格的任何更改都将立即应用,从而方便用户在操作的同时预览效果。

4.“AP元素”面板

AP元素是分配有绝对位置的HTML页面元素,具体来说,就是div标签或其他任何标签。AP元素可以包含文本、图像或其他任何可放置到HTML文档中的内容。

用户可以使用AP元素来设计页面的布局,如将AP元素放置到其他AP元素的前后,隐藏某些AP元素而显示其他AP元素,以及在屏幕上移动AP元素。用户还可以将任何HTML元素(如图像)作为AP元素进行分类,方法是为其分配一个绝对位置。此时,所有AP元素(不仅仅是绝对定位的div标签)都将在“AP元素”面板中显示,如图1-26所示。

图1-26 “AP元素”面板