项目九 Div──布局搜索网页 （课件）-高二《网页设计与制作》同步教学（人民邮电版）

项目九 Div──布局搜索网页 布局页眉 任务一 布局主体 任务二 布局页脚 任务三 任务一 布局页眉 【操作步骤】 1.首先在Dreamweaver 8中定义一个本地静态站点，然后把“项目素材”文件夹中的内容复制到站点根文件夹下。 2.在网站根文件夹下面新建一个网页文档并保存为“index.htm”。 3.将鼠标光标置于文档窗口顶部，然后在菜单栏中选择【插入】／【布局对象】／【层】命令来创建一个层，如图所示。 4.在菜单栏中选择【窗口】／【层】命令或者直接按F2键打开【层】面板，如图所示。 5.在【层】面板中单击层的名称“Layer1”来选定该层。 6.接着在【属性】面板中设置层的大小和位置等参数，如图所示。 7.将鼠标光标置于层“Layer1”中，然后插入图像文件“images/logo.gif”，并单击【属性】面板上的按钮，使其居中显示，如图所示。 8.在【层】面板中双击“Layer1”，重新输入层的名称“TopLayer”，或者在【属性】面板的【层编号】文本框中重新输入层的名称“TopLayer” 。至此，页眉部分就制作完了。 【操作步骤】 1.单击【插入】／【布局】面板上的按钮，在层“TopLayer”下绘制层“Layer1”，其参数设置如图所示。 2.将鼠标光标置于层“Layer1”内，然后在菜单栏中选择【插入】／【表单】／【表单】命令，插入一个表单，如图所示。 任务二 布局主体 3.将鼠标光标置于表单内，然后在菜单栏中选择【插入】／【布局对象】／【Div标签】命令，或在【插入】／【布局】面板中单击（插入Div标签）按钮，打开【插入Div标签】对话框，在【插入】下拉列表中选择【在插入点】选项，在【ID】下拉列表中输入“NavDiv”，如图所示。 4.单击 按钮，打开【新建CSS规则】对话框，参数设置如图所示。 5.单击 按钮，打开【#NavDiv的CSS规则定义】对话框，在【方框】分类中设置宽为“400像素”，在【区块】分类中设置文本对齐方式为“居中”，【类型】分类参数设置如图所示。 6.单击 按钮，在表单中插入Div标签“NavDiv”，如图所示 。 7.删除其中的原有文本，然后重新输入文本并添加空链接，如图所示。 8.在【插入】／【布局】面板中单击 （插入Div标签）按钮，打开【插入Div标签】对话框，在【插入】下拉列表中选择【在标签之后】选项、“<div id=”NavDiv”>”，在【ID】下拉列表中输入“InputDiv”，如图所示。 9.单击按钮，创建【高级】CSS样式“#InputDiv”，在【#InputDiv的CSS规则定义】对话框的【类型】分类中设置文本大小为“16像素”，行高为“20像素”，在【区块】分类中设置文本对齐方式为“居中”，在【方框】分类中设置宽度为“400像素”，高度为“20像素”，左右边界为“自动”。 10.删除Div标签“InputDiv”中的原有文本，然后在菜单栏中选择【插入】／【表单】／【文本域】命令，插入一个文本框，然后在文本域【属性】面板的【文本域】文本框中设置ID名称为“InputContent”，如图所示。 11.创建【高级】CSS样式“#InputContent”，在【#InputContent的CSS规则定义】对话框的【类型】分类中设置文本大小为“14像素”，行高为“20像素”，在【方框】分类中设置宽度为“250像素”，高度为“20像素”。 12.在菜单栏中选择【插入】／【表单】／【按钮】命令，在文本框后面插入一个按钮，其属性设置如图所示 。 至此，网页主体部分就制作完了，如图所示 。 任务三 布局页脚 【操作步骤】 1.单击【插入】／【布局】面板上的 按钮，在层“MainLayer”的下面绘制层“FootLayer”，其属性参数设置如图所示。 2.在【CSS样式】面板中双击“#FootLayer”，打开【#FootLayer的CSS规则定义】对话框，在【类型】分类中将文本大小设置为“14像素”，行高设置为“35像素”，在【区块】分类中将文本对齐方式设置为“居中”。 3.单击按钮，在层“FootLayer”中输入相应的文本，如图所示。 最后保存文件。 至此，页脚部分制作完了。 $