jsp动态网页设计基础1

《jsp动态网页设计基础1》由会员分享，可在线阅读，更多相关《jsp动态网页设计基础1（98页珍藏版）》请在金锄头文库上搜索。

1、第2章 JSP动态网页设计基础,要使用JSP开发出专业的动态网站，首先必须熟练掌握静态网站的制作技术。HTML是在学习JSP之前必须了解的基础知识，很多JSP语法的使用都是建立在HTML文档的基础上。实际开发中，一般都是使用现成的HTML文档来添加JSP的动态脚本并做适当修改，除了特殊的应用，很少从零开始写一个JSP页面，所以读懂HTML文档并了解HMTL语言中的技巧为更快地上手JSP提供了很大的帮助。 JavaScript是JSP知识体系中一个可选的知识模块。也就是说不了解JavaScript知识也不会影响JSP的应用开发，但是如果掌握了JavaScript的知识，将可以更加方便地解决网页开

2、发中的某些特定问题，例如经常使用JavaScript判断用户在表单中输入数据的合法性。,本章学习目标： 了解HTML与JSP的关系 掌握HTML的常用标签 能够使用HTML设计基本网页 能够使用HTML设计网络中常用的表单 了解JavaScript在JSP学习中的作用 了解JavaScript的简单应用 能够读懂JavaScript程序，并能通过查阅资料了解更多JavaScript应用,2.1 HTML快速入门,HTML是Hyper Text Markup Language的缩写，中文一般译为“超文本标记语言”。 用HTML语言编写的超文本文档称为HTML文档，和一般文档的不同之处是，一个HT

3、ML文件不仅包含文本内容，还包含一些Tag，中文称为“标签”或者“标记”。 HTML文件的后缀名是.html或者.htm。,2.1.1 HTML基本结构, . . ,html文档以标签开始，以标签结束。,文档头以标签开始，以标签结束。,文档体以标签开始，以标签结束。,【例2-1】网页基本结构, 我的第一个网页 少年不识愁滋味，为赋新词强说愁 ,步骤1：建立站点根目录新建一个文件夹用于存放网页，比如在F盘创建一个文件夹myweb，在本章我们把它作为站点根目录，读者在做练习时可以自行设定站点根目录。 步骤2：编写代码HTML可以使用任何字处理软件来编写，最简单的是Windows自带的记事本。用记事

4、本编写以上代码，标题和网页主体内容可以适当修改。 步骤3：保存文件文件名命名为first.html（注意：其中first是自己为文件起的名字，可修改，但扩展名必须为html或者htm），另外注意将“文件类型”改为“所有文件”，如图2-1所示。,图2-1 保存html文件,步骤4：浏览网页保存完毕后，在文件夹myweb中可以看到first.html被浏览器识别，双击即可查看网页效果，在IE中浏览效果如图2-2所示，如需要继续编辑，则右键单击选择以记事本打开。,图2-2 第一个网页浏览效果,我们回过头分析一下第一个网页，其中的代码由四对标签组成。 ：表示整个HTML文档的开始和结束，网页的所有内容

5、都位于这两个标签之间。 ：头部标签，在例子中，头部之间插入一对标题标签。 ：标题标签，说明该HTML文件的标题是什么，当浏览该文件时，标题显示在浏览器上方的标题栏内。在第一个网页中，我们在标记之间包含的标题是“我的第一个网页”，在图2-2中可以看到它显示在网页的标题栏。 ：主体标签，页面的主体部分都放在这对标签之间。在第一个网页中，我们在标记之间包含的内容是“少年不识愁滋味，为赋新词强说愁”，在图2-2可以看到这行字显示在网页的主体部分。,2.1.2 HTML常用标签,标签可以从大体上分为单标签（没有结束标签）和双标签（有结束标签）两种，根据有没有属性，有以下四种显示方式。 . ,1. 文本,

6、 面向大海 春暖花开 面向大海 春暖花开 从明天起，做一个幸福的人 喂马，劈柴，周游世界 从明天起，关心粮食和蔬菜 我有一所房子，面向大海，春暖花开 ,在网页中添加文本非常简单，只需要把要添加的文字输入到和之间。,【例2-2】在网页中输入文字（text.html）。,预览网页，结果如图2-3所示，似乎没有我们预期的结果，这是因为，如果没有标签修饰文本，文字将以无格式的形式显示，（如果浏览器窗口显示不下，则自动换行），要实现分段、不同字体及大小，可以使用标签来修饰文字。,图2-3 多行文本的预览,(1) 分段排版 分段标签主要有“预先格式化标签”、“换行标签”和“段落标签”。 预先格式化标签：添

