Web development of MSDN

MSDN Library – April 2002,
第一天--走马观花
按照我的习惯,在看一份材料前,我都是要先把所有的内容浏览一遍,看哪些东西是自己了解的,哪些东西是陌生的,对自己了解的东西,大致看一下就行,然后把主要精力放在自己不了解但又觉得有必要学的内容上。对于MSDN,当然也不例外。
打开MSDN Library 里的Web development,一共有17项子内容,几乎包含了Web development所有方面,他们分别是:
Behaviors:DHTML里的行为。内容有行为的使用指南,行为库,常用行为参考,HTC参考,服务器端行为等。
Cascading Style Sheets:样式表。内容有样式表使用指南,使用参考,动态样式介绍。
Data Binding:数据捆绑。内容有使用指南,列表数据控制,数据捆绑接口等。
Content and Component Delivery:内容和组件的传递。主要是相关的SDK文档。
HTML and Dynamic HTML:HTML和动态HTML。包含了从技术文档到书籍摘录极其丰富的html和dhtml的内容。
HTML Applications(HTA):包括HTA的介绍,使用参考等。
Internet Explorer:IE浏览器。内容包括IE最新SDK文档,IE6、IE5.5详细资料,IE综述等。
Networking:网络连接。内容包括微软Win32 Internet 功能,Windows HTTP服务以及URL等。
Privacy:隐私保护。包括隐私保护方面的指南,参考,以及IE6.0在隐私保护方面的新特性等。
Programming and Resuing the Browser:扩展浏览器。内容包括对浏览器的编程和再使用等。
Scripting:脚本编写。内容包括和脚本有关的技术文档,专栏,书摘等。
Server Technologies:服务器端技术。内容包括综述,ASP,IIS,代理服务器等。
Web Authoring Tools:内容包括网页编程的一些技术性文章。
Web Content Management:网页内容管理。包括检测系统组件,网站规划,网站发布等内容。
WebControls:包括WebControls的指南,平台参考等内容。
Web Development(General):综述。有技术文档,专栏,期刊,书摘等。
Web Multimedia:网上多媒体。包括HTML+TIME,Media Bar等内容。
随便在其中几个栏目中看了一些文章,颇有收获:
1、认识hta
HTML Applications(HTA)> Introduction to HTML Applications (HTAs)
HTA是建立在Windows系统,IE5以上浏览器平台的一项成熟的技术。
它集成了IE的所有能力–对象模式,执行能力,翻译代码能力,协议支持,通道下载技术。通过下载,HTA可以在本地计算机上执行,最终的效果和用C++或VB编出来的可执行文件(.exe)执行的效果是一样的。HTA的很大特点是可以使许多事情变得非常简单。
创建一个hta文件非常简单,只要把一些html代码写到一个文本文件,然后把该文件的扩展名改成hta就行了。比如说,你把“Hello, World”这句话放到一个文本文件里,改名成xxx.hta,双击该文件,就可以看到一个窗口里显示着这句话,尽管文件里没有,等标签,IE也不会出错。
一个hta文件的打开可以有很多种方式:双击图表;在开始菜单中运行;通过URL打开;或者通过命令行运行。
HTA的运行支持三种方式:网页方式、打包方式和混合方式。
……
2、CSS在IE6中的增强
Internet Explorer>Internet Explorer 6>Technical Articles>CSS Enhancements in Internet Explorer 6
主要介绍了Internet Explorer 6 及以后的版本在CSS方面的新特性,其中!DOCTYPE 方面介绍得最多。如果大家现在用的是IE6.0,可以看一下下面的例子,就可以大致知道css在IE6中的增强。
(1)Box Model Example
msdn.microsoft.com/workshop/samples/author/css/overview/doctype.htm


Hi kids. Daddy will be home soon. I love you both!

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
(2)Separate Backgrounds
msdn.microsoft.com/workshop/samples/author/css/overview/canvas.htm


Canvas Comparison

Who moved my canvas?



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
(3)Auto Example
msdn.microsoft.com/workshop/samples/author/css/overview/auto.htm


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
3、网页:一个程序员的观点
Web Authoring Tools>Technical Articles>Web Pages: A Programmer’s Perspective
如果叫你说出www网页的历史,你能说得出来吗?让我们看看文章里面的介绍吧:
网页(Web)1989年诞生于瑞士日内瓦的欧洲粒子物理实验室(CERN),那里的研究员为了允许非技术人员可以不用通过深奥的程序界面共享他们的数据而研制了这套在线系统。在随后的两三年中,越来越多的人制作并共享了网页,浏览器的功能也不断的得到增强。到了1993年,在Internet中网页和浏览器已经是无处不在……
虽然这篇文章比较老,但里面说的一些东西对认识网页,认识html还是挺有帮助的,整篇文章浅显易懂,条理十分清晰,我觉得不管是初学者还是对网页已经有一定认识的人,读过以后都会有收获的。
4、表格
Web Development(General)>Book Excerpts>Web Design in a Nutshell>Chapter 10: Tables
表格是网页的骨架,掌握好表格对于网页制作是很关键的,特别对于初学者,如果在表格方面不过关,往往会被弄得焦头烂额。如果想系统的学习表格知识,我觉得这是一篇很不错的文章的。
从基础的表格结构,标签到表格的外观,文章都有很详细的介绍,此外还有表格的常见问题,使用技巧,以及如何切图。内容十分丰富,而且图文并貌。
还有很多很多精彩实用的文章,留着后面慢慢看了。
第二天--网页兼容性
Web Content Management>Detecting System Components >Technical Articles>Sniffing For Browsers, Virtual Machines, and Operating Systems
检测用户正在使用的系统平台,浏览器类型和版本是制作兼容性网页的第一步,这篇文章主要就是介绍这方面的内容。
下面是文章里列出的几个检测客户端信息的脚本例子:
1、用js检测浏览器版本

