资源描述:
《网站建设 ASP教程 html教程 __模板与库》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、第四章模板、库、命令本章要点4.1模板4.1.1创建模板4.1.2编辑模板4.1.3使用模板4.2库4.3命令4.1模板用模板可以创建具有统一结构和外观的网站。在需要更改网站的整体外观时,只要对相应的模板文件稍作修改,即可对整个网站进行快速更新。使用模板创建和更新网页应用模板创建和更新网页的基本流程是:创建模板,使用模板设计网页,通过修改模板更新网页。1.创建模板从空白HTML文档开始创建模板把现有的HTML文档存为模板创建模板4.1.1创建模板创建模板一般有以下三种方法。1.从新文档创建模板(1)选择【文件】
2、【新建】命令,弹出【新建文档】对话框,在对话框中选择【常规】选项卡中【类别】
3、列表框中的【模板页】选项,在【模板页】列表框中选择【HTML模板】选项。(2)单击【创建】按钮,创建一空白模板网页。(3)选择【文件】
4、【另存为】命令,弹出Dreamweaver8提示框。(4)单击【确定】按钮,弹出【另存为】对话框,在对话框中的【文件名】文本框中输入index,【文件类型】选择模板文件(*.dwt),单击【保存】按钮,即可完成模板的创建。2.从资源管理器中创建模板3.从现在文档创建模板4.1.2编辑模板模板内分为可编辑区及不可编辑区,缺省是不可编辑区。不可编辑区是指引入模板的文档而言;在模板环境下(.dwt)均可编辑。可编辑区可编辑区的内容不可编辑区普通网页的不可编辑区在Dreamweaver代码编辑器中以灰色字体显示,不能被修改,但在其他编辑器(如记事本)中不可编辑区代码是可以修改的。4.1.2编辑模板建立可编辑区做表格,划分区域。选中一区域->“插入”面板
6、“常用”选项卡
7、“可编辑区”按钮删除可编辑区域指向可编辑区执行右键菜单“模板”
8、“删除模板标记”存盘可以存成*.htm或*.dwt。4.1.3使用模板1.使用模板和脱离模板使用:从“资源”面板中的“模板”类别中选中要插入的模板,直接拖动到网页中脱离:如果要修改应用了模板
9、的文档中的不可编辑区域,须将文档和模板分离。菜单命令“修改”
10、“模板”
11、“从模板中分离”更新模板时,已分离的文档不再会随之更新!4.1.3使用模板2.用模板更新网站文档中只有不可编辑的部分才会随模板更新修改模板并执行菜单命令“文件”
12、“保存”【例4-1】制作“家禽生产学”网站的模板及使用该模板的两个网页,修改模板(在模板上增加一个动画)后,更新模板及使用该模板的网页。4.2库库项目可以包含文本、表格、图象、Java程序、插件、Active元素;当修改某个库项目后,整个网站包含该库项目的网页均自动更新。建立库项目:拖入“资源”面板的“库”中(起名)。若用Ctrl+拖入,则文档中元素仍是文档
13、元素,不是库元素,无指针。应用库项目:拖出即可。编辑库项目:双击库中目标对象—>编辑库项目—>存盘“文件”
14、“保存”—>更新页面窗口。更新:“修改”
15、“库”
16、“更新当前页”或“修改”
17、“库”
18、“更新页面”库项目“属性”面板:脱离库【例4-2】在网页中插入一个图片,使其成为库项目。在库编辑环境中修改库项目后,更新网页。将网页文档窗口的库项目“引用”脱离库项目,再修改库项目,观察文档窗口相应内容有无变化。可以从文档body标签之间的任意元素创建库项目,这些元素包括文本、表格、表单、JavaApplets、插件、ActiveX元素、导航栏和图像。创建库项目具体操作步骤如下。(1)选择【文件】
19、
20、【新建】命令,弹出【新建文档】对话框。(2)选择【常规】选项卡中的【类别】列表框的【基本页】选项,在【基本页】列表中选择【库项目】选项。(3)单击【创建】按钮,创建一个空白网页。(4)选择【文件】
21、【另存为】命令,弹出【另存为】对话框,在对话框中的【文件名】文本框中输入名称top.lbi,【保存类型】选择库文件。(5)将鼠标指针置于页面中,选择【插入】
22、【表格】命令,插入2行1列的表格。(6)将鼠标指针置于第1行单元格中,选择【插入】
23、【图像】命令,弹出【选择图像源文件】对话框,在对话框中选择相应的图像文件,单击【确定】按钮,插入图像,如图9.33所示。(7)将鼠标指针置于第2行单元格中
24、,在【属性】面板中单击【背景】文本框后的按钮,弹出【选择图像源文件】对话框,在对话框中选择相应的背景图像,单击【确定】按钮,插入背景图像,将【高】设置为150,如图9.34所示。(8)选择【文件】
25、【保存】命令,即可创建库项目。1.应用Dreamweaver8内置命令创建相册(1)打开“创建网站相册”对话框单击“命令”→“创建网站相册”菜单命令,弹出“创建网站相册”对话框,如图6-2-3所示(还没有进行相关的设置)。4.3命令(2)