第3章-网页编辑与超级链接课件.ppt

1、第第3章章 网页编辑与超级链接网页编辑与超级链接2014.11网页设计与制作网页设计与制作第第3章章 网页编辑与超级链接网页编辑与超级链接 网页中图像的设置网页中图像的设置3.2制作图像效果制作图像效果3.3网页中文本的设置网页中文本的设置3.1设置超级链接设置超级链接 3.4网页的应用网页的应用 4.5网页设计与制作网页设计与制作本章要点本章要点 文本是表达信息最直接的方式，网上大量信息的传播仍以文本为主。图像与文本一样，也是网页信息的表现形式，因为有了图像，网页才显得生动。文本与图像都是网页最基本、最常用的元素。此外，只有存在超级链接，网页才会有意义。因此，文本、图像与超级链接是网页设计最

2、基本的要素。v输入普通文本、空格、特殊字符与日期v设置文本属性v网页图像的基础知识v网页图像素材的搜集v插入图像并设置图像的属性v制作图像的提示信息、滚盖图与图像映射v超级链接的基础知识v创建超级链接、空链接、书签锚点与跳转菜单v在网页中插入Flash动画、视频、声音v博客的建立与基本操作网页设计与制作网页设计与制作3.1 网页中文本的设置网页中文本的设置 输入文本输入文本 3.1.11输入文字在Dreamweaver 中，文本的输入与其他字处理程序基本相同。操作实例操作实例3-1 输入文字输入文字操作步骤：操作步骤：（1）在文档编辑窗口直接输入单击需要输入文字的位置，设置插入点。输入文字。（

3、2）复制已有的文本 首先选中需要复制的文本，使用快捷键“Ctrl+C”复制。切换到Dreamweaver的文档窗口，在网页上单击需要输入文本的位置，设置插入点。使用快捷键“Ctrl+V”粘贴；或选择“编辑”菜单的“粘贴”选项；或单击文档工具栏的“粘贴”按钮。注意：从其他地方复制文本，再粘贴到Dreamweaver文档窗口时，将失去原有的格式，但分段格式将保留。网页设计与制作网页设计与制作3.1 网页中文本的设置网页中文本的设置 输入文本输入文本 3.1.12输入空格在Dreamweaver 中，空格的输入与其他字处理程序稍有不同。操作实例操作实例3-2 输入空格输入空格操作步骤：操作步骤：方法

4、一：将中文输入法切换到全角模式，可以按“空格”键输入空格。利用快捷键“Shift+空格”可以切换半角与全角状态。方法二：选择“文本”工具栏中的“已编排格式”选项，可以按“空格”键输入空格。方法三：选择“文本”工具栏中的“字符”、“不换行空格”选项。方法四：将光标定位到“代码”视图中需要输入空格的位置，输入 即可输入空格。网页设计与制作网页设计与制作3.1 网页中文本的设置网页中文本的设置 输入文本输入文本 3.1.13输入特殊字符网页中除普通文字外，有时还需要输入特殊字符。例如，版权信息“”、注册商标“”、商标“”等。在Dreamweaver 中输入特殊字符非常方便，可以直接使用“文

5、本”工具栏进行。操作实例操作实例3-3 输入特殊字符输入特殊字符操作步骤：操作步骤：单击需要输入特殊字符的位置，设置插入点。单击“文本”工具栏的“字符”下拉箭头，显示特殊字符菜单。如果没有所需要的字符，则单击最后的“其他字符”选项，弹出“插入其他字符”对话框，可在其中选择需要插入的特殊字符。网页设计与制作网页设计与制作3.1 网页中文本的设置网页中文本的设置 输入文本输入文本 3.1.1注意：通过此方法添加的特殊字符在Dreamweaver文档窗口中显示混乱，请不要修改，它们在浏览器中可正确显示。有些特殊字符Dreamweaver没有提供，如果需要，可以通过“智能ABC输入法”的软键盘输入。此

6、方法输入的特殊符号在Dreamweaver文档窗口与浏览器窗口均能正确显示。4输入回车输入回车在Dreamweaver文档窗口输入文字时，如果按回车键（Enter）换行，两段之间的距离比较大，为保持正常的行距，可采用插入“换行符”的方法。网页设计与制作网页设计与制作3.1 网页中文本的设置网页中文本的设置 修饰文本修饰文本 3.1.21文本属性面板文本属性面板从Dreamweaver CS6版本开始，“属性”面板上的属性设置分为两个部分：一个部分为HTML属性，该部分属性设置将直接写入元素所在的标记中；另一部分是CSS属性，该部分属性设置将写入相应的CSS样式表中。网页设计与制作网页设计与制作

