dw学习基础教育材料.doc

《dw学习基础教育材料.doc》由会员分享，可在线阅读，更多相关《dw学习基础教育材料.doc（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、-+Dreamweaver目录第一节：DW软件介绍1第二节：学习Dreamweaver的作用和应用方向2第三节：认识DW的界面2第四节：站点的建立和编辑3第五节：常用插入3第六节：CSS样式51.作用52.CSS样式的应用对象53.CSS样式的分类54.如何将样式表加入网页？65.实验后总结优先级76.CSS规则简单说明77.块元素（block）的定义88.CSS规则详解 类型块内字的规则89.CSS规则详解 背景块本身810.CSS规则详解 区块块内元素的对齐和排版811.CSS规则详解 方框块本身 块内 块间912.CSS规则详解 边框块本身1013.CSS规则详解 列表1014.CSS规

2、则详解 定位1015.CSS规则详解 扩展块内11第七节：CSS+DIV实例网页布局111.盒子模型122.当间距（边界距离）叠加的说明123.CSS+DIV布局的精髓134.CSS排版理念14第八节：行为151.定义152.行为的“埋设”153.常用触发条件154.常用事件演示16-+第一节：DW软件介绍Dream Weaver是一款网页排版软件，可以方便的进行网页布局。是由ADOBE公司生产的，ADODB公司有多款针对电脑设计的软件，如：第二节：学习Dreamweaver的作用和应用方向主要作用：快捷的网页排版布局。智能化网页辅助设计。应用方向：网站的制作和测试。第三节：认识DW的界面1.

3、 常用面板、属性栏2. 工作区模式切换开关a) 代码 HTML编码方式b) 设计 最终显示的结果（所见即所得）c) 拆分 以上两者皆有3. 标签选择器a) 可以显示HTML标签的层次关系。b) 可以快速选择并编辑HTML标签。4. 预览按钮a) 可以在IE中测试最终结果，快捷键（F12）第四节：站点的建立和编辑1. DW中不能直接创建网页，那样得到的路径会是绝对路径。我们必须首先要创建站点，并在站点管理器中，创建和管理HTML网页。2. 它的好处：a) 自动使用相对路径。b) 所有网页文件都存在一个固定文件夹下，便于管理。c) 通过DW的文件管理面板可以直观看到网站中各个文件的状态。第五节：常

4、用插入1. 超级链接通过给文字或者图片增加一个“点击出口”，当它们被点击后即可以跳转到指定的位置。我们可以设置其打开属性，_blank 新窗口打开 _self 当前窗口。2. 邮件链接格式： mailto:E-MAIL地址3. 锚点通过在当前页面内设置标记，可以在当前页面内超链接进行跳转。格式： #锚点名4. 表格a) 行、列、表格的宽度。b) 边框粗细，如果为0，则表格为边线隐藏。c) 单元格边距（填充）：指单元格内元素到单元格边的距离。d) 单元格间距：指两个单元格之间的距离。e) 表格的属性均是通过属性面板来调整的，我们可以任意调整某一行或列或者单元格的属性。f) 表格元素的选择我们选择

5、表格元素（表格、行、单元格），需使用标签选择器来选择，table（表格本身），td(单元格)，tr(行)。g) 表格是可以嵌套的，即一个单元格里还可以插入新表格。h) 表格一般只能竖排不能横排。5. 图片、图片占位符、鼠标经过图像a) 图片：一般只设置宽高b) 图片带超级链接中替换的意思是当鼠标指上以后的文字提示或当图片不显示时的文字提示。6. 图片热点可以给一张图片的不同位置，增加不同的超级链接。7. FLASH必须是 *.swf 格式文件第六节：CSS样式1. 作用a) 层叠样式表，用来规范网页中元素的显示样式，使之在任何浏览器下都显示一样的结果，并不随浏览器的设置而改变。2. CSS样式

6、的应用对象a) 只能应用于HTML标签。3. CSS样式的分类a) 类样式：可以定义一组样式规则，并将它应用于不同的标签。i. 定义时以点开头ii. 不能和HTML标签名字重复iii. 不能是中文和纯数字，可以是字母加数字。b) 标签样式：规定某一个HTML标签的样式规则，重定义HTML标签。i. 不需要命名，只需要在下拉菜单中直接选择要改变的标签。c) 总结：类样式定义好后，要赋于标签才能生效，并且不影响其主要功能。而标签样式定义好后，直接生效，并且将整个页面所有此类标签都即时改变。d) 高级样式：i. ID选择器：对拥有ID的HTML标签进行规则设定。 以#号开头 #目标ID 基本属性和类

