网页设计与制作第2章 dreamweaver MX基本操作.ppt

《网页设计与制作第2章 dreamweaver MX基本操作.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第2章 dreamweaver MX基本操作.ppt（51页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作第网页设计与制作第2章章dreamweaverMX基基本操作本操作DreamweaverMX2004基本操作基本操作n n2.1初识dreamweaverMX2004n n2.2站点的创建与页面属性设置n n2.3添加文本丰富的内容2.1初识初识dreamweaverMX2004n n2.1.1dreamweaverMX20042.1.1dreamweaverMX2004工工工工作界面介绍作界面介绍作界面介绍作界面介绍n n2.1.22.1.2网页的创建和保存网页的创建和保存网页的创建和保存网页的创建和保存n n2.1.32.1.3网页的修改与预览网页的修改与预览网页的修改与预览

2、网页的修改与预览网页的打开；跟其他软件打开文档相似。网页的打开；跟其他软件打开文档相似。网页的打开；跟其他软件打开文档相似。网页的打开；跟其他软件打开文档相似。网页的创建：直接创建空白文档；通过模网页的创建：直接创建空白文档；通过模网页的创建：直接创建空白文档；通过模网页的创建：直接创建空白文档；通过模板创建有格式的网页文档。板创建有格式的网页文档。板创建有格式的网页文档。板创建有格式的网页文档。网页的保存：直接保存；另存为网页的保存：直接保存；另存为网页的保存：直接保存；另存为网页的保存：直接保存；另存为。命名注意命名注意命名注意命名注意：vv最好做到最好做到最好做到最好做到“见名知义见名知

3、义见名知义见名知义”，看到名字就知道网页里的相应内，看到名字就知道网页里的相应内，看到名字就知道网页里的相应内，看到名字就知道网页里的相应内容；容；容；容；vv名字最好用英文字母或拼音，不要包含中文或名字最好用英文字母或拼音，不要包含中文或名字最好用英文字母或拼音，不要包含中文或名字最好用英文字母或拼音，不要包含中文或 一些特殊的一些特殊的一些特殊的一些特殊的字符。字符。字符。字符。2.1初识初识dreamweaverMX2004n n2.1.22.1.2网页的创建和保存网页的创建和保存网页的创建和保存网页的创建和保存n n文件名的开头不能使用数字、运算符等符号，文件名最文件名的开头不能使用数

4、字、运算符等符号，文件名最好不要使用中文，因为如果主机采用好不要使用中文，因为如果主机采用UNIXUNIX系统，中文系统，中文名会出错。文件的命名一般采用以下几种方法：名会出错。文件的命名一般采用以下几种方法：n n汉语拼音汉语拼音汉语拼音汉语拼音：这是最简单的命名方法，根椐页面的标这是最简单的命名方法，根椐页面的标题或主要内容，提取两三个概况字，把它们的汉语拼音题或主要内容，提取两三个概况字，把它们的汉语拼音作为文件名。例：作为文件名。例：“产品中心产品中心”页面，提取页面，提取“产品产品”这这两个字的汉语拼音，因此文件名为两个字的汉语拼音，因此文件名为“chanping.htm”chanp

5、ing.htm”。n n拼音缩写拼音缩写拼音缩写拼音缩写：根椐页面的标题或主要内容，提取每个根椐页面的标题或主要内容，提取每个汉字拼音的第汉字拼音的第1 1个字母作为文件名。个字母作为文件名。例：例：“留言簿留言簿”的拼音为的拼音为“liuyanbo”liuyanbo”，那么文件名为，那么文件名为“lyb.asp”lyb.asp”。这种方法简单，但不带提示性，不便于。这种方法简单，但不带提示性，不便于日后的维护。日后的维护。n n英文缩写：英文缩写：英文缩写：英文缩写：这种方法也较难记忆，一般适用于专有这种方法也较难记忆，一般适用于专有名词。例：名词。例：“ActiveServerPages”

6、ActiveServerPages”这个专有名词一般这个专有名词一般用用ASPASP来代替。来代替。n n英文原文：英文原文：英文原文：英文原文：这种方法准确、实用，最好的一种方法。这种方法准确、实用，最好的一种方法。例：例：“公司简介公司简介”的页面命名为的页面命名为“company_introduction.htm”.company_introduction.htm”.2.2站点的创建与页面属性设置站点的创建与页面属性设置n n2.2.1创建站点创建站点创建站点的第一步就是规划站点，创建站点的第一步就是规划站点，再通过再通过DREAMWEAVERDREAMWEAVER站点管理功站点管理功能

