第2章静态网页开发技术.ppt

3. 简单设计题 （1）在网页上显示当前时间（客户端机器），一秒刷新一次。 （2）延迟执行某段代码，如让网页3秒钟后转到网页。 （3）在网页上显示当前日期, 星期（客户端机器）。如果时间在6:00－12:00之间，输出“早上好”；如果时间在12:00－18:00，输出“下午好”；如果时间在18:00－24:00之间，输出“晚上好”；如果时间在0:00－6:00，输出“凌晨好”。 * 2．颜色和背景属性 属性名 属性含义 属性值 color 颜色 （颜色值是英文名称或16进制RGB值）例，red为#ff0000） background-color 背景颜色 同color属性 background-image 背景图像 none:不用背景；url：图像地址 background-position 背景图片位置 top，left，right，bottom，center等 background 背景复合属性 简化css代码，可取值以上所有属性值，之间用空格分开 3．文本段落属性 属性名 属性含义 属性值 text-decoration 文字修饰 none,underline:下划线,overline:上划线,line-through:删除线,blink：文字闪烁 vertical-align 垂直对齐 baseline:默认的垂直对齐方式，super文字的上标，sub文字的下标，top垂直靠上，text-top使元素和上级元素的字体向上对齐，middle垂直居中对齐，text-bottom使元素和上级元素的字体向下对齐 text-align 水平对齐 left,right,center,justify:两段对齐 text-indent 文本缩进 缩进值（长度或百分比 line-height 文本行高 行高值（长度，倍数，百分比） white-space 处理空白 normal将连续的多个空格合并,nowrap强制在同一行内显示所有文本，直到文本结束或者遇到br对象 2.2.3 案例——利用CCS对注册页面实现修饰 【例2-8】设计如图所示的注册网页，该页面没有修饰，不够美观，采用CCS修饰页面，重新设计页面。 【分析】 为了便于理解其设计过程，这里采用分两步实现，逐渐完善设计： 第1步：按所给出的原始界面，设计HTML文档：ch02_8_1_register.html； 《源代码》 《运行界面》 第2步：设计CCS文档：ch02_8_Css.css，在该文档中包含所需要的格式控制，从而形成修饰后的页面。 第3步：利用ch02_8_Css.css中定义的样式，重新设计ch02_8_1_register.html，形成新网页ch02_8_2_registerCss.html。 【实现】实现步骤及其源代码。 【运行】 《运行界面》 2.3 JavaScript脚本语言 JavaScript是一种脚本语言，可以在浏览器中直接运行，是一种在浏览器端实现网页与客户交互的技术。 JavaScript代码可以直接嵌套在HTML网页中，它响应一系列的事件，当一个JavaScript函数响应的动作发生时，浏览器就执行对应的JavaScript代码。 本节主要内容： 2.3.1 JavaScript的基本语法 2.3.2 JavaScript的事件 2.3.3 JavaScript的对象 2.3.4 案例——JavaScript实现输入验证实现输入验证 2.3.1 JavaScript的基本语法 1．数据类型 JavaStript有主要数据类型有：int、float、string（字符串）、boolean、null(空类型)。 2．变量 （1）变量声明，格式如下： var 变量名[=值]; (变量声明可以省略) （2）数组的声明：数组的声明有三种方式 var array1=new Array(); //array1是一个默认长度的数组 var array2=new Array(10); //array2是长度为10的数组 var array3=new Array( aa,12,true); //array1是一个长度为3的数组，且元素类型不同 3．运算符 在JavaScript中提供了算术运算符、关系运算符、逻辑运算符、字符串运算符、位操作运算符、赋值运算符和条件运算符等运算符。这些运算符与Java语言中的支持的算符运算符及其功能相同。 4．控制语句 JavaScript中的控制语句有：分支语句（if、switch