分支页设计与制作.pptx

项目四 分支页的设计与制作 子项目4-1：分支页布局 子项目4-2：分支页制作 （使用模板、库和表格布局分支页） （利用布局制作新闻标题分页显示分支页） ;;工作任务列表;工作任务一—使用库、模板和表格进行布局;一、将页头部内容制作成库文件 完成步骤： 步骤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 。; 步骤5：将光标放置在库文件的下方，插入1行2列的表格，此表格记为表格1，在“属性”面??中设置表格的宽为1003像素，“边框”、“间距”和“填充”属性值均为0。; 步骤8：将光标定位于表格2的第3行中，单击属性面板中“背景”文本框右边的“单元格背景URL”图标，在弹出的“选择图像源文件”对话框中选择C:\ClassWeb\news\images\hx2.jpg插入，在属性面板中将单元格“高”设为55，然后输入文字“班级新闻”设置文字字体和大小，设置文字居中（依据自己的布局风格而定，这里我们设定字体大小为20像素）。; 步骤10：将光标定位于表格2的第6行中，插入C:\ClassWeb\news\images\hx3.jpg。 ; （二）设置模板可编辑区;工作任务一—使用库、模板和表格进行布局;任务分析： 在任务1中已经创建了模板，创建了模板后，就可以应用它们了。通过使用模板能快速、高效地设计风格一致的网页，当模板改变时，所有基于模板的网页也随之改变，这样能有效地实现网站的更新。 完成步骤： 一、创建模板网页 步骤1：执行“文件”→“新建”命令，弹出“新建文档”对话框，在对话框中选择“模板”选项卡，即成为“从模板新建”对话框，在对话框中选择创建模板里选取保存站点中的模板文件，这里我们选取“myclass”中的fzy，确保“当模板改变时更新页面”复选框处于勾选状态 。;步骤2：单击【创建】按钮，创建一模板网页，将文件以newsdisplay.asp为文件名存于news文件夹下 。 提示：利用模板创建的网页只有可编辑区可编辑，当与模板脱离后整个网页将变成可编辑区，但是当更新模板时，与模板脱离的网页将不再自动更新。 二、布局可编辑区域 步骤1：将光标定位于可编辑区zhengwen中，插入一个1行1列的表格，记为表格1，将光标定位于表格1中，单击属性面板中“背景”文本框右边的“单元格背景URL”图标，在弹出的“选择图像源文件”对话框中选择C:\ClassWeb\news\images\xwbj.jpg，调整表格的大小使得背景图像能完全显示出来。 ;步骤2：执行“插入对象”→“布局对象”→“AP元素”命令，在背景图像上插入AP元素1，调整其大小及位置，使之位于背景图像的左上方。在该AP元素上插入一个表单，在表单内插入一个3行1列的表格，记为表格2，在表格2内输入文字并插入表单控件 。 ;步骤4：再在背景图像上插入层lay