中文版-dreamweaver-cs6网页设计--第1章-dreamweaver-cs6简介

1、2,第1章 Dreamweaver CS6简介,Dreamweaver CS6是一款功能强大的可视化的网页编辑与管理软件。利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写源代码。Dreamweaver CS6 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。 本章主要内容 Dreamweaver CS6的新增功能。 Dreamweaver CS6的安装、删除和启动。 Dreamweaver CS6的工作界面。 Dreamweaver CS6的一般操作

2、。 本章重点 Dreamweaver CS6常用面板的使用方法。 Dreamweaver CS6的文件操作。,3,1.1 Dreamweaver CS6概述,Dreamweaver CS6 是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。在业界通常将Dreamweaver、Flash、Fireworks称为“网页三剑客”。 由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，因此对于初级人员，无须编写任何代码就能快速创建Web页面。其成熟的代码编辑工具更适用于Web开发高级人员的创作。CS6新版本使用了自适应网格版面创

3、建页面，在发布前可使用多屏幕预览审阅设计,大大提高了用户的工作效率，而改善的FTP性能可更高效地传输大型文件。“实时视图”和“多屏幕预览”面板可呈现HTML5 代码，用户能更方便地检查自己的工作。,4,1.2 Dreamweaver CS6的新增功能,1. 可响应的自适应网格版面 2. 改善的FTP性能 3. Adobe Business Catalyst 集成 4. 增强型 jQuery 移动支持 5. 更新的 PhoneGap 支持 6. CSS转换 7. 更新的实时视图 8. 更新的多屏幕预览面板 9. 浏览器兼容性检查,5,1.2 Dreamweaver CS6的新增功能,10. Ad

4、obe CSS Advisor 11. CSS 布局 12. 管理CSS 13. Adobe Device Central 14. Adobe Bridge CS6 15. CSS增强功能,6,1.3 Dreamweaver CS6的安装、卸载和启动,本节主要介绍如何安装和卸载Dreamweaver CS6，以及运行Dreamweaver CS6的方法。,7,1.3.1 系统要求,对Microsoft Windows系统的要求如下。 处理器：Intel Pentium 4 或 AMD Athlon 64(或兼容处理器)。 操作系统：Windows XP SP2 或更高版本，Windows Vi

5、sta 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 连接(用于激活)。,8,1.3.2 安装Dreamweaver CS6,安装Dreamweave

6、r CS6时，首先关闭系统中当前正在运行的所有应用程序，包括其他 Adobe 应用程序，然后执行下列操作之一。 将安装光盘插入驱动器中，然后按照屏幕说明进行操作。注意：如果安装程序没有自动启动，请双击光盘根目录中的Setup.exe文件(Windows)或Setup文件(Mac OS)。 如果用户是从网上下载的软件，请打开文件夹并双击Setup.exe文件(Windows) 或Setup文件(Mac OS)，然后按屏幕说明进行操作。,9,1.3.2 安装Dreamweaver CS6,下面是安装过程简介。 (1)在“Adobe软件许可协议”界面(见图1-4)中单击“接受”按钮，进入安装位置界面

7、。 (2)在安装位置界面(见图1-5)中单击“安装”按钮，进入“安装”界面，如图1-6所示。,10,1.3.2 安装Dreamweaver CS6,(3)进入“安装完成”界面后，单击“关闭”按钮退出安装，如图1-7所示。,11,1.3.3 卸载Dreamweaver CS6,若要卸载Dreamweaver CS6软件，首先关闭系统中当前正在运行的所有应用程序，包括其他 Adobe 应用程序，然后执行下列操作之一。 在Windows XP系统中，打开 Windows“控制面板”窗口，然后双击“添加或删除程序”图标，打开“添加或删除程序”窗口。选择要卸载的产品，单击“更改/删除”按钮，然后按屏幕说

8、明进行操作。 在 Windows Vista系统中，打开 Windows“控制面板”窗口，然后双击“程序和功能”图标，在弹出的界面中选择要卸载的产品，单击“更改/删除”按钮，然后按屏幕说明进行操作。 在 Mac 系统中，请勿通过将应用程序拖入废纸篓的方式进行卸载，应安全卸载软件，即选择“应用程序”|“实用程序”|“Adobe 安装程序”命令中的产品安装程序，以管理员身份通过身份验证，选择“删除组件”命令，然后按屏幕说明进行操作。,12,1.3.4 启动与退出Dreamweaver CS6,1. Dreamweaver CS6的启动 1)从“开始”菜单中启动 2)用快捷方式启动 2. Dream

9、weaver CS6的退出 在Dreamweaver CS6主窗口中的“文件”菜单中选择“退出”命令。 在 Dreamweaver CS6被激活状态下，直接按 Alt+F4 组合键。 单击Dreamweaver CS6主窗口左上角的控制菜单图标，从弹出的菜单中选择“关闭”命令，或者直接双击控制菜单图标。 单击Dreamweaver CS6主窗口右上角的“关闭”按钮。,13,1.4 Dreamweaver CS6的工作窗口,Dreamweaver CS6的工作窗口主要包括功能菜单、插入栏、文档工具栏、文档窗口、状态栏、属性面板、功能面板等，如图1-10所示。合理使用这几个板块的相关功能，可以使设

10、计工作成为一个高效、便捷的过程。,14,1.4.1 功能菜单,所谓功能菜单，就是一些能够实现一定功能的菜单命令。Dreamweaver CS6拥有“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”、“帮助”等10个菜单分类，单击这些菜单可以打开其子菜单，如图1-11所示。Dreamweaver CS6的菜单功能极其丰富，几乎涵盖了所有的功能操作。,15,1.4.2 插入栏,“插入栏”包含用于创建和插入对象(如表格、AP元素和图像)的按钮。当鼠标指针移动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。 1. “常用”选项卡 2. “布局”选项卡 3

