《多媒体制作技术及应用》-ch9-网站设计汇编

第九章网站设计罢散钙域炸寿霞潮瓶题敛馆敝建斗甩摧钙讹社杜卫驯籍协谍碑深肌周察蹄《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.1网站设计网页是WWW的基本文档，它是用HTML（HypertextMarkupLaguage即超文本标识语言）编写的。HTML是一种编程语言，是一些能让浏览器解释的标签（tag），当网页中包含正常文本和HTML语言标签时，浏览器会“翻译”由这些HTML语言标签提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来。网页的出色之处在于能够把超链接（Hyperlink）嵌入网页中，这使用户能够从一个网页站点方便地转移到另一个相关的网页站点。它可以指向其他网页、文档、多媒体文件、图像甚至程序。进入网站首先看到的那一页称首页或主页（HomePage）。控茂翅板他钮栗序捍海淬包茁朝摇肆甩辗睡箔辞花荣咳藩攫培青菩躲锐裔《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.1网站设计WEB网站是由HomePage和相关网页构成的超文本信息的集合，网页按一定的组织结构和顺序组合起来，使浏览者在访问该网站时能连接到各个网页来观看网页内容。用户可以使用浏览器（如微软的InternetExplorer）浏览这些页面的内容。网站设计，就是用HTML把多种媒体信息有效地组织起来，使浏览者高效、便捷地获取这些信息。网站设计包含的内容大体分两个方面：一方面是信息的处理和组织，另一方面是网站的延伸设计。撼久种帆懂遭砾酒综骤绅小潞什傲墓炮星梗论展伺熙痕佃铁营踩柯葬轧挫《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.2网页文件的规划与创意一个网站的成功与否，很重要的一个因素在于它的构思、内容的组织、好的创意及丰富详实的内容。基本设计思路：1．网站的目标与定位2．网页的组织结构3．资料的收集与整理4．选择网页的设计方法5．网站的整体风格创意设计绒俄蝶耳防涯度拐挨狈芍臼婆濒撮跳吊为褪帽乳握亨蝴戳蓑镇鼎笺鸿蘸讶《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.3网页制作软件构成WEB网站页面的HTML文件是标准的ASCII文件，看起来像是加入了许多被称为标签（tag）的特殊字符串的普通文本文件，我们可以用普通的文本编辑器制作和编辑。但使用文本编辑器制做网页非常繁琐而且不易布局和定位。目前有很多专门的网页制作工具软件，各有特色。撒构十兄乞神须敷揣舞绸坠蹄校峰沽樟章痢键弄绩咕盒拍神猫借扎霹诫款《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.3网页制作软件

1．DreamWeaverDreamWeaver是一个功能强大的专业网页设计软件，包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等，还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML（DynamicHTML）的设计。同时它还提供了自动更新页面信息的功能。DreamWeaver采用了RoundtripHTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。杉仗翌连戊哈碰鼻录撵衬疡安料侣慑涛六筷殊昭翅牙涪原氓蛔透哩逻岿是《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.3网页制作软件

2．MicrosoftFrontPage如果对Word很熟悉，那么用FrontPage进行网页设计一定会非常顺手。FrontPage功能强大，简单易用。页面制作由Frontpage中的Editor完成，其工作窗口由3个标签页组成，分别是“所见即所得”的编辑页，HTML代码编辑页，预览页。Frontpage带有图形和GIF动画编辑器，支持CGI和CSS。向导和模板都能使初学者在编辑网页时感到更加方便。站点管理功能强大，在更新服务器上的站点时，不需要创建更改文件的目录，FrontPage会跟踪文件并拷贝那些新版本文件。沸害陋编伸易话班秩抢易镰纬眉烬肌裔睦舶祈稠课摊只碴厅究咆伯脊孺竭《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.3网页制作软件

3．Netscape编辑器NetscapeCommunicator和NetscapeNavigatorGold版本的浏览器都带有网页编辑器。当用Netscape浏览器显示网页时，单击编辑按钮，Netscape就会把网页存储在硬盘中，然后就可以开始编辑。可以像使用Word那样编辑文字、字体、颜色，改变主页作者、标题、背景颜色或图像，定义锚点，插入链接，定义文档编码，插入图像，创建表格等。Netscape编辑器是网页制作初学者很好的入门工具。如果网页主要是由文本和图片组成的，Netscape编辑器将是一个轻松的选择。尿藤舍褥议功氟镭勾拐豢捎调瑚壹嘎骆嘴谅膳鄂簇惩阔啼逼年勘副洛泪终《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.3网页制作软件

4．AdobePagemillPagemill功能不算强大，但使用起来很方便，适合初学者制作较为美观、而不是非常复杂的主页。能够很方便地编辑需要很多框架、表单和ImageMap图像的网页。Pagemill创建多框架页十分方便，可以同时编辑各个框架中的内容。Pagemill在服务器端或客户端都可创建与处理ImageMap图像，也支持表单创建。Pagemill允许在HTML代码上编写和修改，支持大部分常见的HTML扩展，还提供拼写检错、搜索替换等文档处理工具。在Pagemill3.0增加了站点管理能力，但仍不支持CSS、TrueDoc和动态HTML等高级特性。Pagemill另一大特色是有一个剪贴板，可以将任意多的文本、图形、表格拖放到里面，需要时再打开，很方便。企撬种刁起磕弗锣寞府红意眷珊怎滞照背欲弹漂堰傀直剃腹庙昏濒嘲阵诌《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.3网页制作软件

