1、网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）网页设计与制作任务驱动教程 （第3版）网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）2单元8 使用模板和库制作网页【任务8-1】使用模板和库制作上海游的网页网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）3【任务描述】【任务8-1-1】创建库项目（1）将现有网页）将现有网页nav_left0801.html中的景点中的景点导航表格定义为库项目。导航表格定义为库项目。（2）将网页中的版权信息区域定义为库项目。）将网页中的版权信息区域定义为库项目。网页设计与制作任务驱动教
2、程（第网页设计与制作任务驱动教程（第3 3版）版）4【任务实施】1 1将现有网页nav_left0801.htmlnav_left0801.html中的景点导航表格定义为库项目（1）打开文件夹）打开文件夹“webpage”中网页文档中网页文档“nav_left0801.html”。（2）选中该网页文档中的）选中该网页文档中的24行行1列的景点导列的景点导航表格。航表格。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）5（3）在）在Dreamweaver CC主界面的【修改】菜主界面的【修改】菜单中，选择命令【库】单中，选择命令【库】【增加对象到库】，将选【增加对象到库
3、】，将选中的表格转化为库文件。此时会出现中的表格转化为库文件。此时会出现【Dreamweaver】“提示信息提示信息”对话框，在该对话对话框，在该对话框中单击【确定】按钮，库项目的内容随即会出现框中单击【确定】按钮，库项目的内容随即会出现在【资源】面板中，等待输入新的库文件名称，如在【资源】面板中，等待输入新的库文件名称，如图图8-4所示。所示。图8-4 在【资源】面板中添加1个新库项目网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）6在名称框中输入新的库文件名称在名称框中输入新的库文件名称“nav_left0801.lbi”，“.lbi”为库文件的扩展名。为库文件的
4、扩展名。然后按【然后按【Enter】键即可。】键即可。（4）Dreamweaver CC会把库项目文件保存会把库项目文件保存在本地站点根文件夹下的在本地站点根文件夹下的“Library”子文件夹中，子文件夹中，如果本地站点没有该文件夹，如果本地站点没有该文件夹，Dreamweaver会自会自动创建该文件夹。动创建该文件夹。库项目创建完成后，原网页中转换成库项目库项目创建完成后，原网页中转换成库项目的内容，背景会显示为淡黄色，且不可编辑。的内容，背景会显示为淡黄色，且不可编辑。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）72 2将网页中的版权信息区域定义为库项目打开
5、文件夹打开文件夹“webpage”中网页文档中网页文档“nav_bottom0801.html”，从同样的方法将该网，从同样的方法将该网页中的版权信息区域定义为库项目，库项目命名为页中的版权信息区域定义为库项目，库项目命名为“nav_bottom0801.lbi”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）8【任务描述】【任务8-1-2】在网页中插入库项目（1）在网页）在网页0801.html的表格的表格3-2中插入库项中插入库项目目nav_left0801.lbi。（2）在网页）在网页0801.html的底部插入库项目的底部插入库项目nav_bottom080
6、1.lbi。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）9【任务实施】1 1在表格3-23-2中插入库项目nav_left0801nav_left0801（1）打开文件夹）打开文件夹“task08-1”中名称为中名称为“0801.html”的网页文档，在该网页中，将光标置的网页文档，在该网页中，将光标置于表格于表格3-2中。中。（2）在）在Dreamweaver CC主界面，选择命令主界面，选择命令【窗口】【窗口】【资源】，切换到【资源】面板，也可【资源】，切换到【资源】面板，也可以在【文件】面板中直接单击以在【文件】面板中直接单击“资源资源”选项卡切换选项卡切换
7、到【资源】面板。到【资源】面板。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）10（3）在【资源】面板中单击左侧的【库】按）在【资源】面板中单击左侧的【库】按钮，显示本站点所有的库项目文件，选中要插入钮，显示本站点所有的库项目文件，选中要插入的库项目的库项目“nav_left0801”，单击该面板中左下角，单击该面板中左下角的【插入】按钮，即可插入的【插入】按钮，即可插入1个库项目。个库项目。插入到网页中的库项目背景会显示为淡黄色，插入到网页中的库项目背景会显示为淡黄色，同样是不可编辑的。同样是不可编辑的。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第
8、3 3版）版）112 2 在 表 格 3 3 的 下 方 插 入 库 项 目nav_bottom0801nav_bottom0801将光标置于表格将光标置于表格3的右侧，在【资源】面的右侧，在【资源】面板中选中要插入的库项目板中选中要插入的库项目“nav_bottom0801”，然后单击该面板中左下角的【插入】按钮，即然后单击该面板中左下角的【插入】按钮，即可在表格可在表格3的下方插入另一个库项目。的下方插入另一个库项目。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）12保存网页保存网页0801.html，预，预览其效果，如图览其效果，如图8-6所示。所示。图8-6 作为模板的网页的预览效果网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）
