网页设计网页编辑和超级链接(css).ppt

《网页设计网页编辑和超级链接(css).ppt》由会员分享，可在线阅读，更多相关《网页设计网页编辑和超级链接(css).ppt（56页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第三章 网页编辑（样式表）和超级链接 统一网站风格、制作基本特效统一网站风格、制作基本特效CSSCSS样式表样式表样式表样式表2 2主要内容主要内容一、样式表一、样式表(CSS)的基本概念的基本概念二、二、CSS与与HTML文档的结合方法文档的结合方法三、三、CSS属性的理解与应用属性的理解与应用四、四、CSS样式的单位样式的单位五、五、CSS样式在网页中的应用样式在网页中的应用六、插入文本六、插入文本七、插入对象七、插入对象八、超级链接八、超级链接1 关于层叠样式表关于层叠样式表通常情况下我们希望将页面显示内容与显示方式分开，通常情况下我们希望将页面显示内容与显示方式分开，使得内容编辑人员的

2、工作重心放在网站内容的撰写上，使得内容编辑人员的工作重心放在网站内容的撰写上，而站点的美工和界面设计人员的工作重心放在页面显而站点的美工和界面设计人员的工作重心放在页面显示的风格和样式上。示的风格和样式上。样式是预先定义好的、格式化文档的工具。样式是预先定义好的、格式化文档的工具。CSS全称全称Cascading Styles Sheet，译为层叠叠样式表，是由式表，是由W3C（World Wide Web Consortium）组织所所拟定定的。的。一、一、CSSCSS的基本概念的基本概念1 关于层叠样式表关于层叠样式表(续续)CSS（Cascading Style Sheets）是开放性样

3、式设定语句，）是开放性样式设定语句，它扩充了它扩充了HTML标记的属性设定，这些属性设定可以通过脚本标记的属性设定，这些属性设定可以通过脚本语言进行控制，使网页的视觉效果更加丰富多彩。语言进行控制，使网页的视觉效果更加丰富多彩。CSS将页面的样式与显示内容的文档分开，可以高效、统一地将页面的样式与显示内容的文档分开，可以高效、统一地组织页面元素。对于具有相同风格多个页面的站点来说，只需组织页面元素。对于具有相同风格多个页面的站点来说，只需要建立定义样式的要建立定义样式的CSS文件，并使需要使用这些样式的文档调文件，并使需要使用这些样式的文档调用相应的样式文件即可。当网站的风格需要更新时，只要更

4、改用相应的样式文件即可。当网站的风格需要更新时，只要更改CSS样式文件即可样式文件即可。CSS技术的应用使得网站的开发、管理和维护大为简化，提高技术的应用使得网站的开发、管理和维护大为简化，提高了开发效率。了开发效率。一、一、CSSCSS的基本概念的基本概念（1）样式表的版本：样式表的版本：1996年，年，W3C推出推出CSS1。1998年中期，年中期，W3C公布公布CSS2。目前，目前，W3C正在开发正在开发CSS3。IE6与与NS7已经实现了已经实现了CSS1中的绝大部分特性，但并没有实中的绝大部分特性，但并没有实现全部特性；现全部特性；IE8的最新版本支持的最新版本支持CSS2。本章介绍

5、的属性可以被至少其中一种浏览器所支持本章介绍的属性可以被至少其中一种浏览器所支持（2）样式表的层次：样式表的层次：样式表称为层叠样式表是因为它们可以以三层的形式定义，以样式表称为层叠样式表是因为它们可以以三层的形式定义，以此指定文档的样式；较低层的样式表能够覆盖较高层的样式表。此指定文档的样式；较低层的样式表能够覆盖较高层的样式表。CSS的三个层次，按照从底层到高层的顺序，分别为的三个层次，按照从底层到高层的顺序，分别为行内样式行内样式表表、文档层样式表文档层样式表和和外部样式表外部样式表，其中行内样式表只能作用于，其中行内样式表只能作用于单个标签的内容；文档层样式表则能够对文档的整个主体起作

6、单个标签的内容；文档层样式表则能够对文档的整个主体起作用，而外部样式表可以应用到任意数目文档的主体中。用，而外部样式表可以应用到任意数目文档的主体中。如果浏览器无法满足样式表指定的属性，则浏览器或者采用另如果浏览器无法满足样式表指定的属性，则浏览器或者采用另一个值代替此值或者忽略这个给定值。一个值代替此值或者忽略这个给定值。CSSCSS样式表样式表样式表样式表7 7一、一、CSSCSS的基本概念的基本概念2、编写、编写CSS样式的方法样式的方法使用使用CSS编辑器编辑器如如Dreamweaver、Frontpage等都会自带等都会自带CSS编辑器。编辑器。使用超文本编辑器使用超文本编辑器如如D