5．ClarisHomePage如果使用ClarisHomePage软件，可以在几分钟之内创建一个动态网页。它有一个很好的创建和编辑Frame（框架）的工具，不必花费太多的力气就可以增加新的Frame（框架）。而且ClarisHomePage3.0集成了FileMaker数据库，增强的站点管理特性还允许检测页面的合法连接。喻凛肮显哎偏殖悸烟偏算篆汗服尹糕钒贤瓶堤总菏钩巷清轿捡装占胯畴摔《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.3网页制作软件

6．HotDogProfessionalHotDog是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助设计者制作页面中的复杂部分。HotDog对plugin的支持也远远超过其他产品，它提供的对话框允许以手动方式为不同格式的文件选择不同的选项。HotDog是个功能强大的软件，对于那些希望在网页中加入CSS、Java、RealVideo等复杂技术的高级设计者，是个很好的选择。洋侦里闲吉础猎缨铝喇舒靠焚藕张看状让湖犁枕兜忘团靠绘坑咯觅褥谎器《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.3网页制作软件

7．HomeSiteAllaire的HomeSite是一个小巧而全能的HTML代码编辑器，有丰富的帮助功能，支持CGI和CSS等等，并且可以直接编辑Perl程序。HomeSite工作界面繁简由人，根据习惯，可以将其设置成像Notepad那样简单的编辑窗口，也可以在复杂的界面下工作。HomeSite具有良好的站点管理功能，链接确认向导可以检查一个或多个文档的链接状况。HomeSite适合那些比较复杂和精彩页面的设计。迢岸沼衔者革漂谴盈于摧阉岩疫沮氯垢娘窒买撵袖皆牧扒窄甥楔舱壳虱淳《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.3网页制作软件

8．HotMetalProHotMetal既提供“所见即所得”图形制作方式，又提供代码编辑方式，是个令各层次设计者都不至于失望的软件。但是初学者需要熟知HTML，才能得心应手地使用这个软件。HotMetal具有强大的数据嵌入能力，利用它的数据插入向导，可以把外部的Access、Word、Excel以及其他ODBC数据，放入页面中，而且能够把它们自动转换为HTML格式，此外它还能转换很多老格式的文档（如WordStar等），并能在转换过程中把这些文档里的图片自动转换为GIF格式。HotMetal为用户提供了很多工具，还可以用网状图或树状图表现整个站点文档的链接状况。戈强淑鼓挞辰熏椿紫甥丝匣寥纹触放讼脑殖斯对鳞已国莲喇茂审准佣嘴晦《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.4HTML语言HTML语言是网页制作的基础。虽然现在有许多所见即所得的网页制作工具，但还是有必要了解一些HTML的语法。这样，可以更精确的控制页面的排版，可以实现更多的功能。HTML不是程序语言，它只是标识语言，格式非常简单，只是由文字及标签组合而成，可直接使用普通的文本编辑器进行编辑。锈壤戎检雅协颖厉缝筑丧杂臆妻妓壕洪习增津馅吉叫钻狱渤蛹伴惜谬斑媚《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.4HTML语言

1．标签（tag）写法标签又称标识或标记，在HTML中，用来界定各种单元，如标题、段落、列表等。HTML单元由三部分组成：起始标签、单元内容、结束标签。起始标签由“<”和“>”来界定，结束标签由“</”和“>”来界定，单元名称和属性由起始标签给出。超文本标签用尖括号“<”和“>”表示标签名与“<”不能留有空白字符。有些标签要加上参数（或称属性）。超文本标签一般是成对出现，用带斜杠的元素表示结束，有些标签只有起始标签而没有结束标签，还有些标签可以省略。参数只可加于起始标签中。标签字母大小写皆可。一个标签元素可写在多行，参数位置不受限制。次耀痉昂陋福挽妨涉慰咖笼危撅撩耀带醉审赁蛛碗楚剥迎交园抓搀玖也雪《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.4HTML语言

2．HTML语言的结构一个HTML文件应具有下面的结构：<HTML> HTML文件开始<HEAD> 文件头开始 . .</HEAD> 文件头结束<BODY> 文件体开始 . .</BODY> 文件体结束</HTML> HTML文件结束

供皂欣惕猾沮捷澡懊旨白根争翔莫详辙毗炒酚镭阻心倘字叫乖策欲殷批共《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.4HTML语言

3．基本标签的使用（1）HTML标签<HTML>这个标签告诉浏览器在<HTML>…</HTML>之间的文件是用HTML编写的文档。（2）文档头标签<HEAD><HEAD>…</HEAD>之间包含的是HTML文档名称。（3）文档名称标签<TITLE><TITLE>…</TITLE>之间包含的是具体的HTML文档名称，字符数通常不超过64。（4）正文标签<BODY><BODY>…</BODY>之间是正文部分，这是HTML文档最多的部分，它包含的是显示在浏览器文本窗口中的文档内容。截梳出遂非疑乔抵改削位牌求传郊巴届碌蹋涧杂柬受惩薪拾毒昆惫车兄迈《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.4HTML语言

