中文版Dreamweaver CC+Flash CC+Photoshop CC网页设计实战视频教程
上QQ阅读APP看书,第一时间看更新

1.5 设置首选参数

在Adobe Dreamweaver CC中,用户可以设置编码首选参数(如代码格式和颜色等)以满足自己的特定需求,本节将介绍常规参数、代码格式、代码颜色、复制/粘贴以及在浏览器中预览等首选参数的设置方法。

实战024 设置常规参数

实例位置:

素材位置:

视频位置:光盘\视频\第1章\实战024.mp4

实例介绍

在Adobe Dreamweaver CC中,“常规”首选项参数主要包括文档选项和编辑选项两个板块。

操作步骤

STEP 01 启动Dreamweaver CC,单击“编辑”|“首选项”命令,如图1-130所示。

图1-130 单击“首选项”命令

STEP 02 弹出“首选项”对话框,默认进入“常规”选项卡,如图1-131所示。

图1-131 弹出“首选项”对话框

STEP 03 在“编辑选项”选项区中,选中“允许多个连续的空格”复选框,如图1-132所示。

图1-132 选中“允许多个连续的空格”复选框

STEP 04 单击“应用”按钮,即可保存修改,如图1-133所示。

图1-133 单击“应用”按钮

知识扩展

“常规”选项卡中各主要选项的含义如下。

显示欢迎屏幕:在启动Dreamweaver时或者在没有打开任何文档时,显示Dreamweaver的欢迎屏幕。

启动时重新打开文档:打开在关闭Dreamweaver时处于打开状态的任何文档。如果未选择此选项,Dreamweaver会在启动时显示欢迎屏幕或者空白屏幕(具体取决于“显示欢迎屏幕”设置)。

打开只读文件时警告用户:在打开只读(已锁定的)文件时警告用户。可以选择取消锁定/取出文件、查看文件或取消。

启用相关文件:用于查看哪些文件与当前文档相关(如CSS或JavaScript文件)。Dreamweaver 在文档顶部为每个相关文件显示了一个按钮,单击该按钮可打开相应文件。

搜索动态相关文件:允许用户选择动态相关文件是自动还是在手动交互之后显示在“相关文件”工具栏中。用户还可以选择禁用搜索动态相关文件。

移动文件时更新链接:确定在移动、重命名或删除站点中的文档时所发生的操作。可以将该参数设置为总是自动更新链接、从不更新链接或提示执行更新。

插入对象时显示对话框:确定当使用“插入”面板或“插入”菜单插入图像、表格、Shockwave 影片和其他某些对象时,Dreamweaver 是否提示用户输入附加的信息。如果禁用该选项,则不出现对话框,用户必须使用“属性”检查器指定图像的源文件和表格中的行数等。对于鼠标经过图像和Fireworks HTML,当用户插入对象时总是出现一个对话框,而与该选项的设置无关。(若要暂时覆盖该设置,请在创建和插入对象时按住【Ctrl】键并单击)

允许双字节内联输入:使用户能够直接在“文档”窗口中输入双字节文本[如果用户正在使用适合于双字节文本(如日语字符)的开发环境或语言工具包]。如果取消选择该选项,将显示一个用于输入和转换双字节文本的文本输入窗口;文本被接受后显示在“文档”窗口中。

标题后切换到普通段落:指定在“设计”视图中于一个标题段落的结尾按下【Enter】时,将创建一个用p标签进行标记的新段落(标题段落是用 h1 或 h2 等标题标签进行标记的段落)。当禁用该选项时,在标题段落的结尾按下【Enter】键将创建一个用同一标题标签进行标记的新段落(允许用户在一行中键入多个标题,然后返回并填入详细信息)。

允许多个连续的空格:指定在“设计”视图中键入两个或更多的空格时将创建不中断的空格,这些空格在浏览器中显示为多个空格。(例如,用户可以在句子之间键入两个空格,就如同在打字机上一样。)该选项主要针对习惯于在字处理程序中键入的用户。当禁用该选项时,多个空格将被当作单个空格(因为浏览器将多个空格当作单个空格)。

使用<strong>和<em>代替<b>和<i>(U):指定Dreamweaver每当执行通常会应用b标签的操作时改为应用strong标签,以及每当执行通常会应用i标签的操作时改为应用em标签。此类操作包括在HTML模式下的文本属性检查器中单击“粗体”或“斜体”按钮,以及选择“格式”|“样式”|“粗体”或“格式”|“样式”|“斜体”。若要在用户的文档中使用b和i标签,则应该取消选择此选项。需要注意的是,WWW联合会不鼓励使用b和i标签;strong和em标签提供的语义信息比b和i标签更明确。