7、reamweaver、Frontpage等超文本编辑器均可编等超文本编辑器均可编辑样式表；辑样式表；记事本记事本CSSCSS样式表样式表样式表样式表8 8一、一、CSSCSS的基本概念的基本概念3、基本语法、基本语法选择符选择符属性属性:值值选择符选择符属性属性1:值值1;属性属性2:值值2;单一选择符的复合单一选择符的复合样式声明应该用样式声明应该用“;”隔开，为便隔开，为便于阅读也可以于阅读也可以分行分行写写。几乎所有的几乎所有的HTML标记符形式都可以标记符形式都可以作为选择符。作为选择符。CSS例子例子H1 font-size:x-large;color:redH2 font-size

8、:large;color:blueH1 font-size:x-large;color:redH2 font-size:large;color:blueCSSCSS样式表样式表样式表样式表9 9一、一、CSSCSS的基本概念的基本概念4、CSS样式的组合、继承和关联性样式的组合、继承和关联性u样式的组合：把具有样式的组合：把具有相同声明定义的选择符相同声明定义的选择符组合在一组合在一起，并用逗号隔开。起，并用逗号隔开。例如：例如：段落元素段落元素p、单元格元素、单元格元素td和类和类c1可以使用可以使用相同样式：相同样式：p,td,.c1font-size:12pt;font-family:黑

9、体黑体;color:redCSSCSS样式表样式表样式表样式表1010一、一、CSSCSS的基本概念的基本概念样式的继承：若子元素未定义，则它将继承上级元素的样式的继承：若子元素未定义，则它将继承上级元素的样式的定义。但存在少数属性不能继承（样式的定义。但存在少数属性不能继承（border）。）。CSS例子例子CSSCSS样式表样式表样式表样式表1111一、一、CSSCSS的基本概念的基本概念样式表的样式表的关联性关联性：样式表的关联性指在某些样式定义中，可以定义某样式表的关联性指在某些样式定义中，可以定义某样式仅样式仅在某个特定元素范围内在某个特定元素范围内才有效。才有效。例如：例如：p b

10、font-size:12pt;font-family:黑体黑体;color:redb元素仅在元素仅在p元素作用范元素作用范围内会套用上述的样式围内会套用上述的样式设定。设定。而在其他地方而在其他地方不具有这些属性。不具有这些属性。CSSCSS样式表样式表样式表样式表1212一、一、CSSCSS的基本概念的基本概念5、注释、注释 CSS文字的注释形式与文字的注释形式与C语言类似。语言类似。pfont-size:12pt /*P标签的样式定义标签的样式定义*/CSSCSS样式表样式表样式表样式表1313一、一、CSSCSS的基本概念的基本概念6、选择符、选择符 样式表的基本语法形式：样式表的基本语

11、法形式：selectorproperty1:value1;property2:value2;需要应用的需要应用的样式的内容样式的内容样式的属性样式的属性样式的属性样式的属性的值的值Select的五种合法的类别：的五种合法的类别：HTML标记符标记符、用户定义的类用户定义的类Class、用户定义的用户定义的ID、虚类虚类和和虚元素虚元素CSSCSS样式表样式表样式表样式表1414选择符的类别选择符的类别HTML标记符标记符应用比较多，注意继承性、组合性和关联性的应用。应用比较多，注意继承性、组合性和关联性的应用。用户定义的类选择符用户定义的类选择符可以使用任何名称命名类。可以使用任何名称命名类。

12、里所有的元素都可以定义里所有的元素都可以定义“类类”。语法如下：语法如下：selector.classnameproperty1:value1;property2:value2;.classnameproperty1:value1;property2:value2;例例5-5.htm5-5.htm1、两种定义形式的区两种定义形式的区别？别？2、在标签中使用类选择、在标签中使用类选择符样式的使用方式如何符样式的使用方式如何？CSSCSS样式表样式表样式表样式表1515选择符的类别选择符的类别ID选择符选择符应用的形式基本与类选择符类似，定义时用应用的形式基本与类选择符类似，定义时用“#”替代替代

