第5章 制作静态网页

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第5章,制作静态网页,本章主要内容,5.1 制作网站的原型,5.2 制作注册页面,5.2.1 HTML的常用标签,5.2.2 CSS简介,5.2.3 使用HTMLCSS制作注册页面,5.2.4 JavaScript简介,5.2.5 为注册表单添加JavaScript验证,5.1 制作网站的原型,这里给出了几个主要页面的原型：,页面整体布局原型图,5.1 制作网站的原型,前台首页（帖子列表显示页面）原型：,5.1 制作网站的原型,帖子详情页面的原型：,5.1 制作网站的原型,发表新帖页面的原型：,5.2 制作注册页面,为了给新会员提供一个注册页面，我们需要完成以下任务：,使用HTMLCSS制作输入页面,使用JavaScript完成输入数据的前端验证,下面介绍HTML、CSS以及JavaScript的基础知识。,5.2.1 HTML的常用标签,1.表格系列标签.,该系列的标签可在页面上绘制由行和列组成的表格，并在单元格中显示文字、超链接、图片等其它元素。,标签对表示一个表格,标签对表示表格中的一行,标签对表示行中的一个单元格，标签对之间的内容显示在该单元格中,标签对表示标题行中的一个单元格，一般为居中加粗显示。,标签对显示在表格上方或下方的表格标题,5.2.1 HTML的常用标签,例5.1 的主要代码:,CD库存表,歌星库存量 单价 ,张学友1200120.00元,李克勤68080.00元,5.2.1 HTML的常用标签,例5.2 表格标签的跨行跨列示例,星期一,上午,下午,语文,数学,5.2.1 HTML的常用标签,2.表单系列标签,form标签,格式：,form标签对表示一个表单的开始和结束，属性说明：,action属性：表示接收本表单数据的资源名称,method属性：表示提交数据的方式，可取post或get值，默认值是get。取get方式时，提交的数据将附在网页地址(即url)后提交给接收页面。,name属性：表示该表单的名称，若无需要可以省略。,5.2.1 HTML的常用标签,input标签,格式：,input标签是最常用的输入标签，其属性说明如下：,name属性表示该输入元素的名字，也即向服务器提交的请求参数的名称，通常应起一个有意义的名字；,id属性表示该元素在页面中的唯一标识名，CSS可以通过id来控制该元素的样式，而JavaScript代码也是通过id来查找页面上的某个元素的。一般来说，在不引起混淆的情况下，可以将name和id设为相同的值。,value属性表示该输入元素的初始值，默认值为空字符串。,5.2.1 HTML的常用标签,input标签的type属性可取不同的值，在页面上表现为不同的形态，如右表所示。,type,属性的取值,类型说明,text,单行文本框,password,密码输入框,radio,单选按钮,checkbox,复选框,file,文件选择框,hidden,隐藏域,submit,提交按钮,reset,重置按钮,button,普通按钮,image,图片按钮,5.2.1 HTML的常用标签,select标签,格式：,选项1,选项2,.,5.2.1 HTML的常用标签,例5.4 使用下拉框提供多选一的选项,上海,北京,广州,5.2.1 HTML的常用标签,3.超链接标签,该标签用于从一个网页跳转到另一个网页。,格式：,浏览器中显示的热点,属性说明：,href:点击后要打开的目标资源(通常即网页)的路径，通常设为相对路径。,title属性：当鼠标移到链接上方时显示的提示文字。,target:表示目标资源的内容将在哪个位置打开，可取值如下：,_blank：在新的浏览器窗口打开,_parent：在父框架窗口中打开,_self：在当前窗口中显示目标URL中的内容，为缺省值,_top：将目标URL中的内容显示在最上层的窗口中,框架名称：用在框架网页中，用于将目标URL中的内容显示在指定的框架中,5.2.1 HTML的常用标签,4.,图片标签,这是一个单标签，,用于显示指定的图片。,例：,src,属性指明要显示的图片文件的路径，与超链接一样，也可使用绝对路径或相对路径；,width,属性表示所显示的图片的宽度，这里设为了,200px,，即,200,个像素,。还可设定,height,属性，表示图片的显示高度；,alt,属性，表示未找到相应的图片文件时，用以替代图片而显示的文字内容。,5.2.2 CSS简介,CSS(Cascading Style Sheet)是级联样式表或层叠样式表的简称，用来控制页面元素的字体、字号、色彩、背景、间距以及大小、位置等格式属性。,DIV+CSS页面布局模式是W3C标准的一个典型应用，也是目前主流的页面布局模式。,5.2.2 CSS简介,1.在网页中使用CSS的三种方式,按照CSS代码在网页文件中出现的不同位置，可以将CSS划分为内联样式、嵌入样式和外部样式3种形式。,5.2.2 CSS简介,1.在网页中使用CSS的三种方式,1)内联样式,又称为“行内样式”，通过设定HTML标签的style属性值，嵌入CSS代码。如：,Hello,5.2.2 CSS简介,1.,在网页中使用,CSS,的三种方式,2),嵌入样式,在页面的头部使用,标签对嵌入,CSS,代码。如：,body,text-align:center;,font-size:12px;,color:#ccc;,5.2.2 CSS简介,1.在网页中使用CSS的三种方式,3)外部样式,将CSS代码编写在一个独立的文件中，该文件的后缀名为.css，而后在页面文件中使用标签或.标签对来指明所需要使用的样式文件。例如CSS文件名为my.css，则在页面中引入该样式文件的代码为：,或,5.2.2 CSS简介,2.CSS选择器,CSS通过为指定的元素定义样式来达到样式控制的目的。定义CSS样式的格式为：,选择器,属性名称1：属性值1;,属性名称2：属性值2;,.,5.2.2 CSS简介,基本的选择器有以下3种：,1)标签选择器,通过HTML的标签名称来指定样式。,例如:CSS代码,pcolor:blue;,表示将所有的标签中的文字设置为蓝色。,5.2.2 CSS简介,2)id选择器,若为页面的一个元素指定了id，则可通过id单独为其定义CSS样式，一般来说，元素的id在整个页面中应是唯一的，通过id定义CSS的语法格式如下：,#id名称,属性名称1：属性值1;,属性名称2：属性值2;,.;,属性名称n：属性值n;,注意id 名称前面有一个符号“#”。参考,例5.6,。,5.2.2 CSS简介,3)类选择器,若页面上的多个元素都要使用相同的样式，则可通过class属性为这些元素指定相同的类名，然后为该类定义一组样式。通过类名定义样式的语法格式如下：,.类名属性名称：属性值;,注意:类名前有一个圆点符“.”。,参考,例5.7,。,5.2.2 CSS简介,3.定位与浮动,div标签表示页面上的一个区域，一个页面可使用多个标签划分为不同的区域或层次。通过设定div的float(浮动)属性或position(定位)属性，可以确定div在页面上的显示位置。,5.2.2 CSS简介,例5.8三行两列式页面布局示例(web5cssdiv.html),5.2.2 CSS简介,css文件：web5csscssmain.css,5.2.3 使用HTMLCSS制作注册页面,在学习了前面2小节的知识后，借助于静态网页制作工具Dreamweaver，不难制作出论坛的用户注册页面。,代码请参考：,web/5/5_2/reg.jsp,5.2.3 使用HTMLCSS制作注册页面,注册页面运行效果如下：,5.2.4 JavaScript简介,JavaScript(简称JS),是由Netscape公司推出的客户端脚本语言，用JavaScript编写的代码是由浏览器来解释执行的，主要应用于制作网页特效、客户端数据验证等等。,近年来，随着Ajax技术的兴起，JavaScript又在Web开发领域重焕了生机。这里只简单介绍利用JavaScript实现网页的一些动态效果及表单数据的验证。,5.2.4 JavaScript简介,1.JavaScript的基本语法,通过比较JS与Java语法风格上的异同，有助于快速掌握JavaScript的基本语法，比较结果如下：,与Java一样，JS是对大小写敏感的。,JS的分支语句、循环语句格式与Java基本相同。,JS中的语句不必以分号结尾，但为了与Java保持一致，建议加上分号。,JS中的字符串可用双引号括起，也可用单引号括起。,JS中的变量定义采用:var s;这种形式，即不指出该变量的类型，其类型由所赋的值决定。一个变量甚至可以不定义就直接使用。,JS中的函数定义以关键字function引导，参数及返回值的类型不指出。,5.2 制作注册页面,5.2.4 JavaScript简介,2.JS的事件处理,JS主要通过其事件处理机制完成各种功能。,除了定时器事件外，主要是针对用户的键盘输入或鼠标动作而进行的处理。如click(鼠标单击)事件、mouseover(鼠标移上)事件、mouseout(鼠标移开)事件、focus(得到焦点)事件、blur(失去焦点)事件、submit(提交表单)事件等。,若需要对发生在一个页面元素上的某一事件进行处理，只需在该元素的开始标签中添加onXXX属性，其中的“XXX”为事件的名称，该属性的值即为事件发生时的响应代码,5.2.4 JavaScript简介,例5.9JS函数的定义与调用,5.2.4 JavaScript简介,3.在页面中加入JS代码的方式,上例采用了直接在.标签之间编写JS代码的方式，除了这种方式外，还可以采用以下2种方式在页面中加入JS代码：,直接写在HTML标签的事件处理属性中,例：当输入框得到输入焦点时，将框内的文字清空.,将JS代码编写成独立的JS文件，在部分利用标签导入,5.2.4 JavaScript简介,例5.10外部JS文件的引用,将JS代码单独保存为myjs.js，而后在welcome.jsp中引入。这里新建一个子目录js，专门用于存放js文件。,文件web5jsjsmyjs.js 的内容：,function welcome(),alert(欢迎来到JSP学习天地！);,5.2.4 JavaScript简介,例5.10外部JS文件的引用,文件web5jswelcome.jsp 的内容：,This is my html page.,5.2.4 JavaScript简介,4.实现网页的动态效果,为了能控制页面上的元素，首先要能找到这个元素。一般通过2个步骤实现：,(1)为元素指定一个id，该id在整个页面中是唯一的。,(2)利用JS代码：,document.getElementById(id),，根据id找到这个元素。,5.2.4 JavaScript简介,例5.11打开/关闭注册表单的高级选项,(文件web5jsadvToggle.html),5.2.5 为注册表单添加JavaScript验证,当用户在表单中点击了提交按钮后，则发生提交事件。通过对表单的提交事件进行处理，可以实现对表单数据的验证。,这时表单的一般形式为：,.,当check函数的返回值为false时，提交动作被阻止，否则提交动作将继续。,5.2.5 为注册表单添加JavaScript验证,1.获取输入元素的值,为了简化代码，常定义一个基础函数，完成根据id寻找页面元素的功能，如下所示：,function$(id),obj=document.getElementById(id);,return obj;,5.2.5 为注册表单添加JavaScript验证,2.判断输入值是否为空或空串,表单中有些数据是必须填写的，即：这些输入值不能为null或空字符串。,例5.12参考程序文件,web5jsemptyCheck.html,.,5.2