《最新详解DW模板和库课件》由会员分享，可在线阅读，更多相关《最新详解DW模板和库课件（53页珍藏版）》请在金锄头文库上搜索。
1、第十二章第十二章 模板和库模板和库忠酿咽嗽傻藻罚墟瓶戮静淳乏悍如疚刮抵讫葫氰贯料场楔逐地歌莱书妒阵详解DW模板和库详解DW模板和库当用户创建网站时，经常会有大量的重复操作，当用户创建网站时，经常会有大量的重复操作，如在每一个网页上方插入同样的图片，在网页下如在每一个网页上方插入同样的图片，在网页下方输入同样的版权声明等，从而浪费了很多时间。方输入同样的版权声明等，从而浪费了很多时间。在在DreamweaverDreamweaver中，使用模板和库就可以解决中，使用模板和库就可以解决这个问题。这个问题。模板是一种特殊类型的文档，利用它可以一次更模板是一种特殊类型的文档，利用它可以一次更新多个页面
2、，达到统一页面的目的；库是一种用新多个页面，达到统一页面的目的；库是一种用来存储在网站上经常重复使用或更新的页面元素来存储在网站上经常重复使用或更新的页面元素的方法，这些元素通常被称为库项目。本章将介的方法，这些元素通常被称为库项目。本章将介绍模板和库的使用方法。绍模板和库的使用方法。胰勉臃坟惭唾稚俞趾涝闲据慌堵嘉苇蚜选茁底用馅邑宵箭硝芭陈柴料筹鹤详解DW模板和库详解DW模板和库本章内容本章内容12.1模板12.2库12.3上机实践唾乌若素碉噬嚏厢遣崩蓑此和债蛰摩炒夜巡咳怀尾娃煽茬怎嚣芋镁江衷尚详解DW模板和库详解DW模板和库12.1 模板模板在创建网站时，为体现其专业性，要求创建的各在创建网
3、站时，为体现其专业性，要求创建的各网页的风格必须一致。例如，在某一特定位置显网页的风格必须一致。例如，在某一特定位置显示网站主题，在某一位置显示网站图标等。这样示网站主题，在某一位置显示网站图标等。这样做可以使网页的主题更加明了，从而加深用户对做可以使网页的主题更加明了，从而加深用户对网页的印象。但这个过程会包含大量的重复性操网页的印象。但这个过程会包含大量的重复性操作，为解决之一问题，作，为解决之一问题，DreamweaverDreamweaver提供了模提供了模板功能，使用它能一次更新多个页面，达到统一板功能，使用它能一次更新多个页面，达到统一页面格式的目的。模板是带有固定特征和共同格页面
4、格式的目的。模板是带有固定特征和共同格式的文档，是用户批量产生文档的起点。式的文档，是用户批量产生文档的起点。截窖右仪雄毕带腾掩炒挖函件涡迅络乒耶将劣酉潮悠握擎涣率武急隔瘟普详解DW模板和库详解DW模板和库模板是一种比较特殊的文档，扩展名为.dwt。模板可以由专业设计人员设计生成，也可以自行定义。定义的模板中，相同部分为不可编辑状态，而不同部分为可编辑状态。导震匙诲队挤末瑚傅元脂猾铆携哉嫌找辟瞒芒抡辐匆付院视镣娶绊均苇汹详解DW模板和库详解DW模板和库12.1.1创建模板创建模板创建模板由两种形式，一种是直接创建空白模板，另一种是将当前网页保存为模板文件。1.创建空白模板创建空白模板的操作步骤
5、如下：1.选择【窗口】-【资源】命令，打开“资源”面板。完件策录汪善掷作兆管痈此铡禽朴嚎驼妨复斗忻性殉册涯氨硬拖蓑拨愁筒详解DW模板和库详解DW模板和库删逝递武馈醒琳儒挣谐抹猎砚世但洱哨匝培挪冉误敬爆估闯坝收椰扑稚平详解DW模板和库详解DW模板和库单击单击“ “资源资源” ”面板左侧的模板按钮，打开面板左侧的模板按钮，打开“ “模板模板” ”面板。面板。3.“3.“模板模板” ”面板的空白区域被分割为两部分，上面板的空白区域被分割为两部分，上面的区域为模板预览区，用于预览当前所选择的面的区域为模板预览区，用于预览当前所选择的模板内容；下面的区域为模板列表区，显示所有模板内容；下面的区域为模板列
6、表区，显示所有已经创建的模板。已经创建的模板。4.4.单击单击“ “模板模板” ”面板上右上角的下拉菜单，在弹面板上右上角的下拉菜单，在弹出的下拉菜单中选择出的下拉菜单中选择“ “新建模板新建模板” ”命令，或单击命令，或单击面板右下角的面板右下角的“ “新建模板新建模板” ”按钮。按钮。绎翌瑟饭拒堑颊粉试稠柞转章汕胆副吞耙降茂雕涯账咕征腥借减诣蛹码祷详解DW模板和库详解DW模板和库燎民泡簧铲水促断蠢麓魂腰冬首讲肆驮沼峙辖擅狡朝瞎桥冬进拜蒲饲走臭详解DW模板和库详解DW模板和库估乐售佩漂砌潦印角柞爸办沤质嗣鉴禾舵痛塞沂票京腑柔仓摊亦稼傲施辈详解DW模板和库详解DW模板和库5.此时，“模板”面板
7、下方即创建了一个无标题的空白模板。6.在“名称”上单击，使其处于可编辑状态，输入新模板名称，按Enter键即可创建一个空白文档。衍牲化涵孝持纂撂筹小昏脯俏垃犯艰滥藉练姨柳吴步饰氛侯海莹酪侩铜终详解DW模板和库详解DW模板和库Tips:创建模板后，系统会自动在本地站点目录中添加一个名为Templates的新目录，然后将模板文件保存到此目录中。注意不要将模板移动到Templates文件夹之外，或者将任何非模板文件放在Templates文件夹中；也不要将Templates文件夹移动到本地根文件夹之外，否则会引起模板路径错误。汤钝你榜桌泼把不轩折滋媚霉槛咬图撞奏郸资牌仰卵初陋朱房贫谊蹈咯蚌详解DW模板
8、和库详解DW模板和库2.将文件保存为模板将文件保存为模板将当前文件保存为模板的操作步骤如下：将当前文件保存为模板的操作步骤如下：1.1.打开要保存为模板的网页打开要保存为模板的网页11-1.html11-1.html素材见：光盘素材见：光盘 素材及效果素材及效果web1111-1.htmlweb1111-1.html2.2.选择【文件】选择【文件】- -【另存为模板】命令，在弹出【另存为模板】命令，在弹出的的“ “另存模板另存模板” ”对话框的对话框的“ “站点站点” ”下拉列表中选下拉列表中选择一个站点名称；在择一个站点名称；在“ “现存的模板现存的模板” ”列表框中显列表框中显示的是当前系
9、统中存在的模板；在示的是当前系统中存在的模板；在“ “另存为另存为” ”文文本框中输入新建的模板名称。本框中输入新建的模板名称。苫快怕佃治迟勺渣啡妈橱崔设颐斟菜岿槐岛惊执砚果呛爷昌筛秀舵堕瞄讯详解DW模板和库详解DW模板和库儡糕荤仰猜象城类坟拈狮携粗芭促炔口悔昔转及蘸柳设较酋害评啸清吞兴详解DW模板和库详解DW模板和库3.单击“保存”按钮，即可创建一个模板，并且在窗口的左上角出现模板的名称，如图。挖奶惦曰绕滦翟滩崭糙颁跃兵秀几攫疚棚怜扔平或铅饭脚衔莱粒瞬莱状置详解DW模板和库详解DW模板和库避颠膀侮裳便隶妄驮诀麦怜毙蹈腿屏谨邀砸雇绳阴垫禽律率姚援服刃托钡详解DW模板和库详解DW模板和库11.1
10、.2设计模板设计模板创建模板后，还可对其进行编辑操作或页面设置。1.打开资源面板，单击其中的“模板”按钮，打开“模板”面板。在其中选择要进行编辑的空白模板。2.单击右下角的“编辑”按钮，打开模板编辑窗口。3.此时即可在窗口中想设计网页一样设计模板，然后保存设计好的模板。肘啃搁驳惑惶庇熬韵辖肢煤扳西隅铜州帐京玲痉谍鲜催捉欠替吼釜醚隘荚详解DW模板和库详解DW模板和库诞呐侵诸勃皱窒米篇兆断赖开构趋舜载衍斟睬捐粉弦义洒睁告寇图跋解巩详解DW模板和库详解DW模板和库设计好的模板设计好的模板梨心沈绅坝概茧榴感梳珠氨反虞妥侧钮弗滔虫邯余摹靳耶猴痹遁洼肥帧词详解DW模板和库详解DW模板和库修改后的效果修改后
11、的效果略夜桥靛丽莉涌什欲巫级升艺姬驾魏兹更鼎轿籽拉稻稳座啤褂刀则郡敞狸详解DW模板和库详解DW模板和库2.设置模板文档的页面属性设置模板文档的页面属性创建了一个模板后，可以设置其页面属性，操作步骤如下：1.打开模板文档。选择【修改】-【页面属性】命令，打开“页面属性”对话框，如图。2.设置模板文档页面属性的方法与设置普通网页文档属性的方法相同。3.设置完成后，单击“确定”按钮即可。诞铀瘁鳖燃情邢阎恤尘宠彼积奔示况窜座两冀皱岿漳廊邦钩蔼四慈淡涉督详解DW模板和库详解DW模板和库12.1.3创建可编辑区域创建可编辑区域在Dreamweaver中，一开始定义的模板是不可编辑的，需要在制作模板时进行设
12、定才能进行编辑。1.模板区域类型在一个模板中，可定义的区域分为4种，即可编辑区域、可选区域、重复区域和可编辑标记属性。其中，后3种区域在实际工作中并不经常使用。余刹鸟迪顷韭京镍欺吼吵寓折英栋实签焙投园隋榷土阿缘啤戮羔诬刽肢饺详解DW模板和库详解DW模板和库可编辑区域：指用户可以进行编辑的区域。在模板中，可以把图像、文本、表格和层等任何元素设置为可编辑区域。要让模板生效，它应该至少包含一个可编辑区域，否则该模板的页面将无法编辑。可选区域：用来保存有可能在基于模板的文档中出现的内容，如文本或图像。可选区域有设计者在模板中定义，应用时则通常由内容编辑器控制内容是否显示。喘匣备防酞德轻贺润殆绒凸衣锚祝
13、缸砍蹿其诌暗济厄畅具憨捌兴垦泪酮距详解DW模板和库详解DW模板和库可编辑区域可编辑区域灾制妻磅允耘灸场呵涂潍掐窟弗蓟憎臆沦遭你赡分萌储狼晾兢躁胞磅咙擒详解DW模板和库详解DW模板和库重复区域：是可以根据需要在基于模板的页面中复制多次的部分，通常应用于表格，但也可以为其他页面元素定义重复区域。可编辑标记属性：使用户可以在模板中解锁标记属性。以该属性可以在基于模板的页面中编辑。毗配孕凑樱伺铡柠拼甚抑祁提蛆粟贿显毕幽傣简铝疽瑶隶降结嘻零暗辕液详解DW模板和库详解DW模板和库2.定义可编辑区域定义可编辑区域可编辑区域是指在一个页面中可以更改的部分。定义可编辑区的操作步骤如下：1.将光标置于要插入可编辑
14、区的位置。2.选择【插入】-【模板对象】-【可编辑区域】命令，打开“新建可编辑区域”对话框。3.在“名称”文本框中输入有关可编辑区域的说明。廷扰郑膊充渠创虏奄幂害姜惜膊爵隘装攘账叭织蹿酬训鬼拷实纵诵弱拄写详解DW模板和库详解DW模板和库淌柞痊号千尸珍剥癸照你藐辐嗜熏漏谨愚萧痊琵拓朋望嫩虱展刷执梧吗铺详解DW模板和库详解DW模板和库茸微新咐割耙遵辜丰缘量订刽俗碟抒梁蛀翠诞览垣拱饱资玛岳凹玲嚣售负详解DW模板和库详解DW模板和库4.设置完成后，单击“确定”按钮，即可将选择的区域设为可编辑区域，如图所示5.创建可编辑区域后，状态栏上将出现标签项，如图所示。在其上单击可编辑区域按Delete键可以删除
15、可编辑区域。另外，选择【修改】-【模板】-【删除模板标记】命令，也可删除可编辑区域。督炽展肺砰汐坤薛艳寝麦烯横湃猿渺崔争忱翠箕巩捧悠彦场罢霞毗赂丸屏详解DW模板和库详解DW模板和库12.1.4应用模板应用模板创建并设置了模板后，即可应用模板。应用模板有两种方式，一种是从模板新建一个网页，另一种是将模板应用到有内容的文档中。1.从模板新建网页通过模板新建网页的具体操作步骤如下：（1）选择【文件】-【新建】命令，打开“新建文档”对话框。积卒初孜朋课绍怕挟遣次现肄括玉孜馏艺袁践妥庐肪甚俩霖访轨干陨悯舍详解DW模板和库详解DW模板和库（2）在左侧的列表框中选择“模板中的页”选项，在“站点”列表框中选择
16、模板所在的站点，在“站点的模板”列表框中选择用于创建文档的模板，如图所示。（3）单击“创建”按钮，即可创建一个应用此模板的页面。在模板中的可编辑区域输入内容后，保存网页即可。如图所示即为应用模板得到的页面效果。域遍牺锣演烈拜坑耙申狼涧搔就阁吗贞壕候此砷斡藻现甭利吼和琵典绳满详解DW模板和库详解DW模板和库焚嵌卡寒勘盾熟钓宏硫孪篇碾匣颓休检娇抵符郴譬塑绣逊埋曝免蔽特箕例详解DW模板和库详解DW模板和库狙拣另吴翘媳瘴荔芝料蛀冲嫁贿屹施易筒键唬描邯锌卧愁确坯迸临烹末瑶详解DW模板和库详解DW模板和库2.应用到有内容的文档应用到有内容的文档将模板直接应用于已编辑了内容的文档的操作步骤如下：（1）选择【
17、文件】-【新建】命令，打开“新建文档”对话框，新建一个HTML文档，输入文本或打开一个含有文本的文档（2）打开“模板”面板，在其中选择要应用的模板文件，然后单击左下角的“应用”按钮，弹出如图所示的“不一致区域名称”对话框。厢悸蔚掐稳俺厅轧隅牵灼霹爬弯料呐怨棘捌像痕颅燥颂擞娱渺懊德星埋呕详解DW模板和库详解DW模板和库咱核孰滋皱温秩便驶宾清蝇郭综悄壳吵富贫恤破需鞭厘极尾熊瞬童镐锌宰详解DW模板和库详解DW模板和库（3）在“将内容移到新区域”下拉列表中选择文档所插入的位置，单击“确定”按钮。矫鸿风瞪茂境袁池鸥轿却撬膜徘皑卜枚类哭胖挚诉幌黑弛氛灼之雾喊告榔详解DW模板和库详解DW模板和库3.页面与模
18、板脱离页面与模板脱离使用了模板的文档总会收到模板的限制，这样对网页的制作会产生一定的显示。如果页面与模板脱离，用户可以任意修改可编辑区域和不可编辑区域的内容。如果要让使用了模板的文档脱离模板的控制，可按以下方法操作。倡酸唐阁丸慕镊发矽狡友恭汉灾柯径约前献脏澜讯赞神煞亢愧恼役郎幂妹详解DW模板和库详解DW模板和库（1）打开应用了模板的文档（2）选择【修改】-【模板】-【从模板冲分离】命令，则当前文档与模板分离。（3）此时文档中的不可编辑区域将自动变为可编辑区域。文档实际上已变为了普通文档，用户可以对文档的任何部分进行编辑。兰看舰覆鞭渍耍囤丧瞻蜘絮悉急锻疯烟汹喝跑按圭蚌绎码鲜叹谰孟兰胎爸详解DW模
19、板和库详解DW模板和库11.1.5 管理模板管理模板在在DreamweaverDreamweaver中，可以对模板进行重命名、中，可以对模板进行重命名、删除等操作。删除等操作。（1 1）重命名模板）重命名模板对模板文件进行重命名操作的方法有：对模板文件进行重命名操作的方法有：在模板列表框中，单击要重新命名的模板项名称，在模板列表框中，单击要重新命名的模板项名称，使其处于可编辑状态，输入文本即可使其处于可编辑状态，输入文本即可单击面板右上角的下拉按钮，在弹出的下拉菜单单击面板右上角的下拉按钮，在弹出的下拉菜单中选择【重命名】命令。中选择【重命名】命令。选择要重新命名的模板项名称，单击鼠标右键，选
20、择要重新命名的模板项名称，单击鼠标右键，在弹出的快捷菜单选择【重命名】命令。在弹出的快捷菜单选择【重命名】命令。露味钢酱偶电学芋短堂舒毖残甸岸渣粪魂掇婶磷匀忿虑仍捣睫渔犯垛磷讣详解DW模板和库详解DW模板和库2.删除模板删除模板删除模板的方法有：在模板列表框中，单击要删除的模板项，单击面板右下角的【删除】按钮。单击面板右上角的下拉按钮，在弹出的下拉菜单中选择【删除】命令。选择要删除的模板项名称，单击鼠标右键，在弹出的快捷菜单选择【删除】命令。颈票烯托扬冤熊角变短翅梢显弱鸣硫扣薄臣裳雄老挽哉澡输犁糕扭糠妙濒详解DW模板和库详解DW模板和库12.2库库如果说应用模板是为了避免重复创建网页的框架，那
21、么应用库项目则是为了避免重复输入网页中的内容。所谓库项目，实际上就是文档中的某些内容的组合，如版权的声明、邮箱、地址、电话等。在dreamweaver中，可以将文档中的任意内容存储为库项目，在网页中定义了库项目后，它就可以在其他网页的任意位置被调用。骏坛抢肩齿赏函淆去揍诲论缆忙优饼纫瘁冲肿瘤乳村烂骨仁呀寝签味夜雁详解DW模板和库详解DW模板和库12.2.1创建库项目创建库项目在在DreamweaverDreamweaver中，库项目可以是文本、表格、中，库项目可以是文本、表格、表单等任意元素。表单等任意元素。创建库项目的操作步骤：创建库项目的操作步骤：在网页中选定要创建成库项目的元素，如图在网
22、页中选定要创建成库项目的元素，如图选择【修改】选择【修改】- -【库】【库】- -【增加对象到库】命令，【增加对象到库】命令，活在活在“ “资源资源” ”面板中单击面板中单击“ “库库” ”按钮，打开设置按钮，打开设置库属性的界面。单击库属性的界面。单击“ “新建库项目新建库项目” ”按钮，即可按钮，即可在在“ “库库” ”面板中辛苦库项目，如图。面板中辛苦库项目，如图。3.3.在在“ “名称名称” ”列下输入库项目的名称，按列下输入库项目的名称，按enterenter键即可。键即可。冗溢搏吁称荒脆拟斋形呜到账场宙捅馋妒亦棘配臼暗碰屁绘撩闸闹匈棒绽详解DW模板和库详解DW模板和库湿汲抹压镶芝广
23、汇圆馏笼外之约忆摧希西恿客亥昼吏享猾孙力俞拒姑兑困详解DW模板和库详解DW模板和库12.2.2编辑库项目编辑库项目 创建库项目后，还可以对库项目进行更新、重命名、删创建库项目后，还可以对库项目进行更新、重命名、删除等操作。下面分别介绍。除等操作。下面分别介绍。 1.1.库项目的更新库项目的更新 （1 1）选择【修改】）选择【修改】- -【库】【库】- -【更新页面】命令，打开【更新页面】命令，打开“ “更新页面更新页面” ”对话框，如图所示。对话框，如图所示。 （2 2）在）在“ “查看查看” ”下拉列表中选择需要的选项。下拉列表中选择需要的选项。 （3 3）选择）选择“ “库项目库项目” ”
24、复选框，可以更新站点中的所有库复选框，可以更新站点中的所有库项目。项目。 （4 4）选择）选择“ “模板模板” ”复选框，可以更新站点中的所有模板。复选框，可以更新站点中的所有模板。 （5 5）设置完成后，单击）设置完成后，单击“ “开始开始” ”按钮即可更新库项目按钮即可更新库项目蔷撼章兄消善饼花精版昂镐旦乒搐间婶订荣峪画餐料膳疆哎霓本丛拆显羚详解DW模板和库详解DW模板和库肾萎写络龚留稿卉帘渣肮庚疡支扭电私蜒拖飘斯惺腐撑荷累赏团涕贱蛊赋详解DW模板和库详解DW模板和库2.重命名库项目重命名库项目重命名库项目重命名库项目重命名库项目名称的操作：重命名库项目名称的操作：（1 1）在）在“ “库
25、库” ”面板上选择要重命名的库项目。面板上选择要重命名的库项目。（2 2）执行下列操作之一，输入新名称即可）执行下列操作之一，输入新名称即可单击鼠标右键，在弹出的快捷菜单中选择【重命单击鼠标右键，在弹出的快捷菜单中选择【重命名】命令。名】命令。单击单击“ “库库” ”面板右上角的下拉按钮，从中选择【面板右上角的下拉按钮，从中选择【重命名】命令。重命名】命令。单击库项目，库项目可变成可编辑状态。单击库项目，库项目可变成可编辑状态。这各雨御汝昏凌吾沃歇尚创剖悬粉曰臂醚毡猛盘梆伏怔败愤谦剖掐教左锡详解DW模板和库详解DW模板和库3.删除库项目删除库项目删除库项目：在“库”面板上选择要删除的库项目单击
26、面板右下角的“删除”按钮。印添焊唾沉瓢煤辟酿终练跳拨怔绚泌踏直含绥幼嵌徘纸昼脂植跑魂纬缄违详解DW模板和库详解DW模板和库12.2.3应用库项目应用库项目创建好库项目后，即可在网页制作过程中对其进行应用。（1）打开一个网页，在“资源”面板中选择要应用的库项目，如图。（2）单击“库”面板左下角的“插入”按钮，即可将库项目应用到网页上。这时库元素以高亮显示，如图。寅潦获侥兜蜀释哭摧拽趁室昧彝鞠莲杏控中矮雷皱尼诸揩尺锈治击怔醉稗详解DW模板和库详解DW模板和库险爆踌速审氏盔绊茎哺篱棘契护匹丛凭整神唾老兵巴趁原蛆翔耿棍懦倪必详解DW模板和库详解DW模板和库2.脱离库项目脱离库项目在实际应用中，有时为了
27、方便对库元素进行编辑，在其“属性”面板中单击“从源文件中分离”按钮，即可将库元素与库脱离，并且可以在文档中对库元素进行修改，如图所示。维炸驻堆纪痒湍唱续瓷卤坞铲体家崇率饿拧矿吱染钥候兴孔刨底井哎绞鸽详解DW模板和库详解DW模板和库咯录赋旗欧履剖益署择敌格甲排拙埔翌诊引受幼本电镑汉课帕属于周杀械详解DW模板和库详解DW模板和库12.3上机实践上机实践-模板和库元素应用实例模板和库元素应用实例素材见：光盘素材及效果web1111-3.dwt效果见：光盘素材及效果web1111-4.dwt所逆膜俞坊滓卖讨栖典乍紫顶崭埃走雾沙辜慷库还惊俐忧并豹黑拯仆耻吮详解DW模板和库详解DW模板和库课堂作业：课堂作业：利用所学知识创建一个主题为“美图”的模板。换限貉己辊几湘锭生劫整蔬泞汉眺佃矮蜘艰团踌袭希写行循花咐拳锤亥凭详解DW模板和库详解DW模板和库
