Dreamweaver-CS6-字、图像、超链接课件.ppt
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《Dreamweaver-CS6-字、图像、超链接课件.ppt》由用户(晟晟文业)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver CS6 图像 超链接 课件
- 资源描述:
-
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如果设置的如果设置的“宽宽”和和“高高”值与图像的实际宽度和高度不相符,则该值与图像的实际宽度和高度不相符,则该图像
展开阅读全文