7、加在文本的开始和结尾处。用这个标签括起来的文本，在网页中会按照输入时的格式显示。 换行标签：换行标签加在需要换行的位置，当浏览器遇到这个标签时，会自动进行换行。 段落标签：段落标签添加在段首和段尾。段落标签和标签的不同之处在于在不同段落之间，多一行空行。段落标签有一个属性align，它用来描述文字的对齐方式，一般值有center、left和right三种，分别表示居中、左对齐和右对齐。,【例2-3】预先格式化标签的使用（pre.html）。, 面向大海 春暖花开 面向大海 春暖花开 从明天起，做一个幸福的人 喂马，劈柴，周游世界 从明天起，关心粮食和蔬菜 我有一所房子，面向大海，春暖花开 ,图

8、 2-4 标签的使用,【例2-4】换行和段落标签的使用（paragraph.html）。, 换行标签和段落标签 猎人、猎狗 一条猎狗将兔子赶出了窝，一直追赶他，追了很久仍没有捉到。牧羊看到此种情景，讥笑猎狗说你们两个之间小的反而跑得快得多。猎狗回答说：你不知道我们两个的跑是完全不同的！我仅仅为了一顿饭而跑，他却是为了性命而跑呀！ 这话被猎人听到了，猎人想:猎狗说的对啊，那我要想得到更多的猎物。就这样过了一段时间，问题又出现了，大兔子非常难捉到，小兔子好捉，但捉到大兔子得到的奖赏和捉到小兔子得到的骨头差不多，猎狗们善于观察发现了这个窍门，专门去捉小兔子。慢慢的，大家都发现了这个窍门。猎人对猎狗说

9、:最近你们捉的兔子越来越小了，为什么?猎狗们说:反正没有什么大的区别，为什么费那么大的劲去捉那些大的呢? ,图2-5 段落标签和换行标签的使用,另外，该例子第5行使用到了水平线标签，代码为，其属性color表示水平线的颜色，颜色值设置参考后续内容“字体样式”；属性width表示水平线宽度，单位可以是像素或者百分比，默认为100%；属性size表示水平线高度，单位为像素。,(2) 字体样式 .对它括起来的文字设置字体样式，它主要有如下属性。 face：文字所用的字体 size：文字的大小 color：文字的颜色 另外样式标签可以用来设置粗体、斜体和下划线样式。 粗体标签：. 斜体标签：. 下划线

10、标签：.,【例2-5】设置字体样式（font.html）。, 面向大海 春暖花开 面向大海 春暖花开 从明天起，做一个幸福的人 喂马，劈柴，周游世界 从明天起，关心粮食和蔬菜 我有一所房子，面向大海，春暖花开 ,图2-6 设置字体样式,在指定网页对象的颜色时，比如字体颜色、背景颜色等，有16种标准颜色可以选择，如表2-1所示。在网页中，除了用颜色名称表示颜色外，还可以用颜色的十六进制值表示，它的形式为#RRGGBB，其中，RR、GG、BB分别表示红、绿、蓝成分所占比例的两位十六进制值。,表2-1 16种标准颜色,(3) 标题 一般文章都有标题、章和节等结构，HTML中提供了标题标签、和，中的n

11、表示标题级别，n值越小，标题字号越大。标题标签也是成对出现的。, 标题标签的使用 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 正文非标题文字 ,【例2-6】标题标签的使用（headline.html）。,图2-7 标题标签的使用,2. 网页背景,网页背景颜色和背景图像都是页面属性，在标签中设置。 背景颜色 在标签中设置属性bgcolor即可，例如我们要将网页的背景颜色设置为“银色”，只需要在标签中加入一句代码bgcolor=“sliver“或者bgcolor=“#0c0c0c“。,【例2-7】设置网页背景颜色（bgcolor.html）。, 设置网页背景颜色 面向大海 春暖花开

