IWPDT3北大青鸟网页设计基础教材

1、1Internet和网页设计基础和网页设计基础2课题目标课题目标i了解了解Intranet的定义的定义i解释发布一个解释发布一个Web页的过程页的过程i描述输入表单描述输入表单i解释动态解释动态HTML(DHTML)i解释解释DHTML对象模型对象模型3IntranetiIntranet： 在一个组织内使用基于在一个组织内使用基于Internet技术来促进交技术来促进交流及信息访问的一种网络流及信息访问的一种网络iIntranet与与Interneti三类人决定了三类人决定了Intranet的设计和使用的设计和使用 用户用户是组织中使用是组织中使用Intranet获取信息的人员获取信息的人员

2、信息提供者信息提供者是提供所需信息的内部组是提供所需信息的内部组 开发者开发者是开发工具、应用程序或组织内部应用是开发工具、应用程序或组织内部应用程序网关的人程序网关的人4IntranetIntranet的通用模型的通用模型开开 发发 者者WebWeb工具工具发布系统发布系统WebWeb应用程序和应用程序和WebWeb站点站点信息提供者信息提供者用户工具用户工具（浏览器）（浏览器）用用 户户机机 制制服服 务务信信 息息5发布发布WebWeb站点站点i发布到发布到 Internet 上上发布在发布在 Internet 上的上的WebWeb服务器（服务器（IIS）i发布到发布到 Intranet

3、 上上发布在组织中的发布在组织中的WebWeb服务器（服务器（IIS）i发布到本机发布到本机本机上需安装本机上需安装 PWS（Personal Web Server）路径：路径：C:InetPub6发布发布WebWeb站点站点i发布操作：发布操作：在在FrontPageFrontPage中打开中打开“文件文件”菜单菜单指定发布站点的位置指定发布站点的位置例：例： 或：或： 单击单击“发布发布”7FrontPageFrontPage服务器扩展服务器扩展iFrontPageFrontPage服务器扩展服务器扩展安装在安装在WebWeb服务器上服务器上将会有完整的将会有完整的FrontPageFro

4、ntPage的全部功能的全部功能是运行在一个是运行在一个WebWeb服务器上的一组程序和脚本服务器上的一组程序和脚本iFrontPageFrontPage服务器扩展对发布的影响服务器扩展对发布的影响可支持完整的可支持完整的FrontPageFrontPage功能，例如协作撰写、命中计功能，例如协作撰写、命中计数器、电子邮件表单处理数器、电子邮件表单处理将维护你的文件和超链接将维护你的文件和超链接可以在服务器上直接编辑可以在服务器上直接编辑 Web Web 站点站点可使用可使用HTTPHTTP来发布站点，而非来发布站点，而非FTPFTP8FrontPage WebFrontPage Web上的安

5、全性上的安全性i对于对于WebWeb服务器上的每个服务器上的每个WebWeb站点，您可以设置下列站点，您可以设置下列各类权限：各类权限： 浏览浏览站点的权限站点的权限赋予一个用户、用户组或指定计赋予一个用户、用户组或指定计算机以浏览算机以浏览Front Page Web 的权限的权限 创作和浏览创作和浏览站点的权限站点的权限这赋予一个用户、用户组这赋予一个用户、用户组或是指定计算机在或是指定计算机在Front Page资源管理器上打开资源管理器上打开FrontPage Web 以及在以及在FrontPage编辑器上创建并编辑文件的权限编辑器上创建并编辑文件的权限 管理、创作并浏览管理、创作并浏

6、览站点的权限站点的权限这赋予一个用户、这赋予一个用户、用户组或指定计算机以管理当前用户组或指定计算机以管理当前Front Page Web的权限的权限9表单表单i表单表单是一个网页上表单域的集合是一个网页上表单域的集合 i表单域表单域是网页上的一个数据项，用户通过在域中是网页上的一个数据项，用户通过在域中键入数据，或者选择该域，来向该域输入信息键入数据，或者选择该域，来向该域输入信息文本框文本框列表框列表框单选按钮单选按钮复选按钮复选按钮文本域文本域命令按钮命令按钮i用户通过表单与服务器进行用户通过表单与服务器进行交互交互10表单的例子表单的例子11表单的标记表单的标记是是 否否演示例题：第三

