网页设计案例教程.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,第,1,章,HTML,语言简介,1.1 【,案例,1】,第,1,个,HTML,网页,1.2 【,案例,2】,“,中国诗词佳句,作者,”,网页,1.3 【,案例,3】,“,鲸鱼和螃蟹,”,网页,1.4 【,案例,4】,“,图像切换,”,网页,1.5 【,案例,5】,“,链接技术演示,”,网页,1.6 【,案例,6】,“,中国的世界文化遗产,”,网页,1.7 【,案例,7】,“,FLASH,技术说明,”,网页,1.8 【,案例,8】,“,最新消息公告,”,网页,1.9 【,案例,9】,“,水中倒影,”,网页,1.10 【,案例,10】,“,飘动的枫叶,”,网页,1.1 【,案例,1】,第,1,个,HTML,网页,1,HTML,文件特点,HTML,文件是标准的,ASCII,文件，它看起来像是加入了许多被称为链接签（,tag,）的特殊字符串的普遍文本文件。从结构上讲，,HTML,文件由元素（,element,）组成，组成,HTML,文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是,“,容器,”,，即它们有起始标记和结尾标记。元素的起始标记叫做起始链接签（,start tag,），元素的结束标记叫做结尾链接签（,end tag,），在起始链接签和结尾链接签中的部分是元素体。每一,个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明。,一个元素的元素体中可以有其他的元素。“属性名”、“,=,”,和“属性值”合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开。,需要说明的是，,HTML,是一门发展很快的语言，早期的,HTML,文件并没有如此严格的结构，因而现在流行的浏览器为了保持对早期,HTML,文件的兼容性，也支持不按上述结构编写的,HTML,文件。另外，各种浏览器对,HTML,元素及其属性的解释也不完全一样。一般来讲，,HTML,的元素有下列,3,种表示方法。,（,1,）,文件或超文本,（,2,）,文本或超文本,（,3,）,第,3,种写法仅用于一些特殊的元素，例如分段元素,P,，它仅仅通知,WWW,浏览器在此处分段，因而不需要界定作用范围，所以它没有结尾链接签。,HTML,语言的标记种类很多，图,1-1-2,中常用的标记含义介绍如下。注意：,HTML,文档中的起始链接签,“,”,和元素名称（例如,BODY,）之间不能有空格。,2,网页基本结构标记,（,1,）,：它是,HTML,文档中最基本的标记，不可缺少。,表示,HTML,文档的开始，,表示,HTML,文档的结束。,（,2,）,：它是网页头部标记。可以提高网页文档的可读性，向浏览器提供一个信息。它可以忽略，但一般不予忽略。,（,3,）,：它是网页名称标记，是,标记内唯一一个必须出现的元素，有,标记就一定要有,标记。,TITLE,元素是文件头中的元素，它也只能出现在文件头中。,TITLE,标明该,HTML,文件的题目，是对文件内容的概括。一个好的题目应该能使读者从中判断出该文件的大概内容。文件的题目一般不会显示在文本窗口中，而以,窗口的名称显示出来。除了标识窗口外，当将某一个网页存入书签或文件时，,TITLE,还用做书签名或缺省的文件名。,TITLE,的长度没有限制，但过长的题目会导致转行，一般情况下它的长度不应超过,64,个字符。,（,4,）,：它是网页主题内容标记。其中包含了网页的正文内容，一般不可缺少。,（,5,）,：使用,标记中的,BGCOLOR,属性，可以设置网页的背景颜色。使用的格式有以下两种。,在第一种格式中，,RR,、,GG,、,BB,可以分别取值为,00FF,的十六进制数。,RR,、,GG,、,BB,分别用来表示颜色中的红色、绿色和蓝色成分的多少，数值越大，颜色越深。红、绿、蓝三色按一定比例混合，可以得到各种颜色。,例如，,RR=FF,，,GG=FF,，,BB=00,，表示为黄色。如果,RRGGBB,取值为,000000,，则为黑色；,RRGGBB,取值为,FFFFFF,，则为白色；,RRGGBB,取值为,FF8888,，,则为浅红色。,第二种格式是直接使用颜色的英文名称来设定网页的背景颜色。例如：,：用来设置网页的背景颜色为蓝色。,：用来设置网页的背景颜色为红色。,：用来设置网页的背景颜色为白色。,（,6,）,：它是图像标记。用来加载图像与,GIF,动画。在网页中加载,GIF,动画的方法与加载图像的方法一样。,GIF,动画文件的扩展名也是,.gif,，文件格式是,GIF89A,格式。制作,GIF,动画的软件有很多，例如,Fireworks,和,Ulead GIF Animator 5.0,等。,（,7,）,SRC,：它是依附于其他标记的一个属性，依附于,标记时，用来导入图像与,GIF,动画。其格式如下：,（,8,）,：它是换行标记，表示以后的内容移到下一行。它是单向标记，没有,。,（,9,）,：它是保留文本原来格式的标记。它的作用是将其中的,文本内容按照原来的格式显示。否则浏览器会自动取消文本中的空格。,（,10,）,：它是粗体标记。可使其中的文字变为粗体。,3,其他常用标记,（,1,）,：它是正文的第三级标题标记。此外，还有第一、二、三、四、五、六级标题标记，分别为,、,、,、,、,和,。级别越高，文字越小。,一般情况下，浏览器对标题作如下解释。,H1,黑体，特大字体，居中，上下各有两行空行。,H2,黑体，大字体，上下各有一到两行空行。,H3,黑体（斜体），大字体，左端微缩进，上下空行。,H4,黑体，普通字体，比,H3,缩进更多，上边一空行。,H5,黑体（斜体），与,H4,相同缩进，上边一空行。,H6,黑体，与正文有相同缩进，上边一空行。,Hn,可以有对齐属性，,ALIGN,#,，,“,#,”,表示,Left,（标题居左）、,Center,（标题居中）和,Right,（标题居右）。例如：,标题,2,（,2,）,：它是段落标记。它的作用是将其内的文字另起一段显示。段与段之间有一个空行。,HTML,的浏览器是基于窗口的，用户可以随时改变显,示区的大小，所以,HTML,将多个空格以及回车等效为一个空格，这是和绝大多数字处理器不同的。段落标记也可以有多种属性，比较常用的属性是,Aligh,#,。,“,#,”,可以是,Left,、,Center,或,Right,，其含义同上文。,4,文件的路径名,（,1,）绝对路径：绝对路径是写出全部路径，系统按照全部路径进行文件的查找。绝对路径中的盘符后用,“,：,”,或,“,：,/,”,，各个目录名之间以及目录名与文件名之间，应用,“,”,或,“,/,”,分隔开。绝对路径名的写法及其含义如表所示。,（,2,）相对路径：相对路径是以当前文件所在路径和子目录为起始目录，进行相对的文件查找。通常都采用相对路径，这样可以保证站点中的文件整体移动后，不会产生断链现象。相对路径名的写法及其含义如表所示。,绝对路径名,含,义,HREF=,“,HTML0.htm,”,HTML0.htm,放在,E,盘的,DRAWTD,目录下的,TD,子目录中,绝对路径名的写法及其含义,5,URL,URL,（,Uniform Resource Locator,）即统一资源定位器，,WWW,上的地址编码，是文件名的扩展。它指出了文件在,Internet,中的位置。它存在的目的在于统一,WWW,上的地址编码，给每一个网页指定的地址，这样就不会出现重复或由于编码不统一而出现无法浏览等问题。当用户查询信息资源时，只要给出,URL,地址，,WWW,服务器就可以根据它找到网络资源的位置，并将它传送给用户的计算机。通常，当用户用鼠标单击网页中的链接点时，就将,URL,地址的请求传送给了,WWW,服务器。,相对路径名,含,义,HREF=,“,HTML0.htm,”,HTML0.htm,是当前目录下的文件名,HREF=,“,DRAWTD/HTML0.htm,”,HTML0.htm,是当前目录中,“,DRAWTD,”,目录下名字为,HTML 0.htm,的文件,HREF=,“,DRAWTD/TD/HTML0.htm,”,HTML0.htm,是当前目录中，,“,DRAWTD/TD,”,目录下名字为,HTML0.htm,的文件,HREF=,“,./HTML0.htm,”,HTML0.htm,是当前目录的上一级目录下名字为,HTML0.htm,的文件,HREF=,“,././HTML0.htm,”,HTML0.htm,是当前目录的上两级目录下名字为,HTML0.htm,的文件,在单机系统中，定位一个文件需要路径和文件名；对于遍布全球的,Internet,，显然还需要知道文件存放在哪个网络的哪台主机中才行。另外，单机系统中，所有的文件都由统一的操作系统管理，因而不必给出访问该文件的方法；而在,Internet,上，各个网络，各台主机的操作系统都不一样，因此必须指定访问该文件的方法。,一个完整的,URL,地址通常由通信协议名（访问该资源所采用的协议，即访问该资源的方法）、,Web,服务器地址（存放该资源主机域名地址，在因特网上，主机名可以使用主机域名地址或,IP,地址，通常以字符形式出现）、文件在服务器中的路径和文件名四部分组成。例如,Transfer Protocol,），,是,Web,服务器地址（主机域名地址），,/DRAWTD/TD/,是文件在服务器中的路径，,HTML0.html,是文件名。,在文件名之后，可以加,“,#,”,号和锚点名。有时也可以在文件名之后加问号（,“,？,”,），然后加查询字符串。,与单机系统绝对路径和相对路径的概念类似，统一资源定位器也有绝对,URL,和相对,URL,之分。上文所述的是绝对,URL,。相对,URL,是相对于用户最近访问,的,URL,。比如现在观看一个,URL,为,【,案例,2】,“,中国诗词佳句,作者,”,网页,1,文字的字体大小和颜色,（,1,）字体大小：,HTML,文件可以有,7,种字号，,1,号最小，,7,号最大。默认字号为,3,，可以用,设置默认字号。设置文本的字号有两种办法，一种是设置绝对字号，,；另一种是设置文本的相对字号，,。用第,2,种方法时,“,+,”,号表示字体变大，,“,-,”,号表示字体变小。,（,2,）字体颜色：字体的颜色用,指定，,#,可以是,6,位十六进制数，分别指定红、绿、蓝的值。也可以使用,16,种标准颜色，如表所示。,色,彩,名,十六进制值,色,彩,名,十六进制值,Aqua,（水蓝色）,#00FFFF,Navy,（藏青色）,#000080,Black,（黑色）,#000000,Olive,（茶青色）,#808000,Blue,（蓝色）,#0000FF,Purple,（紫色）,#800080,Fuchsia,（樱桃色）,#FF00FF,Red,（红色）,#FF0000,Green,（绿色）,#808080,Silver,（银色）,#C0C0C0,Gray,（灰色）,#008000,Teal,（茶色）,#008080,Line,（石灰色）,#00FF00,While,（白色）,#FFFFFF,Maroon,（褐红色）,#800000,Yellow,（黄色）,#FFFF00,例如，,“,字体大小和颜色,”,网页（,HTML2-2.htm,）代码如下。,字体大小和颜色,字体大小和颜色,字体大小和颜色,字体大小和颜色,字体大小和颜色,闪烁的文本,（,3,）闪烁：使用,BLINK,标记可以使文本闪烁，闪烁频率为,1,秒一次，举例如下。,闪烁的文本,2,字体风格,字体风格分为物理风格和逻辑风格。字体的物理风格直接指定字体，物理风格的字体有,黑体、,斜体、,下画线和,打字机体等，如表所示。,例如，,“,各种字体风格,”,网页代码如下（,HTML2-3.htm,）。,各种字体风格,标,记,符,功,能,标,记,符,功,能,粗体,删除线,大字体,下标,斜体,上标,删除线,固定宽度字体,小字体,下画线,各种字体风格,各种字体风格,各种字体风格,各种字体风格,各种字体风格,各种字体风格,各种字体风格,各种字体风格,字体的逻辑风格用来指定文本的作用，有,强调、,特别强调、,源代码、,例子、,键盘输入、,变量、,定义、,引用、,较小、,较大、,上标和,下标。,3,边框包围的文字,可以通过,标记定义文字的边框。输入下面的,HTML,代码（保存在名称为,“,HTML2-4.htm,”,文件中）。,图像的大小和边框,增加了边框的文字,4,添加注释,无论是编写程序还是制作网页，为所做的工作添加注释都是一种良好的工作习惯。实际上，添加注释是任何程序开发工作必须遵循的规范之一。,HTML,的注释有开始标记符,“,”,构成。这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。该标记可以添加在,HTML,代码的任何位置。,1.3 【,案例,3】,“,鲸鱼和螃蟹,”,网页,1,调整图像大小和给图像加边框,在网页中插入图像时使用的标记是,，用来加载,GIF,图像与动画，,“,SRC,”,属性用来输入图像的路径。在网页中加载,GIF,动画的方法与加载,GIF,图像的方法一样。,GIF,动画文件的扩展名也是,.gif,，文件格式是,GIF89A,。,（,1,）调整图像大小：使用,标记中的,HEIGHT,和,WIDTH,属性可以调整图像的大小。,HEIGHT,（决定图像的高）和,WIDTH,（决定图像的宽）的取值单位为像素。,（,2,）给图像加边框：使用,标记中的,BORDER,属性可以给图像加边框。,BORDER,的取值单位为像素，当它的取值为,0,或者不加,BORDER,属性时，则没有边框。,通过,标记中的,HEIGHT,和,WIDTH,属性调整图像，虽然可以改变图像在网页中的大小，但是调整过大会使图像严重失真。合理设置,HEIGHT,和,WIDTH,属性，才能得到最好的显示效果。,2,背景平铺图像和图像文字说明,（,1,）设置背景平铺图像：使用,标记中的,BACKGROUND,属性，可设置网页的平铺背景图像，其格式如下。,（,2,）添加图像文字说明：为了增强图像在网页中的显示效果，可以为图像添加文字说明。当鼠标移到图片上方时，会出现说明文字。在关闭浏览器中的载入图像命令时，说明文字可以替代图像。使用,标记的,ALT,属性可以为图像添加文字说明。,3,调整图像和文本的相对位置,在网页中，经常需要将图像和文本放在一起进行显示。使用,标记的,ALIGN,属性可以调整图像与文本的相对位置。使用,标记中的,VSPACE,和,HSPACE,属性可以调整图像与文本间的距离。,VSPACE,（图像与文本上下的距离）和,HSPACE,（图像与文本左右的距离）的单位均为像素。,标记中的,ALIGN,属性用于调整图像与文字的对齐方式，主要含义如下所述。,（,1,）,ALIGN,项缺省时：图像的底部与其他文本或图像的底部对齐。,（,2,）,ALIGN=top,：图像的顶部与其他文本或图像的顶部对齐。,（,3,）,ALIGN=middle,：图像的中间与其他文本或图像的中部对齐。,（,4,）,ALIGN=bottom,：图像的底部与其他文本或图像的底部对齐。,（,5,）,ALIGN=left,：图像位于屏幕左边。,（,6,）,ALIGN=right,：图像位于屏幕右边。,1.4 【,案例,4】,“,图像切换,”,网页,1,添加背景音乐,使用,标记可以在网页中插入背景音乐。,标记可以放在,与,标记内的任何地方。引导音乐文件的属性是,SRC,，其格式如下。,2,在网页中插入,Flash,动画,在网页中直接包含多媒体对象最常用的两个标记是,标记和,标记。,（,1,）,标记：使用,标记不仅可以在网页中插入,Flash,动画，还可以使用下载并显示由插件支持的其他多媒体应用程序。使用,标记可以在网页中插入,Flash,对象同添加背景音乐的方法一样，,标记可以放在,与,标记内的任何地方。引导,Flash,动画文件的属性是,SRC,，格式如下：,当浏览器遇到,标记时，会加载其中指定的文件并确定它的,MIME,类型。,MIME,信息告知浏览器正在下载的文件类型。然后浏览器查找与该,MIME,类型一致的插件，如果有就使用，如果没有则会显示一条错误信息，并且提示用户下载该插件。,（,2,）,标记：该标记可以使网页中包含,JavaApple,、视频和音频等多媒体及其他文件。当浏览器遇到,标记时，会加载相应的文件并根据该标记包含属性的值来显示它。,1.5 【,案例,5】,“,链接技术演示,”,网页,1,链接文件使用的,HTML,标记,链接也叫超文本链接。在网页中加入超文本链接，就是通过单击一部分文字、图像或图像中的一个区域，即可调出另一个网页或本网页的另一部分内容。,HTML,文件的链接是通过链接标记,来实现的。在,标记中除标记名,“,A,”,外还包括一些属性。,HREF,是链接标记中一个最常用的属性。该属性用来指出所要链接的文件的路径（或目录）和名称或,URL,；其简单的结构形式如下。,文字,所有写在起始标记,和结束标记,之间的文字构成一个实际的链接，当网页在浏览器内显示时，这些文字将以蓝色高亮度或带有下画线的形式出现。,如果需要链接的文件都放在本机磁盘上，则这种链接叫本地链接，它不必链接网络，只要本地的机器上有一个编辑器和浏览器就足够了。如果需要链接的文件在网络上，则需要网络链接。网络链接需要知道网址（,URL,）。,2,使用图像或动画的链接,用图像或动画的链接，就是在单击图像或动画后，即可调出与之链接的网页文件或本网页中的一段内容。建立图像或动画的链接的方法是在链接标记,的中间加入一个,标记，其格式如下。,加入了链接的图像或动画会自动产生一个外框，以示与一般的图像或动画的区别。,1.6 【,案例,6】,“,中国的世界文化遗产,”,网页,1,在同一个网页中建立链接的,HTML,标记,在同一个网页文件中建立链接，需要做以下工作。,（,1,）在文件的前面需要列出链接的标题文字，它们相当于文章的目录。同时将这些文字与相应的锚名（即定位名）建立链接。所谓,“,锚名,”,是指网页中能被链接到的一个特定位置。建立链接时，要在锚名前加一个,“,#,”,符号，其格式如下。,标题名字,（,2,）为被链接的内容起一个名字，该名字叫锚名，其格式如下。,锚名的定义要放在相应标题对应的内容前面。,2,建立电子邮件链接,如果将,HREF,属性值指定为“,MAILTO:,电子邮件地址”，就可以获得电子邮件链接的效果。例如，使用下面的,HTML,代码可以设置电子邮件的超链接。,邮箱地址：,shenda,当浏览网页的用户单击了指向电子邮件的超级链接后，系统将自动启动邮件客户程序（对于安装了,Windows 98/2000,以上操作系统的计算机，默认时启动,Outlook Express,），并将指定的邮件地址填写到,“,收件人,”,栏中，用户可以编辑并发送该邮件。,如果是第一次启动,Outlook Express,，会要求进行软件设置。,3,链接到其他页面中的锚点,通过前面的案例，可以看出从一个文件链接到另外一个文件与同一个文件中的链接的格式有所不同。那么，能不能使用一个命令，链接到其他文件的指定位置呢？,在网页中建立文字链接的,HTML,代码是,文字,。只要将,“,被链接的文件名或,URL,”,替换为,“,要链接的文件名或,URL,加,#,加锚点名称,”,即可。例如，,天坛,标记，即可建立一个到,HTMLABC.htm,网页文档中的,“,天坛,”,锚点的链接。,1.7 【,案例,7】,“,FLASH,技术说明,”,网页,1,设置框架和修饰框架,（,1,）设置框架：框架就是把一个网页页面分成几个单独的区域（窗口），每个区域显示一个独立的网页，该部分可以是一个独立的,HTML,文件。因此，框架可以实现在一个网页内显示多个,HTML,文件。一个有,n,个区域的框架网页来说，每个区域有一个,HTML,文件，整个框架结构也是一个,HTML,文件，因此该框架网页有,n+1,个,HTML,文件。设置框架需要使用标记,来取代,标记。,标记有两个属性：,ROWS=,“,n1,n2,n3,”,：纵向设置框架；,COLS=,“,n1,n2,n3,”,：横向设置框架。,其中，,n1,、,n2,、,n3,为开设的框架占整个页面的百分数。,（,2,）修饰框架：修饰框架需要使用,标记，它在,标记之间。,标记有,6,个属性，介绍如下。,RC=,“,URL,”,属性：用来链接一个,HTML,文件，如果没有该属性，则窗口内无内容。,NAME=,“,窗口名称,”,属性：给窗口命名。,MARGINWIDTH=n,属性：,用来控制窗口内的内容与窗口左右边缘的间距。,n,为像素个数，默认值为,1,。,MARGINHEIGHT=n,属性：用来控制窗口内的内容与窗口上下边缘的间距。,n,为像素个数，默认值为,1,。,SCROLING=YES,、,NO,或,AUTO,属性：用来确定窗口是否加滚动条。选,YES,时，为要滚动条；选,NO,时，为不要滚动条；选,AUTO,时，可以加滚动条，根据内容是否可以完全在窗口内全部显示出来，来决定是否要滚动条。默认为,AUTO,。,NORESIZE,属性：如果设置了此属性，则窗口不可被用户用鼠标调整大小；如果没设置此属性，则窗口可以被用户用鼠标调整大小。,FRAMEBORDER=n,属性：可以控制是否显示框架边框。,n,取值为,1,，表示生成,3D,边框（此为默认设置）；,n,取值为,0,，则不显示边框。只有将所有相邻框架的边框都设置为,0,，才能隐藏边框。,2,网页框架举例,（,1,）开设纵向窗口：纵向开设,3,个窗口，各占,50%,、,30%,和,20%,，各窗口内分别加载,HTML,文件为,HTML2-1.htm,、,HTML2-2.htm,和,HTML2-3.htm,。在浏览器中观察该网页的结果。打开记事本程序，输入如下,HTML,代码。将该,HTML,文件以名字,HTML7-2.htm,保存在“,DRAWTD,”,目录下。,（,2,）开设横向窗口：横向开设三个窗口，各占,50%,、,30%,和,20%,，各窗口内分别加载,HTML,文件为,HTML2-1.htm,、,HTML2-2.htm,和,HTML2-3.htm,。在浏览器中观察该网页的结果。打开记事本程序，输入如下,HTML,代码。将该,HTML,文件以名字,HTML7-3.htm,保存在,“,DRAWTD,”,目录下。,（,3,）同时开设横向和纵向窗口：纵向开设两个窗口，各占,40%,和,60%,，上边的窗口横向开设两个窗口，各占,50%,和,50%,，下边的窗口横向开设两个窗口，各占,40%,和,60%,。分别加载,HTML,文件为,HTML2-1.htm,、,HTML2-2.htm,、,HTML2-3.htm,和,HTML2-4.htm,。在浏览器中观察该网页的结果。打开记事本程序，输入如下,HTML,代码。将该,HTML,文件以名字,HTML7-4.htm,保存在,“,DRAWTD,”,目录下。,3,窗口间的链接,实现窗口间的链接需要使用,TARGET,属性。,TARGET,属性可以在,HTML,的多个标记内使用。其中，常用的方式有两种。,（,1,）在,标记中使用的格式如下：,例如：横向开设两个窗口，各占,40%,和,60%,，名字分别为,CK1,和,CK2,。左边窗口加载的,HTML,文件为,HTMLLEFT.htm,，右边窗口加载的,HTML,文件为,HTML2-1.htm,。左边窗口中有,4,行链接文字。如果单击左边窗口内的,“,中国诗词佳句,作者,”,链接文字，则可以在右边窗口（名字为,CK2,）内显示出,HTML2-1.htm,文件的内容。如果单击左边窗口内的,“,鲸鱼和螃蟹,”,链接文字，则可以在右边窗口内显示出,HTML3-1.htm,文件的内容。如果单击左边窗口内的,“,图像切换,”,链接文字，则可以在右边窗口内显示出,HTML4.htm,文件的内容。如果单击左边窗口内的,“,链接技术演示,”,链接文字，则可以在右边窗口内显示出,HTML5.htm,文件的内容。,打开记事本程序，输入如下,HTML,代码。将该,HTML,文件以名字,HTML7-5.htm,保存在,“,DRAWTD,”,目录下。,其中，,HTMLLEFT.htm,的,HTML,文档如下。,左框架窗口内的链接文字,中国诗词佳句,-,作者,鲸鱼和螃蟹,图像切换,链接技术演示,在浏览器中观察该网页的结果如图所示，单击,“,鲸鱼和螃蟹,”,链接文字的结果如图所示。,（,2,）在,标记中使用：如果链接的文件均在一个窗口内显示，则可以使用,标记。,标记的格式如下：,其中，,window-name,可以是窗口的名字，也可以是：,_blank,：在一个新的浏览器窗口中打开链接的文档。,_parent,：在框架的父框架或父窗口打开链接的文档。,_self,：默认打开方式，将链接的文档载入链接所在的同一框架或窗口。,_top,：将链接的文档载入整个浏览器窗口，从而删除所有框架。,1.8 【,案例,8】,“,最新消息公告,”,网页,1,什么是,DHTML,技术,动态,HTML,（,Dynamic HTML,，,DHTML,）是,HTML,、,CSS,和客户端脚本的一种集成。,DHTML,技术在原有技术的基础上，可分为,3,个方面：一是,HTML,，也就是页面中的各种页面元素对象。它们是被动态操作的内容；二是,CSS,，,CSS,属性也是动态操作的内容，从而获得动态的格式效果；三是客户端脚本（例如,JavaScript,），它实际操纵,Web,页上的,HTML,和,CSS,。,使用,DHTML,技术，可以使网页设计者创建出能够与用户交互并包含动态内容的页面。实际上，,DHTML,是网页设计者可以动态操纵网页上的所有元素，甚至是在这些页面被装载以后的一种语言。利用,DHTML,，网页设计者可以动态地隐藏或显示内容、修改样式定义、激活元素以及为元素定义行为。,DHTML,还可以使网页设计者在网页上显示外部信息，方法是将元素捆绑到外部数据源（如文件和数据库）上。所有这些功能都可以用浏览器完成而无需请求,Web,服务器，同时也无需重新装载网页。这是因为一切功能都包含在,HTML,文件中，随网页一起下载到浏览器端。,可见，,DHTML,技术是一种非常实用的网页设计技术。实际上，,DHTML,早已广泛地应用到了各类网站中，成为高水平网页必不可少的组成部分。,2,DHTML,的使用技巧,IE,为,DHTML,对象提供了,4,个可读写的属性来动态操作页面元素的内容：,innerText,、,outerText,、,innerHTML,和,outerHTML,。使用时应注意以下两点：,（,1,）,innerText,、,outerText,属性的值是作为普通文本显示的，即使它含有,HTML,标签也如实反映出来；而,innerHTML,、,outerHTML,呈现的是经,HTML,解析后的文本，它可以反应属性中,HTML,标签的表现效果。,（,2,）对网页中对象的,outerText,、,outerHTML,属性赋值（即写操作），会删除该对象。,1.9 【,案例,9】,“,水中倒影,”,网页,1,ANFY,软件介绍,ANFY,是国外一个著名的网页特效制作软件，利用,ANFY,可以制作出数十种,Java,网页特效，例如，鼠标轨迹水纹效果等。通过图,1-9-2,可以看出，它的工作界面是一个简单易懂、赋有亲和力的工作界面。,ANFY 1.4.5,中文版中包括了,40,个,Java applets,程序及一个称为,ANFY,向导的窗口程序。在,“,水中倒影,”,网页案例中，首先选择了,“,图像效果,”,中的,LAKE,应用程序，这部分就是,ANFY,中的,“,Java applets,程序,”,，然后单击,【,下一步,】,按钮，进入了第,1,级设计界面，这就是,ANFY,向导的窗口程序。,由于,ANFY,软件的制作者生活在英语国家，所以软件的中文汉化中有一些语言不够准确，例如第,1,级设计界面中的,“,图像文,”,文本框，更确切的叫法应该是,“,图像名,”,，但是这些并不影响软件的使用。,ANFY,软件定位于所有喜欢采用大量图形的网站制作者，其中的程序全部使用,Java,编写，和,GIF,动画相比，使用,Java,制作动态效果可以大大减小文件的字节数，提高网页的浏览速度。,ANFY,是一个免费软件，它的下载地址是：,【,案例,10】,“,飘动的枫叶,”,网页,1,网页特效精灵软件介绍,安装完,“,网页特效精灵,”,软件后，会在桌面上显示一个该软件的快捷方式图标。双击此图标，即可调出,“,网页特效精灵,”,。该软件的工作界面如图,1-10-2,所示。,网页特效精灵是网页特效工具，它包含两种特殊效果，分别为自定义特效（精灵特效）和不可自定义特效，适合不同水平的使用者。同,ANFY,软件一样，网页特效精灵软件的界面也非常赋有亲和力。由于该软件完全由国人编写，所以更适合中国人的使用习惯。,网页特效精灵中共包括,345,个网页特效，远远多于,ANFY,软件。根据应用对象的不同，分为精灵特效、时间特效、文字特效、鼠标特效、图片特效、娱乐特效、菜单特效和其他特效,9,大类。另外，为了方便使用者加入自己的效果，可以通过该软件的菜单命令，插入其他网页特效。,网页特效精灵软件使用,JavaScript,代码实现网页特效，在网页文件中的代码之外，不需要执行其他文件。但是,JavaScript,的代码比较复杂，不建议初学读者修改，可直接使用。,“,网页特效精灵,”,软件的下载地址为,8,基础,2.1 【,案例,11】,“,Dreamweaver 8,学习天地,”,网页,2.2 【,案例,12】,“,长城,世界建筑史上一大奇迹,”,网页,2.3 【,案例,13】,“,中国名胜,故宫,”,网页,2.4 【,案例,14】,“,中国名胜,故宫,”,网页修改,2.5 【,案例,15】,“,国画欣赏,”,网页,2.1 【,案例,11】,“,Dreamweaver 8,学习天地,”,网页,1,新建和打开网页文档,（,1,）新建网页文档：单击,“,文件,”,“,新建,”,菜单命令，即可调出,“,新建文档,”,对话框。,从该对话框可以看出，利用它可以建立各种类型的文件。,从,“,类别,”,列表框中选择,“,基本页,”,选项，然后选择,“,基本页,”,列表框中的,“,HTML,选项,”,，再单击,【,创建,】,按钮，即可新建一个空白的,HTML,网页文档。,另外，在,“,文档类型,”,下拉列表框中可以选择文件类型，单击,【,首选参数,】,按钮可以调出,“,首选参数,”,对话框。,（,2,）打开网页文档：单击,“,文件,”,“,打开,”,菜单命令，调出,“,打开,”,对话框。在该对话框内选中要打开的,HTML,文档，单击,【,打开,】,按钮，即可将选定的,HTML,文档打开。例如，可打开前面编写的名字为,HTML1.HTML,文档。,另外，在,“,Macromedia Dreamweaver 8,”,对话框状态下，单击,【,打开,】,按钮，也可以调出,“,打开,”,对话框。,2,保存和关闭文档,（,1,）单击,“,文档,”,“,保存,”,菜单命令，可以原名字保存当前的文档。,（,2,）单击,“,文档,”,“,另存为,”,菜单命令，即可调出,“,另存为,”,对话框。利用该,对话框可以将当前的文档以其他名字保存。,（,3,）单击,“,文档,”,“,保存全部,”,菜单命令，即可将当前正在编辑的所有文档以原名保存。,（,4,）单击,“,文档,”,“,关闭,”,菜单命令，即可关闭打开的当前文档。如果当前文档在修改后没有存盘，则会调出一个提示框，提示用户是否保存文档。,（,5,）单击,“,文档,”,“,全部关闭,”,菜单命令，即可关闭所有打开的文档。,3,页面属性设置,将鼠标指针移到网页文档窗口的空白处，单击鼠标右键，调出一个快捷菜单，再单击快捷菜单内的,“,页面属性,”,菜单命令，调出,“,页面属性,”,对话框。另外，单击网页文档窗口的空白处，再单击网页文档,“,属性,”,栏内的,【,页面属性,】,按钮也可以调出,“,页面属性,”,对话框。,利用,“,页面属性,”,对话框，可以设置页面的标题文本、页面字体、页面背景色或图像、页面大小与位置、背景图像的透明度等。利用,“,页面属性,”,对话框设置网页页面参数的方法简介如下。,（,1,）背景颜色设置：单击,【,背景颜色,】,按钮 ，会调出一个颜色面板。利用该颜色板可以设置网页的背景颜色。,（,2,）背景图像设置：单击,“,页面属性,”,（外观）对话框中,“,背景图像,”,文本框右边的,【,浏览,】,按钮，调出,“,选择图像源文件,”,对话框。,利用该对话框选择网页背景图像，再单击,【,确认,】,按钮，即可给网页背景填充选中的图像。如果图像文档不在本地站点的文件夹内，则在单击,【,确认,】,按钮后，会提示用户将该图像文档复制到本地站点的图像文件夹内。,（,3,）文本颜色设置：单击,【,文本颜色,】,按钮，会调出颜色面板。利用它可以设置文本颜色，其方法与设置背景颜色的方法一样。,（,4,）页面四个方向的边距设置：通过四个文本框可以设置页面四个方向的边距，单位为像素。,“,左边距,”,和,“,右边距,”,设置只对,IE,浏览器有效，,“,上边距,”,和,“,下边距,”,设置只对,Netscape Navigator,浏览器有效。,（,5,）页面文本的字体和大小设置：利用该对话框中的,“,页面字体,”,和,“,大小,”,下拉列表框可以设置页面中文本的字体和文本大小。,（,6,）页面文字设置：单击选中,“,分类,”,列表框中的,“,标题,/,编码,”,选项，此时的,“,页面属性,”,对话框。利用该对话框可以设置网页标题、文档的类型和网页的编码等，在对话框底部还显示,“,站点,”,文件夹的位置等信息。,（,7,）标题大小和颜色设置：单击选择,“,页面属性,”,对话框中,“,分类,”,栏中的,“,标题,”,选项，此时,“,页面属性,”,（标题）对话框。在,“,标题字体,”,下拉列表框中选择一种标题的字体（此处选择,“,同页面字体,”,选项），在,“,标题,1,”,到,“,标题,6,”,栏可以设置标题的大小和颜色。,（,8,）链接字属性的设置：单击选择,“,页面属性,”,对话框中,“,分类,”,栏中的,“,链接,”,选项，此时切换到,“,页面属性,”,（链接）对话框。可以利用该对话框内的,“,链接字体,”,和,“,链接颜色,”,栏来设置链接文字的字体、大小、风格、颜色等。,“,变换图像链接,”,栏的作用是当图像不能显示时，将显示为该栏设置的颜色。,“,已访问链接,”,栏的作用是设置单击过的链接字的颜色。,“,活动链接,”,栏的作用是设置获得焦点的链接字的颜色。,“,下画线样式,”,栏的作用是设置链接字的下画线样式。,（,9,）跟踪图像属性设置：单击选择,“,页面属性,”,对话框中,“,分类,”,栏中的,“,跟踪图像,”,选项，此时切换到,“,页面属性,”,（跟踪图像）对话框。利用该对话框可以设置跟踪图像的属性