12、 从明天起，做一个幸福的人 喂马，劈柴，周游世界 从明天起，关心粮食和蔬菜 我有一所房子，面向大海，春暖花开 ,图2-8 网页背景颜色设置,(2) 背景图像 要设置背景图像，首先我们选好一副图像bg001.jpg，接下来要把图像放入站点中。还记得我们先前创建的站点的路径是F:myweb，现在在站点中新建一个文件夹images，用于存放图片，创建好以后将图像bg001.jpg置于其中。 设置背景图像的一般形式为： 图像路径一般使用相对路径，即它相对于html文档的路径，bg001.jpg相对于保存于F:myweb路径下的网页文档background.html的路径为images/bg001.jp

13、g。 在设置背景图像时，如果该图像的大小不能够占满整个浏览器页面，它们会自动进行拼接。,【例2-8】设置页面背景图像（background.html）。, 设置背景图像 这天，小猪唏哩呼噜和小伙伴们，在商店买了许多鞭炮。因为今天是小白兔的生日。他们要放鞭炮来祝贺它的生日.小伙伴们高高兴兴的一起唱着歌，往小白兔的家走去。这时，小猪看见一只特别美丽的蝴蝶，就轻手轻脚的朝蝴蝶走去。小蝴蝶仿佛像看见小猪一样。挥动着美丽的翅膀，朝森林里飞去。小猪唏哩呼噜紧追不舍，一会就和大家走散了。小猪也没注意到前面是森林，结果和伙伴们越走越远。他迷了路。小猪赶忙往回走，可是怎么也找不到回去的路了。 ,图2-9 设置网

14、页背景图像,3. 图像,适当的应用图像可以使网页变得赏心悦目，充满吸引力，网页中可以加入的图像格式有jpeg、gif和png。 网页中插入图像的标签是，它是一个单标签。并不是真正的把图片加入到HTML文件中，而是通过一个路径告诉浏览器图像在哪里。其基本语法格式为： 这里图像路径一般也使用相对路径，即图像文件相对于html文档的路径，的常用属性见表2-2。,表2-2 标签的常用属性,【例2-9】在网页中加入图像（image.html）。, 图像应用 在海边,我捡起一枚小小的贝壳。贝壳很小,却非常坚硬和精致。回旋的花纹中间有着色泽或深或浅的小点,如果仔细观察的话,在每个小点周围又有自成一圈的复杂图

15、样。怪不得古时候的人要用贝壳来做钱币,在我手心里躺着实在是一件艺术品,是舍不得拿去和别人交换的宝贝啊! 在海边捡起这一枚贝壳的时候,里面曾经居住过的小小的柔软的肉体早已死去,在阳光,沙粒和海浪的淘洗之下,贝壳中生命所留下的痕迹已完全消失了。但是,为了这样一个短暂,微小的生命,为了这样一个脆弱,卑微的生命,上仓给它制作居所时却是多精致,多仔细,多么地一丝不苟啊! 比起贝壳里的生命来,我在这世间能停留的时间和空间是不是更长和更多一点呢?是不是也应该用我的能力把我所能做到的事情做得更精致,更仔细,更加一丝不苟呢?请让我也能留下一些令人珍惜,令人惊叹的东西吧。在千年之后,也许会有人对我留下的痕迹反复观

16、看,反复把玩,并且会忍不住轻轻地叹息: “这是一颗怎样固执又怎样简单的心啊!“ ,下面，我们要在网页中加入图像shell.jpg。当然首先我们要将图像置入F:htmlimages中，然后在网页中加入。,图2-10 在网页中加入图像,4. 超链接,超级链接（HyperLink）习惯上被称为超链接。给网页上的文本或图像设置超链接，可以使得从源点跳到目标点。 基本语法 文字或图像 语法说明 在HTML文件中，超链接目标可以分为内部链接和外部链接。所谓内部链接：指网站内部文件之间的链接，此类链接的地址一般使用相对地址，即链接目标文件相对于该网页文件的路径地址。所谓外部链接，指网站内的文件链接到站点外文件的链接，外部链接一般使用绝对地址，比如链接到新浪，地址就是http:/）。 链接的源点可以是文字或者图像。 另外，比较特殊是在网页上添加一个电子邮件链接。添加电子邮件链接，只需要在希望链接的电子邮件地址的文字前后分别加上和即可。在浏览网页时，点击链接文字就可以打开