第4章 JSP动态网页设计基础教学目标教学重点教学过程 2019年10月21日.

第4章 JSP动态网页设计基础教学目标教学重点教学过程 2019年10月21日

教学目标了解和掌握HTML语法、CSS语法掌握JSP注释、变量和方法的声明掌握JSP指令、JSP动作（Action）语法
2019年10月21日

教学重点 HTML语法 JSP注释变量、方法的声明 JSP指令 JSP动作（Action）语法 2019年10月21日

教学过程 HTML语法 CSS语法 JSP注释变量、方法的声明 JSP指令 JSP动作（Action）语法 JSP脚本
2019年10月21日

4.1 HTML语法什么是HTML语言 HTML的基本标签创建列表图像、多媒体和超链接表格框架表单 2019年10月21日

什么是HTML语言 HTML（Hyperlink Text Markup Language）意思是“超文本标记语言”，它是一种描述文档结构的语言，而不能描述实际的表现形式。HTML语言使用描述性的标记符（称为标签）来指明文档的不同内容。标签是区分文本各个组成部分的分界符，用来把HTML文档划分成不同的逻辑部分（或结构），如段落、标题和表格等。标签描述了文档的结构，它向浏览器提供该文档的格式化信息，以传送文档的外观特征。 HTML文件是标准的ASCII文件，不含任何与平台和程序相关的信息，它们可以被任何文本编辑器读取。HTML文档包含两种信息：一种是页面本身的文本，另一种是表示页面元素、结构、格式、和其它超文本链接的HTML标签。 2019年10月21日

HTML的基本标签在HTML文档中，标签用来规定Web文档的逻辑结构并控制文档的显示格式。可以使用HTML标签来设置链接、标题、段落、列表和字符加亮区域等等。一般HTML标签格式是这样的： <标签名>相应内容<／标签名> 标签名用尖括号括起来，不区分大小写。HTML标签一般有起始标签与结束标签两种，分别放在它起作用的文档两边。起始标签与结束标签非常相似，只是结束标签在“<”号后面多了一个斜杠“／”。起始标签中可以包含属性（attribute）域，其位置是从标签名之后空一格的地方开始，在结束符（>）之前结束。另外，某些HTML元素只有起始标签而没有相应的结束标签，例如换行标签，由于不包括相应的内容，所以只使用〈BR〉就可以了。还有一些元素的结束标签是可以省略的，如分段结束标签</>、列表项结束标签</LI>、词语结束标签</DT>和定义结束标签</DD>等等。 2019年10月21日

HTML文档中，标题用于对文本中的章节进行划分，而标题标签用来指明页面上的一到六级标题。
页面结构标签。一个最基本的HTML文档是由<HTML> </HTML>（用来创建一个HTML文档）、<HEAD> </HEAD>（用来标明文档的标题）和<BODY> </BODY>（用来指明文档的主体区域）这3个页面结构标签组成。页头标签为<TITLE> </TITLE>。在HTML文档中，标题部分（即<HEAD>和</HEAD>标签之间）必须包含<TITLE> </TITLE>标签，用来设定文档的标题。 HTML文档中，标题用于对文本中的章节进行划分，而标题标签用来指明页面上的一到六级标题。段落标签的格式为<P> </P>，用来创建一个新的段落。<P>表示一个段落的开始，结尾标记</P>可以省略。<P>还可以用来进行强制换段。在前后两段文字中间，插入<P>标记后，后一段文字不仅转到下一行，还可以使两端文字中间多出一个空行。在这种情况下，一段的结束就意味着新一段的开始。 2019年10月21日

在编辑文档时，希望在浏览网页时能够保留在编辑工具中已经排好的段落格式，这时可以使用<PRE> </PRE>标签。这个标签有一个WIDTH属性，用来表示一行的最大宽度，如果不设置这个属性值，而<PRE> </PRE>标签中的文本又很长，在浏览器中显示时一行文本就会很长，直到遇到换行标记才会换行。注释标签的格式为，用来对页面本身的内容或状态进行描述。例如，很多源代码控制程序会把页面的状态加到注释中。注释的文字在对HTML做分析时会被忽略，也不会被显示。 2019年10月21日

创建列表在网页中经常使用的列表分为有序列表和无序列表两种。
有序列表是指各列表项之间是有顺序的，从1、2、3…一直延伸下去。有序列表的基本格式为： <OL type=”符号类型”> <LI type=”符号类型”> </LI> … </OL> 其中，<OL> </OL>标签用来建立一个有序列表，<LI> </LI>用来增加列表项。<LI> </LI>开始标签和结尾标签都是必选的，即每个列表项的结束就是下一个列表项的开始，建好的整个列表项会与上下的文本之间有一个空行，列表项向右缩进并左对齐，各列表项之前都带有顺序号。 2019年10月21日