13、”.”。因此应用时一般选取其中的一种。因此应用时一般选取其中的一种。虚类和虚元素虚类和虚元素在在html的页面元素中没有这种属性，故称其为虚类，仅的页面元素中没有这种属性，故称其为虚类，仅在在IE5.0以上的浏览器版本才支持虚类选择符。以上的浏览器版本才支持虚类选择符。语法如下：语法如下：页面元素名：元素虚属性名页面元素名：元素虚属性名样式表内容样式表内容CSSCSS样式表样式表样式表样式表1616a:link color:#000000a:visited color:#cccccca:hover color:#000000;font-style:italica:active color:#a

14、aaaaa:link color:#000000:visited color:#cccccc:hover color:#000000;font-style:italic:active color:#aaaaaaCSSCSS样式表样式表样式表样式表1717二、二、CSSCSS与与HTMLHTML文档的结合方法文档的结合方法HTML与样式表有多种结合方法与样式表有多种结合方法内联样式内联样式：在：在标记符内定义标记符内定义外联样式外联样式使用使用标记符链接到外部的样式文件标记符链接到外部的样式文件使用使用CSS的的import标记符来导入样式文件标记符来导入样式文件在在HTML标签中直接加入样式表

15、的定义标签中直接加入样式表的定义。CSSCSS样式表样式表样式表样式表1818二、二、CSSCSS与与HTMLHTML文档的结合方法文档的结合方法内联样式：在内联样式：在标记符内定义，在本网页内起作标记符内定义，在本网页内起作用。用。CSSCSS样式表样式表样式表样式表1919二、二、CSSCSS与与HTMLHTML文档的结合方法文档的结合方法外联样式：外联样式：使用使用标记符标记符链接到外部的样式文件，链接到外部的样式文件，凡链接的网页都起作用凡链接的网页都起作用1、定义外部样式文件，用记事本或者、定义外部样式文件，用记事本或者Dreamweaver，编辑完后文件扩展名应为，编辑完后文件扩展

16、名应为”.css”；2、建立、建立HTML网页文档；网页文档；3、在网页文档中使用、在网页文档中使用标签将前面的样式表文标签将前面的样式表文档链接到网页中。档链接到网页中。hr.css例例5-7.htm5-7.htmCSSCSS样式表样式表样式表样式表2020二、二、CSSCSS与与HTMLHTML文档的结合方法文档的结合方法外联样式：外联样式：使用使用import导入导入外部的样式文件，凡在外部的样式文件，凡在导入该样式表的网页都起作用导入该样式表的网页都起作用1、定义外部样式文件，用记事本或者、定义外部样式文件，用记事本或者Dreamweaver，编辑完后文件扩展名应为，编辑完后文件扩展名

17、应为”.css”；2、建立、建立HTML网页文档；网页文档；3、在网页文档中、在网页文档中import导入导入前面的样式表。前面的样式表。hr.css例例5-8.htm5-8.htmLinkLink与与importimport的区别的区别差别差别1：老祖宗的差别。：老祖宗的差别。link属于属于XHTML标签，而标签，而import完全是完全是CSS提供的一种方式。提供的一种方式。差别差别2：加载顺序的差别。当一个页面被加载的时候：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），（就是被浏览者浏览的时候），link引用的引用的CSS会同时会同时被加载，而被加载，而import

18、引用的引用的CSS 会等到页面全部被下会等到页面全部被下载完再被加载。载完再被加载。差别差别3：兼容性的差别。由于：兼容性的差别。由于import是是CSS2.1提出提出的所以老的浏览器不支持，的所以老的浏览器不支持，import只有在只有在IE5以上的以上的才能识别，而才能识别，而link标签无此问题。标签无此问题。差别差别4：使用：使用dom控制样式时的差别。当使用控制样式时的差别。当使用javascript控制控制dom去改变样式的时候，只能使用去改变样式的时候，只能使用link标签，因为标签，因为import不是不是dom可以控制的。可以控制的。CSSCSS样式表样式表样式表样式表22

19、22二、二、CSSCSS与与HTMLHTML文档的结合方法文档的结合方法在在HTML标签中直接加入样式表的定义标签中直接加入样式表的定义若在个别标签需要作样式调整，可使用这种方式。若在个别标签需要作样式调整，可使用这种方式。使用标签的使用标签的“Style”属性来定义样式。属性来定义样式。被定义的样式文本在此处。被定义的样式文本在此处。CSSCSS样式表样式表样式表样式表2323三、三、CSSCSS属性的理解与应用属性的理解与应用样式表的样式表的5类常用属性：类常用属性：字体属性字体属性：字体、字号、行距等。：字体、字号、行距等。颜色及背景属性颜色及背景属性：背景颜色、背景图片等。：背景颜色、

