教学与自学教程

《教学与自学教程》由会员分享，可在线阅读，更多相关《教学与自学教程（217页珍藏版）》请在金锄头文库上搜索。

1、第5章 Dreamweaver与网络课件 Dreamweaver CS4此章节均为此章节均为Dreamweaver CS4的学习的学习以便于教学及自学者使用以便于教学及自学者使用港奴娥巴胃雕植妖泅哑浊稠肮斩曲遁碎剥摊秒盾炮萄在载犹得魂配初娱禹教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.1 5.1 概述概述 5.2 Dreamweaver CS45.2 Dreamweaver CS4的工作界面的工作界面 5.3 5.3 建立教学站点建立教学站点 5.4 5.4 编辑教学网页编辑教学网页 5.5 5.5 网页的布局方法网页的布局方法 5.6 5.6 表单表单5.7 5

2、.7 教学站点的发布教学站点的发布蹭候衫衔娜端满芹巍脆粒胖空普壬刺榜整拳侮俐坞额竞梅涨鹃哎丰茅畏药教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 多媒体CAI课件的特点是集文本、图形图像、声音、动画及数字电影于一体，可谓声光电并存、声情画并茂。正因为如此，课件的体积往往很大，这与网络传输是相互矛盾的。因为网络传输速度的“瓶颈”严重制约了大体积的“信息文件”的传播与发送。所以，网络课件的制作原则应该区别于其它形式的课件，以短小精悍为最高原则；其次，由于网络课件的使用对象具有不可预知性，因此要求网络课件在语言上必须更规范、更精确，同时必须具有更好的引导性和交互性。 5.1 概

3、概 述述尖邻败佰估核烘涝附才免捶氧西舌氨掂峦挎候咕盯恼纤基犹段芹浅为药肿教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 牢固掌握了网络课件的制作原则以后，接下来就是选择网络课件的制作工具了。目前可以用于制作网络课件的工具很多，几乎所有的网页制作软件都可以用于制作网络课件，例如FrontPage、Dreamweaver等，本章主要介绍Dreamweaver CS4的应用技术。制作网络课件实质上就是建立教学站点，Dreamweaver CS4是目前最流行的一款所见即所得的网站开发与网页制作软件，在制作网络课件方面具有独到的优势。它是一款所见即所得的网页编辑工具，具有功能强大、

4、界面简洁、简单实用等特点，是最好的网页制作软件，也是制作网络课件的首选软件。 绩钾瑚短背侗农突纯摄险稗仇硬职爱阶躺钩访仙咙既诚挛仔潞乡侧娜秉抿教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 Dreamweaver CS4提供了多种工作界面，以适合不同的工作人员。第一次安装该软件并启动后，出现的工作界面如图51所示，该工作界面称为“设计器”界面。对于老用户而言，如果不适应这种工作界面，可以通过界面切换菜单进行切换，选择适合自己的界面模式。本章将以“经典”界面模式介绍Dreamweaver CS4在网络课件中的应用，如图52所示。5.2 Dreamweaver CS4的工作界

5、面的工作界面 发漾拷兵岛章丹睫闻涛肺栓销菊髓届罩暇黔窗隶坎绞趣今瘦埂抒界渡瘴古教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图51 “设计器”界面窄乐耿曹赫箔承吐娇割瘁迄萤纂轴国玄勾哎峡息锯沼阮绊弛荷桓峭税倍首教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图52 “经典”界面姜姜河郊鹏暴捡桌茂携熔嗣烃稍拒徽倦攫感莆渺衬啦珍每梭佬奏利抗躁增教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 由上图可以看出，Dreamweaver CS4的工作界面主要由菜单栏、【插入】工具栏、【文档】工具栏、编辑窗口、状态栏、【属性】面板和各种面板

6、组构成，下面简单介绍各主要组成部分。 峭鸵卯饵橇遂沤忠馋菠涨雕修婪稻氢影哮虑咐躲户胁冬嘴俘腆植俭甜亡押教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.2.1 【插入】工具栏【插入】工具栏Dreamweaver CS4的【插入】工具栏中包含了8个标签，分别为：常用、布局、表单、数据、Spry、InContext Editing、文本、收藏夹，如图53所示。单击【插入】工具栏中的不同标签可以进行切换，每一个标签中包括了若干的插入对象按钮。单击【插入】工具栏中的对象按钮或者将按钮拖曳到编辑窗口内，即可将相应的对象添加到网页文件中，并可在网页中编辑添加的对象。锡阅膜厕隋曳川臂

7、媒够簇筑纲茸四裙遥硷弘鳃斡箕颁卜要旧手当傍恩料志教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图53 【插入】工具栏 促咯喜锯思淖稽淄琶特辈羌蝇芽舌幕讫忧近逻娃湍舱婴诌咖吓圾癌皋兢并教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.2.2 【文档】工具栏【文档】工具栏【文档】工具栏中包含了代码视图、拆分视图、设计视图、实时视图、实时代码、文档标题、文件管理、浏览器预览、可视化选项等按钮，如图54所示。隙敖持墩鹰颐碌箍龟钧凰牟塌糠雾坚卿穷抛张娘跺坯秒阳乐湿屠惋拳恩楔教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图54 【文档

8、】工具栏桶捂惹限妖滤洪书觅矿垮跋赘充猪缸暴琢垫肥磋歪珊产讹手砒刷祷温姬耍教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【文档】工具栏中的前三个按钮用于切换视图模式。单击按钮可以进入代码视图，这是一个用于编写和编辑HTML、JavaScript、服务器语言代码(如ASP或ColdFusion标记语言)以及其他类型代码的手工编码环境。单击按钮可以进入代码视图与设计视图，在该视图中，窗口被分成上、下两部分，顶部窗口用于编写HTML代码，底部窗口用于可视化编辑网页。单击按钮可以进入设计视图，这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Drea

9、mweaver中显示的文档处于可视化编辑状态，页面效果类似于在浏览器中查看页面时看到的内容。昔敛霞涉历屋拙雁府怒掇豹利蛤钻丹层砧洋扼个底顶绊隶蛋恼耀芽巷宠钨教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.2.3 状态栏状态栏在Dreamweaver CS4状态栏中可以显示当前光标所在位置的HTML标记，通过此标记可以确定所编辑的网页内容。状态栏上还可以显示当前网页的编辑窗口大小、当前网页文件的大小与网页的传输速度，如图55所示。另外，Dreamweaver CS4的状态栏上新增了视图控制工具，其中选取工具用于选择页面中的操作对象；手形工具用于平移视图；缩放工具用于放大

10、或缩小视图显示；而设置缩放比率选项框可以通过确切的数值控制视图的缩放。彦苹扩依综苑奶章掌柳他男秧砸晨兴对紊缅懒缝厄邵饶咳余筋则抚霖防惯教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图55 状态栏姨雏绦拥专腕限业赣滇镰悼婶骨活恶菩氨泡鼠胚朔长吃傅寇氛稿借筋煌瞻教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.2.4 【属性】面板【属性】面板【属性】面板用于显示或修改当前所选对象的属性。在页面中选择不同的对象时，【属性】面板中将显示出不同对象的属性。例如选择了文字，在【属性】面板中显示的是文字的属性；如果选择了图像，则【属性】面板中将显示图像的属性。

11、另外，还可以直接在【属性】面板中修改所选对象的属性，修改后的效果可以在编辑窗口中反映出来。如图56所示为选择表格时的【属性】面板。 在【属性】面板的右下角单击三角形的切换按钮，可以将【属性】面板切换为常用属性或全部属性模式，如图57所示。贼蓟枢苏夜蛾留关朽抚烈省缓验硷铅鸵即碗砸彭矽朗凰逆摆厚膛菇茁仰工教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图56 【属性】面板 施摈皮尧吾跑武瑞酌鹤旋萧续稚弦僳其壕棵游印炎缉刃水克蔬贯及窜采阜教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图57 切换后的【属性】面板 镑播录论藐隧荡其继娃刀嘱米胺焊浪腺瞧弊财髓

12、烛智农瞧假酥撮债乞坏靖教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.2.5 面板组面板组面板组是指组合在一起的面板集合，它为我们编辑网页提供了既直观又快速的操作方法，是设计制作网页时不可缺少的工具。单击【窗口】菜单下的相应命令，可以打开或关闭面板。当我们打开一个面板时，与其成组的面板会同时出现，如图58所示。 痉痹杀随览帜邯炸摈神枕蔚渺麦安次裤腻俊氯特仿儒蔑竿衙蒲荚蚂差添潭教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图58 打开的面板组竿子堑摔露独汕辱价苏界泽葵鹤周条愈淡网哈响粤君驭芳末弹犹偏奋肢愁教学与自学教程教学与自学教程第5章 Dre

13、amweaver与网络课件 单击面板组中的标签，可以在不同的面板之间切换。另外，将光标指向面板标签，按住鼠标左键向外拖动，可以把该面板从面板组中分离出来；分离出来的面板组还可以再放回去，只需拖动面板标签到面板组中即可。墓锣何澳酷显抑那背窟蹿武赤戚唾边台勋姆香涵淌靠叁顷情倘迢苗琴阅砷教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.3.1 规划站点规划站点规划站点是建立站点的前期准备工作，主要包括规划站点主题、规划站点结构、设计网页版面、收集站点素材等。例如，要建立一个教学网站，该网站主要介绍语文、历史、地理等学科的教学内容。我们首先要考虑站点的服务对象，确定主题内容，同

14、样是介绍语文、历史、地理等学科的站点，我们是侧重课外辅导，还是侧重考试指南？这就是主题问题，只有确定了主题，才能有的放矢地进行工作。 5.3 建立教学站点建立教学站点诗殃推禹泪魁涌界仓丙肮占诀乳刹萧您虾蔑撼雨兢变氨鲤帕竭闻队李汐返教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 确定了站点主题以后，需要进行站点结构的规划，同一个网站要介绍三个学科的内容，如何组织才能脉络清晰，这是动手制作站点之前必须做好的一项工作。当确定了站点主题、组织结构以后，接下来的工作就是设计网页版面，网页作为一种视觉语言，应十分注重其版式的设计，其中主要包括色彩、构图两大方面的内容，这完全取决于制作

15、者的综合水平，包括审美能力、设计能力、文字能力等多方面的素质。有鸣脓憾拣撤憎恨邮娟适骑放贷辽篱犬狄龚煽墙毕茄酶虹樟团扑辙彤旨畜教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 以上三项工作完成以后，接下来需要收集与整理站点素材，这是一项费时费力的工作，需要精心组织与筹备。例如，为了使教学站点具有生动性、吸引性，达到生动简洁、便于教学的目的，要求每一部分都要有内容文字、相关图像，甚至还要有动画、声音等装饰。因此在前期的准备工作中，搜集素材的工作量最大。两设湘令肖妨捆贯择肃魔贝轻侵较窘茂布义掠吉陪傅斌捆公拳久荷珐恶媒教学与自学教程教学与自学教程第5章 Dreamweaver与网

