第5章 制作静态网页.ppt

《第5章 制作静态网页.ppt》由会员分享，可在线阅读，更多相关《第5章 制作静态网页.ppt（49页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第5章章制作静态网页制作静态网页本章主要内容本章主要内容5.1制作网站的原型制作网站的原型5.2制作注册页面制作注册页面5.2.1HTML的常用标签的常用标签5.2.2CSS简介简介5.2.3使用使用HTMLCSS制作注册页面制作注册页面5.2.4JavaScript简介简介5.2.5为注册表单添加为注册表单添加JavaScript验证验证5.1 制作网站的原型制作网站的原型这里给出了几个主要页面的原型：这里给出了几个主要页面的原型：页面整体布局原型图页面整体布局原型图5.1 制作网站的原型制作网站的原型前台首页（帖子列表显示页面）原型：前台首页（帖子列表显示页面）原型：5.1 制作网站的原

2、型制作网站的原型帖子详情页面的原型：帖子详情页面的原型：5.1 制作网站的原型制作网站的原型发表新帖页面的原型：发表新帖页面的原型：5.2 制作注册页面制作注册页面为了给新会员提供一个注册页面，我们需要完成以为了给新会员提供一个注册页面，我们需要完成以下任务：下任务：n使用使用HTMLCSS制作输入页面制作输入页面n使用使用JavaScript完成输入数据的前端验证完成输入数据的前端验证下面介绍下面介绍HTML、CSS以及以及JavaScript的基础知的基础知识。识。5.2.1 HTML的常用标签的常用标签1.表格系列标签表格系列标签.该系列的标签可在页面上绘制由行和列组成的表格，并在单该系

3、列的标签可在页面上绘制由行和列组成的表格，并在单元格中显示文字、超链接、图片等其它元素。元格中显示文字、超链接、图片等其它元素。n标签对表示一个表格标签对表示一个表格n标签对表示表格中的一行标签对表示表格中的一行n标签对表示行中的一个单元格，标签对之标签对表示行中的一个单元格，标签对之间的内容显示在该单元格中间的内容显示在该单元格中n标签对表示标题行中的一个单元格，一般标签对表示标题行中的一个单元格，一般为居中加粗显示。为居中加粗显示。n标签对显示在表格上方或下标签对显示在表格上方或下方的表格标题方的表格标题5.2.1 HTML的常用标签的常用标签例例5.1的主要代码的主要代码:CD库存表库存

4、表歌星歌星库存量库存量单价单价张学友张学友1200120.00元元李克勤李克勤68080.00元元5.2.1 HTML的常用标签的常用标签例例5.2表格标签的跨行跨列示例表格标签的跨行跨列示例星期一星期一上午上午下午下午语文语文数学数学5.2.1 HTML的常用标签的常用标签2.表单系列标签表单系列标签nform标签标签格式：格式：form标签对表示一个表单的开始和结束，属性标签对表示一个表单的开始和结束，属性说明：说明：naction属性：表示接收本表单数据的资源名称属性：表示接收本表单数据的资源名称nmethod属性：表示提交数据的方式，可取属性：表示提交数据的方式，可取post或或get

5、值，默认值是值，默认值是get。取。取get方式时，提交的数据方式时，提交的数据将附在网页地址将附在网页地址(即即url)后提交给接收页面。后提交给接收页面。nname属性：表示该表单的名称，若无需要可以省略。属性：表示该表单的名称，若无需要可以省略。5.2.1 HTML的常用标签的常用标签ninput标签标签格式：格式：input标签是最常用的输入标签，其属性说明如下：标签是最常用的输入标签，其属性说明如下：nname属性表示该输入元素的名字，也即向服务器提交的请求参数属性表示该输入元素的名字，也即向服务器提交的请求参数的名称，通常应起一个有意义的名字；的名称，通常应起一个有意义的名字；ni

6、d属性表示该元素在页面中的唯一标识名，属性表示该元素在页面中的唯一标识名，CSS可以通过可以通过id来控制来控制该元素的样式，而该元素的样式，而JavaScript代码也是通过代码也是通过id来查找页面上的某个来查找页面上的某个元素的。一般来说，在不引起混淆的情况下，可以将元素的。一般来说，在不引起混淆的情况下，可以将name和和id设设为相同的值。为相同的值。nvalue属性表示该输入元素的初始值，默认值为空字符串。属性表示该输入元素的初始值，默认值为空字符串。5.2.1 HTML的常用标签的常用标签ninput标签的标签的type属性可取不同属性可取不同的值，在页面上表现的值，在页面上表现

