Div──布局搜索网页

《Div──布局搜索网页》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、项目九Div──布局搜索网页布局页眉任务一布局主体任务二布局页脚任务三任务一布局页眉【操作步骤】1.首先在Dreamweaver8中定义一个本地静态站点，然后把“项目素材”文件夹中的内容复制到站点根文件夹下。2.在网站根文件夹下面新建一个网页文档并保存为“index.htm”。3.将鼠标光标置于文档窗口顶部，然后在菜单栏中选择【插入】／【布局对象】／【层】命令来创建一个层，如图所示。4.在菜单栏中选择【窗口】／【层】命令或者直接按F2键打开【层】面板，如图所示。5.在【层】面板中单击层的名称“Layer1”来选定该层。6.接着在【属性】面板中设置层的大小和位置等参数，如图所

2、示。7.将鼠标光标置于层“Layer1”中，然后插入图像文件“images/logo.gif”，并单击【属性】面板上的按钮，使其居中显示，如图所示。8.在【层】面板中双击“Layer1”，重新输入层的名称“TopLayer”，或者在【属性】面板的【层编号】文本框中重新输入层的名称“TopLayer”。至此，页眉部分就制作完了。【操作步骤】1.单击【插入】／【布局】面板上的按钮，在层“TopLayer”下绘制层“Layer1”，其参数设置如图所示。2.将鼠标光标置于层“Layer1”内，然后在菜单栏中选择【插入】／【表单】／【表单】命令，插入一个表单，如图所示。任务二布局主体

3、3.将鼠标光标置于表单内，然后在菜单栏中选择【插入】／【布局对象】／【Div标签】命令，或在【插入】／【布局】面板中单击（插入Div标签）按钮，打开【插入Div标签】对话框，在【插入】下拉列表中选择【在插入点】选项，在【ID】下拉列表中输入“NavDiv”，如图所示。4.单击按钮，打开【新建CSS规则】对话框，参数设置如图所示。5.单击按钮，打开【#NavDiv的CSS规则定义】对话框，在【方框】分类中设置宽为“400像素”，在【区块】分类中设置文本对齐方式为“居中”，【类型】分类参数设置如图所示。6.单击按钮，在表单中插入Div标签“NavDiv”，如图所示。7.删除其中

4、的原有文本，然后重新输入文本并添加空链接，如图所示。8.在【插入】／【布局】面板中单击（插入Div标签）按钮，打开【插入Div标签】对话框，在【插入】下拉列表中选择【在标签之后】选项、“”，在【ID】下拉列表中输入“InputDiv”，如图所示。9.单击按钮，创建【高级】CSS样式“#InputDiv”，在【#InputDiv的CSS规则定义】对话框的【类型】分类中设置文本大小为“16像素”，行高为“20像素”，在【区块】分类中设置文本对齐方式为“居中”，在【方框】分类中设置宽度为“400像素”，高度为“20像素”，左右边界为“自动”。10.

5、删除Div标签“InputDiv”中的原有文本，然后在菜单栏中选择【插入】／【表单】／【文本域】命令，插入一个文本框，然后在文本域【属性】面板的【文本域】文本框中设置ID名称为“InputContent”，如图所示。11.创建【高级】CSS样式“#InputContent”，在【#InputContent的CSS规则定义】对话框的【类型】分类中设置文本大小为“14像素”，行高为“20像素”，在【方框】分类中设置宽度为“250像素”，高度为“20像素”。12.在菜单栏中选择【插入】／【表单】／【按钮】命令，在文本框后面插入一个按钮，其属性设置如图所示。至此，网页主体部分就制作

6、完了，如图所示。任务三布局页脚【操作步骤】1.单击【插入】／【布局】面板上的按钮，在层“MainLayer”的下面绘制层“FootLayer”，其属性参数设置如图所示。2.在【CSS样式】面板中双击“#FootLayer”，打开【#FootLayer的CSS规则定义】对话框，在【类型】分类中将文本大小设置为“14像素”，行高设置为“35像素”，在【区块】分类中将文本对齐方式设置为“居中”。3.单击按钮，在层“FootLayer”中输入相应的文本，如图所示。最后保存文件。至此，页脚部分制作完了。