7、创建站点的框架，包括主页、分支能创建站点的框架，包括主页、分支页面和相应的文件夹等。将多个网页页面和相应的文件夹等。将多个网页文档链接起来就构成了站点，站点可文档链接起来就构成了站点，站点可以小到一个网页，也可以大到整个网以小到一个网页，也可以大到整个网站。站。n n2.2.2页面属性的设置页面属性的设置2.3在网页中加入文本在网页中加入文本n n2.3.12.3.1插入文本插入文本插入文本插入文本直接输入或者通过复制直接输入或者通过复制n n2.3.22.3.2通过属性面板对字体进行设置通过属性面板对字体进行设置通过属性面板对字体进行设置通过属性面板对字体进行设置输入特殊字符；输入特殊字符；

8、输入一个空格：按输入一个空格：按SPACESPACE键键连续输入多个空格：连续输入多个空格：CTR+SHIFT+SPACECTR+SHIFT+SPACE换行：换行：SHIFT+ENTERSHIFT+ENTER分段：分段：ENTERENTER添加并编辑水平线；添加并编辑水平线；插入日期；插入日期；n n2.3.22.3.2让文本更具个性让文本更具个性让文本更具个性让文本更具个性n n2.3.32.3.3结合实例讲解结合实例讲解结合实例讲解结合实例讲解2.4在网页面中插入图象在网页面中插入图象n n2.4.12.4.1网页的色彩网页的色彩网页的色彩网页的色彩n n2.4.22.4.2网页中图象的格

9、式网页中图象的格式网页中图象的格式网页中图象的格式n n2.4.32.4.3在网页中插入图象在网页中插入图象在网页中插入图象在网页中插入图象n n2.4.42.4.4设置图象属性设置图象属性设置图象属性设置图象属性n n2.4.52.4.5鼠标经过图象鼠标经过图象鼠标经过图象鼠标经过图象n n2.4.62.4.6图象占位符图象占位符图象占位符图象占位符2.4.1网页的色彩网页的色彩n n在网页中是以在网页中是以RGBRGB方式来表示颜色的，方式来表示颜色的，RGBRGB是是RedRed、GreenGreen、BlueBlue的缩写。的缩写。RGBRGB颜色包括几百万种之多，这么多颜色包括几百万

10、种之多，这么多的颜色却有一个共同点，就是都由红、的颜色却有一个共同点，就是都由红、绿、蓝这绿、蓝这3 3种基色调和而成，这种基色调和而成，这3 3种基种基色中每一种颜色的饱和度和透明度都色中每一种颜色的饱和度和透明度都是可以变化的，取值范围为是可以变化的，取值范围为02550255，例如，红色表示为例如，红色表示为Red100%Red100%，Green0%Green0%，Blue0%Blue0%，简单的表示法，简单的表示法为（为（255255，0 0，0 0），用十六进制数值），用十六进制数值来表示就是来表示就是“FF0000”FF0000”，在，在HTMLHTML语语言中我们直接十六进制数

11、值来命名颜言中我们直接十六进制数值来命名颜色。色。2.4.1网页的色彩网页的色彩n n用排列组合方法计算：用排列组合方法计算：256*256*256=16256*256*256=16777216777216，总共可以得到，总共可以得到16772161677216种种RGBRGB颜颜色，这是理论上的。在实际中，色，这是理论上的。在实际中，只有只有只有只有216216种种种种颜色颜色颜色颜色能在浏览器中正常显示。多于这个范围能在浏览器中正常显示。多于这个范围的颜色，有的浏览器显示时可能发生偏差，的颜色，有的浏览器显示时可能发生偏差，不能正常显示。因此，我们将能被所有浏览不能正常显示。因此，我们将能

12、被所有浏览器正常显示的器正常显示的216216种颜色称为种颜色称为网页安全色网页安全色网页安全色网页安全色。DreamweaverDreamweaver中提供了具有网页安全颜色范中提供了具有网页安全颜色范畴的调色板，使网页的颜色选取控制在安全畴的调色板，使网页的颜色选取控制在安全范围之内。范围之内。n n这这216216种颜色除黑色和白色外，其他全部属种颜色除黑色和白色外，其他全部属于彩色范畴。网页制作是用彩色还是非彩色于彩色范畴。网页制作是用彩色还是非彩色好呢？其实只要运用的合理，都能达到好的好呢？其实只要运用的合理，都能达到好的效果。效果。n n我们通常的做法是：主要内容文字用非彩色我们通

13、常的做法是：主要内容文字用非彩色我们通常的做法是：主要内容文字用非彩色我们通常的做法是：主要内容文字用非彩色（黑色），边框，背景，图片用彩色。这样（黑色），边框，背景，图片用彩色。这样（黑色），边框，背景，图片用彩色。这样（黑色），边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。页面整体不单调，看主要内容也不会眼花。页面整体不单调，看主要内容也不会眼花。页面整体不单调，看主要内容也不会眼花。2.4.1网页的色彩网页的色彩1 1非彩色的搭配非彩色的搭配非彩色的搭配非彩色的搭配n n黑白是最基本和最简单的搭配，它们黑白是最基本和最简单的搭配，它们以其特有的性质一直在艺术殿堂中占以

