第4章JSP动态网页设计基础

2020年3月20日1第4章JSP动态网页设计基础教学目标教学重点教学过程2020年3月20日2教学目标了解和掌握HTML语法、CSS语法掌握JSP注释、变量和方法的声明掌握JSP指令、JSP动作（Action）语法2020年3月20日3教学重点HTML语法JSP注释变量、方法的声明JSP指令JSP动作（Action）语法2020年3月20日4教学过程HTML语法CSS语法JSP注释变量、方法的声明JSP指令JSP动作（Action）语法JSP脚本2020年3月20日54.1HTML语法什么是HTML语言HTML的基本标签创建列表图像、多媒体和超链接表格框架表单2020年3月20日6什么是HTML语言HTML（HyperlinkTextMarkupLanguage）意思是“超文本标记语言”，它是一种描述文档结构的语言，而不能描述实际的表现形式。HTML语言使用描述性的标记符（称为标签）来指明文档的不同内容。标签是区分文本各个组成部分的分界符，用来把HTML文档划分成不同的逻辑部分（或结构），如段落、标题和表格等。标签描述了文档的结构，它向浏览器提供该文档的格式化信息，以传送文档的外观特征。HTML文件是标准的ASCII文件，不含任何与平台和程序相关的信息，它们可以被任何文本编辑器读取。HTML文档包含两种信息：一种是页面本身的文本，另一种是表示页面元素、结构、格式、和其它超文本链接的HTML标签。2020年3月20日7HTML的基本标签在HTML文档中，标签用来规定Web文档的逻辑结构并控制文档的显示格式。可以使用HTML标签来设置链接、标题、段落、列表和字符加亮区域等等。一般HTML标签格式是这样的：标签名相应内容／标签名标签名用尖括号括起来，不区分大小写。HTML标签一般有起始标签与结束标签两种，分别放在它起作用的文档两边。起始标签与结束标签非常相似，只是结束标签在“”号后面多了一个斜杠“／”。起始标签中可以包含属性（attribute）域，其位置是从标签名之后空一格的地方开始，在结束符（）之前结束。另外，某些HTML元素只有起始标签而没有相应的结束标签，例如换行标签，由于不包括相应的内容，所以只使用〈BR〉就可以了。还有一些元素的结束标签是可以省略的，如分段结束标签/、列表项结束标签/LI、词语结束标签/DT和定义结束标签/DD等等。2020年3月20日8页面结构标签。一个最基本的HTML文档是由HTML/HTML（用来创建一个HTML文档）、HEAD/HEAD（用来标明文档的标题）和BODY/BODY（用来指明文档的主体区域）这3个页面结构标签组成。页头标签为TITLE/TITLE。在HTML文档中，标题部分（即HEAD和/HEAD标签之间）必须包含TITLE/TITLE标签，用来设定文档的标题。HTML文档中，标题用于对文本中的章节进行划分，而标题标签用来指明页面上的一到六级标题。段落标签的格式为P/P，用来创建一个新的段落。P表示一个段落的开始，结尾标记/P可以省略。P还可以用来进行强制换段。在前后两段文字中间，插入P标记后，后一段文字不仅转到下一行，还可以使两端文字中间多出一个空行。在这种情况下，一段的结束就意味着新一段的开始。2020年3月20日9在编辑文档时，希望在浏览网页时能够保留在编辑工具中已经排好的段落格式，这时可以使用PRE/PRE标签。这个标签有一个WIDTH属性，用来表示一行的最大宽度，如果不设置这个属性值，而PRE/PRE标签中的文本又很长，在浏览器中显示时一行文本就会很长，直到遇到换行标记才会换行。注释标签的格式为!--注释信息--，用来对页面本身的内容或状态进行描述。例如，很多源代码控制程序会把页面的状态加到注释中。注释的文字在对HTML做分析时会被忽略，也不会被显示。2020年3月20日10创建列表在网页中经常使用的列表分为有序列表和无序列表两种。有序列表是指各列表项之间是有顺序的，从1、2、3…一直延伸下去。有序列表的基本格式为：OLtype=”符号类型”LItype=”符号类型”/LILItype=”符号类型”/LI…/OL其中，OL/OL标签用来建立一个有序列表，LI/LI用来增加列表项。LI/LI开始标签和结尾标签都是必选的，即每个列表项的结束就是下一个列表项的开始，建好的整个列表项会与上下的文本之间有一个空行，列表项向右缩进并左对齐，各列表项之前都带有顺序号。2020年3月20日11无序列表是指各列表项间没有顺序关系，只是利用列表方法来呈现资料，在各条列前面均有一个项目符号。无序列表的基本格式为：ULtype=”符号类型”LItype=”符号类型”/LILItype=”符号类型”/LI…/UL其中UL/UL标签用来建立一个无序列表，LI/LI用来增加列表项。无序列表通过UL或LI的type属性来定义左端的符号类型，该符号可以是disc（实心圆点）、square（方块）、自定义图片等，默认为实心圆点。2020年3月20日12实际应用中用户还可以根据需要自定义列表。使用自定义列表表示单词或语句，可以使得文本具有交互凹进的特点。自定义列表的基本格式为：DLDT/DTDD/DDDT/DTDD/DD…/DL其中，DL用来定义列表，DT定义列表项用来表示单词，列表项会自动换行并左对齐，列表项间没有空行；DD定义语句，用来解释单词。2020年3月20日13图像、多媒体和超链接一个好的网站，漂亮的图片、各种音频、视频和方便快捷的链接是比不可少的，这样可以使网页更加丰富多彩、引人入胜。在本小节中使用了DreamweaverMX2004进行介绍，因此这里不再介绍，详细内容可参看书中相应章节。2020年3月20日14表格表格是一种能够有效的描述信息的组织方式，由行、列和单元格组成。它可以将文字和图片等那同按照行和列排列起来，可以很好地控制页面布局。在浏览器中显示时，表格的整体外观是由TABLE标签的属性决定的。HTML中使用TABLE/TABLE标签创建表格，其基本格式为：TABLE表格内容/TABLETR.../TR标签用来定义表格的表头。TD.../TD标签用来定义表格的单元格。2020年3月20日15框架所谓框架就是将网页分成几个框窗，同时取得多个URL，每个窗框显示一定的内容。含有框架的网页其HTML文档形式和一般的HTML文档相似，只是使用了FRAMESET标签而没有BODY标签，它是一种非常重要的页面排版方式。使用了框架结构的HTML文档基本格式为：HTMLHEAD标题部分/HEADFRAMESETFRAME…FRAME…/FRAMESET/HTML2020年3月20日16其中，FRAMESETFRAME标签用来定义一个框架容器。FRAME标签用来定义每一个框窗内的参数属性。当用户使用的浏览器版本太低不支持框架功能时，将看到一片空白。为了避免这种情况，可使用NOFRAMES这个标签。在框架页面中每个子窗口内对应一个FRAME语句，该语句中的SRC属性指明了链接的HTML，该文件将显示在FRAME对应的窗口中。如果该HTML文件含有超链接，当用户单击该链接时，链接的网页在哪里显示呢？如果没有指定，则在原来的窗口中打开；如果要指定在哪个子窗口中打开，这时就需要使用TARGET属性来实现了。2020年3月20日17表单网页中具有可输入表项及项目选择等控制所组成的栏目称为表单，它是与用户交互信息的主要手段，在HTML页面中起着重要作用。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。当提交资料后，所填资料就会通专门的CGI接口传到Web服务器上，网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。2020年3月20日184.2CSS语法CSS简介CSS基本语法CSS基本属性2020年3月20日19CSS简介CSS是“CascadingStyleSheet”的缩写，可以译为“层叠样式表”或“级联样式单”。它用来进行网页风格设计的，它简化并扩展了HTML中各种标记，使得各个标记的属性更具有一般性和通用性，大大的提高了HTML开发的效率。在制作网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。2020年3月20日20CSS（CascadingStyleSheet）中，“Cascading”是“层叠”的意思，也就是说在同一个Web文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会被最后在显示时采用。从样式表插入的形式来看可以分为三种：内联式样式表：它利于现有的HTML标记把特殊的样式加入到那些由标记控制的信息中，比如刚才的例子。嵌入式样式表：它和Javascript一样可以嵌入到HTML文件的头部中去（html和body标记之间），使用Style和/Style容器装载，例如：“stylep{color:blue;font-weight:bold}/style”，这样会对页面中所有p标记都起作用。外部式样式表：是一种保存在外部的样式表文件，外部文件以.CSS为扩展名，例如“linkrel=stylesheethref=main-sheet.csstype=text/css”。2020年3月20日21CSS是用来扩展HTML的，也就是说CSS不能脱离HTML，它只是一项辅助工具。除了可扩展HTML的样式设定外，CSS使得网页的设计与维护更加高效，这主要表现在以下几个方面：减少图形文件的使用。CSS提供了很多的文字样式设定，且再加上IE内建的滤镜特效，因此可轻松取代原来图形才能表现的视觉效果。集中管理样式信息。CSS可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容独立出来，并集中管理。设定共享样式。网页的样式设定和内容分离的好处，除了可集中管理外，如果进一步将CSS样式信息存成独立的文件，还可让多个网页文件共同使用它。将样式分类使用。相对于多份HTML文件可套用同一个CSS样式文件，也可以在一份HTML网页文件上套用多个CSS样式文件。2020年3月20日22CSS基本语法CSS的基本语法，包括基本格式、注释语句、选择符等，这些都是CSS的基本元素，是开发CSS的基础。一般来说，样式表的定义分为选择符（selector）和块{}（block），块里包含属性（properties）和属性的取值（value）。开发人员可以在CSS中插入注释来说明代码的含义。注释有利于自己别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以“/*”开头，以“*/”结尾。CSS中，选择符可以分为3类：HTML标记选择符（HTMLselector）、类选择符（Classselector）和ID选择符（IDselector）。2020年3月20日23一个Web文档中可以有多个样式表，这些样式表根据所在的位置，拥有不同的优先级，也就是对选择符拥