无序列表是指各列表项间没有顺序关系，只是利用列表方法来呈现资料，在各条列前面均有一个项目符号。无序列表的基本格式为：
<UL type=”符号类型”> <LI type=”符号类型”> </LI> … </UL> 其中<UL> </UL>标签用来建立一个无序列表，<LI> </LI>用来增加列表项。无序列表通过<UL>或<LI>的type属性来定义左端的符号类型，该符号可以是disc（实心圆点）、square（方块）、自定义图片等，默认为实心圆点。 2019年10月21日

实际应用中用户还可以根据需要自定义列表。使用自定义列表表示单词或语句，可以使得文本具有交互凹进的特点。自定义列表的基本格式为：
<DL> <DT> </DT> <DD> </DD> … </DL> 其中，<DL>用来定义列表，<DT>定义列表项用来表示单词，列表项会自动换行并左对齐，列表项间没有空行；<DD>定义语句，用来解释单词。 2019年10月21日

图像、多媒体和超链接一个好的网站，漂亮的图片、各种音频、视频和方便快捷的链接是比不可少的，这样可以使网页更加丰富多彩、引人入胜。在本小节中使用了Dreamweaver MX 2004 进行介绍，因此这里不再介绍，详细内容可参看书中相应章节。 2019年10月21日

表格表格是一种能够有效的描述信息的组织方式，由行、列和单元格组成。它可以将文字和图片等那同按照行和列排列起来，可以很好地控制页面布局。
在浏览器中显示时，表格的整体外观是由<TABLE>标签的属性决定的。 HTML中使用<TABLE> </TABLE>标签创建表格，其基本格式为： <TABLE> 表格内容 </TABLE> <TR>...</TR>标签用来定义表格的表头。 <TD>...</TD>标签用来定义表格的单元格。 2019年10月21日

框架所谓框架就是将网页分成几个框窗，同时取得多个URL，每个窗框显示一定的内容。含有框架的网页其HTML文档形式和一般的HTML文档相似，只是使用了<FRAMESET>标签而没有<BODY>标签，它是一种非常重要的页面排版方式。使用了框架结构的HTML文档基本格式为： <HTML> <HEAD> 标题部分 </HEAD> <FRAMESET> <FRAME> … </FRAMESET> </HTML> 2019年10月21日

其中，<FRAMESET> <FRAME>标签用来定义一个框架容器。
当用户使用的浏览器版本太低不支持框架功能时，将看到一片空白。为了避免这种情况，可使用<NOFRAMES>这个标签。在框架页面中每个子窗口内对应一个FRAME语句，该语句中的SRC属性指明了链接的HTML，该文件将显示在FRAME对应的窗口中。如果该HTML文件含有超链接，当用户单击该链接时，链接的网页在哪里显示呢？如果没有指定，则在原来的窗口中打开；如果要指定在哪个子窗口中打开，这时就需要使用TARGET属性来实现了。 2019年10月21日

表单网页中具有可输入表项及项目选择等控制所组成的栏目称为表单，它是与用户交互信息的主要手段，在HTML页面中起着重要作用。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。当提交资料后，所填资料就会通专门的CGI接口传到Web服务器上，网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。 2019年10月21日

4.2 CSS语法 CSS简介 CSS基本语法 CSS基本属性 2019年10月21日

CSS简介 CSS是“Cascading Style Sheet”的缩写，可以译为“层叠样式表”或“级联样式单”。它用来进行网页风格设计的，它简化并扩展了HTML中各种标记，使得各个标记的属性更具有一般性和通用性，大大的提高了HTML开发的效率。在制作网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。 2019年10月21日

CSS（Cascading Style Sheet）中，“Cascading”是“层叠”的意思，也就是说在同一个Web文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会被最后在显示时采用。从样式表插入的形式来看可以分为三种：内联式样式表：它利于现有的HTML标记把特殊的样式加入到那些由标记控制的信息中，比如刚才的例子。嵌入式样式表：它和Javascript一样可以嵌入到HTML文件的头部中去（<html>和<body>标记之间），使用<Style>和</Style>容器装载，例如：“<style> p {color : blue ; font-weight : bold} </style>”，这样会对页面中所有<p>标记都起作用。外部式样式表：是一种保存在外部的样式表文件，外部文件以.CSS为扩展名，例如“<link rel=stylesheet href="main-sheet.css" type="text/css">”。 2019年10月21日

