中文版DreamweaverCS6网页设计教程IT68文库Word格式文档下载.docx

1、使用更新的功能可在发布前测试页面。现已使用最新版的 WebKit 转换引擎,能够提供绝佳的 HTML5 支持。8.更新的多屏幕预览面板可利用更新的面板检查智能手机、平板电脑和台式机所建立项目的显示画面。该增强型面板现在能够帮助用户检查HTML5的容呈现。9. 浏览器兼容性检查Dreamweaver CS6中新的浏览器兼容性检查功能可生成报告,指出各种浏览器中与 CSS 相关的呈现问题。在代码视图中,这些问题以绿色下划线来标记,如图1-2所示,因此可以准确地知道产生问题的代码位置。确定问题之后,如果知道解决方案,则可以快速解决问题；如果需要了解详细信息,则可以访问 Adobe CSS Advis

2、or。图1-1 浏览器兼容性检查报告图1-2 绿色下划线标记10. Adobe CSS AdvisorAdobe CSS Advisor 包含有关最新的CSS问题信息,在浏览器兼容性检查过程中可通过 Dreamweaver 用户界面直接访问该。CSS Advisor 不止是一个论坛、一个 WiKi页面或一个讨论组,它可以方便地为现有容提供建议和改进意见,或者方便地添加新的问题,以使整个社区都能够从中受益。11. CSS 布局Dreamweaver提供了一组预先设计的 CSS 布局,可以帮助用户快速设计好页面并开始运行,并且在代码中提供了丰富的联注释以帮助用户了解CSS页面布局,如图1-3所示。

3、Web 上的大多数站点设计都可以被归类为一列、两列或三列式布局,而且每种布局都包含许多附加元素Dreamweaver 提供了一个包含基本布局设计的综合性列表,用户可以自定义这些设计以满足自己的需要。图1-3 CSS布局12. 管理CSS借助管理CSS 功能,可以轻松地在文档之间、文档标题与外部表之间、外部 CSS 文件之间以及更多位置之间移动 CSS 规则。此外,还可以将联 CSS 转换为 CSS 规则,并且只需通过拖放操作即可将它们放置在所需位置。13. Adobe Device CentralAdobe Device Central 与 Dreamweaver 相集成,并且存在于整个 Cr

4、eative Suite 3 软件产品系列中,使用它可以快速访问每个设备的基本技术规,还可以收缩 HTML 页面的文本和图像,以便使显示效果与设备上出现的完全一样,从而简化了移动容的创建过程。14. Adobe Bridge CS6将 Adobe Bridge CS6 与 Dreamweaver 一起使用可以轻松、一致地管理图像和资源。通过 Adobe Bridge 能够集中访问项目文件、应用程序,以及设置 XMP 元数据标记和搜索功能。15. CSS增强功能Dreamweaver 8具有HTML格式化功能,但没有CSS格式化功能,而Dreamweaver CS6增加了CSS的格式化功能。1.

5、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 或 UltimateRAM：512 MB。硬盘：1.3 GB以上可用空间。媒体：DVD-ROM驱

6、动器。Internet 连接对Macintosh系统的要求如下。G4、G5 或基于 Intel 的 Mac。Mac OS 10.6或10.7版。1.8 GB以上可用空间。DVD-ROM 驱动器。1.3.2 安装Dreamweaver CS6安装Dreamweaver CS6时,首先关闭系统中当前正在运行的所有应用程序,包括其他 Adobe 应用程序,然后执行下列操作之一。将安装光盘插入驱动器中,然后按照屏幕说明进行操作。注意：如果安装程序没有自动启动,请双击光盘根目录中的Setup.exe文件或Setup文件如果用户是从网上下载的软件,请打开文件夹并双击Setup.exe文件 或Setup文件

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

8、除按钮,然后按屏幕说明进行操作。 在 Windows Vista系统中,打开 Windows程序和功能图标,在弹出的界面中选择要卸载的产品,单击在 Mac 系统中,请勿通过将应用程序拖入废纸篓的方式进行卸载,应安全卸载软件,即选择应用程序|实用程序Adobe 安装程序命令中的产品安装程序,以管理员身份通过身份验证,选择删除组件命令,然后按屏幕说明进行操作。1.3.4 启动与退出Dreamweaver CS6Dreamweaver C6的启动与退出方式有很多种,下面详细介绍。1. Dreamweaver CS6的启动Dreamweaver CS6启动方式有许多种,但一般用得较多的是以下两种。 从

9、开始菜单中启动单击Windows桌面左下角的按钮,在程序子菜单中选择 Adobe Dreamweaver CS6命令进行启动。 用快捷方式启动 在桌面上单击Dreamweaver CS6的快捷启动图标,即可启动。Dreamweaver CS6的启动界面如图1-8所示。图1-8 启动界面首次启动Dreamweaver CS6后的主窗口界面如图1-9所示。如果不想每次启动时都显示该界面,则选中不再显示复选框即可。图1-9 Dreamweaver CS6主窗口界面2. Dreamweaver CS6的退出退出Dreamweaver CS6 的方式有很多种,但平时用得最多的不外乎如下几种。在Dream

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

