dw基础教程.docx

《dw基础教程.docx》由会员分享，可在线阅读，更多相关《dw基础教程.docx（13页珍藏版）》请在三一办公上搜索。

1、dw基础教程Dreamweaver目录 第一节：DW软件介绍 - 2 第二节：学习Dreamweaver的作用和应用方向 - 3 第三节：认识DW的界面 - 3 第四节：站点的建立和编辑 - 4 第五节：常用插入 - 4 第六节：CSS样式 - 6 1. 作用 - 6 2. CSS样式的应用对象 - 6 3. CSS样式的分类 - 6 4. 如何将样式表加入网页？ - 7 5. 实验后总结优先级 - 8 6. CSS规则简单说明 - 8 7. 块元素的定义 - 9 8. CSS规则详解 类型块内字的规则 - 9 9. CSS规则详解 背景块本身 - 9 10. CSS规则详解 区块块内元素的对

2、齐和排版 - 9 11. CSS规则详解 方框块本身 块内 块间 - 10 12. CSS规则详解 边框块本身 - 11 13. CSS规则详解 列表 - 11 14. CSS规则详解 定位 - 11 15. CSS规则详解 扩展块内 - 12 第七节：CSS+DIV实例网页布局 - 12 1. 盒子模型 - 13 2. 当间距叠加的说明 - 13 3. CSS+DIV布局的精髓 - 14 4. CSS排版理念 - 15 第八节：行为- 16 1. 定义 - 16 2. 行为的“埋设” - 16 3. 常用触发条件 - 16 4. 常用事件演示 - 17 第一节：DW软件介绍 Dream We

3、aver是一款网页排版软件，可以方便的进行网页布局。 是由ADOBE公司生产的， ADODB公司有多款针对电脑设计的软件，如： 第二节：学习Dreamweaver的作用和应用方向 主要作用：快捷的网页排版布局。智能化网页辅助设计。 应用方向：网站的制作和测试。 第三节：认识DW的界面 1. 常用面板、属性栏 2. 工作区模式切换开关 a) 代码 HTML编码方式 b) 设计 最终显示的结果 c) 拆分 以上两者皆有 3. 标签选择器 a) 可以显示HTML标签的层次关系。 b) 可以快速选择并编辑HTML标签。 4. 预览按钮 a) 可以在IE中测试最终结果，快捷键 第四节：站点的建立和编辑

4、1. DW中不能直接创建网页，那样得到的路径会是绝对路径。我们必须首先要创建站点，并在站点管理器中，创建和管理HTML网页。 2. 它的好处： a) 自动使用相对路径。 b) 所有网页文件都存在一个固定文件夹下，便于管理。 c) 通过DW的文件管理面板可以直观看到网站中各个文件的状态。 第五节：常用插入 1. 超级链接 通过给文字或者图片增加一个“点击出口”，当它们被点击后即可以跳转到指定的位置。 我们可以设置其打开属性，_blank 新窗口打开 _self 当前窗口。 2. 邮件链接 格式： mailto:E-MAIL地址 3. 锚点 通过在当前页面内设置标记，可以在当前页面内超链接进行跳转

5、。 格式： #锚点名 4. 表格 a) 行、列、表格的宽度。 b) 边框粗细，如果为0，则表格为边线隐藏。 c) 单元格边距：指单元格内元素到单元格边的距离。 d) 单元格间距：指两个单元格之间的距离。 e) 表格的属性均是通过属性面板来调整的，我们可以任意调整某一行或列或者单元格的属性。 f) 表格元素的选择 我们选择表格元素，需使用标签选择器来选择，table，td(单元格)，tr(行)。 g) 表格是可以嵌套的，即一个单元格里还可以插入新表格。 h) 表格一般只能竖排不能横排。 5. 图片、图片占位符、鼠标经过图像 a) 图片：一般只设置宽高 b) 图片带超级链接中替换的意思是当鼠标指上

6、以后的文字提示或当图片不显示时的文字提示。 6. 图片热点 可以给一张图片的不同位置，增加不同的超级链接。 7. FLASH 必须是 *.swf 格式文件 第六节：CSS样式 1. 作用 a) 层叠样式表，用来规范网页中元素的显示样式，使之在任何浏览器下都显示一样的结果，并不随浏览器的设置而改变。 2. CSS样式的应用对象 a) 只能应用于HTML标签。 3. CSS样式的分类 a) 类样式：可以定义一组样式规则，并将它应用于不同的标签。 i. 定义时以点开头 ii. 不能和HTML标签名字重复 iii. 不能是中文和纯数字，可以是字母加数字。 b) 标签样式：规定某一个HTML标签的样式规