CSS是用来扩展HTML的，也就是说CSS不能脱离HTML，它只是一项辅助工具。除了可扩展HTML的样式设定外，CSS使得网页的设计与维护更加高效，这主要表现在以下几个方面：
减少图形文件的使用。CSS提供了很多的文字样式设定，且再加上IE内建的滤镜特效，因此可轻松取代原来图形才能表现的视觉效果。集中管理样式信息。CSS可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容独立出来，并集中管理。设定共享样式。网页的样式设定和内容分离的好处，除了可集中管理外，如果进一步将CSS样式信息存成独立的文件，还可让多个网页文件共同使用它。将样式分类使用。相对于多份HTML文件可套用同一个CSS样式文件，也可以在一份HTML网页文件上套用多个CSS样式文件。 2019年10月21日

CSS基本语法 CSS的基本语法，包括基本格式、注释语句、选择符等，这些都是CSS的基本元素，是开发CSS的基础。
一般来说，样式表的定义分为选择符（selector）和块{}（block），块里包含属性（properties）和属性的取值（value）。开发人员可以在CSS中插入注释来说明代码的含义。注释有利于自己别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以“/*” 开头，以“*/” 结尾。 CSS中，选择符可以分为3类：HTML标记选择符（HTML selector）、类选择符（Class selector）和ID选择符（ID selector）。 2019年10月21日

一个Web文档中可以有多个样式表，这些样式表根据所在的位置，拥有不同的优先级，也就是对选择符拥有不同的控制权。样式表的优先级越高，就会被最后在显示时采用。一般说来，样式表的层叠顺序取决于以下3个特性：
样式表可以用! important 特指为重要的。一个特指为重要的样式会凌驾于与之对立的其它相同权重的样式。网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突，网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。选择符规则：计算特性。基于它们的特性级别，样式表也可以超越与之冲突的样式表，一个较高特性的样式永远都凌驾于一个较低特性的样式。 2019年10月21日

CSS基本属性字体属性。字体属性是CSS最基本的属性，也是实际应用中最长用到的属性，它主要包括以下一个方面的属性：
font-family：文本使用什么字体，属性值可以是任何字体。 font-style：字体是否斜体，属性值为Normal、italic、oblique。 font-variant：是否用小体大写，属性值为Normal、small-caps。 font-weight：字体的粗细，属性值为Normal、bold、bolder、lithter等。 font-size：字体的大小，Absolute-size、relative-size、length、percentage以及具体的字号（如12pt）等。 2019年10月21日

颜色和背景属性。颜色和背景属性主要包括以下几个方面的属性：
Color：定义前景色，属性值可以取所有的颜色。 Background-color：定义背景色，属性值可以取所有的颜色。 Background-image：定义背景图案，属性值为图像文件的保存路径。 Background-repeat：重复方式，属性值为Repeat-x、repeat-y、no-repeat。 Background-attachment：设置滚动，属性值为Scroll、Fixed。 Background-position：初始位置，属性值为Percentage、length、top、left、right、bottom等。 2019年10月21日

文本属性。文本属性主要包括以下几个属性：
Word-spacing：单词之间的间距，属性值为Normal <length>（必须以长度为单位）。 Letter-spacing：字母之间的间距，属性值同Word-spacing。 Text-decoration：文字的装饰样式，属性值为None、underline、overline、line-through、blink。 Vertical-align：垂直方向的位置，属性值为Baseline、sub、super、top、text-top、middle、bottom、text-bottom。 Text-transform：文本转换，属性值为Capitalize、uppercase、lowercase、none。 Text-align：对齐方式，属性值为Left、right、center、justify。 Text-indent：首行的缩进方式，属性值为<length>、<percentage>。 Line-height：文本的行高，属性值为Normal、<number>、<length>、<percentage> 。 2019年10月21日

除了前面介绍的几种常用的属性外，CSS还有填充距属性、边框属性、分级属性、鼠标属性等属性。
边距属性。边距属性包括以下几个属性： Margin-top：顶端边距，属性值为Length、percentage、auto。 Margin-right：右端边距，属性值同“Margin-top”。 Margin-bottom：底端边距，属性值同“Margin-top”。 Margin-left：左端边距，属性值同“Margin-top”。除了前面介绍的几种常用的属性外，CSS还有填充距属性、边框属性、分级属性、鼠标属性等属性。 2019年10月21日

