Dreamweaver-CS6-字、图像、超链接课件.ppt

上传人(卖家):晟晟文业 文档编号:4741800 上传时间:2023-01-06 格式:PPT 页数:37 大小:1.98MB
下载 相关 举报
Dreamweaver-CS6-字、图像、超链接课件.ppt_第1页
第1页 / 共37页
Dreamweaver-CS6-字、图像、超链接课件.ppt_第2页
第2页 / 共37页
Dreamweaver-CS6-字、图像、超链接课件.ppt_第3页
第3页 / 共37页
Dreamweaver-CS6-字、图像、超链接课件.ppt_第4页
第4页 / 共37页
Dreamweaver-CS6-字、图像、超链接课件.ppt_第5页
第5页 / 共37页
点击查看更多>>
资源描述

1、lDreamweaver CS6Dreamweaver CS6 文字、图像、超链接文字、图像、超链接第 0 页ppt课件设置页面属性设置页面属性l外观(外观(HTMLHTML)l背景图像:设置背景图像。单击背景图像:设置背景图像。单击“浏览浏览”按钮,然后浏览到图像并将按钮,然后浏览到图像并将其选中。或者,可以在其选中。或者,可以在“背景图像背景图像”框中输入背景图像的路径。框中输入背景图像的路径。l背景:设置页面的背景颜色。单击背景:设置页面的背景颜色。单击“背景颜色背景颜色”框并从颜色选择器中框并从颜色选择器中选择一种颜色。选择一种颜色。l文本:指定显示字体时使用的默认颜色。文本:指定显示

2、字体时使用的默认颜色。l链接:指定应用于链接文本的颜色。链接:指定应用于链接文本的颜色。l已访问链接:指定应用于已访问链接的颜色。已访问链接:指定应用于已访问链接的颜色。l活动链接:指定当鼠标(或指针)在链接上单击时应用的颜色。活动链接:指定当鼠标(或指针)在链接上单击时应用的颜色。l左边距和右边距:指定页面左边距和右边距的大小。左边距和右边距:指定页面左边距和右边距的大小。l上边距和下边距:指定页面上边距和下边距的大小。上边距和下边距:指定页面上边距和下边距的大小。第 1 页ppt课件l“标题标题/编码编码”属性属性l标题:指定在标题:指定在“文档文档”窗口和大多数浏览器窗口的标题栏中出现的

3、页窗口和大多数浏览器窗口的标题栏中出现的页面标题。面标题。l文档类型:指定一种文档类型定义,使浏览器使用相应的方式加载网文档类型:指定一种文档类型定义,使浏览器使用相应的方式加载网页并显示。页并显示。l编码:指定文档中字符所用的编码。(如果选择编码:指定文档中字符所用的编码。(如果选择 Unicode(UTF-8)Unicode(UTF-8)作作为文档编码,则不需要实体编码,因为为文档编码,则不需要实体编码,因为 UTF-8 UTF-8 可以安全地表示所有字可以安全地表示所有字符);一般使用默认的符);一般使用默认的UnicodeUnicode编码,以中文为主的网页也可以编码,以中文为主的网页

4、也可以“简简体中文体中文(GB2312(GB2312)”。第 2 页ppt课件l“跟踪图像跟踪图像”属性属性l可以将设计草图设置成跟踪图像,铺在编辑的网页下面作为参考图,可以将设计草图设置成跟踪图像,铺在编辑的网页下面作为参考图,用于引导网页的设计。用于引导网页的设计。l跟踪图像:用于设置跟踪图像文件的路径信息,单击右侧的跟踪图像:用于设置跟踪图像文件的路径信息,单击右侧的“浏览浏览”按钮,可以在按钮,可以在“选择图像源文件选择图像源文件”对话框中直接选择图像文件。对话框中直接选择图像文件。l透明度:根据实际情况调整跟踪图像的透明度。透明度:根据实际情况调整跟踪图像的透明度。第 3 页ppt课

5、件文本与文档文本与文档l一、添加文本一、添加文本l1 1、输入文本、输入文本l 打开文档,在文档中单击鼠标左键,将光标置于其中,然后在光标打开文档,在文档中单击鼠标左键,将光标置于其中,然后在光标后输入。后输入。l2 2、段落与换行、段落与换行l段落:在文档中输入文本时,直接按段落:在文档中输入文本时,直接按“Enter”Enter”键,可以形成一个段落键,可以形成一个段落l换行:按换行:按“Shift”+“Enter”Shift”+“Enter”键或选择菜单命令键或选择菜单命令“插入插入”/“HTML”/“/“HTML”/“特殊字符特殊字符”/“/“换行符换行符”。l3 3、复制文本、复制文

6、本l 在外部复制文本,然后在在外部复制文本,然后在DreamweaverDreamweaver文档窗口中定位插入点,选文档窗口中定位插入点,选择择“粘贴粘贴”命令。命令。第 4 页ppt课件l4 4、选择性粘贴、选择性粘贴l 要复制网页或要复制网页或WordWord文档中的内容到文档中的内容到DreamweaverDreamweaver中进行编辑,若使中进行编辑,若使用用“粘贴粘贴”功能会将源文件中的文本、图片连同格式信息一同复制。功能会将源文件中的文本、图片连同格式信息一同复制。l 如果仅复制纯文本或带部分样式的文本,可选如果仅复制纯文本或带部分样式的文本,可选“选择性粘贴选择性粘贴”命令命

7、令,打开,打开“选择性粘贴选择性粘贴”对话框。对话框。l4 4个单选的作用:个单选的作用:l仅文本:所有格式设置(包括分行和段落)都将被删除。仅文本:所有格式设置(包括分行和段落)都将被删除。l带结构的文本:粘贴文本并保留结构,但不保留基本格式设置(保留带结构的文本:粘贴文本并保留结构,但不保留基本格式设置(保留段落、列表和表格的结构,但不保留粗体、斜体和其他格式设置)。段落、列表和表格的结构,但不保留粗体、斜体和其他格式设置)。l带结构的文本以及基本格式:粘贴结构化并带简单带结构的文本以及基本格式:粘贴结构化并带简单HTMLHTML格式的文本,格式的文本,粘贴的默认格式。粘贴的默认格式。l带

8、结构的文本以及全部格式:可以粘贴文本并保留所有结构、带结构的文本以及全部格式:可以粘贴文本并保留所有结构、HTMLHTML格格式设置和式设置和CSSCSS样式。样式。第 5 页ppt课件l5 5、在属性检查器中设置、在属性检查器中设置HTML HTML 格式文本属性格式文本属性l 可以使用文本属性检查器应用可以使用文本属性检查器应用 HTML HTML 格式或层叠样式表格式或层叠样式表 (CSS)(CSS)格格式。应用式。应用 HTML HTML 格式时,格式时,Dreamweaver Dreamweaver 会将属性添加到页面正文的会将属性添加到页面正文的 HTML HTML 代码中。应用代

9、码中。应用 CSS CSS 格式时,格式时,Dreamweaver Dreamweaver 会将属性写入文档头会将属性写入文档头或单独的样式表中。或单独的样式表中。l如果属性检查器没有打开,请将其打开(如果属性检查器没有打开,请将其打开(“窗口窗口”“属性属性”),然),然后单击后单击“HTML”HTML”按钮。按钮。l选择要设置格式的文本。选择要设置格式的文本。l设置要应用于所选文本的选项:设置要应用于所选文本的选项:第 6 页ppt课件l格式:设置所选文本的段落样式。格式:设置所选文本的段落样式。“段落段落”应用应用 标签的默认格式标签的默认格式,“标题标题 1”1”添加添加H1 H1 标

10、签,等等。标签,等等。lIDID:为所选内容分配一个:为所选内容分配一个 IDID。l类:显示当前应用于所选文本的类样式。如果没有对所选内容应用过类:显示当前应用于所选文本的类样式。如果没有对所选内容应用过任何样式,则弹出菜单显示任何样式,则弹出菜单显示“无无 CSS CSS 样式样式”。如果已对所选内容应用。如果已对所选内容应用了多个样式,则该菜单是空的。了多个样式,则该菜单是空的。l选择要应用于所选内容的样式。选择要应用于所选内容的样式。l选择选择“无无”删除当前所选样式。删除当前所选样式。l选择选择“重命名重命名”以重命名该样式。以重命名该样式。l选择选择“附加样式表附加样式表”以打开一

11、个允许您向页面附加外部样式表的对话以打开一个允许您向页面附加外部样式表的对话框。框。l链接:创建所选文本的超文本链接。单击文件夹图标浏览到站点中的链接:创建所选文本的超文本链接。单击文件夹图标浏览到站点中的文件;键入文件;键入 URLURL;将;将“指向文件指向文件”图标拖到图标拖到“文件文件”面板中的文件;面板中的文件;或将文件从或将文件从“文件文件”面板拖到框中。面板拖到框中。第 7 页ppt课件l二、输入连续空格二、输入连续空格l默认状态下,默认状态下,DreamweaverDreamweaver只允许输入一个空格,需要通过设置或特定只允许输入一个空格,需要通过设置或特定操作才能输入连续

12、空格。操作才能输入连续空格。l1 1、设置、设置“首选参数首选参数”对话框对话框l选择选择“编辑编辑”“首选参数首选参数”菜单命令,在菜单命令,在“首选参数首选参数”对话框中选中对话框中选中“允许多个连续的空格允许多个连续的空格”复选框。复选框。l2 2、直接插入、直接插入l选择选择“插入插入HTMLHTML特殊字符特殊字符 不换行空格不换行空格”命令,或按命令,或按。l将输入法转换到中文的全角状态下。将输入法转换到中文的全角状态下。第 8 页ppt课件l三、插入特殊文本三、插入特殊文本l1 1、插入日期、插入日期l在文档窗口中,将插入点放置在想要插入对象的位置。在文档窗口中,将插入点放置在想

13、要插入对象的位置。l启动启动“插入日期插入日期”对话框。对话框。l选择选择“插入插入”面板的面板的“常用常用”选项卡,单击选项卡,单击“日期日期”按钮。按钮。l选择选择“插入插入 日期日期 ”命令。命令。l选择相应的日期和时间格式,若选中选择相应的日期和时间格式,若选中“储存时自动更新储存时自动更新”复选框,复选框,每一次存储文件都会自动更新文档中插入的日期。单击每一次存储文件都会自动更新文档中插入的日期。单击“确定确定”按按钮。钮。l2 2、插入换行符、插入换行符l选择选择“插入插入”面板的面板的“文本文本”选项卡,单击选项卡,单击“字符字符”按钮,选择按钮,选择“换换行符行符”按钮。按钮。

14、l按按。l选择选择“插入插入HTMLHTML特殊字符特殊字符 换行符换行符”命令。命令。第 9 页ppt课件l3 3、插入特殊字符、插入特殊字符l选择选择“插入插入”面板的面板的“文本文本”选项卡,单击选项卡,单击“字符字符”按钮,在弹出菜按钮,在弹出菜单中就可以找到各种特殊字符单中就可以找到各种特殊字符l4 4、插入水平线、插入水平线l 水平线在网页文档中经常用到,它主要用于分隔文档内容,是文水平线在网页文档中经常用到,它主要用于分隔文档内容,是文档结构清晰明了,合理使用水平线可以获得非常好的效果。档结构清晰明了,合理使用水平线可以获得非常好的效果。l选择选择“插入插入”面板的面板的“常用常

15、用”选项卡,点击水平线选项卡,点击水平线 或选择或选择“插入插入”“HTML”“HTML”“水平线水平线”。l可以在属性检查器中对水平线进行样式的设置。可以在属性检查器中对水平线进行样式的设置。l“ID”ID”文本框:可用于为水平线指定文本框:可用于为水平线指定 IDID。l宽和高:以像素为单位或以页面大小百分比的形式指定水平线的宽度宽和高:以像素为单位或以页面大小百分比的形式指定水平线的宽度和高度。和高度。第 10 页ppt课件l对齐:指定水平线的对齐方式(默认、左对齐、居中对齐或右对齐)对齐:指定水平线的对齐方式(默认、左对齐、居中对齐或右对齐)。仅当水平线的宽度小于浏览器窗口的宽度时,该

16、设置才适用。仅当水平线的宽度小于浏览器窗口的宽度时,该设置才适用。l阴影:指定绘制水平线时是否带阴影。取消选择此选项将使用纯色绘阴影:指定绘制水平线时是否带阴影。取消选择此选项将使用纯色绘制水平线。制水平线。第 11 页ppt课件图像图像l网页中常用的图像格式有网页中常用的图像格式有3 3种,即种,即GIFGIF、JPEGJPEG和和PNGPNG。目前。目前GIFGIF和和JPEGJPEG文件格式的文件格式的支持最好,大多数浏览器都可以查看这两种格式的文件。由于支持最好,大多数浏览器都可以查看这两种格式的文件。由于PNGPNG文件具有较文件具有较大的灵活性且文件较小,所以它对于几乎任何类型的网

17、页图像都是最合适的。大的灵活性且文件较小,所以它对于几乎任何类型的网页图像都是最合适的。l一、一、GIFGIF图像格式图像格式l即图像交换格式即图像交换格式l特点:特点:l数据量小数据量小,最多使用最多使用256256种颜色种颜色,可以透明背景显示可以透明背景显示.l可以制作动态图像,将数张静态图像作为动画串联起来,转换成一张动画文件可以制作动态图像,将数张静态图像作为动画串联起来,转换成一张动画文件。l可以将图像以交错的方式显示在网页中。(交错显示:当图像未下载完成时,可以将图像以交错的方式显示在网页中。(交错显示:当图像未下载完成时,浏览器先以马赛克的形式将图像逐步显示)浏览器先以马赛克的

18、形式将图像逐步显示)l使用无损压缩方案,图像不会有细节上的损失。使用无损压缩方案,图像不会有细节上的损失。l通性好,即适合任何一个浏览器。通性好,即适合任何一个浏览器。第 12 页ppt课件l用途用途:l适合显示色调不连续或具有大面积单一颜色的图像,如导航条、按钮、图标、适合显示色调不连续或具有大面积单一颜色的图像,如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。徽标或其他具有统一色彩和色调的图像。l二、二、JPEGJPEG图像格式图像格式l即联合图像专家组,是一种图像压缩格式,文件格式是用于摄影或连续色调图即联合图像专家组,是一种图像压缩格式,文件格式是用于摄影或连续色调图像的高级

19、格式,这是因为像的高级格式,这是因为JPEGJPEG文件可以包含数百万种颜色。随着文件可以包含数百万种颜色。随着 JPEG JPEG 文件品文件品质的提高,文件的大小和下载时间也会随之增加。通常可以通过压缩质的提高,文件的大小和下载时间也会随之增加。通常可以通过压缩 JPEG JPEG 文文件在图像品质和文件大小之间达到良好的平衡。件在图像品质和文件大小之间达到良好的平衡。l有一定的失真度,但一般肉眼分辨不出与有一定的失真度,但一般肉眼分辨不出与GIFGIF的区别。的区别。l特点:特点:lJPEGJPEG只有只有GIFGIF文件大小的文件大小的1/41/4。l不支持透明图、动态图。不支持透明图

20、、动态图。l用途:用途:l通常用于显示照片等颜色丰富的精美图像。通常用于显示照片等颜色丰富的精美图像。第 13 页ppt课件l三、三、PNGPNG图像格式图像格式l是一种替代是一种替代 GIF GIF 格式的无专利权限制的格式,它包括对索引色、灰度格式的无专利权限制的格式,它包括对索引色、灰度、真彩色图像以及、真彩色图像以及 alpha alpha 通道透明度的支持。通道透明度的支持。PNG PNG 是是 AdobeAdobe FireworksFireworks 固有的文件格式。固有的文件格式。PNG PNG 文件可保留所有原始层、矢量、文件可保留所有原始层、矢量、颜色和效果信息(例如阴影)

21、,并且在任何时候所有元素都是可以完颜色和效果信息(例如阴影),并且在任何时候所有元素都是可以完全编辑的。文件必须具有全编辑的。文件必须具有 .png.png 文件扩展名才能被文件扩展名才能被 Dreamweaver Dreamweaver 识别识别为为 PNG PNG 文件。文件。l特点:特点:l像像GIFGIF一样无损压缩,像一样无损压缩,像JPEGJPEG一样拥有百万种颜色。一样拥有百万种颜色。l具有隔行扫描的特性,比其他格式都要快。具有隔行扫描的特性,比其他格式都要快。l用途:用途:l常用于制作网页效果图。常用于制作网页效果图。第 14 页ppt课件l一、插入图像一、插入图像l将图像插入

22、将图像插入 Dreamweaver Dreamweaver 文档时,文档时,HTML HTML 源代码中会生成对该图像文源代码中会生成对该图像文件的引用。为了确保此引用的正确性,该图像文件必须位于当前站点件的引用。为了确保此引用的正确性,该图像文件必须位于当前站点中。如果图像文件不在当前站点中,中。如果图像文件不在当前站点中,Dreamweaver Dreamweaver 会询问是否要将此会询问是否要将此文件复制到当前站点中。文件复制到当前站点中。l1 1、通过、通过“选择图像源文件选择图像源文件”对话框对话框l在在“文档文档”窗口中,将插入点放置在要显示图像的地方,然后执行窗口中,将插入点放

23、置在要显示图像的地方,然后执行下列操作之一:下列操作之一:l在在“插入插入”面板的面板的“常用常用”类别中,单击类别中,单击“图像图像”图标。图标。l选择菜单选择菜单“插入插入”“图像图像”。l选择选择“文件系统文件系统”以选择一个图像文件。以选择一个图像文件。l单击单击“确定确定”。将显示。将显示“图像标签辅助功能属性图像标签辅助功能属性”对话框对话框l在在“替代文本替代文本”和和“详细描述详细描述”文本框中输入值,然后单击文本框中输入值,然后单击“确定确定”。第 15 页ppt课件l在在“替代文本替代文本”框中,为图像输入一个名称或一段简短描述。(在框中,为图像输入一个名称或一段简短描述。

24、(在 50 50 个字符左右)。个字符左右)。l在在“详细说明详细说明”框中,输入当用户单击图像时所显示的文件的位置,框中,输入当用户单击图像时所显示的文件的位置,或者单击文件夹图标以浏览到该文件。该文本框提供指向与图像相关或者单击文件夹图标以浏览到该文件。该文本框提供指向与图像相关(或提供有关图像的详细信息)的文件的链接。(或提供有关图像的详细信息)的文件的链接。l注意:注意:l可以在其中一个或两个文本框中输入信息。可以在其中一个或两个文本框中输入信息。l当单击当单击“取消取消”时,该图像将出现在文档中,但时,该图像将出现在文档中,但 Dreamweaver Dreamweaver 不会将不

25、会将它与辅助功能标签或属性相关联。它与辅助功能标签或属性相关联。第 16 页ppt课件l二、设置图像属性二、设置图像属性l图像的图像的“属性检查器属性检查器”可以显示图像当前属性,也可以设置各项属性可以显示图像当前属性,也可以设置各项属性。l宽和高:图像的宽度和高度,以像素表示。在页面中插入图像时,宽和高:图像的宽度和高度,以像素表示。在页面中插入图像时,Dreamweaver Dreamweaver 会自动用图像的原始尺寸更新这些文本框。会自动用图像的原始尺寸更新这些文本框。l如果设置的如果设置的“宽宽”和和“高高”值与图像的实际宽度和高度不相符,则该值与图像的实际宽度和高度不相符,则该图像

26、在浏览器中可能不会正确显示。(若要恢复原始值,请单击用于图像在浏览器中可能不会正确显示。(若要恢复原始值,请单击用于输入新值的输入新值的“宽宽”和和“高高”文本框右侧的文本框右侧的“重设大小重设大小”按钮。)按钮。)l注意:可以更改这些值来缩放该图像实例的显示大小,但这不会缩短注意:可以更改这些值来缩放该图像实例的显示大小,但这不会缩短下载时间,因为浏览器先下载所有图像数据再缩放图像。若要缩短下下载时间,因为浏览器先下载所有图像数据再缩放图像。若要缩短下载时间并确保所有图像实例以相同大小显示,需要使用图像编辑应用载时间并确保所有图像实例以相同大小显示,需要使用图像编辑应用程序缩放图像。程序缩放

27、图像。第 17 页ppt课件l源文件:指定图像的源文件。单击文件夹图标以浏览到源文件,或者源文件:指定图像的源文件。单击文件夹图标以浏览到源文件,或者键入路径。键入路径。l链接:指定图像的超链接。将链接:指定图像的超链接。将“指向文件指向文件”图标拖动到图标拖动到“文件文件”面板面板中的某个文件,单击文件夹图标浏览到站点上的某个文档,或手动键中的某个文件,单击文件夹图标浏览到站点上的某个文档,或手动键入入 URLURL。l替换:指定在只显示文本的浏览器或已设置为手动下载图像的浏览器替换:指定在只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。对于使用语音合成器(用于只显

28、示文本中代替图像显示的替代文本。对于使用语音合成器(用于只显示文本的浏览器)的有视觉障碍的用户,将大声读出该文本。在某些浏览器的浏览器)的有视觉障碍的用户,将大声读出该文本。在某些浏览器中,当鼠标指针滑过图像时也会显示该文本。中,当鼠标指针滑过图像时也会显示该文本。l地图:用于创建客户端图像地图。地图:用于创建客户端图像地图。l编辑:启动您在编辑:启动您在“外部编辑器外部编辑器”首选参数中指定的图像编辑器并打开首选参数中指定的图像编辑器并打开选定的图像。选定的图像。第 18 页ppt课件l三、图像占位符三、图像占位符l如果在制作网页时,需要的图像还没准备好,可以临时插入图像占位如果在制作网页时

29、,需要的图像还没准备好,可以临时插入图像占位符来代替索要插入的图片位置,等有合适的图像后,再重新定义图像符来代替索要插入的图片位置,等有合适的图像后,再重新定义图像文件。文件。l1 1、插入图像占位符、插入图像占位符l将插入点放置到插入占位符的位置。将插入点放置到插入占位符的位置。l选择选择“插入插入”“图像对象图像对象”“图像占位符图像占位符”,或在,或在“插入插入/常用常用”面板中单击面板中单击“图像图像”按钮组中的按钮组中的“图像占位符图像占位符”按钮。按钮。l在在“图像占位符图像占位符”对话框中设置参数。对话框中设置参数。l名称(可选):输入要作为图像占位符的标签显示的文本。如果不想名

30、称(可选):输入要作为图像占位符的标签显示的文本。如果不想显示标签,则保留该文本框为空。名称必须以字母开头,并且只能包显示标签,则保留该文本框为空。名称必须以字母开头,并且只能包含字母和数字。含字母和数字。l宽度和高度(必需):键入设置图像大小的数值(以像素表示)。宽度和高度(必需):键入设置图像大小的数值(以像素表示)。第 19 页ppt课件l替代文本(可选):为使用只显示文本的浏览器的访问者输入描述该替代文本(可选):为使用只显示文本的浏览器的访问者输入描述该图像的文本。图像的文本。l2 2、替换图像占位符、替换图像占位符l 在发布站点前,应用图像文件替换所有的占位符,新图像设置为与在发布

31、站点前,应用图像文件替换所有的占位符,新图像设置为与占位符相同大小。占位符相同大小。l双击双击“图像占位符图像占位符”,或单击,或单击“图像占位符图像占位符”将其选中,在将其选中,在“属性检属性检查器查器”中单击中单击“源文件源文件”旁的文件夹图标。旁的文件夹图标。l在在“选择图像源文件选择图像源文件”对话框中,选择图像,然后单击对话框中,选择图像,然后单击“确定确定”。l3 3、设置图像占位符属性、设置图像占位符属性l使用使用“属性检查器属性检查器”为占位符图像设置名称、宽度、高度、图像源文为占位符图像设置名称、宽度、高度、图像源文件、替代文本说明、对齐方式和颜色件、替代文本说明、对齐方式和

32、颜色第 20 页ppt课件编辑图像编辑图像l一、调整图像大小一、调整图像大小l注意:调整图像大小只是调整图像的显示尺寸,对图像文件的实际大注意:调整图像大小只是调整图像的显示尺寸,对图像文件的实际大小不做任何修改。小不做任何修改。l1 1、通过、通过“属性属性”检查器检查器l 在在“属性属性”检查器中的检查器中的“宽宽”、“高高”中输入数值,单击中输入数值,单击“重设重设大小大小”按钮,将图像恢复到调整前的原始大小,所有调整操作将失效按钮,将图像恢复到调整前的原始大小,所有调整操作将失效。l2 2、通过控制点、通过控制点l选中目标图像,然后直接拖动图像上相应的选择控制点完成图像大小选中目标图像

33、,然后直接拖动图像上相应的选择控制点完成图像大小的调整。的调整。第 21 页ppt课件l二、设置图像边距、边框和对齐方式二、设置图像边距、边框和对齐方式l 在右键在右键-标签编辑器中设置。标签编辑器中设置。l1 1、设置图像边距、设置图像边距l 图像边距是指图像相对于周围元素的距离,包括垂直边距和水平图像边距是指图像相对于周围元素的距离,包括垂直边距和水平边距,单位为像素。设置图像的边距将对图像周围的网页元素的位置边距,单位为像素。设置图像的边距将对图像周围的网页元素的位置产生影响。产生影响。l2 2、设置图像边框、设置图像边框l 增加边框,可以使图像边缘更加突出。不设置,不会显示边框。增加边

34、框,可以使图像边缘更加突出。不设置,不会显示边框。如果图像设置了超级链接,图像会出现默认样式的边框,如不希望出如果图像设置了超级链接,图像会出现默认样式的边框,如不希望出现默认的边框,可以将现默认的边框,可以将“边框边框”设置为设置为0 0。第 22 页ppt课件l3 3、设置图像对齐方式、设置图像对齐方式l 插入图片后,在插入图片后,在“格式格式”菜单下,可以看到菜单下,可以看到“对齐对齐”选项,在对齐下选选项,在对齐下选择择“左对齐左对齐”、“居中对齐居中对齐”、“右对齐右对齐”和和“两端对齐两端对齐”;或者在标签编;或者在标签编辑器中设置。辑器中设置。l默认值:图像指定为基线对齐。默认值

35、:图像指定为基线对齐。l基线:将图像的底部与当前行中最高元素(图像或文本)的基线对齐基线:将图像的底部与当前行中最高元素(图像或文本)的基线对齐l顶部:将图像的顶部与当前行中最高元素(图像或文本)的顶部对齐顶部:将图像的顶部与当前行中最高元素(图像或文本)的顶部对齐l中间:将图像中线与当前行文本基线对齐。中间:将图像中线与当前行文本基线对齐。l底部:将图像底线与当前行文本底线对齐。底部:将图像底线与当前行文本底线对齐。l绝对居中:将图像中线与当前行文本中线对齐。绝对居中:将图像中线与当前行文本中线对齐。l绝对底部:将图像底部与文本行(含所有英文字母下部,如绝对底部:将图像底部与文本行(含所有英

36、文字母下部,如j j、g g等)的底部对等)的底部对齐。齐。左:左:将图像放置在文本段落的左侧,文本在图像右侧换行。将图像放置在文本段落的左侧,文本在图像右侧换行。右:右:将图像放置在文本段落的左侧,文本在图像右侧换行。将图像放置在文本段落的左侧,文本在图像右侧换行。第 23 页ppt课件l三、裁剪图像三、裁剪图像l1 1、裁剪图像、裁剪图像l 选中图像,单击图像属性检查器的选中图像,单击图像属性检查器的“裁剪裁剪”按钮,或选择按钮,或选择“修改修改”/“/“图像图像”/“/“裁剪裁剪”命令。通过拖动裁剪框上的控制点进行裁剪。命令。通过拖动裁剪框上的控制点进行裁剪。l2 2、图像重新取样、图像

37、重新取样l 裁剪完的图像,实际物理大小并没有改变,当图片太大时会影响裁剪完的图像,实际物理大小并没有改变,当图片太大时会影响网页的下载速度,可以利用网页的下载速度,可以利用“图像重新取样图像重新取样”功能来同步改变图像物功能来同步改变图像物理大小。理大小。l 选中图像,单击图像属性检查器的选中图像,单击图像属性检查器的“重新取样重新取样”按钮,或选择按钮,或选择“修修改改”/“/“图像图像”/“/“重新取样重新取样”命令。命令。l“重新取样重新取样”按钮只有当图像的原始大小被改变时,才能被激活按钮只有当图像的原始大小被改变时,才能被激活第 24 页ppt课件超链接超链接l一、什么是超级链接一、

38、什么是超级链接l 超级链接在本质上属于一个网页的一部分,它是一种允许我们同超级链接在本质上属于一个网页的一部分,它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后,才能其他网页或站点之间进行连接的元素。各个网页链接在一起后,才能真正构成一个网站。真正构成一个网站。l 所谓的超级链接是指从一个网页指向一个目标的链接关系,这个所谓的超级链接是指从一个网页指向一个目标的链接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。而一个图片,一个电子

39、邮件地址,一个文件,甚至是一个应用程序。而在一个网页中用来超链接的对象,可以是一段文本或者是一个图片。在一个网页中用来超链接的对象,可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。,并且根据目标的类型来打开或运行。l 如果按照使用对象的不同,网页中的链接又可以分为:文本超链接如果按照使用对象的不同,网页中的链接又可以分为:文本超链接,图像超链接,图像超链接,E-mailE-mail链接,锚点链接,多媒体文件链接,空链接等链接,锚点链接,多媒体文件链接,空链接等

40、。第 25 页ppt课件l1 1、外部链接、外部链接l 又常被称为:又常被称为:“反向链接反向链接”或或“导入链接导入链接”,是指其他网站链接,是指其他网站链接到你的网站的链接。到你的网站的链接。l外部链接指的是针对搜索引擎,与其它站点所做的友情链接。高外部链接指的是针对搜索引擎,与其它站点所做的友情链接。高质量的外部链接指:和你的网站建立链接的网站知名度高质量的外部链接指:和你的网站建立链接的网站知名度高,访问量大访问量大,同时相对的外部链同时相对的外部链l作用:作用:l外部链接主要有两个作用。一个作用是面向用户,用户可以通过外部链接主要有两个作用。一个作用是面向用户,用户可以通过A A网站

41、的链接点击到网站的链接点击到B B网站从而带来访问者;另一个作用是外部链接可以网站从而带来访问者;另一个作用是外部链接可以分享到一部分权重,分享到一部分权重,A A网站链接到网站链接到B B网站代表网站代表A A网站告诉搜索引擎它信任网站告诉搜索引擎它信任B B网站,觉得网站,觉得B B网站是一个不错的网站从而给网站是一个不错的网站从而给B B网站投了一票,这样网站投了一票,这样B B网网站就可以从站就可以从A A网站分享到一定权重,并在搜索引擎那的权重得到提高。网站分享到一定权重,并在搜索引擎那的权重得到提高。第 26 页ppt课件l2 2、内部链接、内部链接l与外部链接与外部链接(即反向链

42、接即反向链接)相反,内部链接是指同一网站域名下的相反,内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接,因内容页面之间互相链接。如频道、栏目、终极内容页之间的链接,因此内部链接也可以称之为站内链接。此内部链接也可以称之为站内链接。l作用:作用:l合理地安排内部链接,尤其是大型网站,合理的内部链接部署策合理地安排内部链接,尤其是大型网站,合理的内部链接部署策略同样可以极大地提升网站的略同样可以极大地提升网站的SEOSEO(搜索引擎优化)效果。(搜索引擎优化)效果。l优点:优点:l内部链接容易控制,成本低。你直接就可以在自己的站上进行部内部链接容易控制,成本低。

43、你直接就可以在自己的站上进行部署,不像外部链接的不可控性比较大。署,不像外部链接的不可控性比较大。第 27 页ppt课件文本超级链接文本超级链接l一、文本超级链接一、文本超级链接l 文本超级链接是最常见的超级链接,通过使用鼠标点击文本即可文本超级链接是最常见的超级链接,通过使用鼠标点击文本即可从一个网页跳转到另一个网页。从一个网页跳转到另一个网页。l1 1、通过、通过HTMLHTML属性检查器创建属性检查器创建l先选中文字,打开先选中文字,打开“属性属性”面板中的面板中的“链接链接”文本框,在其中输入文本框,在其中输入要链接的文档名称或站点地址。要链接的文档名称或站点地址。l如果是同一站点内的

44、文件,也可以单击如果是同一站点内的文件,也可以单击“链接链接”文本框右侧的文件夹文本框右侧的文件夹图标,在弹出的对话框中选择要链接的网页。图标,在弹出的对话框中选择要链接的网页。l将将“链接链接”文本框右侧的文本框右侧的“指向文件指向文件”图标拖动到图标拖动到“文件面板文件面板”中的中的目标文件上。目标文件上。l在在“标题标题”文本框中输入提示性的内容。文本框中输入提示性的内容。第 28 页ppt课件l“目标目标”下拉菜单中,选择文档的打开位置。下拉菜单中,选择文档的打开位置。l_self_self:会在当前网页所在的窗口或框架中打开(默认方式)。:会在当前网页所在的窗口或框架中打开(默认方式

45、)。l_blank :_blank :每个链接会创建一下新的窗口。每个链接会创建一下新的窗口。l_new_new:会在同一个刚创建的窗口中打开。:会在同一个刚创建的窗口中打开。l_parent_parent:如果是嵌套的框架,则在父框架中打开,如果不是嵌套框架,则所:如果是嵌套的框架,则在父框架中打开,如果不是嵌套框架,则所链接的文档载入整个浏览器窗口。链接的文档载入整个浏览器窗口。l_top_top:将链接的文档载入整个浏览器窗口,从而删除所有框架。:将链接的文档载入整个浏览器窗口,从而删除所有框架。l2 2、通过、通过“超级链接超级链接”对话框对话框l选中要插入超级链接的位置,选择命令选中

46、要插入超级链接的位置,选择命令“插入插入”/“/“超级链接超级链接”,或在,或在“插插入入”/“/“常用常用”面板中单击面板中单击“超级链接超级链接”按钮,弹出按钮,弹出“超级链接超级链接”对话框。对话框。l“文本文本”文本框:输入链接文本。文本框:输入链接文本。l “链接链接”下拉列表框:设置目标地址。下拉列表框:设置目标地址。l “访问键访问键”文本框:设置链接的快捷键,文本框:设置链接的快捷键,Alt+Alt+字母键。字母键。l “TabTab键索引键索引”文本框:设置文本框:设置“Tab”Tab”键切换顺序。键切换顺序。第 29 页ppt课件l3 3、设置文本超级链接的状态、设置文本超

47、级链接的状态l 通过通过“页面属性页面属性”对话框的对话框的“链接链接”分类,可以设置文本超级链接分类,可以设置文本超级链接的状态。的状态。l链接字体:设置链接文本的字体。链接字体:设置链接文本的字体。l大小:设置链接文本的大小。大小:设置链接文本的大小。l链接颜色:设置链接没有被单击时的静态文本的颜色。链接颜色:设置链接没有被单击时的静态文本的颜色。l已访问链接:设置已被单击过的链接文本颜色。已访问链接:设置已被单击过的链接文本颜色。l变换图像链接:设置将鼠标指针移动链接上时文本的颜色。变换图像链接:设置将鼠标指针移动链接上时文本的颜色。l活动链接:设置对连接文本进行单击时的颜色。活动链接:

48、设置对连接文本进行单击时的颜色。l下划线样式:共有下划线样式:共有4 4中下划线样式。中下划线样式。第 30 页ppt课件l二、锚记超级链接二、锚记超级链接l 在制作网页时,为了达到跳转到网页固定位置的目的,可以使用在制作网页时,为了达到跳转到网页固定位置的目的,可以使用锚链接。通过对网页中指定位置的命名,利用超级链接打开目标网页锚链接。通过对网页中指定位置的命名,利用超级链接打开目标网页时可直接跳转到相应的命名位置上。时可直接跳转到相应的命名位置上。l1 1、命名锚记、命名锚记l 将光标置于要插入锚记的位置,选择命令将光标置于要插入锚记的位置,选择命令“插入插入”/“/“命名锚记命名锚记”,

49、或在,或在“插入插入”/“/“常用常用”面板中单击面板中单击“命名锚记命名锚记”按钮,弹出按钮,弹出“命命名锚记名锚记”对话框,在对话框,在“锚记名称锚记名称”文本框中输入名称,单击文本框中输入名称,单击“确定确定”按钮。按钮。l 如果有错,可以选中锚记标志,在属性检查器中修改。如果有错,可以选中锚记标志,在属性检查器中修改。l2 2、创建锚记超级链接、创建锚记超级链接l 选中文本,在选中文本,在HTMLHTML属性检查器的属性检查器的“链接链接”下拉列表框中输入锚记名下拉列表框中输入锚记名称,如称,如“#a”#a”,或直接将,或直接将“指向文件指向文件”图标拖到锚记名称上。图标拖到锚记名称上

50、。l选择命令选择命令“插入插入”/“/“超级链接超级链接”,在,在“超级链接超级链接”对话框中设置。对话框中设置。第 31 页ppt课件l注意:注意:l如果链接的目标锚记在同一文档中,只需在如果链接的目标锚记在同一文档中,只需在“链接链接”文本框中输入一文本框中输入一个个“#”#”符号和锚记名称。符号和锚记名称。l如果链接的目标锚记在同一站点的其他网页中,需要先输入该网页的如果链接的目标锚记在同一站点的其他网页中,需要先输入该网页的路径和名称,再输入路径和名称,再输入“#”#”和锚记名称,如和锚记名称,如“index.htm#a”index.htm#a”。l如果链接的目标锚记在如果链接的目标锚

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 办公、行业 > 各类PPT课件(模板)
版权提示 | 免责声明

1,本文(Dreamweaver-CS6-字、图像、超链接课件.ppt)为本站会员(晟晟文业)主动上传,163文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。
2,用户下载本文档,所消耗的文币(积分)将全额增加到上传者的账号。
3, 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(发送邮件至3464097650@qq.com或直接QQ联系客服),我们立即给予删除!


侵权处理QQ:3464097650--上传资料QQ:3464097650

【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。


163文库-Www.163Wenku.Com |网站地图|