16、络课件 准备好素材后，需要确定站点在本地计算机上的存放位置。通常情况下，首先根据站点结构在本地计算机上建立一个站点文件夹，如在C盘根目录下建立一个文件夹作为站点文件夹，命名为“教学站点”，用于存放站点的所有文件。其次，为了更好地管理站点内容，便于以后的站点更新与维护工作，需要在站点文件夹下分别建立用于存放站点文件和素材的子文件夹，如用于存放图像、动画、应用程序、插件等的文件夹，文件夹的命名最好与所存放的内容相关，以便查找。唆迅苞斜刊酒啪奥摄痘焊嗣镶笆拍客啥本眷犹恭趟宵漾李滤顺鄙肺戮彰伞教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.3.2 创建站点的基本结构创建站点的

17、基本结构创建站点的基本结构，是指确定站点的整体结构和网页之间的结构关系。创建站点的基本结构时首先要建立空白的站点，其次是添加网页文件与站点文件夹。1创建站点创建站点Dreamweaver CS4提供了两种创建站点的方法：一是在启动Dreamweaver时通过欢迎画面创建；二是在Dreamweaver工作环境下，单击菜单栏中的【站点】【新建站点】命令。这两种创建站点的方法都是通过向导完成的，非常直观。例例5-1建立kejian站点。1) 启动Dreamweaver CS4，则弹出欢迎画面，如图59所示。误辖烩纂雁背欧穷姚变狰仙焚呆街捏龄缩酚输掩三雕扎榆麦锦仇戳瘁签霉教学与自学教程教学与自学教程第

18、5章 Dreamweaver与网络课件 图59 欢迎画面 繁雾漆煽烤泳茧焕贪奏摧庞绅橡例垫德悬畅看碍茫拌沤碴着酬队傻蜂雨云教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 2) 单击【Dreamweaver站点】选项，则弹出【的站点定义为】对话框，在该对话框中有两个标签，其中【基本】标签就是站点定义向导，第一个对话框如图510所示，这里有两个选项，第一个选项要求输入站点名称，以便在Dreamweaver中标识该站点，这里输入“kejian”。第二个选项要求输入站点的http地址，如果还没有域名，可以暂时不填。懂幅准冠坞听堆尿枷陷版闪腹襟脏级供殷秦艰琶删嘲楷探榔赘可灭湾致泰教

19、学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图510 第一个向导对话框峦围受讳罚齿蠢氦佣汾瑚果松挎易谐视奄谰娄扳裹舵及柒益丢颜龟径赫邑教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3) 单击按钮，进入站点定义向导的第二个对话框，如图511所示。该对话框询问用户是否要使用服务器技术，选择【否，我不想使用服务器技术】选项，表示该站点是一个静态站点，没有动态页。隔子眠日维侵烁销炊栋艇爸袒拒辗兴衍突午述布枝霉隐灼矗棱爷胰掖件妊教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图511 第二个向导对话框籍挺难仿聘成雏菜缆梢搓杯呜览铀迁怂

20、土捻猛硅庐仁馋厩消姜酪池击瘩陋教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 4) 单击按钮，进入站点定义向导的第三个对话框，如图512所示。该对话框询问用户如何使用文件，这里选择第一个选项，然后在下面的文本框中指定一个文件夹，Dreamweaver将在其中存储站点文件。5) 单击按钮，进入站点定义向导的第四个对话框，如图513所示。该对话框询问用户如何连接到远程服务器，这里从下拉列表中选择“无”。省诬镐遮野宦减趴男滋售妥捕壶闹久宦觅松溯貌巢啸赋阐抠育沥槐渠隆辰教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图512 第三个向导对话框哮阐柳嫂欣巴旁息

21、唉以堕每陨夹砚吠畴矿追萎季嫌贮腻恐制翟担伶炳拳公教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图513 第四个向导对话框兑挎钓遍讳柜柱靳载椿烷皆誓粮戈懦册克情窍糯慈己蚕开并胞磕凤碴玛蒲教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 6) 单击按钮，进入站点定义向导的第五个对话框，其中显示了用户的设置概要，如图514所示。7) 单击按钮，则通过向导建立了一个本地教学站点。筏匣契井佰鸵树蛊践要萄东肌虹天拌少够描障枉捌柜毯揉掠账羞裔滓少脸教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图514 第五个向导对话框塞应塌哉奥倦年铀箕叮疚

22、巡姓领厦耶马瞎综寝熙胖场定幸惠寥熏碘含默诬教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 建立了本地站点以后，新建的站点将显示在【文件】面板中。单击菜单栏中的【窗口】【文件】命令，或者按下F8键，可以打开【文件】面板。该面板中显示了本地站点的名称以及本地站点的文件夹等选项，如图515所示。现在我们已经创建了一个教学站点，不过，目前为止这个站点还是空的，没有实际内容，因此必须向站点中添加相关的内容。玫尖棕论佬核趾畴懒追车甩诌导浪递歹搀颂巢策根蹬恶峭瘫囱呕墓涂貌更教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图515 【文件】面板拒溅傅躇喉飞足宰没锁旺

23、馁倦旧丸梭粮蒲搏誓娟跃极婚警汛没谷村糖亦感教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 2添加网页文件与站点文件夹添加网页文件与站点文件夹新建的站点是空白的，其中没有任何内容。根据站点的规划，需要向其中添加网页文件或站点文件夹。网页文件即上网时浏览的HTML文件；站点文件夹则用于管理站点内容，因为站点中会有很多文件，为了有效地管理文件，可以将它们分门别类地存放在文件夹中，如图像文件夹可以专门用于存放图像、动画等。淳足放哪冉弃贝桓呢沧障堪隘揽栏拟魄贰从躯人遣碳旷了雍芹欺疹亭撞帜教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 在站点中添加网页文件与文件

24、夹的方法基本一致，操作步骤如下：1) 在【文件】面板中单击鼠标右键，则弹出一个快捷菜单。2) 选择快捷菜单中的【新建文件】命令，则新建了一个网页文件，如图516所示。锰骤之订蛰迅惹挨罐捻遥些犬马胎杰练藏歹影症启搜炒室褥攫笔黍殿肆眶教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图516 新建的网页文件向寇昂袋转滞猿铃窝欲痉殆炎臣性灼么礼早颖谨幌施体俊禾肌庇紊仙凤妒教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3) 在光标位置处输入网页的名称，然后按下Enter键确认，则完成了网页文件的添加。4) 同样的方法，如果在弹出的快捷菜单中选择【新建文件夹】

25、命令，则可以在站点中添加一个文件夹。从奏县孝肉缮众绘衣造灰赐厄澄炙淄惋经础侦犯眼抠漂单骑漳敦裂砒美舶教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 例例5-2为kejian站点添加内容。1) 在【文件】面板中的“kejian”文件夹上单击鼠标右键，则弹出一个快捷菜单。2) 选择快捷菜单中的【新建文件夹】命令，则在“kejian”文件夹下新建了一个文件夹。3) 在光标位置处输入文件夹的名称，如“Images”，按下Enter键确认。4) 根据“kejian”站点的要求，用同样的方法再新建三个文件夹，分别命名为“Chinese”、“English”和“Geography”，用

26、于存放关于语文、英语和地理等方面的内容，如图517所示。淮新旧月土茵脉阔卜恫猎回汾崭唯纶舌峭隋业雀病撞宙垄嗡凡羚远剁棉青教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图517 新建的文件夹 汰谁汞沈廓去送匙基仅盈泼赎素漫简粪愿允轧棱里潍扎利烧隘辉瓶滤楼廊教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5) 在“kejian”文件夹上单击鼠标右键，从弹出的快捷菜单中选择【新建文件】命令，则添加了一个网页文件。6) 在光标位置处输入网页文件的名称，如“index.html”，按下Enter键确认，如图518所示。7) 用同样的方法，分别在新建的文件夹上

27、单击鼠标右键，选择快捷菜单中的【新建文件】命令，则可以在该文件夹中建立新的网页文件。如图519所示为在每个文件夹中建立的网页“Chinese.html”、“English.html”和“Geography.html”。 湘摇起蜀袄贸湾日益缎炬遥棵素咨怕箕保乎孔浑胚狮蓄条卿郁播宇炔旦诱教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图518 新建的网页文件 协隅俗键截刚赋揪乞咬禹闷札瞪淮脸渣乙伐淡勤考市厌录然胳她氏唁馏谁教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图519 新建的网页 叮啥金笛湾煤帘颓堤帧钱撰惑裔溉啼辗递亿节丢莆角磐稳屈脏拧币仗咨痪

28、教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.4.1 文本的编辑文本的编辑文本在网页中具有举足轻重的地位。文本内容充实，可以吸引众多的浏览者；文本编辑处理得当，可以使浏览者在获得信息的同时感到赏心悦目，这对于提高站点的浏览次数极为重要。向网页中输入文本以后，可以进行文本的格式、对齐方式等的设置。输入文本的方法如下：5.4 编辑教学网页编辑教学网页辩匠报叛戳盐窍象寂造唁懈谁攘梭摄蟹轮擦玲姚艺薛烙挺地畔媒诈啮贸讯教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 在编辑窗口中输入所需的文本。如需换行分段，可以按下Enter键；如需换行但不分段，可以按住

29、Shift键的同时按下Enter键。 对于大量的文本，可以使用“复制/粘贴”的方法将其它文件中的文本复制到当前网页中。在网页中输入文本以后，可以根据需要设置文本属性。选择要编辑的文本，此时的【属性】面板如图520所示，在这里可以设置文本的各种格式。坍事钡悬斩贞腋儡抬熔庭犊萎三岩膏篙裔喀男喊山柒骡黍非嵌眠至囚穷等教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图520 【属性】面板备频垮罐偏咀荔桅索键届除恫踏纶陨倍航捣鉴稍淹姻憨窃粪寞扯蹲泊俺氟教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【格式】：选择其中的选项，可以对所选文本应用系统预设的格式。

30、【ID】：用于为所选内容分配一个ID号。 【类】：显示当前应用于文本的类样式，如果没有对所选内容应用过任何样式，则显示“无”。 单击按钮和按钮，可以将所选文本加粗和倾斜。 单击或按钮，可以为光标所在的段落或所选择的段落添加无序或有序项目列表。幅挪翘蕴饶诫舟蹈哲瞒蓝泽单嫡藩丈爵击晶铆孺箔屑河另耗秃披斑痹济谎教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 单击或按钮，可以使光标所在的段落向右或向左缩进。 【链接】：用于为所选的文本建立超链接。可以在其后面的文本框中输入要链接文档的路径名称，也可以单击右侧的图标，在弹出的对话框中选择链接的文档，或者按住图标指向要链接的文档建立超

31、链接。 【标题】：用于设置超链接的文本提示。脉璃酱域悼秽峨拆钨疵言拴骄逾谤泄略术掖贩掌股最戏浅香瑚琐沽蹋疾巡教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【目标】：用于选择链接文档在窗口中的打开方式。选择“_blank”选项，表示将在新的浏览器窗口中打开链接的文档；选择“_parent”选项，表示将在当前文档的父级框架或包含该链接的框架窗口中打开链接文档；选择“_self”选项，表示将在当前文档所在的窗口中打开链接的文档；选择“_top”选项，表示将在整个浏览器窗口中打开链接的文档。Dreamweaver CS4将CSS属性面板与HTML属性面板集成在一起，在【属性】面

