第8章-使用库、框架、模板

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

第八章使用库库的概念库可以理解为在网页设计中使用率较高的网页元素的组合。如要对某些页中的库项目进行一些修改(而其它网页中的库保持不变),可以很容易的打断该页的库的链接,进行适当修改而不影响其他的网页。遇到在多个网页中重复出现元素组合时,可以将其设置为库,并且可以定义的库项目应用到网站的其他网页中去。库的创建为库的创建做准备:在Dreamweaver中,库是依赖于网站而存在的,所以在创建库之前,要先定义好一个网站。具体步骤:(1)在Dreamweaver主编辑区中选择需要保存为库项目的网页元素,然后在“修改”菜单,选择“库”子菜单中的“添加对象到库”命令。(2)这时软件会自动切换到“库”类别,用户可以在“名称”栏中为库项目重新命名,系统默认的是无标题,要给它重新命名。库的创建创建库的另一种简易方法:打开“库”类别,选择重复出现的元素组合,将其直接拖到库类别中,即可。推荐使用这种方法。要再次使用库项目,直接将其拖到到页面中即可。要取消关联,只需在拖动库项目到网页的同时按住Ctrl键,这样出现在网页中的只是库项目中的HTML语句,而不是库项目。取消关联后,当库元素更新时,它不会被更新。当库项目插入到网页中,库项目的背影会以高亮显示。编辑库项目在“库”类别中选择一个库项目,然后单击面板右下角的“编辑”按钮。或者直接双击要修改的项目。在弹出的库项目编辑窗口中,可任意编辑。修改完毕后,会弹出一个对话框,单击更新。更新完毕,系统会弹出一个“更新页面”对话框。(在完成对库的编辑,保存文件后,Dreamweaver会提示用户使用该库文件的网页,比较智能化)更新页面对话框资源面板资源面板包含了九种元素:图像、颜色、超链接、Flash、Shockwave、影片、脚本、模板、库。请大家记住它们分别的图标。第八章使用框架框架的主要特点框架可能用来增强导航功能。我们一般只用菜单条来导航,我们只需把菜单条放到一个框架中,当切换菜单框架时,菜单条的框架不做任何改变,只改变内容框架部分。而且导航框架在此过程中固定不变,可以使浏览者容易的进行各部分内容的切换。它有也许多缺点:一些老浏览器对框架的支持性不是很好,在使用框架之后,浏览空间会变小,会产生滚动条,给浏览造成许多不便,有点碍手碍脚的感觉。现在几乎处在被淘汰的尴尬的局面,好多大型网站都避免使用框架结构,如Yahoo,Microsoft,Sina,Sohu等大型网站都放弃了框架,它现在的运用方面在电子书籍、邮箱等方面。我们也要作必要的了解。先设计,后制作。要做到层次分明,主要目的是导航。框架的主要特点DreamweaverMX预设的框架总共有13种。一个框架构成及设置:一个框架实际是由几个HTML文档所构成的,其中一个专门负责框架的设置,如分行型,或者是分列型,或者是混合型等。另外就是普通的HTML文档,分别被放置到各框架中,当链接到设置框架的HTML文档时,整个框架以及各HTML文档就会一起显示在浏览器中。创建一个框架新建一个HTML文档。单击“插入”栏中的“框架”选项卡中的“左侧框架”按钮将会被分为左右两部分,一个框架就完成了。在“文件”菜单中选择“保存全部”命令。分别保存它们,注意保存的框架周围会有一圈虚线。请大家把13种预置的框架都试用一下,从中找出适合自己设计的框架。如何删除框架如果操作的步骤少,则可以利用“撤销”来完成。如果操作多步骤后想删除它,就不能用菜单来实现,我们必须用鼠标来完成。具体方法:用鼠标拖动框架间的边框,一直将它拖动最边上,就可以删除一个框架了。如何重复插入框架/分割框架重复插入框架(1)新建一个框架。(2)在要重复插入的框架中定位鼠标,再选择一种样式框架,单击该按钮即可。它同时起到了分割框架的作用,但有一个优点就是自动为每个框架都会命名,提高了效率。而且它采用了rows=“80,*”标准框架,这样只指定一个分框架大小的语句,可以适应各种分辨率的浏览器窗口。建议使用这种方法。如何重复插入框架/分割框架用拖动鼠标的方法来分割框架“查看”菜单中的“可视化助理”子菜单中选择“框架边框”命令,然后移动鼠标到四个边框或四个角,在出现移动箭头时,拖动鼠标即可分割框架。还可以通过“修改”菜单,根据需要可选择“框架页”中的四个选项来完成,但是这样软件不会自动命名。设置要点要想使框架美观,成为一个整体。我们就得将每个分框架的边界设置为0,然后再把导航条定位,使其不进行移动,使滚动条只出现在主框架中。如果不好选择框架,我们可借助框架来轻松完成。“窗口”“其它”“框架”可以打开框架窗口。如何使用框架组织HTML组织HTML是建立框架的目的,在框架建立完成后,需要向每个框架中填入正确的HTML文档,并且正确设定链接的目标框架,才能充分发挥框架的导航的作用。新建一个含有框架的HTML文档。选中一个框架,在“属性面板”中分别填入“框架名称”及“源文件”位置,是否出现滚动条,是否允许调节框架大小,是否允许出现边框等多项设置。注:在设置源文件时,一定要与相应的文件相关联。否则会达不到我们的要求。如何设置链接的目标框架在框架中设置超链接时,要注意它的四个重要选项:_blank:打开一个浏览窗口来显示链接内容。_parent:在当前框架的父框架中打开链接。_self:在当前框架中打开此链接。就是默认方式。_top会在当前浏览器的最外层打开链接。知识小要点属性设置级别分框架中的属性设置级别高于框架设置文档中的属性级别。例如:在框架中设置中指定边界为0,而在分框架中指定有边界。则最后显示的分框架是有边界的。“滚动”下拉列表中可决定是否出现滚动条,其中“默认”选项指由浏览器来自行处理,“是”选项是不管内容如何都出现滚动条。“否”选项则不管内容如何都不出现滚动条。“自动”选项则由内容而定,如果可以容纳内容,则不出现滚动条,反之出现。“不能调整大小”复选框则可设置是否让浏览者随意改变框架的大小。选中后,浏览者将不能通过拖动框架的边框而改变其大小。每个框架都要有自己的名字,不能使用重复的名字,最好取名时,简单明了,与内容相关联。如:frame_all,frame_top,frame_left,frame_right,frame_down,frame_main等名称。内联框架(Iframe)的使用Iframe是InlineFrame的缩写,被称为内联框架或浮动框架。内联框架是一种特殊的框架,它可以插入到网页的任何位置,也可以放置到层或表格中,在DreamweaverMX中不能直接插入或控制内联框架,只能通过手写代码或第三方扩展来实现。我们可以在代码视图中,在body区域手工输入下列代码:iframeheight=150width=250src=“***.htm”scrolling=“auto”frameborder=“0”/iframe请大家注意它的标签是iframe…/iframeIframe标记的使用格式src:文件的路径,既可是HTML文件,也可是文本、ASP等。width,height:内联框架的宽和高。scrolling:当src指定的HTML文件在指定的区域显示不完时,如果想不出现滚动条,则设置为no,反之则设置为yes,要自动则选择auto。frameborder:内联框架的边框宽度,为了与邻近的内容相融合,常设置为0。处理无框架浏览器它是为了照顾一些超老版本的浏览器(v2.0)的用户,它的作用是当不支持框架的浏览器浏览到该页时,将忽略frameset/frameset标签中的内容,而显示noframe标签中的内容。具体方法(1)打开含有框架文件。(2)打开“修改”菜单,指向“框架页”子菜单,选择“编辑无框架内容”命令。(3)在出现的页面中的编辑网页内容。(4)打开“修改”菜单,指向“框架页”子菜单,再次选择“编辑无框架内容”命令,回到有框架的编辑状态。第八章使用模板模板的作用模板的作用:(1)风格一致。(2)便于修改。(3)高效率。模板与库的区别:模板本身是一个文件,而库则是网页中的一段HTML代码。DreamweaverMX将所有的模板文件都存放在站点根目录Templates子目录下面,扩展名为.dwt。创建模板有两种方法:第一种:创建一个新的空白模板具体步骤:(1)单击“窗口”“资源”,打开资源面板,然后单击面板上的模板按钮。(2)在模板面板中,单击快捷菜单按钮,先后选择“新建模板”命令。(3)为新模板重命名。一个新的空白模板创建完成,如果要编辑它,请单击编辑按钮。创建模板第二种方法:把现有的文档存为模板(建议使用)(1)打开要保存为模板的文档。(2)选择菜单“文件”中的“另存为模板”命令。(3)在弹出的对话框中作好相关设置。(4)单击保存即可。注意:此时的窗口标题栏的显示已与网页文档不同,在其中有Template标记,说明它是模板文件。修改模板具体步骤:(1)打开模板面板。(2)从中选择要修改的模板名,单击编辑按钮,或者直接双击它,就可在文档窗口中编辑该模板。(或在模板面板中单击编辑按钮)注:在修改完模板后,保存时,会弹出一个对话框,提示是否更新应用该模板的的所有网页。如果要更新则单击“是”,软件会自动更新网页。否则选择“否”。小北开心屋(故事篇)衰仔第一次见到大海,感叹道:“大海呀,母亲!”话音刚落,一个浪头打过来,正好打在他的脸上,大怒:“我呸!原来是个后妈!”一个人对一结巴说:“你学鸭子叫,我给你瓜子你吃!”结巴说:“我才不吃你的呱…呱…呱子,我也不学鸭子叫。”定义可编辑区在模板创建之后,需要根据自己的具体要求来对模板对进具体规划。指定哪些内容是可以编辑的,哪些内容是不可以编辑的(锁定区)。在模板文件中,有些内容是经常要变化的,如每日新闻等,就需要设置为可编辑区,有些内容是相对不变的,如导航条,栏目标记,版权区等,则要设置为不可编辑区(锁定区)。当我们新建一个模板文档时,DreamweaverMX会自动把所有区域设置为锁定。所以我们要进行相关设置。在编辑模板时,无论是可编辑区还是不可编辑区都可以对其进行编辑。但是在将一个模板应用到一个网页文档后,该文档的锁定区是不能被编辑的。定义可编辑区具体步骤:(1)打开模板文件,在文档中选择要定义为可编辑区的文本(或其它内容)。(2)选择菜单“插入”“模板对象”“可编辑区”。(3)在弹出的对话框中为该区域输入名称。注:命名时,不能使用单引号(’),双引号(”),尖括号()和&。(4)在模板中,可编辑区被突出显示。(5)在定义可编辑区时要注意:可定义整个表格或单个单元格为可编辑区域,但不能一次同时定义几个单元格。层和层中的内容是彼此独立的,定义层为可编辑的,则可改变层的位置;定义层的内容为可编辑区,则可改变层的内容。取消可编辑区标记使用RemoveEditableRegion(取消可编辑区标记)使之成为锁定区。方法如下:(1)选择要修改的可编辑区。(2)选择菜单“修改”“模板”“删除可编辑区标记”命令。此时该区变为不可编辑区。运用模板如何用模板来创建新的文档或管理现有的文档?具体方法:新建一个文档,然后从模板面板中拖拽一个模板到文档中,即对该文档运用了模板。也可以通过菜单“修改”“模板”“套用模板到页”命令,在模板面板中选择要应用的模板即可。运用模板使用模板更新文档具体步骤:(1)单击菜单“修改”“模板”“更新页面”菜单项。出现如下对话框。(2)可在选择更新范围(当前页或是整个站点)确保更新选项中的模板被选中。单击开始即可。运用模板如果要对应用了模板的页面的锁定区进行修改,必须先把它从模板中分离出来。一旦页面被分离出来,就可以像没有应用模板一样编辑它,但当前模板被更新时页面将也不再被更新。具体步骤:(1)打开要分离的页面文档。(2)选择菜单“修改”“模板”“从模板中分离”。(3)页面被分离出来之后,所有的区域都变成可编辑区域,此时可任意编辑。

1 / 33
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功