20、背景图片等。文本属性：文本属性：区块属性区块属性：边框粗细等。：边框粗细等。分级属性分级属性：各组件的字距、行距、缩排等。：各组件的字距、行距、缩排等。鼠标属性鼠标属性：鼠标形状等。：鼠标形状等。详见帮助文件详见帮助文件CSSCSS属性属性CSSCSS样式表样式表样式表样式表2424字体属性字体属性Font-family:指定文字的字体指定文字的字体H1font-family:华文彩云华文彩云Font-style：指定文字是否加粗或使用斜体。取值：指定文字是否加粗或使用斜体。取值：normal（正常）、（正常）、oblique（偏斜体）、（偏斜体）、italic（斜体）（斜体）Font-siz

21、e：指定文字的大小。：指定文字的大小。Font：上述样式属性的综合表示法。：上述样式属性的综合表示法。Pfont:bold 16ptCSSCSS样式表样式表样式表样式表2525颜色及背景属性颜色及背景属性Color:颜色颜色Background-color：指定背景颜色：指定背景颜色H1background-color:#000800Background-image：指定：指定Html组件的背景图片，值组件的背景图片，值为为url或或none。Bodybackground-image:url(image1.jpg)CSSCSS样式表样式表样式表样式表2626文本属性文本属性Text-decor

22、ation：设置底线、顶线、闪烁等文字效果。：设置底线、顶线、闪烁等文字效果。值为值为none,underline,overline,line-through,blink.Text-align：指定文字的对齐方式。值为：指定文字的对齐方式。值为：left,right,center,justifyCSSCSS样式表样式表样式表样式表2727区块属性区块属性定义边界，取值为：长度定义边界，取值为：长度|百分比百分比|auto上边界：上边界：margin-top；下边界：；下边界：margin-bottom左边界：左边界：margin-left：右边界：右边界：margin-rightP.narro

23、w margin-right:50%定义边框：定义边框：Border-colorBorder-widthBorder-styleCSSCSS样式表样式表样式表样式表2828分级属性分级属性List-style-type：指定项目符号或编号：指定项目符号或编号允许值：允许值：disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none List-style-image：指定项目符号的图形文件名称，：指定项目符号的图形文件名称，值为值为url或或noneLI.square list-style-typ

24、e:square UL.plain list-style-type:none OL list-style-type:upper-alpha /*A B C D E etc.*/OL OL list-style-type:decimal /*1 2 3 4 5 etc.*/OL OL OL list-style-type:lower-roman /*i ii iii iv v etc.*/CSSCSS样式表样式表样式表样式表2929鼠标属性鼠标属性让鼠标移到不同对象上面，显示不同形状。让鼠标移到不同对象上面，显示不同形状。Cursor属性，取值如下属性，取值如下Auto：自动按默认显示：自动按默

25、认显示Crosshair：“”Hand:手形手形Text：文本：文本I形形Wait：等待：等待CSSCSS样式表样式表样式表样式表3030练习：练习：1、若要在网页上使用使用统一的页面风格：、若要在网页上使用使用统一的页面风格：背景背景为浅蓝灰色（为浅蓝灰色（#cdcdfe），），文本文本为深蓝色（为深蓝色（#000066），），所有所有网页都不留边网页都不留边(Margin)，且且列表列表项目、项目、表格表格及及段落段落文本中的字体均为文本中的字体均为10.5pt；颜色颜色：绿色；：绿色；文本对齐文本对齐：居中；：居中；字体字体：楷体：楷体,Times New Roman；文字格式文字格式：

26、加粗。：加粗。CSSCSS样式表样式表样式表样式表3131练习：练习：2、编辑一个外联样式表，它使所有网页中表格的文本、编辑一个外联样式表，它使所有网页中表格的文本显示为如下风格：显示为如下风格：文字大小：文字大小：10.5pt;颜色：绿色；颜色：绿色；文本对齐：居中；文本对齐：居中；字体：楷体字体：楷体文字格式：加下划线文字格式：加下划线CSSCSS样式表样式表样式表样式表3232练习：练习：3、在上题中，若有一个网页中的某个表格要采取不同、在上题中，若有一个网页中的某个表格要采取不同的显示方式：如的显示方式：如颜色：蓝色；颜色：蓝色；字体：黑体字体：黑体,Arial Black其他与上题相