14、其特有的性质一直在艺术殿堂中占有重要的地位，如中国的水墨画、黑有重要的地位，如中国的水墨画、黑白摄影等艺术作品，给人一种质朴、白摄影等艺术作品，给人一种质朴、安逸、超脱的美感。但要把握好很难。安逸、超脱的美感。但要把握好很难。n n灰色是万能色，可以和任何彩色搭配，灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。也可以帮助两种对立的色彩和谐过渡。2.4.1网页的色彩网页的色彩n n2 2彩色的搭配彩色的搭配彩色的搭配彩色的搭配n n色环：我们将色彩按色环：我们将色彩按 红红-黄黄-绿绿-蓝蓝-红红 依次过度渐变，就可以得到一个色彩环。依次过度渐变，就可以得到一个色彩环。n

15、n色环的两端是暖色和寒色，当中是中型色。色环的两端是暖色和寒色，当中是中型色。如图如图2-62-6所示。所示。n n红红红红.橙橙橙橙.橙黄橙黄橙黄橙黄.黄黄黄黄.黄绿黄绿黄绿黄绿.绿绿绿绿.青绿青绿青绿青绿.蓝绿蓝绿蓝绿蓝绿.蓝蓝蓝蓝.蓝紫蓝紫蓝紫蓝紫.紫紫紫紫.紫红紫红紫红紫红.n n/_/_/_/_/_/_/_/_/n n/n n暖色系暖色系暖色系暖色系中性系中性系中性系中性系寒色系寒色系寒色系寒色系中性系中性系中性系中性系 2.4.1网页的色彩n n3 3色彩的心理感觉色彩的心理感觉色彩的心理感觉色彩的心理感觉n n不同的颜色会给浏览者不同的心理感受。不同的颜色会给浏览者不同的心理感受

16、。n n红色红色-是一种激奋的色彩。刺激效果，能使是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。人产生冲动，愤怒，热情，活力的感觉。n n绿色绿色-介于冷暖两中色彩的中间，显得和睦，介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。它和金黄，淡白宁静，健康，安全的感觉。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。搭配，可以产生优雅，舒适的气氛。n n橙色橙色-也是一种激奋的色彩，具有轻快，欢也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。欣，热烈，温馨，时尚的效果。n n黄色黄色-具有快乐，希望，智慧和轻快的个性，具有快乐，希望，智慧和轻快的个性，它

17、的明度最高。它的明度最高。n n蓝色蓝色-是最具凉爽，清新，专业的色彩。它是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气和白色混合，能体现柔顺，淡雅，浪漫的气氛（象天空的色彩氛（象天空的色彩:）2.4.1网页的色彩n n白色白色-具有洁白，明快，纯真，清洁具有洁白，明快，纯真，清洁的感受。的感受。n n黑色黑色-具有深沉，神秘，寂静，悲哀，具有深沉，神秘，寂静，悲哀，压抑的感受。压抑的感受。n n灰色灰色-具有中庸，平凡，温和，谦让，具有中庸，平凡，温和，谦让，中立和高雅的感觉。中立和高雅的感觉。n n每种色彩在饱和度，透明度上略微变每种色彩在饱和度，透明度上略微变化就

18、会产生不同的感觉。以绿色为例，化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。蓝绿色则显得幽宁，阴深。n n红色代表热情、活泼、热闹、温暖、幸福、吉祥红色代表热情、活泼、热闹、温暖、幸福、吉祥 橙色代表光明、华丽、兴奋、甜蜜、快乐橙色代表光明、华丽、兴奋、甜蜜、快乐 黄色代表明朗、愉快、高贵、希望黄色代表明朗、愉快、高贵、希望 绿色代表新鲜、平静、和平、柔和、安逸、青春绿色代表新鲜、平静、和平、柔和、安逸、青春 蓝色代表深远、永恒、沉静、理智、诚实、寒冷蓝色代表深远、永恒、沉静、理智、诚实、寒冷 紫色代表优雅、高贵、魅力

19、、自傲紫色代表优雅、高贵、魅力、自傲 白色代表纯洁、纯真、朴素、神圣、明快白色代表纯洁、纯真、朴素、神圣、明快 灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 黑色代表崇高、坚实、严肃、刚健、粗莽黑色代表崇高、坚实、严肃、刚健、粗莽 还有还有 一般认为颜色的象征作用如下一般认为颜色的象征作用如下:红色红色:革命革命.热烈热烈.牺牲牺牲.豪迈豪迈 绿色绿色:和蔼悠闲和蔼悠闲.和平娴雅和平娴雅 黄色黄色:温暖温暖 高贵高贵 显赫显赫 豪华豪华 蓝色蓝色:和平和平 善良善良 冷静冷静 深沉深沉 白色白色:轻快轻快 纯洁纯洁 真挚真挚 黑色黑色:沉重沉