7、章演示例题：第三章表单使用表单使用.HTM12表单的典型应用表单的典型应用i收集名称、地址、电话号码、电子邮件地址及收集名称、地址、电话号码、电子邮件地址及其它信息来注册一个服务其它信息来注册一个服务i为购买某件商品而收集信息为购买某件商品而收集信息i统计某个统计某个Web站点的反馈站点的反馈i为为Web站点提供搜索工具站点提供搜索工具i为聊天会话提供界面为聊天会话提供界面13动态动态HTMLHTML（DHTMLDHTML）iDHTML动态动态 HTML 通常用于描述使文档动画化的通常用于描述使文档动画化的HTML、样式表及脚本的、样式表及脚本的组合组合iDHTML的构成：的构成： 以以HTM

8、L语言为基础语言为基础 级联样式表（级联样式表（CSS） 脚本语言（脚本语言（VBScript 、Jscript 或或 JavaScript） 浏览器的对象模型浏览器的对象模型i例：例：悬停按钮、横幅广告、站点计数器、网页过滤效果等悬停按钮、横幅广告、站点计数器、网页过滤效果等14DHTMLDHTML的特点的特点i动态样式动态样式 演示例演示例1i动态内容动态内容 演示例演示例2i绝对定位绝对定位 可以指定元素的可以指定元素的X、Y坐标坐标 可以实现可以实现Z坐标轴的定位坐标轴的定位i内建多媒体特效内建多媒体特效 由内建的多媒体滤镜提供由内建的多媒体滤镜提供 例：模糊、发光、下拉阴影、阴影、屏

9、蔽、透明度等例：模糊、发光、下拉阴影、阴影、屏蔽、透明度等i数据绑定数据绑定15DHTMLDHTML对象模型对象模型i4.04.0版本之后的版本之后的IE 和和 NetScape 都基于对象模型都基于对象模型i每个元素都被看作是一个可以独立访问并编程的对每个元素都被看作是一个可以独立访问并编程的对象象 i浏览器的对象有各自的属性、方法、事件浏览器的对象有各自的属性、方法、事件i是以是以W3C公布的文件对象模型（公布的文件对象模型（Document Object Model ）DOM为基础，再加上自己的扩展对象而成为基础，再加上自己的扩展对象而成16事件模式事件模式i事件模式事件模式 网页可根据

10、用户的动作或浏览器的状态给予响应i事件处理程序事件处理程序 相关代码块，当相应的事件发生时被执行i事件类型事件类型 浏览器状态改变例：onLoad 、onChange、onUnload、onResize、onReset 鼠标事件：例：onMouseOver、 onMouseOut 、onMouseDown onMouseMove、 onClick 、onDblClick 键盘事件：例：onKeyDown 、 onKeyUp 、onKeyPress17事件的生命周期事件的生命周期l事件生命周期事件生命周期：l事件随触发事件的动作开始，在对应事件处理响应完事件随触发事件的动作开始，在对应事件处理响应完毕后结束毕后结束l事件过程步骤事件过程步骤：l用户操作或浏览器状态发生改变用户操作或浏览器状态发生改变l浏览器对象更新其信息，反应事件状态浏览器对象更新其信息，反应事件状态l事件被触发或响应事件事件被触发或响应事件l调用相关的事件处理程序调用相关的事件处理程序18事件冒泡事件冒泡l 事件冒泡：事件冒泡：l事件会传递给上一层对象事件会传递给上一层对象l上一层对象接收到事件，会调用并执行该对象的事上一层对象接收到事件，会调用并执行该对象的事件处理程序件处理程序l事件会继续往上传递，事件处理程序会被再次调用事件会继续往上传递，事件处理程序会被再次调用并执行并执行l直到最后到达直到最后到达WIN