Dreamweaver CS6 字、图像、超链接

《Dreamweaver CS6 字、图像、超链接》由会员分享，可在线阅读，更多相关《Dreamweaver CS6 字、图像、超链接（37页珍藏版）》请在金锄头文库上搜索。

1、lDreamweaver CS6 文字、图像、超链接第 1 页设置页面属性l外观（HTML）l背景图像：设置背景图像。单击“浏览”按钮，然后浏览到图像并将 其选中。或者，可以在“背景图像”框中输入背景图像的路径。l背景：设置页面的背景颜色。单击“背景颜色”框并从颜色选择器中 选择一种颜色。l文本：指定显示字体时使用的默认颜色。l链接：指定应用于链接文本的颜色。l已访问链接：指定应用于已访问链接的颜色。l活动链接：指定当鼠标（或指针）在链接上单击时应用的颜色。l左边距和右边距：指定页面左边距和右边距的大小。l上边距和下边距：指定页面上边距和下边距的大小。第 2 页l“标题/编码”属性l标题：指定

2、在“文档”窗口和大多数浏览器窗口的标题栏中出现的页 面标题。l文档类型：指定一种文档类型定义，使浏览器使用相应的方式加载网 页并显示。l编码：指定文档中字符所用的编码。（如果选择 Unicode (UTF-8) 作 为文档编码，则不需要实体编码，因为 UTF-8 可以安全地表示所有字 符）；一般使用默认的Unicode编码，以中文为主的网页也可以 “简 体中文(GB2312）”。 第 3 页l“跟踪图像”属性l可以将设计草图设置成跟踪图像，铺在编辑的网页下面作为参考图， 用于引导网页的设计。l跟踪图像：用于设置跟踪图像文件的路径信息，单击右侧的“浏览” 按钮，可以在“选择图像源文件”对话框中直

3、接选择图像文件。l透明度：根据实际情况调整跟踪图像的透明度。第 4 页文本与文档l一、添加文本l1、输入文本l 打开文档，在文档中单击鼠标左键，将光标置于其中，然后在光标 后输入。l2、段落与换行l段落：在文档中输入文本时，直接按“Enter”键，可以形成一个段落l换行：按“Shift”+“Enter”键或选择菜单命令“插入 ”/“HTML”/“特殊字符”/“换行符”。l3、复制文本l 在外部复制文本，然后在Dreamweaver文档窗口中定位插入点，选 择“粘贴”命令。第 5 页l4、选择性粘贴l 要复制网页或Word文档中的内容到Dreamweaver中进行编辑，若使 用“粘贴”功能会将源

4、文件中的文本、图片连同格式信息一同复制。l 如果仅复制纯文本或带部分样式的文本，可选“选择性粘贴”命令 ，打开“选择性粘贴”对话框。l4个单选的作用：l仅文本：所有格式设置（包括分行和段落）都将被删除。l带结构的文本：粘贴文本并保留结构，但不保留基本格式设置（保留 段落、列表和表格的结构，但不保留粗体、斜体和其他格式设置）。l带结构的文本以及基本格式：粘贴结构化并带简单HTML格式的文本， 粘贴的默认格式。l带结构的文本以及全部格式：可以粘贴文本并保留所有结构、HTML格 式设置和CSS样式。第 6 页 l5、在属性检查器中设置HTML 格式文本属性l 可以使用文本属性检查器应用 HTML 格

5、式或层叠样式表 (CSS) 格 式。应用 HTML 格式时，Dreamweaver 会将属性添加到页面正文的 HTML 代码中。应用 CSS 格式时，Dreamweaver 会将属性写入文档头 或单独的样式表中。l如果属性检查器没有打开，请将其打开（“窗口”“属性”），然 后单击“HTML”按钮。l选择要设置格式的文本。l设置要应用于所选文本的选项：第 7 页 l格式：设置所选文本的段落样式。“段落”应用 标签的默认格式 ，“标题 1”添加H1 标签，等等。lID：为所选内容分配一个 ID。l类：显示当前应用于所选文本的类样式。如果没有对所选内容应用过 任何样式，则弹出菜单显示“无 CSS 样

6、式”。如果已对所选内容应用 了多个样式，则该菜单是空的。l选择要应用于所选内容的样式。l选择“无”删除当前所选样式。l选择“重命名”以重命名该样式。l选择“附加样式表”以打开一个允许您向页面附加外部样式表的对话 框。l链接：创建所选文本的超文本链接。单击文件夹图标浏览到站点中的 文件；键入 URL；将“指向文件”图标拖到“文件”面板中的文件； 或将文件从“文件”面板拖到框中。第 8 页 l二、输入连续空格l默认状态下，Dreamweaver只允许输入一个空格，需要通过设置或特定 操作才能输入连续空格。l1、设置“首选参数”对话框l选择“编辑”“首选参数”菜单命令，在“首选参数”对话框中选中 “

7、允许多个连续的空格”复选框。l2、直接插入l选择“插入HTML特殊字符 不换行空格”命令，或按 。l将输入法转换到中文的全角状态下。第 9 页 l三、插入特殊文本l1、插入日期l在文档窗口中，将插入点放置在想要插入对象的位置。l启动“插入日期”对话框。l选择“插入”面板的“常用”选项卡，单击“日期”按钮。l选择“插入日期 ”命令。l选择相应的日期和时间格式，若选中“储存时自动更新”复选框， 每一次存储文件都会自动更新文档中插入的日期。单击“确定”按 钮。l2、插入换行符l选择 “插入”面板的“文本”选项卡，单击“字符”按钮，选择“换 行符”按钮。l按。l选择“插入HTML特殊字符换行符”命令。

8、第 10 页 l3、插入特殊字符l选择 “插入”面板的“文本”选项卡，单击“字符”按钮，在弹出菜 单中就可以找到各种特殊字符l4、插入水平线l 水平线在网页文档中经常用到，它主要用于分隔文档内容，是文 档结构清晰明了，合理使用水平线可以获得非常好的效果。l选择 “插入”面板的“常用”选项卡，点击水平线 或选择“插入 ”“HTML”“水平线”。l可以在属性检查器中对水平线进行样式的设置。l“ID”文本框：可用于为水平线指定 ID。l宽和高：以像素为单位或以页面大小百分比的形式指定水平线的宽度 和高度。第 11 页 l对齐：指定水平线的对齐方式（默认、左对齐、居中对齐或右对齐） 。仅当水平线的宽度

9、小于浏览器窗口的宽度时，该设置才适用。l阴影：指定绘制水平线时是否带阴影。取消选择此选项将使用纯色绘 制水平线。第 12 页 图像l网页中常用的图像格式有3种，即GIF、JPEG和PNG。目前GIF和JPEG文件格式的 支持最好，大多数浏览器都可以查看这两种格式的文件。由于PNG文件具有较 大的灵活性且文件较小，所以它对于几乎任何类型的网页图像都是最合适的。l一、GIF图像格式l即图像交换格式l特点：l数据量小,最多使用256种颜色,可以透明背景显示.l可以制作动态图像，将数张静态图像作为动画串联起来，转换成一张动画文件 。l可以将图像以交错的方式显示在网页中。（交错显示：当图像未下载完成时，

10、 浏览器先以马赛克的形式将图像逐步显示）l使用无损压缩方案，图像不会有细节上的损失。l通性好，即适合任何一个浏览器。第 13 页 l用途:l适合显示色调不连续或具有大面积单一颜色的图像，如导航条、按钮、图标、 徽标或其他具有统一色彩和色调的图像。l二、JPEG图像格式l即联合图像专家组，是一种图像压缩格式，文件格式是用于摄影或连续色调图 像的高级格式，这是因为JPEG文件可以包含数百万种颜色。随着 JPEG 文件品 质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩 JPEG 文 件在图像品质和文件大小之间达到良好的平衡。l有一定的失真度，但一般肉眼分辨不出与GIF的区别。l特点：l

11、JPEG只有GIF文件大小的1/4。l不支持透明图、动态图。l用途：l通常用于显示照片等颜色丰富的精美图像。第 14 页 l三、PNG图像格式l是一种替代 GIF 格式的无专利权限制的格式，它包括对索引色、灰度 、真彩色图像以及 alpha 通道透明度的支持。PNG 是 Adobe Fireworks 固有的文件格式。PNG 文件可保留所有原始层、矢量、颜 色和效果信息（例如阴影），并且在任何时候所有元素都是可以完全 编辑的。文件必须具有 .png 文件扩展名才能被 Dreamweaver 识别为 PNG 文件。l特点：l像GIF一样无损压缩，像JPEG一样拥有百万种颜色。l具有隔行扫描的特性

12、，比其他格式都要快。l用途：l常用于制作网页效果图。第 15 页 l一、插入图像l将图像插入 Dreamweaver 文档时，HTML 源代码中会生成对该图像文 件的引用。为了确保此引用的正确性，该图像文件必须位于当前站点 中。如果图像文件不在当前站点中，Dreamweaver 会询问是否要将此 文件复制到当前站点中。l1、通过“选择图像源文件”对话框l在“文档”窗口中，将插入点放置在要显示图像的地方，然后执行 下列操作之一：l在“插入”面板的“常用”类别中，单击“图像”图标。l选择菜单“插入”“图像”。l选择“文件系统”以选择一个图像文件。l单击“确定”。将显示“图像标签辅助功能属性”对话框

13、l在“替代文本”和“详细描述”文本框中输入值，然后单击“确定 ”。第 16 页 l在“替代文本”框中，为图像输入一个名称或一段简短描述。（在 50 个字符左右）。l在“详细说明”框中，输入当用户单击图像时所显示的文件的位置， 或者单击文件夹图标以浏览到该文件。该文本框提供指向与图像相关 （或提供有关图像的详细信息）的文件的链接。l注意：l可以在其中一个或两个文本框中输入信息。l当单击“取消”时，该图像将出现在文档中，但 Dreamweaver 不会将 它与辅助功能标签或属性相关联。第 17 页 l二、设置图像属性l图像的“属性检查器”可以显示图像当前属性，也可以设置各项属性 。l宽和高：图像的

14、宽度和高度，以像素表示。在页面中插入图像时， Dreamweaver 会自动用图像的原始尺寸更新这些文本框。l如果设置的“宽”和“高”值与图像的实际宽度和高度不相符，则该 图像在浏览器中可能不会正确显示。（若要恢复原始值，请单击用于 输入新值的“宽”和“高”文本框右侧的“重设大小”按钮。）l注意：可以更改这些值来缩放该图像实例的显示大小，但这不会缩短 下载时间，因为浏览器先下载所有图像数据再缩放图像。若要缩短下 载时间并确保所有图像实例以相同大小显示，需要使用图像编辑应用 程序缩放图像。第 18 页 l源文件：指定图像的源文件。单击文件夹图标以浏览到源文件，或者 键入路径。l链接：指定图像的超

15、链接。将“指向文件”图标拖动到“文件”面板 中的某个文件，单击文件夹图标浏览到站点上的某个文档，或手动键 入 URL。l替换：指定在只显示文本的浏览器或已设置为手动下载图像的浏览器 中代替图像显示的替代文本。对于使用语音合成器（用于只显示文本 的浏览器）的有视觉障碍的用户，将大声读出该文本。在某些浏览器 中，当鼠标指针滑过图像时也会显示该文本。l地图：用于创建客户端图像地图。l编辑：启动您在“外部编辑器”首选参数中指定的图像编辑器并打开 选定的图像。第 19 页 l三、图像占位符l如果在制作网页时，需要的图像还没准备好，可以临时插入图像占位 符来代替索要插入的图片位置，等有合适的图像后，再重新

16、定义图像 文件。l1、插入图像占位符l将插入点放置到插入占位符的位置。l选择“插入”“图像对象”“图像占位符”，或在“插入/常用” 面板中单击“图像”按钮组中的“图像占位符”按钮。l在“图像占位符”对话框中设置参数。l名称（可选）：输入要作为图像占位符的标签显示的文本。如果不想 显示标签，则保留该文本框为空。名称必须以字母开头，并且只能包 含字母和数字。l宽度和高度（必需）：键入设置图像大小的数值（以像素表示）。第 20 页 l替代文本（可选）：为使用只显示文本的浏览器的访问者输入描述该 图像的文本。l2、替换图像占位符l 在发布站点前，应用图像文件替换所有的占位符，新图像设置为与 占位符相同大小。l双击“图像占位符”，或单击“图像占位符”将其选中，在“属性检 查器”中单击“源文件”旁的文件夹图标。l在“选择图像源文件”对话框中，选择图像，然后单击“确定”。l3、设置图像占位符属性l使用“属性检查器”为占位符图像设置名称、宽度、高度、图像源文 件、替代文本说明、对齐方式和颜色第 21 页