dw基础教程.docx

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

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

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

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

5、择要改变的标签。c)总结：类样式定义好后，要赋于标签才能生效，并且不影响其主要功能。而标签样式定义好后，直接生效，并且将整个页面所有此类标签都即时改变。d)高级样式：i.ID选择器：对拥有ID的HTML标签进行规则设定。以#号开头 #目标ID基本属性和类样式相似，操作不同，它需要先给HTML标签设定一个ID,格式是 id=名字多用于DIV（层）标签ii.包含选择器对于特定的HTML标签组合规定其样式，例如：b i，单独的b和单独的i均不受影响。iii.选择器组当有一组HTML标签有统一的规则，我们可以将它们规定在一起，以节省代码输入。格式是： 名1，名2，名3iv.伪类选择器控制超级链接的动态

6、样式，即可以通过它来设定具有动态效果的超级链接外观。a:link 平常的样子a:visited 访问过的样子a:hover 当鼠标滑上的样子a:active 当点击时的样子（无用处）如果希望定义多组不同的链接样式，我们可以用以下方法： a.名字:link (一组的名字必须一致)4.如何将样式表加入网页？a)行内式：通过style属性直接定义在HTML标签属性内，当有多个CSS属性时用分号分隔，要求大家具备很高的CSS代码水平。b)内嵌式：在当前页面head内生成一段CSS代码，只对当前页面生效。c)链接式：将CSS样式单独放于一个文件内,通过包含页面的形式，链接入本页面。可以链接到不同的页面，

7、可以减少代码的输入量。5.实验后总结优先级a)而最接近目标的样式定义优先权越高，高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。b)ID选择器类样式标签样式6.CSS规则简单说明a)类型 用来定义块元素内文字属性。b)背景 用来定义块元素的背景属性。c)区块 一个块元素内的排列属性。d)方块 一个块元素本身的属性。e)边框 给一个块元素加边框。f)列表定义有序号排列和无序号排列标签，可以用自定义图片替换项目符号g)定位 层（DIV）属性的设定h)扩展 实现鼠标指针控制和CSS滤镜7.块元素（block）的定义a)块元素(block)可以理解为在DW中呈矩形的区域，均可认为是块。b)

8、块具有容器性，我们可以把块容器元素想象成一个个box，比如剪贴文载，我们先把需要的文章从各种报纸、杂志上剪下来。每块剪下来的内容就是一个 block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。c)作为块元素，它一般具有块内、块间、块本身三个属性。d)一般来说所有的HTML标签均可以看成块。8.CSS规则详解 类型块内字的规则a)难点1：字体行高的理解。b)难点2：一般网页的字体大小（9pt 12pt）。c)难点3：字体样式的赋予。i.不要直接将样式加给字，而要加给字所在块的块标签

9、。ii.要先定义规则，再进行赋予。9.CSS规则详解 背景块本身a)定义背景色和背景图片。b)默认为X,Y方向平铺，可以单独设置是否重复。c)在不完全重复的情况下，可以设定背景在块中的位置。d)附件属性的意思？10.CSS规则详解 区块块内元素的对齐和排版a)重点1：掌握字母间距的设定。b)重点2：文本对齐指的是块的水平对齐方式。c)重点3：垂直对齐属性对段落和层均不生效，只对表格和图文管用。d)重点4：显示属性意思是块以什么方式显示，我们只需知道无和块的意思即可。11.CSS规则详解 方框块本身 块内 块间a)如果只定义宽和高一个属性得到的就是等比例变化或弹性变化。b)难点1：浮动属性的意思

10、是块的环绕方式，类似于WORD中的图文混排。对于块容器如DIV，则是如设置浮动，则块一侧空间会被横向充填，如果下面的块填补不进，则自动向下浮动。c)DIV标签，又叫层标签，它就代表一个块容器，除了名字（ID），没有其他属性，它的属性全靠CSS来设定。它使用高级样式中的ID样式来设定规则。 #层ID “ID唯一”i.DIV层在默认情况下，只能竖排，不能横排。ii.CSS中浮动属性，可以让DIV层横排，解释是从哪边开始横向排列。iii.层必须是有一个大的父层，这样才能分配空间，否则无法很好的实现浮动属性的，如果宽度足够，则可以横向排列。d)难点2：浮动清除属性意思是清除其他的层浮动对自身的影响。e

11、)难点3：填充距离和边界距离12.CSS规则详解 边框块本身a)可以自定义块级元素四周的边框。13.CSS规则详解 列表a)HTML项目符号标签 b)不仅可以定义字符项目符号，还可以定义图片项目符号。c)通过设定标签的浮动，我们可以快速的定义网页上常见导航按钮。d)通过设定【区块显示块】可以使标签显示为一个固定区块。14.CSS规则详解 定位a)针对层(DIV)标签,设定层的位置和定位模式。b)定位类型i.绝对:使用X-Y-Z坐标系定位，以非默认定位父级元素为基础定位。ii.相对:使用X-Y-Z坐标系定位，相对原来的位置定位。iii.静态:无定位关系，默认属性，只受浮动属性影响。iv.固定:使

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

13、） 2 内容宽度b)在IE中CSS中的宽度设置的值 = 内容的宽度c)在IE中高度原理等同于宽度。2.当间距（边界距离）叠加的说明a)对于行内元素（不产生换行效果，可以横向布置），两个元素之间的实际距离等于其两者间距的叠加。b)对于产生换行效果的块级元素，其实际距离等于两者之间间距的较大值。(段落;表格;没加浮动的层)3.CSS+DIV布局的精髓a)DIV的几种变化如下：b)综上所见，总结如下：1.当不设置层的具体尺寸时,层的高度随内容变化,宽度为整个页面宽度,受CSS中填充和边界距离影响。2.当层浮动起来后，它就等于离开了父层的“怀抱”，那么其下边的层向上填补其位置，父层高度跟着缩小，但层仍

14、然受父层的填充距离影响。3.当所有层均浮动起来时，它们均向父层的某侧排队移动，可以横向布置，其状态变为行内元素，父层的高度继续缩小。4.当子层的边间距离为负数时，它移动的值为自己的间距的正值减去父层的填充值，所以可以移动到父层的外边。c)所以DIV+CSS的最高境界是，不设置层的尺寸，完全靠内容、填充、边界、浮动、清除等属性布局，使网页具备最大的自适应性。但我们实际工作当中一般不使用，我们要配合层的定位属性（绝对、相对、固定）通过坐标系来布局，当然细节部分的构造也用表格实现。4.CSS排版理念a)我们首先要对页面有一个整体的框架规划，包括整个页面分为哪些模块，各个模块之间的父子关系，等等。以一

15、般的页面为例，页面由Banner、导航、主体内容、侧栏、脚注等几部分组成。详见例子“CSS+DIV标准布局”。b)常见页面尺寸1.800*600下，网页宽度保持在778px以内，就不会出现水平滚动条，高度则视版面和内容决定。一整屏的尺寸为778*434px。2.1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。3.页面长度原则上不超过3屏，宽度不超过1屏。第八节：行为1.定义a)行为就是事件，指当用户触发某设定好的条件后，执行某些操作。行为一般是用javascript代码实现，但DW中自带此功能，可以帮助我们在不懂代码

16、的情况下实现行为。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)检查表单