文档介绍:项目4 分支页的设计与制作
模块 41:分支页布局
学习目标:
会使用库、模板和表格进行布局
会使用框架和表格进行布局
4-1-1工作任务
使用库、模板和表格进行布局设计。
使用框架和表格进行布局设计。
4-1-2 操作步骤
任务1 使用库、模板和表格进行布局设计。
【任务分析】
在网页设计与制作过程中,当需重用页面布局和页面元素时,可以使用库和模板。
库是用来存放站点中经常重复使用的页面元素的场所,对于使用频率比较高的一些页面元素,如图像、文本、表格、表单等,都可以作为库项目存放在库面板中。
模板是一种特殊的网页,主要用于创建具有固定特征和共同格式的网页,使用模板可以使用整个网站的风络统一,也可以快速地制作一些重复性较高的网页。当网页需要更新时,只要更新一次模板就可以完成,极大地提高了效率。
【操作步骤】
将页面头部内容制作成库文件。
(1)执行“文件”→“新建”命令,弹出“新建文档”对话框,在对话框中选择“常规”选项卡中的“类别”/“基本页”/“库项目”选项,如图所示。
(2)单击【创建】按钮,将新建一空白文件。
(3)将光标放置于页面中,插入2行1列的表格,在“属性”面板中将“对齐”设置为“居中对齐”,“边框”、“填充”和“间距”属性值设为0。
(4)将光标放置在第1行单元格中,执行“插入”→“图像”命令,插入 C:\ClassWeb\。
提示:由于当前文档还没有保存,所以当前路径为绝对路径,当文档保存以后就会成为相对路径。
(5)将光标放置在第2行单元格中,执行“插入”→“图像”命令,依次插入 C:\ClassWeb\。
(6)执行“文件”→“另存为”命令,弹出“另存为”对话框,在“保存在”下拉列表框中选取“C:\ClassWeb\news”在“文件名”,在“保存类型”下拉列表框中选择“库文件(*lbi)”,如图所示。
(7)单击【保存】按钮,保存为库文件,至此库文件制作完毕。
将各页面中共有格式制作成模板。
执行“文件”→“新建”命令,弹出“新建文档”对话框,在对话框中选择“常规”选项卡中的“类别”/“模板页”/“HTML模板”选项,如图所示。
单击【创建】按钮,将新建一空白模板网页。
执行“窗口”→“资源”命令,打开资源面板,在面板中单击“库”按钮,显示创建的库文件top,如图所示。
选中库文件top,单击“资源”面板左下角的【插入】按钮,即可插入库文件。
提示:在模板中,库文件是不能够直接编辑的,只能打开后进行编辑。
将光标放置在库文件的下方,插入1行2列的表格,此表格记为表格1,在“属性”面板中设置表格的宽为1003像素,“边框”、“间距”和“填充”属性值均为0。
将光标置于表格1的第一个单元格内,在“属性”面板中设置单元格的宽为“175px”。然后在该单元格内插入6行1列的表格,此表格记为表格2,设置表格的宽度为100%,“边框”、“间距”和“填充”属性值均为0。
将光标定位于表格2的第1行中,插入C:\ClassWeb\news\images\。将光标定位于表格2的第2行中,插入C:\ClassW