《JSP页面制作基础.ppt》由会员分享，可在线阅读，更多相关《JSP页面制作基础.ppt（66页珍藏版）》请在三一办公上搜索。
1、第2章 JSP页面制作基础,HTML语言的基本语法,1 HTML2 HTML的文档结构标记3 页面文本的排版标记4 Table表格5 文件之间的链接6 多窗口页面（Frame）7 表单（FROM)8 其他标记,1 HTML,万维网(World Wide We b，W W W)起源于设在瑞士的C E R N实验室。Tim Berners-Lee及其开发小组，花费大量的时间，研究建立了一种以一定格式传输信息的方法，这就是众所周知的超文本传输协议(简称为H T T P)。该协议使用了超文本标记语言(H T M L)。H T M L设计简单，结构灵活，允许在We b浏览器及其他兼容的应用程序中显示文本
2、及图像。文档的某些部分可以成为超链接，即当其被选择时，可以显示不同的页面或同一页面的不同部分。,HTML,标记语言是由特定字符分隔的基本元素，指定基本元素中所包含的文本或其他条目如何显示。例如This is some Emphasized text。H T M L是一种广泛基于标准通用标记语言(Standard Generalized Makeup Language，S G M L)的标记语言。S G M L是描述语言的一种方法，其本身并不是用来创建网页的语言。,什么是HTML文件？,HTML文件是能被网络浏览器读取、运行生成网页文件。这些HTML文件存储在分布于世界各地的计算机的硬盘上，而传
3、输协议能把这些文件从一台计算机传输到另一台计算机。,HTML标记,HTML不是一种编程语言，而是一种描述性的标注语言。是用标记符定义HTML文档的功能和信息。浏览器读入HTML文档后按规则解释文档中的标记，执行相应的动作。,2 HTML的文档结构标记,HTML文档可以自己编写。HTML文档可以用编辑器（FRONTPAGE、DREAMWEAVER)生成。HTML标记包含在一对中。HTML标记是成对出现（少数例外）。极少数标记单独出现，如：(换行).标记不区分字符的大小写。HTML文档的扩展名：htm/htmlHTML文档是一个纯文本的，可用任何编辑工具编辑。,HTML的文档结构,欢迎同学们 同学
4、们下午好!,HTML 标记,.一个页面的开始。不一定是一个文件的开始，文件开始有初始化代码。不一定是文件的结尾，后面可能还有其他JSP代码。,HEAD 标记,页面的第2层标记。包含标题信息。必须在BODY标记开始之前结束。,TITLE 标记,页面的名称。标题 title 元素含有你的文档标题并且作为一种全局上下文识别其内容.标题通常显示在浏览器窗口的某个位置(通常显示在浏览器的左上方),而不是在文本区.标题的选择应当是描述性的,独特的和相对简洁的。,TITLE 标记,这是出现在浏览器左上角的文字，它是一个网站最先被访问者看到的信息。同时，许多搜索引擎在INTERNET上自动进行网站搜索时所记录
5、下来的就包括了页面标题，关键字等。因此，页面标题对于网站的推广，增加访问者对网站浏览的兴趣有很大的帮助。可在网站的主页面添加标题信息。,META标签,使用META标签是简单而且有效地宣传网站的方法。不需要去搜索引擎注册就可以让客户搜索到您的网站。将下面这段代码加入到网页标签中。content里边填写关键词。,网站描述,网站描述出现于搜索引擎的查找结果中。它很大程度上决定了访问者是否能够通过搜索引擎的查找结果来访问您的网站。因此，网站描述应当覆盖了关键字所定义的范围，并且有所侧重，突出网站重点，加重描述语句对访问者的吸引力。应当提取出20个左右最重要的关键字，根据实际工作中用户最关心的信息和网站
6、所要重点提供的信息，仔细地编写一段包括空格均不超过250字的描述文字。,提高网站的排名,关键词最好要大众化，跟企业文化、公司产品等紧密相关。并且尽量多写一些。比如公司生产的是电冰箱。您可以写：电冰箱，家电，电器等等。尽量将产品大类的名称都写上去。另外名称要写全，比如“电冰箱”不要简写“冰箱”。特别是一些英文单词，切记要在某些关键词后面加”s”。比如refrigeratorrefrigerators。这里有个技巧，您可以将一些相对关键的词重复，这样可以提高网站的排名。,BODY 标记,页面的内容。HTML 文档的第二部分，也是最大的部分,它含有你的文档的内容(显示在你的浏览器窗口文本区的部分)。
7、页面中的所有其它的HTML标记都在这对标记之间。有六个参数（属性）。,BODY 标记参数,BACKGROUND 参数指定一幅图像作为页面的背景图像。添加背景图像 国画精髓,其他5个参数,BGCOLOR:指定页面的背景颜色。TEXT：指定文本的默认颜色。ALINK：指定单击超级连接的连接文字的颜色。LINK:指定超级连接没有被单击的颜色。VLINK：指定超级连接没有被单击时的颜色。,注释标记,注释文本不会显示在用户的浏览器窗口。如果是程序代码，即使是放在注释标记内也会被执行。例：COMMENT标记：注释文本较长时用。,3 页面文本的排版标记,BASEFONT 标记FONT 标记 SIZE参数的数
8、值范围1-7。,例题,选择不同的字体和颜色 选择不同的字体和颜色 选择不同的字体和颜色 选择不同的字体和颜色,H 标记,H 标记可以指定标记之间的文本的大小，有H1-H6.格式:文本 文本 ALIGN(排列）参数：CONTER,LEFT,RIGHT ALIGN=“LEFT”,其他标记,B标记:文本加粗I标记:文本设置为斜体U标记:文本加下划线S标记:文本加删除线,例,New Page 1 l1 JSP的特点 12 JSP的运行环境和配置 13 JSP页面的结构 14 JSP 程序设计,排版标记,BR 标记：添加一个换行符，单个使用HR标记：在页面上画一条水平线，可单个使用格式：无阴影,上下标标
9、记,SUB下标记：下标文字SUP上标记：上标文字2H2+O2=2H2OX2+Y2=(X+Y)2-2XY,不编号列表Unnumbered Lists,制作一个不编号的，公告式列表,标记 独立的项.下面是一个有三个项的列表:apples bananas grapefruit 输出形式为:apples bananas grapefruit,编号列表Numbered Lists,编号列表(也称为 有序列表ordered list)格式：oranges peaches grapes 输出为:oranges peaches grapes,4 Table表格,对文本可以设置字体，设置上标下标、对齐方式，将其
10、换行、分成段落，还可以形成列表，但是对于文本具体显示在哪行哪列，不能够一进行控制。使用了表格的标记功能就可以加强对文本的控制，因此说表格是所有编辑方式中最灵活的。下面我们就来介绍关于表格的标记。,TABLE标记,TABLE标记标志着一个表格的开始和结束，表格的所有定义都包含在这对标记之间,其格式如下：定义表格行、列及内容 可用参数定义表格的位置、背景、边框等。,TABLE参数（1）,ALIGN参数：设置表格与页面的对齐方式，可取值为LEFT（左对齐）、RIGHT（右 对齐）、CENTER（居中）。BCAKGROUND参数：为表格指定一幅背景图像。BGCOLOR参数：为表格指定背景色。BORDE
11、R：设定表格单元格四周的边界宽度，如果此参数设置为0，那么表格不显示边界。,TABLE参数（2）,WIDTH参数：设置整个表格的宽度，默认情况下以像素为单位，也可以使用百分比的方式设置，这个百分比是表格宽度和浏览器显示宽度的百分比。COLS参数：设定表格的列数，当表格自动计算你创建的列数时，则不需要设置。,TR 标记,TR 标记：表示表格的一行开始和结束。参数:ALIGN参数：行中的文本在单元格中的对齐方式，可取值为LEFT（左对齐）、RIGHT（右 对齐）、CENTER（居中）。BCAKGROUND参数：指定单元格背景图像。BGCOLOR参数：指定单元格背景色。,TD 标记,TD 标记：指定
12、单元格的内容。,5 文件之间的链接,链接分为本地链接、URL链接和目录链接。在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。超文本中的链接是其最重要的特性之一，用户可以从一个页面转跳到另外的页面、图像、WEB服务器。格式：链接文字,本地链接,对同一台机器上的不同文件进行的链接称为本地链接，它使用UNIX或WINDOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。,链接的表示方式,以绝对路径表示：A HREF”D:ASPHTMLINDEX.HTM”文件链接A以相对路径表示：A HREF”INDEX.HTM”文件的链接A链接上一目录中的文
13、件：A HREF=“./INTER/INDEX.HTM”上级地址/A一般情况下，我们是不用绝对路径的，因为我们的资源常常是放在网上供其他人测览的。写成绝对路径，当我们把整个目录中的所有文件移植到服务器上时，带有C：的资源地址用户将无法访问到。所以我们最好写成相对路径，这样就避免了重新修改文件资源路径的麻烦。,URL链接(1),如果链接的文件在其它服务器上，我们就要知道所指向的文件是采用的哪一种URL地址。URL的意思是统一资源定位器，通过它可以以多种通讯协议与外界沟通来存取信息。URL链接的形式是：协议名：主机域名路径文件名协议包括：file：本地系统文件。http：WWW服务器。ftp：ft
14、p服务器。,URL链接(2),telnet：基于TELNET的协议。mailto：电子邮件。news：Usenet新闻组。写在HTML文件中,我们这样来表达一个URL地址：,目标链接,实现在文件或页面内链接。大文件或帮助文件。定义标记格式：例：定位格式：例：,嵌入行中的图象,多数 Web 浏览器可以显示嵌入行中的X 位图(XBM),GIF,或 JPEG 格式的图象.格式：ALT=FORWARD HEIGHT=32 WIDTH=32 其中 图象名 是图象文件的URL.URLs 的语法格式和链接HREF使用的格式相同.如果图象文件是GIF 文件,则图象名中的文件名部分必须以.gif结束.JPEG
15、图象文件必须以.jpg或.jpeg结束.ALT=FORWARD HEIGHT=32 WIDTH=32,其他链接,使用同样的语法链接外部动画和声音.唯一的不同在于链接文件的扩展名.例如,指明一个到QuickTime 电影的链接.,链接音乐文件,链接下载文件,下载WORD.DOC 指明一个到word文件的链接.,建立新窗口,将主页的内容显示在一个新的窗口。格式：,通常的文件类型和其扩展名,文件类型 扩展名纯文本 text.txtHTML 文档.htm/.htmlGIF 图象.gifX 位图图象.xbmJPEG 图象.jpg 或.jpegAU 声音文件.au/.rmWAV 声音文件.wavQuick
16、Time 电影.mov,6 框架（多窗口页面）（Frame）,框架用于将页面分区，并且每一个区域对应着不同的HTML文档。FRAMESET标记：用于指定页面中水平和垂直框架的数目，其格式如下所示：框架的HTML源文件,FRAMESET标记参数,FRAMESET标记有两个参数ROWS和 COLS。如果页面被框架分区，那么页面就被框架分成了表格。如果页面被窗口分成了左右两部分，即两列一行，那么就不用设置COLS参数了，只需在ROWS参数的第一个值中指定左边的框架的宽度，在第二个值中指定右边的框架相对于树览器显示的百分比。,FRAMESET标记参数（2）,如果不止一行（也就是两行），就需要设置COL
17、S参数。COLS参数也可以设置两个值，第一个值指定第一行的大小，第二个值指定第二行的大小相对与测览器屏幕尺寸的百分比。一个页面最多被设置成四个框架（两行两列），四个区域的大小就用COLS参数、ROWS参数设定。但是框架可以嵌套，一个框架中又可以最多嵌套四个框架，所以页面可以被分成比较复杂的局面。FRAMEBORDER参数指定框架是否有边框，取值为YES或NO。BORDER参数指定框架边框的宽度。,FRAME标记,FRAME标记只是一个框架，必须在FRAMESET标记内使用，其格式如下所示：NAME 参数指定框架的名称。SCROLLING参数指定框架是否有滚动条，取值有YES（有滚动条）、NO（
18、没有滚动条）、ATUO（自动设置），或者不设置该参数，使用默认值。如果指定 NORESIZE，那么用尸不可以调整框架的大小。,7表单(FORM),页面form 使读者可以向 Web 服务器返回信息以执行某种动作.例如,假设你想查找某一人的邮件地址，可以在页面输入他/她的姓名,form发送的信息到服务器，执行数据库查找结果返回.FORM标记，用于表示一个表单的开始和结束，并通知浏览器处理表单的内容。,FORM格式,例子：,FORM参数,NAME:表单名称METHOD：发送表单信息的方式GET:通过URL发送表单信息POST：通过HTTP 首标发送表单信息ACTION 提供对标单处理的文件的路经及
19、名称。,INPUT标记 插入标单对象,INPUT标记指示浏览器放置一个容许表单接收用户信息的对象。文本框格式：,多行文本框,格式,密码文本框,格式：,列表框,格式：列表项内容参数：NAME:列表框的名称 SIZE：列表框得了表项 MULTIPLE：可以多选,提交按钮,格式：,重置按钮,格式：,单选按钮,格式：CHECKED参数：某一按钮带有这个参数，该按钮为缺省按钮。,例,单选按钮选择国家：中国 美国 德国 法国,复选按钮,格式：CHECKED参数：某一按钮带有这个参数，该按钮为缺省按钮。,8 其他标记,SCRIPT 标记需要处理的脚本参数：LANGUAGE,选择JavascriptVB.netC#例子：,BGSOUND,BGSOUND 标记：设置页面的背景音乐,9.CSS技术,CSS层叠式样式表可以对网页的显示效果进行精确设定，并对页面显示效果进行统一,例：,h1 color:redmyclass color:greenh2.myclass color:blue#myid color:brown,这是红一标题绿色蓝色棕色红色,行距40px,