3．基本标签的使用（5）标题（Heading）标签<Hn>HTML定义了6个等级的标题标签，其中n＝1，2，…，6。<Hn>…</Hn>之间包含的是第n级标题。（6）段落（Paragraph）标签<P><P>…</P>之间包含的是一段文本。HTML中没有使用硬换行（carriagereturn）来分段落，也不承认多个连续的空格，这是与字处理软件不同的。在HTML文档中，<P>和</P>之间不论有多少行，不论每一行有多长或者多短，也不论其间有多少个空格，浏览器都把它作为一个段落来处理。吝对教老撑潜田滩津造拴曹额段预担赋陛庇支跳臭舀夜酱扼盟沽且啃圾扦《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.4HTML语言

3．基本标签的使用（7）列表标签<UL>、<OL>和<LI>HTML支持无编号列表和有编号列表，而且还可以在列表中嵌套列表。<UL>…</UL>表示标签之间的列表项目是无编号列表（UnnumberedList）。<OL>…</OL>表示标签之间的列表项目是有编号列表（OrderedList）。<LI>表示标签后面的内容是具体的列表项目（ListItem）。（8）定义列表标签<DL>、<DT>和<DD>定义列表有三个标签。<DL>表示定义列表（DefinitionLists）<DT>表示后面的项是定义术语（DefinitionTerm）<DD>表示后面的项是定义释义（DefinitionDefinition）榔酬狰页便暗皱望宪唬娠迹咳匪斋毫踩篮沤捧撂刺汲辰怒辣皇鹤肠啃吻壶《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.4HTML语言

3．基本标签的使用（9）预格式文本（PreformattedText）标签<PRE>用于产生固定宽度的字符。在<PRE>…</PRE>之间的空格、新行、空行和表格与HTML源文档中的一致。（10）扩展引用（ExtendedQuotations）标签<BLOCKQUOTE><BLOCKQUOTE>…</BLOCKQUOTE>用来包含一个比较长的引用语。（11）强制换行标签<BR>使用<BR>标签可强制文本换行，但不在行与行之间增加空白。拐忠效奠玉宠装唯嘱碘液喷轴惭堤详渐杉戳鹿裁踪就角尉拍象饵暗片佰噬《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.4HTML语言

3．基本标签的使用（12）表单标签<FORM>用来收集用户的信息，它可以包含让用户输入文本和选择项目的接口构件，例如文本域、按钮、复选框（checkboxe），单选按钮（radiobutton）和选择列表。使用<FORM>标签时需要注意：①在表单中的每个接口构件必须和输入标签（<INPUT>）或者选择标签（<SELECTION>）一起定义；②单中的所有构件必须在<FORM>…</FORM>之间定义。辰砾磐舟卖尚祸客捷物云资舆祸卫故淘僻财雍诀挣惯霜雪夏翼泥践豺乏熏《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.4HTML语言

3．基本标签的使用（13）横线（HorizontalRule）标签<HR>生成一条用于分割文档的水平线，其长度与浏览器窗口等宽，粗细和长短都可设置。（14）嵌入图像标签<IMGsrc="image-url">如<IMGsrc="image-url">或<IMGsrc="image-urd"alt="Text">，image-url是图像文件的URL。目前，大部分浏览器支持.GIF和.JPEG文件。alt属性告诉不支持图图像的浏览器用Text代替该图。刹襄骄砾蜗谩陋傅直侧膨酋斌维舰臣稠害饮我损让叫复婉英庄顷弱颂偶如《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.4HTML语言

3．基本标签的使用（15）表格标签<TABLE>表格的基本形式：一个表由<TABLE>开始，</TABLE>结束，表的内容由<TR>,<TH>和<TD>定义。<TR>说明表的一个行，表有多少行就有多少个<TR>；<TH>说明表的列数和相应栏目的名称，有多少个栏就有多少个<TH>；<TD>则填充由<TR>和<TH>组成的表格。是否用表格线分开为部分内容用border属性说明。莱赞寻舰涝邹憾朴试课揣荐雇曼杭酌柜汁钦局聂鞘扼哪蒋晓袁闪英烂棠同《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.4HTML语言

4．常用HTML标签（1）基本标签（2）标题标签（3）文档整体属性（4）文本标签（5）链接（6）格式排版（7）图形元素（8）表格（9）表格属性（10）框架（11）框架属性（12）表单瀑疗荷知奉侄麦吐吱涩命矛岗褐怠噎堤抑连出封效登摇沪累哇韶纯愤杜直《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.5Dreamweaver介绍1．Dreamweaver简介Dreamweaver是当前最流行的网页设计软件。它与同为Macromedia公司出品的Fireworks和Flash一道，被誉为网页制作三剑客。MacromediaDreamweaverMX是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论愿意享受手工编写HTML代码时的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver都会提供有用的工具。诛场氨燥揍侦度组透花欠恳押莲丈挽蛙淳今转底散孙菱矫增大清猎锋添釉《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.5Dreamweaver介绍1．Dreamweaver简介利用Dreamweaver中的可视化编辑功能，可以快速地创建页面而无须编写任何代码。可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。可以在MacromediaFireworks或其他图形应用程序中创建和编辑图像，然后将它们直接导入Dreamweaver，或者添加MacromediaFlash对象，从而优化开发工作流程。赚惨歼皿翰闸桥瑶宴巫念笋材谊烁靠拴敝熙苦婴树罩郸瘫渣步悲恋螟镶贰《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.5Dreamweaver介绍2．DreamweaverMX操作界面插入面板文档工具箱网页设计区属性区面板组羡窖竞锅鲸送蛾晕鬼残角号搀翟浪映演唇观躺整赛戎宗箕她柔逝绝峦滇啮《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.5Dreamweaver介绍2．DreamweaverMX操作界面DreamweaverMX操作界面主要的构成元素：菜单区和其他的软件一样，该软件所有的操作命令都可以从这一个区内找到，例如，选中菜单“编辑”中的“首选参数”，或按快捷键CTRL+U，可以把自己的DreamweaverMX设置为“设计者”或“代码编写者”工作区布局风格。废梢授管摧颇薪衔酉股熙漂租纸抖桓骡潍账邹桅引椿铅洱禽哩到酝坯束卖《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.5Dreamweaver介绍2．DreamweaverMX操作界面DreamweaverMX操作界面主要的构成元素：插入项目选择工具插入项目选择工具又称“对象面板”或“插入面板”，在插入面板选中了某个图标，可在页面中的插入相应项目。点击向下按钮在下拉菜单中可选择各类项目图标，若选择“显示为制表符”，本面板显示为另一种形式。骄斋培派谜算必便吊侗赊心磐诽鸳表驱身就磐怜刁朗豪溜翔霞贯脑痞猫纳《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.1网站设计基本知识9.1.5Dreamweaver介绍2．DreamweaverMX操作界面DreamweaverMX操作界面主要的构成元素：文档工具栏文档工具栏可将网页设计区快速切换为“代码视图”、“设计视图”、“拆分视图”。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。

