dw基础教程.docx

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