中文版DreamweaverCS6网页设计教程IT68文库Word格式文档下载.docx
《中文版DreamweaverCS6网页设计教程IT68文库Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《中文版DreamweaverCS6网页设计教程IT68文库Word格式文档下载.docx（36页珍藏版）》请在冰豆网上搜索。
使用更新的"
功能可在发布前测试页面。
现已使用最新版的WebKit转换引擎,能够提供绝佳的HTML5支持。
8.更新的多屏幕预览面板
可利用更新的"
面板检查智能手机、平板电脑和台式机所建立项目的显示画面。
该增强型面板现在能够帮助用户检查HTML5的容呈现。
9.浏览器兼容性检查
DreamweaverCS6中新的浏览器兼容性检查功能可生成报告<
见图1-1>
指出各种浏览器中与CSS相关的呈现问题。
在代码视图中,这些问题以绿色下划线来标记,如图1-2所示,因此可以准确地知道产生问题的代码位置。
确定问题之后,如果知道解决方案,则可以快速解决问题；
如果需要了解详细信息,则可以访问AdobeCSSAdvisor。
图1-1浏览器兼容性检查报告
图1-2绿色下划线标记
10.AdobeCSSAdvisor
AdobeCSSAdvisor包含有关最新的CSS问题信息,在浏览器兼容性检查过程中可通过Dreamweaver用户界面直接访问该。
CSSAdvisor不止是一个论坛、一个WiKi页面或一个讨论组,它可以方便地为现有容提供建议和改进意见,或者方便地添加新的问题,以使整个社区都能够从中受益。
11.CSS布局
Dreamweaver提供了一组预先设计的CSS布局,可以帮助用户快速设计好页面并开始运行,并且在代码中提供了丰富的联注释以帮助用户了解CSS页面布局,如图1-3所示。
Web上的大多数站点设计都可以被归类为一列、两列或三列式布局,而且每种布局都包含许多附加元素<
例如标题和脚注>
Dreamweaver提供了一个包含基本布局设计的综合性列表,用户可以自定义这些设计以满足自己的需要。
图1-3CSS布局
12.管理CSS
借助管理CSS功能,可以轻松地在文档之间、文档标题与外部表之间、外部CSS文件之间以及更多位置之间移动CSS规则。
此外,还可以将联CSS转换为CSS规则,并且只需通过拖放操作即可将它们放置在所需位置。
13.AdobeDeviceCentral
AdobeDeviceCentral与Dreamweaver相集成,并且存在于整个CreativeSuite3软件产品系列中,使用它可以快速访问每个设备的基本技术规,还可以收缩HTML页面的文本和图像,以便使显示效果与设备上出现的完全一样,从而简化了移动容的创建过程。
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版。
1.8GB以上可用空间。
DVD-ROM驱动器。
1.3.2安装DreamweaverCS6
安装DreamweaverCS6时,首先关闭系统中当前正在运行的所有应用程序,包括其他Adobe应用程序,然后执行下列操作之一。
●将安装光盘插入驱动器中,然后按照屏幕说明进行操作。
注意：
如果安装程序没有自动启动,请双击光盘根目录中的Setup.exe文件<
Windows>
或Setup文件<
MacOS>
●如果用户是从网上下载的软件,请打开文件夹并双击Setup.exe文件<
或Setup文件<
然后按屏幕说明进行操作。
下面是安装过程简介。
<
1>
在"
Adobe软件许可协议"
界面<
见图
1-4>
中单击"
接受"
按钮,进入安装位置界面。
图1-4"
界面
2>
在安装位置界面<
1-5>
安装"
按钮,进入"
界面,如图1-6所示。
图1-5安装位置界面
图1-6"
3>
进入"
安装完成"
界面后,单击"
关闭"
按钮退出安装,如图1-7所示。
图1-7"
1.3.3卸载DreamweaverCS6
若要卸载DreamweaverCS6软件,首先关闭系统中当前正在运行的所有应用程序,包括其他Adobe应用程序,然后执行下列操作之一。
●在WindowsXP系统中,打开Windows"
控制面板"
窗口,然后双击"
添加或删除程序"
图标,打开"
窗口。
选择要卸载的产品,单击"
更改/删除"
按钮,然后按屏幕说明进行操作。
●在WindowsVista系统中,打开Windows"
程序和功能"
图标,在弹出的界面中选择要卸载的产品,单击"
●在Mac系统中,请勿通过将应用程序拖入废纸篓的方式进行卸载,应安全卸载软件,即选择"
应用程序"
|"
实用程序"
Adobe安装程序"
命令中的产品安装程序,以管理员身份通过身份验证,选择"
删除组件"
命令,然后按屏幕说明进行操作。
1.3.4启动与退出DreamweaverCS6
DreamweaverC6的启动与退出方式有很多种,下面详细介绍。
1.DreamweaverCS6的启动
DreamweaverCS6启动方式有许多种,但一般用得较多的是以下两种。
从"
开始"
菜单中启动
单击Windows桌面左下角的"
按钮,在"
程序"
子菜单中选择"
AdobeDreamweaverCS6"
命令进行启动。
用快捷方式启动
在桌面上单击DreamweaverCS6的快捷启动图标,即可启动。
DreamweaverCS6的启动界面如图1-8所示。
图1-8启动界面
首次启动DreamweaverCS6后的主窗口界面如图1-9所示。
如果不想每次启动时都显示该界面,则选中"
不再显示"
复选框即可。
图1-9DreamweaverCS6主窗口界面
2.DreamweaverCS6的退出
退出DreamweaverCS6的方式有很多种,但平时用得最多的不外乎如下几种。
●在DreamweaverCS6主窗口中的"
文件"
菜单中选择"
退出"
命令。
●在DreamweaverCS6被激活状态下,直接按Alt+F4组合键。
●单击DreamweaverCS6主窗口左上角的控制菜单图标,从弹出的菜单中选择"
命令,或者直接双击控制菜单图标。
●单击DreamweaverCS6主窗口右上角的"
按钮。
1.4DreamweaverCS6的工作窗口
DreamweaverCS6的工作窗口主要包括功能菜单、插入栏、文档工具栏、文档窗口、状态栏、属性面板、功能面板等,如图1-10所示。
合理使用这几个板块的相关功能,可以使设计工作成为一个高效、便捷的过程。
图1-10DreamweaverCS6的工作窗口
1.4.1功能菜单
所谓功能菜单,就是一些能够实现一定功能的菜单命令。
DreamweaverCS6拥有"
、"
编辑"
查看"
插入"
修改"
格式"
命令"
站点"
窗口"
帮助"
等10个菜单分类,单击这些菜单可以打开其子菜单,如图1-11所示。
DreamweaverCS6的菜单功能极其丰富,几乎涵盖了所有的功能操作。
图1-11"
菜单
1.4.2插入栏
插入栏"
包含用于创建和插入对象<
如表格、AP元素和图像>
的按钮。
当鼠标指针移动到一个按钮上时,会出现一个工具提示,其中含有该按钮的名称。
这些按钮被组织到若干选项卡中,用户可以单击"
顶部的相应选项卡进行切换。
当启动DreamweaverCS6时,系统会默认打开用户上次使用的选项卡。
某些选项卡具有带弹出菜单的按钮。
从弹出菜单中选择一个命令时,该命令将成为该按钮的默认操作。
例如,如果从"
图像"
按钮的弹出菜单中选择"
图像占位符"
命令,下次单击"
按钮时,DreamweaverCS6会自插入一个图像占位符。
每当从按钮的弹出菜单中选择一个新命令时,该按钮的默认操作都会改变。
按以下选项卡进行组织。
1."
常用"
选项卡
选项卡包含了最常用的对象,最主要的功能是插入各项最常用的基本网页设计及排版组件,如图像按钮、表格按钮、插入媒体等,如图1-12所示。
图1-12"
2."
布局"
选项卡
选项卡包含了表格按钮、DIV标签等标签,如图1-13所示,可以帮助用户快速地在网页中绘制不同的表格和框架。
这与以往版本的Dreamweaver有很大的区别。
图1-13"
3."
表单"
选项卡包含了创建表单域和插入表单元素的按钮,如图1-14所示。
表单是网页设计中最重要却又最难完全掌握的部分,使用表单可以收集访问者的信息,如订单、搜索接口等。
图1-14"
4."
数据"
选项卡可以插入Spry数据对象和其他动态元素,例如记录集、重复区域以及插入记录表单和更新记录表单,如图1-15所示。
图1-15"
5.Spry选项卡
Spry选项卡包含一些用于构建Spry页面的按钮,包括Spry数据对象和构件,如图1-16所示。
图1-16Spry选项卡
6.jQueryMobile选项卡
jQueryMobile选项卡包含jQueryMobile的页面、文本输入、按钮等元素,如图1-17所示。
图1-17jQueryMobile选项卡
7.InContextEditing选项卡
InContextEditing选项卡包含可编辑区域和创建重复区域的容,如图1-18所示。
图1-18InContextEditing选项卡
8."
文本"
选项卡包含了多种特定的字符,如商标、引号等特殊字符,这些字符也可以以HTML的方式插入网页之中,如图1-19所示。
图1-19"
9."
收藏夹"
选项卡用于将"
中最常用的按钮分组或将其组织到某一公共位置,如图1-20所示。
图1-20"
1.4.3文档工具栏
文档工具栏"
中包含一些按钮,使用这些按钮可以在"
代码"
视图、"
设计"
视图以及"
拆分"
视图间快速切换。
文档工具栏还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项,如图1-21所示。
图1-21文档工具栏
●"
显示代码视图"
按钮：
只在"
文档窗口"
中显示"
视图。
显示代码视图和设计视图"
将"
文档"
窗口拆分为"
视图和"
当选择了这种组合视图时,"
左侧显示"
视图,右侧显示"
显示设计视图"
如果处理的是XML、JavaScript、Java、CSS或其他基于代码的文件类型,则不能在"
视图中查看文件,而且"
按钮将会变暗。
多屏幕"
可以根据用户的需要选择屏幕的尺寸、大小和方向等。
在浏览器中预览/调试"
允许用户在浏览器中预览或调试文档,并可从弹出菜单中选择一个浏览器。
文件管理"
显示"
弹出菜单。
W3C验证"
按扭：
包括验证当前文档、验证实时文档和设置W3C的功能,用于验证当前文档或选定的标签。
检查浏览器兼容性"
用于检查用户的CSS是否对于各种浏览器均兼容,包括检查浏览器的兼容性、显示浏览器出现的问题、报告浏览器呈现的问题等。
可视化助理"
用户可以使用各种可视化助理来设计页面。
刷新设计视图"
在"
视图中对文档进行更改后,单击此按钮刷新文档的"
视图,因为只有在执行某些操作<
如保存文件或单击该按钮>
之后,在"
代码"
视图中所作的更改才会自动显示在"
视图中。
刷新过程也依赖于DOM<
文档对象模型>
的代码功能,如选择代码块的开始标签或结束标签的能力。
标题"
文本框：
允许为文档输入一个标题,该标题将显示在浏览器的标题栏中。
如果文档已经有标题了,则该标题将显示在该区域中。
1.4.4文档窗口
用于显示当前文档,可以选择下列任一视图。
●设计视图：
一个用于可视化页面布局、可视化编辑和快速进行应用程序开发的设计环境。
在该视图中,Dreamweaver显示文档的完全可编辑的可视化表示形式,类似于在浏览器中查看页面时看到的容。
用户可以配置"
视图以在处理文档时显示动态容。
●代码视图：
一个用于编写和编辑HTML、JavaScript、服务器语言代码<
如PHP或ColdFusion标记语言<
CFML>
>
以及任何其他类型代码的手工编码环境。
●拆分视图：
使用户可以在一个窗口中同时看到同一文档的"
当"
有标题栏时,标题栏显示页面标题,并在括号中显示文件的路径和文件名。
如果用户对文档作了更改但尚未保存,则Dreamweaver会在文件名后显示一个星号。
在集成工作区布局<
仅适用于Windows系统>
中处于最大化状态时,它没有标题栏,页面标题以及文件的路径和文件名则显示在主工作区窗口的标题栏中。
并且"
顶部会出现选项卡,上面显示了所有打开文档的文件名。
若要切换到某个文档,则可单击它的选项卡。
1.4.5状态栏
底部的"
状态栏"
提供与正在创建的文档有关的其他信息,如图1-22所示。
图1-22状态栏
标签选择器"
图标：
显示环绕当前选定容的标签的层次结构。
单击该层次结构中的任何标签可以选择该标签及其全部容。
单击"
图标可以选择文档的整个正文。
若要在标签选择器中设置某个标签的class或id属性,则可右击<
适用于Windows系统>
或按住Ctrl键并单击<
适用于Macintosh系统>
该标签,然后从弹出的快捷菜单中选择一个"
类"
或ID。
选取工具"
用于启用或禁用手形工具。
手形工具"
用于在"
窗口中单击并拖动文档。
缩放工具和设置缩放比率"
下拉列表框：
可以为文档设置缩放比率。
窗口大小"
用于将"
的大小调整到预定义或自定义的尺寸。
文档大小和下载时间"
显示页面<
包括所有相关文件,如图像和其他媒体文件>
的预计文档大小和预计下载时间。
1.4.6功能面板
DreamweaverCS6的功能面板位于文档窗口边缘。
常见的功能面板包括"
属性"
面板、"
CSS样式"
面板等。
面板
面板并不是将所有的对象和属性都加载到面板上,而是根据用户选择的不同对象来动态地显示对象的属性。
制作网页时,可以根据需要随时打开或关闭"
面板,或者通过拖动属性面板的标题栏将其移到合适的位置。
选定页面元素后系统会显示相应的"
面板<
见图1-23>
例如,图像"
面板、表格"
面板、框架"
面板、Flash影片"
面板、表单元素"
图1-23"
使用"
面板可以跟踪影响当前所选页面元素的CSS规则和属性<
当前"
模式>
或影响整个文档的规则和属性<
全部"
面板顶部的相应按钮可以在两种模式之间切换,在"
模式下还可以修改CSS属性,如图1-24所示。
模式下,"
面板包括三个窗格：
所选容的摘要"
窗格,显示文档中当前所选容的CSS属性；
规则"
窗格,显示所选属性的位置<
或所选标签的层叠规则>
；
窗格,允许用户编辑、定义所选容的规则的CSS属性。
模式下,"
面板包括两个窗格：
所有规则"
窗格<
顶部>
底部>
窗格显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。
窗格可以编辑"
窗格中任一所选规则的CSS属性。
对"
窗格所作的任何更改都将立即应用,用户在操作的同时便可预览效果。
图1-24"
面板包含了数据绑定、数据库和服务器行为,是制作网页数据库时的重要面板,如图1-25所示。
面板可查看和管理Dreamweaver站点中的文件,如图1-26所示。
图1-25"
面板
图1-26"
面板中查看站点、文件或文件夹时,可以查看区域的大小,还可以展开或折叠"
面板。
面板折叠时,它以文件列表的形式显示本地站点、远程站点或测试服务器的容。
在展开时,它显示本地站点和远程站点或者显示本地站点和测试服务器。
面板还可以显示本地站点的视觉站点地图。
对于Dreamweaver站点来说,用户还可以通过更改折叠面板中默认显示的视图<
本地站点或远程站点视图>
来对"
面板进行自定义。
1.5DreamweaverCS6的参数设置
本节介绍DreamweaverCS6的参数设置。
在DreamweaverCS6过设置相关参数,可以改变操作环境,从而使其更加符合设计者的设计需要。
常见的设置有"
预览设置"
设置外部编辑器"
编辑快捷键"
设置页面属性"
等,其他的参数设置和这些方法相同,用户可以根据需要自行设置。
1.5.1预览设置
在设计过程中,用户需要随时在浏览器中打开设计的文档,以便查看其设计效果和及时进行更改和完善。
DreamweaverCS6提供了在设计过程中预览的功能,用户只需使用菜单命令或快捷键就可以在浏览器中打开设计中的文档。
依次选择"
首选参数"
菜单命令,打开"
对话框,在"
分类"
列表框中选择"
在浏览器中预览"
选项,右侧即出现相关界面,如图1-27所示。
图1-27"
对话框
对话框中各选项的含义如下。
●：
单击该按钮,可向列表中添加新的浏览器。
单击该按钮,可删除列表中选择的浏览器。
单击该按钮,弹出"
编辑浏览器"
对话框,从中可修改选定的浏览器参数,如图1-28所示。
图1-28"
●默认：
选中"
主浏览器"
或"
次浏览器"
复选框,可设定选择的浏览器是否为主浏览器。
●选项：
使用临时文件预览"
复选框,可使用临时文件预览。
将InternetExplorer<
简称IE>
设置为默认浏览器的快捷键为F12。
在设计过程中,如果想预览页面效果,可选择"
命令或按快捷键F12。
1.5.2设置外部编辑器
DreamweaverCS6具有良好的外部程序接口,可以与各种页面元素相关的外部编辑器相连接,在设计过程
升级会员 