7、则，重定义HTML标签。 i. 不需要命名，只需要在下拉菜单中直接选择要改变的标签。 c) 总结：类样式定义好后，要赋于标签才能生效，并且不影响其主要功能。而标签样式定义好后，直接生效，并且将整个页面所有此类标签都即时改变。 d) 高级样式： i. ID选择器：对拥有ID的HTML标签进行规则设定。 以#号开头 #目标ID 基本属性和类样式相似，操作不同，它需要先给HTML标签设定一个ID,格式是 id=名字 多用于DIV标签 ii. 包含选择器 对于特定的HTML标签组合规定其样式，例如： b i，单独的b和单独的i均不受影响。 iii. 选择器组 当有一组HTML标签有统一的规则，我们可以

8、将它们规定在一起，以节省代码输入。格式是： 名1，名2，名3 iv. 伪类选择器 控制超级链接的动态样式，即可以通过它来设定具有动态效果的超级链接外观。 a:link 平常的样子 a:visited 访问过的样子 a:hover 当鼠标滑上的样子 a:active 当点击时的样子 如果希望定义多组不同的链接样式，我们可以用以下方法： a.名字:link (一组的名字必须一致) 4. 如何将样式表加入网页？ a) 行内式：通过style属性直接定义在HTML标签属性内，当有多个CSS属性时用分号分隔，要求大家具备很高的CSS代码水平。 b) 内嵌式：在当前页面head内生成一段CSS代码，只对当

9、前页面生效。 c) 链接式：将CSS样式单独放于一个文件内,通过包含页面的形式，链接入本页面。可以链接到不同的页面，可以减少代码的输入量。 5. 实验后总结优先级 a) 而最接近目标的样式定义优先权越高，高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。 b) ID选择器类样式标签样式 6. CSS规则简单说明 a) 类型 用来定义块元素内文字属性。 b) 背景 用来定义块元素的背景属性。 c) 区块 一个块元素内的排列属性。 d) 方块 一个块元素本身的属性。 e) 边框 给一个块元素加边框。 f) 列表 定义有序号排列和无序号排列标签，可以用自定义图片替换项目符号 g) 定位 层

10、属性的设定 h) 扩展 实现鼠标指针控制和CSS滤镜 7. 块元素的定义 a) 块元素(block)可以理解为在DW中呈矩形的区域，均可认为是块。 b) 块具有容器性，我们可以把块容器元素想象成一个个box，比如剪贴文载，我们先把需要的文章从各种报纸、杂志上剪下来。每块剪下来的内容就是一个 block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。 c) 作为块元素，它一般具有块内、块间、块本身三个属性。 d) 一般来说所有的HTML标签均可以看成块。 8. CSS规则详解 类型块内

11、字的规则 a) 难点1：字体行高的理解。 b) 难点2：一般网页的字体大小。 c) 难点3：字体样式的赋予。 i. 不要直接将样式加给字，而要加给字所在块的块标签。 ii. 要先定义规则，再进行赋予。 9. CSS规则详解 背景块本身 a) 定义背景色和背景图片。 b) 默认为X,Y方向平铺，可以单独设置是否重复。 c) 在不完全重复的情况下，可以设定背景在块中的位置。 d) 附件属性的意思？ 10. CSS规则详解 区块块内元素的对齐和排版 a) 重点1：掌握字母间距的设定。 b) 重点2：文本对齐指的是块的水平对齐方式。 c) 重点3：垂直对齐属性对段落和层均不生效，只对表格和图文管用。

12、d) 重点4：显示属性意思是块以什么方式显示，我们只需知道无和块的意思即可。 11. CSS规则详解 方框块本身 块内 块间 a) 如果只定义宽和高一个属性得到的就是等比例变化或弹性变化。 b) 难点1：浮动属性的意思是块的环绕方式，类似于WORD中的图文混排。对于块容器如DIV，则是如设置浮动，则块一侧空间会被横向充填，如果下面的块填补不进，则自动向下浮动。 c) DIV标签，又叫层标签，它就代表一个块容器，除了名字，没有其他属性，它的属性全靠CSS来设定。它使用高级样式中的ID样式来设定规则。 #层ID “ID唯一” i. DIV层在默认情况下，只能竖排，不能横排。 ii. CSS中浮动属

13、性，可以让DIV层横排，解释是从哪边开始横向排列。 iii. 层必须是有一个大的父层，这样才能分配空间，否则无法很好的实现浮动属性的，如果宽度足够，则可以横向排列。 d) 难点2：浮动清除属性意思是清除其他的层浮动对自身的影响。 e) 难点3：填充距离和边界距离 填充距离 内容1 边界距离填充距离 内容2 12. CSS规则详解 边框块本身 a) 可以自定义块级元素四周的边框。 13. CSS规则详解 列表 a) HTML项目符号标签 b) 不仅可以定义字符项目符号，还可以定义图片项目符号。 c) 通过设定标签的浮动，我们可以快速的定义网页上常见导航按钮。 d) 通过设定可以使标签显示为一个固