在<p>或<h1>-<h6>标签中放置可编辑区域时发出警告:指定在保存段落或标题标签内具有可编辑区域的Dreamweaver 模版时是否显示警告信息。该警告信息会通知你用户将无法在此区域中创建更多段落。默认情况下会启用此选项。

历史步骤最多次数:确定在“历史记录”面板中保留和显示的步骤数(默认值对于大多数用户来说应该足够使用)。如果超过了“历史记录”面板中的给定步骤数,则将丢弃最早的步骤。

拼写字典:列出可用的拼写字典。如果字典中包含多种方言或拼写惯例[如“英语”(美国)和“英语”(英国)],则方言单独列在“字典”弹出菜单中。

实战025 设置代码格式

实例位置:

素材位置:

视频位置:光盘\视频\第1章\实战025.mp4

实例介绍

用户可以通过指定格式设置首选参数(如缩进、行长度以及标签和属性名称的大小写)更改代码的外观。除了“覆盖大小写”选项之外,所有“代码格式”选项均只会自动应用到随后创建的新文档或新添加到文档中的部分。若要重新设置现有HTML文档的格式,可以打开文档,然后执行“命令”|“应用源格式”命令。

操作步骤

STEP 01 启动Dreamweaver CC,单击“编辑”|“首选项”命令,弹出“首选项”对话框,如图1-134所示。

STEP 02 在“分类”列表框中,单击“代码格式”标签,切换至“代码格式”选项卡,如图1-135所示。

图1-134 弹出“首选项”对话框

图1-135 单击“代码格式”标签

STEP 03 在“高级格式设置”选项区中,单击“CSS”按钮,弹出“CSS源格式选项”对话框,用户可以在此设置层叠样式表(CSS)代码,如图1-136所示。

图1-136“CSS源格式选项”对话框

STEP 04 在“高级格式设置”选项区中,单击“标签库”按钮,弹出“标签库编辑器”对话框,用户可以在此设置个别标签和属性的格式选项,如图1-137所示。

图1-137“标签库编辑器”对话框

知识扩展

“代码格式”选项卡中各主要选项的含义如下。

缩进:指示由Dreamweaver生成的代码是否应该缩进(根据在这些首选参数中指定的缩进规则)。需要注意的是,此对话框中的大多数缩进选项仅应用于由Dreamweaver 生成的代码,而不应用于用户键入的代码。若要使用户新键入的每一代码行的缩进级别都与上一行相同,应选择“查看”|“‘代码’视图”选项中的“自动缩进”选项。

大小(文本框和弹出菜单):指定Dreamweaver应使用多少个空格或制表符对它所生成的代码进行缩进。例如,如果在框中键入“3”并从弹出菜单中选择“制表符”,则由Dreamweaver 生成的代码对每个缩进级别使用3个制表符进行缩进。

制表符大小:用于确定每个制表符字符在“代码”视图中显示为多少个字符宽度。例如,如果“制表符大小”设置为4,则每个制表符在“代码”视图中显示为4个字符宽度的空白空间。此外,如果“缩进大小”设置为3个制表符,则对Dreamweaver所生成的代码按照每个缩进级别使用3个制表符来进行缩进,在“代码”视图中显示的缩进就是12个字符宽度的空白空间。需要注意的是,Dreamweaver使用空格或制表符两者之一进行缩进;在插入代码时它并不会将一串空格转换成制表符。

换行符类型:指定承载远程站点的远程服务器的类型(Windows、Macintosh 或 UNIX)。选择正确的换行符类型可以确保HTML源代码在远程服务器上能够正确显示。当用户使用只识别某些换行符的外部文本编辑器时,此设置也有用。例如,如果将“记事本”作为用户的外部编辑器,则使用“CR LF (Windows)”;如果将“SimpleText”作为外部编辑器,则使用“CR (Macintosh)”。需要注意的是,如果要连接的服务器使用 FTP,此选项只能应用于二进制传输模式;Dreamweaver 中的ASCII传输模式忽略此选项。如果使用ASCII模式下载文件,则Dreamweaver根据计算机的操作系统设置换行符;如果使用ASCII模式上传文件,则换行符都设置为“CR LF”。

