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

小 结 通过本章的学习我们能知道CSS的应用范围，会使用Dreamweaver CS5创建和管理CSS规则，能够使用CSS布局网页。 网页设计与制作 网页设计与制作 学习内容 CSS概述 Dreamweaver CS5创建和管理CSS规则 使用CSS布局网页 学习任务： 5.1任务一：布局首页Logo、Banner 5.2任务二：布局首页中主体内容 通过学习任务完成对某网站的首页及二级页面的布局。 5.1 任务一：布局首页Logo、Banner 5.1.1 知识要点 1．CSS概述 CSS（Cascading Style sheets）层叠样式表，提供了灵活的选择器和丰富的属性让网页呈现出灵活多样的表现形式。 （1）定义CSS CSS代码是和HTML代码截然不同，定义CSS通常有三种方式： 外部样式 嵌入样式 内联样式 （2）选择器 外部样式和嵌入样式定式中都有选择器（selector），选择器是指定义样式所起作用的范围，通常有以下几种： ID选择器 标签选择器 类选择器 复合选择器 （3）CSS属性定义 样式在具体定义时也是通过“属性:属性值”的方式，每个属性之间使用“;”分隔。 （4）使用CSS 根据CSS定义方式的不同，CSS的使用方式也有所不同。 2．Dreamweaver创建和管理CSS规则 在Dreamweaver中对于CSS代码提供了可视化的管理方式，自动的生成代码。即使用CSS管理的核心是“CSS样式面板”，如右图所示。启动方式是在“菜单栏”中选择“窗口”|“CSS样式”（Shift+F11）。 （1）创建CSS样式 步骤1：在“CSS样式”面板中点击“新建CSS规则”按钮 ，打开“新建CSS规则”对话框，设置选择器类型名称等，点击“确定”。 步骤2：如果我们设置类选择器 ，则继续进行相应的CSS样式的规则定义。 （2）插入Div标签 Div标签是页面定位的容器，通常网页元素放置在Div中，然后设置Div样式达到网页布局的目的，当然并不是所以的CSS布局都是用Div。标题标签、列表等也是很常用的布局元素。 插入Div标签的具体过程： 步骤1：在文档中定位插入点，在“菜单栏”中选择“插入”|“布局对象”|“Div标签”，打开“插入Div标签”对话框 步骤2：设定Div标签的参数，单击“确定”按钮。 （3）使用CSS样式 为选定的标签创建样式 类选择器的使用 （4）管理CSS样式 编辑样式 删除样式 附加样式 3．盒模式 “盒模式”是Div+CSS布局的基础，页面在布局中将内容划分为不同的模块，每个模块基本轮廓都可以是一个矩形框，CSS的“盒模式”是指使用CSS对于矩形框（Div或者其他标签）进行样式定义后的盒子。 “盒模式”的构成：内容、Padding（填充） 、Border（边框） 、Margin（边界） 。如下图所示： 5.1.2 工作任务和设计效果 某单位的首页效果图已经绘制完成，如图5-1-26所示，网页所需素材已经被提取出来，当前任务是根据效果图和所提供的素材在Dreamweaver CS5使用Div+CSS技术布局首页中的Logo和Banner。 logo Banner 图5-1-26 具体工作任务流程： 初始化CSS样式 设置页面参数 布局页眉 插入Logo 插入标题 布局Banner 5.2 任务二：布局首页中导航条和主体内容 5.2.1 知识要点 1．项目列表和编号列表的样式设置 项目列表和编号列表用在网页中布局有规律的多项内容时经常使用，例如：新闻列表、商品列表、导航条等 。 项目列表和编号列表的代码 ： （1）列表和列表项的“盒模式”设置 列表和列表项的CSS规则定义需要在Dreamweaver状态栏中选择ul、ol或li标签实现。通常会使用标签选择器定义列表或者列表项的CSS规则。 （2）去除列表项符号 给列表的li新建CSS规则，在“li的CSS规则定义”对话框中选择“列表”类别，设置“List-style-type”的值为“none”，然后单击“应用”按钮。 （3）设置列表项图像符号 列表项前默认的符号很多，但在布局网页时这些符号并不很合适，需要图像作为列表符号。 （4）列表项的内联 内联（inline）是指让网页元素行布局，HTML很多的元素是块级（block）布局，例如：Div、H1、P等，每一块默认占有一行。列表项“li”默认也属于块级元素，所以每个列表项占有一行，如果制作横向导航条需