这个脚本主要利用HTTP协议头中包含的userAgent信息来判断浏览器的类型,版本,以及操作系统。举个例子,如果客户用的是Microsoft? Internet Explorer 6 ,操作系统是Microsoft Windows? XP,则userAgent返回的字符串是:
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
所以根据这些信息,利用上面的脚本我们就可以了解浏览该网页的计算机的情况,原理很简单。
2、检测操作系统类型
上面都是在客户端执行的脚本,你也可以使用在服务器端执行的脚本,先判断客户使用的是什么样的系统,什么样的浏览器,然后再决定向客户传送什么样的页面,下面就是这样的例子。 可以把上面这段SAP代码加在下面这个函数前面: function fill_table(){if (AnyIE) document.browserTable.Name.value = "Microsoft Internet Explorer";else if (AnyNetscape) document.browserTable.Name.value = "Netscape Navigator";else document.browserTable.Name.value = "Not supported";if (IE6) document.browserTable.Version.value = "6.x";else if (IE5) document.browserTable.Version.value = "5.x";else if (IE4 || Netscape4) document.browserTable.Version.value = "4.x";else if (IE3 || Netscape3) document.browserTable.Version.value = "3.x";else document.browserTable.Version.value = "Not supported";if (Win95) document.browserTable.os.value = "Windows 95";else if (Win98) document.browserTable.os.value = "Windows 98";else if (WinNT) document.browserTable.os.value = "Windows NT";else if (AnyMac) document.browserTable.os.value = "Macintosh";else if (Unix) document.browserTable.os.value = "Unix";else document.browserTable.os.value = "Not supported";} 上面介绍的是用js来判断浏览器和操作系统的方法,此外也可以用C++或者java的方法来判断,文章里都有介绍。同时,文章还介绍了判断运行Java的虚拟机版本和解析js的引擎版本的方法。不过因为文章是2001年写的,有些内容我觉得我们不用再考虑了,比如Navigator version 1.x ,Navigator version 3.x ,Win3.1,Win95之类的,现在基本很少有人用了。 (待续) caience 冬天是红色 积分:3087 发贴:4469 来自:小城淄博 注册:2000-10-20 发表于 2002-08-07 10:23:50 -------------------------------------------------------------------------------- 干脆把msdn贴出来算了 -------------------------------------------------------------------------------- Independence Studio 嘿嘿 坏笑 积分:878 发贴:783 来自: 注册:2001-10-06 发表于 2002-08-09 11:11:34 -------------------------------------------------------------------------------- 第三天--认识Persistence Behaviors>Persistence Persistence根据我的理解应该是“输入信息保持”的意思。 看一下几个简单的例子,应该就能了解Persistence是做些什么的: (1)saveHistory 在页面的两个文本框里随意输上一些内容,点一下下面的连接,然后按浏览器的返回按钮返回该页面,看一下有什么变化。


This persists:

This does not persist:

点一下然后用浏览器返回按钮返回
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
(2)saveFavorite
在页面的文本框里随意输上一些内容,然后把该页面添加到收藏夹里,关闭后从收藏夹里打开看看。(注意,如果是在论坛里直接运行的,得先把页面保存到硬盘中再做实验。))



:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
(3)saveSnapshot
在页面的文本框里随意输上一些内容,然后保存到本地硬盘上,关闭后从硬盘上打开看看。




