分支页的设计与制作.ppt

项目四 分支页的设计与制作 子项目4-1：分支页布局 子项目4-2：分支页制作 （使用模板、库和表格布局分支页） （利用布局制作新闻标题分页显示分支页） 知识技能目标 1、清楚库和模板的应用场合； 2、会使用库、模板和表格进行分支页的布局； 3、会使用已制作好的模板进行分支页的制作。 工作任务列表 任务一：使用模板、库和表格布局分支页。 任务二：使用制作好的模板制作新闻标题分页显示分支页。 工作任务一—使用库、模板和表格进行布局 任务分析： 在网页设计与制作过程中，当需重用页面布局和页面元素时，可以使用库和模板。 库是用来存放站点中经常重复使用的页面元素的场所，对于使用频率比较高的一些页面元素，如图像、文本、表格、表单等，都可以作为库项目存放在库面板中。 模板是一种特殊的网页，主要用于创建具有固定特征和共同格式的网页，使用模板可以使用整个网站的风络统一，也可以快速地制作一些重复性较高的网页。当网页需要更新时，只要更新一次模板就可以完成，极大地提高了效率。 一、将页头部内容制作成库文件 完成步骤： 步骤1：执行“文件”→“新建”命令，弹出“新建文档”对话框，在对话框中选择“常规”选项卡中的“类别”/“基本页”/“库项目”选项。 步骤2：单击【创建】按钮，将新建一空白文件。 步骤3：将光标放置于页面中，插入2行1列的表格，表格的宽度设置为1003像素（与所插入的图片的大小一样），在“属性”面板中将“对齐”设置为“居中对齐”，“边框”、“填充”和“间距”属性值设为0。 工作任务一—使用库、模板和表格进行布局 步骤4：将光标放置在第1行单元格中，执行“插入”→“图像”命令，插入 C:\ClassWeb\images文件夹中的index_01.gif图像。 提示：由于当前文档还没有保存，所以当前路径为绝对路径，当文档保存以后就会成为相对路径。 步骤5：将光标放置在第2行单元格中，执行“插入”→“图像”命令，依次插入 C:\ClassWeb\images文件夹中的index_02.gif到index_07.gif图像。 步骤6：执行“文件”→“另存为”命令，弹出“另存为”对话框，在“保存在”下拉列表框中选取“C:\ClassWeb\news”在“文件名”文本框中输入文件名top.lbi，在“保存类型”下拉列表框中选择“库文件（*lbi）”。 工作任务一—使用库、模板和表格进行布局 二、将底部版权信息部分制作成库文件 参照头部的制作自主完成，注意加入“加入收藏（Javascript:window.external.addFavorite(document.location.href,document.title) ）”和“联系我们”的超链接部分 三、将各页面中共有格式制作成模板 完成步骤： （一）制作模板 步骤1：执行“文件”→“新建”命令，弹出“新建文档”对话框，在对话框中选择“常规”选项卡中的“类别”/“模板页”/“HTML模板”选项 。 工作任务一—使用库、模板和表格进行布局 步骤2：单击【创建】按钮，将新建一空白模板网页。 工作任务一—使用库、模板和表格进行布局 步骤3：执行“窗口”→“资源”命令，打开资源面板，在面板中单击“库”按钮，显示创建的库文件top 。 工作任务一—使用库、模板和表格进行布局 步骤4：选中库文件top，单击“资源”面板左下角的【插入】按钮，即可插入库文件。 步骤5：将光标放置在库文件的下方，插入1行2列的表格，此表格记为表格1，在“属性”面板中设置表格的宽为1003像素，“边框”、“间距”和“填充”属性值均为0。 工作任务一—使用库、模板和表格进行布局 步骤6：将光标置于表格1的第一个单元格内，在“属性”面板中设置单元格的宽为“175px”。然后在该单元格内插入6行1列的表格，此表格记为表格2，设置表格的宽度为100%，“边框”、“间距”和“填充”属性值均为0。 步骤7：将光标定位于表格2的第1行中，插入C:\ClassWeb\news\images\ny1.jpg。将光标定位于表格2的第2行中，插入C:\ClassWeb\news\images\hx1.jpg图像。 步骤8：将光标定位于