7、样式相似，操作不同，它需要先给HTML标签设定一个ID,格式是 id=名字 多用于DIV（层）标签ii. 包含选择器 对于特定的HTML标签组合规定其样式，例如：b i，单独的b和单独的i均不受影响。iii. 选择器组 当有一组HTML标签有统一的规则，我们可以将它们规定在一起，以节省代码输入。格式是：名1，名2，名3iv. 伪类选择器 控制超级链接的动态样式，即可以通过它来设定具有动态效果的超级链接外观。 a:link 平常的样子 a:visited 访问过的样子 a:hover 当鼠标滑上的样子 a:active 当点击时的样子（无用处） 如果希望定义多组不同的链接样式，我们可以用以下方法

8、： a.名字:link (一组的名字必须一致)4. 如何将样式表加入网页？a) 行内式：通过style属性直接定义在HTML标签属性内，当有多个CSS属性时用分号分隔，要求大家具备很高的CSS代码水平。b) 内嵌式：在当前页面head内生成一段CSS代码，只对当前页面生效。c) 链接式：将CSS样式单独放于一个文件内,通过包含页面的形式，链接入本页面。可以链接到不同的页面，可以减少代码的输入量。5. 实验后总结优先级a) 而最接近目标的样式定义优先权越高，高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。b) ID选择器类样式标签样式6. CSS规则简单说明a) 类型用来定义块元素内

9、文字属性。b) 背景用来定义块元素的背景属性。c) 区块一个块元素内的排列属性。d) 方块一个块元素本身的属性。e) 边框给一个块元素加边框。f) 列表定义有序号排列和无序号排列标签，可以用自定义图片替换项目符号g) 定位层（DIV）属性的设定h) 扩展实现鼠标指针控制和CSS滤镜7. 块元素（block）的定义a) 块元素(block)可以理解为在DW中呈矩形的区域，均可认为是块。b) 块具有容器性，我们可以把块容器元素想象成一个个box，比如剪贴文载，我们先把需要的文章从各种报纸、杂志上剪下来。每块剪下来的内容就是一个 block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空

10、白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。c) 作为块元素，它一般具有块内、块间、块本身三个属性。d) 一般来说所有的HTML标签均可以看成块。8. CSS规则详解 类型块内字的规则a) 难点1：字体行高的理解。b) 难点2：一般网页的字体大小（9pt 12pt）。c) 难点3：字体样式的赋予。i. 不要直接将样式加给字，而要加给字所在块的块标签。ii. 要先定义规则，再进行赋予。9. CSS规则详解 背景块本身a) 定义背景色和背景图片。b) 默认为X,Y方向平铺，可以单独设置是否重复。c) 在不完全重复的情况下，可以设定背景在块中的

11、位置。d) 附件属性的意思？10. CSS规则详解 区块块内元素的对齐和排版a) 重点1：掌握字母间距的设定。b) 重点2：文本对齐指的是块的水平对齐方式。c) 重点3：垂直对齐属性对段落和层均不生效，只对表格和图文管用。d) 重点4：显示属性意思是块以什么方式显示，我们只需知道无和块的意思即可。11. CSS规则详解 方框块本身 块内 块间a) 如果只定义宽和高一个属性得到的就是等比例变化或弹性变化。b) 难点1：浮动属性的意思是块的环绕方式，类似于WORD中的图文混排。对于块容器如DIV，则是如设置浮动，则块一侧空间会被横向充填，如果下面的块填补不进，则自动向下浮动。c) DIV标签，又叫

12、层标签，它就代表一个块容器，除了名字（ID），没有其他属性，它的属性全靠CSS来设定。它使用高级样式中的ID样式来设定规则。 #层ID “ID唯一”i. DIV层在默认情况下，只能竖排，不能横排。ii. CSS中浮动属性，可以让DIV层横排，解释是从哪边开始横向排列。iii. 层必须是有一个大的父层，这样才能分配空间，否则无法很好的实现浮动属性的，如果宽度足够，则可以横向排列。d) 难点2：浮动清除属性意思是清除其他的层浮动对自身的影响。内容1填充距离内容2填充距离边界距离e) 难点3：填充距离和边界距离12. CSS规则详解 边框块本身a) 可以自定义块级元素四周的边框。13. CSS规则详