默认标签大小写和默认属性大小写:控制标签和属性名称的大小写。这些选项应用于用户在“设计”视图中插入或编辑的标签和属性,但是它们不能应用于用户在“代码”视图中直接输入的标签和属性,也不能应用于打开的文档中的标签和属性(除非用户还选择了一个或全部两个“覆盖大小写”选项)。需要注意的是,这些首选参数仅适用于HTML页。对于 XHTML页,Dreamweaver 将忽略这些参数,因为大写标签和属性是无效的 XHTML。

覆盖大小写(标签和属性):用于指定是否在任何时候(包括当用户打开现有的HTML文档时)都强制使用用户指定的大小写选项。当用户选择其中的一个选项并且单击“确定”退出对话框时,当前文档中的所有标签或属性立即转换为指定的大小写,同样,从这时起打开的每个文档中的所有标签或属性也都转换为指定的大小写(直到用户再次取消对此选项的选择为止)。与使用“插入”面板插入的标签或属性一样,用户在“代码”视图和快速标签编辑器中键入的标签或属性也将转换为指定的大小写。例如,如果用户想让标签名称总是转换为小写,则在“默认标签大小写”选项中指定小写字母,然后选择“覆盖大小写: 标签”选项。于是当用户打开包含大写标签名称的文档时,Dreamweaver 将它们全部转换为小写。需要注意的是,旧版本HTML允许标签和属性的名称使用大写或小写,但是XHTML要求标签和属性的名称为小写。Web正在向XHTML方向发展,所以一般来讲,标签和属性名称最好使用小写。

TD标签(不在TD标签内包括换行符):解决当<td>标签之后或</td>标签之前紧跟有空白或换行符时,某些较早浏览器中发生的呈现问题。选择此选项后,即使标签库中的格式设置指示应在 <td> 之后或 </td> 之前插入换行符,Dreamweaver也不会在这些地方写入换行符。

高级格式设置:用于设置层叠样式表(CSS)代码以及标签库编辑器中个别标签和属性的格式选项。

实战026 设置代码颜色

实例位置:

素材位置:

视频位置:光盘\视频\第1章\实战026.mp4

实例介绍

使用“代码颜色”首选参数来指定常规类别的标签和代码元素(例如,与表单相关的标签或 JavaScript 标识符)的颜色,如图1-138所示。若要设置特定标签的颜色首选参数,可在标签库编辑器中编辑标签定义。

图1-138 设置“代码颜色”效果

操作步骤

STEP 01 启动Dreamweaver CC,单击“编辑”|“首选项”命令,弹出“首选项”对话框,如图1-139所示。

图1-139 弹出“首选项”对话框

STEP 02 在“分类”列表框中,单击“代码颜色”标签,切换至“代码颜色”选项卡,如图1-140所示。

图1-140 单击“代码颜色”标签

知识扩展

“代码颜色”选项卡中主要选项的含义如下。

文档类型:从“文档类型”列表中选择文档类型,对代码颜色首选参数进行的任何编辑都将影响此类型的所有文档。

默认背景:用于设置“代码”视图和代码检查器的默认背景颜色。

隐藏字符:用于设置隐藏字符的颜色。

实时代码背景:用于设置实时“代码”视图的背景颜色,此默认颜色为黄色。

实时代码更改:用于设置实时“代码”视图中发生更改的代码的高亮颜色。此默认颜色为粉红色。

只读背景:用于设置只读文本的背景颜色。

STEP 03 在“文档类型”列表框中,选择“文本”选项,如图1-141所示。

图1-141 选择“文本”选项

STEP 04 单击“编辑颜色方案”按钮,弹出“编辑文本的颜色方案”对话框,如图1-142所示。

图1-142 弹出“编辑文本的颜色方案”对话框

