第8章综合实例2──应用库项目制作“SM”网站子页.docVIP

第8章 综合实例2──应用库项目制作“SM”网站子页 除应用前面所讲的模板可以提高网站的制作效率外，应用库项目也可以达到同样的效果。为说明这一点，本例便利用库项目制作一个与“综合实例1”制作的“sub2.html”完全相同的网页。 制作思路 为避免在同一站点中有两个完全相同的文档，我们首先将“SM1”文件夹拷贝至本地磁盘，然后在Dreamweaver中定义站点“SM1”。具体制作时，需首先打开该站点中的“sub1_d.html”文档，并将其中的某些部分制作成库项目，然后新建一个空白的“sub2.html”文档，将制作好的库项目应用到该网页中，最后编辑“sub2.html”页面的其余部分，完成实例制作。 制作步骤 1. 创建库项目 Step01 启动Dreamweaver 8后，打开“SM1”站点中的文档“sub1_d.html”。 Step02 选中网页中的第1个表格，然后选择“修改”→“库”→“增加对象到库”菜单，在打开的“资源”面板中显示生成的库项目，且其名称处于可编辑状态，如图8-3-1所示。 图8-3-1 创建库项目 Step03 将新建的库项目重命名为“top1”，并按【Enter】键确认。 Step04 按照同样的方法，将第2个表格创建为库项目“top2”；将网页最下方的表格创建为库项目“bottom”。 1. 应用库项目 Step01 在“SM1”站点中新建文档“sub2.html”，并在文档编辑窗口中打开它。 Step02 打开“CSS样式”面板，将站点中的样式文件“s1.css”链接至网页。 Step03 打开“资源”面板，单击其左侧的“库”按钮，使右侧显示站点中的所有库文件。 Step04 单击并向左拖动库项目“top1”至文档编辑窗口中，然后松开鼠标左键以在文档中应用该库项目，如图8-3-2所示。 Step05 按照同样的方法，将库项目“top2”拖动至文档窗口中“top1”下方，如图8-3-3所示。 图8-3-2 应用库项目“top1” 图8-3-3 应用库项目“top2” Step06 采取编辑普通网页的方法，编辑网页下方的内容，如图8-3-4所示。 图8-3-4 编辑网页内容 Step07 将插入点置于网页最下方，然后单击并拖动“资源”面板中的库项目“bottom”至文档最下方，如图8-3-5所示。最后按【Ctrl+S】组合键保存文档。 图8-3-5 应用库项目“bottom” 实例2 《Dreamweaver网页设计》电子版教科书 第8章 3