网页设计

Download Report

Transcript 网页设计 

第四章 网页设计
 4.1 HTML文件
 4.2 CSS与DIV
 4.3 JSP基础
4.1 HTML文件
 HTML（Hypertext Markup Language，
超文本标记语言）是一种用来表述超文本文
档的标记语言。用HTML编写的超文本文件
称为HTML文件，它能独立于各种操作平台。
所谓超文本文件，是指在其中可以加入图片、
声音、动画、影视等内容，并且可以使用超
链接从一个文件跳转到另一个文件。
4.1.1 HTML文件的创建
 在MyEclipse的“File”菜单中选择“New”
菜单项，再选择“Web Project”
 弹出“New Web Project”对话框，在该对
话框的【Project name】文本框中输入要
创建工程的名称，本实例以TestHtml为工
程名，本章的示例均在该工程中完成。在
“J2EE Specification Level”中选择
“Java EE 6.0”，然后点击【Finish】
4.1.2 HTML常用标签
 1、<img>标签
 <img>标签用于向网页中嵌入一幅图像，
其格式为：
 <img src = 参数 >
 其中src属性用于设置图片所在的位置。
 2、超链接标签<a>
 超文本中的链接是其重要的特性之一，利用
它可以从一个页面直接跳转到其它页面。链
接的格式如下所示：
 <a href=”URL地址”>文本</a>
 标签<a>表示链接的开始，</a>表示链接
的结束；属性href指定这个链接要链接的地
方；通过单击“文本”可以到达指定的文件。
 3、<div>标签
 该标签相当于一个容器，用于表示一个区域
块，在该标签内可包含任何HTML标签。
 4、<ul>标签和<li>标签
 该标签用来创建一个无序的列表，该标签内
有一子标签<li>标签，每个列表内容前都有
一圆点。
4.1.3 HTML表格
标签
描述
<table>…</table>
用于定义一个表格的开始和结束。
<caption>…</caption>
定义表格的标题。在表格中可以不使用该标签。
<th>…</th>
定义表头单元格。表格中的文字以粗体显示，在表格中可以不使用该标签，<th>标签必须放在<tr>标签内。
<tr>…</tr>
定义一行标签，一组行标签内可以建立多组<td>或<th>标签所定义的单元格。
<td>…</td>
定义单元格标签，一组<td>标签将建立一个单元格，<td>标签必须放在<tr>标签内。
4.1.4 HTML表单
 表单是用于实现网页浏览者与服务器(或者
说网页所有者)之间信息交互的一种页面元
素，用来供访问者在Web页中填写信息，实
现客户端信息采集，从而使网页具备交互功
能。
 表单标签的格式:
 <form action＝"url"
method=get|post name="myform"
target="_blank">
 ...
 </ form >
 1、单行文本输入框
 单行文本输入框控件，它只允许用户输入一
行数据，不能进行换行。其语法格式为：
 <input type = “text” name =
“textName” value= “value” >
 其中type = “text”用来表示该控件是单行
文本输入框控件，该控件的名称由name属
性指定。value属性则用来指定文本框中的
显示内容（值）。
 2、密码框
 密码输入框控件，其语法格式为：
 <input type = “password” name =
“textName” >
 其中type=“password”表示该控件是单行
文本输入框控件，该控件的名称由name属
性指定。
 3、多行文本输入框
 多行文本输入框允许用户输入多行数据，数
据可以进行换行操作。其语法格式为：

 <textarea name = “textareaName”
cols=”colNum” rows =
“colNum”></textarea>
 4、单选按钮
 单选按钮的用途是给出用户多种选择，要求
用户从中选择一个。其格式为：
 <input type = “radio” name =
“radioName” value =”Value”>
 5、复选框
 复选框用于为用户提供多种选择，用户可以
从中选择任意多个。其语法格式为：
 <input type = “checkbox” name =
“checkbox Name” value =”Value”>
 6、下拉列表框
 下拉列表框是通过下拉列表的形式为用户提供多个
选择，让用户从中选择一个，其语法格式为：
 <select name =“selectName” size =”Num”>

<option value =“value1”>
value1<option>
 <option value =“value2”> value2<option>

……
 <option value =“valueN”> valueN<option>
 </select>
4.2 CSS与DIV
 CSS是英语Cascading Style Sheets（层
叠样式表单）的缩写，它是一种用来表现
HTML或 XML等文件样式的计算机语言。
4.2.1 CSS语句格式
 CSS的定义是由三个部分构成:
 选择符(selector)，属性(properties)和属性的取
值(value)。语法格式如下：
 selector {property: value}即 (选择符 {属性:
值})
 选择符可以是多种形式，一般是用于定义样式的
HTML元素或标签，例如body、p、table……，
每一个属性都有一个值。属性和值要用冒号隔开，
并由大括号包围起来，这样就组成了一个完整的样
式声明。例如：
 body {color: black}
4.2.2 CSS选择符
 1、HTML标签选择器
 在HTML页面中使用的一个标签，如果在
CSS中被定义，那么此网页中多处使用的同
一标签都将按照CSS中定义的样式显示。
 2、类选择器
 使用HTML标签的class属性引入CSS中定义
的样式规则的名字，称为类选择器，class
属性指定的样式名字必须是以“.”开头。
 3、ID选择器
 使用ID属性用来定义某一特定的HTML元素，
与class属性刚好相反，class属性用来定义
一组功能或格式相同的HTML元素。ID选择
器定义的CSS名称必须以“#”开头，
 4、伪类选择器
 伪类选择器是指对同一HTML元素的各种状
态和其所包括的部分内容的一种定义方式。
下面通过一个示例来演示伪类选择器的使用。
4.2.3 CSS设置方式
 1、内联样式表
 HTML标签直接使用style属性，称为内联样
式(inline style)。它适用于只需要简单地
将一些样式应用于某个独立的元素的情况。
 2、嵌入样式表
 嵌入样式是在<head>标签内，添加
<style></style>标签对，在标签对内定
义需要的样式。
 3、外联样式表
 外联样式是将<style>标签内的样式语句定
义在扩展名为.css的文件中。通过使用
<link>标签引入样式文件。
4.2.4 DIV运用
 内容(content)、填充(padding)、边框
(border)、边界(margin)， CSS盒子模式
都具备这些属性。
 可以把它想像成现实中上方开口的盒子，然
后从正上往下俯视，边框相当于盒子的厚度，
内容相对于盒子中所装物体的空间，而填充
呢，相当于为防震而在盒子内填充的泡沫，
边界呢相当于在这个盒子周围要留出一定的
空间，方便取出。
4.3 JSP基础
 4.3.1 JSP简介
 JSP(Java Server Pages) 是由 Sun
Microsystems 公司倡导开发的，它以
Java语言作为脚本语言，用来在网页上显示
动态内容。JSP网页由Java程序片断及JSP
标签等构成，页面后缀名为“.JSP”。
4.3.2 JSP元素
 4.3.2.1指令元素
 指令元素主要要用于为转换阶段提供JSP页
面的相关信息，指令不会产生任何输出到
当前的输出流中，它指定了有关页面本身的
信息，这些信息在请求之间一直保持不变，
指令的语法如下：
 <%@ directive{attr=”value”}* %>
 page指令
 指令用于整个页面，定义与页面相关的属性，它
是JSP页面和容器的通信员，一般放在JSP页面的
第一行，语法如下：
 <%@ page 属性名1=“值1” 属性名2=“值2” ...
%>
 示例：
 <%@ page language="java"
import="java.util.*" pageEncoding="UTF8"%>
 4.3.2.2 脚本元素
 使用JSP脚本元素可以将Java代码嵌入到
JSP页面里，这些Java代码将出现在由当前
JSP页面生成的Servlet中，使JSP将静态内
容与动态内容分离
 表达式
 表达式：是对数据的表示，系统将其作为
一个值进行计算。

 语法：＜%= expression %＞

 例如：
 <%= user.getName()%>
 4.3.2.3动作元素
 JSP动作元素用来控制JSP容器的动作，可
以动态插入文件、重用JavaBean组件、导
向另一个页面等。动作元素与指令元素不同，
动作元素是在客户端请求时动态执行的，每
次有客户端请求时可能都会被执行一次，而
指令元素是在编译时被编译执行，它只会被
编译一次。














<jsp:include>
include动作用于将其它HTML页面或JSP页面中的内容合并到当前页面，或
将其中的文件插入到当前页面。Include动作有两种形式：
（1）不带参数的include动作
<jsp:include page=”weburl” flush=”true”/>
其中：
page：指定要嵌入当前页面的页面的网址。
flush：用于在嵌入其他响应前清空存储在缓冲区中的数据。
（2）带参数的include动作
<jsp:include page=”weburl” flush=”true”>
<jsp:param name=”ParamName” value=”ParamValue”/>
<jsp:include>
其中：
name：指定被嵌入到页面中的参数的名称。
value：指定参数的值。
4.3.3 JSP的隐含对象
 JSP隐式对象是Web容器加载的一组类的实例。它
是可以直接在JSP页面使用的对象。其主要分为4
个主要类别：
 输入和输出对象：控制页面的输入和输出。
（request，response，out）
 作用域通信对象：检索与JSP页面的Servlet相关
的信息。（session，application，
pageContext ）
 Servlet对象：提供有关页面环境的信息。（page，
config）
 错误对象：处理页面中的错误。（exception）