32、板中单击按钮，可以切换到CSS属性面板，如图521所示。膜杠窗子莉辽几刺霓搭东坝议室冒枣匹赠拾瓷复寄霉赛垢霓尝逼编瘟盟撤教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图521 切换到CSS属性面板 这腋桨新培鳃雄操夺欢使试毖札筷臻掸岭苛搔廉辞困瞧劝俄恶漆笨疙侯骤教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【目标规则】：用于显示页面中所选文本使用的规则，也可以通过该选项创建新的CSS规则、新的内联样式等。 单击按钮，则打开【CSS规则定义】对话框，用于设置CSS的各项属性；如果从【目标规则】列表中选择“新CSS规则”选项，并单击按钮，则可以新建C

33、SS规则。惋焰泛割狈涎蹈碟匝径痊群苗围搭雄睹首柜噶章西播抨泛渝骆钝乖顾寞说教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 单击 按钮，可以打开【CSS样式】面板。 【字体】：用于选择所需的字体。如果字体列表中没有所需的字体，可以选择列表中的【编辑字体列表】选项，这时将打开【编辑字体列表】对话框，如图522所示。在对话框的【可用字体】列表框中选择所需的字体后单击按钮，将其添加到【字体列表】中，单击按钮，则该字体将出现在【属性】面板的字体列表中。涟疥钦抬饥桓踞甘庚荫炸渡弗锯如鸯试闽惕奋祁郎迈河届褂火涣昨朴涪抡教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件

34、 图522 【编辑字体列表】对话框吠褥方褪戏猾叔志享眷慕捻寒噪皋猎抉哈惶渐岔亭虐斯指闻兽掺蛛钮岿弓教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【大小】：用于设置文本的字号大小。 单击文本颜色块，在弹出的颜色列表中可以选择文本的颜色。 单击按钮和按钮，可以将所选文本加粗和倾斜。 分别单击按钮，可以使光标所在的段落或所选择的段落实现左对齐、居中对齐、右对齐和两端对齐。戌戊命熬戮外莆邯罗漾鹰鱼下毙战虱芹轨吏淆顾樟悦教攀清椿硅谣艾昭刊教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 在Dreamweaver的编辑窗口中输入文本之后，系统将自动生成与其对应的

35、HTML代码。值得注意的是，输入文本时按下空格键并不能移动文字，这是因为在HTML代码中不能输入多个空格。要解决这个问题，可以在【属性】面板的【格式】下拉列表中选择“预先格式化的”命令，然后再按下空格键。 寿带禾酥玉褪丛仙敝滋跳奔客漳愚便查丝蛊甫微逊齐删褐陈鹏龄穷脐慕硕教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 例例5-3制作一个纯文字网页。1) 在【文件】面板中双击“Chinese.html”网页文件，打开该网页进行编辑。2) 在【属性】面板中单击按钮，在弹出的【页面属性】对话框中切换到【外观(HTML)】分类，如图523所示。孝苛姨粉诀外酬拓衍淳漆繁近蜕焉潘桔劣澜

36、蚂客摆舵呻雏拄访虱汛绑惕哮教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图523 【页面属性】对话框(1)净咎敬芬督炸酥柏晋紧逻狐占舜回驰帅贵堪硫仙挑霖潞啡盆吏裸蹦魔柠棺教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3) 单击【背景图像】文本框右侧的按钮，选择一幅图片作为网页背景，然后切换到【标题/编码】分类，在【标题】文本框中输入“唐诗欣赏”作为网页的标题栏文字，如图524所示。4) 单击对话框中的按钮，完成页面属性的设置，则为网页设置了标题栏文字与背景图像，如图525所示。妇口江副奈搐致怕焉膀怖疙扔瑶擅卷番双革榨噶锅先芜寻龚彰捏粗半坏虐教学与

37、自学教程教学与自学教程第5章 Dreamweaver与网络课件 图524 【页面属性】对话框(2) 椿杨松怠名抒郴辈喜段岛翌入拜询牺效邢气着岸驱添项彭矮播别溃隔佬独教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图525 设置网页背景图像膏樱乱瑞疯脉唆措安场缔臻柄吃泰紫埠悉澡劲繁约乾兑陨臃腊吩同紫哩氮教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5) 在编辑窗口中输入文字“唐诗欣赏”并将其选中。6) 在【属性】面板的【格式】列表中选择“标题2”选项，设置网页的标题。然后切换到CSS属性面板，单击居中对齐按钮，设置文字居中对齐，结果如图526所示。7

38、) 将光标定位在标题文字后面，在【插入】工具栏的【常用】标签中单击按钮，在页面中插入一条水平线，如图527所示。矽仪穿腋穴宣洼拂险苫告呆捕茧巷乾膘霓鸿李欺览径烯枝腕琉樱邀紧熄摸教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图526 设置网页标题格式免赠囱盛俄特介硼恋唁斥顺韵呀烈蔽登艳捡稚冷疼导衰料轮硅噪板避寺擒教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图527 插入的水平线 戏柳阵抛骨寄爪槽嘘淫蔡号磨勺欣挺旦阳谚丛烛巾卵喧是婿幂瓶爪吏国析教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 8) 将光标定位在水平线的后面，按下

39、Enter键，产生一个新段落，在新的段落中输入如图528所示的文本内容。9) 在【属性】面板中切换到CSS属性面板，设置文字的相关格式，也可以建立CSS规则格式化文本。烁后副悉示壮瞪正贯匀念莆叛蚤降肌慈荡壶拖汝拱柿吩瞪视绷狂碎姐骸耸教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图528 输入的文本内容作充诲碳稚襄乔谐悸肾脐骤凹奈扦冠踌垛和呵堂琴七缓之况娟哟袄恕阜眺教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.4.2 在网页中使用图像在网页中使用图像在网页中除了文本以外，应用最广泛的就是图像了，使用图像不但可以美化网页，还可以作为超链接的源端点

40、，可谓一举两得。在Dreamweaver中，既可以使用动态图像，也可以使用静态图像，但无论使用哪种图像，首先要考虑文件的大小，例如，使用静态图像时最好使用GIF、JPG或PNG格式的图像，因为这些图像的体积相对较小。 副砷宫振吹覆访噶案潘士菇喳索喂竿蔬滥毙别敢挟倾败戳做谈后绽液粒仇教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 1插入图像插入图像在网页中插入图像时有两种情况：一种情况是图像已经规划在站点中；另一种情况是图像位于站点之外。如果在建站前期没有将图像规划在站点之内，插入图像时将弹出一个提示框，如图529所示，提示用户将图像复制到站点中。插入图像的操作比较简单，只

41、要单击菜单栏中的【插入】【图像】命令，或者在【插入】工具栏的【常用】标签中单击按钮即可。板囊诛夹羔弓莫檀咋仙焊稳酪菱砷辣聋雕肺驶蓖危艾撅容侥罐畦知词寇沂教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图529 提示框骇嗽竹八垦侩逆阑顿猖沥针棵萤径悠染硒另诣审奏洪憾孙浑乞胺掉敦著嘲教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 例例5-4在网页中插入图像。1) 在【文件】面板中双击要编辑的网页文件将其打开，将光标定位在要插入图像的位置处。2) 在【插入】工具栏中选择【常用】标签，单击其中的按钮，在弹出的【选择图像源文件】对话框中选择要插入的图像文件，这

42、里选择一幅站点之外的图像，如图530所示。 绳凡滋牙途菊捕袍催烙诈宴佳险驶镶项彻千钩柞哺檬孵接镁挠赣渡犹思适教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图530 【选择图像源文件】对话框泥味祷饱赖讫必候锦腑型陡仍窗烽拟悔晚墅桅纳泳锥恼盯惦秤丧囊蓉夫逸教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3) 单击按钮，将弹出一个系统提示框，如图531所示。提示所选的图像文件不在站点中，发布时可能会出现错误。询问用户是否将所选文件复制到站点文件夹中。4) 单击按钮，在弹出的【复制文件为】对话框中将所选图像文件保存在当前站点中。恬饲沂改诞让邱郝庇装射孺轴籍

43、奖虞歉拳农隋需束院罗汗泡俞剥国帘郸丙教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图531 提示框糊侠涵宣压倔册砚罐缨啥熙黑迂裳氰提束矛楷伦雄浆照垫治尔饯铬齿苟伎教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5) 单击按钮，则弹出【图像标签辅助功能属性】对话框，用于输入图像的替换文本，如图532所示。6) 单击按钮，则将所选图像插入到网页中，如图533所示。 寿睹棒釜鸿去喇骗肆脉偏氰聚特辫佣何咒终欧篷蛊郊颧贱瞩纹握捌芭钝蚕教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图532 【图像标签辅助功能属性】对话框优矽佛冬械裤也捆

44、稗憨晓麦唐讨女蝉墟您泥彝橡吃唉祟做垦钧唆挣鸽地沁教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图533 插入的图像锻原仕爬想机憎堰挑侵握棚避佰篓酱荷吭墩队隶椭舒注痹掣啊迂乍常瘤毅教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 2设置图像属性设置图像属性插入到网页中的图像可以通过【属性】面板设置其属性，如改变图像的大小、建立超链接、设置对齐方式等。要设置图像的属性，首先要选择网页中的图像，这时【属性】面板将显示图像的属性，如图534所示。 俩送慕寞庭点腰督伞趋砖犯澎醛卢匆罚抵毖面摈柠也晰娱咳晋塘允斟松速教学与自学教程教学与自学教程第5章 Dreamw

45、eaver与网络课件 图534 【属性】面板遮澎邑涵娘缨嵌坷边封袜贩缄寿崎操滚案墅唇母韵草芜糙刷哈夜兰莽赃奇教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【图像】：用于显示图像文件的大小。在其下方的【ID】文本框中可以为图像文件命名，该名称可以用于脚本的调用。 【宽】和【高】：用于显示或修改图像的宽度和高度，单位为像素。 【源文件】：用于显示该图像文件的URL地址。 【链接】：用于为图像建立超链接。 【替换】：用于输入图像的说明性文字。浏览网页时，当光标指向图像上时将出现该文字。霞燕腑帅启废毋愤啊披长痉辫衙拢狂吮惕些馒折侣忻勉搭谗蹿舒召人痪怯教学与自学教程教学与自学教程

46、第5章 Dreamweaver与网络课件 【编辑】：这里提供了编辑图像的功能，既可以在源程序中编辑图像，也可以在图像浏览器中优化图像。 【垂直边距】：用于设置图像与其周围对象在垂直方向的空白距离。 【水平边距】：用于设置图像与其周围对象在水平方向的空白距离。 【目标】：用于设置打开目标文档的目标窗口，该选项只有在图像建立了超链接时才可用。 睦胸灼吟期彼渠玲含馆痔艇凝写漫哨摈椅砌题汁狙堑耳儿繁产匹晴病绒抡教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【原始】：用于显示图像被载入之前预先载入的低品质图像的URL地址，以便缩短用户的等待时间。 【边框】：在其后面的文本框中输入

47、数值，可以为图像添加相应宽度的边框。取值为0时图像没有边框。另外，其右侧的按钮可以对图像裁剪、重新取样、调整亮度/对比度、锐化等。 【对齐】：用于设置图像与其周围对象之间的对齐方式。 秩肋碟盗涝孙车媒羊币咸脓眷屿雁辰遂虐舷械叙窝诲漳洪峰萨窝伊祭部尼教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3为图像建立超链接为图像建立超链接在Dreamweaver CS4中，用户可以为图像建立超链接，浏览网页时单击图像可以打开链接的目标文档。为整个图像建立链接的方法比较简单，只需选择要建立超链接的图像，在【属性】面板的【链接】文本框中输入要链接的目标文档的URL地址，或者利用和图标选

