搜索
第1章DreamweaverCS6简介DreamweaverCS6是一款功能强大的可视化的网页编辑与管理软件。利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写源代码。DreamweaverCS6最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。本章主要内容DreamweaverCS6的新增功能。DreamweaverCS6的安装、删除和启动。DreamweaverCS6的工作界面。DreamweaverCS6的一般操作。本章重点DreamweaverCS6常用面板的使用方法。DreamweaverCS6的文件操作。1.1DreamweaverCS6概述DreamweaverCS6是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。在业界通常将Dreamweaver、Flash、Fireworks称为“网页三剑客”。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，因此对于初级人员，无须编写任何代码就能快速创建Web页面。其成熟的代码编辑工具更适用于Web开发高级人员的创作。CS6新版本使用了自适应网格版面创建页面，在发布前可使用多屏幕预览审阅设计,大大提高了用户的工作效率，而改善的FTP性能可更高效地传输大型文件。“实时视图”和“多屏幕预览”面板可呈现HTML5代码，用户能更方便地检查自己的工作。1.2DreamweaverCS6的新增功能相对于以前的版本，DreamweaverCS6的功能主要在以下方面进行了增强。1.可响应的自适应网格版面使用响应迅速的CSS自适应网格版面，可以创建跨平台和跨浏览器的兼容网页设计。利用简洁、业界标准的代码可为各种不同设备和计算机开发项目，提高工作效率。用2户可直观地创建复杂网页设计和页面版面，无须忙于编写代码。2.改善的FTP性能利用重新改良的多线程FTP传输工具可节省上传大型文件的时间。而快速高效地上传网站文件可缩短制作时间。3.AdobeBusinessCatalyst集成使用Dreamweaver中集成的BusinessCatalyst面板连接并编辑用户利用AdobeBusinessCatalyst(需另外购买)建立的网站。利用托管解决方案建立电子商务网站。4.增强型jQuery移动支持使用更新的jQuery移动框架支持为iOS和Android平台建立本地应用程序。建立触及移动受众的应用程序，同时简化用户的移动开发工作流程。5.更新的PhoneGap支持更新的AdobePhoneGap支持可轻松为Android和iOS系统建立和封装本地应用程序。通过改编现有的HTML代码来创建移动应用程序，并可使用PhoneGap模拟器检查用户的设计。6.CSS转换将CSS属性变化制成动画转换效果，可使网页设计栩栩如生，在用户处理网页元素和创建优美效果时，能保持对网页设计的精准控制。7.更新的实时视图使用更新的“实时视图”功能可在发布前测试页面。“实时视图”现已使用最新版的WebKit转换引擎，能够提供绝佳的HTML5支持。8.更新的多屏幕预览面板可利用更新的“多屏幕预览”面板检查智能手机、平板电脑和台式机所建立项目的显示画面。该增强型面板现在能够帮助用户检查HTML5的内容呈现。9.浏览器兼容性检查DreamweaverCS6中新的浏览器兼容性检查功能可生成报告(见图1-1)，指出各种浏览器中与CSS相关的呈现问题。在代码视图中，这些问题以绿色下划线来标记，如图1-2所示，因此可以准确地知道产生问题的代码位置。确定问题之后，如果知道解决方案，则可以快速解决问题；如果需要了解详细信息，则可以访问AdobeCSSAdvisor。图1-1浏览器兼容性检查报告3第1章DreamweaverCS6简介图1-2绿色下划线标记10.AdobeCSSAdvisorAdobeCSSAdvisor网站包含有关最新的CSS问题信息，在浏览器兼容性检查过程中可通过Dreamweaver用户界面直接访问该网站。CSSAdvisor不止是一个论坛、一个WiKi页面或一个讨论组，它可以方便地为现有内容提供建议和改进意见，或者方便地添加新的问题，以使整个社区都能够从中受益。11.CSS布局Dreamweaver提供了一组预先设计的CSS布局，可以帮助用户快速设计好页面并开始运行，并且在代码中提供了丰富的内联注释以帮助用户了解CSS页面布局，如图1-3所示。Web上的大多数站点设计都可以被归类为一列、两列或三列式布局，而且每种布局都包含许多附加元素(例如标题和脚注)。Dreamweaver提供了一个包含基本布局设计的综合性列表，用户可以自定义这些设计以满足自己的需要。图1-3CSS布局12.管理CSS借助管理CSS功能，可以轻松地在文档之间、文档标题与外部表之间、外部CSS文件之间以及更多位置之间移动CSS规则。此外，还可以将内联CSS转换为CSS规则，并且只需通过拖放操作即可将它们放置在所需位置。13.AdobeDeviceCentralAdobeDeviceCentral与Dreamweaver相集成，并且存在于整个CreativeSuite3软件产品系列中，使用它可以快速访问每个设备的基本技术规范，还可以收缩HTML页面4的文本和图像，以便使显示效果与设备上出现的完全一样，从而简化了移动内容的创建过程。14.AdobeBridgeCS6将AdobeBridgeCS6与Dreamweaver一起使用可以轻松、一致地管理图像和资源。通过AdobeBridge能够集中访问项目文件、应用程序，以及设置XMP元数据标记和搜索功能。15.CSS增强功能Dreamweaver8具有HTML格式化功能，但没有CSS格式化功能，而DreamweaverCS6增加了CSS的格式化功能。1.3DreamweaverCS6的安装、卸载和启动本节主要介绍如何安装和卸载DreamweaverCS6，以及运行DreamweaverCS6的方法。1.3.1系统要求以下硬件和软件是运行DreamweaverCS6所必需的。对MicrosoftWindows系统的要求如下。处理器：IntelPentium4或AMDAthlon64(或兼容处理器)。操作系统：WindowsXPSP2或更高版本，WindowsVistaHomePremium、Business、Enterprise或Ultimate(仅提供对32位版本的认证支持)。RAM：512MB。硬盘：1.3GB以上可用空间。媒体：DVD-ROM驱动器。Internet连接(用于激活)。对Macintosh系统的要求如下。处理器：G4、G5或基于Intel的Mac。操作系统：MacOS10.6或10.7版。RAM：512MB。硬盘：1.8GB以上可用空间。媒体：DVD-ROM驱动器。Internet连接(用于激活)。1.3.2安装DreamweaverCS6安装DreamweaverCS6时，首先关闭系统中当前正在运行的所有应用程序，包括其他Adobe应用程序，然后执行下列操作之一。将安装光盘插入驱动器中，然后按照屏幕说明进行操作。注意：如果安装程序没有自动启动，请双击光盘根目录中的Setup.exe文件(Windows)或Setup文件5第1章DreamweaverCS6简介(MacOS)。如果用户是从网上下载的软件，请打开文件夹并双击Setup.exe文件(Windows)或Setup文件(MacOS)，然后按屏幕说明进行操作。下面是安装过程简介。(1)在“Adobe软件许可协议”界面(见图1-4)中单击“接受”按钮，进入安装位置界面。图1-4“Adobe软件许可协议”界面(2)在安装位置界面(见图1-5)中单击“安装”按钮，进入“安装”界面，如图1-6所示。图1-5安装位置界面6图1-6“安装”界面(3)进入“安装完成”界面后，单击“关闭”按钮退出安装，如图1-7所示。图1-7“安装完成”界面1.3.3卸载DreamweaverCS6若要卸载DreamweaverCS6软件，首先关闭系统中当前正在运行的所有应用程序，包括其他Adobe应用程序，然后执行下列操作之一。在WindowsXP系统中，打开Windows“控制面板”窗口，然后双击“添加或删除程序”图标，打开“添加或删除程序”窗口。选择要卸载的产品，单击“更改/删除”按钮，然后按屏幕说明进行操作。在WindowsVista系统中，打开Windows“控制面板”窗口，然后双击“程序和功能”图标，在弹出的界面中选择要卸载的产品，单击“更改/删除”按钮，然后7第1章DreamweaverCS6简介按屏幕说明进行操作。在Mac系统中，请勿通过将应用程序拖入废纸篓的方式进行卸载，应安全卸载软件，即选择“应用程序”|“实用程序”|“Adobe安装程序”命令中的产品安装程序，以管理员身份通过身份验证，选择“删除组件”命令，然后按屏幕说明进行操作。1.3.4启动与退出DreamweaverCS6DreamweaverC6的启动与退出方式有很多种，下面详细介绍。1.DreamweaverCS6的启动DreamweaverCS6启动方式有许多种，但一般用得较多的是以下两种。1)从“开始”菜单中启动单击Windows桌面左下角的“开始”按钮，在“程序”子菜单中选择“AdobeDreamweaverCS6”命令进行启动。2)用快捷方式启动在桌面上单击DreamweaverCS6的快捷启动图标，即可启动。DreamweaverCS6的启动界面如图1-8所示。图1-8启动界面首次启动DreamweaverCS6后的主窗口界面如图1-9所示。如果不想每次启动时都显示该界面，则选中“不再显示”复选框即可。图1-9DreamweaverCS6主窗口界面82.DreamweaverCS6的退出退出DreamweaverCS6的方式有很多种，但平时用得最多的不外乎如下几种。在DreamweaverCS6主窗口中的“文件”菜单中选择“退出”命令。在DreamweaverCS6被激活状态下，直接按Alt+F4组合键。单击DreamweaverCS6主窗口左上角的控制菜单图标，从弹出的菜单中选择“关闭”命令，或者直接双击控制菜单图标。单击DreamweaverCS6主窗口右上角的“关闭”按钮。1.4DreamweaverCS6的工作窗口DreamweaverCS6的工作窗口主要包括功能菜单、插入栏、文档工具栏、文档窗口、状态栏、属性面板、功能面板等，如图1-10所示。合理使用这几个板块的相关功能，可以使设计工作成为一个高效、便捷的过程。文档工具栏状态栏属性面板功能菜单功能面板插入栏文档窗口图1-10DreamweaverCS6的工作窗口1.4.1功能菜单所谓功能菜单，就是一些能够实现一定功能的菜单命令。DreamweaverCS6拥有“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”、“帮助”等10个菜单分类，单击这些菜单可以打开其子菜单，如图1-11所示。DreamweaverCS6的菜单功能极其丰富，几乎涵盖了所有的功能操作。9第1章DreamweaverCS6简介图1-11“文件”菜单1.4.2插入栏“插入栏”包含用于创建和插入对象(如表格、AP元素和图像)的按钮。当鼠标指针移动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。这些按钮被组织到若干选项卡中，用户可以单击“插入栏”顶部的相应选项卡进行切换。当启动DreamweaverCS6时，系统会默认打开用户上次使用的选项卡。某些选项卡具有带弹出菜单的按钮。从弹出菜单中选择一个命令时，该命令将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”命令，下次单击“图像”按钮时，Dream