7、3.1 网页中文本的设置网页中文本的设置 修饰文本修饰文本 3.1.22基于文本属性的基于文本属性的CSS规则的建立与应用规则的建立与应用网页设计与制作网页设计与制作3.1 网页中文本的设置网页中文本的设置 修饰文本修饰文本 3.1.22基于文本属性的基于文本属性的CSS规则的建立与应用规则的建立与应用操作实例操作实例3-5 创建并应用创建并应用CSS规则规则图中的文字由三行组成，设置第一行文字字号为18px、文字加粗，将上述设置创建为CSS规则，命名为“word”。在第三行文字上，应用“word”规则。操作步骤：操作步骤：选中第一行文字，在“属性”的CSS面板，“大小”设置为18。在弹出的“

8、新建CSS规则”对话框的“选择器名称”，输入“word”，单击“确定”按钮退出。仍然选中第一行文字，在“属性”的CSS面板，设置为“粗体”。在弹出的“新建CSS规则”对话框的“选择器名称”，再次输入“word”，单击“确定”按钮退出。1.游客需花费389.36美元于火奴鲁鲁休息一夜。2.在英国伦敦出行一次往返的价格大约为41.47美元。3.两名游客可以以44.86美元的价位在中国台湾享用晚餐两次。设置前的文字1.游客需花费游客需花费389.36美元于火奴鲁鲁休息一夜。美元于火奴鲁鲁休息一夜。2.在英国伦敦出行一次往返的价格大约为41.47美元。3.两名游客可以以两名游客可以以44.86美元的价

9、位在中国台湾享用晚餐两次。美元的价位在中国台湾享用晚餐两次。设置后的文字网页设计与制作网页设计与制作3.1 网页中文本的设置网页中文本的设置 修饰文本修饰文本 3.1.2 说明：两次设置均记录在新建的CSS规则“word”中。选中第三行文字，打开“属性”的CSS面板。在“目标规则”下拉列表中选择“word”，则第一行文字的设置自动应用于第三行文字。为减少叙述，后续的操作实例中，对于“新建CSS规则”对话框的处理方式均默认为“取消”。读者可根据自己的需要选择设置或取消。有关CSS规则的详细介绍将在第七章进行。网页设计与制作网页设计与制作3.1 网页中文本的设置网页中文本的设置 修饰文本修饰文本

10、3.1.23设置文本属性设置文本属性操作实例3-6 修饰下图文字修饰要求：标题行要求：字体为华文隶书、标题2、红色、居中、粗体。正文要求：字体为宋体、字号18px、蓝色、首行缩进。网页设计与制作网页设计与制作3.1 网页中文本的设置网页中文本的设置 修饰文本修饰文本 3.1.2操作步骤：操作步骤：（1）设置标题格式选中标题“在线旅游旺季出招抢客源”。在文本“属性”HTML面板的“格式”列表中选择“标题2”。标题共分6级，“标题1”最大，“标题6”最小，如图3-11所示。（2）设置字体选中标题“在线旅游旺季出招抢客源”，在文本“属性”CSS面板的“字体”列表中选择“华文隶书”。如图3-12所示。

11、（在弹出的“新建CSS规则”对话框，单击“取消”按钮。后不赘述。）选中正文，在文本“属性”CSS面板的“字体”列表中选择“宋体”。（3）设置字号选中正文。在文本“属性”CSS面板的“大小”列表中选择“18”，单位选择“px”。如果在“大小”列表中选择非数字，则单位失效。网页设计与制作网页设计与制作3.1 网页中文本的设置网页中文本的设置 修饰文本修饰文本 3.1.2（4）设置文本的颜色 选中标题“在线旅游旺季出招抢客源”，单击“属性”的CSS面板中的“颜色框”，选取“红色”，或在相邻的文本框中输入颜色值“#F00”。选中正文，单击“属性”的CSS面板中的“颜色框”，选取“蓝色”，或在相邻的文本

12、框中输入颜色值“#00F”。输入文本时，默认的颜色是黑色。可以改变选定文本的颜色，所选颜色将覆盖默认颜色。如果需要将文本颜色还原为默认颜色，可在颜色面板中单击“默认颜色”按钮。为标题设置文本属性 为内容设置文本属性 网页设计与制作网页设计与制作3.1 网页中文本的设置网页中文本的设置 修饰文本修饰文本 3.1.2（5）设置文本的对齐方式选中文本，或将光标放置在文本的起始处。例如，选中标题“在线旅游旺季出招抢客源”。在“属性”的CSS面板中单击对齐按钮：左对齐，居中对齐，右对齐，两端对齐。或在“格式”菜单的“对齐”选项中选择一种对齐方式。例如，选择“居中对齐”。（6）设置文本的加粗或倾斜选中文本