[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
(4)userData
userData Behavior sample


Status:

Enter some text:

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
通过Persistence网页的作者可以使指定的对象的输入信息在客户端保持。Persistence允许IE5及以后的浏览器保留网页的信息,样式,变量和状态。比如说,当用户离开一个有折叠菜单的页面,然后再返回,该页面中用户原来选定的一些选项还是展开的。或者,当你返回一个搜索引擎的页面时,里面的询问框还保持着你最后一次输入的信息。
Persistence是作为一个behavior执行的,新的persistence行为包括:
saveFavorite - 在网页被添加到收藏夹时保持页面的状态和信息。
saveHistory - 在当前的会话内存中保持页面的状态和信息。
saveSnapshot - 当用户把网页存到本地硬盘时,直接把页面的状态和信息保留在网页上。
userData - 在XML store中保持页面的信息和状态。
Persistence可以不用通过服务器保持页面上的信息,从而加快了浏览速度。
下面是通过saveHistory来保持折叠菜单展开状态的具体做法:
在使用折叠菜单的网页上多会遇到这样的问题:在用户离开该页面时,折叠菜单都恢复到最初的状态,当用户返回这个页面时,一切都得从头来过。通过saveHistory ,我们可以解决这个问题。
先看看两个例子:
例子一:

Peristing TOC


Comments:

Notes about what is happening in the JScript functions will be displayed here.

点一下然后用浏览器返回按钮返回
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
例子二:

Peristing TOC


Comments:

Notes about what is happening in the JScript functions will be displayed here.

点一下然后用浏览器返回按钮返回
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
第一个例子没有使用saveHistory,当返回该页面时,一切都恢复了最初的样子,第二个例子使用了saveHistory,返回时原来的状态就能保持下来。
这样的网页可以分三步制作,首先,在网页里加入saveHistory行为。然后创建一个带有saveHistory行为的菜单。最后,通过一些必要的js代码来实现菜单的折叠和状态的保持。
一、基本的Persistence构建
一个saveHistory行为需要下面几个元素来起作用:一个meta,一个STYLE,一个CLASS,至于ID,则是可选的。
其中META和STYLE用来告知浏览器这个页面使用了Persistence:

而CLASS主要用来确定元素使用的persistence类别:

我们也可以在使用再定义STYLE:

二、构建菜单
接下来是构建一个简单的嵌套无序列表菜单,并定义了两个样式:
.tocItemHide {display: none;}和.tocItemShow {display: block;},为以后的展开收缩做准备。
//这里的META是必需的//这里的 STYLE 是必需的

:

  • Group 1
    • Item 1
    • Item 2
    • Item 3
  • Group 2
    • Item 1
    • Item 2
    • Item 3
  • Group 3
    • Item 1
    • Item 2
    • Item 3

三、功能实现
1、给

    标签加上事件触发,其中onsave触发fnSave(),保存网页状态,onload触发fnLoad(),恢复网页状态。

    • Group 1
      • Item 1
      • Item 2
      • Item 3

      :

    2、通过添加onclick="fnFlash(this)" ,使菜单有折叠功能。

    • Group 1
      • Item 1
      • Item 2
      • Item 3

      :

    3、fnFlash()函数编写
    fnFlash()函数是例子三个函数中最简单的一个,用来实现菜单的展开收缩。原理是先判断菜单的状态,然后替换菜单的样式,改变其显隐,从而达到收缩的效果。
    function fnFlash(oTitle){ oList=document.all[oTitle.sourceIndex + 1]; if(oList.className=="tocItemHide"){ oList.className="tocItemShow"; } else{ oList.className="tocItemHide"; }}
    4、fnSave()函数编写
    fnSave()用来获得菜单列表中所有的class名,并把他们作为一个属性储存到ul对象中。储存信息有很多种不同的方法,但这里采用的方法可以不受菜单长度的限制,而且也不需要为每一行都做脚本声明。
    function fnSave(){ var sArray = "";/* 搜寻所有CLASS属性等于tocHead的UL对象*/ for(var i = 0;i < document.all.length;i++){ oTrap = document.all[i]; if((oTrap.tagName == "UL") &&(document.all[i-1].className == "tocHead")){/* 如果存在,并且是第一个被发现的,直接添加到数组中。*/ if(sArray.length == 0){ sArray = oTrap.className; }/* 如果存在,但不是第一个被发现的, 添加一个分隔符再存到数组中。*/ else sArray += "|" + oTrap.className; } }/* 把数组值设置到要保持的对象中去*/ oPrimaryTOC.setAttribute("sPersistState",sArray);} 5、fnLoad()函数编写 fnLoad()用于恢复折叠菜单的展开状态。 function fnLoad(){//把要保持的信息赋到一个变量中去. var sArray = oPrimaryTOC.getAttribute("sPersistState"); var cycle = 0;//分割字符串,创建一个数组. oArray = sArray.split("|"); for (var i = 0;i < document.all.length;i++){/* 搜寻所有CLASS属性等于tocHead的UL对象*/ oTrap = document.all[i]; if((oTrap.tagName == "UL") &&(document.all[i-1].className == "tocHead")){/* 如果存在,给它赋值,计数器加一。*/ oTrap.className = oArray[cycle]; cycle++; } }} 当完成了上面这些函数的编写,菜单就有保持和恢复状态的功能了。 ------------------------------------------------------------------------------- 上面是在MSDN Library - April 2002中Persistence节选出来的,更详细,更精彩的内容可以参看原文,在Web Development > Behaviors里,包括的文章有:
    Introduction to Persistence - Persistence简介
    Persisting Collapsible Table of Contents State - 保持折叠菜单状态
    Persisting Custom and Dynamic Styles - 保持个性化动态样式
    Persisting Form Data - 保持表单数据
    Persisting Session Information - 保持Session信息

发表评论