7、为不同的形态，如右为不同的形态，如右表所示表所示。type属性的取值属性的取值类型说明类型说明text单行文本框单行文本框password密码输入框密码输入框radio单选按钮单选按钮checkbox复选框复选框file文件选择框文件选择框hidden隐藏域隐藏域submit提交按钮提交按钮reset重置按钮重置按钮button普通按钮普通按钮image图片按钮图片按钮5.2.1 HTML的常用标签的常用标签nselect标签标签格式：格式：选项选项1选项选项2.5.2.1 HTML的常用标签的常用标签例例5.4使用下拉框提供多选一的选项使用下拉框提供多选一的选项上海上海北京北京广州广州5.2

8、.1 HTML的常用标签的常用标签3.超链接标签超链接标签该标签用于从一个网页跳转到另一个网页。该标签用于从一个网页跳转到另一个网页。格式：格式：浏览器中显示的热点浏览器中显示的热点属性说明：属性说明：href:点击后要打开的目标资源点击后要打开的目标资源(通常即网页通常即网页)的路径，通常设为相对路径。的路径，通常设为相对路径。title属性：当鼠标移到链接上方时显示的提示文字。属性：当鼠标移到链接上方时显示的提示文字。target:表示目标资源的内容将在哪个位置打开，可取值如下：表示目标资源的内容将在哪个位置打开，可取值如下：_blank：在新的浏览器窗口打开：在新的浏览器窗口打开_par

9、ent：在父框架窗口中打开：在父框架窗口中打开_self：在当前窗口中显示目标：在当前窗口中显示目标URL中的内容，为缺省值中的内容，为缺省值_top：将目标：将目标URL中的内容显示在最上层的窗口中中的内容显示在最上层的窗口中框架名称：用在框架网页中，用于将目标框架名称：用在框架网页中，用于将目标URL中的内容显示在指定的框架中中的内容显示在指定的框架中5.2.1 HTML的常用标签的常用标签4.图片标签图片标签这是一个单标签，这是一个单标签，用于显示指定的图片。用于显示指定的图片。例：例：nsrc属性指明要显示的图片文件的路径，与超链接一样，属性指明要显示的图片文件的路径，与超链接一样，也

10、可使用绝对路径或相对路径；也可使用绝对路径或相对路径；nwidth属性表示所显示的图片的宽度，这里设为了属性表示所显示的图片的宽度，这里设为了200px，即，即200个像素个像素。还可设定。还可设定height属性，表示属性，表示图片的显示高度；图片的显示高度；nalt属性，表示未找到相应的图片文件时，用以替代图属性，表示未找到相应的图片文件时，用以替代图片而显示的文字内容。片而显示的文字内容。5.2.2 CSS简介简介nCSS(CascadingStyleSheet)是级联样式表是级联样式表或层叠样式表的简称，用来控制页面元素的字体、或层叠样式表的简称，用来控制页面元素的字体、字号、色彩、背

11、景、间距以及大小、位置等格式属字号、色彩、背景、间距以及大小、位置等格式属性性。nDIV+CSS页面布局模式是页面布局模式是W3C标准的一个典型标准的一个典型应用，也是目前主流的页面布局模式。应用，也是目前主流的页面布局模式。5.2.2 CSS简介简介1.在网页中使用在网页中使用CSS的三种方式的三种方式按照按照CSS代码在网页文件中出现的不同位置，可代码在网页文件中出现的不同位置，可以将以将CSS划分为内联样式、嵌入样式和外部样式划分为内联样式、嵌入样式和外部样式3种形式。种形式。5.2.2 CSS简介简介1.在网页中使用在网页中使用CSS的三种方式的三种方式1)内联样式内联样式又称为又称为

