11.1创建库 （课件）-高二《网页设计与制作》同步教学（人民邮电版）

项目十一 库和模板──制作花卉基地主页 创建库 任务一 创建模板 任务二 应用模板 任务三 任务一 创建库 （一） 创建库项目 【操作步骤】 1.首先在Dreamweaver 8中定义一个本地静态站点，然后把“项目素材”文件夹中的内容复制到站点根文件夹下。 2.在菜单栏中选择【窗口】／【资源】命令，打开【资源】面板。在【资源】面板中单击 （库）按钮，切换至【库】分类，如图所示 ”。 3.单击【资源】面板右下角的 （新建）按钮，新建一个库，然后在列表框中输入库的名称“top”，如图所示 。 4.使用同样的方法创建名称为“foot”的库项目。 （二） 编排页眉库项目 【操作步骤】 1.在【资源】面板中选中库项目“top.lbi”，再单击【资源】面板右下角的按钮，或者双击库文件“top.lbi”，打开页眉库项目。 2.在菜单栏中选择【窗口】／【CSS样式】命令，打开【CSS样式】面板，单击面板底部的按钮，在弹出的【新建CSS规则】对话框的【选择器类型】选项组中，点选【标签（重新定义特定标签的外观）】单选钮，在【标签】下拉列表中选择【body】选项，在【定义在】选项组中点选【新建样式表文件】单选钮，如图所示。 3.单击按钮，打开【保存样式表文件为】对话框，把样式表文件保存为“css.css”。然后在【body的CSS规则定义（在css.css中）】对话框的【区块】分类中设置文本对齐方式为“居中”，在【方框】分类中设置边界全部为“0”。 4.在“css.css”中重新定义标签“table”的样式，设置文本大小为“12像素”。 5.在“css.css”中创建【高级】CSS样式“a:link,a:visited”，设置文本颜色为“#006633”，修饰效果为“无”。 6.在“css.css”中创建【高级】CSS样式“a:hover”，设置文本颜色为“#FF0000”，有下划线。 下面开始向库项目添加内容。 7.插入一个2行2列的表格，其属性参数设置如图所示。 8.对第1列的两个单元格进行合并，并在【属性】面板中设置其水平对齐方式为“居中对齐”，宽度为“120”，如图所示。然后在单元格中插入“images”文件夹下的花卉基地标志文件“logo.gif”。 9.设置第2列第1个单元格的水平对齐方式为“右对齐”，高度为“30”，然后在单元格中再插入一个1行3列的嵌套表格，属性参数设置如图所示。 10.设置嵌套表格3个单元格的水平对齐方式均为“右对齐”，宽度均为“80”，然后在单元格中依次输入文本“设为主页”、“加入收藏”和“联系我们”。 11.设置第2列第2个单元格的水平对齐方式为“右对齐”，高度为“30”，然后在单元格中再插入一个1行6列的嵌套表格，属性参数设置如图所示。 12.设置嵌套表格所有单元格的水平对齐方式均为“居中对齐”，宽度均为“80”，然后输入“基地主页”、“基地介绍”、“市场供求”、“教学栽培”、“网上订货”和“名树名花”，并添加空链接“#”。 13.最后保存页眉库文件，如图所示。 （三） 编排页脚库项目 【操作步骤】 1.在【资源】面板中打开库项目“foot.lbi”，然后单击【CSS样式】面板底部的按钮，在打开的【链接外部样式表】对话框中链接外部样式表文件“css.css”，如图所示。 2.在库项目中插入一个1行6列的表格，其属性参数设置如图所示。 3.设置前5个单元格的水平对齐方式为“左对齐”，宽度为“80”，然后在单元格中依次输入文本“站点地图”、“实验室”、“新闻发布”、“人才招聘”和“网络服务”，并添加空链接“#”。 4.设置最后一个单元格的水平对齐方式为“右对齐”，然后在其中输入文本“版权所有 XXX省XXX市花卉基地”，如图所示。 $