20、重 悲哀悲哀 神秘神秘2.4.1网页的色彩n n4 4网页色彩搭配的原理网页色彩搭配的原理网页色彩搭配的原理网页色彩搭配的原理n n色彩的色彩的鲜明性鲜明性鲜明性鲜明性。网页的色彩要鲜艳，。网页的色彩要鲜艳，容易引人注目。容易引人注目。n n色彩的色彩的独特性独特性独特性独特性。要有与众不同的色彩，。要有与众不同的色彩，使得大家对你的网页印象强烈。使得大家对你的网页印象强烈。n n色彩的色彩的合适性合适性合适性合适性。就是说色彩和你表达。就是说色彩和你表达的内容气氛相适合。的内容气氛相适合。n n色彩的色彩的联想性联想性联想性联想性。不同色彩会产生不同。不同色彩会产生不同的联想，蓝色想到天空，

21、黑色想到黑的联想，蓝色想到天空，黑色想到黑夜，红色想到喜庆等，选择色彩要和夜，红色想到喜庆等，选择色彩要和你网页的内涵相关联。你网页的内涵相关联。2.4.1网页的色彩n n5 5网页色彩搭配的技巧网页色彩搭配的技巧网页色彩搭配的技巧网页色彩搭配的技巧n n用一种色彩。用一种色彩。用一种色彩。用一种色彩。这里是指先选定一种色彩，然这里是指先选定一种色彩，然后调整透明度或者饱和度，（说得通俗些就后调整透明度或者饱和度，（说得通俗些就是将色彩变淡或则加深），产生新的色彩，是将色彩变淡或则加深），产生新的色彩，用于网页。这样的页面看起来用于网页。这样的页面看起来色彩统一，有色彩统一，有色彩统一，有色彩

22、统一，有层次感层次感层次感层次感。n n用两种色彩。用两种色彩。用两种色彩。用两种色彩。先选定一种色彩，然后选择它先选定一种色彩，然后选择它的的对比色对比色对比色对比色（在（在photoshopphotoshop里按里按ctrl+shift+Ictrl+shift+I）。）。n n用一个色系。用一个色系。用一个色系。用一个色系。简单的说简单的说就是用一个感觉的色就是用一个感觉的色就是用一个感觉的色就是用一个感觉的色彩彩彩彩，例如淡蓝、淡黄、淡绿；或者土黄、土，例如淡蓝、淡黄、淡绿；或者土黄、土灰、土蓝。灰、土蓝。n n用黑色和一种彩色。用黑色和一种彩色。用黑色和一种彩色。用黑色和一种彩色。比如

23、大红的字体配黑色比如大红的字体配黑色的边框感觉很的边框感觉很“跳跳”。2.4.1网页的色彩在网页配色中，忌讳的是：在网页配色中，忌讳的是：1.不要将所有颜色都用到，尽量控控制在三种色彩以内制在三种色彩以内。2.背景和前文的对比尽量要大背景和前文的对比尽量要大，（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。以便突出主要文字内容。2.4.2网页中的图像格式n n图像在网页中具有画龙点睛的作用，它能装图像在网页中具有画龙点睛的作用，它能装饰网页，表达个人的情调和风格。但在网页饰网页，表达个人的情调和风格。但在网页上加入的图片越多，浏览的速度就会受到影上加入的图片越多，浏览的速度就会受到影

24、响导致用户失去耐心而离开页面。网页中使响导致用户失去耐心而离开页面。网页中使用的图像可以是用的图像可以是GIFGIF、JPEGJPEG、BMPBMP、TIFFTIFF、PNGPNG等格式的图像文件，其中使用最广泛主等格式的图像文件，其中使用最广泛主要是要是GIFGIF和和JPEGJPEG两种格式。两种格式。n n它们有一些共同的特点：它们有一些共同的特点：都属于压缩的图片都属于压缩的图片都属于压缩的图片都属于压缩的图片文件格式，文件的信息量很小，适用于网络文件格式，文件的信息量很小，适用于网络文件格式，文件的信息量很小，适用于网络文件格式，文件的信息量很小，适用于网络传输；适用于各种平台。因此

25、大部分的浏览传输；适用于各种平台。因此大部分的浏览传输；适用于各种平台。因此大部分的浏览传输；适用于各种平台。因此大部分的浏览器都把它们当作标准规格器都把它们当作标准规格器都把它们当作标准规格器都把它们当作标准规格。而而PNGPNG格式的图格式的图像只有在像只有在MicrosoftIEMicrosoftIE（4.04.0以上版本）和以上版本）和NetscapeNavigatorNetscapeNavigator（4.044.04）以上版本才能）以上版本才能得到支持。得到支持。2.4.2网页中的图像格式n nGIFGIF的英文全称是的英文全称是“GraphicsInterchangeGraphi