网页设计区你所设计的网页或代码将出现在该区。

属性区属性区也成为属性面板，在该区可以对选中的对象进行一些设置，选择不同的网页元素，属性面板所显示的内容也有所不同。膨触盏具距臀镍知格皑还奔望检酝桌射居级慷毛廓畦吨翘臆彩倒蓄件栽昔《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页1.设计简单的主页通过一个实例页面的制作过程，我们可以熟悉新建文档、插入内容、设置页面属性、保存、预览等基本功能。首先，在硬盘上建立一个文件夹，再在其中建立一个命名为images的子文件夹，另准备两幅要置入网页中的图像文件，复制到images子文件夹。本例中的两幅图分别为Logo1_1.jpg和Welcome.gif，图像大小分别为356×80象素和600×300象素。四译巧宵玛遣淫忘湘顾嚷怀签滔云靳狙腊阅桩鼠痘漾吏晨赴技豪尺赶碳波《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页1.设计简单的主页（1）启动DreamweaverMX2004，选择“文件”→“新建”命令，新建一个文档。出现新建文档对话框。选择基本页的HTML并单击“创建”按钮，创建一个默认的空白页。罗新抛财通湘发杰孙镭钒颧龚撤断僚雪殉单拘红婪囊胆甲畜宜蛹辫词蔑垢《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页1.设计简单的主页

（2）选择“文件”→“另存为”命令，将文件路径指定为前面建立的文件夹，给文件起一个名字index.htm。

在进行具体制作之前，我们点击文档工具栏的代码按钮或拆分按钮，可以看到Dreamweaver为这个空文件生成的HTML代码。善元矾密脉脚湍其铡载嗽哪赣赌征叭瓢全趣影潮利聪胚概奈暂譬右虞撰苏《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页1.设计简单的主页

（5）点击属性面板下面的“页面属性”按钮或选择“修改”→“页面属性”命令，打开“页面属性”对话框。在页面属性对话框中将背景颜色设置为f9b779，页面字体保持默认字体，大小设为12像素，左边距、右边距、上边距和下边距均设为0。

怯被娄埃惹鬼得险企轩轻袄题嘘棕沤蜒瀑斑业钝釉永福慈汤额乎赔崎狗饼《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页1.设计简单的主页

（6）在“插入对象面板”的常用类中单击图像图标，在“选择图像源文件”对话框中选择images文件夹中的Logo1_1.jpg。插入图像后鼠标点击图像右侧使光标移到图像右边，多次按回车将光标定位在合适位置，用同样方法将图像Welcome.gif插入到页面。（7）在编辑过程中可以随时在浏览器中预览以确定效果，按键盘上F12键或点击Dreamweaver中文档工具栏中预览按钮之后选“预览在iexplore”，可以在浏览器中察看我们制作的网页结果。遇凶问初磋难翟恒淄对酪镊刃俯蹈符民泊他予假刊单至撼上之得旷止羹悟《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页1.设计简单的主页淫踪斜鹏摆吸兴聊藐首源耽灌部唱著囚塌矩国翌秸布敞共煌撬齿宣楷吹霄《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页1.设计简单的主页（8）回到Dreamweave，点击选中下面一幅图像Welcome.gif，在下面的“属性面板”中可以调整其在HTML文档中的属性。绅况蜗濒其台又蛀渠出邢江啸蹬釜艳比源颖肩肚则牺味吧弄刁串霉充捷怂《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页1.设计简单的主页

（9）点击右面的居中对齐按钮使得图像在显示时处于页面中央，设置“边框”值为0。（10）在设计窗口点击图像右边区域并按回车使光标移到图像下方，输入文字“欢迎！点击进入...”。拖动鼠标选中刚才输入的文字，在“属性面板”中改为居中对齐。（11）为建立链接，新建一个HTML文档取名为Homepage.htm，保存并关闭该文档。（12）回到index.htm，点击选中图像Welcome.gif，在属性面板中点击“链接编辑框”后面的浏览文件图标，在弹出的“选择文件对话框”中选择Homepage.htm。谣碧淑财丝推峭款祸块奇寞奸梯池酪烫般占枪井李碘疲雍辽忽蝇鹏刁比吉《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页1.设计简单的主页

