第5章情景5——布局公司首页和二级页面

1、网页设计与制作 学习内容CSS概述Dreamweaver CS5创建和管理CSS规则使用CSS布局网页网页设计与制作 学习任务： 5.1任务一：布局首页Logo、Banner 5.2任务二：布局首页中主体内容 通过学习任务完成对某网站的首页及二级页面的布局。网页设计与制作5.1 任务一：布局首页Logo、Banner 5.1.1 知识要点知识要点1CSS概述CSS（Cascading Style sheets）层叠样式层叠样式表表，提供了灵活的选择器和丰富的属性让网页呈现出灵活多样的表现形式。网页设计与制作（1）定义CSS CSS代码是和HTML代码截然不同，定义CSS通常有三种方式： 外部样

2、式外部样式 嵌入样式嵌入样式 内联样式内联样式 网页设计与制作 （2）选择器 外部样式和嵌入样式定式中都有选择器（selector），选择器是指定义样式所起作用的范围，通常有以下几种： ID选择器 标签选择器 类选择器 复合选择器网页设计与制作（3）CSS属性定义样式在具体定义时也是通过“属性:属性值”的方式，每个属性之间使用“;”分隔。（4）使用CSS根据CSS定义方式的不同，CSS的使用方式也有所不同。网页设计与制作2Dreamweaver创建和管理CSS规则 在Dreamweaver中对于CSS代码提供了可视化的管理方式，自动的生成代码。即使用CSS管理的核心是“CSS样样式面板式面板”

3、，如右图所示。启动启动方式方式是在“菜单栏”中选择“窗口”|“CSS样式”（Shift+F11）。网页设计与制作（1）创建CSS样式 步骤1：在“CSS样式”面板中点击“新建CSS规则”按钮 ，打开“新建CSS规则”对话框，设置选择器类型名称等，点击“确定”。 步骤2：如果我们设置类选择器 ，则继续进行相应的CSS样式的规则定义。网页设计与制作（2）插入Div标签 Div标签是页面定位的容器，通常网页元素放置在Div中，然后设置Div样式达到网页布局的目的，当然并不是所以的CSS布局都是用Div。标题标签、列表等也是很常用的布局元素。 插入Div标签的具体过程：步骤1：在文档中定位插入点，在“

4、菜单栏”中选择“插入”|“布局对象”|“Div标签”，打开“插入Div标签”对话框步骤2：设定Div标签的参数，单击“确定”按钮。 网页设计与制作（3）使用CSS样式为选定的标签创建样式类选择器的使用（4）管理CSS样式编辑样式删除样式附加样式网页设计与制作3盒模式 “盒模式”是Div+CSS布局的基础，页面在布局中将内容划分为不同的模块，每个模块基本轮廓都可以是一个矩形框，CSS的“盒模式”是指使用CSS对于矩形框（Div或者其他标签）进行样式定义后的盒子。网页设计与制作 “盒模式”的构成构成：内容、Padding（填充） 、Border（边框） 、Margin（边界） 。如下图所示：网页设

5、计与制作5.1.2 工作任务和设计效果 某单位的首页效果图已经绘制完成，如图5-1-26所示，网页所需素材已经被提取出来，当前任务是根据效果图和所提供的素材在Dreamweaver CS5使用Div+CSS技术布局首页中的Logo和Banner。 网页设计与制作logoBanner 图5-1-26网页设计与制作具体工作任务流程：初始化CSS样式设置页面参数布局页眉插入Logo插入标题布局Banner网页设计与制作5.2 任务二：布局首页中导航条和主体内容5.2.1 知识要点知识要点1项目列表和编号列表的样式设置 项目列表和编号列表用在网页中布局有规律的多项内容时经常使用，例如：新闻列表、商品列

6、表、导航条等 。网页设计与制作项目列表和编号列表的代码 ：网页设计与制作（1）列表和列表项的“盒模式”设置列表和列表项的CSS规则定义需要在Dreamweaver状态栏中选择、或标签实现。通常会使用标签选择器定义列表或者列表项的CSS规则。（2）去除列表项符号给列表的新建CSS规则，在“li的CSS规则定义”对话框中选择“列表”类别，设置“List-style-type”的值为“none”，然后单击“应用”按钮。网页设计与制作（3）设置列表项图像符号列表项前默认的符号很多，但在布局网页时这些符号并不很合适，需要图像作为列表符号。（4）列表项的内联内联（inline）是指让网页元素行布局，HTM

7、L很多的元素是块级（block）布局，例如：Div、H1、P等，每一块默认占有一行。列表项“li”默认也属于块级元素，所以每个列表项占有一行，如果制作横向导航条需要列表项内联。 网页设计与制作2定义列表的样式设置 定义列表的代码如图5-2-9所示，对于定义列表样式定义是给和进行设置。图5-2-9 定义列表代码网页设计与制作3超级链接的样式设置 超级链接的样式是通过重写“a”标签样式和四个伪类选择器进行控制。通常伪类选择器是配合其他选择器组成复合选择器使用 。网页设计与制作 4浮动和清除（1）浮动（float）：定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级“盒子”，而不论它本身是何种元素。（2）清除（clear）：定义了元素的哪边上不允许出现浮动元素。 网页设计与制作 5滤镜 滤镜是给标签定义的规则类似Photoshop软件给图像增加的滤镜效果。在定义时是通过“CSS规则定义”对话框中的“扩展”类别的“filter”属性设置。 网页设计与制作5.2.2 工作任务和设计效果本任务继续上一节的工作任务，完整首页的整体布局，在这一节中要完成布局首页的导航条、主体内容和页脚，如下所示。导航条、主体内容和页脚网页设计与制