26、csInterchangeFormat”Format”，中文意思是，中文意思是“交换的图像格式交换的图像格式”。GIFGIF文件采用文件采用LosslessLossless（非失真）的压缩方（非失真）的压缩方式，在压缩图片文件的过程中，图形的像素式，在压缩图片文件的过程中，图形的像素信息不会被牺牲掉，被牺牲的是图形的颜色，信息不会被牺牲掉，被牺牲的是图形的颜色，因此，因此，GIFGIF文件最多只能保存文件最多只能保存256256色。色。GIFGIF格格式支持图片游离在背景之上的视觉效果，式支持图片游离在背景之上的视觉效果，n nJPEGJPEG图片文件采用图片文件采用lossylossy（失真

27、）的压缩方（失真）的压缩方式，因此式，因此JPEGJPEG可支持多达可支持多达16M16M颜色，它能颜色，它能展现十分丰富生动的图像。但压缩方式是以展现十分丰富生动的图像。但压缩方式是以损失图像质量为代价，压缩比越高图像质量损失图像质量为代价，压缩比越高图像质量损失越大，图像文件也就越小。损失越大，图像文件也就越小。2.4.2网页中的图像格式GIFGIF图像文件的主要优点：图像文件的主要优点：图像文件的主要优点：图像文件的主要优点：1.1.最大支持最大支持256256色，因此其图像一般能色，因此其图像一般能正常显示。正常显示。2.2.由于图像使用颜色少，压缩率高，因由于图像使用颜色少，压缩率高

28、，因此文件的尺寸小。此文件的尺寸小。3.GIF3.GIF格式的图像支持格式的图像支持1bit1bit透明度，因此透明度，因此可以制作背景透明的文字或图像。可以制作背景透明的文字或图像。4.4.可以将可以将GIFGIF格式的图像制作成动画。格式的图像制作成动画。GIFGIF图像文件的主要缺点：图像文件的主要缺点：图像文件的主要缺点：图像文件的主要缺点：n n由于最大支持由于最大支持256256色，因此不适合于色，因此不适合于有晕光，渐变色彩等颜色细腻的图像有晕光，渐变色彩等颜色细腻的图像和照片。和照片。2.4.2网页中的图像格式JPEG格式图像的主要优点：格式图像的主要优点：n n支持24bit

29、图像，能够很好地表现照片等全彩色的图像。n n可以生成类似GIF的交错关联图像渐变JPEGn n可以制作透明的JPEG图像。JPEG格式图像的主要缺点：格式图像的主要缺点：n n有损压缩使之不适合表达高清晰度的图像正确使用正确使用GIF和和JPEG：n nGIF适用于向量式、少于256色的图像。n nGIF是制作透明图像和动画GIF的首选格式。n nJPEG适用于有渐变色彩、颜色细腻的图片PNG图像格式PNGPNG图像格式是一种新兴的网络图像格式。图像格式是一种新兴的网络图像格式。它是目前保证最不失真的格式，它汲取了它是目前保证最不失真的格式，它汲取了GIFGIF和和JPEGJPEG格式的优点

30、。具体体现如下：格式的优点。具体体现如下：1.1.能把图像文件压缩到极限以利于网络的传输，能把图像文件压缩到极限以利于网络的传输，但又能保留所有与图像品质有关的信息但又能保留所有与图像品质有关的信息;2.2.采用无损压缩来减少文件的大小采用无损压缩来减少文件的大小;3.3.显示速度快显示速度快;4.4.支持透明图像的制作支持透明图像的制作;缺点：不支持动画应用效果缺点：不支持动画应用效果FIREWORKSFIREWORKS的默认格式是的默认格式是PNG;PNG;PhotoshopPhotoshop的默认格式是的默认格式是PSD.PSD.2.4.3在网页中插入图像在向网页中插入图像前，最好先保存

31、文件。在对话框中选择图像文件，这时要注意图像文件应在站点目录下，若不在，则会弹出对话框询问是否将图像文件复制到网站的目录下，应单击“是”按钮，将图像保存到网站的目录下。2.4.4设置图像属性图像插入文档后，其位置、大小等设置可能不尽如意，可通过【属性】面板，对它进行设置。单击图像，其周围出现控制点，表示已选中，状态栏标签被选中，【属性】面板显示关于图像的属性，单击扩展按钮，可见到全部的属性。2.4.4设置图像属性n n【图像图像】：旁边的数字表示图像的大小，文：旁边的数字表示图像的大小，文本框用于输入图像名称，在脚本语言可通过本框用于输入图像名称，在脚本语言可通过名称中对图像进行引用。对应于名

