中职高教版《网页设计与制作任务驱动教程》8.1使用模板和库制作上海游的网页课件

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