48、择要链接的目标文档即可。例例5-5为图像建立链接。1) 在【文件】面板中双击“index.html”网页文件将其打开，然后插入三幅图像，作为导航按钮，如图535所示。 履都丝睦差铁耍宪倚脓琶绥保皇诽段建蝉妻所吼孰疙叙凄弥鲜订饲恨宝囤教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图535 插入的图像识荣拄泊匈相缩哦甘有渍条喳赴郡源甩待傅疫群伪晌侩尧仑遁醛匿恕术需教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 2) 选择“语文天地”图像，在【属性】面板中单击【链接】右侧的按钮，在弹出的【选择文件】对话框中选择本站点内的“Chinese.html”文件，

49、如图536所示。3) 单击按钮，则为“语文天地”图像建立了链接。4) 选择“英语之家”图像，在【属性】面板中按住【链接】右侧的按钮，将其拖动到【文件】面板中的“English.html”文件上，则为图像建立了链接，如图537所示。 素宗险饼频愉岩故粕寄蔷饱沥孪膨奏漫氓溺熬资苞析糊路练巧放气告秤裸教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图536 【选择文件】对话框贡猴背枕俐楷花灰衔奔犁矗歇米藕顾翱妥噬展架掩宝诚舍仲陌煌倍苞搪寒教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图537 为图像建立链接 硒袋戒伊盆诅匝卒剥镇价震备湃例迄踞勋宅调汹茬肺

50、朴构咒榔旬坠诈匪照教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5) 选择“地理知识”图像，在【属性】面板中的【链接】文本框中输入“Geography/ Geography.html”，则为该图像建立了链接。在上面的实例中，我们列出了三种创建链接的方法。工作的时候，哪一种方法方便就使用哪一种方法。另外，实例中建立的链接都是站点内部的链接，如果要建立站点与站点之间的链接，可以直接输入网址，如http:/。袱炼鼠畜遥测拼收恕矾憋披毅脆伐吐氏怒部颐璃遗江脐让勘魂琶奶葵萎遂教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 除此之外，在Dreamweaver中

51、也可以为图像的某一部分建立超链接，浏览网页时单击该部分图像可以打开链接的目标文档。如果要为图像的某一部分建立超链接，需要先在图像上建立热点，然后再为热点建立超链接。具体操作步骤如下：1) 选择网页中要建立热点超链接的图像。2) 在【属性】面板中选择建立热点的工具，在图像上建立热点，如图538所示。烩哀室哪奠帖篆蠕盗诧收臭职韶挣燃喀齿葱川尧蓖仓棵艳亚仇跺拳葱遇练教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图538 建立的热区啡器昌溶过州馁衅喂渭渤冈月褒口氟请惠巴捡渤藩友涪笺洼懂服涪搬舟冠教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 选择工具后在图

52、像上拖曳鼠标，可以建立矩形热点。按住Shift键的同时拖曳鼠标，可以建立正方形热点。 选择工具后在图像上拖曳鼠标，可以建立圆形热点。 选择工具后在图像上移动并单击鼠标，可以建立多边形热点。 选择工具，可以选择并移动建立的热点。孝蹭奖拷蒸柜矮逝叠殊佑鲜然窿论由种或孪水忌撕钥转桔披沼凸港触团丫教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3) 使用工具选择建立的热点，在【属性】面板中为其建立超链接，如图539所示。在【链接】文本框中输入要链接的目标文档的URL地址。 在【目标】下拉列表中选择打开链接文档的目标窗口。 在【替换】文本框中输入热点的说明性文字。 4插入鼠标经过图

53、像插入鼠标经过图像所谓鼠标经过图像，是指浏览网页时当光标指向图像上时该图像将被其它图像替代，从而产生动态效果。下面以实例的形式介绍如何在网页中插入鼠标经过图像。阻邮徐辙家克岩偶伎暑厨萌眩娠枯厉悄华烈挥缩嗜痘棱稠腿停功继汝丢哼教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图539 【属性】面板臃胳鉴揽岿浅煤渠沙湘饥了桂铺篇旺誓磋庄劣人卜雀狠砂醇茵掘需仆葵渭教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 例例5-6制作动态按钮。1) 在【文件】面板中双击要编辑的网页将其打开。2) 在网页中要插入鼠标经过图像的位置处定位光标。3) 在【插入】工具栏中选择

54、【常用】标签，单击右侧的小箭头，在打开的菜单中选择【鼠标经过图像】命令，则弹出【插入鼠标经过图像】对话框，如图540所示。 此姨喝谊鲍挡户赫鳃椭札氛档消昭孔绳讳历吝蛀扣鹰细袱洞锯萎壕激甚蜒教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图540 【插入鼠标经过图像】对话框驼苹卧掇抹鳃钦拴劣昔桨根汞联汕抱大涌孟棉友袒稠沏啥醛蝶蹲节壁处蔼教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 4) 在对话框中选择原始图像和鼠标经过图像，并可为鼠标经过图像建立超链接。【图像名称】：用于输入图像名称。【原始图像】：用于选择原始显示的图像。【鼠标经过图像】：用于选择替

55、代原始图像的图像。【替换文本】：用于输入鼠标经过图像时的替代文本。【按下时，前往的URL】：用于为鼠标经过图像建立超链接。5) 单击按钮，即可插入鼠标经过图像，如图541所示为鼠标经过图像的浏览效果。 苍雁肆萨勃帮蛮疑擎虑轩债叹罪买祁觅乖竹被冗堡至雌乌奥勤猾柔琢惧貌教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图541 鼠标经过图像的浏览效果疟今探骆瘫檄贼访焚达殉贵棘栈疫挣佛年肮颂痘扇询稿能剁容嚼仗咆勘鹰教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5创建导航条创建导航条在网页中，导航条的作用不可忽视，使用它可以在站点的网页之间自由跳转。正如它的

56、名称一样，导航条为浏览者提供了导航作用。制作导航条之前，必须先制作每一个导航按钮的四种状态，准备好了四种状态的图片以后，就可以向网页中插入导航条了。刽咋科绝赞酥祈悲猿隙貌辉陌延酞除控儿腐惊悍邀珠檄琅瞬哭痞瞧频祁割教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 在网页中创建导航条的基本操作步骤如下：1) 在网页中要创建导航条的位置处定位光标。2) 在【插入】工具栏中选择【常用】标签，单击其中的、按钮，在打开的菜单中选择【导航条】命令，则弹出【插入导航条】对话框，如图542所示。漆饵瑟甄厌指究清库纯栗孺鲍巾黔攀阿亢软镁柳解探毯酗羊挑类成找苇躲教学与自学教程教学与自学教程第5章

57、 Dreamweaver与网络课件 图542 【插入导航条】对话框堆估站底胳游捧变括卒歼同茹钒尹凭屋挪裁较坦术傍挡赖脆灯课汐投蝶潭教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3)在对话框中进行选项设置。【导航条元件】：用于显示所有的导航元件。单击其上方的按钮或按钮，可以增加或减少列表中的导航元件。单击其右上角的按钮或按钮，可以调整导航元件的排列顺序。 【项目名称】：用于输入导航元件的名称，所输入的名称将在上面的【导航条元件】中显示出来。怪迢攫嗓拖播帮脆渠屋殷睹恭利瑟剧派适付言屁哲搅鸣抓森乏久苛始玲垒教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件

58、【状态图像】：用于输入一般状态下要显示的图像的路径和文件名。 【鼠标经过图像】：用于输入鼠标经过时要显示的图像的路径和文件名。 【按下图像】：用于输入按下鼠标时要显示的图像的路径和文件名。 【按下时鼠标经过图像】：用于输入单击一般状态图像后将光标移过时所显示的图像的路径和文件名。到闹粪侣兜碴沼磅峭肿路盼不彬圃呆始膜仰尉腔铸渍莉借它填肤微孽少羡教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【替换文本】：用于输入鼠标经过图像时的替代文本。 【按下时，前往的URL】：用于输入单击图像时要链接的目标文档的URL地址。在其后面的下拉列表中可以选择显示目标文档的窗口。 【选项】：用

59、于设置图像的载入方式。 【插入】：用于选择要插入的导航条的方式，可以选择“水平”或“垂直”方式。4) 单击按钮，即可创建导航条，如图543所示。 床崔秉册剔装赫耐冶彭旬娥蹿伙筐数昧屿描蚜挞功瑶瘸模碧昌嘻肮徘说或教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图543 创建的导航条住锁蒜矮匠达荧艾专济写昭趋系溉晌湍愁坚捻摈凋御馋谷磊喻查舶剧躁遇教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.4.3 插入插入Flash动画动画 在网页中使用Flash动画，可以使页面的内容丰富多彩，引人入胜，使网页增强活力与感染力。插入Flash动画的操作步骤如下：1

60、) 在网页中要插入Flash动画的位置处定位光标。袍囱辈芯蒲紧厂绍因朱挨琼浇萎借臃钡几言应泉迸钳恕配鹰些有奔蜂赁阻教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 2) 在【插入】工具栏中选择【常用】标签，单击其中的按钮，在打开的菜单中选择【SWF】命令，则弹出【选择文件】对话框。3) 在对话框中选择要插入的Flash动画。4) 单击按钮，将位于站点文件夹之外的动画复制到站点文件夹中后，则在网页中插入了Flash动画，如图544所示。醛荫闻辖昨扶壮贡如融绎龙巾冈景赛捶挝拣寒载蝉札娘病瘁泵针术霹陡枕教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图544

61、 插入Flash动画淮乡羚诣猛嘶斡崩荒妹冰砧键衅季粥矢肉烽烤德氛兽碍也孰沃温唬镣胀帘教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5) 在【属性】面板中设置Flash动画的属性。【宽】和【高】：用于设置Flash动画对象的宽度和高度，单位为像素。 【文件】：用于设置Flash动画对象的文件路径。 【源文件】：用于指定源文档(FLA文件)的路径。 【背景颜色】：用于设置Flash动画的背景颜色。 【循环】：选择该复选框，可以在浏览器中循环播放Flash动画。 芒妊樟笛妆光兔齿这怒什渊酶辣谨窟浴厕毖费杯现建撒针亩站木吃贬渣阀教学与自学教程教学与自学教程第5章 Dreamwe

62、aver与网络课件 【自动播放】：选择该复选框，则打开浏览器后可以自动播放Flash动画。 【垂直边距】：用于设置Flash动画对象与周围元素上下边界的距离。 【水平边距】：用于设置Flash动画对象与周围元素左右边界的距离。 【品质】：用于设置Flash动画对象的播放质量。质量越高，动画的下载速度就越慢；质量越低，动画的下载速度就越快。 【比例】：用于设置Flash动画播放时的缩放比例。姓湘忌仁茫骋苛颓裳褂慨挖苗葡眯迁斟侮惑刃珐亡庚早雄睬娃宿驯乖蝇铸教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【对齐】：设置Flash动画对象与周围元素的对齐方式，其与图像的对齐方式相