13、解 列表a) HTML项目符号标签 b) 不仅可以定义字符项目符号，还可以定义图片项目符号。c) 通过设定标签的浮动，我们可以快速的定义网页上常见导航按钮。d) 通过设定【区块显示块】可以使标签显示为一个固定区块。14. CSS规则详解 定位a) 针对层(DIV)标签,设定层的位置和定位模式。b) 定位类型i. 绝对:使用X-Y-Z坐标系定位，以非默认定位父级元素为基础定位。ii. 相对:使用X-Y-Z坐标系定位，相对原来的位置定位。iii. 静态:无定位关系，默认属性，只受浮动属性影响。iv. 固定:使用X-Y-Z坐标系定位，只和屏幕边界发生关系。需要浏览器支持，至少版本大于IE7。c) 定

14、位属性：离边界的距离，和定位类型配合使用。d) 显示属性：是否显示层元素。e) Z轴：当使用坐标系定位的时候，Z轴决定层得叠放次序，值小的在下边。f) 溢出：当层内元素大于层尺寸时，多余尺寸的显示状态。g) 剪辑：当绝对定位时才生效，决定层内元素的显示范围。15. CSS规则详解 扩展块内a) 自定义鼠标指针：首先要有指针文件 *.ani(动态指针)，*.cur(静态指针)，然后使用如下格式： URL(相对路径)b) 滤镜问题请参阅其他课件。第七节：CSS+DIV实例网页布局1. 盒子模型a) 盒子的实际宽度=（间距边框填充） 2 内容宽度b) 在IE中CSS中的宽度设置的值 = 内容的宽度c

15、) 在IE中高度原理等同于宽度。2. 当间距（边界距离）叠加的说明a) 对于行内元素（不产生换行效果，可以横向布置），两个元素之间的实际距离等于其两者间距的叠加。b) 对于产生换行效果的块级元素，其实际距离等于两者之间间距的较大值。(段落;表格;没加浮动的层)3. CSS+DIV布局的精髓图1：不设置浮动，只设置父层的填充和层1的下边界间距a) DIV的几种变化如下：图3：层1和层2均设置为左浮动图2：仅设置层1左浮动图4：当层1的边界距离为负值时b) 综上所见，总结如下：1st. 当不设置层的具体尺寸时,层的高度随内容变化,宽度为整个页面宽度,受CSS中填充和边界距离影响。2nd. 当层浮动

16、起来后，它就等于离开了父层的“怀抱”，那么其下边的层向上填补其位置，父层高度跟着缩小，但层仍然受父层的填充距离影响。3rd. 当所有层均浮动起来时，它们均向父层的某侧排队移动，可以横向布置，其状态变为行内元素，父层的高度继续缩小。4th. 当子层的边间距离为负数时，它移动的值为自己的间距的正值减去父层的填充值，所以可以移动到父层的外边。c) 所以DIV+CSS的最高境界是，不设置层的尺寸，完全靠内容、填充、边界、浮动、清除等属性布局，使网页具备最大的自适应性。但我们实际工作当中一般不使用，我们要配合层的定位属性（绝对、相对、固定）通过坐标系来布局，当然细节部分的构造也用表格实现。4. CSS排

17、版理念a) 我们首先要对页面有一个整体的框架规划，包括整个页面分为哪些模块，各个模块之间的父子关系，等等。以一般的页面为例，页面由Banner、导航、主体内容、侧栏、脚注等几部分组成。详见例子“CSS+DIV标准布局”。b) 常见页面尺寸1st. 800*600下，网页宽度保持在778px以内，就不会出现水平滚动条，高度则视版面和内容决定。一整屏的尺寸为778*434px。2nd. 1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。3rd. 页面长度原则上不超过3屏，宽度不超过1屏。第八节：行为1. 定义a) 行为就是

18、事件，指当用户触发某设定好的条件后，执行某些操作。行为一般是用javascript代码实现，但DW中自带此功能，可以帮助我们在不懂代码的情况下实现行为。2. 行为的“埋设”a) 以HTML标签为埋设对象，不同的标签支持不同的行为。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) 转到URLh) 设置状态栏文本i) 检查表单