13、。例如，选中标题“在线旅游旺季出招抢客源”。单击“属性”的CSS面板上的“B”按钮，设置粗体。单击“B”（粗体）或“I”（斜体）按钮，可使文本加粗或倾斜。再次单击，可取消加粗或倾斜。也可直接单击“文本”工具栏上的“B”或“I”按钮。网页设计与制作网页设计与制作3.1 网页中文本的设置网页中文本的设置 修饰文本修饰文本 3.1.2（7）设置文本缩进或取消缩进选中正文。在“属性”的HTML面板单击“文本缩进”按钮，设置正文的首行缩进。“文本缩进”按钮，用于设置文本的首行缩进；“文本凸出”按钮，用于取消首行缩进。也可直接选择“格式”菜单中的“缩进”或“凸出”选项。（8）保存文件并链接编辑完成的网页以

14、“news02.html”为名，存入站点的“html”文件夹。打开首页index.html，选中文字“在线旅游旺季出招抢客源”，单击鼠标右键，在快捷菜单中选择“创建链接”，链接到“news02.html”文件。网页设计与制作网页设计与制作3.1 网页中文本的设置网页中文本的设置 修饰文本修饰文本 3.1.24添加字体添加字体 可以通过“编辑字体列表”对话框增加中文字体的样式。操作实例操作实例3-7 添加新字体添加新字体操作步骤：操作步骤：选择“修改”菜单中的“字体家族”选项，或在“属性”的CSS面板的“字体”列表中选择“编辑字体列表”，弹出如图3-15所示的“编辑字体列表”对话框。单击“+”号

15、按钮，在“字体列表”中显示“（在以下列表中添加字体）”选项。在“可用字体”列表中选择需要添加的字体，例如“幼圆”。单击“左向箭头”按钮，“幼圆”被添加到字体列表中，如图3-15所示。参照步骤，继续添加其他字体。选中某个字体，单击“-”号按钮可以删除该字体。选中某个字体，单击“”或“”按钮，可以更改字体在列表中的顺序。单击“确定”按钮，完成字体添加。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置 网页图像的基础知识网页图像的基础知识 3.2.11网页图像的格式网页经常使用的图像文件有三种格式：GIF、JPEG和PNG。只有GIF和JPEG是被绝大多数浏览器完全支持的。它们的

16、共同特点是：文件信息量小，适合于网络传输，适合于各种平台。因此，GIF和JPEG图像文件格式被作为标准的网页图像格式。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置网页图像的基础知识网页图像的基础知识 3.2.1（1）图形交换格式GIFGIF（Graphic Interchange Format）格式采用非失真（Losses）的压缩方式。在压缩过程中，不破坏图像的像素信息，被破坏的是图像的颜色。GIF格式最多只能显示256色。GIF适合显示非连续色调或有大色块的图像，例如，导航条，按钮，图标，徽标或其他有一致颜色和色调的图像。GIF图像支持透明颜色，支持动画。此外，GIF

17、图像还支持隔行扫描格式，即浏览器先按1、3、5、7、9行载入图像的粗略概貌，然后继续载入2、4、6、8、10行完成全部图像。这种GIF文件在浏览器中的显示是逐渐清晰的。相对来说，GIF图像的质量比JPEG图像要差一些。GIF格式文件的扩展名为.gif。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置网页图像的基础知识网页图像的基础知识 3.2.1（2）联合摄影专家组JPEGJPEG（Joint Photographic Experts Group）采用失真（Lossy）的压缩方式。在压缩过程中，图像的像素信息将被破坏一些，因此图像会失真，但图像的颜色不会失真。JPEG格式是

18、一种支持真彩色的影像压缩格式，适合显示连续色调图像或照片。例如，风景名胜摄影、人物肖像照片等。JPEG图像随着压缩质量的不同，其文件大小与下载时间也会不同。质量越高，则文件越大。可根据人的视觉所能接受的程度调节压缩质量，找到一个图像质量与文件大小之间的最佳平衡点。与GIF格式不同，JPEG图像既不支持透明颜色属性，也不支持动画。JPEG文件一般要比GIF或PNG文件大一些，其扩展名为.jpg或.jpeg。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置网页图像的基础知识网页图像的基础知识 3.2.1（3）可携网络组PNGPNG（Portable Network Group）

19、文件格式支持颜色索引、灰度、真彩色图像和透明alpha通道。PNG是Fireworks的一种本地文件格式。PNG文件包含了所有的原始层、矢量、颜色和效果信息，而所有这些元素都是可以随时编辑的。PNG格式的文件比较大，其扩展名为.png。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置网页图像的基础知识网页图像的基础知识 3.2.12颜色原理在HTML中，颜色既可以使用颜色名称red（红色）、green（绿色）、blue（蓝色）表示，也可以使用十六进制数（例如：#FF0000）表示。在Windows 操作系统中，在256色颜色模式下显示的颜色被称为安全色（web safe）。

