网页设计与制作 第2版 项目教学 作者 王君学 古淑强 项目七 Div+CSS──布局宝贝画展网页-.pptVIP

网页设计与制作 项目八 Div+CSS──布局宝贝画展网页 传统的网页布局技术基本上是以表格为主，但现在Div+CSS布局技术逐步被广泛使用。本项目以宝贝画展网页为例，介绍使用Div+CSS布局网页的基本方法。在项目中，将整个页面分为页眉、主体和页脚3个部分，分别使用Div标签“head”、“main”和“foot”并结合CSS样式进行布局。 任务一 制作页眉 （一）布局页眉 需要掌握的内容主要有： 1、Div标签 2、【CSS样式】面板 3、CSS样式的类别 4、CSS的【方框】分类对话框 5、CSS的【背景】分类对话框 1、Div标签 在现代网页布局中，Div是经常使用到的。但Div本身只是一个区域标签，不能定位与布局，真正定位的是CSS代码。 Div标签是用来为HTML文档内大块的内容提供结构和背景的元素。Div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由Div标签的属性或样式表格式化这个块来进行控制。Div标签称为区隔标记，作用是设置文本、图像、表格等元素的摆放位置。当把文本、图像或其他的内容放在Div中，它可称作为“Div block”。 在菜单栏中选择【插入】／【布局对象】／【Div标签】命令，或在【插入】／【布局】面板中单击 （插入Div标签）按钮，打开【插入Div标签】对话框进行设置即可。 2、【CSS样式】面板 在菜单栏中选择【窗口】／【CSS样式】命令，即在【CSS样式】命令前打上“√”，打开【CSS样式】面板。也可在Div标签【属性】面板中单击 按钮，打开【CSS样式】面板，单击 按钮进入显示文档所有的CSS样式模式。 3、CSS样式的类别 在【CSS样式】面板中单击面板底部的 （新建）按钮，弹出【新建CSS规则】对话框，根据【选择器类型】的不同，CSS样式被划分为3大类：类（可应用于任何标签）、标签（重新定义特定标签的外观）、高级（ID、伪类选择器等）。 4、CSS的【方框】分类对话框 CSS将网页中所有的块元素都看作是包含在一个方框中的。 【方框】分类对话框包含6种CSS属性。 5、CSS的【背景】分类对话框 背景属性主要用于设置背景颜色或背景图像，【背景】分类对话框中包含以下6种CSS属性。 （二）设置导航栏 需要掌握的内容主要有： 1、 CSS的【类型】分类对话 2、定义超级链接CSS样式 1、 CSS的【类型】分类对话 【类型】分类属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等，其中包含9种CSS属性，全部是针对网页中的文本的。 2、定义超级链接CSS样式 创建超级链接CSS样式，可使超级链接的状态显得丰富多彩。在【CSS样式】面板中打开【新建CSS规则】对话框，在【选择器】列表框中输入“#nav a:link, #nav a:visited” 来定义超级链接和已访问超级链接的状态。 2、定义超级链接CSS样式 按照同样的方法创建高级CSS样式“#nav a:hover”来定义超级链接鼠标悬停时的状态。 任务二 制作网页主体 （一）制作左侧栏目 （二）制作右侧栏目 （一）制作左侧栏目 1、 CSS的【区块】分类对话框 2、创建类CSS样式 在【CSS样式】面板中打开【新建CSS规则】对话框，输入类名称，接着在【.ptext的CSS规则定义】对话框的【类型】分类中将行高设置为“22像素”，【方框】分类中将上和下边界均设置为“2像素”，【区块】分类中将文本对齐设置为“左对齐”。 在【名称】列表框中输入类CSS样式名称时，应该先输入英文状态下的句点“.”，然后再输入具体的名称如果没有输入句点。 3、引用类CSS样式 将鼠标光标置于要引用类样式的段落文本中，然后在【属性】面板的【样式】下拉列表中选择类样式名称。 这是通过【属性】面板给对象应用类CSS样式的基本途径，上面的操作给段落标签“p”引用了类CSS样式“ptext”，引用的源代码是：p class=ptext…/p。 （二）制作右侧栏目 需要掌握的内容主要有： 1、CSS的【边框】分类对话框 2、CSS