12、“行内样式行内样式”，通过设定，通过设定HTML标签的标签的style属性值，嵌入属性值，嵌入CSS代码。如：代码。如：Hello5.2.2 CSS简介简介1.在网页中使用在网页中使用CSS的三种方式的三种方式2)嵌入样式嵌入样式在页面的头部使用在页面的头部使用标签对嵌入标签对嵌入CSS代码。如：代码。如：bodytext-align:center;font-size:12px;color:#ccc;5.2.2 CSS简介简介1.在网页中使用在网页中使用CSS的三种方式的三种方式3)外部样式外部样式将将CSS代码编写在一个独立的文件中，该文件的后缀名为代码编写在一个独立的文件中，该文件的后缀名

13、为.css，而后在，而后在页面文件中使用页面文件中使用标签或标签或.标签对来指明所标签对来指明所需要使用的样式文件。例如需要使用的样式文件。例如CSS文件名为文件名为my.css，则在页面中引入该，则在页面中引入该样式文件的代码为：样式文件的代码为：或或5.2.2 CSS简介简介2.CSS选择器选择器CSS通过为指定的元素定义样式来达到样式控制的通过为指定的元素定义样式来达到样式控制的目的。定义目的。定义CSS样式的格式为：样式的格式为：选择器选择器属性名称属性名称1：属性值：属性值1;属性名称属性名称2：属性值：属性值2;.5.2.2 CSS简介简介基本的选择器有以下基本的选择器有以下3种：

14、种：1)标签选择器标签选择器通过通过HTML的标签名称来指定样式。的标签名称来指定样式。例如例如:CSS代码代码pcolor:blue;表示将所有的表示将所有的标签中的文字设置为蓝色。标签中的文字设置为蓝色。5.2.2 CSS简介简介2)id选择器选择器若为页面的一个元素指定了若为页面的一个元素指定了id，则可通过，则可通过id单独为单独为其定义其定义CSS样式，一般来说，元素的样式，一般来说，元素的id在整个页面在整个页面中应是唯一的，通过中应是唯一的，通过id定义定义CSS的语法格式如下：的语法格式如下：#id名称名称属性名称属性名称1：属性值：属性值1;属性名称属性名称2：属性值：属性值

15、2;.;属性名称属性名称n：属性值：属性值n;注意注意id名称前面有一个符号名称前面有一个符号“#”。参考参考例例5.6。5.2.2 CSS简介简介3)类选择器类选择器若页面上的多个元素都要使用相同的样式，则可通若页面上的多个元素都要使用相同的样式，则可通过过class属性为这些元素指定相同的类名，然后为属性为这些元素指定相同的类名，然后为该类定义一组样式。通过类名定义样式的语法格式该类定义一组样式。通过类名定义样式的语法格式如下：如下：.类名类名属性名称：属性值属性名称：属性值;注意注意:类名前有一个圆点符类名前有一个圆点符“.”。参考参考例例5.7。5.2.2 CSS简介简介3.定位与浮动

16、定位与浮动div标签表示页面上的一个区域，一个页面可使标签表示页面上的一个区域，一个页面可使用多个用多个标签划分为不同的区域或层次。通标签划分为不同的区域或层次。通过设定过设定div的的float(浮动浮动)属性或属性或position(定位定位)属性，可以确定属性，可以确定div在页面上的显示位置。在页面上的显示位置。5.2.2 CSS简介简介例例5.8三行两列式页面布局示例三行两列式页面布局示例(web5cssdiv.html)5.2.2 CSS简介简介css文件：文件：web5csscssmain.css5.2.3 使用使用HTMLCSS制作注册页面制作注册页面在学习了前面在学习了前面2

17、小节的知识后，借助于静态网页制小节的知识后，借助于静态网页制作工具作工具Dreamweaver，不难制作出论坛的用户，不难制作出论坛的用户注册页面。注册页面。代码请参考：代码请参考：web/5/5_2/reg.jsp5.2.3 使用使用HTMLCSS制作注册页面制作注册页面注册页面运行效果如下：注册页面运行效果如下：5.2.4 JavaScript简介简介JavaScript(简称简称JS)是由是由Netscape公司推出的公司推出的客户端脚本语言，用客户端脚本语言，用JavaScript编写的代码是由编写的代码是由浏览器来解释执行的，主要应用于制作网页特效、浏览器来解释执行的，主要应用于制作