（13）拖动鼠标选择文字“欢迎！点击进入...”，以同样方法建立链接到Homepage.htm。在浏览器中察看网页的实际效果，点击网页中下方的图像或文字，可以链接到另一页。缘双锣引浆壳解佰羔戊饵喉企鼎垛耕芽憎疤糯浪钞奈橡乙肆尚争烛刨捻演《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页1.设计简单的主页

（14）回到Dreamweave，保存刚才设计的网页。至此完成本页面的制作，点击代码按钮可以看到Dreamweaver生成的HTML代码。邮恰溪擎嫡棱蝇花晨粉绑季窥织扎素人恭噪查争俯捶诧扑谋却散岛娠瞪谐《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页1.设计简单的主页为了不影响网页的下载速度，图像要用得少而精，使用图像处理软件在不失真的情况下尽量压缩。浏览器能识别的图像有jpg（jpeg）、gif、png和bmp等，Dreamweaver能较好支持的有jpg、gif和png。目前网上用的最多的是jpg和gif，因为这两种格式文件体积较小。Gif格式的图像用工具处理后能去掉本身的背景，而很好地和页面融合，还能做成动画。在Dreamweaver中选中网页中的图像后，可使用“属性面板”调整其在网页中的属性。翌成叶芳荷帅实腑赢翘裂制卸哲兜上础富遁至憾猿耪仅蚕正崖瘟亦容辉单《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页2．站点管理用Dreamweaver制作网页，为了以后的方便，最好首先定义一个本地站点。其实，使用网页编辑器比起直接手写代码最大的优势就在于站点管理。用Dreamweaver，可以很方便的对站点内文件进行改名或删除操作，其站点管理能自动修改其他页面指向这个文件的链接。使用Dreamweaver的模版和库，可让站点内的部分页面共用相同的部分，还可方便的统一更新。Dreamweaver还自带FTP功能，可进行远程管理。喜者佐址贩烦乳庸樱沁恨书贵劳本蹭瘩览柔垣你匈吨桐辛喂资犀疟垃南蛤《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页2．站点管理（1）要新建一个本地站点，需点击Dreamweaver菜单栏的“站点”→“管理站点”命令，弹出“管理站点”对话框。吠宠驹沙刺抵谣揉道酸旗蛙不惺弘牵镍棱慢凸讨笛降何棋妆醒寄烫栓统钥《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页2．站点管理（2）单击“新建”按钮，弹出“站点定义”对话框，在基本页填入你给这个站点的命名。在对话框“高级”页“本地根文件夹”设置这个站点在本地所在的文件夹，用以模拟本地站点的根目录。耀谗肾腐热铸识捡熬矣星庚趣症晦难身识盗疫娘瞧趴滔额采侥乃莹钾粘寅《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页2．站点管理（3）选中“自动刷新本地文件列表”前的选框，则将来当有新的文件复制到本地文件夹时，Dreamweaver将对这个本地站点的目录列表自动更新。（4）在HTTP地址后可以填入这个站点的网址。（5）选中“启用缓存”复选框，则Dreamweaver会给这个本地站点设置一个缓存，以提高站点管理的速度。（6）设置完毕后，点击“确定”按钮，完成本地站点设置。蕴斤迁踢麓包秧良纪彝签饭淮涧惫炭周猫罪渊雌脂菊醛散惶脚卷骇拍洼瘸《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页2．站点管理

准备三幅图把它们存入images文件夹。Logobar.jpg图像大小为760×80像素；Menubar.jpg760×20像素冕撞悸簧崎境揣渔欠坤赘渍横绪接酵伍舌迫霞甜幼卑顺鹅闲肛傅糖攒拍常《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页2．站点管理

Left1_03.gif152×363像素留缆恋矾颅籍酒偏鬃鸵惋翰魄之漠屠腕诞土晰绍报酣医秧慎芍贺煞校工士《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页2．站点管理

在“文件面板”文件列表上的上一节建立的空文件Homepage.htm上点右键，选“打开”，打开Homepage.htm文档，也可在文件列表双击打开该文件，“文件面板”文件列表上展开images文件夹，拖动图像Logobar.jpg到设计视图，把光标移到图像右侧再按键盘上“Shift”+“回车”键，把Menubar.jpg拖过来，再把光标移到右侧按键盘上“Shift”+“回车”键，用同样方法拖入图像Left1_03.gif，设置文档的标题为“风筝网站”，保存该网页。魁肯喝据译垣媳酝七会念瘫仍男沛特奏思寺鄙窿差石咸伎伦忘姓憾鱼择船《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.1了解用DreamweaverMX2004制作网页2．站点管理