32、称中对图像进行引用。对应于属性。属性。n n【宽宽】和和【高高】：用于设置图像的大小，也：用于设置图像的大小，也可通过鼠标拖动控制点，来调整图像的大小。可通过鼠标拖动控制点，来调整图像的大小。图像大小改变后，在宽和高之间，增加了一图像大小改变后，在宽和高之间，增加了一个按钮，单击它可恢复图像的大小。若想保个按钮，单击它可恢复图像的大小。若想保存调整后的大小，可单击重新取样按钮，这存调整后的大小，可单击重新取样按钮，这样能减少马赛克现象。样能减少马赛克现象。n n【源文件源文件】：指出图像的具体位置，要改换：指出图像的具体位置，要改换图像，可通过单击文件夹按钮，来重新选择图像，可通过单击文件夹按

33、钮，来重新选择图片，对应于图片，对应于标签标签srcsrc属性。属性。n n【替代替代】：是图像的注释，当用户的浏览器：是图像的注释，当用户的浏览器不能正常显示图像时，便在图像的位置用这不能正常显示图像时，便在图像的位置用这个注释代替图像。对应于个注释代替图像。对应于标签标签altalt属性。属性。2.4.4设置图像属性n n【链接链接】：指定链接的目标页面或定位的：指定链接的目标页面或定位的URLURL。n n【地图地图】：用于制作图像映射。它有：用于制作图像映射。它有3 3个工具按钮。个工具按钮。n n【垂直边距垂直边距】：设置图像在垂直方向与文本或其他页面元：设置图像在垂直方向与文本或其

34、他页面元素的间距。素的间距。n n【水平边距水平边距】：设置图像在水平方向与文本或其他页面元：设置图像在水平方向与文本或其他页面元素的间距。素的间距。n n【边框边框】：设置图像边框的宽度，单位是像素为：设置图像边框的宽度，单位是像素为“0”0”，表，表示无边框。对应于示无边框。对应于标签标签borderborder属性。属性。n n【低解析度源低解析度源】：指定应在主要图像之前载入的图像，这：指定应在主要图像之前载入的图像，这个图像是原图像的一个低分辨率版本，它的载入更快，这个图像是原图像的一个低分辨率版本，它的载入更快，这样就可以让浏览者对等待显示的图像有一个了解。但也可样就可以让浏览者对

35、等待显示的图像有一个了解。但也可以使用任何一个和主要图像尺寸相同的图像。以使用任何一个和主要图像尺寸相同的图像。n n【编辑编辑】：这里有：这里有66个按钮。可以对选定的图像进行编辑。个按钮。可以对选定的图像进行编辑。n n:启动图像处理软件对图像进行编辑，一般为启动图像处理软件对图像进行编辑，一般为FiresorksFiresorks，当，当保存文件返回时，将使用保存后的图像更新文档保存文件返回时，将使用保存后的图像更新文档.n n:启动图像处理启动图像处理FiresorksFiresorks对图像进行优化。对图像进行优化。n n:裁剪图像。裁剪图像。n n:重新取样。重新取样。n n:调节

36、亮度和对比度。调节亮度和对比度。n n:锐化图像。锐化图像。2.4.4设置图像属性n n【对齐对齐】:用于设置图像与文本或其他元素的位置关用于设置图像与文本或其他元素的位置关系，有系，有9 9项排列方式。对应于属性项排列方式。对应于属性alignalign。n n默认值：取决于浏览器所设置的排列方式。默认值：取决于浏览器所设置的排列方式。n n基线：将文本或其他元素的基线与所选图片的底边对基线：将文本或其他元素的基线与所选图片的底边对齐。齐。n n顶端：上端对齐，将文本或其他元素与图片所在行的顶端：上端对齐，将文本或其他元素与图片所在行的最顶端对齐。最顶端对齐。n n居中：将文本或其他元素与图

37、片的中部对齐。居中：将文本或其他元素与图片的中部对齐。n n底部：将文本或其他元素与图片的底部对齐。底部：将文本或其他元素与图片的底部对齐。n n文本上方：将文本行中的最高字符与图片上端对齐。文本上方：将文本行中的最高字符与图片上端对齐。n n绝对居中：将图片的中部与文本的中部对齐。绝对居中：将图片的中部与文本的中部对齐。n n绝对底部：将图片的绝对底部与文本的绝对底部对齐。绝对底部：将图片的绝对底部与文本的绝对底部对齐。n n左对齐：将图片放置到文本块左边缘，与当前行的顶左对齐：将图片放置到文本块左边缘，与当前行的顶端对齐，文本位于图像的右边和下面。端对齐，文本位于图像的右边和下面。n n右