27、同，应在该页上使用什么样式表？其他与上题相同，应在该页上使用什么样式表？CSSCSS样式表样式表样式表样式表3333练习：练习：4、定义一个类选择符，样式为：、定义一个类选择符，样式为：文字大小：文字大小：12pt;颜色：绿色；颜色：绿色；文本对齐：居中；文本对齐：居中；字体：楷体，字体：楷体，Times New Roman文字格式：加粗文字格式：加粗并在多个页面元素中引用此类样式。并在多个页面元素中引用此类样式。CSSCSS样式表样式表样式表样式表3434练习：练习：5、定义一个伪类选择符，使超链接具有一下特效：、定义一个伪类选择符，使超链接具有一下特效：（1）超链接没有下划线；）超链接没有

28、下划线；（2）当鼠标指向超链接时，文字从）当鼠标指向超链接时，文字从10pt变成变成12pt，文字加粗；，文字加粗；（3）超链接文本在单击前是蓝色，在单击后是灰）超链接文本在单击前是蓝色，在单击后是灰色，并变成斜体。色，并变成斜体。CSSCSS样式表样式表样式表样式表3535课堂练习：课堂练习：定义一个内联样式，使网页中的所有段落显示效果如定义一个内联样式，使网页中的所有段落显示效果如下：下：字的大小：字的大小：12px字的颜色：字的颜色：0000ff对齐方式为居中对齐方式为居中背景颜色：背景颜色：grayCSSCSS样式表样式表样式表样式表3636四、四、CSSCSS样式的单位样式的单位定义

29、长度：符号定义长度：符号 数值数值 单位单位绝对长度单位：绝对长度单位：cm,mm,in,pt(印刷点数印刷点数),pc等。等。相对长度单位：相对长度单位：px（像素）（像素）,em,ex。百分比单位百分比单位百分比值总是相对于另一个值来说的，百分比值总是相对于另一个值来说的，参照值一般参照值一般是该元素本身的字体尺寸是该元素本身的字体尺寸。CSSCSS样式表样式表样式表样式表3737四、四、CSSCSS样式的单位样式的单位定义颜色定义颜色rgb函数函数：rgb(R,G,B)R、G、B可用百分比值表示，也可用可用百分比值表示，也可用0255的整的整数值数值表示。表示。使用十六进制数组使用十六进

30、制数组：#RRGGBB直接使用颜色名直接使用颜色名。color:rgb(100%,0,0)color:rgb(255,0,0)color:#FF0000color:redCSSCSS样式表样式表样式表样式表3838五、五、CSSCSS样式在网页中的应用样式在网页中的应用1、在网页中创建样式，分别创建下列三种样式、在网页中创建样式，分别创建下列三种样式标签选择符标签选择符类选择符类选择符ID选择符选择符2、在网页中导入、链入样式表文件、在网页中导入、链入样式表文件CSSCSS样式表样式表样式表样式表3939五、五、CSSCSS样式在网页中的应用样式在网页中的应用字体、大小、粗细、行高、字体、大小

31、、粗细、行高、颜色、修饰等颜色、修饰等背景颜色、图像、重复、水背景颜色、图像、重复、水平位置等平位置等字间距、对齐方式、缩进等字间距、对齐方式、缩进等宽、高、填充、边界等宽、高、填充、边界等边框的样式、宽度和颜色等边框的样式、宽度和颜色等设置项目符号和编号。设置项目符号和编号。位置的设置。位置的设置。设置滤镜。设置滤镜。六、插入文本六、插入文本 文字是网页中最文字是网页中最文字是网页中最文字是网页中最基本基本的页面元素的页面元素的页面元素的页面元素 占用占用占用占用存储存储空间小空间小空间小空间小 传递信息的主要传递信息的主要传递信息的主要传递信息的主要载体载体 网页文档格式化是一种修饰页面文

32、字的操作，网页文档格式化是一种修饰页面文字的操作，DW文字格式化主要有两种方式：文字格式化主要有两种方式：用用用用HTMLHTML标记格式化标记格式化标记格式化标记格式化 用用用用CSSCSS样式格式化样式格式化样式格式化样式格式化 CSS样式是一种对网页文档内容进行样式是一种对网页文档内容进行精确格式化精确格式化的方法，它可以使的方法，它可以使用许多用许多HTML样式不能使用的样式不能使用的属性属性。CSS样式还可以样式还可以同时同时对对多篇多篇文文档档格式化格式化，可将创建好的样式保存在外部样式表中，若修改样式表，可将创建好的样式保存在外部样式表中，若修改样式表，便可对便可对相关网页相关网

