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

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