《JSP动态网页基础教程 教学课件 ppt 作者 张晓蕾 第2章 网页设计基础》由会员分享，可在线阅读，更多相关《JSP动态网页基础教程 教学课件 ppt 作者 张晓蕾 第2章 网页设计基础（46页珍藏版）》请在金锄头文库上搜索。
1、第2章 网页设计基础,2.1 【案例2】诗词欣赏,2.1.1 HTML的基本概念 1HTML概述 HTML（Hypertext Marked Language，超文本标记语言）是一种用来制作超文本文档的简单标记语言。HTML文档是由HTML元素组成的文本文件，它能独立于各种操作系统平台（如Linux，Windows等）进行浏览。,1990年以来，HTML就一直被用作WWW（World Wide Web，万维网）的信息表示语言，用于描述网页的格式设计和它与WWW上其他网页和文件的链接信息。使用HTML语言描述的文件，需要通过网页浏览器显示出效果。,HTML是一切网页实现的基础，在网络中浏览的网页
2、都是一个个的HTML文件。这些网页中可以包含有文字、图片、动画和声音，还可以从当前文件跳转到另一个文件，与网络世界中各地主机上的文件相连接，故被称为超文本文件。,一个HTML文件通过一些特殊的标记来告诉浏览器应该如何显示文本、图像以及网页的背景，这些特殊的标记被称为HTML标记。例如，上一章中所见过的、等。表2-1中列出了常用的HTML语言标记。,常用的HTML语言标记,表2-1,续表,下面是学习HTML标记的几点说明。 （1）所有HTML标记都是由“”号括住，标记名称不区分大小写。 例如：、和表示相同的意思。W3C（World Wide Web Consortium，万维网联盟）在HTML4
3、建议中提倡使用小写标记。,（2）多数标记是成对出现的，一对标记的前面一个是起始标记，第二个是结束标记，在起始和结束标记之间的文本是元素内容。在起始标记的标记名称前加上符号“/”便是结束标记。 例如：与、与。,成对出现的标记可以嵌套使用，也就是标记里面还可以出现标记。例如： JSP教程 上面的标记将使文本“JSP教程”用红色粗体文字显示。在嵌套时标记不要交叉，否则，会导致源文件的可读性差，且易出错。,（3）有少数标记单独出现，没有配对的结束标记。 例如：JSP动态语言教程人民邮电出版社 上面语句中，标记意味插入一个空行，在这里实际上就是换行，即将“JSP动态语言教程”和“人民邮电出版社”分成两行
4、显示。,（4）部分标记可以拥有属性，以便为页面上的HTML元素提供附加信息。 注意，属性只可加于起始标记中，通常由属性名和取值成对出现。属性使用的格式如下： name=“value“ 其中，name为属性名称，value为所设置的属性值。例如： ,这里标记定义了HTML页面的主体元素，附加的bgcolor属性将告诉浏览器网页页面的背景颜色是什么，上面标记的意思是将网页页面的背景色设置为蓝色。 属性值通常被包含在双引号中，也可以使用单引号。在某些情况下例如，属性值本身包含引号时，使用单引号是很有必要的。,（5）为了与其他标记相区别，HTML中规定了专门的标记来作为注释标记，注释标记用来在HTML
5、源文件中插入注释。 注释在显示时被浏览器忽略，是不可见的。注释标记以“”结束，如下所示： ,（6）很多标记都具有颜色属性，HTML中的颜色可以有两种表示方法：十六进制的RGB格式和在HTML中定义的颜色名称。 RGB格式的表示方式为“#RRGGBB”，其中每一个R、G、B都是一个0F的十六进制数，分别表示红、绿、蓝三种颜色的深度，从00至FF颜色逐渐加深，00为无色透明，FF为纯色。,HTML中定义的颜色名称通常是一些常用颜色的英文单词，如red、black、green、blue、yellow等。例如： JSP教程 JSP教程 上面的两行代码均将文字“JSP教程”显示为蓝色。,2HTML文件结
6、构,HTML的文件结构很简单，其主体结构主要由以下三组标记构成： 标记用以告知浏览器从这里开始是HTML文件，让浏览器认出并正确处理此HTML文件，整个HTML文件处于标记与之间。,HTML的正式文档通常分两部分，位于和标记之间的部分称为HTML文件头，位于至标记之间的部分称为正文。文件头部分用以记录与网页有关的重要信息，例如标题、字符集等。文件头部分的内容基本上都不会在浏览器中显示，浏览器中只显示正文部分的内容。,因此，一般HTML文档的格式如下： 文件头信息 在浏览器中显示的HTML文件的正文 ,（1）文件头部分常用的标记 HTML文件头部分可以使用一些专用的标记来记载信息，常用于文件头部
7、分的标记有和。 标记用于指定文档标题，使用格式如下： 文档标题 ,在和标记之间的文本是文档标题，它被显示在浏览器窗口的标题栏中。 标记是记录有关当前页面的信息（如字符编码、作者、版权信息或关键字）的head元素，该标记也可以用来向服务器提供信息，如页面的失效日期、刷新间隔等。为了完成这些功能，标记提供了两种附加属性：name和http-equiv。,name name主要用于描述网页，以便于搜索引擎对网页进行查找、分类，目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页进行分类。这其中最重要的是description（用于网页在搜索引擎上的描述）和keywords（定义搜索引擎用
8、来分类的关键词）。,从应用角度来看，应该给网站中的每一页都插入这两个name属性值。例如： 其中，“JSP教程”为所设置的当前网页的关键字。在文件头加上这样的定义后，搜索引擎就能够让读者根据这些关键字查找到网页，了解网页内容。,也可以不使用description和keywords来让搜索引擎进行检索，而使用robots替代。robots的使用如下所示： ,设置为all时文件将被检索，并且页上链接可以被查询；设置为none则表示文件不被检索，而且不查询页上链接；设置为index时文件将被检索；设置为follow时则可以查询页上链接；设置为noindex时文件不检索，但可被查询页上链接；设置为no
9、follow则表示文件不被检索，但可查询页上链接。,此外，还可以使用Author，告诉搜索引擎站点设计者的姓名是什么。例如： 上面的标记将告诉搜索引擎当前站点的设计者是赵明。,http-equiv http-equiv起着相当于http文件头的作用，可以直接影响网页的传输、网页所使用的字符集等内容。例如： ,上面的标记用于描述网页使用的字符集，浏览器根据此项，就可以选择正确的编码字符集，而不需要读者在浏览器里选择。常用中文字符集有GB2312和BIG5，GB2312是简体中文编码，而BIG5则是中国台湾BIG5编码的主页专用。又如： ,上面的标记用于刷新浏览器中的网页。在这行标记中，浏览器将在
10、60秒后，自动转到网页new.htm。可以利用这个功能， 制作一个网站标志性封面页，在若干时间后，自动让用户转到指定页面。如果省略上面标记中的url项，浏览器将刷新当前页，从而实现网页的定时刷新功能。,再如： 上面的标记强制性地调用服务器中网页的最新版本。,浏览器为了节约网络访问时间，在本地硬盘上都缓存了一个网页的临时文件。 在下一次调用网页时，直接调用硬盘上的文件，而不是网络上的。如果想让用户每次都看到最新的网页，就需要加上这个标记。,（2）标记及其属性 标记之间包含的是浏览器中所显示的页面内容。作为对页面的设置，标记有一些附带的属性用于设置页面的背景颜色、正文文字颜色、链接文字颜色和页面背
11、景图像等，下面逐一介绍这些属性。,bgcolor属性用于设置页面背景颜色。例如： 上面的标记将页面背景设置为黄色。 background属性用于设置背景图像。例如： ,上面的标记将站点中images目录下的peace.jpg图像文件设置为网页背景图像。 在设置网页背景图像时应该注意，由于图像文件一般都比较大，网上传输较慢，最好是选择较小的图片为背景。同时，背景图像不宜太复杂，以免影响正文的显示效果。,text属性用于设置页面正文文字颜色，link属性用于设置链接文字颜色，alink属性用于设置激活的链接颜色，vlink属性用于设置访问过的链接文字颜色。,例如： 上面的标记设置网页正文文字为黑色
12、，链接文字为蓝色，激活的链接文字为红色，已访问过的链接文字为黄色。,2.1.2 格式排版,1标题 2文字布局 （1）段落与换行 （2）预格式化 （3）对齐方式 （4）水平线 3字体格式,3字体格式,（1）字体、颜色与大小 （2）字体样式,2.1.3 网页中的图像,需要注意的是，在网页中，图像、声音、影像、动画等内容都以单独的文件形式存在，HTML中只提供了在网页中嵌入这些内容的手段。 在浏览网页时，HTML会按标记语句中的URL或路径去访问这些内容，因此，在设计时必须保证在该URL或路径有需要嵌入的文件。,为便于管理，通常都在网页文件所在目录中创建一个名为images的目录，将网页中用到的图像
13、文件保存在该目录中，这样的好处是可以使用相对路径“images/*.*”（*.*表示图像文件名）来访问图像。,例如，上例中的，图像文件SPHINX.JPG就是保存在images目录中。 最后还要注意，由于是网络访问，因此最好在路径和文件名中不要使用中文，否则容易出错。,2.2 【案例3】词曲目录,2.2.1 网页中的表格 1表格设计 2表格标题的设置 3表格大小、边框与间距的设置 4表格中跨行、跨列单元格的设置,5表格的对齐方式 6表格颜色与背景 7表格与布局,2.2.2 超级链接,1文件间的链接 超级链接的基本格式如下： 链接 其中，标记表示一个链接的开始，表示链接的结束，标记之间的文字/图像就是显示在网页中的超链接文字/图像。,属性href定义了该链接所要跳转到的位置，通常是一个URL。这样的安排，就可能通过单击“链接”到达指定的位置。例如： 新浪 （1）本地链接 （2）URL链接,2网页内的链接 3在指定窗口中打开链接 4电子邮件链接,