11、窗口1.4.1 功能菜单所谓功能菜单,就是一些能够实现一定功能的菜单命令。Dreamweaver CS6拥有、编辑查看插入修改格式命令站点窗口帮助等10个菜单分类,单击这些菜单可以打开其子菜单,如图1-11所示。Dreamweaver CS6的菜单功能极其丰富,几乎涵盖了所有的功能操作。图1-11 菜单1.4.2 插入栏插入栏包含用于创建和插入对象的按钮。当鼠标指针移动到一个按钮上时,会出现一个工具提示,其中含有该按钮的名称。这些按钮被组织到若干选项卡中,用户可以单击顶部的相应选项卡进行切换。当启动Dreamweaver CS6时,系统会默认打开用户上次使用的选项卡。某些选项卡具有带弹出菜单的

12、按钮。从弹出菜单中选择一个命令时,该命令将成为该按钮的默认操作。例如,如果从 图像按钮的弹出菜单中选择图像占位符命令,下次单击按钮时,Dreamweaver CS6会自插入一个图像占位符。每当从按钮的弹出菜单中选择一个新命令时,该按钮的默认操作都会改变。按以下选项卡进行组织。1. 常用选项卡选项卡包含了最常用的对象,最主要的功能是插入各项最常用的基本网页设计及排版组件,如图像按钮、表格按钮、插入媒体等,如图1-12所示。图1-12 2. 布局选项卡 选项卡包含了表格按钮、DIV 标签等标签,如图1-13所示,可以帮助用户快速地在网页中绘制不同的表格和框架。这与以往版本的Dreamweaver

13、有很大的区别。图1-13 3. 表单选项卡包含了创建表单域和插入表单元素的按钮,如图1-14所示。表单是网页设计中最重要却又最难完全掌握的部分,使用表单可以收集访问者的信息,如订单、搜索接口等。图1-14 4. 数据选项卡可以插入 Spry数据对象和其他动态元素,例如记录集、重复区域以及插入记录表单和更新记录表单,如图1-15所示。图1-15 5. Spry选项卡Spry选项卡包含一些用于构建 Spry页面的按钮,包括 Spry数据对象和构件,如图1-16所示。图1-16 Spry选项卡6. jQuery Mobile选项卡jQuery Mobile选项卡包含jQuery Mobile的页面、

14、文本输入、按钮等元素,如图1-17所示。图1-17 jQuery Mobile选项卡7. InContext Editing选项卡InContext Editing选项卡包含可编辑区域和创建重复区域的容,如图1-18所示。图1-18 InContext Editing选项卡8. 文本选项卡包含了多种特定的字符,如商标、引号等特殊字符,这些字符也可以以HTML的方式插入网页之中,如图1-19所示。图1-19 9. 收藏夹选项卡用于将中最常用的按钮分组或将其组织到某一公共位置,如图1-20所示。图1-20 1.4.3 文档工具栏文档工具栏中包含一些按钮,使用这些按钮可以在代码视图、设计视图以及拆分

15、视图间快速切换。文档工具栏还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项,如图1-21所示。图1-21 文档工具栏显示代码视图按钮：只在文档窗口中显示视图。显示代码视图和设计视图将文档窗口拆分为视图和当选择了这种组合视图时,左侧显示视图,右侧显示显示设计视图如果处理的是 XML、JavaScript、Java、CSS或其他基于代码的文件类型,则不能在视图中查看文件,而且按钮将会变暗。多屏幕可以根据用户的需要选择屏幕的尺寸、大小和方向等。在浏览器中预览/调试允许用户在浏览器中预览或调试文档,并可从弹出菜单中选择一个浏览器。文件管理显示弹出菜单。W3C验证按扭：包括验证当前文

16、档、验证实时文档和设置W3C的功能,用于验证当前文档或选定的标签。检查浏览器兼容性用于检查用户的 CSS是否对于各种浏览器均兼容,包括检查浏览器的兼容性、显示浏览器出现的问题、报告浏览器呈现的问题等。可视化助理用户可以使用各种可视化助理来设计页面。刷新设计视图在视图中对文档进行更改后,单击此按钮刷新文档的 视图,因为只有在执行某些操作之后,在代码 视图中所作的更改才会自动显示在 视图中。刷新过程也依赖于 DOM的代码功能,如选择代码块的开始标签或结束标签的能力。标题文本框：允许为文档输入一个标题,该标题将显示在浏览器的标题栏中。如果文档已经有标题了,则该标题将显示在该区域中。1.4.4文档窗口