33、页进行进行相应的更新相应的更新，从而实现对文本格式化的自动化，从而实现对文本格式化的自动化管理管理 两种格式化方法的优先级两种格式化方法的优先级两种格式化方法的优先级两种格式化方法的优先级HTMLHTML标记标记 CSSCSS样式样式1 1、插入文本的方法插入文本的方法 Dreamweaver Dreamweaver 允允许您通您通过以下方式在以下方式在Web Web 页中添加文本：页中添加文本：直接将文本键入页中，从其他文档复制和粘贴文本，或从其他直接将文本键入页中，从其他文档复制和粘贴文本，或从其他应用程序拖放文本。应用程序拖放文本。(ASCIIASCII文本文件、文本文件、RTF RTF

34、 文件和文件和MS Office MS Office 文档文档)六、插入文本六、插入文本 （1）打开您要将Word 或Excel 文件的内容复制到的目标Web 页 （2）执行以下操作之一以选择文件：将文件从当前位置拖放到希望在其中显示内容的页中。将文件从当前位置拖放到希望在其中显示内容的页中。如果出现如果出现“插入插入Microsoft Word Microsoft Word 或或Excel Excel 文档文档”对话框，单对话框，单击击“插入将文档的内容插入到此插入将文档的内容插入到此Web Web 页中页中”，然后单击，然后单击“确确定定”。选择选择“文件文件”“导入导入”“Word“Wo

35、rd 文档或文件文档或文件”“导入导入”“Excel“Excel 文档文档”。在。在“打开打开”对话框中，浏览到要添加的对话框中，浏览到要添加的文件，然后单击文件，然后单击“打开打开”六、插入文本六、插入文本2 2、插入指向、插入指向Word 或或Excel 文档的链接文档的链接 若要创建指向若要创建指向Word Word 或或Excel Excel 文档的链接，请执行以下文档的链接，请执行以下操作：操作：打开希望在其中显示链接的页。打开希望在其中显示链接的页。将文件从当前位置拖放到希望在其中显示链接的将文件从当前位置拖放到希望在其中显示链接的DreamweaverDreamweaver 页中

36、。出现页中。出现“插入插入Microsoft Word Microsoft Word 或或Excel Excel 文档文档”对话框。对话框。选择选择“创建链接创建链接”，然后单击，然后单击“确定确定”。如果正在创建的链接所指向的文档位于站点的根文件夹以外，如果正在创建的链接所指向的文档位于站点的根文件夹以外，Dreamweaver Dreamweaver 将提示您将文档复制到站点根文件夹。通过将文档将提示您将文档复制到站点根文件夹。通过将文档复制到站点的根文件夹，可以确保发布复制到站点的根文件夹，可以确保发布Web Web 站点时该文档可用。站点时该文档可用。指向指向Word Word 或或E

37、xcel Excel 文档的链接出现在页中文档的链接出现在页中六、插入文本六、插入文本1 插入水平线插入水平线2 插入日期插入日期Dreamweaver Dreamweaver 提供了一个方便的日期对象，该对象使您可提供了一个方便的日期对象，该对象使您可以以以以任何任何喜欢的喜欢的格式格式插入当前日期（包含或不包含时间都插入当前日期（包含或不包含时间都可以），您可以选择在可以），您可以选择在每次保存每次保存文件时都文件时都自动更新自动更新该日期。该日期。注意注意：“插入日期插入日期”对话框中显示的日期和时间对话框中显示的日期和时间不是当前不是当前日期日期，也不反映访问者在显示您的站点时所看到的

38、时期，也不反映访问者在显示您的站点时所看到的时期/时间。它们只是时间。它们只是说明说明此信息的此信息的显示方式显示方式的示例。的示例。将当前日期插入到文档中：将当前日期插入到文档中：（1 1）在在“文档文档”窗口中，将插入点放在要插入日期的位置。窗口中，将插入点放在要插入日期的位置。（2 2）执行下列操作之一：执行下列操作之一：选择选择“插入插入”“日期日期”。在在“插入插入”栏的栏的“常用常用”类别中，单击类别中，单击“日期日期”按钮。按钮。七、七、插入对象插入对象 （3 3）在出现的对话框中，选择星期格式、日期格式和时间）在出现的对话框中，选择星期格式、日期格式和时间格式。格式。（4 4）

