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

第三章 网页编辑（样式表）和超级链接,统一网站风格、制作基本特效,CSS样式表,2,主要内容,一、样式表(CSS)的基本概念 二、CSS与HTML文档的结合方法 三、CSS属性的理解与应用 四、CSS样式的单位 五、CSS样式在网页中的应用 六、插入文本 七、插入对象 八、超级链接,1 关于层叠样式表 通常情况下我们希望将页面显示内容与显示方式分开，使得内容编辑人员的工作重心放在网站内容的撰写上，而站点的美工和界面设计人员的工作重心放在页面显示的风格和样式上。 样式是预先定义好的、格式化文档的工具。CSS全称Cascading Styles Sheet，译为层叠样式表，是由W3C（World Wide Web Consortium）组织所拟定的。,一、CSS的基本概念,1 关于层叠样式表(续) CSS（Cascading Style Sheets ）是开放性样式设定语句，它扩充了HTML标记的属性设定，这些属性设定可以通过脚本语言进行控制，使网页的视觉效果更加丰富多彩。 CSS将页面的样式与显示内容的文档分开，可以高效、统一地组织页面元素。对于具有相同风格多个页面的站点来说，只需要建立定义样式的CSS文件，并使需要使用这些样式的文档调用相应的样式文件即可。当网站的风格需要更新时，只要更改CSS样式文件即可。 CSS技术的应用使得网站的开发、管理和维护大为简化，提高了开发效率。,一、CSS的基本概念,（1）样式表的版本： 1996年，W3C推出CSS1 。 1998年中期，W3C公布CSS2。 目前，W3C正在开发CSS3。 IE6与NS7已经实现了CSS1中的绝大部分特性，但并没有实现全部特性；IE8的最新版本支持CSS2。 本章介绍的属性可以被至少其中一种浏览器所支持,（2）样式表的层次： 样式表称为层叠样式表是因为它们可以以三层的形式定义，以此指定文档的样式；较低层的样式表能够覆盖较高层的样式表。 CSS的三个层次，按照从底层到高层的顺序，分别为行内样式表、文档层样式表和外部样式表，其中行内样式表只能作用于单个标签的内容；文档层样式表则能够对文档的整个主体起作用，而外部样式表可以应用到任意数目文档的主体中。 如果浏览器无法满足样式表指定的属性，则浏览器或者采用另一个值代替此值或者忽略这个给定值。,CSS样式表,7,一、CSS的基本概念,2、编写CSS样式的方法 使用CSS编辑器 如Dreamweaver、Frontpage等都会自带CSS编辑器。 使用超文本编辑器 如Dreamweaver、Frontpage等超文本编辑器均可编辑样式表； 记事本,CSS样式表,8,一、CSS的基本概念,3、基本语法,选择符属性: 值,选择符属性1: 值1; 属性2: 值2 ;,单一选择符的复合样式声明应该用“;”隔开，为便于阅读也可以分行写。,几乎所有的HTML标记符形式都可以作为选择符。, CSS例子 H1 font-size:x-large; color:red H2 font-size:large; color:blue ,H1 font-size:x-large; color:red H2 font-size:large; color:blue,CSS样式表,9,一、CSS的基本概念,4、CSS样式的组合、继承和关联性 样式的组合：把具有相同声明定义的选择符组合在一起，并用逗号隔开。 例如：段落元素p、单元格元素td和类c1可以使用相同样式：,p,td,.c1font-size:12pt;font-family:黑体;color:red,CSS样式表,10,一、CSS的基本概念,样式的继承：若子元素未定义，则它将继承上级元素的样式的定义。但存在少数属性不能继承（border）。, CSS例子 ,CSS样式表,11,一、CSS的基本概念,样式表的关联性： 样式表的关联性指在某些样式定义中，可以定义某样式仅在某个特定元素范围内才有效。 例如：,p bfont-size:12pt;font-family:黑体;color:red,b元素仅在p元素作用范围内会套用上述的样式设定。 而在其他地方不具有这些属性。,CSS样式表,12,一、CSS的基本概念,5、注释 CSS文字的注释形式与C语言类似。,pfont-size:12pt /*P标签的样式定义*/,CSS样式表,13,一、CSS的基本概念,6、选择符 样式表的基本语法形式：,selectorproperty1:value1; property2:value2;,需要应用的样式的内容,样式的属性,样式的属性的值,Select的五种合法的类别：HTML标记符、用户定义的类Class、用户定义的ID、虚类和虚元素,CSS样式表,14,选择符的类别,HTML标记符 应用比较多，注意继承性、组合性和关联性的应用。 用户定义的类选择符 可以使用任何名称命名类。 里所有的元素都可以定义“类”。 语法如下：,selector.classnameproperty1:value1; property2:value2; .classnameproperty1:value1; property2:value2;,例5-5.htm,1、 两种定义形式的区别？ 2、在标签中使用类选择符样式的使用方式如何？,CSS样式表,15,选择符的类别,ID选择符 应用的形式基本与类选择符类似，定义时用“#”替代”.”。 因此应用时一般选取其中的一种。 虚类和虚元素 在html的页面元素中没有这种属性，故称其为虚类，仅在IE5.0以上的浏览器版本才支持虚类选择符。 语法如下：,页面元素名：元素虚属性名样式表内容,CSS样式表,16,a:link color: #000000 a:visited color: #cccccc a:hover color: #000000; font-style:italic a:active color: #aaaaaa,:link color: #000000 :visited color: #cccccc :hover color: #000000; font-style:italic :active color: #aaaaaa,CSS样式表,17,二、CSS与HTML文档的结合方法,HTML与样式表有多种结合方法 内联样式：在标记符内定义 外联样式 使用标记符链接到外部的样式文件 使用CSS的import标记符来导入样式文件 在HTML标签中直接加入样式表的定义。,CSS样式表,18,二、CSS与HTML文档的结合方法,内联样式：在标记符内定义，在本网页内起作用。, ,CSS样式表,19,二、CSS与HTML文档的结合方法,外联样式：使用标记符链接到外部的样式文件，凡链接的网页都起作用 1、定义外部样式文件，用记事本或者Dreamweaver，编辑完后文件扩展名应为”.css”； 2、建立HTML网页文档； 3、在网页文档中使用标签将前面的样式表文档链接到网页中。, ,例5-7.htm,CSS样式表,20,二、CSS与HTML文档的结合方法,外联样式：使用import导入外部的样式文件，凡在导入该样式表的网页都起作用 1、定义外部样式文件，用记事本或者Dreamweaver，编辑完后文件扩展名应为”.css”； 2、建立HTML网页文档； 3、在网页文档中import导入前面的样式表。, ,例5-8.htm,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可以控制的。,CSS样式表,22,二、CSS与HTML文档的结合方法,在HTML标签中直接加入样式表的定义 若在个别标签需要作样式调整，可使用这种方式。 使用标签的“Style”属性来定义样式。, 被定义的样式文本在此处。 ,CSS样式表,23,三、CSS属性的理解与应用,样式表的5类常用属性： 字体属性 ：字体、字号、行距等。 颜色及背景属性 ：背景颜色、背景图片等。 文本属性： 区块属性 ：边框粗细等。 分级属性 ：各组件的字距、行距、缩排等。 鼠标属性 ：鼠标形状等。 详见帮助文件,CSS属性,CSS样式表,24,字体属性,Font-family:指定文字的字体 H1font-family:华文彩云 Font-style：指定文字是否加粗或使用斜体。取值：normal（正常）、oblique（偏斜体）、italic（斜体） Font-size：指定文字的大小。 Font：上述样式属性的综合表示法。 Pfont: bold 16pt,CSS样式表,25,颜色及背景属性,Color:颜色 Background-color：指定背景颜色 H1background-color:#000800 Background-image：指定Html组件的背景图片，值为url或none。 Bodybackground-image:url(image1.jpg),CSS样式表,26,文本属性,Text-decoration：设置底线、顶线、闪烁等文字效果。值为none,underline,overline,line-through,blink. Text-align：指定文字的对齐方式。值为：left,right,center,justify,CSS样式表,27,区块属性,定义边界，取值为：长度|百分比|auto 上边界：margin-top；下边界：margin-bottom 左边界：margin-left：右边界：margin-right P.narrow margin-right: 50% 定义边框： Border-color Border-width Border-style,CSS样式表,28,分级属性,List-style-type：指定项目符号或编号 允许值：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none List-style-image：指定项目符号的图形文件名称，值为url或none LI.square list-style-type: 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. */,CSS样式表,29,鼠标属性,让鼠标移到不同对象上面，显示不同形状。 Cursor属性，取值如下 Auto：自动按默认显示 Crosshair：“” Hand:手形 Text：文本I形 Wait：等待 ,CSS样式表,30,练习：,1、若要在网页上使用使用统一的页面风格： 背景为浅蓝灰色（#cdcdfe）， 文本为深蓝色（#000066）， 所有网页都不留边(Margin)， 且列表项目、表格及段落文本中的字体均为10.5pt；颜色：绿色；文本对齐：居中；字体：楷体,Times New Roman；文字格式：加粗。,CSS样式表,31,练习：,2、编辑一个外联样式表，它使所有网页中表格的文本显示为如下风格： 文字大小：10.5pt; 颜色：绿色； 文本对齐：居中； 字体：楷体 文字格式：加下划线,CSS样式表,32,练习：,3、在上题中，若有一个网页中的某个表格要采取不同的显示方式：如 颜色：蓝色； 字体：黑体,Arial Black 其他与上题相同，应在该页上使用什么样式表？,CSS样式表,33,练习：,4、定义一个类选择符，样式为： 文字大小：12pt; 颜色：绿色； 文本对齐：居中； 字体：楷体，Times New Roman 文字格式：加粗 并在多个页面元素中引用此类样式。,CSS样式表,34,练习：,5、定义一个伪类选择符，使超链接具有一下特效： （1）超链接没有下划线； （2）当鼠标指向超链接时，文字从10pt变成12pt，文字加粗； （3）超链接文本在单击前是蓝色，在单击后是灰色，并变成斜体。,CSS样式表,35,课堂练习：,定义一个内联样式，使网页中的所有段落显示效果如下： 字的大小：12px 字的颜色：0000ff 对齐方式为居中 背景颜色：gray,CSS样式表,36,四、CSS样式的单位,定义长度：符号 数值 单位 绝对长度单位：cm,mm,in,pt(印刷点数),pc等。 相对长度单位：px（像素）,em,ex。 百分比单位 百分比值总是相对于另一个值来说的，参照值一般是该元素本身的字体尺寸。,CSS样式表,37,四、CSS样式的单位,定义颜色 rgb函数：rgb(R,G,B) R、G、B可用百分比值表示，也可用0255的整数值表示。 使用十六进制数组：#RRGGBB 直接使用颜色名。,color: rgb(100%,0,0) color: rgb(255,0,0) color: #FF0000 color:red,CSS样式表,38,五、CSS样式在网页中的应用,1、在网页中创建样式，分别创建下列三种样式 标签选择符 类选择符 ID选择符 2、在网页中导入、链入样式表文件,CSS样式表,39,五、CSS样式在网页中的应用,六、插入文本 文字是网页中最基本的页面元素 占用存储空间小 传递信息的主要载体 网页文档格式化是一种修饰页面文字的操作， 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 文档的链接出现在页中,六、插入文本,1 插入水平线 2 插入日期 Dreamweaver 提供了一个方便的日期对象，该对象使您可以以任何喜欢的格式插入当前日期（包含或不包含时间都可以），您可以选择在每次保存文件时都自动更新该日期。 注意：“插入日期”对话框中显示的日期和时间不是当前日期，也不反映访问者在显示您的站点时所看到的时期/ 时间。它们只是说明此信息的显示方式的示例。 将当前日期插入到文档中： （1）在“文档”窗口中，将插入点放在要插入日期的位置。 （2）执行下列操作之一： 选择“插入” “日期”。 在“插入”栏的“常用”类别中，单击“日期”按钮。,七、 插入对象,（3）在出现的对话框中，选择星期格式、日期格式和时间格式。 （4）如果希望在每次保存文档时都更新插入的日期，请选择“储存时自动更新” 。如果希望日期在插入后变成纯文本并永远不自动更新，请取消选择该选项。 （6）单击“确定”插入日期。 提示：如果选择了“储存时自动更新”，则在日期格式插入到文档中后可以对其进行编辑，方法是单击已设置格式的文本，然后在属性检查器中选择“编辑日期格式” 3 插入特殊字符 4 在字符之间添加空格 HTML 只允许字符之间包含一个空格；若要在文档中添加其他空格，必须插入连续空格。可以设置一个在文档中自动添加连续空格的参数选择。,七、 插入对象,若要插入连续空格，请执行下列操作之一： （1）在“插入”栏中的“文本”类别中， “插入连续空格”。 （2）选择“插入” “HTML” “特殊字符” “连续空格”。 （3）按Control+Shift+ 空格键 若要设置添加连续空格的参数，请执行以下操作： 1 选择“编辑”“首选参数”(Windows) 2 在“常规”类别中确保选中“允许多个连续的空格”。 5 插入Flash按钮和Flash文字 在DW中，利用内置的Flash按钮和文字，可以直接在网页上制作出有动态效果的Flash按钮和文字 若要在网页上插入Flash按钮，请执行以下操作 （1）在网页中选择Flash按钮插入点的位置,七、 插入对象,（2）在网页编辑窗口中选择“插入|交互式图像|Flash按钮”命令，此时系统打开插入Flash按钮对话框。 （3）单击OK按钮后，就会产生一个“.SWF”格式的文件，文件会被自动导入当前正在编辑的网页中。 （4）在网页中选中此按钮，可以设置该按钮的属性 若要在网页上插入Flash文字，请执行以下操作： （1）在网页中选择Flash文字的插入位置 （2） 在网页编辑窗口中选择“插入|交互式图像|Flash文本”命令，此时系统打开插入Flash文本对话框。 （3）单击OK按钮后，就会产生一个“.SWF”格式的文件，文件会被自动导入当前正在编辑的网页中。 在网页上插入Flash按钮和文字，不用安装和使用Flash系统，就可以给网页增添动态效果,七、 插入对象,6 插入Rollover图片 Rollover图片是由主图片(Original Image)和翻转图片(Rollover Image)两部分组成。页面载入后，先显示主图片，当鼠标移到主图片上方时，图片内容发生变化，自动更新为翻转图片，鼠标移出时，图片又恢复原样。 制作Rollover图片是应准备两幅尺寸相同的图片。若两幅图片尺寸不同的话，将调整第2幅图片 如何在网页上插入Rollover图片,七、 插入对象,1 超级链接概述 用预先准备好的文本、按钮、图像等对象与其他对象建立一种链接，也就是在源端点和目标端点建立一种链接。 超级链接的划分：,源端点,超文本：文本下方有下划线 非超文本：文本之外的其他对象构建的链接,目标端点,外部链接 内部链接 电子邮件链接 局部链接、脚本链接,八 超级链接的应用,相对路径与绝对路径 2 创建超级链接 使用属性检查器链接到文档 属性检查器文件夹图标和“链接”文本框可用于创建从图像、对象或文本到其它文档或文件的链接。 关于属性检查器中的“目标” _blank 将链接的文档载入一个新的、未命名的浏览器窗口。 _parent 将链接的文档载入该链接所在框架的父框架或父窗口。 _self 将链接的文档载入链接所在的同一框架或窗口。 _top 将链接的文档载入整个浏览器窗口，从而删除所有框架。,使用完整的URL的地址的链接路径称为绝对路径，它指明了目标的具体位置 指明目标端点与原端点的相对位置关系的路径成为相对路径,使用“指向文件”图标链接文档 “指向文件”图标可用于创建从图像、对象或文本到其它文档或文件的链接。 若要使用“指向文件”图标链接文档，请执行以下操作： (1)在“文档”窗口的“设计”视图中选择文本或图像。 (2)拖动属性检查器中“链接”文本框右侧的“指向文件”图标，然后指向另一个打开的文档、已打开文档中的可见锚记或者指向“文件”面板中的一个文档。 注意：只有当“文档”窗口中的文档未最大化时，才能链接到打开的文档。如果指向打开的文档，则在进行选择时，该文档移至屏幕的最前面。 (3)释放鼠标按钮。 使用站点地图链接文档,八 超级链接的应用,3 管理链接 为避免站点中出现断开的链接，可以激活链接管理，使Dreamweaver 在您作出更改后自动更新链接。也可以使用站点的可视化表示形式来修改链接，或者，可以通过一次更改将所有链接更新到一个特定的文件中。 自动更新链接 每当在本地站点内移动或重命名文档时，Dreamweaver 可更新起自以及指向该文档的链接。当将整个站点（或其中完全独立的一个部分）存储在本地硬盘上时，此项功能最实用。Dreamweaver不更改远程文件夹中的文件，除非将这些本地文件放在或者存回到远程服务器上。 若要在Dreamweaver 中启用链接管理，请执行以下操作：,八 超级链接的应用,(1)选择“编辑”“首选参数”(Windows) “首选参数”对话框出现。 (2)从左侧的分类列表中选择“常规”。出现“常规”首选参数选项。 (3)在“文档选项”部分，从“移动文件时更新链接”弹出菜单中选择“总是”或者“提示”。若选择“总是”，则每当移动或重命名选定文档时，Dreamweaver 将自动更新起自和指向该文档的所有链接。 在站点地图中修改链接 可以通过在站点地图中添加、更改和删除链接来修改站点的结构。Dreamweaver 自动更新站点地图以显示对站点所做的更改。 若要更改链接，请执行以下操作： (1)在站点地图中，选择要更改的链接所指向的页面,选择“站点”“更改链接” 右键单击，然后从上下文菜单中选择“更改链接”。 2 通过浏览找到希望链接指向的文件，或者键入URL。 4 创建锚点链接 在网页设计中，要创建某个网页的某个指定位置的超链接称为创建锚点的链接。 命名锚记使您可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。 创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。,5 创建电子邮件链接 6 创建导航条 导航条由图像或图像组组成，这些图像的显示内容随用户操作而变化。 使用“插入导航条”命令之前，须首先为各个导航项目的显示状态创建一组图像。（可将导航条项目视为按钮，因为单击它时，导航条项目将用户带到其它页面。 为文档创建导航条后，可使用“修改导航条”命令向导航条添加图像，或从导航条中删除图像。此命令可用于更改图像或图像组、更改单击项目时所打开的文件、选择在不同的窗口或框架中打开文件以及重新排序图像。,插入导航条 插入导航条时，须命名导航条项目，并选择要用于它们的图像。 7 创建跳转菜单 跳转菜单是文档中的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。可以创建到整个Web 站点内文档的链接、到其它Web 站点上文档的链接、电子邮件链接、到图形的链接。 跳转菜单可包含三个基本部分： （可选）菜单选择提示，如菜单项的类别说明，或一些指导信息等，例如“选择其中一项：” （必需）所链接菜单项的列表：用户选择某个选项，则链接的文档或文件被打开。 （可选）“前往”按钮。,