11、. “表单”选项卡 4. “数据”选项卡 5. Spry选项卡 6. jQuery Mobile选项卡 7. InContext Editing选项卡 8. “文本”选项卡 9. “收藏夹”选项卡,16,1.4.3 文档工具栏,“文档工具栏”中包含一些按钮，使用这些按钮可以在“代码”视图、“设计”视图以及“拆分”视图间快速切换。文档工具栏还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图1-21所示。,17,1.4.4 文档窗口,“文档窗口”用于显示当前文档，可以选择下列任一视图。 设计视图：一个用于可视化页面布局、可视化编辑和快速进行应用程序开发的设计环境。在该视图中

12、，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。用户可以配置“设计”视图以在处理文档时显示动态内容。 代码视图：一个用于编写和编辑 HTML、JavaScript、服务器语言代码(如 PHP或 ColdFusion标记语言(CFML)以及任何其他类型代码的手工编码环境。 拆分视图：使用户可以在一个窗口中同时看到同一文档的“代码”视图和“设计”视图。,18,1.4.5 状态栏,“文档窗口”底部的“状态栏”提供与正在创建的文档有关的其他信息，如图1-22所示。,19,1.4.6 功能面板,1. “属性”面板 2. “CSS样式”面板 3. “应用

13、程序”面板 4. “文件”面板,20,1.5 Dreamweaver CS6的参数设置,本节介绍Dreamweaver CS6的参数设置。在Dreamweaver CS6中通过设置相关参数，可以改变操作环境，从而使其更加符合设计者的设计需要。常见的设置有“预览设置”、“设置外部编辑器”、“编辑快捷键”、“设置页面属性”等，其他的参数设置和这些方法相同，用户可以根据需要自行设置。,21,1.5.1 预览设置,在设计过程中，用户需要随时在浏览器中打开设计的文档，以便查看其设计效果和及时进行更改和完善。Dreamweaver CS6提供了在设计过程中预览的功能，用户只需使用菜单命令或快捷键就可以在浏

14、览器中打开设计中的文档。 依次选择“编辑”|“首选参数”菜单命令，打开“首选参数”对话框，在“分类”列表框中选择“在浏览器中预览”选项，右侧即出现相关界面，如图1-27所示。,22,1.5.2 设置外部编辑器,设置外部编辑器示例：将Photoshop CS6设置为Dreamweaver CS6中.jpg、.jpe、.jpeg等文件的外部编辑器。设置外部编辑器的具体操作步骤如下。 (1)依次选择“编辑”|“首选参数”菜单命令，打开“首选参数”对话框，在“分类”列表框中选择“文件类型/编辑器”选项，如图1-29所示。 (2)在“扩展名”列表框中选择.jpg .jpe .jpeg选项，然后单击“编辑

15、器”列表框上方的按钮，打开“选择外部编辑器”对话框，如图1-30所示。,23,1.5.2 设置外部编辑器,(3)选择Photoshop程序文件，然后单击“打开”按钮退出对话框，此时在“编辑器”列表框中出现所加载的Photoshop程序。 (4)选择Photoshop程序名称，单击“编辑器”列表框上方的“设为主要”按钮，将Photoshop设置为默认的主要编辑器。完成后，在Photoshop名称后面出现“主要”字样。 (5)如果要删除“编辑器”列表框中没用的编辑器，则选择编辑器名称后，单击“编辑器”列表上方的按钮即可。,24,1.5.3 编辑快捷键,编辑快捷键示例：为“查看”|“代码”菜单命令添

16、加快捷键，即按Backspace键，将Dreamweaver切换到“代码”视图。 编辑快捷键的具体操作步骤如下。 (1)依次选择“编辑”|“快捷键”菜单命令，打开“快捷键”对话框，如图1-31所示。,25,1.5.3 编辑快捷键,(2)在“当前设置”下拉列表框中选择默认的Dreamweaver Standard选项，然后在“命令”下拉列表框中选择“菜单命令”选项。 (3)在列表框中展开“查看”选项，选择其中的“代码”选项。 (4)单击“快捷键”选项右侧的按钮，然后按Backspace键。此时在“按键”文本框中出现自动加载的快捷键符号BkSp。 (5)单击“确定”按钮退出对话框，快捷键设置完毕。

17、,26,1.5.4 设置页面属性,对于页面的基本属性，例如标题、背景颜色和图像、文本及链接的颜色、边距等，在“页面属性”对话框中均可以设置。 依次选择“修改”|“页面属性”菜单命令，打开“页面属性”对话框，如图1-32所示。 在此对话框中主要可以进行以下设置。 1. 更改页面标题 2. 设置背景图像或颜色 3. 设置文本或链接颜色,27,1.6 Dreamweaver CS6的文件操作,在Dreamweaver CS6中，用户不仅可以创建基本的HTML页面和动态的ASP、JSP页面，还可以创建模板页、CSS样式表、XSLT、库项目、JavaScript、XML以及多种专业水准的页面设计。,28,1.6.1 新建文档,在Dreamweaver CS6中新建文档的具体操作步骤如下。 (1)依次选择“文件”|“新建”菜单命令，打开“新建文档”对话框，如图1-33所示。 (2)在“空白页”选项卡内的“页面类型”列表框中选择所要创建的文档类型，然后在“布局”列表框中选择想要创建的样式，然后单击“创建”按钮即可。,29,1.6.2 保存文档,在Dreamweaver CS6中保存文档的方法大致和其他应用程序相同，如果要将设计好的文档保存为模板，则依次选择“文件”|“另存为模板”菜单命令，打开如图1-34所示的“另存模板”对