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

《网页设计与制作 第2版 项目教学 教学课件 作者 王君学 古淑强 项目七 Div+CSS──布局宝贝画展网页-.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、网页设计与制作老虎工作室2012年12月项目八Div+CSS──布局宝贝画展网页任务一制作页眉任务二制作网页主体实训布局“家家乐”网页任务三制作页脚传统的网页布局技术基本上是以表格为主，但现在Div+CSS布局技术逐步被广泛使用。本项目以宝贝画展网页为例，介绍使用Div+CSS布局网页的基本方法。在项目中，将整个页面分为页眉、主体和页脚3个部分，分别使用Div标签“head”、“main”和“foot”并结合CSS样式进行布局。任务一制作页眉（一）布局页眉（二）设置导航栏（一）布局页眉需要掌握的内容主要有：

2、1、Div标签2、【CSS样式】面板3、CSS样式的类别4、CSS的【方框】分类对话框5、CSS的【背景】分类对话框在现代网页布局中，Div是经常使用到的。但Div本身只是一个区域标签，不能定位与布局，真正定位的是CSS代码。Div标签是用来为HTML文档内大块的内容提供结构和背景的元素。Div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由Div标签的属性或样式表格式化这个块来进行控制。Div标签称为区隔标记，作用是设置文本、图像、表格等元素的摆放位置。当把文本、图像或其他的

3、内容放在Div中，它可称作为“Divblock”。1、Div标签在菜单栏中选择【插入】／【布局对象】／【Div标签】命令，或在【插入】／【布局】面板中单击（插入Div标签）按钮，打开【插入Div标签】对话框进行设置即可。在菜单栏中选择【窗口】／【CSS样式】命令，即在【CSS样式】命令前打上“√”，打开【CSS样式】面板。也可在Div标签【属性】面板中单击按钮，打开【CSS样式】面板，单击按钮进入显示文档所有的CSS样式模式。2、【CSS样式】面板在【CSS样式】面板中单击面板底部的（新建）按钮，弹出【新建

4、CSS规则】对话框，根据【选择器类型】的不同，CSS样式被划分为3大类：类（可应用于任何标签）、标签（重新定义特定标签的外观）、高级（ID、伪类选择器等）。3、CSS样式的类别CSS将网页中所有的块元素都看作是包含在一个方框中的。【方框】分类对话框包含6种CSS属性。4、CSS的【方框】分类对话框背景属性主要用于设置背景颜色或背景图像，【背景】分类对话框中包含以下6种CSS属性。5、CSS的【背景】分类对话框（二）设置导航栏需要掌握的内容主要有：1、CSS的【类型】分类对话2、定义超级链接CSS样式【类型】

5、分类属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等，其中包含9种CSS属性，全部是针对网页中的文本的。1、CSS的【类型】分类对话创建超级链接CSS样式，可使超级链接的状态显得丰富多彩。在【CSS样式】面板中打开【新建CSS规则】对话框，在【选择器】列表框中输入“#nava:link,#nava:visited”来定义超级链接和已访问超级链接的状态。2、定义超级链接CSS样式按照同样的方法创建高级CSS样式“#nava:hover”来定义超级链接鼠标悬停时的状态。2、定义超级链接CS

6、S样式任务二制作网页主体（一）制作左侧栏目（二）制作右侧栏目（一）制作左侧栏目需要掌握的内容主要有：1、CSS的【区块】分类对话框2、创建类CSS样式3、引用类CSS样式1、CSS的【区块】分类对话框区块属性主要用于控制网页元素的对齐方式、文本缩进等，其中包含7种CSS属性。在【CSS样式】面板中打开【新建CSS规则】对话框，输入类名称，接着在【.ptext的CSS规则定义】对话框的【类型】分类中将行高设置为“22像素”，【方框】分类中将上和下边界均设置为“2像素”，【区块】分类中将文本对齐设置为“左对齐”

7、。在【名称】列表框中输入类CSS样式名称时，应该先输入英文状态下的句点“.”，然后再输入具体的名称如果没有输入句点。2、创建类CSS样式将鼠标光标置于要引用类样式的段落文本中，然后在【属性】面板的【样式】下拉列表中选择类样式名称。这是通过【属性】面板给对象应用类CSS样式的基本途径，上面的操作给段落标签“

”引用了类CSS样式“ptext”，引用的源代码是：…

8、、CSS的【定位】分类对话框4、CSS的【扩展】分类对话框（二）制作右侧栏目【边框】分类主要用于设置网页元素边框效果，共包括3种CSS属性。1、CSS的【边框】分类对话框【列表】分类用于控制列表内的各项元素，包含3种CSS属性。2、CSS的【列表】分类对话框【定位】分类可以使网页元素随处浮动，这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于一些浮动元素（如层）来说，却是有效地、用于精确控制其位置的方法。