![中文版Dreamweaver CS6基础培训教程(第2版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/729/24981729/b_24981729.jpg)
1.1 Dreamweaver CS6的工作界面
Dreamweaver CS6的工作区将多个文档集中到一个窗口中,不仅降低了系统资源的占用率,还可以更加方便地操作文档。Dreamweaver CS6的工作窗口由5部分组成,分别是“插入”面板、“文档”工具栏、“文档”窗口、面板组和“属性”面板。Dreamweaver CS6的操作环境简洁明快,可大大提高设计效率。
1.1.1 友善的开始页面
启动Dreamweaver CS6后,首先看到的画面就是开始页面,供用户选择新建文件的类型,或打开已有的文档等,如图1-1所示。
老用户可能不太习惯开始页面,可选择“编辑 > 首选参数”命令,或按 Ctrl+U 组合键,弹出“首选参数”对话框,取消选择“显示欢迎屏幕”复选框,如图 1-2 所示。单击“确定”按钮完成设置。当用户再次启动Dreamweaver CS6后,将不再显示开始页面。
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0014_0005.jpg?sign=1734506981-tBB9a4q3S276v1hQPEXm2ups9o64gyNq-0-28437157e7eee8a80d6833d672470027)
图1-1
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0014_0006.jpg?sign=1734506981-3h4ZBGdZ7vg36dA8zhX1tHaQfRC49eDK-0-92d7b05fb6b4a8b5b96804937f379704)
图1-2
1.1.2 不同风格的界面
Dreamweaver CS6的操作界面新颖淡雅,布局紧凑,为用户提供了一个轻松、愉悦的开发环境。
若用户想修改操作界面的风格,切换到自己熟悉的开发环境,可选择“窗口 > 工作区布局”命令,弹出其子菜单,如图1-3所示,在子菜单中选择其中的一种界面风格,页面会发生相应的改变。
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0014_0007.jpg?sign=1734506981-YEuFNJFfDqmoIBCF4iY2jhajObihKHDZ-0-dc7fc6588bb9925c1ebed6d833fcb706)
图1-3
1.1.3 伸缩自如的功能面板
在浮动面板的右上方单击按钮,可以隐藏或展开面板,如图1-4所示。
如果用户觉得工作区不够大,可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处,当鼠标指针呈双向箭头时拖曳鼠标,调整工作区的大小,如图1-5所示。若用户需要更大的工作区,可以将面板隐藏。
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0015_0009.jpg?sign=1734506981-LNrz7iIAiaRO9ynIhrKEqR9M7ktby4zK-0-75605a9b0343df4e67bef79df673082a)
图1-4
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0015_0010.jpg?sign=1734506981-si4bOv1d7O9eLcmQSeLebh7BKIPbhFiY-0-60fcdcd4883d49af5981904fa9cf52a8)
图1-5
1.1.4 多文档的编辑界面
Dreamweaver CS6提供了多文档的编辑界面,将多个文档整合在一起,方便用户在各个文档之间切换,如图1-6所示。用户可以单击文档编辑窗口上方的选项卡,切换到相应的文档。通过多文档的编辑界面,用户可以同时编辑多个文档。
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0015_0011.jpg?sign=1734506981-XZ3BDCbYm8hg66Ne8uXEcHMNxYaLz1Z6-0-524cd4eb78dff303a3983897321491c0)
图1-6
1.1.5 新颖的“插入”面板
Dreamweaver CS6的“插入”面板可放在菜单栏的下方,如图1-7所示。
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0015_0012.jpg?sign=1734506981-RQrnTlioKqxwy3Z3t0XJnhXjkAdjwFyC-0-ae21b71cb8eb29b7f856ad4a65b72994)
图1-7
“插入”面板包括“常用”“布局”“表单”“数据”“Spry”“jQuery Mobile”“InContext Editing”“文本”“收藏夹”9个选项卡,将不同功能的按钮分门别类地放在不同的选项卡中。在Dreamweaver CS6中,“插入”面板可用菜单和选项卡两种方式显示。如果需要菜单样式,用户可用鼠标右键单击“插入”面板的选项卡,在弹出的菜单中选择“显示为菜单”命令,如图1-8所示,更改后的效果如图1-9所示。用户如果需要选项卡样式,可单击“常用”按钮上的黑色三角形,在下拉菜单中选择“显示为制表符”命令,如图1-10所示,更改后的效果如图1-11所示。
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0016_0013.jpg?sign=1734506981-we268lYOCR9M0W3Sf73US7ZygyBuOlx4-0-693fcd2ba947bfa465aa3d2eb18e2f9e)
图1-8
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0016_0014.jpg?sign=1734506981-ZCcy9etKipPSiRsJog4HP5XcXiEXAGj9-0-67cf25b7251440f75c547c9b3cf4f5a4)
图1-9
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0016_0015.jpg?sign=1734506981-YcPdI5II1NVK1VDUzgsqUpPCnFbywn5w-0-2338034fb2db168940c8a540bee4f941)
图1-10
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0016_0016.jpg?sign=1734506981-VXSvencLpPmc1NNlIJtoDoFhR8KGvLgX-0-5a56f59f35fba7892c9ddd9245929dde)
图1-11
“插入”面板中将一些相关的按钮组合成菜单,当按钮右侧有黑色箭头时,表示其为展开式按钮,如图1-12所示。
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0016_0017.jpg?sign=1734506981-Mrsudd6lPcAq1m2LxK9r4AWcw6DIruwT-0-a9155b589f941b6417412941e27f4a0a)
图1-12
1.1.6 更完整的CSS功能
传统的HTML所提供的样式及排版功能非常有限,因此,现在复杂的网页版面主要靠CSS样式来实现。而CSS样式表的功能较多,语法比较复杂,需要一个很好的工具软件有条不紊地整理复杂的CSS源代码,并适时地提供辅助说明。Dreamweaver CS6就提供了这样方便有效的CSS功能。
“属性”面板提供了CSS功能。用户可以通过“属性”面板中“目标规则”选项的下拉列表对所选的对象应用样式或创建和编辑样式,如图1-13所示。若某些文字应用了自定义样式,当用户调整这些文字的属性时,会自动生成新的CSS样式。
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0017_0018.jpg?sign=1734506981-aBhiPG1CkwW21qL213IJdYuZpqdTN9pZ-0-83c4502e9cfc533f29c9966f1eb0a4bb)
图1-13
“页面属性”按钮也提供了CSS功能。单击“页面属性”按钮,弹出“页面属性”对话框,如图1-14所示。用户可以在“分类”列表的“链接”选项卡中的“下划线样式”选项的下拉列表中设置超链接的样式,这个设置会自动转化成CSS样式,如图1-15所示。
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0017_0019.jpg?sign=1734506981-DzodRIFdzfPTqhB7GmIFVOcKphnKr5pz-0-fdc7a0ccd15ba2865f44124547bf19e4)
图1-14
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0017_0020.jpg?sign=1734506981-FsPBXgsGs3QAlutPyyYQtbWluBMm1q9C-0-3a4637dbcc801e80201ccbfc43e8dea4)
图1-15
Dreamweaver CS6除了提供如图1-16所示的“CSS样式”面板外,还提供如图1-17所示的“CSS属性”面板。“CSS 属性”面板能使用户轻松查看规则的属性设置,并可快速修改嵌入在当前文档或通过附加的样式表链接的CSS样式。可编辑的网格使用户可以更改显示的属性值。对选择所做的更改都将立即应用,这使用户可以在操作的同时预览效果。
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0017_0021.jpg?sign=1734506981-4cRgGMN7Pvi4BZs9hIRmfR2iCNqOn2PK-0-246f6927bbcc549303cbb8ce3330ca90)
图1-16
![](https://epubservercos.yuewen.com/566A8D/13311747403877306/epubprivate/OEBPS/Images/Figure_0017_0022.jpg?sign=1734506981-9DByZQL2eGNlAcXDgqul1fWnnuBZFrKy-0-4be96055e67b8468847ed72fb05f302c)
图1-17