网页设计库和经典模板的应用.docVIP

52门户网站实训指导（一） 实训目标： 1 掌握门户网站的设计技巧。 2 掌握库项目和模板的制作及使用方法。 实训步骤： 一 创建站点。 在Dreamweaver CS3中定义一个本地站点，命名为“52menhu”，存储位置为：D：\sample\52menhu\，并将本项目素材文件夹下的图像文件夹image复制到网站的根文件夹下。然后，选择“窗口”→“资源”命令或者按F11键，打开“资源”面板。如图1。 图1 资源面板 图2 新建库项目banner 二 创建库文件。 单击“资源”面板右下角的按钮，新建一个库，然后在列表框中输入库的名称banner并加以确认。使用同样的方法创建名称为foot的库文件。 二、制作主页的Banner 基本步骤: 在“资源”面板中双击打开，找到库文件banner.lbi。 插入一个3行1列，宽为760像素的表格。 设置表格属性(具体步骤参照书讲解)。 插入图片，输入文本。 最终效果如图3所示: 图3 banner效果图 制作页脚 基本步骤： （1）在资源面板中打开库文件foot.lbi； （2）插入一个3行1列,宽为760像素的表格； （3）设置表格属性，参数如图4； 图4 表格属性 （4）输入文本，并保存文件。效果如图5所示。 图5 页脚效果图 四、库项目的应用 1.插入库文件 新建页面myindex.html，依据前面做的banner.lib和foot.lib文件充实首页面myindex.html。打开“资源”面板，点击左下角的“插入”按钮，分别将两个库项目分别插入到页面对应位置。 2.编辑库项目 在资源面板中单击“编辑”按钮，可打开库项目进行编辑。编辑的方法同编辑普通页面一样。 任务2 制作女性频道子页 1、使用模板建立子页 操作步骤： （1）将素材中的首页复制到站点中。选择“文件”→ “另存为模板”命令，将已有页面另存为模板，命名为moban1。 2、定义可编辑区域 操作步骤： （1）选择“插入”→“常用”命令，单击“可编辑区域”按钮或者选择“插入”→“模板对象”→“可编辑区域”命令，打开“新建可编辑区域”对话框。 （2）单击“确定”按钮，建立名为EditRegion3的可编辑区域。 （3）依据上面的步骤可依次建立多个可编辑区域。