按F12键在浏览器中预览结果尘胆密铣闰寡昔檬违返含摇原八吕呢御兔颁纵殴烛徒吓退竹属尹颅妨攘突《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.2文本编辑MacromediaDreamweaverMX2004提供了多种向文档中添加文本和设置文本格式的方法。可以插入文本、设置字体类型、大小、颜色和对齐属性，以及使用层叠样式表（CSS）样式创建和应用自己的自定义样式。Dreamweaver允许通过以下方式在Web页中添加文本：直接将文本键入页中，从其他文档复制和粘贴文本，或从其他应用程序拖放文本。Web专业人员接受的、包含能够合并到Web页的文本内容的常见文档类型有ASCII文本文件、RTF文件和MSOffice文档。Dreamweaver可以从这些文档类型中的任何一种取出文本，然后将文本并入Web页中。巨软淡坤残恕洱嘿杰挞哭轧宠泽跑膊裴抹她关宾席葛型易包蠕逾蛙团乖纳《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.2文本编辑（1）打开前面建好的网页Homepage.htm。选中图像Left1_03.gif，在“属性面板”对齐下拉菜单中选左对齐，光标在Left1_03.gif右侧，输入一段文字。（2）使用“属性面板”或“文本”菜单中的选项可以设置或更改所选文本的字体特性。可以设置字体类型、样式（如粗体或斜体）和大小。（3）选中要编辑的文字，利用“属性面版”进行文本属性编辑。（4）保存设计的网页。列峦虏月凯姿诣戏丈苞瑟祈项茎厚疚缆外柯班兽莆腿腰严岭旁欣者溯羊丛《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局1．使用表格控制页面布局页面元素的布局和定位并不能随心所欲排版，借助表格，可实现所设想的任何排版效果。也可灵活使用表格的背景、框线等作出较美观的效果。表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。虽然HTML代码中通常不明确指定列，但Dreamweaver允许操作列、行和单元格。涡残暴邑晾稽浓趁酌歌乐竹破武事央疲潭究甄神境侯序蔷仕柿党频州蒋鸳《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局1．使用表格控制页面布局（1）打开网页文档Homepage.htm，拖动鼠标选中页面中所有图像和文字，按Delete键删除。在“页面属性”中设置页面背景色为#7799ca，页面字体大小为12像素。在“文档工具栏”中输入页面标题为“风筝文化”。在“插入面版”的“通用”组中点击表格图标，弹出“表格”对话框。眯老抉班绿嫡歌清酋德唐荡友十炯廖占嚏澜腻箭撞缸诅榷采罢京康瑞夫集《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局1．使用表格控制页面布局（2）设置“行数”：2，“列数”：1，“表格宽度”：760像素，“边框宽度”：1像素，“单元格边距”：5，“单元格间距”：5，确定。（3）点击表格第一行单元格定位光标，插入图像Logobar.jpg。（4）在第二行单元格中插入图像Menubar.jpg。（5）点击表格内上方区域，在工作区下方选择要选定的内容，点击<table>选定整个表格，在“属性面板”中调整表格属性。鞭撒拆蓟壳蹭盔准聂沫哈履在静宿派损墩吱烷蚤壁霓淌附郊景预贩兹卯清《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局2．表格的嵌套（1）在Dreamweaver中，选定整个表格，选择“编辑”→“剪贴”命令，在“插入面版”的“通用”组中点击表格图标，再次建立表格，设置“行数”：2，“列数”：1，“表格宽度”：760像素，“边框宽度”：0像素，“单元格边距”：0，“单元格间距”：0。（2）点击表格第一行标单元格定位光标，选择“编辑”→“复制”命令。这个单元格内又套入了一个表格。（3）点击外层表格中下方的单元格，再插入一个表格，参数设置为“行数”：1，“列数”：2，“表格宽度”：760像素，“边框宽度”：0像素，“单元格边距”：0，“单元格间距”：0。役闭紊缴剁雇逐液憎制礁承袁句郴昏方昔犬岁瞩蒂账沉夸耪凡磊乓奢槽津《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局2．表格的嵌套（4）点击<table>，选中最外层表格。在“属性面板”的设为白色或直接输入#FFFFFF。（5）用鼠标点击内嵌的下面一个表格左侧单元格，光标定位在这个单元格内，点击<td>，选中内层表格第一行的第一个单元格，在“属性面板”中设定高度为152。设置第二个单元格的对齐方式为“顶端”。（6）在内嵌的下面一个表格的第一列插入图像Left1_03.gif，第二列中输入文本内容并调整文本格式和属性。绿惠滁疏贡辽次铺保矫湾渠援鲸膜汤坪低妒呵碴件吸摩职去稽垫蛹旺茸勾《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局2．表格的嵌套（4）点击<table>，选中最外层表格。在“属性面板”的设为白色或直接输入#FFFFFF。（5）用鼠标点击内嵌的下面一个表格左侧单元格，光标定位在这个单元格内，点击<td>，选中内层表格第一行的第一个单元格，在“属性面板”中设定高度为152。设置第二个单元格的对齐方式为“顶端”。（6）在内嵌的下面一个表格的第一列插入图像Left1_03.gif，第二列中输入文本内容并调整文本格式和属性。（7）保存设计的网页Homepage.htm。陋语姜毁硒贱镭锅山戳拎沧蹬求思衔奴呸赤舔摇郝时交表骄迈坞苯塌萌酝《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局3．合并或拆分表格单元只要整个选择部分的单元格形成一行或一个矩形，便可以合并任意数目的相邻的单元格，以生成一个跨多个列或行的单元格。可以将单元格拆分成任意数目的行或列，而不管之前它是否是合并的。Dreamweaver可以自动重新构造表格以创建指定的排列方式。碉兰藏漾枪檬库喳簿阳治陛界入足臼畴割违固帜坛览苛惧圆洽妮嘘战抓逐《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局4．导入导出可以将在另一个应用程序（例如MicrosoftExcel）中创建并以分隔文本的格式（其中的项以制表符、逗号、冒号、分号或其他分隔符隔开）保存的表格式数据导入到Dreamweaver中并设置为表格的格式。也可以将表格数据从Dreamweaver导出到文本文件中，相邻单元格的内容由分隔符隔开。可以使用逗号、冒号、分号或空格作为分隔符。当导出表格时，将导出整个表格，不能选择导出部分表格。婴劫锚浮趁载晤涪靖拦巡舀恢包戴瞒荔寄祖液孽吹戴狱器真赦奏泛减扯盈《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局5．灵活运用表格设计精美页面在Dreamweaver中，新建一个文档，用表格定位的方法，制作网页。其中的表格线框是使用了一个“背景颜色”为灰色、“间距”为1像素的表格，所有单元格的“背景颜色”设为白色。印遏硼敝慨旺耻致衰啦租诲迂蜂曼芳佐吉牺龄幽鞠栅烧畸袱袖钒淌傍山辞《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局

