网页设计与开发PPT.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网页设计与开发,吕智强,lv0595,1,网页和网站,网站是有独立域名、独立存放空间的内容集合,（即对外发布）,，这些内容可能是网页，也可能是程序或其他文件，不一定要有很多网页，主要有独立域名和空间，那怕只有一个页面也叫网站。,网页是网站的组成部分。有了很多网页没有独立的域名和空间也只能说是网页,。例如一个程序，,尽管有很多页面，功能也齐全，,但没有独立域名和空间，没对外发布，,但都不能叫网站。,一、概述,2,网页表现形式,静态网页,通常是以,.htm,、,.html,、,.shtml,等为后缀的，它的特点是不会“变”,静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难,静态网页的交互性,较差,，,功能简单，无法实现更多的功能,3,网页表现形式,动态网页,通常是以,.php,、,.aspx,、,.jsp,等为后缀的，它的特点是会“变”,以数据库技术为基础，大大降低网站维护的工作量,可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等,动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页,;,4,什么是万维网,万维网的核心部分由统一资源定位器（,URL,）、超文本传输协议（,HTTP,）以及超文本标记语言（,HTML,）三个标准构成。,1,统一资源定位器,统一资源定位器，又叫,URL,（,Uniform Resource Locator,）。是专为标识,Internet,网上资源位置而设的一种编址方式，通常所说的网页地址指的即是,URL,。,2,超文本传输协议,HTTP,是超文本转移协议，是客户端浏览器或其他程序与,Web,服务器之间的应用层通信协议。在,Internet,上的,Web,服务器上存放的都是超文本信息，客户机需要通过,HTTP,协议传输所要访问的超文本信息。,3,超文本标记语言,HTML,（,Hyper Text Markup Language,）超文本标记语言是一种嵌入式语言。通过定义标记标签使浏览器解析页面并进行显示。,5,工作原理,当进入万维网上一个网页，或者其他网络资源的时候，通常你要首先在浏览器上键入想访问网页的统一资源定位器（,URL,），或者通过超链接方式链接到那个网页或网络资源。这之后的工作首先是,URL,的服务器名部分，被名为域名系统的分布于全球的因特网数据库解析，并根据解析结果决定进入哪一个,IP,地址。,接下来的步骤是为所要访问的网页，向在那个,IP,地址工作的服务器发送一个,HTTP,请求。在通常情况下，,HTML,文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。,网络浏览器接下来的工作是把,HTML,、,CSS,和其他接受到的文件所描述的内容，加上图像、链接和其他必须的资源，显示给用户。这些就构成了浏览器中所看到的“网页”。,6,开发工具的选择,HTML,的编辑工具是比较多的，读者既可以选择最常用的基于文本的,HTML,编辑器（,Windows,自带的记事本），也可以选择一套功能强大，可取代记事本编辑器的,EditPlus,，还可以选择所见即所得的,Dreamweaver,等,。,7,网页制作的相关技术,1,HTML,HTML,（,Hyper Text Markup Language,）超文本标记语言是一种嵌入式语言。和一般文本的不同的是，一个,HTML,文件不仅包含文本内容，还包含一些,Tag,，中文称“标记”。通过定义标记标签使浏览器解析页面并进行显示。一个,HTML,文件的后缀名是,htm,或者是,html,。,2,CSS,CSS,意思就是叠层样式表（,Cascading Style Sheets,），使用,CSS,的优点在于将格式从功能中分离出来。它定义了,HTML,元素的显示，是一种对,web,文档添加样式的简单机制。,在主页制作时采用,CSS,技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。,只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。,8,网页制作的相关技术,3,JavaScript,JavaScript,是由,Netscape,公司开发的一种脚本语言（,script language,），称为描述性语言，具有面向对象的能力，可以非常自由地嵌入到,HTML/XHTML,文件中，从而更便捷地开发出可交互的,Web,网页。,JavaScript,是目前最为流行的客户端脚本语言，大大地增强了网页的交互性。,JavaScript,语法构成与,C,、,C+,、,Java,类似，都包括,if,语句、,while,循环、分支选择以及运算等结构，但也仅是在语法上的相似。,9,网页元素单位,相对长度单位,px,：,像素是相对于显示器屏幕分辨率而言,em,：,相对于当前对象内文本的字体尺寸,绝对长度单,位,cm,：厘米,mm,：毫米,in,：英寸,10,HTML,文档结构,HTML,（,Hyper Text Markup Language,）超文本标记语言是一种嵌入式语言。通过定义标记标签使浏览器解析页面并进行显示。一个,HTML4.01,的文档结构包括以下几部分：,DOCTYPE,声明定义文档类型。,HTML,头元素信息。,HTML,正文信息（,body,标签内信息）。,二、初识,HTML,11,声明定义文档类型,在,HTML4.01,中提供了三种,DTD,文档：,严格型,HTML4.01DTD,文档不包括那些不被推荐的元素和属性，并且不能在带有,frameset,的页面中出现。,过渡型,HTML4.01DTD,文档包含所有严密型,DTD,文档中所允许的内容，还可以使用那些不被推荐的元素以及属性。,框架型,HTML4.01 DTD,文档包含过渡型以及框架。,12,HTML,头元素信息,HTML,文档的,head,元素中包含了,meta,元素，,meta,元素用来指定有关这个文档的相关信息。,例如：,用,httpequiv,、,content,、,charset,描述页面的内容。,meta,元素的属性有两种：,http-equiv,和,name,。,13,什么是标签,大多数,HTML,文档的标签都是由开始标签和结束标签进行界定（开始标签和结束标签成对出现），结束标签是以斜线开头（,/,），例如,中,为结束标签。每一个标签都是由尖括号（,）包围。,有单向标签和双向标签,单,向标签：,br,、,hr,、,img,等,三、标签,14,标签的属性,标签可以拥有属性，属性可以为页面中的,HTML,元素提供附加信息。属性被放置在标签的后面，但在最终括号（,）的前面，即属性应该添加在,HTML,元素里的起始标签中。,例如：,15,标签的嵌套,HTML,标签经常使用嵌套的方式，所谓的嵌套是指一个,HTML,标签包含另外一个标签的情况。,例如：,标题,显示的内容,16,HTML,基本标签,HTML,基本标签包括,:,标题标签,h1,、段落标签,p,、换行标签,br,、水平分割标签,hr,、部分标签,div,、注释标签、字体标签,font,。,部分标签,最早在,HTML3.2,标准中定义，可以将文档分割成独立的、不同的部分。在,标签中定义的文本内容，实际上与没有在,标签中定义的没有什么区别，但要是引入了,align,属性，,标签就变的十分有用了（用来设置段落或标题的对齐方式）。,和其他编程语言一样，,HTML,也提供了代码注释的方式（,，作为一个程序员应该养成对代码注释的习惯，这样可以保持清晰的思路。浏览器不显示注释的部分。,17,文字格式化,常见的文字格式化标签如下表。,18,字体设置,在,HTML,中，字体标签（,font,）通过其属性来设置文本字体、字体大小和字体颜色。字体标签的属性如下表。,color,color,color,color,19,无序列表,所谓无序列表就是列表中列表项的前导符号没有一定的次序，而是用黑点、圆圈、方框等一些特殊符号标识。无序列表并不是使列表项杂乱无章，而是使列表项的结构更清晰，更合理。,当创建一个无序列表时，主要使用用,HTML,的,标签和,标签来标记。其中,标签标识一个无序列表的开始；,标签标识一个无序列表项。,基本语法结构为：,项目名称,项目名称,项目名称,项目名称,四、列表,20,有序列表,有序列表与前面介绍的无序列表正好相反，所谓有序列表就是列表项的前导符号是有序的符号标识的列表。有序的符号标识包括：阿拉伯数字、小写英文字母、大写英文字母、小写罗马数字、大写罗马数字。,基本语法结构为：,项目名称,项目名称,项目名称,标签的,type,属性用来定义一个有序列表的前导字符，如果省略了,type,属性，浏览器会默认显示为“,1”,前导字符。,type,取值为,1,（阿拉伯数字）、,a,（小写英文字母）、,A,（大写英文字母）、,i,（小写罗马数字）、,I,（大写罗马数字）,21,图片的使用,HTML,和,XHTML,的一个重要特性就是可以在文本中加入图片，既可以把图片作为文档的内在对象加入，又可以通过超级链接的方式加入，同时还可以将图片作为背景加入到文档中。在文档中合理地使用图片会使浏览器显示的网页更活泼、引人入胜。,五、图片,22,在页面中插入图片,在,HTML,中，用,标签在网页中添加图片。图片是以嵌入的方式添加到网页中的。网页开发者可以通过多种方式获取网页设计中用到的图片，可以将现有的图片扫描到计算机内、从,Internet,上的,Web,站点获取以及通过制图软件自己动手制作。如果是“引用”的图片，一定要得到图片版权拥有者的同意才可使用。,在页面中插入图片的语法：,23,替换文本说明,有时，由于网络过忙或者用户在图片还没有下载完全就点击了浏览器的停止键，用户不能在浏览器中看到图片，这时替换文本说明就十分有必要了。替换文本说明应该简洁而清晰，能为用户提供足够的图片说明信息，在无法看到图片的情况下也可以了解图片的内容信息。,例如：,24,调整图片大小,在,HTML,中，通过,img,标签的属性,width,和,height,来调整图片大小，其目的是通过指定图片的高度和宽度加快图片的下载速度。如果不设置,width,和,height,属性，浏览器就要等到图片下载完毕才显示网页，因此延缓了其它页面元素的显示。,例如：,25,设置背景图片,背景属性将背景设置为图片。属性值为图片的,URL,。如果图片尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。,例如：,26,添加背景颜色,使用,body,标签的,bgcolor,属性可以给,HTML,页面指明背景颜色。其值可以是,16,进制数、,RGB,值或者是颜色的名称。,例如：,27,HTML,使用,标签来建立一个链接，通常,标签又称为锚。一个超级链接可以指向任意一个,Web,上的资源（一个,HTML,页面，一张图片，一段声音文件，一部电影等）。,创建超级链接的基本语法格式：,这是要链接的站点,(,文字、图片,),在,和,标签之间的文本文字，用户可以单击该文字来实现网页的浏览访问。,六、超级链接,28,同一页面内的书签链接,当网页的页面较长，且该页面是由几个部分组成时，不得不拖动浏览器的滑动条查看信息，这样既麻烦又费时。,HTML,恰好提供了跳转功能，能够非常方便、快捷地实现从网页当前的部分跳转到同一网页的另一部分。,建立书签语法：,链接内容,创建书签链接语法：,链接标题,29,不同页面间的书签链接,书签链接还可以在不同页面间进行链接。当单击书签链接标题，页面会根据链接中的,href,属性所以定的地址，将网页跳转到目标地址中书签名称所表示的内容。,建立书签语法：,链接内容,创建书签链接语法：,链接标题,30,超级链接路径,超级链接标签,的属性“,href”,定义了当前链接所指的目标地址，也就是超级链接路径。在,HTML,中，主要提供了,2,种路径：绝对路径和相对路径。,31,绝对路径,绝对路径就是主页上的文件或目录在硬盘上真正的路径（,URL,和物理路径）。例如，,C:xyzindex.html,代表了,index.html,文件的物理绝对路径；,admin1.html,假设,2.html,路径是：,c:Inetpubwwwrootsites admin2.html,1.html,文件和,2.html,文件在同一个文件夹，,1.html,文件链接到,2.html,文件，可以在,1.html,中写成：,同级目录文件链接,2,上级目录的文件链接,假设,1.html,路径是：,c:Inetpubwwwrootsites 1.html,假设,2.html,路径是：,c:Inetpubwwwrootsites admin2.html,1.html,文件是,2.html,文件的上一级目录的文件，,2.html,文件链接到,1.html,文件，可以在,2.html,中写成：,1.html,33,相对路径,假设,1.html,路径是：,c:Inetpubwwwroot1.html,假设,2.html,路径是：,c:Inetpubwwwrootsites admin2.html,1.html,文件是,2.html,文件的上两级目录中的文件，,2.html,文件链接到,1.html,文件，可以在,2.html,中写成：,1.html,假设,1.html,路径是：,c:Inetpubwwwrootsitesadmin1.html,假设,2.html,路径是：,c:Inetpubwwwrootsites reg2.html,1.html,文件和,2.html,分别在,c:Inetpubwwwrootsites,目录下的,admin,和,reg,两个文件夹内，,1.html,文件链接到,2.html,文件，可以在,1.html,中写成：,2.html,34,相对路径,3,下级目录的文件链接,假设,1.html,路径是：,c:Inetpubwwwrootsites 1.html,假设,2.html,路径是：,c:Inetpubwwwrootsites admin2.html,2.html,文件是,1.html,文件的下一级目录的文件，,1.html,文件链接到,2.html,文件，可以在,1.html,中写成：,2.html,假设,1.html,路径是：,c:Inetpubwwwrootsites 1.html,假设,2.html,路径是：,c:Inetpubwwwrootsites adminuser2.html,2.html,文件是,1.html,文件的下两级目录的文件，,1.html,文件链接到,2.html,文件，可以在,1.html,中写成：,2.html,35,七、表格,主要内容：,表格的构成,设置表格背景,设置表格表头,设置表格大小,设置表格数据对齐方式,cellspancing,与,cellpadding,属性,横跨行和列,添加表格高级标签,使用表格进行网页布局,36,7.1,表格简介,表格在网站开发中应用广泛，几乎多有的,HTML,页面或多或少地采用了表格。表格可以灵活地控制页面的排版，使整个页面层次清晰。学好网页制作，熟练掌握表格的各种属性是很有必要的。,37,表格标记,基本标签,:,table,定义一个表格,tr,定义表格中的行,td,定义表格中的数据,基本语法：,38,表格边框,可以使用,table,标签的,border,属性为表格添加边框并设置表格边框宽度，表格的边框按照数据单元将表格分割成单元格，边框的宽度以像素为单位。,可以通过,bordercolor,属性为边框添加颜色，其颜色值可以是,rgb(x,x,x),、,16,进制颜色值或代表颜色值的颜色名称。,39,表格表头,表头是指表格的第一行或第一列对该列或该行的表格内容进行说明。表头的文字样式为居中、加粗显示，通过,标签实现。,基本语法：,40,7.2,表格背景,表格可以添加背景颜色和背景图片，使用表格背景颜色或背景图片必须使表格中的文本数据颜色与表格的背景颜色或背景图片形成足够的反差。否则，将不容易分辩表格中的文本数据。,41,设置表格背景,可以使用,bgcolor,属性设置表格的背景颜色，其值可以是,rgb(x,x,x),、,#xxxxxx,或颜色名（,colorname,）。,例如：,或,42,设置表格单元背景,可以通过,bgcolor,属性和,background,属性为表格中的单元格添加背景颜色或背景图片。,43,7.3,表格大小,设置表格大小：,如果需要表格在网页中占用适当的空间，可以通过,width,和,height,属性指定像素值来设置表格的宽度和高度，也可以通过表格宽度占浏览器窗口的百分比来设置表格的大小。方法如下：,设置单元格大小：,width,属性和,height,属性不但可以设置表格的大小，还可以设置表格单元格的大小，为表格单元设置,width,属性或,height,，将影响整行或整列单元的大小。例如：,汽车名称,价格范围,级别,44,7.4,对齐方式,表格的对齐方式包括：,行数据水平对齐,单元格数据水平对齐,行数据垂直对齐,单元格数据垂直对齐,align,属性和,valign,属性混合使用,45,设置表格对齐方式,使用,align,属性设置表格在网页中的对齐方式，在默认的情况下表格的对齐方式为左对齐。,设置方法为：,这里,align,的值为,left,、,center,、,right,。将表格的对齐方式设置成右对齐，则表格的右边框自动地向浏览器右边框对齐。,46,设置表格数据对齐方式,1,行数据水平对齐,使用,align,可以设置表格中数据的水平对齐方式，如果在,标签中使用,align,属性，将影响整行数据单元的水平对齐方式。,align,属性的值可以是,left,、,center,、,right,，它的默认值为,left,。,2,单元格数据水平对齐,如果在某个,标签中使用,align,属性，那么,align,属性将影响一个表格单元数据水平对齐方式。,3,行数据垂直对齐,如果在,标签中使用,valign,属性，那么,valign,属性将影响整行数据单元的垂直对齐方式，这里的,valign,值可以是,top,、,middle,、,bottom,、,baseline,。它的默认值是,middle,。,47,设置表格数据对齐方式,4,单元格数据垂直对齐,如果在某个,标签中使用,valign,属性，那么,valign,只影响当前表格单元数据垂直对齐方式。,5,align,属性和,valign,属性混合使用,align,属性和,valign,属性除了上述用法外，有时在格式化表格单元数据时需要,align,属性和,valign,属性混合使用。,48,7.5,表格单元格的边距,改变表格单元格间距离和单元格内的数据填充距离可以通过,table,标签的,cellspancing,与,cellpadding,属性实现。,cellspancing,属性用来添加表格单元格之间的间距（以像素为单位或表格宽度百分比）。,cellpadding,属性用来添加表格单元格内数据填充间距（以像素为单位或表格宽度百分比）。,49,7.6,横跨行和列,横跨列是指一个表格单元格横跨多列；横跨行是指一个表格单元格横跨多个行。表格横跨行和列属性，有时横跨行和列又称为合并单元格。,表格横跨行和列属性：,colspan=“”,指明该单元格应有多少列的跨度，在,th,和,td,标签中使用。,rowspan=“”,指明该单元格应有多少行的跨度，在,th,和,td,标签中使用。,50,7.7,表格的高级标签,使用表格的高级标签可以为表格中相似的区域添加边界，在表格标题上添加行或文本格式信息，定义表格的脚标等。,表格的高级标签如下：,thead,定义表格的标题区域。,tbody,定义表格的主题区域。,tfoot,定义表格的脚标区域。,colgroup,定义表格的列组。,col,为表格中的一个或多个列定义属性值。只能在表格或,colgroup,里使用这个元素。,51,7.8,使用表格进行网页布局,使用个非,HTML,时一常普遍的应用就是用,HTML,表格功能给网页进行布局。下图就是利用,HTML,表格对网页进行布局的效果，此布局定义了两个表格，上下各一个表格，将这两个表格的,border,值设置为,0,。如果将,border,值设置为,1,，则很容易看出此页面的表格布局。,52,八、表单,主要内容：,创建单行文本框,创建口令文本框,创建提交与复位按钮,创建单选按钮与复选按钮,创建多行文本框,创建下拉框,上传文件,处理表单,定义域集合,使用,Tab,键与快捷键,53,8.1,单行文本框,一个表单是一块可以含有表单元素的区域，可以使用,标签在网页中创建表单。,例如：,54,8.2,口令文本框,在进行网上注册的时候，用户使用的是提交用户名和口令的表单。口令文本框隐藏了当前要填写的内容，使信息更加保密。,例如：,55,8.3,提交与复位按钮,使用提交按钮（,submit,）可以将填写在文本框中的内容发送到服务器，复位按钮（,Reset,）使表单文本框的内容返回初始值。,例如：,56,8.4,单选按钮与复选框按钮,单选按钮允许用户从选择列表中选择一个单项的输入字段类型。当,type=“radio”,是表示该输入是一个单选按钮。,复选按钮允许用户从选择列表中选择一个或多个选项的输入字段类型。当,type=“checkbox”,是表示该输入是一个复选按钮。,57,8.5,多行文本框,多行文本框是在表单中应用比较广泛的文本输入区域。多行文本框主要用于得到用户的评论和一些反馈信息，用户可以在里面书写文字，字数没有限制。默认的字体是固定的。可以通过,标签创建多行文本。,textarea,标签的属性,：,Cols,指定文本区域的列数。,Row,指定文本区域的行数。,Disabled,第一次加载的时候文字区域不可用。,Readonly,将文本区域的内容设置为不可修改（可选属性）。,Name,：,指定文本区域的名称（可选属性）。,58,8.6,下拉框,如果一个列表选项过长，可以考虑使用下拉框。下拉框可以使用户选择其中的一个选项，在选择列表中仅有一个是可选项，单击右边下拉按钮便可进行选项的选择。下拉框通过,select,标签、,option,标签来定义。,其属性如下表。,59,8.7,处理表单,通常情况下，用户通过,submit,按钮来提交表单，收集的信息发送到,Web,服务器上。这一过程通过,HTML,文档中,action,属性指定所收集的信息发送到哪里。如何处理信息，可以通过,form,标签的特殊属性实现。,处理表单的通用语法模式：,60,8.8,定义域集合,在设计网页时，如果表单中包含多个控件，可以通过,标签将相关主题的控件或标签组合在一起（定义域集合），这样使网页中的表单分布更合理、结构更清晰，从而增加了网页的易读性；同时也有利于,tab,键在元素之间的移动。,在定义表单的域集合时，往往要用,标签为,fieldset,设置标题，还可以使用,align,属性设置标题的对齐方式。,用户信息,姓名：,年龄：,性别：,籍贯：,61,8.9,使用,Tab,键与快捷键,1.,使用,Tab,键,浏览者可以通过使用,Tab,键在表单的各个组件之间移动。默认情况下，,Tab,键的移动顺序为顺序移动。可以通过,tabindex,属性来实现。,例如：,姓名：,年龄：,性别：,籍贯：,2.,快捷键,可以通过,accesskey,属性给,HTML,中的元素指定一个快捷方式，指定方法如下：,62,九、多媒体,主要内容：,会滚动的文字,音乐,创建视频,63,9.1,会滚动的文字,滚动文字可以增加文字的动态效果，引起浏览者的注意，丰富页面的内容。,64,创建滚动文字标签,使文字在网页中动态地滚动好像只是,flash,的专利，其实则不然，可以通过,HTML,的,同样能够达到文字在网页中移动的效果。但是,只适用于,Internet Explorer,，,并不是标准标签，这里并不推荐使用这个扩展标签。,例如：,这是会滚动的文字！,65,设置滚动文字的属性,滚动文字的属性用来控制文字的移动方向、滚动方式、文字滚动速度以及移动文字的外观等多个属性。常见的属性有,direction,、,scrollamount,、,align,、,bgcolor,等。,1,设置文字滚动的方向,可以通过,direction,属性来设置文字滚动的方向，该属性有,left,、,right,属性值，,left,为默认属性值，在不设置,direction,属性时文字的滚动顺序为从右向左移动。,2,设置滚动文字速度,与,属性用来控制滚动文字的速度。,scrollamount,属性用来设置滚动过程中文字每次移动的像素数，当,scrollamount,取值较小时，文字滚动的较慢；反之文字滚动较快。,scrolldelay,属性用来设置文字移动的延迟，以毫秒为单位。值越小，文字滚动的越快（文字滚动速度与计算机的处理能力有关）。,66,设置滚动文字的属性,3,设置滚动文字字幕区域,使用,height,和,width,属性设置滚动文字字幕区域大小，在默认情况下，滚动文字字幕区域为整个,IE,浏览器屏幕。这两个属性值可以取绝对的像素数，也可以取相对的百分比。,67,9.2,背景音乐,为网页添加背景音乐的方法一般有三种，第一种是通过普通的,标签来添加，一种是通过,标签来添加,还有一种直接建立声音的链接。,68,嵌入背景音乐,1.,标签,Internet Explorer,自带了一个内置音频解码器，支持特殊的标签,，该标签可以把声音文件集成到文档中，在后台作为背景音乐播放。,基本语法：,2.,标签,embed,可以用来插入各种多媒体，格式可以是,Midi,、,Wav,、,AIFF,、,AU,、,MP3,等等。,基本语法：,3.,建立声音的链接,在设计网页的时候可以创建一个背景音乐的链接，单击网页上的链接后，就会播出背景音乐。当建立声音链接时，提倡使用万维网上的音频格式。建立声音的链接方法如下：,点击播放音乐,春风,69,9.3,创建视频,在网页中创建视频与创建音频的方法基本相同，可以通过创建一个视频的链接实现视频在网页中的加载。当浏览者选中视频连接时，浏览器将播放该视频。如果浏览器不能播放该视频格式，则会自动打开本地计算机上已安装支持该格式的视频播放器软件。如果本地计算机上没有安装所需的视频播放软件，则浏览器会提示浏览者是否要保存该视频文件到本地的计算机上。,70,创建内部视频,1,使用,标签创建视频,所谓内部视频就是视频文件可以直接在网页中播放。可以通过,标签创建内部视频。创建方法如下：,2,使用,标签创建视频,一些网页设计者利用,标签的,dynsrc,属性在网页内部添加视频文件。,dynsrc,属性用来指定视频文件所在位置。,例如：,71,11 CSS,语法基础,CSS,意思就是叠层样式表（,Cascading Style Sheets,），使用,CSS,的优点在于将格式从功能中分离出来。它定义了,HTML,元素的显示，是一种对,web,文档添加样式的简单机制。,主要内容：,CSS,定义,CSS,语法,CSS,类型,伪类与为元素,72,11.1,理解,CSS,1,基本语法,CSS,规则由选择器（,selector,）、属性（,property,）和值（,value,）三部分组成。,基本格式如下：,selector property:value,2,组合,为了提高效率，可以将相同属性和值赋给多个选择器，并用逗号将选择器分开。例如：,h1,h2,h3,h4,h5,h6,color:blue,73,11.1,理解,CSS,3,选择器类,选择器类可以将同一类型的,HTML,元素定义出不同的样式。例如：,p.right text-align:right,p.center text-align:center,居右显示。,居中显示。,4,ID,选择器,可以使用,id,选择器来定义,HTML,标签的样式。,id,选择器可用“,#”,来定义。例如：,p#idone text-align:center;color:blue,或,#idone text-align:center;color:blue,74,11.1,理解,CSS,5,关联选择器,可以为嵌入的其它标签定义样式，格式为：,h3 em color:blue,指定了嵌套在,标签中的,标签所包含的内容字体颜色为蓝色。具有这样形式的选择器称为关联选择器（,contextual selector,），两个标签之间用空格分隔（,h3,和,em,之间用空格隔开）。类似的还有：,h3 b color:blue,h2 em b color:blue,75,11.2 CSS,类型,CSS,按其位置不同主要分为以下三种类型：,行内样式表（,Inline Style Sheet,）,内部样式表（,Intenal Style Sheet,）,外部样式表（,Extenal Style Sheet,）,76,行内样式表,行内样式是定义在,HTML,标签里，只对所在的标签有效。使用行内样式就失去了样式表的优势，将内容和形式相混淆了，一般这类方法在个别元素需要改变样式时使用。,77,内部样式表,内部样式表是使用,标签在,head,区域内定义样式，内部样式表只对所在的网页有效，缺点是不利于多个网页的维护。,例如：,p.parghtext-align:center,hr.linecolor:blue,内部样式表,78,外部样式表,外部样式表可以集中控制和管理多个网页的格式和布局，省去了对这些网页的每个标签都要分别进行格式化的麻烦。与内部样式表不同，外部样式表作为单独的文件存储。如果对外部样式表进行修改，结果将影响到引用该样式表的所有网页。,引用方法：,79,多重样式表,样式表的优先级依次是行内样式表（,Inline Style Sheet,），内部样式表（,Intenal Style Sheet,）外部样式表（,Extenal Style Sheet,），浏览器缺省（,Browser Default,）。,如果一些属性被相同的选择器设置成不同的样式，值就会被更为具体的样式所继承，也就是按照样式表的优先级进行继承。,80,11.3,伪类与伪元素,伪类是一种特殊的类选择器，用来指定一个或者与其相关的选择符的状态。,伪类由四部分组成：选择器（,selector,）、伪类（,pseudo-class,）、属性（,property,）、值（,value,）。其语法结构如下：,选择器,:,伪类,属性,:,值,selector:pseudo-class property:value,此外，,CSS,类还可以和伪类混合使用。格式如下：,选择器,.,类,:,伪类,属性,:,值,，例如：,a.two:link color:#ff0000,selector.class:pseudo-class property:value,81,11.3,伪类与伪元素,伪元素的语法规则与伪类语法规则类似，伪元素用于为一个选择器添加特殊效果。,其语法结构如下：,选择器,:,伪元素,属性,:,值,selector:pseudo-element property:value,伪元素同样可以与,CSS,类混合使用，其结构如下：,选择器,.,类,:,伪元素,属性,:,值,selector.class:pseudo-element property:value,82,