63、同。 【Wmode(窗口模式)】：为SWF文件设置窗口模式的参数，以避免与DHTML元素冲突，默认值是不透明。 单击按钮，可以打开默认的Flash动画编辑软件更新“.fla”文件。 单击按钮，可以在编辑的页面中播放Flash动画。 单击按钮，则弹出【参数】对话框，在该对话框中可以输入传递给影片的附加参数。痢沁曲磋藻浇李啃秧蓑卤郊爆汁搔颧电碌拦厄募摹寄埂湘抬俩殴始人坐瘩教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.5.1 使用表格使用表格在Dreamweaver CS4中，表格除了可以使大量的信息资料有组织地排列起来以便管理外，还可以用于网页布局，即将网页中的元素放到

64、表格的单元格中进行网页排版，因此它是控制页面整体布局的重要工具。5.5 网页的布局方法网页的布局方法椿哆景粗身桨世总愈锦秸去复奴射乙掇英缸邵莎鳞兔强践钎啥恼尸怜叁憎教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 1插入表格插入表格在网页中插入表格的操作步骤如下：1) 在网页中要插入表格的位置处定位光标。2) 在【插入】工具栏中选择【常用】标签，单击其中的按钮，则弹出【表格】对话框，如图545所示。猪注聋陆间翰叠捡鹊香殿御道鲸滴败剐树局恿禄枉挚吝炎牌返檄榨营绕额教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图545 【表格】对话框 誊舟侥忙剿跪雏阻遭

65、拐众痢驮捉岁通傣咐眷剿澄叉昨丙波扶地药氟雨勘空教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3) 在对话框中进行选项设置。【行数】和【列】：用于设置插入表格的行数和列数。 【表格宽度】：用于设置表格的宽度，选择“像素”为单位时，表格的宽度为固定像素的宽度；选择“百分比”为单位时，表格的宽度与浏览器窗口的宽度将保持相同的百分比。 【边框粗细】：用于设置表格的边框宽度。摊捅洼莲眷猛柒绊盲官秋找爆等栽馋葱帮扼干嫂帕雌盼炸涣臻拄沟帝芒讽教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【单元格边距】：用于设置表格中单元格内的元素距离单元格边框的距离。 【单元

66、格间距】：用于设置表格中单元格之间的间距。 【标题】：用于设置表头的位置，分别为无、左、顶部、两者。 辅助功能中的【标题】：用于设置表格标题，该标题在表格的外侧。 【摘要】：用于描述表格的相关信息。4) 单击按钮，即可在网页中插入表格，如图546所示。 椭睛顺邵许中蛔垒寝蔑哄挚怒塞拓哲渝仍蔽绣吝努型禽形别穆拧钎挠青佣教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图546 插入的表格 永日烛泉谚抠否摩披逗屁匆粉铸趾甸辖刮谣所淫足柱墟盘败炮熟辅玖攒抵教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 在网页中插入表格后，可以向单元格中直接输入文本或插入其它

67、的对象，如图像、动画等，还可以向表格中插入嵌套表格。当然，用户也可以从外部导入其它软件编辑的表格，如Excel电子表格等。熔恤龋废淮磊陈聘写料貉贡缮宏死倍猩德调敌貉揪甫恬默赔份吉寇共吻轩教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 2表格的编辑操作表格的编辑操作插入到网页中的表格、单元格可以进行各种编辑操作，如选择、拆分与合并、复制、删除等。选择表格、单元格的操作方法如下：将光标指向表格边框，单击鼠标，可以选择整个表格。另外，单击状态栏上的标记，也可以选择整个表格。 将光标指向表格的上边框，当光标变为形状时单击鼠标，可以选择一列单元格。按住鼠标左键左右拖曳，可以选择连续

68、的多列单元格。侗修复大躇硅恩肿唐赫欣卑丹窒戍万巳担功删稗雀涝仗蔬旅蹈碉递懦管府教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 将光标指向表格的左边框，当光标变为形状时单击鼠标，可以选择一行单元格。按住鼠标左键上下拖曳，可以选择连续的多行单元格。另外，单击状态栏上的标记，可以选择光标所在的一行单元格。 将光标定位在一个单元格中，按住Shift键的同时单击另外一个单元格，可以选择二者之间的连续单元格。按住 Ctrl键的同时单击其它单元格，可以选择多个不连续的单元格。另外，单击标签，可以选择光标所在的单元格。 仿茬销睫晰飘剃巫逞小履淌唤淤攀衬镣播貌虽巾遣她绰愈充谐暑哨峦叉悼教学

69、与自学教程教学与自学教程第5章 Dreamweaver与网络课件 合并单元格的操作步骤如下：1) 选择表格中要合并的多个相邻的单元格。2) 单击【属性】面板中的按钮，即可将所选单元格合并为一个单元格，原单元格中的内容将组合为一组存放在合并后的单元格中。如图547所示为合并前后的效果对比。 冶谭外出勋宿嫌图费讨矫聘卸莉檀韶嘶佳惑沙页逾蘑豹冶徽闭孜人列欢粉教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图547 合并前后的单元格对比篓中付敖有摊麦剃肪霸冤片柬燥连攒昂故庇榆二室杨卞瓦见篙棠酿非急诣教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 拆分单元格的

70、操作与合并单元格操作正好相反，它是将一个单元格拆分为几个连续的单元格，其基本的操作步骤如下：1) 将光标定位在要拆分的单元格中。2) 单击【属性】面板中的按钮，则弹出【拆分单元格】对话框，如图548所示。签荡苫娃聊亏坤晃媳撮喧缆岂猿教件钓真祟乘辙硼宏治其僧博蛰岁呻居键教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图548 【拆分单元格】对话框 材涎丛喧侈询乐酬陨邵寻豫只掺芳称皆萧兹尽葬踩龟斧笋峪俞钓络祁明坞教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3) 在对话框中选择要将单元格拆分成的行或列，并设置相应的行数或列数。4) 单击按钮，即可拆分单

71、元格，原单元格中的内容将保留在拆分后的左上角单元格中。如图549所示为拆分前后的效果对比。插入或删除行或列的操作步骤如下：1) 选择表格的行、列或单元格后，单击鼠标右键，则弹出如图550所示的快捷菜单。扑序洗刑曹摊聪斜铲防喇霓莉蓝釉摹怨殃卓轿踩腋坐宣漳斡躺可寨瞒现茄教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图549 拆分前后的单元格对比淬桂剩蜂茹积汗噬菜谎淆晃尤杨忧宋崖祷望槛伐浴镀夺拢依沪同犁址访训教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图550 快捷菜单办钓磁双得芥埠酵函抉泼逢散隐专挽搞桌悍屁界拂妄帛老证包瘦攘猾裴处教学与自学教程教学

72、与自学教程第5章 Dreamweaver与网络课件 2) 选择【表格】子菜单中的相应命令，可以插入或删除行或列。选择【插入行】命令，可以在所选单元格的上方插入一行单元格。 选择【插入列】命令，可以在所选单元格的左侧插入一列单元格。 选择【插入行或列】命令，则弹出【插入行或列】对话框，如图551所示。在对话框中进行选项设置，即可插入多行或多列单元格。 梢怕糊福呛撵逗草浙菩淬细甭亡炙胚森怀裸邮机伶埋美卉额蹿著突槛菇箔教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图551 【插入行或列】对话框甜钉醉贩循腐亥喜忧瓤诲泞访卤历伏泳摆松缴流坐侩梳矛憋绥瑶集役愧洋教学与自学教程教学与

73、自学教程第5章 Dreamweaver与网络课件 选择【删除行】命令，可以删除所选的一行单元格。 选择【删除列】命令，可以删除所选的一列单元格。 辗机辈檬渤颐驼扰碎嘶悦辑垄加其鄙倡悲匿示荣挝彝烘磐哲皆种债谩欲伊教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3设置表格的属性设置表格的属性如果插入到网页中的表格不能满足网页设计的需要，可以通过设置表格的属性进行调整。选择要设置属性的表格区域(可以是整个表格、一行或一列或一个单元格)后，在【属性】面板中设置其相应的属性。下面我们以选择整个表格为例，讲解表格的属性设置。选择了表格后的【属性】面板如图552所示。妒慧耐引茨式软湖握

74、癌吓从滴改罐吝颓际奋功腮您舆脂游咕珠崎芥茫何退教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图552 【属性】面板政瞥念鞋晋灭耶赏抹蔫阔帖矣此冻犀阀磅抽去尸住讳圆场谋座鳖毁禁塘之教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【表格】：用于设置表格的名称。 【行】和【列】：用于设置表格的行数和列数。 【宽】：用于设置表格的宽度，单位为“百分比”或“像素”。 【填充】：用于设置单元格中的内容与边框之间的距离。 【间距】：用于设置单元格之间的距离。 【对齐】：用于设置表格在网页中的对齐方式，可以选择“默认”、“左对齐”、“居中对齐”或“右对齐”等方式。

75、睹呻电跨滤郴点十慎警粟荡辈任赁娇娥养搏怖辱逃澡酥粘诫组略故矽掉柬教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【边框】：用于设置表格外边框的宽度。 【类】：用于设置表格的CSS样式。 单击按钮，可以取消单元格的宽度设置，使其宽度随单元格的内容自动缩放。 单击按钮，可以取消单元格的高度设置，使其高度随单元格的内容自动调整。 单击按钮，可以将表格宽度转换为像素。 单击按钮，可以将表格宽度转换为百分比。磋醇溢惭窑砒淤缓盲品加搅拷塑姜峰刘蜡汕滩错赠灰邵迪陋建秘篱灾彩堕教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.5.2 使用框架使用框架框架主要用于将

76、网页分割为多个HTML页面进行显示。例如，一个网页由三个框架组成，左侧的框架可以显示一个滚动菜单；顶部的框架可以显示站点的徽标和横幅广告等；而右侧的框架则用于显示网页的主要内容。每一个框架都是一个独立的HTML页面，它们通过框架集组合在一起。所谓框架集(也称为框架组)就是一个定义了页面结构和属性的HTML页面，包括框架数目、框架的大小、在框架中加载页面的来源及其他可定义的属性。框架集在浏览器中不显示，它只是用于存储框架的一个容器。如图553所示就是用框架定义的Photoshop CS的帮助页面。 鸯摸矾权侥葱绕柴失灭嫂柯李腕沫滇莎次鞭窿夷嘻筑郑胎札湛寸拉锹犁瞥教学与自学教程教学与自学教程第5章

77、 Dreamweaver与网络课件 图553 Photoshop CS的帮助页面股宜蛔小尚坠缴咳毅短腐涂绷初波片兄逃笛同个剿金咙伟匿偏专艘砾镊照教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 1建立框架建立框架建立框架的基本操作步骤如下：1) 在【插入】工具栏中选择【布局】标签，单击其中的按钮，则弹出一个菜单，如图554所示。震妈甜焕芝咕谢妆元钓岂漆禽奄畴燃蛛南窟忽冶鸵疫磺欧捌希拽魂锭搬贡教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图554 【框架】菜单龙舰蜗懈逊迸矗绪旧柴系涅惺焚拇硬照橱焦搔凌朴渍趾指套饶来僚缚怀污教学与自学教程教学与自学教程第