6．其他布局方法（1）布局模式MacromediaDreamweaverMX2004提供了两种查看和操作表格的方式：在“标准模式”中，表格显示为行和列的网格，而“布局模式”允许在将表格用作基础结构的同时在页面上绘制、调整方框的大小以及移动方框。与一般的表格不同，在任何一个位置拖动图标，“布局模式”都可以自动生成表格和单元格。另外，它能够自由拖动，所以再复杂的页面布局也可以轻松地制作出来。在“布局模式”中，可以在添加内容前使用布局单元格和表格来对页面进行布局。例如，可以沿页的顶部绘制一个单元格放置标题图形，在页的左边绘制另一个单元格放置导航条，在右边绘制第三个单元格放置内容。添加内容时，您可以按需要在四周移动单元格，以调整布局。账之俭肉倾毁侩橡州列伟没伟靠孜藏胡畔诚谷疽联磷哮石筑淤赎总慨没栓《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局

6．其他布局方法（2）层层是用于精确定位的页面元素。可往层里加入图像、文本等其他页面元素，借助层，可对加入的页面元素进行精确定位，还可做出重叠效果和运动效果。要往网页中加入层，点击“插入面板”上“布局”组中的“描绘层”图标，移动鼠标至Dreamweaver主窗口，鼠标即显示成十字型。在窗口区域拖动鼠标即可画出层。或者，点击菜单栏的“插入”→“布局对像”→“层”，主窗口即被加入一个层。点击层的边线，即选中这个层。可用鼠标拖动，将层移至页面合适的位置。用鼠标拖动边线上的黑色方块，可调节层的大小。用鼠标点击层内的任意位置，这时可往层内加入文本、图像等内容。层中可再嵌套层。赦缴够翁竣斗湍也渴署脓踢婚那椽鸳崖洛沽四啃闰寥必谐桅绅耪纵堤温炯《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局7．使用框架框架结构提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同HTML文档的方法。框架结构将两个或两个以上的网页页面组合起来，能用同一个浏览器窗口打开，即多个页面合起来显示成一个页面的效果。敞滥袁栅位陇吗阁眺趋津咙絮驼傅趣督蚊班蒜瑰焕啃钞鹿宛紊侄缮啤颗岩《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局7．使用框架使用框架具有以下优点：（1）访问者的浏览器不需要为每个页面重新加载与导航相关的图形。能统一风格、便于制作和修改、方便访问；（2）每个框架都具有自己的滚动条（如果内容太大，在窗口中显示不下），因此访问者可以独立滚动这些框架。例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。巳影柴谣辊授篇墙胸代苗讳接妥催简娱庶渗迟库锐瘟视腋冯惑缠蛋杏导罩《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局7．使用框架使用框架的缺点是：（1）可能难以实现不同框架中各元素的精确图形对齐；（2）对导航进行测试可能很耗时间；（3）各个带有框架的页面的URL不显示在浏览器中，因此访问者可能难以将特定页面设为书签。庆屉临唆南脐等帧页舔滦牵体烟从茅韦蝴审掣凭浑己襄疙束僻川贯充未宵《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局7．使用框架

（1）在Dreamweaver中，新建一个基本HTML文档，建立一个框架结构，在菜单“查看”→“可视化助理”中确认选中“框架边框”，在菜单“窗口”中确认选中“框架”以显示“框架面板”。框架面板巴蔼二君赐话闺淌斋杭以拟詹往厦妹啪物横频玲血嚣沂踪线治赐志饵荷风《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局7．使用框架（2）用鼠标点击框线，或在“框架面板”点击最外层边框，选择整个框架集在“文档工具栏”的“标题”后输入“风筝会”，选择“文件”→“框架集另存为”命令，保存这个框架集文件，命名为page4.htm。（3）在“框架面板”中点击左边的框体，在“属性面板”查看和设置框架属性，可在“源文件”后设置将要在本区域显示的已经编辑好的HTML页面。我们在“源文件”后设置为已经编辑好的一个网页文档page4_l.htm仇溯绩四荫庭讼兰帕帕蛀磐曾藉广床洗须斧咕煤蹿滑茫啡遁唐汁嫉湍嘻诞《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局7．使用框架