17、用于显示当前文档,可以选择下列任一视图。设计视图：一个用于可视化页面布局、可视化编辑和快速进行应用程序开发的设计环境。在该视图中,Dreamweaver显示文档的完全可编辑的可视化表示形式,类似于在浏览器中查看页面时看到的容。用户可以配置视图以在处理文档时显示动态容。代码视图：一个用于编写和编辑 HTML、JavaScript、服务器语言代码如 PHP或 ColdFusion标记语言以及任何其他类型代码的手工编码环境。拆分视图：使用户可以在一个窗口中同时看到同一文档的当有标题栏时,标题栏显示页面标题,并在括号中显示文件的路径和文件名。如果用户对文档作了更改但尚未保存,则 Dreamweaver

18、会在文件名后显示一个星号。在集成工作区布局中处于最大化状态时,它没有标题栏,页面标题以及文件的路径和文件名则显示在主工作区窗口的标题栏中。并且顶部会出现选项卡,上面显示了所有打开文档的文件名。若要切换到某个文档,则可单击它的选项卡。1.4.5状态栏底部的状态栏提供与正在创建的文档有关的其他信息,如图1-22所示。图1-22 状态栏标签选择器图标：显示环绕当前选定容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部容。单击图标可以选择文档的整个正文。若要在标签选择器中设置某个标签的 class 或 id 属性,则可右击或按住Ctrl键并单击该标签,然后从弹出的快捷菜单中选择一个类

19、或 ID。选取工具用于启用或禁用手形工具。手形工具用于在窗口中单击并拖动文档。缩放工具和设置缩放比率下拉列表框：可以为文档设置缩放比率。窗口大小用于将 的大小调整到预定义或自定义的尺寸。文档大小和下载时间显示页面的预计文档大小和预计下载时间。1.4.6 功能面板Dreamweaver CS6的功能面板位于文档窗口边缘。常见的功能面板包括属性面板、CSS样式面板等。面板面板并不是将所有的对象和属性都加载到面板上,而是根据用户选择的不同对象来动态地显示对象的属性。制作网页时,可以根据需要随时打开或关闭面板,或者通过拖动属性面板的标题栏将其移到合适的位置。选定页面元素后系统会显示相应的面板例如,图像

20、面板、表格面板、框架面板、Flash影片面板、表单元素图1-23 使用面板可以跟踪影响当前所选页面元素的CSS规则和属性,或影响整个文档的规则和属性全部面板顶部的相应按钮可以在两种模式之间切换,在模式下还可以修改 CSS属性,如图1-24所示。模式下,面板包括三个窗格：所选容的摘要窗格,显示文档中当前所选容的CSS属性；规则窗格,显示所选属性的位置；窗格,允许用户编辑、定义所选容的规则的 CSS属性。模式下, 面板包括两个窗格：所有规则窗格底部窗格显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。窗格可以编辑窗格中任一所选规则的 CSS属性。对窗格所作的任何更改都将立即

21、应用,用户在操作的同时便可预览效果。图1-24 面板包含了数据绑定、数据库和服务器行为,是制作网页数据库时的重要面板,如图1-25所示。面板可查看和管理 Dreamweaver站点中的文件,如图1-26所示。图1-25 面板 图1-26 面板中查看站点、文件或文件夹时,可以查看区域的大小,还可以展开或折叠面板。面板折叠时,它以文件列表的形式显示本地站点、远程站点或测试服务器的容。在展开时,它显示本地站点和远程站点或者显示本地站点和测试服务器。面板还可以显示本地站点的视觉站点地图。对于 Dreamweaver站点来说,用户还可以通过更改折叠面板中默认显示的视图来对面板进行自定义。1.5 Drea

22、mweaver CS6的参数设置本节介绍Dreamweaver CS6的参数设置。在Dreamweaver CS6过设置相关参数,可以改变操作环境,从而使其更加符合设计者的设计需要。常见的设置有预览设置设置外部编辑器编辑快捷键设置页面属性等,其他的参数设置和这些方法相同,用户可以根据需要自行设置。1.5.1 预览设置在设计过程中,用户需要随时在浏览器中打开设计的文档,以便查看其设计效果和及时进行更改和完善。Dreamweaver CS6提供了在设计过程中预览的功能,用户只需使用菜单命令或快捷键就可以在浏览器中打开设计中的文档。依次选择首选参数菜单命令,打开对话框,在分类列表框中选择在浏览器中预

23、览选项,右侧即出现相关界面,如图1-27所示。图1-27 对话框对话框中各选项的含义如下。：单击该按钮,可向列表中添加新的浏览器。单击该按钮,可删除列表中选择的浏览器。单击该按钮,弹出编辑浏览器对话框,从中可修改选定的浏览器参数,如图1-28所示。图1-28 默认：选中主浏览器或次浏览器复选框,可设定选择的浏览器是否为主浏览器。选项：使用临时文件预览复选框,可使用临时文件预览。将Internet Explorer设置为默认浏览器的快捷键为F12。在设计过程中,如果想预览页面效果,可选择命令或按快捷键F12。1.5.2 设置外部编辑器Dreamweaver CS6具有良好的外部程序接口,可以与各种页面元素相关的外部编辑器相连接,在设计过程