39、如果希望在每次保存文档时都更新插入的日期，请选）如果希望在每次保存文档时都更新插入的日期，请选择择“储存时自动更新储存时自动更新”。如果希望日期在插入后变成纯文。如果希望日期在插入后变成纯文本并永远不自动更新，请取消选择该选项。本并永远不自动更新，请取消选择该选项。（6 6）单击）单击“确定确定”插入日期。插入日期。提示：如果选择了提示：如果选择了“储存时自动更新储存时自动更新”，则在日期格式插，则在日期格式插入到文档中后可以对其进行编辑，方法是单击已设置格式入到文档中后可以对其进行编辑，方法是单击已设置格式的文本，然后在属性检查器中选择的文本，然后在属性检查器中选择“编辑日期格式编辑日期格式

40、”3 插入特殊字符插入特殊字符4 在字符之间添加空格在字符之间添加空格HTML HTML 只允许字符之间包含一个空格；若要在文档中添加其只允许字符之间包含一个空格；若要在文档中添加其他空格，必须插入连续空格。可以设置一个在文档中自动他空格，必须插入连续空格。可以设置一个在文档中自动添加连续空格的参数选择。添加连续空格的参数选择。七、七、插入对象插入对象若要插入连续空格，请执行下列操作之一：若要插入连续空格，请执行下列操作之一：（1 1）在）在“插入插入”栏中的栏中的“文本文本”类别中，类别中，“插入连续空格插入连续空格”。（2 2）选择）选择“插入插入”“HTML”“HTML”“特殊字符特殊字

41、符”“连续空格连续空格”。（3 3）按）按Control+Shift+Control+Shift+空格键空格键若要设置添加连续空格的参数，请执行以下操作：若要设置添加连续空格的参数，请执行以下操作：1 1 选择选择“编辑编辑”“首选参数首选参数”(Windows)(Windows)2 2 在在“常规常规”类别中确保选中类别中确保选中“允许多个连续的空格允许多个连续的空格”。5 插入插入Flash按钮和按钮和Flash文字文字在在DWDW中，利用内置的中，利用内置的FlashFlash按钮和文字，可以直接在网页上制作出按钮和文字，可以直接在网页上制作出有动态效果的有动态效果的FlashFlash

42、按钮和文字按钮和文字若要在网页上插入若要在网页上插入FlashFlash按钮，请执行以下操作按钮，请执行以下操作 （1 1）在网页中选择）在网页中选择FlashFlash按钮插入点的位置按钮插入点的位置七、七、插入对象插入对象 （2 2）在网页编辑窗口中选择）在网页编辑窗口中选择“插入插入|交互式图像交互式图像|Flash|Flash按钮按钮”命令，此时系统打开命令，此时系统打开插入插入FlashFlash按钮对话框。按钮对话框。（3 3）单击）单击OKOK按钮后，就会产生一个按钮后，就会产生一个“.SWF”.SWF”格式的文件，文件会被自动导入当前格式的文件，文件会被自动导入当前正在编辑的网

43、页中。正在编辑的网页中。（4 4）在网页中选中此按钮，可以设置该按钮的属性）在网页中选中此按钮，可以设置该按钮的属性若要在网页上插入若要在网页上插入FlashFlash文字，请执行以下操作：文字，请执行以下操作：（1 1）在网页中选择）在网页中选择FlashFlash文字的插入位置文字的插入位置 （2 2）在网页编辑窗口中选择在网页编辑窗口中选择“插入插入|交互式图像交互式图像|Flash|Flash文本文本”命令，此时系统打命令，此时系统打开插入开插入FlashFlash文本对话框。文本对话框。（3 3）单击）单击OKOK按钮后，就会产生一个按钮后，就会产生一个“.SWF”.SWF”格式的文

44、件，文件会被自动导入当前格式的文件，文件会被自动导入当前正在编辑的网页中。正在编辑的网页中。在网页上插入在网页上插入FlashFlash按钮和文字，不用安装和使用按钮和文字，不用安装和使用FlashFlash系统，就可以给网页增添动系统，就可以给网页增添动态效果态效果七、七、插入对象插入对象6 插入插入Rollover图片图片Rollover图片是由主图片图片是由主图片(Original Image)和翻转图片和翻转图片(Rollover Image)两部分组成。页面载入后，先显示主图两部分组成。页面载入后，先显示主图片，当鼠标移到主图片上方时，图片内容发生变化，自动片，当鼠标移到主图片上方时

