第三章_网页编辑和超级链接（css）课件.pptVIP

1 关于层叠样式表 通常情况下我们希望将页面显示内容与显示方式分开，使得内容编辑人员的工作重心放在网站内容的撰写上，而站点的美工和界面设计人员的工作重心放在页面显示的风格和样式上。 样式是预先定义好的、格式化文档的工具。CSS全称Cascading Styles Sheet，译为层叠样式表，是由W3C（World Wide Web Consortium）组织所拟定的。 1 关于层叠样式表(续) CSS（Cascading Style Sheets ）是开放性样式设定语句，它扩充了HTML标记的属性设定，这些属性设定可以通过脚本语言进行控制，使网页的视觉效果更加丰富多彩。 CSS将页面的样式与显示内容的文档分开，可以高效、统一地组织页面元素。对于具有相同风格多个页面的站点来说，只需要建立定义样式的CSS文件，并使需要使用这些样式的文档调用相应的样式文件即可。当网站的风格需要更新时，只要更改CSS样式文件即可。 CSS技术的应用使得网站的开发、管理和维护大为简化，提高了开发效率。 （1）样式表的版本： 1996年，W3C推出CSS1 。 1998年中期，W3C公布CSS2。 目前，W3C正在开发CSS3。 IE6与NS7已经实现了CSS1中的绝大部分特性，但并没有实现全部特性；IE8的最新版本支持CSS2。 本章介绍的属性可以被至少其中一种浏览器所支持 （2）样式表的层次： 样式表称为层叠样式表是因为它们可以以三层的形式定义，以此指定文档的样式；较低层的样式表能够覆盖较高层的样式表。 CSS的三个层次，按照从底层到高层的顺序，分别为行内样式表、文档层样式表和外部样式表，其中行内样式表只能作用于单个标签的内容；文档层样式表则能够对文档的整个主体起作用，而外部样式表可以应用到任意数目文档的主体中。 如果浏览器无法满足样式表指定的属性，则浏览器或者采用另一个值代替此值或者忽略这个给定值。 Link与@import的区别 差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。 差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。 差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。 差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。 六、插入文本 文字是网页中最基本的页面元素 占用存储空间小 传递信息的主要载体 网页文档格式化是一种修饰页面文字的操作， DW文字格式化主要有两种方式： 用HTML标记格式化 用CSS样式格式化 CSS样式是一种对网页文档内容进行精确格式化的方法，它可以使用许多HTML样式不能使用的属性。CSS样式还可以同时对多篇文档格式化，可将创建好的样式保存在外部样式表中，若修改样式表，便可对相关网页进行相应的更新，从而实现对文本格式化的自动化管理 两种格式化方法的优先级 HTML标记 CSS样式 1、插入文本的方法 Dreamweaver 允许您通过以下方式在Web 页中添加文本：直接将文本键入页中，从其他文档复制和粘贴文本，或从其他应用程序拖放文本。(ASCII文本文件、RTF 文件和MS Office 文档) （1）打开您要将Word 或Excel 文件的内容复制到的目标Web 页 （2）执行以下操作之一以选择文件： 将文件从当前位置拖放到希望在其中显示内容的页中。如果出现“插入Microsoft Word 或Excel 文档”对话框，单击“插入将文档的内容插入到此Web 页中”，然后单击“确定”。 选择“文件”“导入”“Word 文档或文件”“导入”“Excel 文档”。在“打开”对话框中，浏览到要添加的文件，然后单击“打开” 2、插入指向Word 或Excel 文档的链接 若要创建指向Word 或Excel 文档的链接，请执行以下操作： 打开希望在其中显示链接的页。 将文件从当前位置拖放到希望在其中显示链接的Dreamweaver 页中。出现“插入Microsoft Word 或Excel 文档”对话框。 选择“创建链接”，然后单击“确定”。 如果正在创建的链接所指向的文档位于站点的根文件夹以外，Dreamweaver 将提示您将文档复制到站点根文件夹。通过将文档复制到站点的根文件夹，可以确保发布Web 站点时该文档可用。 指向Word 或Excel 文档的链接出现在页中