DW+CSS基础教程.docVIP

《Dreamweaver》 目录 第一节：DW软件介绍 1 第二节：学习Dreamweaver的作用和应用方向 2 第三节：认识DW的界面 2 第四节：站点的建立和编辑 3 第五节：常用插入 3 第六节：CSS样式 5 1. 作用 5 2. CSS样式的应用对象 5 3. CSS样式的分类 5 4. 如何将样式表加入网页？ 6 5. 实验后总结优先级 7 6. CSS规则简单说明 7 7. 块元素（block）的定义 8 8. CSS规则详解 — 类型[块内字的规则] 8 9. CSS规则详解 — 背景[块本身] 8 10. CSS规则详解 — 区块[块内元素的对齐和排版] 8 11. CSS规则详解 — 方框[块本身] [块内] [块间] 9 12. CSS规则详解 — 边框[块本身] 10 13. CSS规则详解 — 列表 10 14. CSS规则详解 — 定位 10 15. CSS规则详解 — 扩展[块内] 11 第七节：CSS+DIV实例网页布局 11 1. 盒子模型 12 2. 当间距（边界距离）叠加的说明 12 3. CSS+DIV布局的精髓 13 4. CSS排版理念 14 第八节：行为 15 1. 定义 15 2. 行为的“埋设” 15 3. 常用触发条件 15 4. 常用事件演示 16 第一节：DW软件介绍 Dream Weaver是一款网页排版软件，可以方便的进行网页布局。 是由ADOBE公司生产的， ADODB公司有多款针对电脑设计的软件，如： 第二节：学习Dreamweaver的作用和应用方向 主要作用：①快捷的网页排版布局。②智能化网页辅助设计。 应用方向：网站的制作和测试。 第三节：认识DW的界面 常用面板、属性栏 工作区模式切换开关 代码 —— HTML编码方式 设计 —— 最终显示的结果（所见即所得） 拆分 —— 以上两者皆有 标签选择器 可以显示HTML标签的层次关系。 可以快速选择并编辑HTML标签。 预览按钮 可以在IE中测试最终结果，快捷键（F12） 第四节：站点的建立和编辑 DW中不能直接创建网页，那样得到的路径会是绝对路径。我们必须首先要创建站点，并在站点管理器中，创建和管理HTML网页。 它的好处： 自动使用相对路径。 所有网页文件都存在一个固定文件夹下，便于管理。 通过DW的文件管理面板可以直观看到网站中各个文件的状态。 第五节：常用插入 超级链接 通过给文字或者图片增加一个“点击出口”，当它们被点击后即可以跳转到指定的位置。 我们可以设置其打开属性，_blank 新窗口打开 _self 当前窗口。 邮件链接 格式： mailto:E-MAIL地址 锚点 通过在当前页面内设置标记，可以在当前页面内超链接进行跳转。 格式： #锚点名 表格 行、列、表格的宽度。 边框粗细，如果为0，则表格为边线隐藏。 单元格边距（填充）：指单元格内元素到单元格边的距离。 单元格间距：指两个单元格之间的距离。 表格的属性均是通过属性面板来调整的，我们可以任意调整某一行或列或者单元格的属性。 表格元素的选择 我们选择表格元素（表格、行、单元格），需使用标签选择器来选择，table（表格本身），td(单元格)，tr(行)。 表格是可以嵌套的，即一个单元格里还可以插入新表格。 表格一般只能竖排不能横排。 图片、图片占位符、鼠标经过图像 图片：一般只设置宽高 图片带超级链接中替换的意思是当鼠标指上以后的文字提示或当图片不显示时的文字提示。 图片热点 可以给一张图片的不同位置，增加不同的超级链接。 FLASH 必须是 *.swf 格式文件 第六节：CSS样式 作用 层叠样式表，用来规范网页中元素的显示样式，使之在任何浏览器下都显示一样的结果，并不随浏览器的设置而改变。 CSS样式的应用对象 只能应用于HTML标签。 CSS样式的分类 类样式：可以定义一组样式规则，并将它应用于不同的标签。 定义时以点开头 不能和HTML标签名字重复 不能是中文和纯数字，可以是字母加数字。 标签样式：规定某一个HTML标签的样式规则，重定义HTML标签。 不需要命名，只需要在下拉菜单中直接选择要改变的标签。 总结：类样式定义好后，要赋于标签才能生效，并且不影响其主要功能。而标签样式定义好后，直接生效，并且将整个页面所有此类标签都即时改变。 高级样式： ID选择器：对拥有ID的HTML标签进行规则设定。 以#号开头 #目标ID 基本属性和类样式相似，操作不同，它需要先给HTML标签设定一个ID,格式是 id=’名字’ 多用于DIV（层）标签 包含选择器 对于特定的HTML标签组合规定其样式，例如： b i，单独的b和单独的i均不受影响。 选择器组 当有一组HTML标签有统一的规则，我们可以将它们规定在一起