S8网站制作.ppt

* 全部CSS属性分类记忆方法，阅读教材相应章节。 * 该实例在提出内联、内部、外部样式之前，让学生牢固掌握内部样式的建立和应用方式，停一分钟理清思路后再扩展到其他两种样式 * 在DW中用属性面板、以P标记为例操作演示。 * 在DW中，用CSS面板介绍新建类，仍然以P标记为例。然后介绍CSS面板的用法，新建类对话框的用法。 * 样式的转换 内联样式转换成内部样式 在有内联样式的对象上单击右键，选择菜单：CSS样式、将内联CSS转换为规则。 内部样式转换成外部样式 右击CSS面板中的内部样式名，选择“移动CSS规则”，在对话框中指定“新样式表”。 DW中CSS的用法 新内联样式 指定标签后直接在属性面板指定、编辑样式 通过面板，可以用四种方式定义CSS 类：给内部样式指定一个名称，以便多次引用该定义效果 ID： ID是网页中对象的名称，可以通过ID直接为某个指定对象设置CSS样式。ID名以#开始。 标签：对某个HTML标记重定义 复合内容：特殊的几个选项 CSS 内联、内部、外部样式的优先顺序和转换 类、标签、复合内容、ID的用法 在面板上新建、编辑、删除、套用样式的方法 快速了解和修改当前样式的定义内容 表格布局的特点 使用简单 可以定量布局 格式设置不够灵活多样 效果设置效率低 DIV+CSS 定量布局 可以实现灵活多样的布局 效果设置效率高 CSS应用比较复杂 插入方法 插入DIV标签，在对话框中为DIV指定一个ID 选中DIV，在CSS面板新建CSS样式，弹出对话框，设置CSS详细内容 Mydiv1的格式设置 类型、背景、区块、边框、列表 特别注意：方框和定位格式的含义，包含了DIV的高、宽、填充、边距等重要属性 边距（margin)是指与相邻对象之间的距离，按顺时针方向上、右、下、左值为0 auto 0 auto，可以设置居中 简单实例 三个DIV（2个相对定位，一个绝对定位） #ABC（相对定位） #XYZ （相对定位） #apDIV1 绝对定位 DIV标签的嵌套和相对位置 Div可以多层嵌套，它们之间构成相对位置关系。 下页是实验3完成的网页包含的DIV以及它们的嵌套关系 一般情况： 要将标签B插入标签A内部，选择“在标签结束之前”，标签指定为A 要将标签B插入标签A后面，选择“在标签之后”，标签指定为A 标签栏 了解一个对象所在的容器 选定它，看标签栏从右到左显示的标签，即该对象所在的多重容器。 设置该对象的属性，标签栏上最右边的容器的优先级别最高，然后是从右向左依次降低优先级 阶段总结 学会用标签选中对象 学会在代码视图了解对象所在的DIV名称和格式设置 学会准确选中、编辑、修改对象的CSS属性 学会在代码视图删除对象 第三课 导航工具：菜单 网页行为 Index.html的设计 菜 单 菜单用在网页中用来导航 在文档中插入菜单，必须先保存文档。 插入、布局对象、spry菜单 菜单属性面板是用来修改菜单基本属性的，单击菜单的标题栏，可以即显示属性面板 在CSS面板上编辑外部样式可以设置菜单各种外观。 Spry菜单栏 Spry菜单菜单有水平和垂直两种排列方式。 添加Spry菜单栏时会自动生成代码行及一些辅助文件（如.js，.css，.gif等），默认情况下会在站点文件夹下创建SpryAssets文件夹，并将这些辅助文件存入其中，不能删除。 如果要对外观进行设置，必须了解有关菜单的各个CSS样式，如右图。 菜单外观修改 一级菜单宽度： ul.MenuBarVertical ：整体菜单的宽度 ul.MenuBarVertical li：列表内容的宽度 菜单背景颜色和文字颜色、字号等字符格式： ul.MenuBarVertical a的背景颜色 菜单中文字对齐格式 ul.MenuVertical li 区块 居中对齐 菜单高度控制： 设置ul.MenuBarVertical的文字大小，行高将根据字号自动调整，还可以修改ul.MenuBarVertical a的padding值 二级菜单宽度： ul.MenuBarVertical ul：子菜单整体宽度 ul.MenuBarVertical ul li：子菜单列表内容宽度 特别提示 一个站点内所有网页的水平菜单只能保持同一种外观格式！ 一个站点内所有的垂直菜单也只能是同一个外观格式！ 因为一个站点中用来格式化菜单的外部CSS样式文件只有两个： SpryMenuBarVertical.css和SpryMenuBarHorizontal.css 删除菜单时的常见错误 结论：菜单实例MenuBar1已经被删除， 但文档最后关于它的代码没有删除 添加行为实现网页特效 Dreamweaver行为 Dreamweaver行为是指当被一个特定事件（如单击鼠