18、网页特效、客户端数据验证等等。客户端数据验证等等。近年来，随着近年来，随着Ajax技术的兴起，技术的兴起，JavaScript又在又在Web开发领域重焕了生机。这里只简单介绍利用开发领域重焕了生机。这里只简单介绍利用JavaScript实现网页的一些动态效果及表单数据实现网页的一些动态效果及表单数据的验证。的验证。5.2.4 JavaScript简介简介1.JavaScript的基本语法的基本语法通过比较通过比较JS与与Java语法风格上的异同，有助于快速掌握语法风格上的异同，有助于快速掌握JavaScript的基本语法，比较结果如下：的基本语法，比较结果如下：n与与Java一样，一样，JS是

19、对大小写敏感的。是对大小写敏感的。nJS的分支语句、循环语句格式与的分支语句、循环语句格式与Java基本相同。基本相同。nJS中的语句不必以分号结尾，但为了与中的语句不必以分号结尾，但为了与Java保持一致，保持一致，建议加上分号。建议加上分号。nJS中的字符串可用双引号括起，也可用单引号括起。中的字符串可用双引号括起，也可用单引号括起。nJS中的变量定义采用中的变量定义采用:vars;这种形式，即不指出该变这种形式，即不指出该变量的类型，其类型由所赋的值决定。一个变量甚至可以不定量的类型，其类型由所赋的值决定。一个变量甚至可以不定义就直接使用。义就直接使用。nJS中的函数定义以关键字中的函数

20、定义以关键字function引导，参数及返回值引导，参数及返回值的类型不指出。的类型不指出。5.2 制作注册页面制作注册页面5.2.4JavaScript简介简介2.JS的事件处理的事件处理nJS主要通过其事件处理机制完成各种功能。主要通过其事件处理机制完成各种功能。n除了定时器事件外，主要是针对用户的键盘输入或鼠标动除了定时器事件外，主要是针对用户的键盘输入或鼠标动作而进行的处理。如作而进行的处理。如click(鼠标单击鼠标单击)事件、事件、mouseover(鼠标移上鼠标移上)事件、事件、mouseout(鼠标移开鼠标移开)事件、事件、focus(得得到焦点到焦点)事件、事件、blur(失

21、去焦点失去焦点)事件、事件、submit(提交表单提交表单)事件等。事件等。n若需要对发生在一个页面元素上的某一事件进行处理，只若需要对发生在一个页面元素上的某一事件进行处理，只需在该元素的开始标签中添加需在该元素的开始标签中添加onXXX属性，其中的属性，其中的“XXX”为事件的名称，该属性的值即为事件发生时的响应代码为事件的名称，该属性的值即为事件发生时的响应代码5.2.4 JavaScript简介简介例例5.9JS函数的定义与调用函数的定义与调用5.2.4 JavaScript简介简介3.在页面中加入在页面中加入JS代码的方式代码的方式上例采用了直接在上例采用了直接在.标签之间编写标签之

22、间编写JS代码的方式，除了这种方式外，还可以采用以下代码的方式，除了这种方式外，还可以采用以下2种种方式在页面中加入方式在页面中加入JS代码：代码：n直接写在直接写在HTML标签的事件处理属性中标签的事件处理属性中例：当输入框得到输入焦点时，将框内的文字清空例：当输入框得到输入焦点时，将框内的文字清空.n将将JS代码编写成独立的代码编写成独立的JS文件，在文件，在部分利用部分利用标签导入标签导入5.2.4 JavaScript简介简介例例5.10外部外部JS文件的引用文件的引用将将JS代码单独保存为代码单独保存为myjs.js，而后在，而后在welcome.jsp中引入。这里新建一个子目录中引

23、入。这里新建一个子目录js，专门用于存放专门用于存放js文件。文件。文件文件web5jsjsmyjs.js的内容：的内容：functionwelcome()alert(欢迎来到欢迎来到JSP学习天地！学习天地！);5.2.4 JavaScript简介简介例例5.10外部外部JS文件的引用文件的引用文件文件web5jswelcome.jsp的内容：的内容：Thisismyhtmlpage.5.2.4 JavaScript简介简介4.实现网页的动态效果实现网页的动态效果为了能控制页面上的元素，首先要能找到这个元素。为了能控制页面上的元素，首先要能找到这个元素。一般通过一般通过2个步骤实现：个步骤实