20、共有212种Web安全色，它们是组合了成对的00、33、66、99、CC或FF的任何十六进制值，其相应的RGB值为0、51、102、153、204和255。例如：#000000表示黑色、#FFFFFF表示白色、#FF0000表示红色、#00FF00表示绿色、#0000FF表示蓝色等。如果颜色值超出212种Web安全色范围，在不同的浏览器上可能显示不同的颜色，从而破坏网页的整体效果。Dreamweaver中所有颜色拾取器均使用212色的Web安全色调色板。从调色板中选择颜色时可显示颜色的十六进制值。也可以在任何颜色区域中直接输入十六进制值。网页设计与制作网页设计与制作3.2 网页中图像的设置网页

21、中图像的设置网页图像的基础知识网页图像的基础知识 3.2.1颜色对人的视觉效果非常明显，冲击力是最强的。一个网站设计的成功与否，在某种程度上取决于设计者对颜色的运用和搭配。因此，在设计网页时，必须高度重视颜色的搭配。颜色有冷暖色之分，冷色（例如蓝色）给人的感觉是安静、冰冷；而暖色（例如红色）给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效果。一般情况下，各种颜色给人的感觉是：红色代表热情、活泼、热闹、温暖、幸福、吉祥。橙色代表光明、华丽、兴奋、甜蜜、快乐。黄色代表明朗、愉快、高贵、希望。绿色代表新鲜、平静、和平、柔和、安逸、青春。蓝色代表深远、永恒、沉静、理智、诚实、寒冷。紫

22、色代表优雅、高贵、魅力、自傲。白色代表纯洁、纯真、朴素、神圣、明快。灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞。黑色代表崇高、坚实、严肃、刚健、粗莽。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置网页图像的基础知识网页图像的基础知识 3.2.1网页颜色搭配时应注意以下问题：使用单色：选定一种主色，通过调整颜色的饱和度和透明度，使之产生变化，使网站避免单调。使用邻近色：邻近色，就是在色带上相邻近的颜色。例如，绿色和蓝色，红色和黄色互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。使用对比色：对比色可以突出重点，产生强烈的视觉效果。通过合理使

23、用对比色能够使网站特色鲜明、重点突出。一般以一种颜色作为主色调，以对比色作为点缀，可以起到画龙点睛的作用。黑色的使用：黑色是一种特殊的颜色，如果使用恰当，设计合理，往往产生很强烈的艺术效果。黑色一般用于背景色，与其他纯度色彩搭配使用。背景颜色的使用：背景颜色一般采用清淡素雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩，同时背景颜色应与文字色彩对比的强烈一些。色彩的数量：网站用色并不是越多越好，用色太多，缺乏统一和协调。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置网页图像素材的搜集网页图像素材的搜集 3.2.2制作网页之前，搜集一些图像素材是十分必要的1从网页文件中提取

24、全部图像文件如果某些网页的图像很精美，可以把这些图像下载（Download）下来。操作实例操作实例3-8 保存保存“新浪新浪”的网页的网页操作步骤：操作步骤：打开“新浪”的网页，在IE浏览器窗口中选择“文件”菜单中的“另存为”选项。在弹出的“保存Web页”对话框中，选择保存位置，“文件名”一般采用默认的文件名，也可以重命名，“保存类型”默认为“Web页，全部（*.htm；*.html）”。单击“保存”按钮。在“我的电脑”中打开保存网页的文件夹，在该文件夹下除了网页文件之外，还有一个前缀同名的文件夹。打开此文件夹，网页所使用的全部图像均保存在这里。网页设计与制作网页设计与制作3.2 网页中图像的

25、设置网页中图像的设置网页图像素材的搜集网页图像素材的搜集 3.2.22从网页文件中提取一副图像如果只需要选择性地下载一些图像，可以使用右键快捷菜单。操作实例操作实例3-9 保存网页上的一幅图像保存网页上的一幅图像操作步骤：操作步骤：在浏览器中打开网页。在需要下载的图像上单击鼠标右键，在快捷菜单中选择“图片另存为”选项。在“保存图片”对话框中选择“保存位置”，“文件名”和“保存类型”采用默认值即可。单击“保存”按钮。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置插入图像插入图像 3.2.3可以在Dreamweaver文档中插入GIF、JPEG和PNG图像。除了向页面中插入图