38、对齐：将图片放置到文本块右边缘，文本位于图像右对齐：将图片放置到文本块右边缘，文本位于图像的左边。的左边。2.4.5鼠标经过图像在浏览网页时，有时会看到当鼠标指针移到某幅图像时，该图像会变为另外一幅图像，而移开鼠标指针时，该图像又会变回原来的图像。这就是鼠标经过图像时产生的交互。2.4.6图像占位符图像占位符是网站排版布局中经常用到的功能，我们可以在要放置图像的位置，暂时放置占位符，等到处理好图像时再作替换。2.5创建网站相册用用DreamweaverDreamweaver用制作电子相册，实用制作电子相册，实际上通过际上通过JavaScriptJavaScript调用调用FireworksFi

39、reworks来处理来处理一系列的图像，自动为图像创建，并自动一系列的图像，自动为图像创建，并自动完成缩略图与原始图片的链接。在创建电完成缩略图与原始图片的链接。在创建电子相册前，要先作一些准备工作，在站点子相册前，要先作一些准备工作，在站点根目录下建立两个文件夹，一个用来存放根目录下建立两个文件夹，一个用来存放原始图片，我们假设为原始图片，我们假设为“firstpic”firstpic”，另，另一个用来存放处理后的图像，假定为一个用来存放处理后的图像，假定为“secondpic”secondpic”。并把原始图片放在。并把原始图片放在firstpicfirstpic下，原始图片的格式应为下，

40、原始图片的格式应为GIFGIF或或JPEGJPEG格式。格式。2.6超级链接超级链接n n1.1.本地链接本地链接本地链接本地链接n n对同一台机器上的不同文件进行的链对同一台机器上的不同文件进行的链对同一台机器上的不同文件进行的链对同一台机器上的不同文件进行的链接称为本地链接。接称为本地链接。接称为本地链接。接称为本地链接。n n超级链接是网页中最重要的元素，是超级链接是网页中最重要的元素，是InternetInternet的中流砥柱。没有链接，网页之间的中流砥柱。没有链接，网页之间失去了联系，也就不能称为网。通过链接我失去了联系，也就不能称为网。通过链接我们可以从一个网站转到另一个网站，也

41、可从们可以从一个网站转到另一个网站，也可从一个页面转到另一个页面，或在同一个页面一个页面转到另一个页面，或在同一个页面中移动。链接的形式有很多种，对链接的样中移动。链接的形式有很多种，对链接的样式也可进行各种设置，但是，无论它们的动式也可进行各种设置，但是，无论它们的动作或样式是怎样的，大多数链接都是创建一作或样式是怎样的，大多数链接都是创建一点到另一点的路径。网页中链接的路径有点到另一点的路径。网页中链接的路径有3 3种：种：n n绝对路径（绝对路径（URLURL）（例如：）（例如：http:/http:/）n n文档相对路径文档相对路径（例如：（例如：/newchanping.htm/ne

42、wchanping.htm）n n站点根目录相对路径（例如：站点根目录相对路径（例如：/chanping/newchanping.htm/chanping/newchanping.htm）2.6超级链接超级链接n n绝对地址和相对地址绝对地址和相对地址绝对地址和相对地址绝对地址和相对地址n n绝对地址绝对地址绝对地址绝对地址：是指能够绝对搜寻某一具体文件的地址；：是指能够绝对搜寻某一具体文件的地址；：是指能够绝对搜寻某一具体文件的地址；：是指能够绝对搜寻某一具体文件的地址；如如如如http:/http:/；n n如如如如c:mywebindex.htmc:mywebindex.htm等都是绝对

43、地址。等都是绝对地址。等都是绝对地址。等都是绝对地址。n n相对地址相对地址相对地址相对地址：相对于当前页面而言，搜寻某一页面所需：相对于当前页面而言，搜寻某一页面所需：相对于当前页面而言，搜寻某一页面所需：相对于当前页面而言，搜寻某一页面所需的路径。如的路径。如的路径。如的路径。如URLURL为为为为home.htmhome.htm时，说明超链接到当时，说明超链接到当时，说明超链接到当时，说明超链接到当前网页所在目录下的一个名为前网页所在目录下的一个名为前网页所在目录下的一个名为前网页所在目录下的一个名为 home.htmhome.htm的网页文件；的网页文件；的网页文件；的网页文件；若若若

44、若RLRL为为为为wwwroot/home.htmwwwroot/home.htm时，说明超链接到当时，说明超链接到当时，说明超链接到当时，说明超链接到当前网页文件所在目录的下一级目录前网页文件所在目录的下一级目录前网页文件所在目录的下一级目录前网页文件所在目录的下一级目录wwwrootwwwroot下的名下的名下的名下的名为为为为home.htmhome.htm的网页文件；若的网页文件；若的网页文件；若的网页文件；若URLURL为为为为./wwwroot/home.htm./wwwroot/home.htm的网页文件，说明超链到当的网页文件，说明超链到当的网页文件，说明超链到当的网页文件，说