45、，图片内容发生变化，自动更新为翻转图片，鼠标移出时，图片又恢复原样。更新为翻转图片，鼠标移出时，图片又恢复原样。制作制作Rollover图片是应准备两幅尺寸相同的图片。若两幅图图片是应准备两幅尺寸相同的图片。若两幅图片尺寸不同的话，将调整第片尺寸不同的话，将调整第2幅图片幅图片如何在网页上插入如何在网页上插入Rollover图片图片七、七、插入对象插入对象1 超级链接概述超级链接概述用预先准备好的文本、按钮、图像等对象与其他对象建立用预先准备好的文本、按钮、图像等对象与其他对象建立一种链接，也就是在源端点和目标端点建立一种链接。一种链接，也就是在源端点和目标端点建立一种链接。超级链接的划分超级

46、链接的划分：源端点超文本：文本下方有下划线非超文本：文本之外的其他对象构建的链接目标端点外部链接内部链接电子邮件链接局部链接、脚本链接八八 超级链接的应用超级链接的应用相对路径与绝对路径相对路径与绝对路径2 创建超级链接创建超级链接使用属性检查器链接到文档使用属性检查器链接到文档 属性检查器文件夹图标和属性检查器文件夹图标和“链接链接”文本框可用于创建从图像、对文本框可用于创建从图像、对象或文本到其它文档或文件的链接。象或文本到其它文档或文件的链接。关于属性检查器中的关于属性检查器中的“目标目标”_blank 将链接的文档载入一个新的、未命名的浏览器窗口。将链接的文档载入一个新的、未命名的浏览

47、器窗口。_parent 将链接的文档载入该链接所在框架的父框架或父窗口。将链接的文档载入该链接所在框架的父框架或父窗口。_self 将链接的文档载入链接所在的同一框架或窗口。将链接的文档载入链接所在的同一框架或窗口。_top 将链接的文档载入整个浏览器窗口，从而删除所有框架。将链接的文档载入整个浏览器窗口，从而删除所有框架。使用完整的URL的地址的链接路径称为绝对路径，它指明了目标的具体位置指明目标端点与原端点的相对位置关系的路径成为相对路径使用使用“指向文件指向文件”图标链接文档图标链接文档“指向文件指向文件”图标可用于创建从图像、对象或文本到其它文档或文件的图标可用于创建从图像、对象或文本

48、到其它文档或文件的链接。链接。若要使用若要使用“指向文件指向文件”图标链接文档，请执行以下操作：图标链接文档，请执行以下操作：(1)(1)在在“文档文档”窗口的窗口的“设计设计”视图中选择文本或图像。视图中选择文本或图像。(2)(2)拖动属性检查器中拖动属性检查器中“链接链接”文本框右侧的文本框右侧的“指向文件指向文件”图标，然后指图标，然后指向另一个打开的文档、已打开文档中的可见锚记或者指向向另一个打开的文档、已打开文档中的可见锚记或者指向“文件文件”面板面板中的一个文档。中的一个文档。注意：注意：只有当只有当“文档文档”窗口中的文档未最大化时，才能链接到打开的文窗口中的文档未最大化时，才能

49、链接到打开的文档。如果指向打开的文档，则在进行选择时，该文档移至屏幕的最前面。档。如果指向打开的文档，则在进行选择时，该文档移至屏幕的最前面。(3)(3)释放鼠标按钮。释放鼠标按钮。使用站点地图链接文档使用站点地图链接文档八八 超级链接的应用超级链接的应用3 管理链接管理链接 为避免站点中出现断开的链接，可以激活链接管理，使为避免站点中出现断开的链接，可以激活链接管理，使Dreamweaver Dreamweaver 在您作出更改后自动更新链接。也可以使用站点在您作出更改后自动更新链接。也可以使用站点的可视化表示形式来修改链接，或者，可以通过一次更改将所的可视化表示形式来修改链接，或者，可以通

50、过一次更改将所有链接更新到一个特定的文件中。有链接更新到一个特定的文件中。自动更新链接自动更新链接 每当在本地站点内移动或重命名文档时，每当在本地站点内移动或重命名文档时，Dreamweaver Dreamweaver 可更新起可更新起自以及指向该文档的链接。当将整个站点（或其中完全独立的自以及指向该文档的链接。当将整个站点（或其中完全独立的一个部分）存储在本地硬盘上时，此项功能最实用。一个部分）存储在本地硬盘上时，此项功能最实用。DreamweaverDreamweaver不更改远程文件夹中的文件，除非将这些本地文件不更改远程文件夹中的文件，除非将这些本地文件放在或者存回到远程服务器上。放在