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