45、明超链到当前网页文件所在目录同一级的另外一个名为前网页文件所在目录同一级的另外一个名为前网页文件所在目录同一级的另外一个名为前网页文件所在目录同一级的另外一个名为wwwrootwwwroot目录下的名为目录下的名为目录下的名为目录下的名为homt.htmhomt.htm的网页文件。的网页文件。的网页文件。的网页文件。n n提醒：提醒：提醒：提醒：在网站设计中，网站内部的链接和文件调用均在网站设计中，网站内部的链接和文件调用均在网站设计中，网站内部的链接和文件调用均在网站设计中，网站内部的链接和文件调用均要采用相对地址链接，否则当网站发生迁移（网站上要采用相对地址链接，否则当网站发生迁移（网站上

46、要采用相对地址链接，否则当网站发生迁移（网站上要采用相对地址链接，否则当网站发生迁移（网站上传或拷贝到其他磁盘）时，网站内部的链接会出现中传或拷贝到其他磁盘）时，网站内部的链接会出现中传或拷贝到其他磁盘）时，网站内部的链接会出现中传或拷贝到其他磁盘）时，网站内部的链接会出现中断，有些图片文件会无法显示。断，有些图片文件会无法显示。断，有些图片文件会无法显示。断，有些图片文件会无法显示。2.6超级链接超级链接n n其实以上链接都是网页的统一资源定其实以上链接都是网页的统一资源定位（位（URLURL），只不过后两种路径将），只不过后两种路径将URLURL的通信协议和主机名省略掉了。的通信协议和主机

47、名省略掉了。后两种路径必须有参照物：一种是以后两种路径必须有参照物：一种是以文档为参照物，另一种是以站点的根文档为参照物，另一种是以站点的根目录为参照物。当目标页面在站点之目录为参照物。当目标页面在站点之外，使用绝对路径；在站点内创建的外，使用绝对路径；在站点内创建的本地链接都是文档相对路径（文档对本地链接都是文档相对路径（文档对文档）。站点根目录相对路径则比较文档）。站点根目录相对路径则比较少用。少用。2.6超级链接超级链接2.URL链接如果链接的文件在其他服务器上，就要弄清如果链接的文件在其他服务器上，就要弄清我们所指向的文件是采用哪一种我们所指向的文件是采用哪一种URLURL地址。地址。

48、URLURL的意思是统一资源定位器，通过它可以的意思是统一资源定位器，通过它可以以多种通信协议与外界沟通来存取信息。以多种通信协议与外界沟通来存取信息。URLURL链接的形式是：链接的形式是：协议名：协议名：协议名：协议名：/主机域名主机域名主机域名主机域名/路径路径路径路径/文件名。文件名。文件名。文件名。其中协议包括：其中协议包括：FileFile（本地系统文件（本地系统文件）、）、http(wwwhttp(www服务器服务器)、FTP(ftpFTP(ftp服务器服务器)、telnet(telnet(基于基于telnettelnet的协议的协议)、mailto(mailto(电子邮件电子邮

49、件)、news(usenetnews(usenet新闻组新闻组)2.6超级链接超级链接n n2.URL链接例如：http:/telnet:/mailto:2.6超级链接超级链接n n2.6.1创建文本链接n n2.6.2创建电子邮件链接n n2.6.3链接到命名锚记n n2.6.4空链接n n2.6.5创建图像链接n n2.6.6图像映射2.6.1创建文本链接n n大多数大多数WebWeb页面都包含超文本链接，页面都包含超文本链接，默认情况下，文本链接的地方会出现默认情况下，文本链接的地方会出现下划线，而且最开始呈现为蓝色文本，下划线，而且最开始呈现为蓝色文本，以后，当目标页面被访问过后，访问

50、以后，当目标页面被访问过后，访问后的文本链接呈现为紫色。当在浏览后的文本链接呈现为紫色。当在浏览器中单击文本链接时，链接暂时会变器中单击文本链接时，链接暂时会变成红色或其他颜色，表示这是一个可成红色或其他颜色，表示这是一个可激活的链接。通过在激活的链接。通过在【页面属性页面属性】的的设置可以改变链接的默认颜色，也可设置可以改变链接的默认颜色，也可使用层叠样式表（使用层叠样式表（CSSCSS）控制链接的）控制链接的外观。现在我们来介绍文本链接方法。外观。现在我们来介绍文本链接方法。2.6.1创建文本链接1 1、添加文本链接、添加文本链接、添加文本链接、添加文本链接n n创建链接，相当于在文本中插