WEB程序设计课件-第4章--页面设计.ppt

第4章页面设计;4.1静态页面设计

;4.1.1HTML根本标记

;表4-1body标记属性表;文字显示和段落控制标记;【例4-1】图4-1是一个具有不同的文字显示格式和段落控制格式的HTML文件的显示效果，相应的HTML文件中包含了文字显示和段落控制标记。;图像标记img;超链接标记;

根据目标页面位置的不同，href属性的URL信息的构成分为以下3种情况：;列表标记和预定格式标记;【例4-3】以下程序采用3种列表标记显示如图4-2所示的页面;4.1.2表格;表4-3table标记属性表;表4-4tr标记属性表;表4-5td标记属性表;【例4-4】以下是一个显示图4-3所示表格页面的HTML文件，例中只给出主要的表格局部的文本，其余局部读者可以很容易地补全;【例4-5】以下是一个显示图4-4所示较复杂表格页面的HTML文件;4.1.3表单;表4-6常用的表单输入域;【例4-6】设计一个如图4-5所示的页面，其中包含radio，checkbox，textarea，submit和reset等表单输入域;4.1.4框架

;框架的定义

;表4-7framset标记属性表;【例4-8】设计如图4-7所示的框架页面;4.2动态页面设计

;层叠样式表〔CSS〕

CSS〔CascadingStyleSheets〕是W3C协会为弥补HTML在显示属性设定上的缺乏而制定的一套扩展样式标准

脚本语言

脚本语言是DHTML最重要的局部，因为页面中的对象要“动”起来，要有变化，就必须通过脚本程序进行控制。

DHTML基于HTML语言，利用CSS扩展样式编排，借助浏览器对象模型概念，用脚本程序对网页进行动态控制。;【例4-9】一个DHTML简例;4.2.2JavaScript的浏览器对象及其使用

;Navigator对象;【例4-10】根据浏览器的类型显示不同的页面，结果如图4-9所示;Window对象

;表4-10窗口特征值表;【例4-11】本例〔ch4-11.html〕在浏览器中显示一个如图4-11〔a〕所示的初始用户输入界面，接收用户输入的姓名和号码，用户单击“输入完成”按钮后，将弹出如图4-11〔b〕所示的对话框，假设单击“确认”按钮，那么生成一个如图4-11〔c〕所示的新窗口，显示用户输入的姓名和号码；假设单击图4-11〔b〕中的“取消”按钮，那么弹出如图4-11〔d〕所示的警告框。;Document??象;【例4-12】本例通过Document对象设置页面的颜色和文字等属性，页面显示效果如图4-12所示;【例4-13】本例将设计如图4-13所示的框架页面，窗口划分为左、右两个框架;【例4-16】本例说明Links数组的用法，设计如图4-15所示的页面，利用按钮改变超链接的对象;Document对象的方法;【例4-17】Document对象的方法使用例如;Form对象;【例4-18】本例〔ch4-18.html〕给出了Form对象的属性引用方法;Form对象的方法;Form对象的子对象;【例4-20】设计如图4-19所示的页面，填写和选择个人信息，系统进行检查和显示;History对象和Location对象;Frame对象;用户注册信息合法性检查实例;4.2.3在VBScript中使用对象

;Window对象;表4-13Window对象的属性;内置函数MsgBox()和InputBox();Window对象的事件;【例4-26】Window对象的事件处理例如。设计如图4-26〔a〕所示的页面，在页面中显示当前时间，并且不断刷新；在离开本网页时显示辞别信息，如图4-26〔b〕所示;Document对象;【例4-30】Document对象的StyleSheets数组及StyleSheet对象用法例如;标记的属性;【例4-31】设计如图4-31〔a〕所示的页面，当点击按钮时，将展开如图4-31〔b〕所示的说明;浏览器的事件处理;4.2.4DOM技术

;文件的DOM节点树

DOM树形结构节点的属性;【例4-34】在以下JavaScript程序中，分别用parentNode和previousSibling获得父节点和左兄弟节点，用nodeName属性输出节点的标记名;DOM的方法;4.3样式表设计

;4.3.2相关的标记和属性

;4.3.3样式的继承和作用顺序

;4.3.4CSS属性

;文本属性

文本属性设置文字之间的显示特性，包括字符间隔〔letter-spacing〕、文本修饰〔te