26、像之外，还可以在表格、表单或层中插入图像。在层中插入图像，可以达到图像交叠的效果。在Dreamweaver文档中插入图像时，将自动在HTML源代码中产生对该图像文件的一个引用。为保证该引用的正确，图像文件必须在当前站点中。如果图像文件不在当前站点中，Dreamweaver自动将图像文件复制到当前站点的根文件夹下。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置插入图像插入图像 3.2.3操作实例操作实例3-10 插入图像插入图像例如，在“在线旅游旺季出招抢客源”网页“news02.html”中插入1幅图片。操作步骤：操作步骤：打开“news02.html”网页。在希望插入图

27、像的位置单击鼠标设置插入点，执行下列操作之一，进入“选择图像源文件”对话框。单击“常用”工具栏中的“图像”按钮。选择“插入”菜单中的“图像”选项。然后按快捷键“Ctrl+Alt+I”。从“常用”工具栏中拖动“图像”按钮到文档窗口所需要的位置。在“选择图像源文件”对话框中，选取所要插入的图像文件“pic01.jpg”。单击“确定”按钮，图像插入完毕。所选的图像文件同时自动复制到站点定义的image文件夹中。如果所选图像文件已经存在于站点文件夹中，可以采用直接从“文件”面板中拖动图像文件到文档窗口指定位置的方法，完成图像的插入。按Ctrl+S快捷键保存网页“news02.html”。网页设计与制作

28、网页设计与制作3.2 网页中图像的设置网页中图像的设置设置图像属性设置图像属性 3.2.4 图像插入后，可以在文档窗口中直接进行修改。例如，可以使用“属性”面板为图像添加链接、添加边框、设置图像的大小、在图像周围添加间隔、设置图像的对齐方式等。1“图像”属性面板 首先在文档窗口选中指定图像，文档窗口下方自动显示“图像属性”面板。通过“图像属性”面板右下角的“展开”按钮可以控制显示常用属性或所有属性。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置设置图像属性设置图像属性3.2.4图像属性面板中的各项功能如下：图像图像旁边的数字代表所选图像的大小，下面的文本框可以输入所选图像

29、的名称。如果图像有名称，就可以在使用Dreamweaver的行为（例如“交换图像”）或使用脚本语言（例如JavaScript或VBScript）时调用该图像。“宽”和“高”“宽”和“高”规定了图像在页面上的大小，同时也为在浏览器中加载时保留空间。Dreamweaver使用图像的原始大小自动填充这些域。默认值和未标明值的单位均是像素。如果“宽”和“高”不对应图像的实际宽度和高度，则图像在浏览器中的显示将会不正常。可以按比例改变“宽”和“高”的值以缩放显示的图像，但不会影响下载时间，因为在按比例缩小图像之前，浏览器仍需要加载所有的图像数据。如果需要缩短下载时间且图像以相同的大小显示，则需要使用图像

30、编辑程序按比例缩小图像。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置设置图像属性设置图像属性3.2.4源文件用于插入图像文件或显示当前图像文件的路径。链接为图像指定一个超级链接。为图像创建超级链接有以下三种方法：拖动“指向文件”图标到“站点”窗口中的一个文件上。单击“浏览文件”文件夹图标，选取站点上的一个文件。直接键入URL路径。目标指定链接页面将在哪个窗口或框架中打开，当图像没有超级链接时该选项不可用。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置设置图像属性设置图像属性3.2.4对齐在同一行上对齐文本和图像。选项的功能如下：默认值：一般为基线对

31、齐。浏览器不同，默认值也可能不同。基线：将所选图像与文本或其他元素的基线的底部对齐。顶端：将所选图像和当前行中最高的项目（图像或文本）对齐。居中：将所选图像与文本的基线中间对齐。底部：底端对齐。文本上方：将所选图像与文本行中最高字符的顶端对齐。绝对居中：将所选图像与当前行的绝对中间对齐。绝对底部：将所选图像的底部与绝对底部（包括下行字母如字母g）对齐。左对齐：将所选图像放置在左边界上，文本在其右边折行显示，如果左对齐文本超过该行对象，一般会强迫左对齐对象向下折行。右对齐：将所选图像放置在右边界上，文本在其左边折行显示，如果右对齐文本超过该行对象，一般会强迫右对齐对象向下折行。网页设计与制作网页

32、设计与制作3.2 网页中图像的设置网页中图像的设置设置图像属性设置图像属性3.2.4 替换指定文本浏览器或关闭了图像显示功能的浏览器在图像位置上显示的替换文本。在某些浏览器中，当鼠标指向图像时，该文本也会显示。地图：允许用户创建客户端图像地图。“垂直边距”和“水平边距”在图像的四周以象素为单位添加间隔。“垂直边距”将在图像顶部和底部添加间隔；“水平边距”将在图像左边和右边添加间隔。边框设置环绕图像的边框宽度，单位是象素。输入0表示没有边框。可为链接图像和无链接图像指定边框。如果在“页面属性”对话框中指定链接文本的颜色，则链接图像边框也默认此颜色。如果设置没有链接的图像也有边框，边框颜色将和图像