4.3 JSP注释隐藏注释 HTML注释 Java注释 2019年10月21日

隐藏注释隐藏注释也是JSP的标准注释，写在JSP程序中，在发布网页时完全被忽略，不发给客户，当希望隐藏JSP程序的注释时是很有用的。其语法格式为：<%-- comment --%>，comment为想要添加的文本注释。 2019年10月21日

HTML注释 HTML注释在发布网页时可以在浏览器源文件窗口中可以看到，并且在这种注释中可以使用JSP的表达式，其语法格式为：，其中comment可以是文字说明，expression为JSP表达式。 2019年10月21日

Java注释在JSP程序中，也可以遵循Java语言本身的注释规则对代码进行注释，这样的注释和隐藏注释相似，在发布网页被完全忽略，在浏览器的源文件窗口中看不到这种注释。其语法格式为：<%/*comment*/%>，comment为要添加的注释文本。 2019年10月21日

4.4 变量、方法的声明变量、方法的声明和表达式表达式 2019年10月21日

变量、方法的声明和表达式 JSP中的声明可以用来定义一个或多个合法的变量（包括普通变量和类变量）和方法，并不输出任何的文本到输出流去。在声明元素中声明的变量和方法将在JSP页面初始化时被初始化。 JSP声明的语法格式为：<%! declaration; [ declaration; ] ... %>，其中declaration为声明的变量、方法的名称和内容。在声明变量变量和方法时，需要注意以下几点：声明必须以";"结尾。 page %>中被包含进来的已经声明的变量和方法，不需要对它们重新进行声明。 include %>或<jsp:include >元素包含进来。 2019年10月21日

表达式 SP中表达式可以将某个计算结果转换成一个字符串并且直接使用在输出网页上。包含一个符合JSP语法的表达式的语法格式为：<%= expression %>。JSP的表达式中没有分号，除非在加引号的字符串部分才使用分号。 2019年10月21日

4.5 JSP指令 include指令 Page指令 taglib指令 2019年10月21日

include指令 include file=“filename” %>，其中filename指被包含的文件的名称。 include include %>指令时，这个包含的过程是静态的。静态的包含是指这个被包含的文件将会被插入到JSP文件中去，这个包含的文件可以是JSP文件、HTML文件、文本文件。如果包含的是JSP文件，这个包含的JSP文件中的代码将会被执行。 2019年10月21日

Page指令 Page page %>指令不能作用于动态的包含文件，例如<jsp:include>。Page 指令的语法格式为： page [ language="java" ] [ extends="package.class" ] [ import="{package.class | package.*}, ..." ] [ session="true | false" ] [ buffer="none | 8kb | sizekb" ] [ autoFlush="true | false" ] [ isThreadSafe="true | false" ] [ info="text" ] [ errorPage="relativeURL" ] [ contentType="mimeType [ ;charset=characterSet ]" | "text/html ; charset=ISO " ] [ isErrorPage="true | false" ] %> page %>指令放在JSP的文件的哪个地方，它的作用范围都是整个JSP页面。 2019年10月21日

taglib指令 taglib指令用来定义一个标签库以及其自定义标签的前缀。其语法格式为：
taglib uri=" tagLibraryURI" prefix=" tagPrefix" %> 其中，属性uri（Uniform Resource Identifier，统一资源标识符）用来唯一的确定标签库的路径，并告诉JSP引擎在编译JSP程序时如何处理指定标签库中的标签，属性prefix定义了一个指示使用此标签库的前缀。 2019年10月21日

4.6 JSP动作（Action）语法 <jsp:include>动作 <jsp:useBean>动作
<jsp:setProperty> 动作 <jsp:getProperty>动作 <jsp:forward>动作 <jsp:plugin> 2019年10月21日

<jsp:include>动作
＜jsp:include page=“relative URL” flush=“true” /＞ <jsp:include>动作允许包含静态文件和动态文件，这两种包含文件的结果是不同的。如果文件仅是静态文件，那么这种包含仅仅是把包含文件的内容加到jsp文件中去，这个文件不会被JSP编译器执行；如果这个文件动态的，那么这个被包含文件也会被JSP编译器执行。 2019年10月21日

