第4章页面设计补充.pptVIP

第4章 页 面 设 计 网页设计要使用多种技术，包括HTML、脚本程序设计、CSS样式表及美工技术等。仅使用HTML设计的页面属于静态页面。Web刚出现的一段时间内，它是一个静态信息发布平台，所设计的页面都是静态的；而当今的Web已经具有更丰富的功能。 4.1 动态页面设计 客户端的页面动态特性主要通过层叠样式表（CSS）、脚本程序和HTML4.0来实现的，这三者构成了动态HTML（DHTML） 4.1.1 DHTML的概念 HTML 4.0 HTML 4.0对以前版本的HTML标记进行了扩充，最大的扩展是将页面中的文字及图像等都作为对象来处理，并可通过脚本语言程序对其特性和变化予以控制。这样，页面的内容可以根据用户的动作而变化，大大丰富了“动态”的含义 层叠样式表（CSS） CSS（Cascading Style Sheets）是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准 脚本语言 脚本语言是DHTML最重要的部分，因为页面中的对象要“动”起来，要有变化，就必须通过脚本程序进行控制。 DHTML基于HTML语言，利用CSS扩展样式编排，借助浏览器对象模型概念，用脚本程序对网页进行动态控制。 一个DHTML简例 本例在浏览器窗口中显示一行文字，当鼠标移到该行文字区域上时，文字颜色变为红色 ，程序如下 htmlheadtitleDHTML简例/title/head bodyspan id=s1 onMouseOver=s1.style.color=red onMouseOut = “s1.style.color=‘black’”这是使用了DHTML的一个简 例。 /span /body/html 4.1.2 JavaScript的浏览器对象及其使用 ⑴Navigator对象层次 ⑵Navigator对象 根据浏览器的类型显示不同的页面，结果如图所示 ⑶　Window对象 与窗口有关的属性：parent self top window 与浏览器状态栏有关的属性：status defaultStatus 与对话框有关的方法：alert( ) confirm( ) prompt( ) 与窗口生成与撤销有关的方法： open close 与窗口焦点有关的方法：focus blur 与“超时”有关的方法： setTimeout clearTimeout 其他属性和方法 本例在浏览器中显示一个如图（a）所示的初始用户输入界面，接收用户输入的姓名和电话号码，用户单击“输入完成”按钮后，将弹出如图（b）所示的对话框，若单击“确认”按钮，则生成一个如图（c）所示的新窗口，显示用户输入的姓名和电话号码；若单击图（b）中的“取消”按钮，则弹出如图（d）所示的警告框。 ⑷　Document对象 Document对象的属性 数值属性 数组属性 本例通过Document对象设置页面的颜色和文字等属性，页面显示效果如图4-12所示 本例将设计如图所示的框架页面，窗口划分为左、右两个框架 本例说明Links数组的用法，设计如图所示的页面，利用按钮改变超链接的对象 Document对象的方法 Document对象的方法主要有write，writeln，open，close，clear write和writeln方法 write(String1,String2,…) open，close和clear方法 open方法打开一个已存在的文件或创建一个新文件来写入内容 close方法用于关闭文件 clear方法用于清理文件中的内容 Document对象的方法使用示例 ⑸　Form对象 Form对象的属性 action 表单提交后启动的服务器应用程序的URL，与form定义 中的action属性相对应。 name 表单的名称，与form定义中的name属性相对应。 Method 指出浏览器将信息发送到由action属性指定的服务器的方 法，它只可能是get或post。它对应form定义中的 method属性。 target 指出服务器应用程序执行结果返回的窗口，对应form定 义中的ta