33、所在段落的文本颜色一样。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置设置图像属性设置图像属性3.2.4编辑按钮编辑：启动外部图像编辑器编辑当前图像。编辑图像设置：单击可启动图像预览窗口。裁剪：单击可裁剪当前图像。重新取样：放弃外部图像编辑器编辑后的效果，恢复原始图像。亮度和对比度。锐化。Dreamweaver将使用编辑后的图像更新文档窗口。类从下拉列表框中可以选择应用已经定义好的CSS样式表，或者进行“重命名”等操作。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置设置图像属性设置图像属性3.2.42调整图像的大小调整图像的大小 可以在Dreamwe

34、aver文档窗口调整图像的大小，以便使页面布局更加合理、美观。调整图像时应注意以下问题：属性面板的“宽”与“高”将显示图像的当前宽度和高度，调整图像的大小将重置图像的“宽”与“高”。Flash影片和其他矢量图是可按比例调整的，并且不会影响其品质。改变GIF、JPEG和PNG图像的“宽”与“高”时，图像可能会失真或模糊。在Dreamweaver中调整图像的大小只是用于布局，但图像文件的实际大小不会发生改变。一旦确定了图像的理想尺寸后，应及时启动图像编辑程序，调整图像的实际大小，以节省下载时间。网页设计与制作网页设计与制作3.2 网页中图像的设置网页中图像的设置设置图像属性设置图像属性3.2.4操

35、作实例操作实例3-11 调整图像的大小调整图像的大小操作步骤：操作步骤：在文档窗口中选中图像。此时调整大小手柄出现在图像的底部、右边及在文档窗口中选中图像。此时调整大小手柄出现在图像的底部、右边及右下角。右下角。执行下列操作调整图像大小：执行下列操作调整图像大小：拖动右边的选择手柄调整图像宽度。拖动右边的选择手柄调整图像宽度。拖动底边的选择手柄调整图像高度。拖动底边的选择手柄调整图像高度。拖动右下角的选择手柄同时调整图像的宽度和高度。拖动右下角的选择手柄同时调整图像的宽度和高度。Shift+拖动右下角的选择手柄，可在调整图像时保持图像的原有比例。拖动右下角的选择手柄，可在调整图像时保持图像的原

36、有比例。在在“属性属性”面板的面板的“宽宽”和和“高高”中直接输入数值。中直接输入数值。如果需要将调整后的图像恢复初始大小，可在如果需要将调整后的图像恢复初始大小，可在“属性属性”面板中删除面板中删除“宽宽”和和“高高”的数值。的数值。网页设计与制作网页设计与制作3.3 制作图像效果 制作网页中的滚盖图制作网页中的滚盖图 3.3.1浏览网页时经常会看到这样的效果：当鼠标指向某图像时，图像大小不变但图像却变化为另一幅图像；当鼠标移出该图像时，图像又可还原。一般将这类图像称为“滚盖图”。例如，下图就是一个带有滚盖图的页面，当鼠标移入图像区域时（a）图变为（b）图所示的页面。(a)含滚盖图的页面 (

37、b)鼠标指针经过时变化的页面网页设计与制作网页设计与制作3.3 制作图像效果制作网页中的滚盖图制作网页中的滚盖图 3.3.1滚盖图常用于按钮或导航条，能给浏览者一种简单的动态感觉。滚盖图实际使用了两幅图像：一幅为原始图像，该图像在页面第一次加载时显示；一幅为鼠标指向图像，即当鼠标指向原始图像时所显示的图像。设计滚盖图时，应准备好两幅尺寸相同的图像。如果两幅图像的尺寸不同，Dreamweaver将自动调整第二幅图像的尺寸，使其与第一幅图像相匹配。网页设计与制作网页设计与制作3.3 制作图像效果制作网页中的滚盖图制作网页中的滚盖图 3.3.1操作实例操作实例3-12 在网页中制作滚盖图在网页中制作

38、滚盖图在首页在首页index.html网页中，建立网页中，建立“旅游资讯旅游资讯”滚盖图。滚盖图。操作步骤：操作步骤：打开打开index.html网页，将原有的网页，将原有的“旅游资讯旅游资讯”蓝色字样图像删除。将光蓝色字样图像删除。将光标仍定位在此单元格中。标仍定位在此单元格中。选择以下操作之一，弹出选择以下操作之一，弹出“插入鼠标经过图像插入鼠标经过图像”对话框。对话框。在在“常用常用”工具栏的工具栏的“图像图像”下拉列表中，选择下拉列表中，选择“鼠标经过图像鼠标经过图像”选项。选项。在在“插入插入”菜单中，选择菜单中，选择“图像对象图像对象”中的中的“鼠标经过图像鼠标经过图像”选项。选项

39、。在在“插入鼠标经过图像插入鼠标经过图像”对话框，作如下设置：对话框，作如下设置：在在“图像名称图像名称”框中输入滚盖图的名称，例如，输入框中输入滚盖图的名称，例如，输入“旅游资讯旅游资讯”，也可以使用，也可以使用默认设置。默认设置。在在“原始图像原始图像”框中单击框中单击“浏览浏览”按钮并选取图像文件，或直接输入第一幅图像按钮并选取图像文件，或直接输入第一幅图像文件的路径。例如，选取图片文件的路径。例如，选取图片“image/dot01.jpg”。在在“鼠标经过图像鼠标经过图像”框中单击框中单击“浏览浏览”按钮并选取图像文件，或直接输入第二幅按钮并选取图像文件，或直接输入第二幅图象文件的路径

40、。例如，选取图片图象文件的路径。例如，选取图片“image/dot01-new.jpg”。网页设计与制作网页设计与制作3.3 制作图像效果制作网页中的滚盖图制作网页中的滚盖图 3.3.1如果需要将图像预先加载到浏览器的高速缓存中，可选取“预载鼠标经过图像”选项。此复选框一般被选中。在“按下时，前往的URL”框中，单击“浏览”按钮并选取链接文件，或直接输入链接文件的路径。例如，连接“html/news01.html”。注意：如果不为图像设置链接，Dreamweaver将在HTML源代码的滚盖图附加行为中插入一个空链接（#），如果删除该空链接滚盖图将不能正常工作。单击“确定”按钮，关闭“插入鼠标经

41、过图象”对话框。快捷键“Ctrl+S”保存网页。按快捷键F12预览网页，在浏览器中将鼠标指向原始图像时将显示效果。网页设计与制作网页设计与制作3.3 制作图像效果制作图像映射制作图像映射 3.3.2一幅图像一般只有一个超级链接。如果希望一幅图像具有多个超级链接，则必须使用图像热点进行处理。例如，在网页上插入一幅世界地图，该地图可创建多个不同的热点区域：当浏览者单击亚洲地区热点时，即可进入有关亚洲的页面；当浏览者单击非洲地区热点时，即可进入有关非洲的页面这种链接称为“图像映射”。所谓“图像映射”（Image Map），就是把一幅图像分割为若干个区域，每个区域称为一个“热点”（Hotsport），

42、当浏览者单击某个热点时，将引发一个动作。例如，打开一个相关的网页文件。使用“图像属性”面板可以图形化地创建和编辑客户端图像映射。网页设计与制作网页设计与制作3.3 制作图像效果制作图像映射制作图像映射 3.3.2操作实例操作实例3-13 创建客户端图像映射创建客户端图像映射在“北京漫游”bjmy.html网页中，建立“各旅游景点”的图像映射。操作步骤：操作步骤：打开bjmy.html网页，选中“北京地图”图像。在图像“属性”面板的“地图”名称框中为图像映射输入一个惟一的名称。例如，输入“北京地图”。注意：如果在同一文档中使用多个图像映射，应保证各个地图使用不相同的名称。在“属性”面板中选取热点

43、工具，创建热点：矩形热点工具。在图像上拖动鼠标创建矩形热点。圆形热点工具。在图像上拖动鼠标创建圆形热点。多边形热点工具。创建非规则形状的热点，每单击一次定义多边形的一个角，单击“指针热点工具”封闭该形状。指针热点工具。需要调整热点区域的大小时，单击“指针热点工具”，然后拖动热 点区域的控点到合适的大小；需要调整热点区域的位置时，单击“指针热点工具”，然后按住鼠标左键拖动热点区域到合适的位置。网页设计与制作网页设计与制作3.3 制作图像效果制作图像映射制作图像映射 3.3.2操作实例操作实例3-13 创建客户端图像映射创建客户端图像映射在“北京漫游”bjmy.html网页中，建立“各旅游景点”的

44、图像映射。操作步骤：操作步骤：打开bjmy.html网页，选中“北京地图”图像。在图像“属性”面板的“地图”名称框中为图像映射输入一个惟一的名称。例如，输入“北京地图”。注意：如果在同一文档中使用多个图像映射，应保证各个地图使用不相同的名称。在“属性”面板中选取热点工具，创建热点：矩形热点工具。在图像上拖动鼠标创建矩形热点。圆形热点工具。在图像上拖动鼠标创建圆形热点。多边形热点工具。创建非规则形状的热点，每单击一次定义多边形的一个角，单击“指针热点工具”封闭该形状。指针热点工具。需要调整热点区域的大小时，单击“指针热点工具”，然后拖动热 点区域的控点到合适的大小；需要调整热点区域的位置时，单击