<jsp:useBean>动作
<jsp:useBean>动作用来装载一个将在JSP页面中使用的JavaBean。这个功能非常有用，因为它既可以发挥Java组件重用的优势，同时也避免了损失JSP区别于Servlet的方便性。其语法格式为： <jsp:useBean id="beanInstanceName" scope="page | request | session | application" {class="package.class" | type="package.class" | class="package.class" type="package.class" | beanName="{package.class | <%= expression %>}" type="package.class“ } {/> | > other elements </jsp:useBean> <jsp:useBean>元素的主体通常包含有<jsp:setProperty>元素，用于设置Bean的属性值。正如上面所说的，<jsp:useBean>的主体仅仅只有在<jsp:useBean>示例Bean时才会被执行，如果这个Bean已经存在，<jsp:useBean>能够定位它，那么主体中的内容将不会起作用，但你可以在<jsp:useBean>元素外用<jsp:setProperty>元素设定 JavaBean 的属性。 2019年10月21日

<jsp:setProperty> 动作
获得Bean实例之后，可以利用<jsp:setProperty>动作设置、修改Bean中的属性值。其语法格式如下： <jsp:setProperty name="beanInstanceName" {property= "*" | property="propertyName" [ param="parameterName" ] | property="propertyName" value="{string | <%= expression %>}" } /> <jsp:setProperty>元素使用Bean给定的setter方法，在Bean中设置一个或多个属性值。在使用这个元素之前必须使用<jsp:useBean>声明此Bean，因为<jsp:useBean>和<jsp:setProperty>是联系在一起的，同时它们使用的Bean实例的名字也应当相匹配。 2019年10月21日

<jsp:getProperty>动作
<jsp:getProperty>动作用来提取指定Bean属性的值，转换成字符串，然后输出。其语法格式为： <jsp:getProperty name="beanInstanceName" property="propertyName" /> <jsp:getProperty>元素可以获取Bean的属性值，并可以将其使用或显示在JSP页面中。在使用<jsp:getProperty>之前，必须用<jsp:useBean>创建它。 2019年10月21日

<jsp:forward>动作
<jsp:forward>用于引导客户端的请求到另一个页面或者是另一个Servlet去。其语法格式为： <jsp:forward page={"relativeURL" | "<%= expression %>"} /> <jsp:forward>动作可以包含一个或几个<jsp:param>子动作，用于向要引导进入的页面传递参数。需要注意，当<jsp:forward>动作发生的时候，如果已经有文本被写入输出流而且页面没有设置缓冲，那么将抛出一个IllegalStateException的异常。 2019年10月21日

<jsp:plugin> 在JSP处理这个动作的时候，将根据客户端浏览器的不同，JSP在执行以后将分别输出为OBJECT或EMBED这两个不同的HTML元素。其语法格式为： <jsp:plugin type="bean | applet" code="classFileName" codebase="classFileDirectoryName" [ name="instanceName" ] [ archive="URIToArchive, ..." ] [ align="bottom | top | middle | left | right" ] [ height="displayPixels" ] [ width="displayPixels" ] 2019年10月21日

[ hspace="leftRightPixels" ] [ vspace="topBottomPixels" ]
[ jreversion="JREVersionNumber | 1.1" ] [ nspluginurl="URLToPlugin" ] [ iepluginurl="URLToPlugin" ] > [ <jsp:params> [ <jsp:param name="parameterName" value="{parameterValue | <%= expression %>}" /> ]</jsp:params> ] [ <jsp:fallback> text message for user </jsp:fallback> ] </jsp:plugin> 2019年10月21日

4.7 JSP脚本 JSP脚本即Scriptlet，也就是JSP中的代码部分，是java程序的一段代码，几乎可以使用任何java语法，它是在请求时期执行的，它可以使用jsp页面所定义的变量、方法、表达式或JavaBeans。脚本的语法格式为： <% scriptlet %> 如果要在Scriptlet内部使用字符“%>”，必须写成“%＼>” 2019年10月21日

第4章 JSP动态网页设计基础教学目标教学重点教学过程 2019年10月21日.

Similar presentations

Presentation on theme: "第4章 JSP动态网页设计基础教学目标教学重点教学过程 2019年10月21日."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

第4章 JSP动态网页设计基础 教学目标 教学重点 教学过程 2019年10月21日.

Similar presentations

Presentation on theme: "第4章 JSP动态网页设计基础 教学目标 教学重点 教学过程 2019年10月21日."— Presentation transcript:

Similar presentations

About project

反馈

第4章 JSP动态网页设计基础教学目标教学重点教学过程 2019年10月21日.

Presentation on theme: "第4章 JSP动态网页设计基础教学目标教学重点教学过程 2019年10月21日."— Presentation transcript: