Java10网页设计基础.ppt

JavaJava技术与应用技术与应用 网页设计基础 (第10章) 西安交大 卫颜俊 2009年5月 电子信箱：Mr.J QQ: 610568018 网站: 7/java 2 /33 主要内容 Tomcat配置 HTML语言介绍 JavaScript语言介绍 3 /33 Tomcat的配置 4 /33 HTML网页设计语言简介 Hypertext Markup Language，即超文本标记语言 用于创建便于平台移植的超文本文档的一种简单标记语言 主要用于WEB应用中 SGML的一种简化版 HTML文件是带有格式标识符和超文本链接的内嵌代码 的ASCII文本文件（文件后缀为.htm或.html） 一般由浏览器使用HTTP（Hypertext Transfer Protocol）网络 协议下载、解释和运行 目前有许多诸如FrontPage、DreamWeaver和 CoffeeCup等智能化的网页制作软件专门用来制作 HTML文件 通常不需要人工去写大量代码 5 /33 典型的HTML文档的层次 包括: 结构、内容和样式 HTML对结构和内容之间的关系进行表示 和处理 结构 用于描述文档的组织结构； 内容 包括信息标题、段落、项目列表和表格中的具 体内容，各个内容使用开始和结束标记区分； 样式 定义内容的样式设置标准。 6 /33 基本语法 1. HTML文件总体结构： 7 /33 页面配置： 背景色彩 ： 背景图象 ： 链接 ： . 8 /33 2. 字体： 标题字体： . ，其中，#可以是1 7 普通字体：字体大小 . ， 其中，#可以是17或+#，-# 字体颜色 . 物理字体：.粗体，.斜体， .带下划线 逻辑字体：.虚化， 加重 9 /33 3. 文字布局： 段，换行，不换行，文字的对 齐align=# ，其中，#为left, center, right 无序列表 .，有序列表 .，定义列表 .保持原貌 .闪烁 10 /33 3.图象： ，其中，#为图象文件的URL ，其中，#为边的宽度。 11 /33 【例10-1】基本网页例子 12 /33 表格 - 定义表格 - 定义表行 - 定义表头 - 定义表元(表格的具体数据) 13 /33 在中还可以通过一些属性定义表格 的边框、宽度、高度和间隔数等： . 在中可以定义 占多行、 占多列、 背景颜色或等 属性。 14 /33 【例10-2】精彩赛事推荐 15 /33 表单 1. 简单表单 . 16 /33 其中， action=后的#为提交目的网址； method=后的#可以是GET或POST，表示提交表单 的方式； type=后的#为输入形式，可以是text、password、 checkbox、radio、image、 hidden、submit或reset 之一； name=后的#为变量名字；value=后的#为初始值。 对于image还可以有src属性表示图片网址。 17 /33 另外， 对于text, password还可以有size=#和maxlength=# 属性，分别表示输入的字符宽度和最大宽度； 对于checkbox, radio还可以有checked属性，表示 初始选中； 对于image还可以有src属性表示图片网址。 18 /33 2. 列表框 . 其中， 的属性name=后的#为变量名字，size=后的#为字符宽 度； 的属性selected表示初始选中； value=后的#为初始值； multiple表示可以多选。 19 /33 3. 文本区域 . 其中， name=后的#为变量名字， rows=后的#为行数， cols=后的#为列数。 20 /33 【例10-3】注册单 21 /33 22 /33 JavaScript语言简介 最早由Netscape公司开发，是一种嵌入在HTML文 件中的描述语言，为了增强浏览器功能。 一种介于Java与HTML之间的、基于对象和事件驱 动的程序设计语言，是Java的简化和HTML的加强 。 使得信息和用户之间不但具有显示和浏览的关系， 而且实现了它们之间的实时动态的交互表达能力。 程序可以在客户端首先完成输入的表单等资料的验 证工作，之后再递交给Web服务器处理和保存，这 样大大减少了网络传输的次数 23 /33 JavaScript的基本特点 解释性脚本语言 基于对象的语言 简单性 安全性 动态性的 跨平台性 24 /33 与Java的区别 基于对象和面向对象 解释和编译 强变量和弱变量 代码格式不一样 嵌入方式不一样 静态联编和动态联编 25 /33 基本语法 JavaScript语言中具有普通计算机语言所具 有的典型要素，包括数据类型、常量变量 表达式、控制结构、数字、字符串、函数 、对象和事件等，非常接近于Java语言 JavaScript语言代码； JavaScript语言代码; 26 /33 窗口及输入输出 JavaScript的输入输出是通过对象来完成的 其中， 输入可通过窗口（window）对象来完成 输出可通过文档（document）对象的方法来 实现。 27 /33 mpt(“提示信息“，默认值) window.confirm(“提示信息“，默认值) window.alert(“内容“) window.open(“网址“,“窗口名字“,“窗口属性“) document.write(“内容“)或document.writeln(“ 内容“) document.open(“URL“,“窗口名字“,“窗口属性 “) 关闭文档流document.close() 清除文档内容document.clear() 28 /33 函数 function 函数名（参数表,变元表） 函数体代码; return表达式; 29 /33 【例10-4】计算费波那契 数列的第n项和前n项之和 30 /33 事件 1. 单击事件onClick button（按钮）、checkbox（复选框）、radio（ 单选钮）、reset（复位按钮）和submit（提交 按钮） 2. 改变事件onChange text或textarea元素 31 /33 事件 3.选中事件onSelect text或textarea元素 4.获得焦点事件onFocus text或textarea以及select 5.失去焦点事件onBlur text或