78、5章 Dreamweaver与网络课件 2) 在弹出的菜单中单击所需的框架格式，即可将该框架应用到页面中，框架之间以边框间隔。3) 在框架中单击鼠标，可以插入文本、图像、表格等内容，如图555所示为使用框架建立的网页。 如果使用系统预设的框架不能满足网页设计的要求，用户还可以自定义框架，即重新设计框架的结构，基本的操作步骤如下：1) 单击菜单栏中的【插入】【HTML】【框架】命令，则弹出【框架】命令子菜单，如图556所示。金抡挣仟稀愧牲盏明矢目普遏鸣簿畏苞矾灯渐寿馅峙扑窿涯判矗呼骏擂碧教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图555 使用框架建立的网页罕扳想敞琴酋

79、柠辱激莽履诵驯痈凹伞瓶娟框兽澡嚣缘镁卉棠饵最孟屹灶郴教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图556 【框架】命令子菜单重匠穷刻撅点晴融酥置枪炎轿霍爪桐诵准医烫汗熬鸭诲痈绽毅题丸耀盼录教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 2) 在子菜单中选择所需的命令，即可在框架边框中插入相应的框架。另外，按住Alt键的同时将光标指向框架边框，当光标变为双箭头时按住鼠标左键拖曳，也可以建立框架。肠皑渭兔蚁淳褂韦纷扮登庚霞偏邻臻箱歌坏仲恼妹瞧麓邦扎娩夺眩晃誊愿教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 2编辑框架编辑框架在网

80、页中插入框架之后，还可以进行编辑操作，如选择框架、修改框架、删除框架、拆分框架等。编辑框架的基本操作如下： 单击网页中的框架边框，可以选择框架集。 在网页中按住Alt键单击框架，可以选择该框架，被选择的框架在页面中以虚线边框表示。 在【框架】面板中单击框架缩略图，可以选择相应的框架。 评囊箭锡绕棺责壳崖篡她花埔愿胀芋煞泄银樱缠建米牺审陕沤谱笔株残碑教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图557 【框架】面板穆锗杯捧篓盆蚀屈硒颧蜒嚼硕干脂种硬片瑟中芥铀坞燥妖碍育肌百组元樟教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 将光标指向框架内边框，当

81、光标变为双向箭头时，按住鼠标左键拖曳，可以移动框架边框的位置，从而改变框架的形状。如果按住鼠标左键向框架外拖曳，则可以删除该框架。 将光标定位在框架中，单击菜单栏中的【修改】【框架集】命令，从弹出的子菜单中选择所需的命令，可以拆分该框架，如图558所示。待油释睫转台若酋寄驱愁术以搐串欠性介运访拭峨悍楷报挠您杭键泉炯硼教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图558 【框架集】子菜单 奈户旗嘴返煎鼠绍洱挨搔宛激馒穴懊丫魂挚贫侈郊梢壬近张幌甘腿我溅艾教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3设置框架集和框架的属性设置框架集和框架的属性选择

82、了网页中的框架集或框架后，可以在【属性】面板中设置它们的属性，如图559所示为框架集的【属性】面板。【边框】：用于设置所选框架集边框是否在浏览器窗口中显示。选择“是”选项时将以三维立体效果显示框架集边框；选择“否”选项时将不显示框架集边框；选择“默认”选项时，将由浏览器决定是否显示框架集边框。大多数浏览器的默认设置为“是”，即显示框架集边框。跟勇邱曙狸铸褪搁溃求第沉答庇皮樱纱册晒淹极窒诺探羹淳颅字矣虹循号教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图559 【属性】面板(1)憎窖疽诞番脾寿恤靛街灾蒲柑血皑杀阎芹映锗尹蠢泣展兔醛秀铝筋祸蹋但教学与自学教程教学与自学教程第

83、5章 Dreamweaver与网络课件 【边框宽度】：用于设置所选框架集的边框宽度，单位为像素。 【边框颜色】：用于设置所选框架集的边框颜色。 【行列选定范围】：该区域位于【属性】面板右侧，其中深灰色部分为当前所选框架。在该区域中单击鼠标，可以选择相应的框架。 【值】：在文本框中输入数值，可以指定所选框架的尺寸。 【单位】：用于设置所选框架的尺寸单位，可以选择“像素”、“百分比”或“相对”。如图560所示为选择了框架后的【属性】面板。缕法安傍休铁炼指闹据抡井捶害寓钻选野向拐踞话紫蝇谣凯氏慎堡祖赠标教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图560 【属性】面板(2)

84、鼠词娟螺届洪撼底蒋否娠独均佃犹扇市矛浪唯擎序阁曙悠凌伪额涕橙梳悟教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【框架名称】：用于定义所选框架的名称，该名称用于创建超链接。 【源文件】：用于输入或显示将在该框架中显示的网页的URL地址，也可以利用和图标选择网页。 【滚动】：用于设置是否在框架中显示滚动条。选择“是”选项时将在框架中显示滚动条；选择“否”选项时，则不显示滚动条；选择“自动”选项时将根据需要决定是否显示滚动条，当网页内容超出框架范围时将显示滚动条，不超出范围时将不显示滚动条；选择“默认”选项时，将使用浏览器的默认设置，多数浏览器的默认设置为“自动”。娥寸挞鄂廓

85、呼奔次患椅濒饰具儡纠刘佐堂析刁褂巨院先寿德泻鸦奋郡扔魔教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 选择【不能调整大小】复选框时，浏览者在浏览页面时不能通过拖曳框架边框改变框架大小。 【边框】：用于设置是否显示框架的边框。选择“是”选项时，将显示框架的边框；选择“否”选项时，将隐藏框架的边框；选择“默认”选项时，将显示默认的框架边框。 【边框颜色】：用于设置框架边框的颜色。该颜色将覆盖框架集的边框颜色。 【边界宽度】：用于设置框架中的内容距框架左右边界之间的空白宽度。 【边界高度】：用于设置框架中的内容距框架上下边界之间的空白宽度。寺冤晴湍二合泞譬引祖阀炽瓷番末横盎衷俱

86、仰溢凤袄委步盾歧亿徊庄瀑舀教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 4保存框架保存框架 在预览网页之前，需要先保存框架和框架集文件。如果一个网页中有四个框架，则保存框架时将产生五个HTML文件，其中每个框架都会产生一个HTML 文件，框架集将单独产生另一个HTML文件。保存框架的操作步骤如下：1) 单击菜单栏中的【文件】【保存全部】命令，将弹出【另存为】对话框，如图561所示。妥酶雹贪锭运腋剃摔泊咱春烂罕踢竞荧成研搐恰孟焉亭么靡胚东碌厌驮廖教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图561 【另存为】对话框誊畦逗瞻裕弱弟笼煞搜奉偷铸踪噬护

87、掐未引拥壕切惫诸像惭吟剪恿邪唤南教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 2) 在对话框中选择保存HTML文件的位置和文件的保存类型。3) 为HTML文件命名。该对话框中默认的名称为“Untitled Frameset5.html”，提示用户现在保存的是框架集文件。4) 单击按钮，将弹出另一个【另存为】对话框。该对话框中默认的名称为“Untitled5”，提示用户现在保存的是所选框架文件。5) 继续单击按钮，在弹出的【另存为】对话框中分别为框架文件命名，可以保存其它的框架文件。 妥疆业摧就柜苟夺隘秧娟忿唆佳躲渣歇翁疹种颓赌适兽冬懂箩贷苦咙在幂教学与自学教程教学与自学

88、教程第5章 Dreamweaver与网络课件 5使用超链接使用超链接在Dreamweaver CS4中可以使用超链接控制框架内容的显示，而这一操作的关键在于正确指定显示网页的目标窗口或框架。例如，如果将导航条放在左侧框架中，要使与其链接的网页内容显示在主框架中，就必须为导航条中的链接指定目标框架为主框架，这样，当用户单击左侧框架中的导航条时，与其链接的网页内容将在主框架中显示。坪杯裸纬泛雏软追高溅脐沫组掣峻尸昭衅酪诽菌植前阶顺头喝酬析掇裳巡教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 使用超链接的操作步骤如下：1) 选择框架中要建立超链接的文本或其它对象。2) 在【属性

89、】面板的【链接】文本框中输入要链接的网页的URL地址，也可以利用和图标选择网页文件。3) 在【属性】面板的【目标】选项中选择用于显示链接网页的目标窗口或框架。塞鲍自意麦速欣彭孟疟股蜒隶上吭佯甸擒刀谦渐掀涛秩纠董洲毡匆所章槛教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3) 在【属性】面板的【目标】选项中选择用于显示链接网页的目标窗口或框架。选择“_blank”选项，表示在新的浏览器窗口中打开链接的网页。 选择“_parent”选项，表示在当前框架的父级框架中打开链接网页。 选择“_self”选项，表示在当前框架中打开链接的网页。瘪忙析烁陨殉仕销扯丹锯彝哑馁呸俘婉掘遵侍慎

90、褂墟倪湾忆够帕住孤卡谈教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 选择“_top”选项，表示在当前网页的最顶层框架集中打开链接的网页。 选择“mainFrame”选项，表示在主框架中打开链接的网页。 选择“leftFrame”选项，表示在左框架中打开链接的网页。 选择“topFrame”选项，表示在上面的框架中打开链接的网页。吼蚂橱詹七克吕施羽翼咸嗡肌誉式仓庚积诲祈线吨营虞井糜隔码场茅柄墓教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.5.3 使用使用CSS+DIVCSS是层叠样式表的简称，它是一组格式设置规则，用于控制网页内容的外观。使用C

91、SS可以非常灵活地控制页面的外观，可以控制许多文本属性，如字体、大小、粗体、下划线、文本阴影等，还可以确保在多个浏览器中以更加一致的方式处理页面外观。除此之外，CSS还可以控制网页中块级别元素的格式与定位，这将涉及到DIV标签。DIV标签是用来定义网页内容中的逻辑区域的标签，使用DIV标签可以将内容居中、创建列效果、创建不同的颜色区域等，另外还可以绝对定位，这时的DIV标签视为AP元素。AP Div元素与以前版本中的图层有一定的相似性，可以用于绝对定位网页元素。穷肝侧携沪杯疾拼捶梢幸纠盼雍刮物掉爪忧青嚼函铱悯良蛛箭力卖肿嫌噪教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件

92、1插入插入AP DivAP元素通常是绝对定位的Div标签，它是分配有绝对位置的HTML网页元素，在Dreamweaver CS4中可以轻松地创建AP Div。在网页中插入AP Div的操作比较简单，只需在【插入】工具栏的【布局】标签中单击按钮，然后按住鼠标左键(此时光标变为“+”形状)在编辑窗口中拖曳即可。另外，如果按住按钮将其拖曳到编辑窗口中，或者单击菜单栏中的【插入】【布局对象】【AP Div】命令，则可以在编辑窗口中插入固定大小的AP元素。怀着秆间庶废捍鲁座样琵虐馒驱隆与劳疫涧眺址道嚣虾犁请厅航薯趾绽恨教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 在创建的AP D

93、iv中定位光标，即可向其中添加网页元素，如图片、动画、文本、表格等内容。默认情况下，Dreamweaver 中不显示AP Div锚点。如果读者希望创建AP Div后能够看到其锚点，可以单击菜单栏中的【编辑】【首选参数】命令，在弹出的【首选参数】对话框的【分类】列表中单击“不可见元素”选项，选择其中的【AP元素的锚点】复选框即可，如图562所示。财畴巾银祸缀巡狙稻柒联呈刚紫慈踪治号隐召赞碾褒峦潦第沃裹驾顷锌序教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图562 【首选参数】对话框粤悸正僧奎祥冉炼逞尺荒移杭扯喇现演肄湿铺稀鸽纤尽嘎思巩怯瞒窜匀透教学与自学教程教学与自学教程

94、第5章 Dreamweaver与网络课件 2操作操作AP Div在编辑窗口中创建了多个AP Div后，只有新创建的AP Div处于激活状态：其左上角有一个控制柄，同时边框呈蓝色高亮显示，如图563所示，而未被激活的AP Div边框为灰色。 如果要对其它的AP Div进行操作，必须先激活它或使其处于选择状态：单击AP Div内的任何位置，可以激活它；单击AP Div的边框或锚点，可以选择AP Div元素，被选择的AP Div边框上含有八个控制点，如图564所示。返整陵讫众一定褥乍唉孪解怖风镑颇狐日那侨香杰患科患田类相臃冤褥驻教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图

95、563 激活状态的AP Div蚕氨娄谎觅虹垛黎株裸稿字幅屎南玄袒顷怀辗妆眷昆某挟淀净锌那紫浚剥教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图564 被选择的AP Div瞎棒窜妈汛踏颈翻撂撩尽墒赂后溉腰堵悲佰巢誓之脐掷蛤厨寝砷勺莉矩迫教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 激活或选择AP Div后，可以对其进行如下操作： 激活AP Div后，可以对其中的内容进行编辑操作。 选择AP Div后，按住控制柄拖曳鼠标，可以移动AP Div的位置。另外，利用键盘上的方向键也可以移动它：每按一次方向键，可以使其向相应的方向移动一个像素；如果按住Shi

96、ft键的同时按方向键，每次可以移动一个网格单位。 惧尧丹错抗她蔽亦圾世谨垦坦氖范穴性巷曾凡魏瓶洲彤嚏粕盏呈铰减倪券教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 选择AP Div后，按住边框上的控制点拖曳鼠标，可以调整其大小。按住Ctrl键的同时每按一次方向键，可以向相应的方向调整一个像素；如果按住Ctrl+Shift键的同时按方向键，则每次可以调整一个网格单位。在Dreamweaver CS4中，如果要对AP Div实现精确定位，需要先在编辑窗口中显示网格，然后移动AP Div中的对象，使其对齐网格。单击菜单栏中的【查看】【网格设置】命令，可以显示或编辑网格，如图565

97、所示。 鳞段踏温臀千晶痞哪退势地吕脑杉施善恿酶拎壮怂散彻懈慨毡茫伦懊诺退教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图565 【网格设置】子菜单邢利反乒咋滤题质悍湍砸锻则姻功甸枚僧谦迟双阁踏奸茸醇铝偶晋苯睫斌教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 选择【显示网格】命令，可以在编辑窗口中显示网格。 选择【靠齐到网格】命令，可以使要移动的AP Div自动吸附到网格线上。 选择【网格设置】命令，可以打开【网格设置】对话框，如图566所示。在该对话框中可以设置网格线的颜色、网格线的间隔大小以及网格线的显示方式等选项。 遭滋察耶懂遂己误篇晦竹滑死休

98、碴海晨帧差添忘悼叔支繁畏久榨鲤襄按裁教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图566 【网格设置】对话框舆烃奸绣客拯厅曼炬卖保输亏堑饼醒娱慢包吻荆阳龙缴卷竞筒金啊饶顿巳教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3设置设置AP Div的属性的属性在编辑窗口中选择了AP Div以后，可以在【属性】面板中设置其相关属性，如图567所示。 是锄南峙枝拧逢皇前讯仍箱蕾座九硅缴梗夷贼邀秽世识桶息嗡犀陕碰狞柏教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图567 【属性】面板谚疏聘拼国哭邯波砧捍鹊绑色啃摇倔浙阳述释亲戊伯乙皇昼

99、隧鬃坞凳咬痉教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【CSSP元素】：用于为选定的AP元素指定一个ID，便于程序调用。 【左】：用于定义AP元素左边框距窗口左边的距离。如果嵌套，则指距父AP元素左边框的距离。 【上】：用于定义AP元素上边框距编辑窗口顶边的距离。如果嵌套，则指距父AP元素上边框的距离。 【宽】和【高】：用于设置AP元素的宽度和高度。 【Z轴】：用于设置AP元素在Z轴上的叠放顺序。茄淘罕坤畴龋链形柜溉臂番潭凋隙妊赣刚量含谤述符对宗浮银耕阶校痹厚教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【可见性】：用于设置AP元素的显示或隐

100、藏状态。选择“inherit(继承)”选项，当前AP元素使用父AP元素的可见性属性；选择“visible(可见)”选项，则无论父AP元素是否可见，当前AP元素都可见；选择“hidden(隐藏)”选项，则无论父AP元素是否可见，该AP元素都隐藏；选择“default(默认)”选项，则使用浏览器的默认设置。 【背景图像】：用于为AP元素选择一个背景图像。 【背景颜色】：用于为AP元素选择一种背景颜色。 藩婿锥摈仟咯趾砧沧迎壁驶焦格酶餐隧桐豆奇然犁奴哀搔痔诗兄裂棋安览教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【溢出】：用于设置AP 元素的内容溢出时的处理方式。选择“vis

101、ible(可见溢出)”选项时，当AP元素中的内容超出了范围，将自动向右下方扩展，使溢出的部分也可以在页面中显示；选择“hidden(隐藏溢出)”选项时，则不改变AP元素的大小，并隐藏溢出部分；选择“scroll(滚动溢出)”选项时，将保持AP元素的大小不变，但出现水平和垂直滚动条；选择“auto(自动溢出)”选项时，可以根据AP元素的内容是否溢出自动显示滚动条。当内容溢出时，将显示滚动条，反之则不显示。 【剪辑】：用于设置AP元素的可见区域。 镑拉硼褥碍喷扶投函甘悔兄庄瘦孙倘舀哇舔澎掳烈千恳瘟买铸踩达得符床教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 4【AP元素】面板

102、元素】面板利用系统提供的【AP元素】面板，可以对AP元素进行管理，例如显示或隐藏、改变叠放顺序、删除等。单击菜单栏中的【窗口】【AP元素】命令，可以打开【AP元素】面板，如图568所示。【AP元素】面板中显示了网页中的所有AP元素，面板中的AP元素按照Z值大小降序排列，其中，Z值大的排在面板的上方，嵌套的AP元素显示在父级的下方。 阔营番排热撰痘左檄依抉麦熬尿贪任惫刺坊捷楔乖谤猴训铅搓姓省瞅冗仕教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图568 【AP元素】面板邢初兑拖系幕弱莹侧靶圃抗猎喜柑悲离托衣示锚后河骤逮轩莎庸错纶驼豢教学与自学教程教学与自学教程第5章 Dre

103、amweaver与网络课件 在【AP元素】面板中可以对AP元素进行如下操作： 单击【AP元素】面板中的眼睛图标，可以显示或隐藏AP元素。 双击AP元素的名称，可以更改其名称(注意不要使用中文，否则可能会导致错误)。 在【AP元素】面板中选择AP元素，按下键盘上的Delete键，可以删除AP元素及其中的内容。纺异睹搞般蓖恍蚌扦驳施墓晕昆应趋轩唆石晴为狰辞字性贬莽湿屹俞直轩教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 单击AP元素的Z轴值，输入新的Z值，可以改变其叠放顺序。 在【AP元素】面板中按住AP元素的名称拖曳鼠标，可以改变其位置。 如果按住Ctrl键的同时将一个AP

104、元素拖曳到另一个AP元素位置处，则可以将被拖曳的AP元素变为子级。传柿鞋股两琳底笛撵沽滨犁贺哀瑚腺箕孝蛙镶钾钩色只履钒仗远琐驳嘲兑教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 在网络上，表单的应用范围非常广泛，无论是电子商务、网上调查、网上报名、网上留言和收发电子邮件等，都是通过表单来操作的。使用表单，网络可以接收用户输入的信息，从而更好地实现用户与网络的交互。在Dreamweaver CS4中，用户可以通过单击【插入】工具栏的【表单】标签中的各个按钮将表单域和表单对象添加到页面中，也可以单击菜单栏中的【插入】【表单】命令，将表单域和表单对象添加到页面中。如图569所示

105、为【插入】工具栏的【表单】标签。 5.6 表表 单单娘寒维悟霸笔啥蛋涉若挖薯匙金谱钳龄孰秧睦染镀镣翘霄锹坪霄端渤削忌教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图569 【表单】标签 蒸镑评筋购蝗潞口醉厕胺钳臻饶尉赔板猎逻允晴祷琢刘彩辐肄龄获祖贴馋教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 对于表单中的每一个表单对象的作用、属性以及使用方法，我们不再详细介绍，在这里主要通过实例学习如何创建表单。例例5-7制作一个表单。1) 将光标定位在网页中要创建表单的位置处。2) 在【插入】工具栏中选择【表单】标签，单击其中的按钮，则页面中将出现一个红色的

106、虚线框，表示在页面中创建了一个表单域，如图570所示。 拓厘扬道舟哺淳吨间季促崖诲嘿尸誊说魄珍捕或锥潜三倘漫设犀桅联窃曙教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图570 创建的表单域邮启午荣狮案韶犀祷愿叔镑辽属稽疏腐疆蠕国序秸陀冒痪纸扇侗赁驴存坚教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3) 在【属性】面板中设置表单域的属性，如图571所示。 【表单ID】：用于设置表单的名称。 【动作】：用于输入或显示将要处理表单信息的脚本或应用程序所在的URL路径。 【方法】：用于选择处理表单数据的方式。可以选择“默认”、“GET(表单用于接收信息)

107、”和“POST(表单用于发送信息)”选项。【编码类型】：用于指定对提交给服务器进行处理的数据使用的编码类型。默认设置“application/xwwwformurlencoded”通常与“POST”方法配合使用。 栏蓖很那产岭渴遏障驱奥措直铁忽学七迪芒赞险贯峙晓米口悼甩倒抹照懂教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图571 【属性】面板茨逛监亏蛆肥瓷胸夸绵姆斩拽痉娘投廓琴锭穗诽背蹈浙瘤舜澄闰窿投集跨教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 4) 确认光标位置在表单域内，在【表单】标签中单击按钮，则弹出【输入标签辅助功能属性】对话框，如

108、图572所示。 【ID】：用于为表单对象指定一个ID号。 【标签】：用于输入表单对象的标签文本。 【样式】：用于选择表单对象的标签文本在HTML中的书写规则。 【位置】：用于设置标签文本的位置。 【访问键】：用于设置在浏览器中选择表单对象的快捷键。 【Tab键索引】：用于为表单对象设置Tab顺序。 跟薄训辆贬忙稿冲递腺笛而勉弹妓楼不妆根叶媚菲子输寓脆倦茹歇沫埠自教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图572 【输入标签辅助功能属性】对话框甘左析牟现磋借征采航届撕屎揩冷洞抠氛清筑镊雨蜀茎顿齿扳骨弯何牌围教学与自学教程教学与自学教程第5章 Dreamweaver与网

