中文版+dreamweaver+cs6网页设计教程_it168文库

第1章 Dreamweaver CS6简介第1章 Dreamweaver CS6简介Dreamweaver CS6是一款功能强大的可视化的网页编辑与管理软件。利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写源代码。Dreamweaver CS6 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。本章主要内容l Dreamweaver CS6的新增功能。l Dreamweaver CS6的安装、删除和启动。l Dreamweaver CS6的工作界面。l Dreamweaver CS6的一般操作。本章重点l Dreamweaver CS6常用面板的使用方法。l 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 浏览器兼容性检查报告图1-2 绿色下划线标记10. Adobe CSS AdvisorAdobe 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 CentralAdobe Device Central 与 Dreamweaver 相集成，并且存在于整个 Creative Suite 3 软件产品系列中，使用它可以快速访问每个设备的基本技术规范，还可以收缩 HTML 页面的文本和图像，以便使显示效果与设备上出现的完全一样，从而简化了移动内容的创建过程。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系统的要求如下。l 处理器：Intel Pentium 4 或 AMD Athlon 64(或兼容处理器)。l 操作系统：Windows XP SP2 或更高版本，Windows Vista Home Premium、Business、Enterprise 或 Ultimate(仅提供对32位版本的认证支持)。l RAM：512 MB。l 硬盘：1.3 GB以上可用空间。l 媒体：DVD-ROM驱动器。l Internet 连接(用于激活)。对Macintosh系统的要求如下。l 处理器：G4、G5 或基于 Intel 的 Mac。l 操作系统：Mac OS 10.6或10.7版。l RAM：512 MB。l 硬盘：1.8 GB以上可用空间。l 媒体：DVD-ROM 驱动器。l Internet 连接(用于激活)。1.3.2 安装Dreamweaver CS6安装Dreamweaver CS6时，首先关闭系统中当前正在运行的所有应用程序，包括其他 Adobe 应用程序，然后执行下列操作之一。l 将安装光盘插入驱动器中，然后按照屏幕说明进行操作。注意：如果安装程序没有自动启动，请双击光盘根目录中的Setup.exe文件(Windows)或Setup文件(Mac OS)。l 如果用户是从网上下载的软件，请打开文件夹并双击Setup.exe文件(Windows) 或Setup文件(Mac OS)，然后按屏幕说明进行操作。下面是安装过程简介。(1)在“Adobe软件许可协议”界面(见图 1-4)中单击“接受”按钮，进入安装位置界面。图1-4 “Adobe软件许可协议”界面(2)在安装位置界面(见图 1-5)中单击“安装”按钮，进入“安装”界面，如图1-6所示。图1-5 安装位置界面图1-6 “安装”界面(3)进入“安装完成”界面后，单击“关闭”按钮退出安装，如图1-7所示。图1-7 “安装完成”界面1.3.3 卸载Dreamweaver CS6若要卸载Dreamweaver CS6软件，首先关闭系统中当前正在运行的所有应用程序，包括其他 Adobe 应用程序，然后执行下列操作之一。l 在Windows XP系统中，打开 Windows“控制面板”窗口，然后双击“添加或删除程序”图标，打开“添加或删除程序”窗口。选择要卸载的产品，单击“更改/删除”按钮，然后按屏幕说明进行操作。 l 在 Windows Vista系统中，打开 Windows“控制面板”窗口，然后双击“程序和功能”图标，在弹出的界面中选择要卸载的产品，单击“更改/删除”按钮，然后按屏幕说明进行操作。 l 在 Mac 系统中，请勿通过将应用程序拖入废纸篓的方式进行卸载，应安全卸载软件，即选择“应用程序”|“实用程序”|“Adobe 安装程序”命令中的产品安装程序，以管理员身份通过身份验证，选择“删除组件”命令，然后按屏幕说明进行操作。1.3.4 启动与退出Dreamweaver CS6Dreamweaver C6的启动与退出方式有很多种，下面详细介绍。1. Dreamweaver CS6的启动Dreamweaver CS6启动方式有许多种，但一般用得较多的是以下两种。 1)从“开始”菜单中启动单击Windows桌面左下角的“开始”按钮，在“程序”子菜单中选择 “Adobe Dreamweaver CS6”命令进行启动。 2)用快捷方式启动 在桌面上单击Dreamweaver CS6的快捷启动图标，即可启动。Dreamweaver CS6的启动界面如图1-8所示。图1-8 启动界面首次启动Dreamweaver CS6后的主窗口界面如图1-9所示。如果不想每次启动时都显示该界面，则选中“不再显示”复选框即可。图1-9 Dreamweaver CS6主窗口界面2. Dreamweaver CS6的退出退出Dreamweaver CS6 的方式有很多种，但平时用得最多的不外乎如下几种。l 在Dreamweaver CS6主窗口中的“文件”菜单中选择“退出”命令。 l 在 Dreamweaver CS6被激活状态下，直接按 Alt+F4 组合键。 l 单击Dreamweaver CS6主窗口左上角的控制菜单图标，从弹出的菜单中选择“关闭”命令，或者直接双击控制菜单图标。 l 单击Dreamweaver CS6主窗口右上角的“关闭”按钮。1.4 Dreamweaver CS6的工作窗口Dreamweaver CS6的工作窗口主要包括功能菜单、插入栏、文档工具栏、文档窗口、状态栏、属性面板、功能面板等，如图1-10所示。合理使用这几个板块的相关功能，可以使设计工作成为一个高效、便捷的过程。图1-10 Dreamweaver CS6的