24、现：(1)为元素指定一个为元素指定一个id，该，该id在整个页面中是唯一的。在整个页面中是唯一的。(2)利用利用JS代码：代码：document.getElementById(id)，根据，根据id找找到这个元素。到这个元素。5.2.4 JavaScript简介简介例例5.11打开打开/关闭注册表单的高级选项关闭注册表单的高级选项(文件文件web5jsadvToggle.html)5.2.5 为注册表单添加为注册表单添加JavaScript验证验证当用户在表单中点击了提交按钮后，则发生提交事件。当用户在表单中点击了提交按钮后，则发生提交事件。通过对表单的提交事件进行处理，可以实现对表单数通过对

25、表单的提交事件进行处理，可以实现对表单数据的验证。据的验证。这时表单的一般形式为：这时表单的一般形式为：.当当check函数的返回值为函数的返回值为false时，提交动作被阻止，否时，提交动作被阻止，否则提交动作将继续。则提交动作将继续。5.2.5 为注册表单添加为注册表单添加JavaScript验证验证1.获取输入元素的值获取输入元素的值为了简化代码，常定义一个基础函数，完成根据为了简化代码，常定义一个基础函数，完成根据id寻找页面元素的功能，如下所示：寻找页面元素的功能，如下所示：function$(id)obj=document.getElementById(id);returnobj;

26、5.2.5 为注册表单添加为注册表单添加JavaScript验证验证2.判断输入值是否为空或空串判断输入值是否为空或空串表单中有些数据是必须填写的，即：这些输入值不表单中有些数据是必须填写的，即：这些输入值不能为能为null或空字符串或空字符串。例例5.12参考程序文件参考程序文件web5jsemptyCheck.html.5.2.5 为注册表单添加为注册表单添加JavaScript验证验证3.判断字符串长度是否在指定范围内判断字符串长度是否在指定范围内计算字符串的字节数的函数：计算字符串的字节数的函数：String.prototype.chLength=function()varlen=th

27、is.replace(/x00-xff/g,*).length;returnlen;参考：参考：例例5.13判断输入的用户名的长度是否在指定范判断输入的用户名的长度是否在指定范围内围内（文件：（文件：web5jslengthCheck.html）5.2.5 为注册表单添加为注册表单添加JavaScript验证验证4.判断字符串是否为指定的格式判断字符串是否为指定的格式像像E-mail地址、电话号码这样的数据，一般要求符地址、电话号码这样的数据，一般要求符合某种特定的格式，结合正则表达式，很容易完成合某种特定的格式，结合正则表达式，很容易完成类似的验证处理。类似的验证处理。参考案例：例参考案例：

28、例5.14判断输入的判断输入的E-mail格式是否正格式是否正确确（文件：文件：web5jsformatCheck.html）5.2.5 为注册表单添加为注册表单添加JavaScript验证验证下面是几个常用的正则表达式：下面是几个常用的正则表达式：-中文：中文：u4e00-u9fa5双字节字符双字节字符(含中文含中文)：x00-xff座机电话号码：座机电话号码：/d3-d8|d4-d7$/国内邮政编码：国内邮政编码：/1-9d5$/整数：整数：/-?1-9d*$/-5.2.5 为注册表单添加为注册表单添加JavaScript验证验证5.综合验证综合验证上面的例子展示了对输入内容进行单项检测的

29、情形，上面的例子展示了对输入内容进行单项检测的情形，而实际情况往往是需要对多项数据进行检测。这时，而实际情况往往是需要对多项数据进行检测。这时，可以为每项需要检测的数据设置一个有效标志可以为每项需要检测的数据设置一个有效标志flag，若该数据验证通过，则将，若该数据验证通过，则将flag设为设为true，否则，否则设为设为false，最后检测是否所有待检测数据的有效，最后检测是否所有待检测数据的有效标志均为标志均为true，是则允许将表单提交到服务器，否，是则允许将表单提交到服务器，否则返回则返回false不提交到服务器，并在页面上显示错不提交到服务器，并在页面上显示错误提示信息。误提示信息。5.2.5 为注册表单添加为注册表单添加JavaScript验证验证参考案例：例参考案例：例5.15注册页面的客户端验证注册页面的客户端验证（文（文件：件：web5jsreg.html及及web5jsjscheck.js）本章小结本章小结本章通过注册信息填写页面的制作，介绍了以下主本章通过注册信息填写页面的制作，介绍了以下主要内容：要内容：nHTML常用标签常用标签nCSS基础入门基础入门n使用使用JS完成客户端验证完成客户端验证