45、“指针热点工具”，然后按住鼠标左键拖动热点区域到合适的位置。网页设计与制作网页设计与制作3.3 制作图像效果制作图像映射制作图像映射 3.3.2 例如，选择“矩形热点工具”在图像的“司马台长城”上设置热点。创建矩形热点 热点“属性”面板网页设计与制作网页设计与制作3.3 制作图像效果制作图像映射制作图像映射 3.3.2 选中热点，显示热点“属性”面板，如图3-24所示。可做如下设置：在“链接”框中，单击“浏览文件”按钮，选取热点的链接文件。例如，链接“./image/simatai.jpg”。在“目标”框中，选择链接文件显示的窗口。例如，选择“-blank”选项，在新窗口显示链接文件。重复步骤

46、，定义图像映射中的其他热点。图像映射创建结束时，单击文档空白区域以恢复图像属性面板的显示。按快捷键“Ctrl+S”保存网页。按快捷键F12预览网页，当鼠标指向热点区域时，鼠标旁将显示提示信息，任务栏将显示链接文件的路径，单击某一热点，在新窗口显示链接文件。网页设计与制作网页设计与制作3.3 制作图像效果制作图像的提示信息制作图像的提示信息 3.3.3操作实例操作实例3-14 制作图像的提示信息制作图像的提示信息在“北京漫游”bjmy.html网页中，为“北京地图”图像制作提示信息。操作步骤：操作步骤：打开bjmy.html网页，选中“北京地图”图像或该图像设置的热点。在图像“属性”面板的“替换

47、”文本框中输入图像的提示信息，例如，输入“北京地图”。按快捷键Ctrl+S保存网页。按快捷键F12预览网页。网页设计与制作网页设计与制作3.4 设置超级链接超级链接概述超级链接概述3.4.1Dreamweaver提供了几种创建超级链接的方式，用于创建指向文档、图像、多媒体文件或可下载软件的超级链接，并可为文档内的标题、列表、表格、层或框架中的任何文本或图像创建链接。1.超级链接的类型 超级链接分为内部链接和外部链接。内部链接又称为本地链接，是指同一网站文件之间的链接。外部链接是指不同网站文件之间的链接。（1）文档链接：指向其他文档或文件的链接。例如，图像、影片或声音文件的链接。（2）命名锚记链

48、接：又称为书签链接，这种链接将转到文档中的一个指定位置。（3）电子邮件链接：这种链接将创建一个新的空白电子邮件，其中收件人地址已经填入。（4）空链接：这种链接不会跳转到任何位置，对于附加Dreamweaver行为有特殊用处。（5）脚本链接：创建执行JavaScript代码的链接。网页设计与制作网页设计与制作3.4 设置超级链接超级链接概述超级链接概述3.4.12创建本地链接的几种方法创建本地链接的几种方法操作实例3-15 使用“属性”面板的“指向文件”图标创建链接 在首页index.html网页中，为旅游资讯文字“生态旅游国内渐成时尚 未来在异化中寻求发展”创建链接news03.html。操作

49、步骤：分别打开index.html、news03.html网页。在“窗口”菜单，选择“垂直平铺”选项。选中旅游资讯中的文字“生态旅游国内渐成时尚 未来在异化中寻求发展”。将“属性”面板的“指向文件”图标拖动到另外打开的news03.html网页上。释放鼠标，创建结束。网页设计与制作网页设计与制作3.4 设置超级链接超级链接概述超级链接概述3.4.1操作实例操作实例3-16 使用菜单（或快捷菜单）创建链接使用菜单（或快捷菜单）创建链接为news03.html网页设置“返回首页”的链接。操作步骤：操作步骤：在“设计”窗口打开网页news03.html。选中内容区左上角“首页”两个字。选择“修改”菜

50、单中的“创建链接”选项（或在选取的文本或图像上单击鼠标右键，在快捷菜单中选择“创建链接”选项），在“选择文件”对话框中选取首页文件index.html。按快捷键“Ctrl+S”保存网页。按快捷键F12预览网页。网页设计与制作网页设计与制作3.4 设置超级链接超级链接概述超级链接概述3.4.1操作实例操作实例3-17 使用属性面板中的使用属性面板中的“浏览文件浏览文件”图标或图标或“链接链接”框创建链接框创建链接操作步骤：操作步骤：在在“设计设计”窗口选取文本或图像。窗口选取文本或图像。在在“属性属性”的的HTML面板执行下列操作之一：面板执行下列操作之一：单击单击“浏览文件浏览文件”图标，在弹