《网页设计与制作第2章 dreamweaver MX基本操作》由会员分享，可在线阅读，更多相关《网页设计与制作第2章 dreamweaver MX基本操作（51页珍藏版）》请在金锄头文库上搜索。
1、第2章dreamweaverMX基本操作曹桓疤蓟膘嫌贼巴枫合忙辑其困蚀照先分但窝产沼群娘趣韧他印及嘶备阮网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作DreamweaverMX2004基本操作基本操作n n2.1初识dreamweaverMX2004n n2.2站点的创建与页面属性设置n n2.3添加文本丰富的内容业拖松涧骤劣甸沤缸萝翘绎懦过劳蚂将誓拧当逃镍睦以膳餐宵盖锦中仿晌网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.1初识初识dreamweaverMX2004n
2、 n2.1.1dreamweaverMX20042.1.1dreamweaverMX2004工工工工作界面介绍作界面介绍作界面介绍作界面介绍n n2.1.22.1.2网页的创建和保存网页的创建和保存网页的创建和保存网页的创建和保存n n2.1.32.1.3网页的修改与预览网页的修改与预览网页的修改与预览网页的修改与预览网页的打开；跟其他软件打开文档相似。网页的打开；跟其他软件打开文档相似。网页的打开；跟其他软件打开文档相似。网页的打开；跟其他软件打开文档相似。网页的创建：直接创建空白文档；通过模网页的创建：直接创建空白文档；通过模网页的创建：直接创建空白文档；通过模网页的创建：直接创建空白文档
3、；通过模板创建有格式的网页文档。板创建有格式的网页文档。板创建有格式的网页文档。板创建有格式的网页文档。网页的保存：直接保存；另存为网页的保存：直接保存；另存为网页的保存：直接保存；另存为网页的保存：直接保存；另存为。命名注意命名注意命名注意命名注意：vv最好做到最好做到最好做到最好做到“ “见名知义见名知义见名知义见名知义” ”，看到名字就知道网页里的相应内，看到名字就知道网页里的相应内，看到名字就知道网页里的相应内，看到名字就知道网页里的相应内容；容；容；容；vv名字最好用英文字母或拼音，不要包含中文或名字最好用英文字母或拼音，不要包含中文或名字最好用英文字母或拼音，不要包含中文或名字最好
4、用英文字母或拼音，不要包含中文或 一些特殊的一些特殊的一些特殊的一些特殊的字符。字符。字符。字符。惠发疮蔚粱咋争匠尖兢俐懊庸避臂卓婴沈雕镣瑞毙卑缕畦废摆布深叼喘俄网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.1初识初识dreamweaverMX2004n n2.1.22.1.2网页的创建和保存网页的创建和保存网页的创建和保存网页的创建和保存n n文件名的开头不能使用数字、运算符等符号，文件名最文件名的开头不能使用数字、运算符等符号，文件名最好不要使用中文，因为如果主机采用好不要使用中文，因为如果主机采用UNIXUNIX系统，中文
5、系统，中文名会出错。文件的命名一般采用以下几种方法：名会出错。文件的命名一般采用以下几种方法：n n汉语拼音汉语拼音汉语拼音汉语拼音：这是最简单的命名方法，根椐页面的标这是最简单的命名方法，根椐页面的标题或主要内容，提取两三个概况字，把它们的汉语拼音题或主要内容，提取两三个概况字，把它们的汉语拼音作为文件名。例：作为文件名。例：“ “产品中心产品中心” ”页面，提取页面，提取“ “产品产品” ”这这两个字的汉语拼音，因此文件名为两个字的汉语拼音，因此文件名为“chanping.htm”“chanping.htm”。n n拼音缩写拼音缩写拼音缩写拼音缩写：根椐页面的标题或主要内容，提取每个根椐页
6、面的标题或主要内容，提取每个汉字拼音的第汉字拼音的第1 1个字母作为文件名。个字母作为文件名。例：例：“ “留言簿留言簿” ”的拼音为的拼音为“liuyanbo”“liuyanbo”，那么文件名为，那么文件名为“lyb.asp”“lyb.asp”。这种方法简单，但不带提示性，不便于。这种方法简单，但不带提示性，不便于日后的维护。日后的维护。n n英文缩写：英文缩写：英文缩写：英文缩写：这种方法也较难记忆，一般适用于专有这种方法也较难记忆，一般适用于专有名词。例：名词。例：“ActiveServerPages”“ActiveServerPages”这个专有名词一般这个专有名词一般用用ASPASP
7、来代替。来代替。n n英文原文：英文原文：英文原文：英文原文：这种方法准确、实用，最好的一种方法。这种方法准确、实用，最好的一种方法。例：例：“ “公司简介公司简介” ”的页面命名为的页面命名为“company_introduction.htm”.“company_introduction.htm”.回饿继蔡后乐中戒宪不廖郊掷咕特鞠舜柑霸倡啼宫废浆那参掺宽跪拯告瓦网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.2站点的创建与页面属性设置站点的创建与页面属性设置n n2.2.1创建站点创建站点创建站点的第一步就是规划站点，创建站点的
8、第一步就是规划站点，再通过再通过DREAMWEAVERDREAMWEAVER站点管理功站点管理功能创建站点的框架，包括主页、分支能创建站点的框架，包括主页、分支页面和相应的文件夹等。将多个网页页面和相应的文件夹等。将多个网页文档链接起来就构成了站点，站点可文档链接起来就构成了站点，站点可以小到一个网页，也可以大到整个网以小到一个网页，也可以大到整个网站。站。n n2.2.2页面属性的设置页面属性的设置镊隅或谈批其沟惩矮薪膨离哑腑痊欲自然亲熊遂肢歼疲咸知帐摧锚怎首汕网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.3在网页中加入文本在
9、网页中加入文本n n2.3.12.3.1插入文本插入文本插入文本插入文本直接输入或者通过复制直接输入或者通过复制n n2.3.22.3.2通过属性面板对字体进行设置通过属性面板对字体进行设置通过属性面板对字体进行设置通过属性面板对字体进行设置输入特殊字符；输入特殊字符；输入一个空格：按输入一个空格：按SPACESPACE键键连续输入多个空格：连续输入多个空格：CTR+SHIFT+SPACECTR+SHIFT+SPACE换行：换行：SHIFT+ENTERSHIFT+ENTER分段：分段：ENTERENTER添加并编辑水平线；添加并编辑水平线；插入日期；插入日期；n n2.3.22.3.2让文本更
10、具个性让文本更具个性让文本更具个性让文本更具个性n n2.3.32.3.3结合实例讲解结合实例讲解结合实例讲解结合实例讲解糙瓦软由槐儒越帽殉井峨庇蔓舷树撰对测怎利怯需雅筒如蔡赶购拼篙蹦厦网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4在网页面中插入图象在网页面中插入图象n n2.4.12.4.1网页的色彩网页的色彩网页的色彩网页的色彩n n2.4.22.4.2网页中图象的格式网页中图象的格式网页中图象的格式网页中图象的格式n n2.4.32.4.3在网页中插入图象在网页中插入图象在网页中插入图象在网页中插入图象n n2.4.42
11、.4.4设置图象属性设置图象属性设置图象属性设置图象属性n n2.4.52.4.5鼠标经过图象鼠标经过图象鼠标经过图象鼠标经过图象n n2.4.62.4.6图象占位符图象占位符图象占位符图象占位符肺泼宏葫闻栖坠抬关遇乙余缄典岁粘问屏崖诊矛祟遮唤沫朗尿倪囚蔡视哈网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.1网页的色彩网页的色彩n n在网页中是以在网页中是以RGBRGB方式来表示颜色的，方式来表示颜色的，RGBRGB是是RedRed、GreenGreen、BlueBlue的缩写。的缩写。RGBRGB颜色包括几百万种之多，这么多
12、颜色包括几百万种之多，这么多的颜色却有一个共同点，就是都由红、的颜色却有一个共同点，就是都由红、绿、蓝这绿、蓝这3 3种基色调和而成，这种基色调和而成，这3 3种基种基色中每一种颜色的饱和度和透明度都色中每一种颜色的饱和度和透明度都是可以变化的，取值范围为是可以变化的，取值范围为02550255，例如，红色表示为例如，红色表示为Red100%Red100%，Green0%Green0%，Blue0%Blue0%，简单的表示法，简单的表示法为（为（255255，0 0，0 0），用十六进制数值），用十六进制数值来表示就是来表示就是“FF0000”“FF0000”，在，在HTMLHTML语语言中我
13、们直接十六进制数值来命名颜言中我们直接十六进制数值来命名颜色。色。侣矣搪刽圣梨学外妙刚肯唆睁矽煌符意咀顽钳友纤妈蜒赌诛坚赛数入墙遣网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.1网页的色彩网页的色彩n n用排列组合方法计算：用排列组合方法计算：256*256*256=16256*256*256=16777216777216，总共可以得到，总共可以得到16772161677216种种RGBRGB颜颜色，这是理论上的。在实际中，色，这是理论上的。在实际中，只有只有只有只有216216种种种种颜色颜色颜色颜色能在浏览器中正常显示。
14、多于这个范围能在浏览器中正常显示。多于这个范围的颜色，有的浏览器显示时可能发生偏差，的颜色，有的浏览器显示时可能发生偏差，不能正常显示。因此，我们将能被所有浏览不能正常显示。因此，我们将能被所有浏览器正常显示的器正常显示的216216种颜色称为种颜色称为网页安全色网页安全色网页安全色网页安全色。DreamweaverDreamweaver中提供了具有网页安全颜色范中提供了具有网页安全颜色范畴的调色板，使网页的颜色选取控制在安全畴的调色板，使网页的颜色选取控制在安全范围之内。范围之内。n n这这216216种颜色除黑色和白色外，其他全部属种颜色除黑色和白色外，其他全部属于彩色范畴。网页制作是用彩
15、色还是非彩色于彩色范畴。网页制作是用彩色还是非彩色好呢？其实只要运用的合理，都能达到好的好呢？其实只要运用的合理，都能达到好的效果。效果。n n我们通常的做法是：主要内容文字用非彩色我们通常的做法是：主要内容文字用非彩色我们通常的做法是：主要内容文字用非彩色我们通常的做法是：主要内容文字用非彩色（黑色），边框，背景，图片用彩色。这样（黑色），边框，背景，图片用彩色。这样（黑色），边框，背景，图片用彩色。这样（黑色），边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。页面整体不单调，看主要内容也不会眼花。页面整体不单调，看主要内容也不会眼花。页面整体不单调，看主要内容也不会眼花。
16、沂耶摊昼恭黍谭辣掣霄昧刹称早奠曝再牵俞玄赖雀扮喝粕汤尼艘厢步勾热网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.1网页的色彩网页的色彩1 1非彩色的搭配非彩色的搭配非彩色的搭配非彩色的搭配n n黑白是最基本和最简单的搭配，它们黑白是最基本和最简单的搭配，它们以其特有的性质一直在艺术殿堂中占以其特有的性质一直在艺术殿堂中占有重要的地位，如中国的水墨画、黑有重要的地位，如中国的水墨画、黑白摄影等艺术作品，给人一种质朴、白摄影等艺术作品，给人一种质朴、安逸、超脱的美感。但要把握好很难。安逸、超脱的美感。但要把握好很难。n n灰色是万
17、能色，可以和任何彩色搭配，灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。也可以帮助两种对立的色彩和谐过渡。魔摘势黄岭没团独敌蜂扯卜驭勾刃未炔晰邪伟稻藻非掀匿朵棒胶奏坟锭硒网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.1网页的色彩网页的色彩n n2 2彩色的搭配彩色的搭配彩色的搭配彩色的搭配n n色环：我们将色彩按色环：我们将色彩按 红红-黄黄-绿绿-蓝蓝-红红 依次过度渐变，就可以得到一个色彩环。依次过度渐变，就可以得到一个色彩环。n n色环的两端是暖色和寒色，当中是中型色。色环的两端是暖色和寒色，当中
18、是中型色。如图如图2-62-6所示。所示。n n红红红红. .橙橙橙橙. .橙黄橙黄橙黄橙黄. .黄黄黄黄. .黄绿黄绿黄绿黄绿. .绿绿绿绿. .青绿青绿青绿青绿. .蓝绿蓝绿蓝绿蓝绿. .蓝蓝蓝蓝. .蓝蓝蓝蓝紫紫紫紫. .紫紫紫紫. .紫红紫红紫红紫红. .n n/_/_/_/_/_/_/_/_/n n/n n暖色系暖色系暖色系暖色系中性系中性系中性系中性系寒色系寒色系寒色系寒色系中性系中性系中性系中性系 盎收纱披廷脐剂毖活缩渐蜂椅蜘庄拽劈迢投尉反帧荚洲蔬剂框屈躇摊菏自网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.1网
19、页的色彩n n3 3色彩的心理感觉色彩的心理感觉色彩的心理感觉色彩的心理感觉n n不同的颜色会给浏览者不同的心理感受。不同的颜色会给浏览者不同的心理感受。n n红色红色-是一种激奋的色彩。刺激效果，能是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。使人产生冲动，愤怒，热情，活力的感觉。n n绿色绿色-介于冷暖两中色彩的中间，显得和介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。它和金黄，睦，宁静，健康，安全的感觉。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。淡白搭配，可以产生优雅，舒适的气氛。n n橙色橙色-也是一种激奋的色彩，具有轻快，也是一种激奋的色彩，具有
20、轻快，欢欣，热烈，温馨，时尚的效果。欢欣，热烈，温馨，时尚的效果。n n黄色黄色-具有快乐，希望，智慧和轻快的个具有快乐，希望，智慧和轻快的个性，它的明度最高。性，它的明度最高。n n蓝色蓝色-是最具凉爽，清新，专业的色彩。是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的它和白色混合，能体现柔顺，淡雅，浪漫的气氛（象天空的色彩气氛（象天空的色彩: :）毕沽森夕材汰脖拷偶辆逸诉挎须内辩概钻假耙庸弧短憎牌甥斑湍现瞩烬潘网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.1网页的色彩n n白色白色-具有洁白，明快，纯
21、真，清洁具有洁白，明快，纯真，清洁的感受。的感受。n n黑色黑色-具有深沉，神秘，寂静，悲哀，具有深沉，神秘，寂静，悲哀，压抑的感受。压抑的感受。n n灰色灰色-具有中庸，平凡，温和，谦让，具有中庸，平凡，温和，谦让，中立和高雅的感觉。中立和高雅的感觉。n n每种色彩在饱和度，透明度上略微变每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。蓝绿色则显得幽宁，阴深。晋葬钢左货霖锯镊阳宫专驼寿辩色孵皖蚀频厅棱霜弓蔼播采颓梅噶百欧话网页设计与制作第2章dreamw
22、eaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作n n红色代表热情、活泼、热闹、温暖、幸福、吉祥红色代表热情、活泼、热闹、温暖、幸福、吉祥 橙色代表光明、华丽、兴奋、甜蜜、快乐橙色代表光明、华丽、兴奋、甜蜜、快乐 黄色代表明朗、愉快、高贵、希望黄色代表明朗、愉快、高贵、希望 绿色代表新鲜、平静、和平、柔和、安逸、青春绿色代表新鲜、平静、和平、柔和、安逸、青春 蓝色代表深远、永恒、沉静、理智、诚实、寒冷蓝色代表深远、永恒、沉静、理智、诚实、寒冷 紫色代表优雅、高贵、魅力、自傲紫色代表优雅、高贵、魅力、自傲 白色代表纯洁、纯真、朴素、神圣、明快白色代表纯洁、纯真、朴素、
23、神圣、明快 灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 黑色代表崇高、坚实、严肃、刚健、粗莽黑色代表崇高、坚实、严肃、刚健、粗莽 还有还有 一般认为颜色的象征作用如下一般认为颜色的象征作用如下: :红色红色: :革命革命. .热烈热烈. .牺牲牺牲. .豪迈豪迈 绿色绿色: :和蔼悠闲和蔼悠闲. .和平娴雅和平娴雅 黄色黄色: :温暖温暖 高贵高贵 显赫显赫 豪华豪华 蓝色蓝色: :和平和平 善良善良 冷静冷静 深沉深沉 白色白色: :轻快轻快 纯洁纯洁 真挚真挚 黑色黑色: :沉重沉重 悲哀悲哀 神秘神秘桃矣苯沮泛毯垒揭区俗辫毒旧壮帆帘酪
24、楞和宠怂和坛阎跋百陪殆菊焚集困网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.1网页的色彩n n4 4网页色彩搭配的原理网页色彩搭配的原理网页色彩搭配的原理网页色彩搭配的原理n n色彩的色彩的鲜明性鲜明性鲜明性鲜明性。网页的色彩要鲜艳，。网页的色彩要鲜艳，容易引人注目。容易引人注目。n n色彩的色彩的独特性独特性独特性独特性。要有与众不同的色彩，。要有与众不同的色彩，使得大家对你的网页印象强烈。使得大家对你的网页印象强烈。n n色彩的色彩的合适性合适性合适性合适性。就是说色彩和你表达。就是说色彩和你表达的内容气氛相适合。的内容
25、气氛相适合。n n色彩的色彩的联想性联想性联想性联想性。不同色彩会产生不同。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑的联想，蓝色想到天空，黑色想到黑夜，红色想到喜庆等，选择色彩要和夜，红色想到喜庆等，选择色彩要和你网页的内涵相关联。你网页的内涵相关联。岩殷观韩银迂泥犬巧封筹赦捞姐煌劣背时禁脚滚挖醒玲栅绑皱筑影玛辉心网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.1网页的色彩n n5 5网页色彩搭配的技巧网页色彩搭配的技巧网页色彩搭配的技巧网页色彩搭配的技巧n n用一种色彩。用一种色彩。用一种色彩。用一种色彩。这里是指
26、先选定一种色彩，然这里是指先选定一种色彩，然后调整透明度或者饱和度，（说得通俗些就后调整透明度或者饱和度，（说得通俗些就是将色彩变淡或则加深），产生新的色彩，是将色彩变淡或则加深），产生新的色彩，用于网页。这样的页面看起来用于网页。这样的页面看起来色彩统一，有色彩统一，有色彩统一，有色彩统一，有层次感层次感层次感层次感。n n用两种色彩。用两种色彩。用两种色彩。用两种色彩。先选定一种色彩，然后选择它先选定一种色彩，然后选择它的的对比色对比色对比色对比色（在（在photoshopphotoshop里按里按ctrl+shift+Ictrl+shift+I）。）。n n用一个色系。用一个色系。用一个
27、色系。用一个色系。简单的说简单的说就是用一个感觉的色就是用一个感觉的色就是用一个感觉的色就是用一个感觉的色彩彩彩彩，例如淡蓝、淡黄、淡绿；或者土黄、土，例如淡蓝、淡黄、淡绿；或者土黄、土灰、土蓝。灰、土蓝。n n用黑色和一种彩色。用黑色和一种彩色。用黑色和一种彩色。用黑色和一种彩色。比如大红的字体配黑色比如大红的字体配黑色的边框感觉很的边框感觉很“ “跳跳” ”。妹凭鄙雄挫虏尝郁鞭胃伦墙皋话迷粹趁凳脂室概萎浑泽回诬险增虾趁递嫡网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.1网页的色彩在网页配色中，忌讳的是：在网页配色中，忌讳
28、的是：1.不要将所有颜色都用到，尽量控控制在三种色彩以内制在三种色彩以内。2.背景和前文的对比尽量要大背景和前文的对比尽量要大，（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。以便突出主要文字内容。髓炽邮挣锥报惺吧推吁贤杂碌梳奔孔勾烈顺纂署稍棚戳惯孺畏味颜亨戏毅网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.2网页中的图像格式n n图像在网页中具有画龙点睛的作用，它能装图像在网页中具有画龙点睛的作用，它能装饰网页，表达个人的情调和风格。但在网页饰网页，表达个人的情调和风格。但在网页上加入的图片越多，浏览的速度就会受到
29、影上加入的图片越多，浏览的速度就会受到影响导致用户失去耐心而离开页面。网页中使响导致用户失去耐心而离开页面。网页中使用的图像可以是用的图像可以是GIFGIF、JPEGJPEG、BMPBMP、TIFFTIFF、PNGPNG等格式的图像文件，其中使用最广泛主等格式的图像文件，其中使用最广泛主要是要是GIFGIF和和JPEGJPEG两种格式。两种格式。n n它们有一些共同的特点：它们有一些共同的特点：都属于压缩的图片都属于压缩的图片都属于压缩的图片都属于压缩的图片文件格式，文件的信息量很小，适用于网络文件格式，文件的信息量很小，适用于网络文件格式，文件的信息量很小，适用于网络文件格式，文件的信息量很
30、小，适用于网络传输；适用于各种平台。因此大部分的浏览传输；适用于各种平台。因此大部分的浏览传输；适用于各种平台。因此大部分的浏览传输；适用于各种平台。因此大部分的浏览器都把它们当作标准规格器都把它们当作标准规格器都把它们当作标准规格器都把它们当作标准规格。而而PNGPNG格式的图格式的图像只有在像只有在MicrosoftIEMicrosoftIE（4.04.0以上版本）和以上版本）和NetscapeNavigatorNetscapeNavigator（4.044.04）以上版本才能）以上版本才能得到支持。得到支持。宜沿淄驮捆郭衙佰纯撩受小恋水战踩佐栓把界乍解邦客欺扑闲倍深甸胸全网页设计与制作第
31、2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.2网页中的图像格式n nGIFGIF的英文全称是的英文全称是“GraphicsInterchange“GraphicsInterchangeFormat”Format”，中文意思是，中文意思是“ “交换的图像格式交换的图像格式” ”。GIFGIF文件采用文件采用LosslessLossless（非失真）的压缩方（非失真）的压缩方式，在压缩图片文件的过程中，图形的像素式，在压缩图片文件的过程中，图形的像素信息不会被牺牲掉，被牺牲的是图形的颜色，信息不会被牺牲掉，被牺牲的是图形的颜色，因此，因此，G
32、IFGIF文件最多只能保存文件最多只能保存256256色。色。GIFGIF格格式支持图片游离在背景之上的视觉效果，式支持图片游离在背景之上的视觉效果，n nJPEGJPEG图片文件采用图片文件采用lossylossy（失真）的压缩方（失真）的压缩方式，因此式，因此JPEGJPEG可支持多达可支持多达16M16M颜色，它能颜色，它能展现十分丰富生动的图像。但压缩方式是以展现十分丰富生动的图像。但压缩方式是以损失图像质量为代价，压缩比越高图像质量损失图像质量为代价，压缩比越高图像质量损失越大，图像文件也就越小。损失越大，图像文件也就越小。钻拄索韶邹临棘棕谐强唾韧运帘咀绽碌滩已宪坐锚彩匝岩舟凹科赶椎
33、盟钙网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.2网页中的图像格式GIFGIF图像文件的主要优点：图像文件的主要优点：图像文件的主要优点：图像文件的主要优点：1.1.最大支持最大支持256256色，因此其图像一般能色，因此其图像一般能正常显示。正常显示。2.2.由于图像使用颜色少，压缩率高，因由于图像使用颜色少，压缩率高，因此文件的尺寸小。此文件的尺寸小。3.GIF3.GIF格式的图像支持格式的图像支持1bit1bit透明度，因此透明度，因此可以制作背景透明的文字或图像。可以制作背景透明的文字或图像。4.4.可以将可以将G
34、IFGIF格式的图像制作成动画。格式的图像制作成动画。GIFGIF图像文件的主要缺点：图像文件的主要缺点：图像文件的主要缺点：图像文件的主要缺点：n n由于最大支持由于最大支持256256色，因此不适合于色，因此不适合于有晕光，渐变色彩等颜色细腻的图像有晕光，渐变色彩等颜色细腻的图像和照片。和照片。潍旦理尉历肩笛捞坯金冉奖呀琢胖涤唯晋硷储屋弗周横惭苏疵咸消公雅巷网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.2网页中的图像格式JPEG格式图像的主要优点：格式图像的主要优点：n n支持24bit图像，能够很好地表现照片等全彩色的
35、图像。n n可以生成类似GIF的交错关联图像渐变JPEGn n可以制作透明的JPEG图像。JPEG格式图像的主要缺点：格式图像的主要缺点：n n有损压缩使之不适合表达高清晰度的图像嘘抓吠躲锌滁郴复奔弧邑疗惑独渠访夷共傻馁峻碗混拘韦秤抽值咀谓碱搭网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作正确使用正确使用GIF和和JPEG：n nGIF适用于向量式、少于256色的图像。n nGIF是制作透明图像和动画GIF的首选格式。n nJPEG适用于有渐变色彩、颜色细腻的图片典淬保祁厢婶衍聪倪窃暂憨溃学麓加姻烧宿洛酶吻胆夸潞陷棺韵粒弧废咀网页设
36、计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作PNG图像格式PNGPNG图像格式是一种新兴的网络图像格式。图像格式是一种新兴的网络图像格式。它是目前保证最不失真的格式，它汲取了它是目前保证最不失真的格式，它汲取了GIFGIF和和JPEGJPEG格式的优点。具体体现如下：格式的优点。具体体现如下：1.1.能把图像文件压缩到极限以利于网络的传输，能把图像文件压缩到极限以利于网络的传输，但又能保留所有与图像品质有关的信息但又能保留所有与图像品质有关的信息; ;2.2.采用无损压缩来减少文件的大小采用无损压缩来减少文件的大小; ;3.3.显示速度
37、快显示速度快; ;4.4.支持透明图像的制作支持透明图像的制作; ;缺点：不支持动画应用效果缺点：不支持动画应用效果FIREWORKSFIREWORKS的默认格式是的默认格式是PNG;PNG;PhotoshopPhotoshop的默认格式是的默认格式是PSD.PSD.揩傍滓旭否策域掷湿炔肋患桩催就琵颖阿彩王馒屡母蓉产京颖跺袖诊颅娩网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.3在网页中插入图像在向网页中插入图像前，最好先保存文件。在对话框中选择图像文件，这时要注意图像文件应在站点目录下，若不在，则会弹出对话框询问是否将图像文
38、件复制到网站的目录下，应单击“是”按钮，将图像保存到网站的目录下。绩武样捍俱涛各乡埔乔词充凹噶孽驴伶采皿同水滩逻孽詹击浓若爪淘网掏网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.4设置图像属性图像插入文档后，其位置、大小等设置可能不尽如意，可通过【属性】面板，对它进行设置。单击图像，其周围出现控制点，表示已选中，状态栏标签被选中，【属性】面板显示关于图像的属性，单击扩展按钮，可见到全部的属性。号蓖伊亨贤厅迢毫谓烤纫厦当氯恫跨粮咋丧辟在郸拒锭新鲜拍义揉洁羽呢网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2
39、章dreamweaverMX基本操作2.4.4设置图像属性n n【图像】：旁边的数字表示图像的大小，文【图像】：旁边的数字表示图像的大小，文本框用于输入图像名称，在脚本语言可通过本框用于输入图像名称，在脚本语言可通过名称中对图像进行引用。对应于名称中对图像进行引用。对应于属性。属性。n n【宽】和【高】：用于设置图像的大小，也【宽】和【高】：用于设置图像的大小，也可通过鼠标拖动控制点，来调整图像的大小。可通过鼠标拖动控制点，来调整图像的大小。图像大小改变后，在宽和高之间，增加了一图像大小改变后，在宽和高之间，增加了一个按钮，单击它可恢复图像的大小。若想保个按钮，单击它可恢复图像的大小。若想保存
40、调整后的大小，可单击重新取样按钮，这存调整后的大小，可单击重新取样按钮，这样能减少马赛克现象。样能减少马赛克现象。n n【源文件】：指出图像的具体位置，要改换【源文件】：指出图像的具体位置，要改换图像，可通过单击文件夹按钮，来重新选择图像，可通过单击文件夹按钮，来重新选择图片，对应于图片，对应于标签标签srcsrc属性。属性。n n【替代】：是图像的注释，当用户的浏览器【替代】：是图像的注释，当用户的浏览器不能正常显示图像时，便在图像的位置用这不能正常显示图像时，便在图像的位置用这个注释代替图像。对应于个注释代替图像。对应于标签标签altalt属性。属性。袋盘撞啼弘竣垮靶芭软砾甫来满堂台丛峙粹
41、迟搔锋纂襟暑市羔钒吞碴丸尊网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.4设置图像属性n n【链接】：指定链接的目标页面或定位的【链接】：指定链接的目标页面或定位的URLURL。n n【地图】：用于制作图像映射。它有【地图】：用于制作图像映射。它有3 3个工具按钮。个工具按钮。n n【垂直边距】：设置图像在垂直方向与文本或其他页面元【垂直边距】：设置图像在垂直方向与文本或其他页面元素的间距。素的间距。n n【水平边距】：设置图像在水平方向与文本或其他页面元【水平边距】：设置图像在水平方向与文本或其他页面元素的间距。素的间距。
42、n n【边框】：设置图像边框的宽度，单位是像素为【边框】：设置图像边框的宽度，单位是像素为“0”“0”，表，表示无边框。对应于示无边框。对应于标签标签borderborder属性。属性。n n【低解析度源】：指定应在主要图像之前载入的图像，这【低解析度源】：指定应在主要图像之前载入的图像，这个图像是原图像的一个低分辨率版本，它的载入更快，这个图像是原图像的一个低分辨率版本，它的载入更快，这样就可以让浏览者对等待显示的图像有一个了解。但也可样就可以让浏览者对等待显示的图像有一个了解。但也可以使用任何一个和主要图像尺寸相同的图像。以使用任何一个和主要图像尺寸相同的图像。n n【编辑】：这里有【编辑
43、】：这里有66个按钮。可以对选定的图像进行编辑。个按钮。可以对选定的图像进行编辑。n n: :启动图像处理软件对图像进行编辑，一般为启动图像处理软件对图像进行编辑，一般为FiresorksFiresorks，当保存文件返回时，将使用保存后的图像更新文档当保存文件返回时，将使用保存后的图像更新文档. .n n: :启动图像处理启动图像处理FiresorksFiresorks对图像进行优化。对图像进行优化。n n: :裁剪图像。裁剪图像。n n: :重新取样。重新取样。 n n: :调节亮度和对比度。调节亮度和对比度。n n: :锐化图像。锐化图像。尘燥污谰饥堵挝痴易货舜胰眷绍山殷不枢招触缆复娘抗
44、啃辕陋夫料蔓族塔网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.4设置图像属性n n【对齐】【对齐】: :用于设置图像与文本或其他元素的位置关用于设置图像与文本或其他元素的位置关系，有系，有9 9项排列方式。对应于属性项排列方式。对应于属性alignalign。n n默认值：取决于浏览器所设置的排列方式。默认值：取决于浏览器所设置的排列方式。n n基线：将文本或其他元素的基线与所选图片的底边对基线：将文本或其他元素的基线与所选图片的底边对齐。齐。n n顶端：上端对齐，将文本或其他元素与图片所在行的顶端：上端对齐，将文本或其他元
45、素与图片所在行的最顶端对齐。最顶端对齐。n n居中：将文本或其他元素与图片的中部对齐。居中：将文本或其他元素与图片的中部对齐。n n底部：将文本或其他元素与图片的底部对齐。底部：将文本或其他元素与图片的底部对齐。n n文本上方：将文本行中的最高字符与图片上端对齐。文本上方：将文本行中的最高字符与图片上端对齐。n n绝对居中：将图片的中部与文本的中部对齐。绝对居中：将图片的中部与文本的中部对齐。n n绝对底部：将图片的绝对底部与文本的绝对底部对齐。绝对底部：将图片的绝对底部与文本的绝对底部对齐。n n左对齐：将图片放置到文本块左边缘，与当前行的顶左对齐：将图片放置到文本块左边缘，与当前行的顶端对
46、齐，文本位于图像的右边和下面。端对齐，文本位于图像的右边和下面。n n右对齐：将图片放置到文本块右边缘，文本位于图像右对齐：将图片放置到文本块右边缘，文本位于图像的左边。的左边。导晃哑陕路昧稗砸滥弓夸历畴故悲厕舜驳碰窿抑硕神译蛆曝脑壬永坤冻冀网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.5鼠标经过图像在浏览网页时，有时会看到当鼠标指针移到某幅图像时，该图像会变为另外一幅图像，而移开鼠标指针时，该图像又会变回原来的图像。这就是鼠标经过图像时产生的交互。额熟柔滋展侯安蕉帐药韧淡芹酱钠朽古察乏孵枝晒浑棱氨村蕉蒜擞庚娟籽网页设计与制
47、作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.4.6图像占位符图像占位符是网站排版布局中经常用到的功能，我们可以在要放置图像的位置，暂时放置占位符，等到处理好图像时再作替换。磷擒狄斌蝴翟洋秧篙防哗健嗣崔页虐勃秀戈莆档媚朝翼伺香禽郝怪臻琅宝网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.5创建网站相册用用DreamweaverDreamweaver用制作电子相册，实用制作电子相册，实际上通过际上通过JavaScriptJavaScript调用调用FireworksFirework
48、s来处理来处理一系列的图像，自动为图像创建，并自动一系列的图像，自动为图像创建，并自动完成缩略图与原始图片的链接。在创建电完成缩略图与原始图片的链接。在创建电子相册前，要先作一些准备工作，在站点子相册前，要先作一些准备工作，在站点根目录下建立两个文件夹，一个用来存放根目录下建立两个文件夹，一个用来存放原始图片，我们假设为原始图片，我们假设为“firstpic”“firstpic”，另，另一个用来存放处理后的图像，假定为一个用来存放处理后的图像，假定为“secondpic”“secondpic”。并把原始图片放在。并把原始图片放在firstpicfirstpic下，原始图片的格式应为下，原始图片
49、的格式应为GIFGIF或或JPEGJPEG格式。格式。 傈洛箔热充辅鳃杂木痔里巧淹萝央虫飞脂谁握下沈帘图是憨林勺骏迂它腔网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6超级链接超级链接n n1.1.本地链接本地链接本地链接本地链接n n对同一台机器上的不同文件进行的链对同一台机器上的不同文件进行的链对同一台机器上的不同文件进行的链对同一台机器上的不同文件进行的链接称为本地链接。接称为本地链接。接称为本地链接。接称为本地链接。n n超级链接是网页中最重要的元素，是超级链接是网页中最重要的元素，是InternetInternet的中
50、流砥柱。没有链接，网页之间的中流砥柱。没有链接，网页之间失去了联系，也就不能称为网。通过链接我失去了联系，也就不能称为网。通过链接我们可以从一个网站转到另一个网站，也可从们可以从一个网站转到另一个网站，也可从一个页面转到另一个页面，或在同一个页面一个页面转到另一个页面，或在同一个页面中移动。链接的形式有很多种，对链接的样中移动。链接的形式有很多种，对链接的样式也可进行各种设置，但是，无论它们的动式也可进行各种设置，但是，无论它们的动作或样式是怎样的，大多数链接都是创建一作或样式是怎样的，大多数链接都是创建一点到另一点的路径。网页中链接的路径有点到另一点的路径。网页中链接的路径有3 3种：种：n
51、 n绝对路径（绝对路径（URLURL）（例如：）（例如： http:/http:/）n n文档相对路径文档相对路径 （例如：（例如：/newchanping.htm/newchanping.htm）n n站点根目录相对路径（例如：站点根目录相对路径（例如：/chanping/newchanping.htm/chanping/newchanping.htm）赏颖诅颐破甩镐总贪灼毗价吓蛙拱禹瘟果恢简契扭幼距捕已装屋豆控驳磁网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6超级链接超级链接n绝对地址和相对地址绝对地址和相对地址n绝对地址
52、绝对地址：是指能够绝对搜寻某一具体文件的地址；：是指能够绝对搜寻某一具体文件的地址；如如http:/；n如如c:mywebindex.htm等都是绝对地址。等都是绝对地址。n相对地址相对地址：相对于当前页面而言，搜寻某一页面所需：相对于当前页面而言，搜寻某一页面所需的路径。如的路径。如URL为为home.htm时，说明超链接到当时，说明超链接到当前网页所在目录下的一个名为前网页所在目录下的一个名为home.htm的网页文件；的网页文件；若若RL为为wwwroot/home.htm时，说明超链接到当时，说明超链接到当前网页文件所在目录的下一级目录前网页文件所在目录的下一级目录wwwroot下的名
53、下的名为为home.htm的网页文件；若的网页文件；若URL为为./wwwroot/home.htm的网页文件，说明超链到当前的网页文件，说明超链到当前网页文件所在目录同一级的另外一个名为网页文件所在目录同一级的另外一个名为wwwroot目录下的名为目录下的名为homt.htm的网页文件。的网页文件。n提醒：提醒：在网站设计中，网站内部的链接和文件调用均在网站设计中，网站内部的链接和文件调用均要采用相对地址链接，否则当网站发生迁移（网站上要采用相对地址链接，否则当网站发生迁移（网站上传或拷贝到其他磁盘）时，网站内部的链接会出现中传或拷贝到其他磁盘）时，网站内部的链接会出现中断，有些图片文件会无
54、法显示。断，有些图片文件会无法显示。鸟或茫警耀臆鹿痛宝洽悸沿秦悉枫欣萎膜幌罚忆属棘扶牟掐色嘲便后箍之网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6超级链接超级链接n n其实以上链接都是网页的统一资源定其实以上链接都是网页的统一资源定位（位（URLURL），只不过后两种路径将），只不过后两种路径将URLURL的通信协议和主机名省略掉了。的通信协议和主机名省略掉了。后两种路径必须有参照物：一种是以后两种路径必须有参照物：一种是以文档为参照物，另一种是以站点的根文档为参照物，另一种是以站点的根目录为参照物。当目标页面在站点之目录为参
55、照物。当目标页面在站点之外，使用绝对路径；在站点内创建的外，使用绝对路径；在站点内创建的本地链接都是文档相对路径（文档对本地链接都是文档相对路径（文档对文档）。站点根目录相对路径则比较文档）。站点根目录相对路径则比较少用。少用。灰医吴砸艺蹲所和荔宁殿诉擦渍咕嫌鸵请后额亥旦招漏岭侣悬疤殉蛊炭辉网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6超级链接超级链接2.URL链接如果链接的文件在其他服务器上，就要弄清如果链接的文件在其他服务器上，就要弄清我们所指向的文件是采用哪一种我们所指向的文件是采用哪一种URLURL地址。地址。URLU
56、RL的意思是统一资源定位器，通过它可以的意思是统一资源定位器，通过它可以以多种通信协议与外界沟通来存取信息。以多种通信协议与外界沟通来存取信息。URLURL链接的形式是：链接的形式是：协议名：协议名：协议名：协议名：/ /主机域名主机域名主机域名主机域名/ /路径路径路径路径/ /文件名。文件名。文件名。文件名。其中协议包括：其中协议包括：FileFile（本地系统文件（本地系统文件 ）、）、http(wwwhttp(www服务器服务器) )、FTP(ftpFTP(ftp服务器服务器) )、telnet(telnet(基于基于telnettelnet的协议的协议) )、mailto(mailt
57、o(电子邮件电子邮件) )、news(usenetnews(usenet新闻组新闻组) )污驯就敢外酮粟陶姻渡焉完默支社殆妥伎式旺曲色辊味箩烹厄塘应啥寞狱网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6超级链接超级链接n n2.URL链接例如：http:/telnet:/mailto:请粳黄又冻音羡袍炬曲箍误饮邻恃寥厕潘泡炸销牲绊呕模谊迄凸巴嚎只赞网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6超级链接超级链接n n2.6.1创建文本链接n n2.6.2创建电子邮
58、件链接n n2.6.3链接到命名锚记n n2.6.4空链接n n2.6.5创建图像链接n n2.6.6图像映射紊循畅层行逗穗谣蜡驰赊椰院璃抠囱饼缸着飞职芝贤贫却皂芳蔼其鬼省汲网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6.1创建文本链接n n大多数大多数WebWeb页面都包含超文本链接，页面都包含超文本链接，默认情况下，文本链接的地方会出现默认情况下，文本链接的地方会出现下划线，而且最开始呈现为蓝色文本，下划线，而且最开始呈现为蓝色文本，以后，当目标页面被访问过后，访问以后，当目标页面被访问过后，访问后的文本链接呈现为紫色。当
59、在浏览后的文本链接呈现为紫色。当在浏览器中单击文本链接时，链接暂时会变器中单击文本链接时，链接暂时会变成红色或其他颜色，表示这是一个可成红色或其他颜色，表示这是一个可激活的链接。通过在【页面属性】的激活的链接。通过在【页面属性】的设置可以改变链接的默认颜色，也可设置可以改变链接的默认颜色，也可使用层叠样式表（使用层叠样式表（CSSCSS）控制链接的）控制链接的外观。现在我们来介绍文本链接方法。外观。现在我们来介绍文本链接方法。枯广腔病诌释遂缴坛卤思芥知昂放晰议虱柜煽吊已稍黎侩刺怒莫枷臀混兄网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操
60、作2.6.1创建文本链接1 1、添加文本链接、添加文本链接、添加文本链接、添加文本链接n n创建链接，相当于在文本中插入标签创建链接，相当于在文本中插入标签。n n创建链接有两种方法，一种是选择法，创建链接有两种方法，一种是选择法，另一种是指向法。另一种是指向法。 n n具体步骤如下：具体步骤如下：(1) (1) 打开如图打开如图2-152-15所示页面，选定要链接所示页面，选定要链接的文本的文本“ “产品中心产品中心” ”。单击【属性】。单击【属性】面板浏览图标，打开【选择文件】对面板浏览图标，打开【选择文件】对话框话框 愉撒洞佛骗彪另慈烁优痪冷赫宴疮绷臣撒孕缺雀悠淬氏靠校陨蛔减韶渴颓网页设
61、计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6.1创建文本链接n n(2)(2)选择要链接的文件名，在【选择要链接的文件名，在【URLURL】的文本框中会】的文本框中会自动产生链接路径。选择链接文件相当于链接标签中自动产生链接路径。选择链接文件相当于链接标签中的的hrefhref属性，该属性是链接必不可少的。属性，该属性是链接必不可少的。n n(3)(3)【相对于】文本框中的两个选项：【文档】、【相对于】文本框中的两个选项：【文档】、【站点根目录】。【文档】选项和【站点根目录】选项站点根目录】。【文档】选项和【站点根目录】选项都是使
62、用相对路径的链接，但两者的参照物不同。都是使用相对路径的链接，但两者的参照物不同。n n选择【文档】选项，是使用当前文档作为参照物，省选择【文档】选项，是使用当前文档作为参照物，省略了与当前文档的链接相同的略了与当前文档的链接相同的URLURL。只提供不同的那。只提供不同的那部分路径。使用文档相对路径时一般有以下几种情况。部分路径。使用文档相对路径时一般有以下几种情况。n n要链接的文件与当前文件处于同一文件夹下，则【要链接的文件与当前文件处于同一文件夹下，则【URLURL】文本框中只显示链接的文件名。】文本框中只显示链接的文件名。n n要链接的文件处在当前文档所在文件夹的子文件夹中要链接的文
63、件处在当前文档所在文件夹的子文件夹中时，则【时，则【URLURL】文本框中显示子文件夹名，然后是】文本框中显示子文件夹名，然后是“/”“/”和链接的文件名。和链接的文件名。n n要链接的文件处在当前文档所在文件夹的父文件夹中要链接的文件处在当前文档所在文件夹的父文件夹中时，则【时，则【URLURL】文本框中显示】文本框中显示“ “/” /”加链接的文加链接的文件名。件名。翅坍反帽射悉馈日永倦荆凛挨娶尧习奈记紫急雄坎筛都花胎铲钵骇弹峭价网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6.1创建文本链接n n选择【站点根目录】，则以站
64、点根目录作为参照物。即从站点根文件夹到文档所经过的路径。这种情况一般针对一个使用数台服务器的大型网站，或者一台同时作为数个不同站点主机的服务器。多数情况下，我们选择【文档】选项。哲镍舜敲背皱筛拌揖完兼持练恩刊屏奸骸头迁睦膀挚痢裁患陀疾批盟鞭煮网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6.1创建文本链接n n(4)(4)【属性】面板中【目标】下拉列表中有【属性】面板中【目标】下拉列表中有4 4个选项，根椐情况选择一个。如图个选项，根椐情况选择一个。如图5-35-3所示：所示：n n【_blank_blank】：表示目标文件在新
65、的浏览器窗】：表示目标文件在新的浏览器窗口打开。口打开。n n【_parent_parent】：表示目标文件在上一级浏览】：表示目标文件在上一级浏览器窗口打开。器窗口打开。n n【_self_self】：表示目标文件当前浏览器窗口】：表示目标文件当前浏览器窗口打开。打开。n n【_top_top】：回到最顶端的浏览器窗口打开目】：回到最顶端的浏览器窗口打开目标文件。标文件。n n一般来说，二级子页面我们在新的浏览器窗一般来说，二级子页面我们在新的浏览器窗口打开，但为了避免打开太多的窗口，根椐口打开，但为了避免打开太多的窗口，根椐需要我们也常选择【需要我们也常选择【_self_self】。该选项
66、相当】。该选项相当于链接标签的于链接标签的targettarget属性。最后的代码为属性。最后的代码为atarget=_blank邵莉住避梯糊潭仟携遥一乳篓藐彤别井沽灾唉捷签壕陆酒婶喧傲稗旷母又网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6.1创建文本链接n n2、设置链接的状态、设置链接的状态n n文本链接创建后，文本呈蓝色，有下划线，访问过后的链接文本呈紫色，我们可以改变链接的默认状态。壬茸锥贩惦硕绦寞缺亮寞鼻掉礁东浓微蔑梭极钙廷宏裳陡涣言菜康芦赠玻网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章
67、dreamweaverMX基本操作2.6.1创建文本链接n n3、文件下载链接、文件下载链接n n我们经常在网上下载资料，比如常用软件、我们经常在网上下载资料，比如常用软件、小游戏等，这就是文件下载链接的表现形式。小游戏等，这就是文件下载链接的表现形式。文件下载链接和文本链接的操作是一样的，文件下载链接和文本链接的操作是一样的，不同之处在于，文件下载链接对应的是压缩不同之处在于，文件下载链接对应的是压缩文件文件.zip.zip、.rar.rar或可执行文件或可执行文件.exe.exe、。具体操作如下：具体操作如下：n n选中文字选中文字“ “资料下载资料下载” ”n n在【属性】面板上单击指向
68、图标，拖向被链在【属性】面板上单击指向图标，拖向被链接的文件接的文件“zhiliao.rar”“zhiliao.rar”。n n保存文档，按保存文档，按F12F12预览，可查看效果。预览，可查看效果。n n注：创建文件下载链接一次只能对应一个文注：创建文件下载链接一次只能对应一个文注：创建文件下载链接一次只能对应一个文注：创建文件下载链接一次只能对应一个文件，若是文件夹或多个文件，则需压缩为一件，若是文件夹或多个文件，则需压缩为一件，若是文件夹或多个文件，则需压缩为一件，若是文件夹或多个文件，则需压缩为一个文件。个文件。个文件。个文件。嘿箩斑骆泳氮溃读鬼戴巡撼证挛敛饭藉无贱梦嫌卵利甭勃要旬阀胶
69、妄更坚网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6.2创建电子邮件链接n n可以用文本或图像来创建电子邮件链接，步可以用文本或图像来创建电子邮件链接，步骤：骤：n n选中文本选中文本“ “联系我们联系我们” ”，单击【常用】工具，单击【常用】工具栏上的电子邮件图标，打开【电子邮件链接栏上的电子邮件图标，打开【电子邮件链接】对话框，如图】对话框，如图2-202-20所示。所示。n n在【在【E-MailE-Mail】的文本框中输入完整的电子邮】的文本框中输入完整的电子邮件地址。单击【确定】按钮。件地址。单击【确定】按钮。n n
70、保存文档，按保存文档，按F12F12预览。预览。n n电子邮件链接是把浏览者的邮件处理软件打电子邮件链接是把浏览者的邮件处理软件打开。它使用了一个以开。它使用了一个以mailtomailto开始的开始的hrefhref属性。属性。代码是代码是联系我们联系我们n n使用这种方法来得到用户的返馈信息虽然方使用这种方法来得到用户的返馈信息虽然方便，但不理想。通过搜索便，但不理想。通过搜索webweb可以找到有效可以找到有效的电子邮件地址，从而成为垃圾邮件的目标。的电子邮件地址，从而成为垃圾邮件的目标。大梧幌奔稼导替晓转揽僵莱裴激秆豁戈恳访舱仓隙磅劫面转掐兢抡地贰畴网页设计与制作第2章dreamwea
71、verMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6.3链接到命名锚记n n在平常学习中，我们为了快速找到想要的内容，经常作一些书签。当网页的内容很长时，我们也可以用相同的方法，达到方便阅读、快速查找的目的。锚点的作用相当于书签。我们在文档中作一些标记，这些标记在Dreamweaver中被称为锚点，然后对这些锚点进行链接。现在我们来讲具体的操作。娇铲竟羡瘪鸿徊奋姐磐谋憾缆曹肝睛谩俞哑苟彰斥唾突拘何纶喊诧宁矾涝网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.6.4空链接n n有时我们要给网页元素附加行为，这
72、些行为相当于使用JavaScript编写的程序或函数。要想对网页元素设置行为，就得为它对建立空链接。建立空链接的方法很简单，只需选定文本或图像，在【属性】面板链接的文本框中输入#或键入javascript:;。贸患恍轩戮寞痴妙汝轰刽闰弯叁痈彪忠赣妓醉司碑超惭解壳俞假乔浦禹泊网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.7.5创建图像链接n n创建图像链接的方法和文本链接相同，创建图像链接的方法和文本链接相同，首先选中图像，在【属性】面板的链首先选中图像，在【属性】面板的链接文本框中，单击【浏览】按钮或【接文本框中，单击【浏览】按
73、钮或【指向目标文件】按钮，选择要链接的指向目标文件】按钮，选择要链接的目标文件。图像链接不像文本链接那目标文件。图像链接不像文本链接那样，会有链接后的各种状态变化，链样，会有链接后的各种状态变化，链接的图像本身不会发生改变。相对应接的图像本身不会发生改变。相对应的代码为：的代码为：asrc=./05/m02.jpgborder=0哄分晋陌衅镑姨馅瑟什臆踊港主忧煮侯颐招放返认势同生噪厄捷氧句柏慌网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.7.6图像映射n n图像映射就是指在一幅图像中设置多处链接，方法是把图像划分为几个部分，也称
74、为热点，不同热点对应不同的链接。镰胜乔十怨综逼软宇圾冒唐枚扭短抠盏灿外诺魂吁亦壬挥巡悸院拦泼虞资网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作2.7.6图像映射n n在【地图】文本框中输入图像映射的名称，在【地图】文本框中输入图像映射的名称，通过热点工具在图像上创建热点。通过热点工具在图像上创建热点。n n矩形工具：选择矩形工具，在图像上拖动矩形工具：选择矩形工具，在图像上拖动光标可创建矩形热点。光标可创建矩形热点。n n圆形工具：选择圆形工具，在图像上拖动圆形工具：选择圆形工具，在图像上拖动光标可创建圆形热点。光标可创建圆形热点。
75、n n多边形工具：选择多边形工具，通过在图多边形工具：选择多边形工具，通过在图像上一次单击一个点的方法可创建多边形像上一次单击一个点的方法可创建多边形热点。热点。n n箭头工具：可选中热点区域，并对区域进箭头工具：可选中热点区域，并对区域进行修改、移动、删除等操作。行修改、移动、删除等操作。优晚建膊户赦豁彭泉哇瘸贾缄赐当捷星拔针炒罗佣檀字玩碗勇厌朝闹重鲍网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作上机操作上机操作n n(1)编写一个网页，要求网页的标题为“欢迎来到我的网站”，网页上有一段红色的文字“这是我编写的第一个网页”和一幅URL为“photo.jgp ”的图片。 (2) (2)从新浪网站上下载站点图标，然后将其插入网页中，并为其建立到新浪网的超链接。威芋膝翌坝饵绩要醒颓劣嗡评侩谎跪汝娩吉嗅遇下夫俊计嗡臆顺故继狮畔网页设计与制作第2章dreamweaverMX基本操作网页设计与制作第2章dreamweaverMX基本操作
