构建Web应用系统——基于JSP+Servlet+JavaBean 教学课件 作者 孙华林 第三章 使用客户端技术实现系统静态页面.pptVIP

软件教研室 信息工程系 第三章 使用客户端技术实现系统静态页面 本章任务 完成一个新闻发布系统的静态网页原型，包括如下功能： 后台管理模块（标题录入；文件上传） 新闻前台显示模块（各级标题下的新闻显示） 能够在MyEclipse中部署运行该静态新闻发布系统 创建新闻发布系统的静态页面： 掌握HTML的基本结构、常用标记及表单元素； 掌握CSS选择器的用法、样式表的引用； 熟悉CSS常用属性； 掌握JavaScript基本语法、流程控制、函数的定义及引用、事件处理； 熟悉JavaScript的Window对象的属性和方法。 创建新闻发布系统的静态页面： 掌握使用HTML、CSS创建新闻发布系统的页面的步骤及方法； 掌握使用frameset框架进行页面布局的搭建方法； 掌握在新闻发布系统页面中融合JavaScript脚本语言页面实现用户输入验证的方法。 本章目标 3.1采用HTML标记搭建系统页面布局 3.1.1 HTML页面的基本结构 HTML文档主要由4个标记组成，即html、head、title和body。 html标记是HTML文件的开头，HTML页面的所有标记都必须放在html和/html中间。head标记是HTML的头标记，可以放置HTML的文件的信息，如可以将定义CSS样式代码放在头标记中。title标记为标题标记，可以定义网页的标题。body标记是HTML页面的主体标记。页面中的所有内容都定义在body标记中。 3.1.2 HTML常用标记 1) 换行标记 换行标记，可以实现网页中的文字换行操作，其换行标记为br。这个标记和HTML其他标记不同，不是成对出现的，换行标记式一个单独标记。 2) 段落标记 段落标记在段前和段后各添加一个空行，它是一个重要的标记，以p标记开头，以/p标记结束。 3) 表格标记 表格是网页中十分重要的组成元素，表格可以用来存储数据。表格包含标题、表头、行和单元格。表格标记使用table表示，此外，表格中还要定义行、列及标题等内容。 3.1采用HTML标记搭建系统页面布局 3.1.3表单及表单元素 表3－1 常见表单元素列表 表单元素 说明 常见属性 input type=”text” 单行文本框 name、size、value、maxlength input type=”password” 密码文本框 同上 input type=”submit” 提交按钮，将信息提交到action指向的地址 name、value input type=”image” 图片提交按钮 name、src、alt、width、height input type=”reset” 重置按钮，重新设置表单内容 name、value input type=”button” 普通按钮 Name 、value input type=”hidden” 隐藏文本域 Name、value input type=”radio” 单选按钮 Value、checked input type=”checkbox” 复选框 同上 input type=”file” 文件域 name select…/select 列表框 Name、size、multiple、value、disabled textarea…/textarea 多行文本框 Rows、cols、name、disabled、readonly 3.1采用HTML标记搭建系统页面布局 3.1.4 使用HTML搭建系统静态页面 任务一：设计并搭建系统目录结构，采用frameset搭建系统页面。 1）选中“WebRoot”，右击鼠标－选择“new”－选中“Folder”，新建文件夹“ch03”，用来存放新闻发布系统静态页面； 2）按照同样的方式，在“ch03”文件夹下创建“images”，用来存放图片； 3）在“ch03”文件夹中创建新闻发布系统后台管理的首页index.html. 整个页面分为三步分，即“topFrame”、“leftFrame”、“mainFrame”及“bottom”。其中 “topFrame”使用“top.html”页面，“leftFrame”使用“left.html”页面，“mainFrame”使用欢迎页面“welcome.html”，“bottom”使用“bottom.html”页面。 任务二：创建系统静态页面，指定系统欢迎页面。 1）分别创建top.html、left.html、welcome.html及bottom.html页面。 3.1采用HTML标记搭建系统页面布局 1）在MyEclipse中首先部署新闻发布系统：首先用鼠标选中系统的根目录“NewsRealeaseSyste