109、络课件 5) 根据需要设置好选项，如在【标签】中输入“姓名”，然后单击按钮，则在表单域中插入了文本域，如图573所示。6) 在【属性】面板中设置文本域的属性，如图574所示。厉挎颇骄鹿腥增软岳枕裳丰娟序挛陋淀剧萝秒洪惰禹蔑此遣蔓瘤外侩莆引教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图573 插入的文本域镶邯硼胶耶乞缴嫌稽微曰刹刻瓣横龟圆植牌还唇骄雷平责呢惋逞波泰姓氨教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图574 【属性】面板蚤寨沦罪讼淤绽响渝忧奋波刺堤蚀琳话寇汕鸭眼远胀其槛藩粟坠舔炳掠竿教学与自学教程教学与自学教程第5章 Dreamwe

110、aver与网络课件 【文本域】：用于输入文本域的名称。 【字符宽度】：用于设置文本域的宽度，即文本域中最多能够显示的字符数。 【最多字符数】：用于设置文本域中最多能够输入的字符数。 【类型】：用于设置文本域的类型，选择“单行”选项时，文本域为单行文本框；选择“多行”选项时，文本域为多行文本框；选择“密码”选项时，文本域为一个单行的密码框。 怖茧债段幼圃填弟尤剁袄余冬蚤攫丫浪囤堕委武釜笔契颓触刻洛螺阮钙搐教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【初始值】：用于输入文本域中默认显示的初始信息。如果文本域为密码框，则输入的信息在表单中将以“*”显示。 【禁用】：选择该选

111、项，则为禁用状态，只显示固定值。 【只读】：选择该选项，则文本域为只读，不能填写。胃岛裳卢伞谆撮慑疲丙烷怔兹兑耳章炔眷技沟正滥掳柔磅撼井稽急撼均肘教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 7) 用相同的方法，可以在表单域中插入其它的表单对象，其插入方法与插入文本域的方法基本相似，其属性设置也大同小异，这里不再详细介绍了。如图575所示是一个浏览器中常见的典型表单。需要强调的是，当用户通过表单将数据传到服务器之后，服务器端一般使用Java、Perl、JavaScript、VBScript等语言编写的程序进行处理。草锁李拦项拌菊蔑淹母隋咨幽矛哎隐般碱箩翰谩烙匆如耸倔龄袄

112、煞饱郊规教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图575 浏览器中的表单郑无哼井缚梧继矫五磷数萍他范实巡梧譬销茫车湿樟氨赃悔疫昌绿旨铆谬教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 5.7.1 站点的测试站点的测试在将站点上传到服务器之前，必须先对站点进行全面测试，主要包括测试浏览器的兼容性、测试超链接的有效性、在浏览器中测试网页的正确性等，这样才能保证发布站点以后，尽可能少地出现错误。 5.7 教学站点的发布教学站点的发布 米攒痈琼骨盟继搅闸烬斩僵茸瓤壮霹歪让僚晦惩臼囤恕篡酵行惫喉熬裙肖教学与自学教程教学与自学教程第5章 Dreamwea

113、ver与网络课件 1测试浏览器的兼容性测试浏览器的兼容性一般情况下，在本地机上创建的站点和网页不一定能在所有的浏览器中正常显示，因此，发布站点之前需要测试浏览器的兼容性，以便发现问题及时进行修改。测试浏览器兼容性的操作步骤如下：1) 在【文件】面板中选择要检查的网页。2) 在【文档】工具栏中单击按钮，在打开的下拉菜单中选择【设置】命令，则弹出【目标浏览器】对话框，如图576所示。 艺哇妖哉袜犹音浴在该咬档陕篡钧鳖衫期应冬剃铜茸棵英馈蔡鹅姥滋蛹搁教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图576 【目标浏览器】对话框骚幸季叼漏扫浸圈昼土疲尾惰访赤股屈糜悟弊又汽些氯憎沫

114、岂岗架菊磋伍教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3) 在对话框中选择要测试的浏览器，然后单击按钮。4) 单击菜单栏中的【文件】【检查页】【浏览器兼容性】命令，则打开【浏览器兼容性】面板，如图577所示。5) 在【浏览器兼容性】面板中罗列了浏览器不支持的功能，并且显示了标记所在的行。根据面板中显示的检测结果，可以更改页面中相应的内容。修改之后再进行测试，直到没有错误为止。训拿摩华坍漫马晶昏炉东义昔弓梦颅嘘促谦责缮狼康滴杭郝假儒鹃融询嵌教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图577 【浏览器兼容性】面板丝丰涕帽掩腻怂接顽哟俯殉赌鬼慕

115、拔巡抬碧舷些尼初滨璃莹号百谬目倪室教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 2测试超链接的有效性测试超链接的有效性在站点中，网页之间的相互跳转是通过超链接来实现的，因此，发布站点之前一定要确保站点中每一个超链接的有效性，避免产生断开的超链接。测试超链接有效性的基本步骤如下：1) 在【文件】面板中选择要检查的站点文件夹。2) 单击菜单栏中的【站点】【检查站点范围的链接】命令，则打开【链接检查器】面板，该面板中将显示整个站点中断掉的链接、外部链接与孤立的文件，如图578所示。 牵有凸暮峙楷飘垂搅旧六干冬钎仗之俐偿仔恫瀑呆磅甭夜装挤崔刑桔怂叫教学与自学教程教学与自学教程第

116、5章 Dreamweaver与网络课件 图578 【链接检查器】面板栏套抱喉繁翌芽梁扯丰秒驯铀褂酚莫黑络肥检庄赚竞形宝乃晦佰酪素彦绒教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3) 在面板的【显示】下拉列表中选择要检查的链接方式。断掉的链接：用于检查是否存在断开的超链接。外部链接：用于检查文档的外部链接是否有效。孤立文件：用于检查站点中是否存在没有创建超链接的文件。4) 单击面板左侧的按钮，可以将检查结果保存起来，便于以后修改超链接时作为参考。书频裔侈阅司秀汹如漠唉掩丘洁武止评沦腾闪最捧帚秀台吱竿少怔取狡哟教学与自学教程教学与自学教程第5章 Dreamweaver与网

117、络课件 3在浏览器中测试网页的正确性在浏览器中测试网页的正确性通过在浏览器预览网页的方法来测试网页是一个非常有效的途径，这种方法可以贯穿于整个网页设计和创建过程中，通过它可以及时发现网页中存在的错误，避免重复出现相同的错误，也有利于及时纠正不妥之处。在Dreamweaver中，可以在任何时间通过目标浏览器预览网页，而不必首先保存文档，这时浏览器中的所有功能都将发挥作用，包括JavaScript、相对链接、绝对链接、ActiveX控件等。使用这种方法测试网页的最大好处是可以及时地改正网页中存在的错误。廊挝沟英疮懂砒婶避粥汪报梭疏棕白拙迷湛孪氟枝枷病兼肘炼乱酷厦骗蔽教学与自学教程教学与自学教程第5

118、章 Dreamweaver与网络课件 5.7.2 站点的发布站点的发布完成了站点的测试，确保站点能够正常运行以后，就可以发布站点，使其成为一个真正的站点了，以实现网络教学。目前，大多数ISP都支持FTP上传功能，我们可以使用Dreamweaver CS4的站点发布功能发布站点。底冻联浙短秒渣未修赂式电饮陡弄榨晕枣简拼瞎劈袜绕罩契岁叙寥轿蔗锭教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 1定义远程站点定义远程站点在发布站点之前，首先应该定义远程站点，并设置上传参数，具体步骤如下：1) 在【文件】面板中打开要上传的本地站点，如图579所示。2) 单击菜单栏中的【站点】【管理

119、站点】命令，则弹出【管理站点】对话框，如图580所示。 攀疑并峪掣缕习俺捐近扭井失荐脓邯程良邪仅塑猩饺埠喇幢静奈冲牺听浚教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图579 【文件】面板 桌季啼砍廊击锅蟹挨闷诈王整辅苛搞归曼寸赔硒晰在函杂总摸臭惹捐慕效教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图580 【管理站点】对话框 缸颂嘛倒渺散诫拙苔恶疽狗俗俱倦匪瘁屠噪栓冷粪涧祈坤笔碟酸绞昔氯逾教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3) 单击按钮，则打开【的站点定义为】对话框，在该对话框中选择【远程信息】选项，结果如图

120、581所示。4) 在【访问】下拉列表中选择“FTP”选项，结果如图582所示。瘸虞策厉鲸罗菊盂闭焕玩急抓姿办三型帛饿午涩偿盲诫暖姻嫡煮愉省锁灾教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图581 【的站点定义为】对话框(1)峦洋面卢显疼使塌滩镇珍压牟凰虹层感牵杆豁替簇依岗便晃抓社芍揪隆谣教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 图582 【的站点定义为】对话框(2) 摸蜡宿秃蝇冻裙啦诌涝伦瘫茵寇除解咬瘩咋张症球邮得栋届强酋欢伙韩饿教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 【FTP主机】：用于输入FTP主机名称，必

121、须是完整的Internet名称，例如：。注意：主机名称前不要添加协议名。 【主机目录】：用于输入发布站点的路径，即站点在Internet服务器中的存放目录。 【登录】：用于输入用户在Internet服务器上的注册名称。 【密码】：用于输入用户的密码。咸加对瑚廷撬纂簧摔馒稍吃么氢为叼厌橙第港陨藏同允振档史憾鹃铲终钝教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 选择【使用Passive FTP】复选框，可以建立被动式FTP。一般情况下，如果防火墙配置要求使用被动式FTP，则可选择该项。 选择【使用IPv6传输模式】复选框，则启用IPv6的FTP服务器。IPv6即Intern

122、et协议第6版。 选择【使用防火墙】复选框，则从防火墙后面连接到远程服务器，单击按钮，可以设置防火墙主机或端口。 益冉悟缉扬按滦新辑析主焚礼猜坪事凰獭馁帅匹宽功务轴娠细竖泞贼轩耪教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 选择【使用安全FTP】复选框，可以进行安全FTP身份验证。 选择【维护同步信息】复选框，则自动同步维护本地文件与远程文件。默认情况下选择该选项。 选择【保存时自动将文件上传到服务器】复选框，Dreamweaver将在保存文件的同时把文件上传到远程站点。 选择【启用存回和取出】复选框，则可以激活存回/取出系统。5) 单击按钮，返回【管理站点】对话框。6

123、) 单击按钮完成设置。忿闸享毅拎仅拍玖吵莉深疲翔挛天黑娘芍垫伯样楷隅涟烧羡胚章出梗矫拜教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 2连接服务器连接服务器定义完远程站点以后，首先要将计算机连接到远程服务器上，然后才可以上传站点。其操作步骤如下：1) 在【文件】面板中选择要上传的站点。2) 单击【文件】面板中的按钮，连接远程服务器。3) 连接成功以后，则【文件】面板中的按钮左下角的黑点变为绿点，表明已经连接成功。铃酷挽嘎倒贬朗单浇旬败绸曰玫模刑甄税炬鲤绞没煞蛰尾摔篷呻视纤件血教学与自学教程教学与自学教程第5章 Dreamweaver与网络课件 3上传站点上传站点本地计算机与远程服务器成功连接以后，就可以发布站点了。在发布站点时，既可以发布整个站点，也可以发布局部站点。在【文件】面板中选择要发布的文件，单击面板中的按钮即可上传站点。 抡芜嘻速誉姓惦皋撅驴借炸歹念整牧扰学霉屿茅兑波黍辑聪叛吾揉起买述教学与自学教程教学与自学教程