《JSP笔记》之二(HTML网页设计基础).doc

JSP笔记之二第二章网页设计基础2.1 HTML初步2.1.1 HTML的基本概念1HTML概述HTML是一切网页实现的基础，在网络中浏览的网页都是一个个的HTML文件。这些网页中可以包含有文字、图片、动画和声音，还可以从当前文件跳转到另一个文件，与网络世界中各地主机上的文件相连接，故被称为超文本文件。一个HTML网页文件通过一些特殊的标记来告诉浏览器应该如何显示文本、图像等，这些特殊的标记被称为HTML标记。表2-1 常用的HTML语言标记HTML标记含 义声明这个文件是一个HTML文件，在文件的开头为开始标记，在文件的结尾为结束标记声明网页文件头，紧跟在HTML开始标记之后声明网页的标题，在HAED的开始和结束标记之间声明文件主体，包括所有的文本、图片及文档中其他标记声明文字颜色插入一个空行声明一个无序列表声明一个有序列表声明一个列表项声明其包含部分中的文字使用粗体声明其包含部分中的文字使用斜体说明其包含的部分是个超级链接，等号后面是链接内容的URL插入一个图片文件，等号后面是图片文件的URL插入一个水平分隔线编写HTML文件的时候，必须遵循HTML的语言规则。一个完整的HTML文件由标题、段落、列表、表格、嵌入的各种对象等共同组成。这些逻辑上统一的对象被称为元素，HTML使用HTML标记来分割并描述这些元素。实际上，HTML文件就是由元素与标签组成。下面是学习HTML标记的几点说明：(1) HTML标记不区分大小写，但一定要是英文半角方式。例如：、和表示相同的意思。(2) HTML标记由左右尖括号括起来，一般成对出现。如 ，也有不成对出现的，如。一对标记的前面一个是起始标记，第二个是结束标记，在起始和结束标记之间的文本是元素内容。在起始标记的标记名称前加上符号“/”便是结束标记。例如：与、与成对出现的标记可以嵌套使用，也就是标记里面还可以出现标记。例如： JSP教程上面的标记将使文本“JSP教程”用红色粗体文字显示。在嵌套时标记不要交叉，否则，会导致源文件的可读性差，且易出错。(3)部分标记可以拥有属性，以便为页面上的HTML元素提供附加信息。注意，属性只可加于起始标记中，通常由属性名和取值成对出现。属性使用的格式如下：name=value其中，name为属性名称，value为所设置的属性值。例如：这里标记定义了HTML页面的主体元素，bgcolor属性将网页页面的背景色设置为蓝色。属性值通常被包含在双引号中，也可以使用单引号，也可以不加引号。当属性值本身包含引号时，使用单引号是很有必要的。例如： 和 是完全相同的。(4)注释标记：用来在HTML源文件中插入注释。注释在显示时被浏览器忽略，是不可见的。注释标记以“”结束，如下所示：(5)很多标记都具有颜色属性，HTML中的颜色可以有两种表示方法：十六进制的RGB格式和英文颜色名。RGB格式的表示方式为“#RRGGBB”，其中每一个R、G、B都是一个0F的十六进制数，分别表示红、绿、蓝三种颜色的深度，从00至FF颜色逐渐加深，00为无色透明，FF为纯色。 HTML中定义的颜色名称通常是一些常用颜色的英文单词，如red、black、green、blue、yellow、cyan等。例如：JSP教程JSP教程上面的两行代码均将文字“JSP教程”显示为蓝色。2HTML文件结构HTML的文件结构很简单，其主体结构主要由以下三组标记构成：标记用以告知浏览器从这里开始是HTML文件，让浏览器认出并正确处理此HTML文件，整个HTML文件处于标记与之间。HTML的正式文档通常分两部分，位于和标记之间的部分称为HTML文件头，位于至标记之间的部分称为正文。文件头部分用以记录与网页有关的重要信息，例如标题、字符集等。文件头部分的内容基本上都不会在浏览器中显示，浏览器中只显示正文部分的内容。因此，一般HTML文档的格式如下： 文件头信息 在浏览器中显示的HTML文件的正文(1)文件头部分中常用的标记HTML文件头部分可以使用一些专用的标记来记载信息，常用于文件头部分的标记有和。标记用于指定页面标题，使用格式如下： 页面标题 在和标记之间的文本是页面标题，它被显示在浏览器窗口的标题栏中。标记是记录有关当前页面的信息（如字符编码、作者、版权信息或关键字）的head元素，该标记也可以用来向服务器提供信息，如页面的失效日期、刷新间隔等。为了完成这些功能，标记提供了两种附加属性：name和name主要用于描述网页，以便于搜索引擎对网页进行查找、分类，目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页进行分类。这其中最重要的是description（用于网页在搜索引擎上的描述）和keywords（定义搜索引擎用来分类的关键词）。 从应用角度来看，应该给网站中的每一页都插入这两个name属性值。例如： 其中，“JSP教程”为所设置的当前网页的关键字。即name为keywords的东东，其值为JSP教程。在文件头加上这样的定义后，搜索引擎就能够让读者根据这些关键字查找到网页，了解网页内容。也可以不使用description和keywords来让搜索引擎进行检索，而使用robots(网上机器人)替代。robots的使用如下所示： 设置为all时文件将被检索，并且页上链接可以被查询；设置为none则表示文件不被检索，而且不查询页上链接；设置为index时文件将被检索；设置为follow时则可以查询页上链接；设置为noindex时文件不检索，但可被查询页上链接；设置为nofollow则表示文件不被检索，但可查询页上链接。此外，还可以使用Author，告诉搜索引擎站点设计者的姓名是什么。例如：上面的标记将告诉搜索引擎当前站点的设计者是赵明。http-equivhttp-equiv起着相当于http文件头的作用，可以直接影响网页的传输、网页所使用的字符集等内容。例如： 上面的标记用于描述网页使用的字符集，即http-equiv为content-type的东西，其值为text/html; charset=gb2312。浏览器根据此项，就可以选择正确的编码字符集。又如：上面的标记用于刷新浏览器中的网页。在这行标记中，浏览器将在60秒后，自动转到网页new.htm。可以利用这个功能， 制作一个网站标志性封面页，在若干时间后，自动让用户转到指定页面。如果省略上面标记中的url项，浏览器将刷新当前页，从而实现网页的定时刷新功能。再如：上面的标记强制性地调用服务器中网页的最新版本。(2)标记及其属性 标记之间包含的是浏览器中所显示的页面内容。作为对页面的设置，标记有一些附带的属性用于设置页面的背景颜色、正文文字颜色、链接文字颜色和页面背景图像等，下面逐一介绍这些属性。bgcolor属性用于设置页面背景颜色。例如： 将页面背景设置为黄色。background属性用于设置背景图像。例如： 将站点中images目录下的peace.jpg图像文件设置为网页背景图像。 在设置网页背景图像时应该注意，由于图像文件一般都比较大，网上传输较慢，最好是选择较小的图片为背景。同时，背景图像不宜太复杂，以免影响正文的显示效果。text属性用于设置页面正文文字颜色，link属性用于设置链接文字颜色，alink属性用于设置激活的链接颜色，vlink属性用于设置访问过的链接文字颜色。例如：即：设置网页正文文字为黑色，链接文字为蓝色，激活的链接文字为红色，已访问过的链接文字为黄色。2.1.2 格式排版1标题标记 分别定义了标题1至标题6。定义了最大号的标题，最小号的。如：2文字布局(1)段落与换行在网页代码中，表示换行且分段，表示换行但不分段。可以有结束标记,也可以省略。没有结束标记。(2)预格式化采用预格式化标记，可以使在网页代码视图中，所设计的排版与浏览时相同。例1：预格式化文件名pre.htm 预格式化蝶恋花 苏轼花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少，天涯何处无芳草！ 墙里秋千墙外道。墙外行人，墙里佳人笑。笑渐不闻声渐悄，多情却被无情恼。 运行后可以看出，浏览器中显示的排版与设计HTML代码时的完全相同。(3)对齐方式对齐方式以一个段落为单位。可以通过在或表格的行、单元格等标记中，加入属性align来控制对齐方式。align可取left、right、center。由于居中对齐用得较多，HTML还提供了专门的居中对齐标记。例如：标题居中对齐(4)水平线格式：Size表示粗细，即水平线的高度。noshade表示是否有阴影，缺省值(即不加noshade)为有阴影。例2：水平线文件名hr.htm水平线 蝶恋花 苏轼 花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少，天涯何处无芳草！ 墙里秋千墙外道。墙外行人，墙里佳人笑。笑渐不闻声渐悄，多情却被无情恼。 江城子 密州出猎 老夫聊发少年狂，左牵黄，右擎苍。锦帽貂裘，千骑卷平冈。欲报倾城随太守，亲射虎，看孙郎。酒酣胸胆尚开张，鬓微霜，又何妨！持节云中，何日遣冯唐？会挽雕弓如满月，西北望，射天狼。 3字体格式 (1)字体、颜色与大小标记用于字体格式设置。格式：。字体大小共7种，1为最小，7为最大。如：JSP教程(2)字体样式常用的有：斜体、加粗、下划线、上标、下标。2.1.3 网页中的图像标记格式：其中，align是图像与同一行上文字的对齐方式，值有：top、middle、bottom、left、right。alt为替代文字。需要注意的是，在网页中，图像、声音、影像、动画等内容都以单独的文件形式存在，HTML中只提供了在网页中嵌入这些内容的手段。在浏览网页时，HTML会按标记语句中的URL或路径去访问这些内容，因此，在设计时必须保证在该URL或路径有需要嵌入的文件。为便于管理，通常都在网页文件所在目录中创建一个名为images的目录，将网页中用到的图像文件保存在该目录中，这样的好处是可以使用相对路径“ images/*.* ”来访问图像。最后还要注意，由于是网络访问，因此最好在路径和文件名中不要使用中文，否则容易出错。2.1.4 案例2诗词欣赏案例2诗词欣赏文件名shici.htm运行后，效果如下：2.1.5 列表1列表列表有三种方式：有序列表、无序列表、自定义列表(1)有序列表格式如下，表示一个有序列表开始，表示每一个列表项：项目1项目2项目3上述代码显示为：1项目12项目23项目3中可以设置属性：。Start设置起始序号。Type设置列表样式，有1(数学)、i(小写罗马字母)、I(大写罗马字母)、a(小写英文字母)、A(大写英文字母)。项目可以是段落、图像等，列表也可以嵌套。如下图所示就是一个嵌套列表(2)无序列表无序列表使用一个小图形做标志。格式如下，表示一个无序列表开始，表示每一个列表项：项目1项目2项目3中可以设置属性：，type可以有3种值：disc(实心圆点)、circle(空习圆点)、square(方块)：如下图所示：2字符实体HTML字符实体表示一些特殊字符。如：空格  点·要插入这些特殊字符，也可以在Dreamweaver中点菜单“插入”“HTML”“特殊字符”“其它字符”，然后在其中选择。3拓展案例2商品分类目录拓展案例2商品分类目录文件名shangpinlist.htm商品分类目录商品分类目录 IT/数码/办公 数码相机  数码摄相机  数码相机伴侣台式机  笔记本电脑  配件投影机  多功能一体机  复印机  扫描仪  传真机 美容/化妆/洗涤 化妆品  美发  美容减肥瘦身  洗浴保健 手机/通讯器材/卡 手机  通讯配件电话机  对讲机 音像/图书 图书  期刊音像  影视DVD/VCD2.2 HTML进阶2.2.1 网页中的表格1表格设计在HTML中，采用等标记来绘制一个表格。简单来说，一个表格要完整地包含在标记.之间。表格的每一行包含在标记中。表格的每个单元格包含在标记或中。而一些属性则通过: 属性名=值 的子句包含于分别的标记中。书中第42至43页的代码显示了如何画出一个表格。注意其中和的区别，二者都是画出一个单元格，但内的文字自动居中对齐，自动加粗，则是自动左对齐和标准字体，二者并无其它区别。2表格大小、边框与间距的设置可以采用在标记中对width属性和height属性分别赋值(像素或百分比)，来设置表格的高度和宽度。如：设置表格边框的方法是对属性border赋值。默认情况下(即不设置border时)border的值为1。书中第44页的图2-15的左图是句子，右图是句子的效果图。由此可见，border属性设置的是表格的外边框，即最外一圈的边框线的宽度。还有两个属性：cellspacing ：格间距，即表格的内框的线的宽度。cellpadding ：单元格内的文字与表格线之间的距离。如： 是指格间距为5，每个单元格内文字与格线的距离为10。3对齐方式表格的对齐方式分为表格整体在网页中的对齐方式和表格中内容与表格的对齐方式两种。(1)整个表格在网页中的对齐方式用属性align加在中设置，align=left , right , center。(2)表格中内容与表格的对方方式用align加在或或中设置，align=left , right , center。垂直对齐方式用valign加在中设置，valign=top,middle,bottom,baseline。4跨行、跨列单元格的设置“合并单元格”这一动作在表格中很常见。HTML中的实现方法是用colspan和rowspan加在(或)中。如：是指列合并4个单元格。而是指行合并6个单元格。5表格颜色与背景表格整体的颜色与背景，表格某个单元格(或某行)的颜色与背景，都是在或中加入属性bgcolor= ，background= 来完成。如果表格整体和表格某个单元格的颜色与背景设置后出现矛盾，以单元格的设置为优先。下面我们来完成书中第45页图2-16和第48页图2-18的两个表格的制作。请大家练习一下书第50页图2-19的表格的制作。例3 课程表文件名table.htm制作如下图所示的课程表：2.2.2 超级链接1文件间的链接超级链接的基本格式如下：链接文字其中，是链接标记。链接文字即链接提示文字。属性href定义了该链接所要跳转到的位置，通常是一个URL或一个网页的相对地址或绝对地址。例如：新浪网去商品列表链接提示也可以是图像或其它。如：2网页内的链接锚点第一步 设置锚点将光标定位到需要设置锚点的地方，加入句子 第二步 链接到该锚点在网页中加入 链接文字对于同一网页内的锚点，可以省略网页名，也可以不省略。即 链接文字3在指定窗口中打开链接如果需要保留当前网页，在新的浏览器窗口中打开链接网页，则可通过在中为属性target赋值来实现。新窗口：target=”_blank” , 上级窗口(后退)：target=”_parent” , 当前窗口：target=”_self” 。2.2.3 案例3词曲目录shicilist.htm本案例中，用到了前面制作的例2hr.htm网页、案例2shici.htm网页和图片images/kumu.jpg。第一步 在hr.htm中，设置锚点一a1：标题-蝶恋花 前设置锚点，名为a1。设置锚点二a2：标题-江城子 密州出猎 前设置锚点，名为a2。在第一首诗的作者-苏轼 前加入跳转超链接： 苏轼修改完成后，将文件另存为hr1.htm。第二步 制作网页“词曲目录”shicilist.htm其中，首先是标题“苏轼词曲目录”，用格式标题一，居中对齐。然后，是一个表格：5行2例。第一行 第一单元格 关于“苏轼”的介绍 第二单元格 顶端对齐的画images/kumu.jpg和文字“苏轼枯木怪石图” 第二行 列合并单元格=2 内容“主要词作”第三行 第一单元格 链接：蝶恋花 第二单元格 链接：念奴娇·赤壁怀古第四行 第一单元格 链接：江城子.(其它略)2.2.4 表单表单是一个能够包含表单元素的区域。这些表单元素有文本框、密码框、下拉框、单选框、复选框等。这样，用户就可以在表单中输入信息，并传递到服务器。1插入表单标记：和格式：表单的属性有：action：处理接收信息的文件。若值为空”，则成为自处理表单，即由当前文件自己处理所提交的信息。method：信息发送的方式，有post和get两种选择。推荐使用post方式。如果是get ，则表单中信息以附在网址栏后的方式传递给程序。即在地址栏中会出现：myapp/jijin/1-4.jsp?name=张三&password=123456&submit= ，这样不利于保密name：表单名表单元素分为三大类，input、select、textarea2input标记分为6类，以type属性区别：type=text(文本框) password(口令文本框) radio（单选按钮）checkbox(复选框) submit(提交按钮) reset(重置按钮)image(图像域)例：文本框口令文本框单选框(注意：若要几个单选按钮中只能选中一个，具有排斥性，则这几个按钮的name设为相同的就行了)复选框（注意：无论单选、复选，checked属性表示初始时“已勾选“）提交按钮重置按钮(提交和重置按钮上的字用value属性设置)Input除了有type ，还有name,val