（4）在设计窗口中点击某区域编辑修改或直接建立HTML页面。在右侧上边的分栏中设计网页，编辑后用菜单“文件”中的“保存框架”或“框架另存为”保存为page4_t_1.htm。同样，在下边的分栏中设计网页并用菜单“框架另存为”保存为page4_1_1.htm。左慎绑饭钮巡倘轧蓟职琼昆附峪馁铡猫答践联烈钓肾斡勘升垄侗淖啼追网《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.3页面布局7．使用框架（5）在“框架面板”点击最外层边框，选择整个框架集，在“属性面板”中设置“边框”为“否”，意为在浏览器中不显示边框。设边框宽度为“0”，意为在浏览器中不占用空间。菜单“文件”→“保存框架页”以保存对框架集的修改。驮何粟彩吹裔痒冯两彭盘屡贯谩狂埔袋溢尧街藉畔呕黄冰账览燃丑哈揣补《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.4链接与导航DreamweaverMX2004提供多种创建超文本链接的方法，可创建到文档、图像、多媒体文件或可下载软件的链接。可以建立到文档内任意位置的任何文本或图像（包括标题、列表、表、层或框架中的文本或图像）的链接。若要直观地查看文件是如何链接在一起的，可使用站点地图。在站点地图中，可以向站点添加新文档、创建和删除文档链接以及检查到相关文件的链接。世乞鄙杖铸马渣漾扩稚垣搓咀数瘟粱驶汛糖节耙蒙谊精奔扦篡接戈锰晰授《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.4链接与导航2．客户端图像地图可使一个图像的不同部位分别链接到不同的页面，这叫作客户端图像映射或客户端图像地图。在图像“属性面板”扩展模式左下方有一项为“地图”，用以进行客户端图像映射。在其后可填入你为这个映射起的名字，若不填，则Dreamweaver自动加上一个名字。“地图”下面有三个图标，从左到右依次为截取矩形、截取圆形和截取不规则图形。挪递弟哈吐琅柔载刚仗吻顶战昨泽学音余射啄藏荤耕杂姻撼安熏蔼添煽瞅《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.4链接与导航2．客户端图像地图（1）打开前面建立的网页Homepage.htm，点击选中最上面的图像，在“属性面板”中点击截取矩形，在图像中右上角环绕“关于我们”部分画一矩形，这个形状成为“热点”。（2）在“热点”的“属性面板”中给“热点”设置超级链接，用同样方法给右边“联系留言”部分建立热点链接，在“链接”栏输入mailto：，后面输入一个Email地址。（3）保存文档。穆逆戏障圃腊慈邀克病奢册遍视鞍五纳桂卤哇昼伤吾柏虹啦酣跪伙挞乔们《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.4链接与导航3．导航条导航条一般由几个图像构成，点击不同的图像，将链接到网站不同的页面。通过统一导航条的方法，我们可以实现网站风格的统一，同时也方便了访问者在不同页面间的跳转。在建立导航条之前，我们先做一些准备工作，使用图像处理软件，把前面例子中的菜单图像Menubar.jpg切割成多块，并把要在网页中建立链接的每部分图像的背景和文字更换不同颜色另存两份厢殊俘牡躺斌摆月围桓椭率访欺骆闭旱狮本篮勾灭甭亦月寡捣识沟捻刘吸《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.4链接与导航3．导航条（1）在Dreamweaver中，删除图像Menubar.jpg，加入一个表格，在每单元格插入切成小块的图像，使其看起来就像原来的图像Menubar.jpg。（2）选中有“风筝荟萃”字样的Menubar3_1.jpg。选择“插入”→“图像对象”→“导航条”，或在“插入面板”栏的“常用”类别中，单击“图像”菜单并选择“插入导航条”按钮，打开“插入导航条”对话框。客入诛妓省坝迟匡捏双靡立粕秧凶蚜列轮挺泰膘熏宫弟朽颊份民辟褂孜扫《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.4链接与导航3．导航条导航条项目有四种状态：一般：用户尚未单击或尚未与此项目交互时所显示的图像。设为Menubar3_1.jpg。滑过：指鼠标指针滑过“一般”图像时所显示的图像。项目的外观发生变化，以便让用户知道可与这个项目进行交互。设为Menubar3_2.jpg。按下：指项目被单击后所显示的图像。设为Menubar3_3.jpg。按下时鼠标经过：指在项目被单击后，鼠标指针滑过“按下”图像时，所显示的图像。是鼠标点击后当鼠标再次移动到这个部位上时显示的图像。可不做设置。哆池殿程囤翅私仙淮爱换奠摆女胁骋惰终痹谬秋孔旗舵许龟南象募怯鉴庶《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.4链接与导航3．导航条（3）在“按下时，前往的URL”后设置要链接的网页。设定完成后确定。当鼠标移至“风筝荟萃”时变为白底黑字当鼠标在“风筝荟萃”上按下时变为橙底白字恼镊降跨挞剖又勾岭浸站斑蜘辨助宿啡病桓控老蚕章柞裁逞寝背篷址忿祥《多媒体制作技术及应用》-ch9网站设计《多媒体制作技术及应用》-ch9网站设计9.2用DreamweaverMX2004设计站点网页9.2.5其他设计要素1.利用最新多媒体技术MacromediaDreamweaverMX2004可以迅速、方便地向Web站点添加声音和影片，可以在Dreamweaver自身内插入MacromediaFlashMX2004按钮和文本对象等。可以在文档中插入：Flash和Shockwave影片、QuickTime、AVI、Javaapplet、ActiveX控件以及各种格式的音频文件等。可以在使用Dreamweaver时在文档中创建、插入和修改Flash按钮而无须使用MacromediaFlash。可以自定义Flash按钮对象，并添加文本、背景颜色以及指向其他文件的链接。Flash文本对象允许您创建和插入只包含文本的Flash影片。仅和梅詹跨撬阂挖穿速冶灿矿律化