14、定区块。 14. CSS规则详解 定位 a) 针对层(DIV)标签,设定层的位置和定位模式。 b) 定位类型 i. 绝对:使用X-Y-Z坐标系定位，以非默认定位父级元素为基础定位。 ii. 相对:使用X-Y-Z坐标系定位，相对原来的位置定位。 iii. 静态:无定位关系，默认属性，只受浮动属性影响。 iv. 固定:使用X-Y-Z坐标系定位，只和屏幕边界发生关系。需要浏览器支持，至少版本大于IE7。 c) 定位属性：离边界的距离，和定位类型配合使用。 d) 显示属性：是否显示层元素。 e) Z轴：当使用坐标系定位的时候，Z轴决定层得叠放次序，值小的在下边。 f) 溢出：当层内元素大于层尺寸时，多

15、余尺寸的显示状态。 g) 剪辑：当绝对定位时才生效，决定层内元素的显示范围。 15. CSS规则详解 扩展块内 a) 自定义鼠标指针：首先要有指针文件 *.ani(动态指针)，*.cur(静态指针)，然后使用如下格式： URL(相对路径) b) 滤镜问题请参阅其他课件。 第七节：CSS+DIV实例网页布局 1. 盒子模型 a) 盒子的实际宽度= 2 内容宽度 b) 在IE中CSS中的宽度设置的值 = 内容的宽度 c) 在IE中高度原理等同于宽度。 2. 当间距叠加的说明 a) 对于行内元素，两个元素之间的实际距离等于其两者间距的叠加。 b) 对于产生换行效果的块级元素，其实际距离等于两者之间间

16、距的较大值。(段落;表格;没加浮动的层) 3. CSS+DIV布局的精髓 a) DIV的几种变化如下： 图1：不设置浮动，只设置父层的填充和层1的下边界间距 图2：仅设置层1左浮动 图3：层1和层2均设置为左浮动 图4：当层1的边界距离为负值时 b) 综上所见，总结如下： 1st. 当不设置层的具体尺寸时,层的高度随内容变化,宽度为整个页面宽度,受CSS中填充和边界距离影响。 2nd. 当层浮动起来后，它就等于离开了父层的“怀抱”，那么其下边的层向上填补其位置，父层高度跟着缩小，但层仍然受父层的填充距离影响。 3rd. 当所有层均浮动起来时，它们均向父层的某侧排队移动，可以横向布置，其状态变为

17、行内元素，父层的高度继续缩小。 4th. 当子层的边间距离为负数时，它移动的值为自己的间距的正值减去父层的填充值，所以可以移动到父层的外边。 c) 所以DIV+CSS的最高境界是，不设置层的尺寸，完全靠内容、填充、边界、浮动、清除等属性布局，使网页具备最大的自适应性。但我们实际工作当中一般不使用，我们要配合层的定位属性通过坐标系来布局，当然细节部分的构造也用表格实现。 4. CSS排版理念 a) 我们首先要对页面有一个整体的框架规划，包括整个页面分为哪些模块，各个模块之间的父子关系，等等。以一般的页面为例，页面由Banner、导航、主体内容、侧栏、脚注等几部分组成。详见例子“CSS+DIV标准

18、布局”。 b) 常见页面尺寸 1st. 800*600下，网页宽度保持在778px以内，就不会出现水平滚动条，高度则视版面和内容决定。一整屏的尺寸为778*434px。 2nd. 1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。 3rd. 页面长度原则上不超过3屏，宽度不超过1屏。 第八节：行为 1. 定义 a) 行为就是事件，指当用户触发某设定好的条件后，执行某些操作。行为一般是用javascript代码实现，但DW中自带此功能，可以帮助我们在不懂代码的情况下实现行为。 2. 行为的“埋设” a) 以HTML标签为

19、埋设对象，不同的标签支持不同的行为。 3. 常用触发条件 a) onLoad 当一图像或网页载入完成时产生。 b) onMouseDown 当访问者按下鼠标时产生。 c) onMouseMove 当访问者将鼠标在指定元素上移动时产生。 d) onMouseOut 当鼠标从指定元素上移开时产生。 e) onMouseOver 当鼠标第一次移动到指定元素时产生。 f) onMouseUp 当鼠标弹起时产生。 g) onClick 当访问者在指定的元素上单击时产生。 h) onDblClick 当访问者在指定的元素上双击时产生。onKeyDown 当按下任意键的同时产生。 i) onKeyPress 当按下和松开任意键时产生。此事件相当于把onKeyDown和onKeyUp这两事件合在一起。 j) onKeyUp 当按下的键松开时产生。 k) onKeyDown 当按下任意键的同时产生。 4. 常用事件演示 a) 交换图像 b) 弹出信息 c) 打开浏览器窗口 d) 改变属性 e) 效果 f) 显示/隐藏元素 g) 转到URL h) 设置状态栏文本 i) 检查表单