STEP 05 设置“文本颜色”为蓝色(#061AFB)、“背景颜色”为淡黄色(#F8FFB8),如图1-143所示。

图1-143 设置文本的颜色方案

STEP 06 单击“确定”按钮,返回“首选项”对话框,单击“应用”按钮,即可设置代码颜色,如图1-144所示。

图1-144 单击“应用”按钮

实战027 设置代码改写

实例位置:

素材位置:

视频位置:光盘\视频\第1章\实战027.mp4

实例介绍

使用“代码改写”首选参数可以指定在打开文档、复制或粘贴表单元素或在使用诸如属性检查器之类的工具输入属性值和URL时,Dreamweaver是否修改用户的代码,以及如何修改。在“代码”视图中编辑HTML或脚本时,这些首选参数不起作用。如果用户禁用改写选项,则在文档窗口中对它本应改写的HTML显示无效标记项。

操作步骤

STEP 01 启动Dreamweaver CC,单击“编辑”|“首选项”命令,弹出“首选项”对话框,在“分类”列表框中,单击“代码改写”标签,切换至“代码改写”选项卡,如图1-145所示。

图1-145 切换至“代码改写”选项卡

STEP 02 选中“删除多余的结束标签”复选框,用户即可在“在带有扩展的文件中”文本框中设置相应的结束标签,如图1-146所示。

图1-146 选中“删除多余的结束标签”复选框

知识扩展

“代码改写”选项卡中主要选项的含义如下。

修正非法嵌套标签或未结束标签:改写重叠标签。例如,<b><i>text</b></i> 改写为 <b><i>text</i></b>。如果缺少右引号或右括号,则此选项还将插入右引号或右括号。

粘贴时重命名表单项:确保表单对象不会具有重复的名称。默认情况下启用该选项。需要注意的是,与此首选参数对话框中的其他选项不同的是,此选项并不在打开文档时应用,只在复制和粘贴表单元素时应用。

删除多余的结束标签:删除不具有对应的开始标签的结束标签。

修正或删除标签时发出警告:显示Dreamweaver试图更正的、技术上无效的HTML的摘要。该摘要记录了问题的位置(使用行号和列号),以便用户可以找到更正内容并确保它按预期方式呈现。

从不改写代码(在带有扩展的文件中):允许用户防止Dreamweaver改写具有指定文件扩展名的文件中的代码。对于包含第三方标签的文件,此选项特别有用。

使用&将属性值中的 <、>、& 和 " 编码:确保用户使用Dreamweaver工具(如属性检查器)输入或编辑的属性值只包含合法的字符。默认情况下启用该选项。需要注意的是,此选项和下面的选项不会应用于用户在“代码”视图中键入的 URL。另外,它们不会使已经存在于文件中的代码发生更改。

不编码特殊字符:用于防止Dreamweaver将URL更改为仅使用合法字符。默认情况下启用该选项。

使用 &# 将 URL 中的特殊字符编码:确保用户使用Dreamweaver工具(如属性检查器)输入或编辑的URL只包含合法的字符。

使用 % 将 URL 中的特殊字符编码:与前一选项的操作方式相同,但是使用另一方法对特殊字符进行编码。这种编码方法(使用百分号)可能对较早版本的浏览器更为兼容,但对于某些语言中的字符并不适用。

实战028 设置在浏览器中预览

实例位置:

素材位置:

视频位置:光盘\视频\第1章\实战028.mp4

实例介绍

使用“在浏览器中预览”首选参数可以指定当前定义的主浏览器和候选浏览器以及它们的设置。

操作步骤

STEP 01 启动Dreamweaver CC,单击“编辑”|“首选项”命令,弹出“首选项”对话框,在“分类”列表框中,单击“在浏览器中预览”标签,切换至“在浏览器中预览”选项卡,如图1-147所示。

图1-147 切换至“在浏览器中预览”选项卡

STEP 02 在“浏览器”列表框中选择“Internet Explorer”选项,如图1-148所示。

图1-148 选择“Internet Explorer”选项

STEP 03 单击“编辑”按钮,弹出“编辑浏览器”对话框,选中“主浏览器”复选框,如图1-149所示。

图1-149 选中“主浏览器”复选框

STEP 04 单击“确定”按钮,即可将Internet Explorer设置为主浏览器,如图1-150所示,单击“应用”按钮保存设置即可。

图1-150 将Internet Explorer设置为主浏览器

知识扩展

若要设置“浏览器预览”的首选参数,可执行以下操作。

若要向列表添加浏览器,可单击加号(+)按钮,打开“添加浏览器”对话框,然后单击“确定”按钮,如图1-151所示。新浏览器的名称出现在列表中。

图1-151“添加浏览器”对话框

若要从列表中删除浏览器,可选择要删除的浏览器,然后单击减号(-)按钮,浏览器名称从列表中消失。

若要更改选定浏览器的设置,可单击“编辑”按钮,在“编辑浏览器”对话框中进行更改,然后单击“确定”按钮。选择“主浏览器”或“候选浏览器”选项,可指定所选浏览器是主浏览器还是候选浏览器。

按【F12】键将打开主浏览器,按【Ctrl+F12】键将打开候选浏览器。

选择“用临时文件预览”选项,可为预览和服务器调试创建临时副本。如果要直接更新文档,可撤销对此选项的选择。