Profil de 国强平行空间PhotosBlogListesPlus  |  Outils Aide |
|
|
04/09/2007 制作 可滚动 可关闭 的flash对联广告
我们网页设计师应掌握些什么？做了这个行业有几个年头了，而对这个行业也分了很多方面的工作，但是做为页面制作人员应该了解的知识
如果说美工只负责出效果图，程序员只负责数据处理的话。那么网页制作人员需要负责的东西无疑是最多的。 1.XHTML（这是最根本的，也是最重要的。） 2.CSS（不学会这个，你根本没有办法去实现美工所画出来的效果图。） 3.Javascript（虽然说要注重结构、表现、行为的脱离，但很多时候我们也需要如何用javascript和css配合作战。） 4.Dom（文档对象模型，配合javascript使用。） 以下内容为个人体会，最重要的是上边四点。 5.SEO（搜索引擎优化，虽然现在有专门的做SEO的公司，但不是每个网站都会去请那些人来做这种事情的，如果你会了你就会知道其实很多优化是页面代码上的优化。） 6.网站的可用性（比如在NoScript环境下的正常显示等。） 7.网站的易用性（美工画出来的图是没有行为的，而用户是可以在网页上做事的，所以如何让页面的易用性，这是你应该考虑的，除非你们还有专门的UE人员。） 8.了解后台程序开发（对后台开发的了解有利于和开发人员进行沟通，不然会很麻烦。） 工具软件列表
1.Editplus 用来编写html代码和javascript代码。
2.TopStyle 用来编写css代码。 3.Dreamweaver 这个相信不用我介绍了吧。 4.Firefox 浏览器，强大的插件功能。 5.Opera 浏览器，多装几个，看一下你的作品在多种浏览器中是不是一样。 推荐资源列表
网站
http://www.w3.org http://www.blueidea.com http://www.w3cn.org http://www.csszengarden.com/ http://yuntian.cnblogs.com/ http://sheneyan.com/ http://andy.andymao.com/ http://www.forest53.com/ 教程 样式表中文手册 -苏昱 样式表滤镜中文手册 -苏昱 文档对象模型中文手册 -苏昱 在30天内打造更具亲和力的网站 网站重构 《CSS网站布局实录》 javascript宝典（第四版） 13/08/2007 网站优化 VS SEO网站优化 VS SEO 一、网站优化包括了SEO。SEO只是一种网站优化的方法。 二、除SEO以外，网站优化还包括以下方面： 1、网站美工：针对不同的客户，不同的网站，美工的重要性也不一样，美观大方的页面布局，能够提高企业形象，加强访客感受，甚至可以提高转化率，提高网站粘度。 2、功能优化：即通过人性化的设计，提高客户的访问体验，尽可能减少客户到达每一个页面所需要点击的次数。 3、速度优化：电信、网通等。。。 4、合理引导：如何引导客户成为最终的消费者？采取什么引导方式？特别是对于销售类网站来说，引导是很重要的提高转化率的方法。 5、诚信展示：通过展示企业的联系方式（地址、电话、邮箱、邮编、传真），荣誉，网站相关的证件等，提高信任度。 6、易于维护：易于维护的网站，会很大程度上降低企业的维护成本。 7、易于更新：大部分企业网站，都应该是一个具有一定活性的、易于更新的网站。 8、内容优化：网站内容的优化，也是SEO的重要部分，对大部分网站来说，内容准确，语义清楚，表述合理即可，但很多网站却达不到这一基本要求，甚至错字连篇。 不同的企业，有着不同的营销方式，所以对一个网站的优化也要具体问题具体分析，有时候为了美工，可以牺牲部分的SEO，合理组合基本的优化方法才好。 交互设计之路经典语录1.我们让精神病人管理精神病院了。 2.解决问题的关键是在编程之前进行交互设计。 3.奇怪的不是熊跳的好不好，而是它竟然在跳。 4.和我在一起工作的大多数产品经理宁愿按时交付不成熟的产品，也不愿意承担拖延工期的恶名。 5.唯一比编写软件更昂贵的事情是编写坏软件。 6.如果这一次出现在明天怎么办？ 8.是过程让产品失去人性，而不是技术。 9.只为一个人设计。 10.让软件有礼貌。 11.概念的完整性是一种核心的竞争力。 12.知道砍掉那些功能。 13.为设计编写文档，让它变成产品。 08/08/2007 div css布局结构语义与兼容相关影响div + css 不等于xhtm+css，这种说法有一定的误解。这里涉及到一个标签语义的问题。 还有其他的，一时没想到。以后想到了再补上。 ----------补充------------------ 24# 回24楼的， 干嘛人家要提出W3C标准呢？ 百度没有声明doctype，这种页面用wap浏览恐怕会令人不太happy。 ---------------------- 当初Netscape和IE的浏览器大战，最受伤的就是那些网页设计人士 ------------------------------------------------------------ 兼容问题还不只是浏览器．屏幕分辨率问题也是很严重 25/07/2007 推荐一个网站吧！前几天发现了一个网站，比较不错：木耳网----http://www.mmear.com/
基于web2.0的新式听小说、资讯网站！！！！！懒人比较喜欢！
在如今这个资讯发达、崇尚知识的时代，我们需要读书、看书，却只有太少的时间可以认真地阅读。每天我们的眼睛总是忙碌着，不得不阅读的大量信息使它不堪重负，但我们的耳朵，却空闲着。因此，木耳网决定提供以最新最畅销的有声图书为主，同时涉及杂志、广播节目和其他，让繁忙得没有时间的你，可以藉由我们提供的服务，下载至计算机、MP3播放器、以及手机中。可以使大家充分利用等候、坐车、旅行、做饭、吃饭、睡前等时间，感受听觉所带来的魅力，并且随时随地充实新知，从深情悠扬的声音中把握管理之道的玄机，领悟励志信念的精髓。同时我们的内容每天都在增加，不断制作、推出精彩作品。 作为有声读物网站，木耳网不仅可以为您提供一流有声读物作品的在线试听、下载、产品销售为一体的综合性服务平台，而且，作为我们的会员，您还将享受到更为专业的个性化订做服务以及灵活快捷的付费下载。 木耳网有声书内容涉及财经管理、中外文学、儿童读物、科幻悬疑、外语学习等篇目，辅之以广播节目、电影录音剪辑、讲座培训等内容。我们力图用我们提供的内容，把你的耳朵“叫醒”，共同开启一个“用耳朵聆听书籍”的世界。 21/07/2007 用javascript动态调整iframe高度当你在页面上使用了iframe之后，一般来说会不希望iframe显示难看的滚动条，以使iframe里面的内容和主页面的内容浑然一体。这时候你会设置 scrolling="no" 属性。但是这样一来如果iframe里面的内容是变化的，高度会随之内容的变化而变化的时候，你的iframe就会显得太长导致底下一大片空白，或者正好相反，由于iframe的高度太小导致一部分内容会被挡住。这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度。如果需要调整宽度的话，原理是一样的，本文不加详述。
首先，在你的主页面上必须包含以下这段javascript代码： <script language="Javascript"> 然后对于主页面用到iframe的地方添加代码： <iframe id="myTestFrameID" 17/07/2007 网页播放器代码全集1.avi格式 2.mpg格式 3.smi格式 4.rm格式 5.wmv格式 6.wma格式 7.Windows Media Player 系列(不同面板样式) 简易型： 标签型: 多功能型： 网页播放器的参数含义 Windows Media Player 网页播放器 参数含义 (默认0为否，-1或1为是) 上面的这个播放器是老式的那种，6.4版本！新式播放器是在MediaPlayer9.0以后出现的，也就是说只有装了9.0或9.0以上的播放器才能正常使用的。 ------------------------------------------------------------------------------- 下面是新式播放器代码，相对以前的来说要简单很多： Real Player 网页播放器 参数含义 参数：autostart 属性：True或是False 作用：指定是否自动播放指定的源文件 RealPlayer的一些函数、方法和过程 这是 Real Player ActiveX Control Library (Version 1.0) 的所有函数与方法，有兴趣可以研究一下。 function GetSource: WideString; 网页中WMP视频控制之使用指南 □播放方法和属性 □播放 □音频控制 □扫描 □搜索 □媒体播放器的外观界面 □播放列表 □节目信息 □字幕 □脚本命令 □捕捉键盘和鼠标事件 □监测流状态与网络链接 □错误处理 □播放CD <ASX VERSION="3.0"> <ENTRY> <ENTRY> <ENTRY> <ENTRY>
1. 如何贴rm,ra,ram类型的音乐，代码如下： 2. 如何贴midi,asf,wma,asx类型的音乐，代码如下： 3.<bgsound src="你的歌曲地址" loop="-1"> 只需要把整段代码copy到文章中去(编辑文章的时请用HTML代码模式，否则这段代码会以文本形式显示出来，不能被执行)，用你喜欢的音乐文 件的URL代替上面的音乐地址代码就可以了。注意，音乐如果太大影响浏览速度，严重的可能导致浏览器停止响应，所以如果要放背景音乐请不要使用大文件。 音乐文件的URL指：音乐文件的网址。 加了背景音乐后不能正常收听音乐这种情况的错误有两个：
<embed height=26 src=http://song.5music.org/5musicreall/2003_ydzh/emhj/1-14.rm type=audio/x-pn-realaudio-plugin width=120 controls="StatusField" autostart="true" 25/05/2007 UI设计与UI标准这几天公司对网站有了新的动作，要维持现在的网站开发，全面开发新版的网站，主要架构、开发语言都采用最新的技术。而对网站的UI方面也要求了更好，这几天我一直忙于找些关于网站UI方面的资料。
网站UI，网些一些大鸟把它叫做WUI。UI的理解----User Interface也就是用户与界面的关系。他包括交互设计，用户研究，与界
面设计三个部分，而WUI，可能是针对网站开发设计的吧。 标准只有被使用才有价值 这最后的悼词揭示了为何标准虽然受欢迎但却难以容易的被采用。正如经常呈现的那样，标准定义了一个更好的世界，但却没能让它更容易被实现。因此，为了让标准能够有价值，它们需要： 1. 描述可用的界面； 通过增加第三点条件，我们能够从拥有一套有价值的标准过渡到拥有一套可采用的标准。一套便于使用的标准必须是有用的。
12/05/2007 搜索引擎如何索引收录网页对SEO(搜索引擎优化)而言，让网站内的页面能够及时、全面地被搜索引擎索引、收录应该说是首要的任务，这是实施其他SEO策略的最基本保证。——不过，这也是往往易被高估的一个环节，比如说我们时常可以看到某些人宣称自己的网站被Google收录了多少页面如几K甚至几十K等以证明SEO工作的成功。但客观地说，网页仅仅被搜索引擎索引、收录是没有太大的实际意义，往往只能沦为浩如烟海的Internet世界中的殉葬品，更重要的是如何让网页出现在针对特定搜索项的SERP(搜索结果页面)前几页。——许多人相信，让网站内尽可能多的页面被收录进搜索引擎索引数据库终归不是一件坏事，网页越多，暴光的机会也便越大，虽然最终效果如何存在疑问。 09/05/2007 服务器的稳定性对网站排名的影响服务器的稳定性会直接影响网站排名情况,是seo重要的一环,应该得到从事seo人们的重视,以前也了解过服务器稳定性对排名有着较为严重的影响，不过那都是别人说的，自己却一直没机会经历。这次，webdn服务器出现了问题，隔三差五就不能访问,结果百度给网站降低权，几天后访问量迅速走低。 16/11/2006 Java Web项目开发到底需要掌握哪些技术？ 目前， 国内外信息化建设已经进入基于Web应用为核心的阶段， Java作为应用于网络的最好语言，前景无限看好。然而，就算用Java建造一个不是很烦琐的web应用，也不是件轻松的事情。概括一下，实施Java的WEB项目需要掌握的技术如下： lJava语言
l面向对象分析设计思想
l设计模式和框架结构
lXML语言
l网页脚本语言
l数据库
l应用服务器
l集成开发环境
下面我们具体地看每个技术.
1、Java语言
Java语言体系比较庞大，包括多个模块。从WEB项目应用角度讲有JSP、Servlet、JDBC、JavaBean(Application)四部分技术。 （1）、Java Database Connectivity (JDBC)技术
在Java Web应用开发中，数据库管理系统（RDBMS）的使用是不可缺少的。JDBC(Java Database Connectivity) 是一种用于执行 SQL 语句的 Java API。它由一组用 Java 编程语言编写的类和接口组成。JDBC 为工具/数据库开发人员提供了一个标准的API，使他们能够用纯Java API 来编写数据库应用程序。
简单地说，JDBC 可做三件事：
l与数据库建立连接，
l发送 SQL 语句，
l处理结果。
（2）、Servlet技术
Servlet是运行在服务器端的程序，可以被认为是服务器端的applet。servlet被Web服务器（例如Tomcat）加载和执行，就如同applet被浏览器加载和执行一样。servlet从客户端(通过Web服务器)接收请求，执行某种操作，然后返回结果。
Servlet的主要优点包括
lServlet是持久的。servlet只需Web服务器加载一次，而且可以在不同请求之间保持服务(例如一次数据库连接)。
lServlet是与平台无关的。如前所述，servlet是用Java编写的，它自然也继承了Java的平台无关性。
lServlet是可扩展的。由于servlet是用Java编写的，它就具备了Java所能带来的所有优点。Java是健壮的、面向对象的编程语言，它很容易扩展以适应你的需求。servlet自然也具备了这些特征。
lServlet是安全的。从外界调用一个servlet的惟一方法就是通过Web服务器。这提供了高水平的安全性保障，尤其是在你的Web服务器有防火墙保护的时候。
lServlet可以在多种多样的客户机上使用。由于servlet是用Java编写的，所以你可以很方便地在HTML中使用它们。
（3）、JavaServer Pages(JSP) 技术
JSP是从Servlet上分离出来的一小部分，简化了开发，加强了界面设计。JSP定位在交互网页的开发。运用Java语法，但功能较Servlet弱了很多，并且高级开发中只充当用户界面部分。JSP容器收到客户端发出的请求时，首先执行其中的程序片段，然后将执行结果以HTML格式响应给客户端。其中程序片段可以是：操作数据库、重新定向网页以及发送 E-Mail 等等，这些都是建立动态网站所需要的功能。所有程序操作都在服务器端执行，网络上传送给客户端的仅是得到的结果，与客户端的浏览器无关，因此，JSP 称为Server-Side Language。
JavaServer Pages的主要优点包括
●一次编写，各处执行(Write once, Run Anywhere)特性
作为Java 平台的一部分，JavaServer Pages 技术拥有Java语言“一次编写，各处执行”的特点。随着越来越多的供货商将JavaServer Pages 技术添加到他们的产品中，您可以针对自己公司的需求，做出审慎评估后，选择符合公司成本及规模的服务器，假若未来的需求有所变更时，更换服务器平台并不影响之前所投下的成本、人力所开发的应用程序。
● 搭配可重复使用的组件
JavaServer Pages技术可依赖于重复使用跨平台的组件（如：JavaBean或Enterprise JavaBean组件）来执行更复杂的运算、数据处理。开发人员能够共享开发完成的组件，或者能够加强这些组件的功能，让更多用户或是客户团体使用。基于善加利用组件的方法，可以加快整体开发过程，也大大降低公司的开发成本和人力。
● 采用标签化页面开发
Web 网页开发人员不一定都是熟悉Java 语言的程序员。因此，JSP 技术能够将许多功能封装起来，成为一个自定义的标签，这些功能是完全根据XML 的标准来制订的，即JSP 技术中的标签库(Tag Library)。因此，Web 页面开发人员可以运用自定义好的标签来达成工作需求，而无须再写复杂的Java 语法，让Web 页面开发人员亦能快速开发出一动态内容网页。
今后，第三方开发人员和其他人员可以为常用功能建立自己的标签库，让Web 网页开发人员能够使用熟悉的开发工具，如同HTML 一样的标签语法来执行特定功能的工作。
● N-tier 企业应用架构的支持
有鉴于网际网络的发展，为因应未来服务越来越繁杂的要求，且不再受地域的限制，因此，
必须放弃以往Client-Server的Two-tier 架构，进而转向更具威力、弹性的分散性对象系统。由于JavaServer Page 技术是Java 2 Platform Enterprise Edition (J2EE)集成中的一部分，它主要是负责前端显示经过复杂运算后之结果内容，而分散性的对象系统则是主要依赖EJB ( Enterprise JavaBean )和JNDI ( Java Naming and Directory Interface )构建而成。
（4）、JavaBean(Application)应用组件技术 Application是Java应用程序，在WEB项目和一些开发中主要应用JavaBean。它就是Application的一部分，逻辑运算能力很强，能极大的发挥Java语言的优点。JavaBean 被称为是Java 组件技术的核心。JavaBean 的结构必须满足一定的命名约定。JavaBean能提供常用功能并且可以重复使用，这使得开发人员可以把某些关键功能和核心算法提取出来封装成为一个组件对象，这样就增加了代码的重用率和系统的安全性。 高级的WEB项目会应用到以上所有技术，它们之间联合使用和协作开发会提高开发的效率和系统的性能。 2、面向对象分析设计思想 Java语言是完全面向对象的语言，所以在项目设计时会有很大的帮助，在设计时应尽量舍弃以往的面向过程的设计方式。 在分析项目业务关系的时候，应用一些UML(Unified Modeling Language)图,例如常用的用例图(use case diagram)，类图(class diagram)，时序图(sequence diagram)等等,会有很大的帮助，这样能尽快找出业务逻辑主要面对的对象，然后对每个对象进行行为划分，最后再实现对象之间的集成和通信。 3、设计模式和框架结构 Java从语言角度来讲不是很难，但是从整体设计角度来讲我们还需要了解一些高级应用框架。如果要设计一个良好的框架结构，单单只掌握Java语言远远不够。这就涉及到一个设计模式，还有和设计模式相关的一些知识。
设计模式在Java项目实施过程更是重中之重。主要在与两层的设计模式、三层的设计模式和Ｎ层的设计模式。它直接决定着项目的应用、部署和实际开发设计。 在普通的WEB项目中很多采用两层的开发结构。JSP+Servlet或JSP+JavaBean。当对开发要求高的项目中使用很多的还是MVC的三层开发结构，也就是JSP+Servlet+JavaBean。它能分有效的分离逻辑开发，使开发人员能专注于各自的开发。同时也能时整个开发结构流程更清晰，但是需要比较高的开发配合度。 在项目中，我们经常使用著名的Model-View-Controller(MVC)架构。MVC架构是随着smalltalk language语言的发展提出的，它是一个著名的用户界面设计架构。经典的MVC架构把一个组件（可认为是整个应用程序的一个模块）划分成三部分组 Model管理这个模块中所用到的数据和业务逻辑。而View 管理模块如何显示给用户，Controller 决定如何处理用户和该模块交互式时候产生的事件 如用户点击一个按钮等。 4、XML语言 在服务器和设计模式结构中会应用到自定义文件，而且在应用高级设计时也会定义自用的标签，现在流行的是用XML去定义配置，所以XML语言应该有一定掌握。 当前，Java 2平台企业版（J2EE）架构在厂商市场和开发者社区中倍受推崇。作为一种工具，可扩展标记语言（XML）简化了数据交换、进程间消息交换这一类的事情，因而对开发者逐渐变得有吸引力，并开始流行起来。自然，在J2EE架构中访问或集成XML解决方案的想法也很诱人。因为这将是强大系统架构同高度灵活的数据管理方案的结合。
XML的应用似乎是无穷无尽的，但它们大致上可以分为三大类： 1、简单数据的表示和交换（针对XML的简单API（SAX）和文档对象模型（DOM）语法解析，不同的文档类型定义（DTDs）和概要（schemas）） 2、用户界面相关、表示相关的上下文（可扩展样式表语言（XSL），可扩展样式表语言转换（XSLT）） 3、面向消息的计算（XML-RPC（远程过程调用），基于SOAP协议的Web 服务（Web Services），电子化业务XML（ebXML）） 5、网页脚本语言 为了提高WEB项目的整体性能，提高人机交互的友好界面，网页的脚本语言是很有用处的，有的时候可以解决很大的难题或提高程序的性能和应用性。 网页脚本语言的执行都是在客户端执行的，速度很很快，并且大多的操作与服务器没有交互运算，所以在一些应用中非常理想。在设计WEB项目的应用中，网页的脚本语言起着不能忽视的作用，所以如果设计WEB项目的应用中，对JavaScript应有一定的了解。 JavaScript是一种基于对象(Object Based)和事件驱动(Event Driven)并具有安全性能（Secure）的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它具有以下几个基本特点：
1.它是一种脚本编写语言
JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。 它的基本结构形式与C、C++、VB十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。 2. 基于对象的语言。
JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。 3.简单性
JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。 4.安全性
JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。 5. 动态性
JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 6、开发工具
（1）、数据库
在主要的应用中，数据库相关的环节应用很多，所以对数据库应该有一定了解。不能单单只了解一种数据库，因为在很多实际开发中会提出很多数据库解决方案，所以只有在了解多种数据库的情况下才能有一个比较方案。
对于数据库应该了解他的性能和一些基本的操作常识，还有该数据库的特点。而针对与Java语言WEB项目的数据库开发则主要是对JDBC的应用，还有数据库事务处理和连接池等高级概念的应用。
（2）、Web服务器
同数据库一样，应该了解该服务器的性能，特点和一些常识。
在应用方面，Web服务器主要是针对于配置和部署，对目录的配置，调试；对配置文件属性的修改；对访问权限和并发性的控制；Java类的部署等。
（3）、集成开发环境（IDE）： “公欲善其事， 必先利其器”. 对于Web应用开发人员来讲，好的集成开发环境（IDE：Integrated Development Enviroment）是非常重要的。目前在市场上占主导位置的一个集成开发工具就是Eclipse. (转载文章请保留出处：Java家(www.javajia.com))07/07/2006 值得收藏的一些代码1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取、防止复制 3. onpaste="return false" 不准粘贴 4. oncopy="return false;" oncut="return false;" 防止复制 5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标 6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标 7. <input style="ime-mode:disabled"> 关闭输入法 8. 永远都会带着框架 <script language="javascript"><!-- if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页 // --></script> 9. 防止被人frame <script LANGUAGE=javascript><!-- if (top.location != self.location)top.location=self.location; // --></script> 10. <noscript><iframe src=*.html></iframe></noscript> 网页将不能被另存为 11. <input type=button value=查看网页源代码 onclick="window.location = ’view-source:’+ ’http://www.csdn.net/’"> 12. 怎样通过asp的手段来检查来访者是否用了代理 <% if Request.ServerVariables("HTTP_X_FORWARDED_FOR"<>"" then response.write "<font color=#FF0000>您通过了代理服务器，"& _ "真实的IP为"&Request.ServerVariables("HTTP_X_FORWARDED_FOR" end if %> 13. 取得控件的绝对位置 //javascript <script language="javascript"> function getIE(e){ var t=e.offsetTop; var l=e.offsetLeft; while(e=e.offsetParent){ t+=e.offsetTop; l+=e.offsetLeft; } alert("top="+t+"\nleft="+l); } </script> //VBscript <script language="VBscript"><!-- function getIE() dim t,l,a,b set a=document.all.img1 t=document.all.img1.offsetTop l=document.all.img1.offsetLeft while a.tagName<>"BODY" set a = a.offsetParent t=t+a.offsetTop l=l+a.offsetLeft wend msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置" end function --></script> 14. 光标是停在文本框文字的最后 <script language="javascript"> function cc() { var e = event.srcElement; var r =e.createTextRange(); r.moveStart(’character’,e.value.length); r.collapse(true); r.select(); } </script> <input type=text name=text1 value="123" onfocus="cc()"> 15. 判断上一页的来源 asp: request.servervariables("HTTP_REFERER" javascript: document.referrer 16. 最小化、最大化、关闭窗口 <object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Minimize"></object> <object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Maximize"></object> <OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> <PARAM NAME="Command" value="Close"></OBJECT> <input type=button value=最小化 onclick=hh1.Click()> <input type=button value=最大化 onclick=hh2.Click()> <input type=button value=关闭 onclick=hh3.Click()> 本例适用于IE 17. <% ’定义数据库连接的一些常量 Const adOpenForwardOnly = 0 ’游标只向前浏览记录，不支持分页、Recordset、BookMark Const adOpenKeyset = 1 ’键集游标，其他用户对记录说做的修改将反映到记录集中，但其他用户增加或删除记录不会反映到记录集中。支持分页、Record set、BookMark Const adOpenDynamic = 2 ’动态游标功能最强，但耗资源也最多。用户对记录说做的修改，增加或删除记录都将反映到记录集中。支持全功能浏览(ACCESS 不支持)。 Const adOpenStatic = 3 ’静态游标，只是数据的一个快照，用户对记录说做的修改，增加或删除记录都不会反映到记录集中。支持向前或向后移动 Const adLockReadOnly = 1 ’锁定类型，默认的，只读，不能作任何修改 Const adLockPessimistic = 2 ’当编辑时立即锁定记录，最安全的方式 Const adLockOptimistic = 3 ’只有在调用Update方法时才锁定记录集，而在此前的其他操作仍可对当前记录进行更改、插入和删除等 Const adLockBatchOptimistic = 4 ’当编辑时记录不会被锁定，而更改、插入和删除是在批处理方式下完成的 Const adCmdText = &H0001 Const adCmdTable = &H0002 %> 18. 网页不会被缓存 HTM网页 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 或者<META HTTP-EQUIV="expires" CONTENT="0"> ASP网页 Response.Expires = -1 Response.ExpiresAbsolute = Now() - 1 Response.cachecontrol = "no-cache" PHP网页 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"; header("Cache-Control: no-cache, must-revalidate"; header("Pragma: no-cache"; 19. 检查一段字符串是否全由数字组成 <script language="javascript"><!-- function checkNum(str){return str.match(/\D/)==null} alert(checkNum("1232142141") alert(checkNum("123214214a1") // --></script> 20. 获得一个窗口的大小 document.body.clientWidth,document.body.clientHeight 21. 怎么判断是否是字符 if (/[^\x00-\xff]/g.test(s)) alert("含有汉字"; else alert("全是字符"; 22.TEXTAREA自适应文字行数的多少 <textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"> ; </textarea> 23. 日期减去天数等于第二个日期 <script language=javascript> function cc(dd,dadd) { //可以加上错误处理 var a = new Date(dd) a = a.valueOf() a = a - dadd * 24 * 60 * 60 * 1000 a = new Date(a) alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日" } cc("12/23/2002",2) </script> 24. 选择了哪一个Radio <HTML><script language="vbscript"> function checkme() for each ob in radio1 if ob.checked then window.alert ob.value next end function </script><BODY> <INPUT name="radio1" type="radio" value="style" checked>style <INPUT name="radio1" type="radio" value="barcode">Barcode <INPUT type="button" value="check" onclick="checkme()"> </BODY></HTML> 25.获得本页url的request.servervariables(""集合 Response.Write "<TABLE border=1><!-- Table Header --><TR><TD><B>Variables</B></T D><TD><B>value</B></TD></TR> ;" for each ob in Request.ServerVariables Response.Write "<TR><TD>"&ob&"</TD><TD>"&am p;Request.ServerVariables(ob)&"</TD></TR>" next Response.Write "</TABLE>" 26. 本机ip<%=request.servervariables("remote_addr"%> 服务器名<%=Request.ServerVariables("SERVER_NAME"%> 服务器IP<%=Request.ServerVariables("LOCAL_ADDR"%> 服务器端口<%=Request.ServerVariables("SERVER_PORT"%> 服务器时间<%=now%> IIS版本<%=Request.ServerVariables"SERVER_SOFTWARE"%> 脚本超时时间<%=Server.scriptTimeout%> 本文件路径<%=server.mappath(Request.ServerVariables("script_NA ME")%> 服务器CPU数量<%=Request.ServerVariables("NUMBER_OF_PROCESSORS" %> 服务器解译引擎<%=scriptEngine & "/"& scriptEngineMajorVersion &"."&scriptEngineMinorVersion&"."& scriptEngineBuildVersion %> 服务器操作系统<%=Request.ServerVariables("OS"%> 27.ENTER键可以让光标移到下一个输入框 <input onkeydown="if(event.keyCode==13)event.keyCode=9"> 28. 检测某个网站的链接速度： 把如下代码加入<body>区域中: <script language=javascript> tim=1 setInterval("tim++",100) b=1 var autourl=new Array() autourl[1]="www.njcatv.net" autourl[2]="javacool.3322.net" autourl[3]="www.sina.com.cn" autourl[4]="www.nuaa.edu.cn" autourl[5]="www.cctv.com" function butt(){ document.write("<form name=autof>" for(var i=1;i<autourl.length;i++) document.write("<input type=text name=txt"+i+" size=10 value=测试中……> =》<input type=text name=url"+i+" size=40> =》<input type=button value=GO onclick=window.open(this.form.url"+i+".value)><br/> " document.write("<input type=submit value=刷新></form>" } butt() function auto(url){ document.forms[0]["url"+b].value=url if(tim>200) {document.forms[0]["txt"+b].value="链接超时"} else {document.forms[0]["txt"+b].value="时间"+tim/10+"秒"} b++ } function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1 onerror=auto(’http://";;+autourl+"’)>"} run()</script> 29. 各种样式的光标 auto ：标准光标 default ：标准箭头 hand ：手形光标 wait ：等待光标 text ：I形光标 vertical-text ：水平I形光标 no-drop ：不可拖动光标 not-allowed ：无效光标 help ：?帮助光标 all-scroll ：三角方向标 move ：移动标 crosshair ：十字标 e-resize n-resize nw-resize w-resize s-resize se-resize sw-resize 书写高效的CSS效率有什么用？
CSS 被吹捧的好处之一就是它能减小页面大小，由此缩短下载时间，不仅仅是首页的载入，还包括样式表被缓存以后，后续页面的载入也被加快了的那部分时间。这没错，但首页载入时间的缩短几乎看不出来，这是因为 CSS 代码往往过于冗长了。 好吧，现在一切都不同了。学点高效地进行 CSS 编码的技巧吧，让你把样式表马上裁减到最小为止。自然，你可能看不到什么惊人的改变，但对于大站来说，微小的字节减少也很重要。 有很多地方可以减少代码的长度，包括 简记属性 (shorthand properties)， 多重声明 (multiple declarations)，默认值 (default values)， 继承 (inheritance)，和空白 (white space)。 简记属性 Zeroing page margins 提到了一组这样的简记属性，但对于此还有更多的。 通常简记属性包括： background 和 list-style 属性也是如此。现在还剩下关于 CSS 盒 (box) 模型 四边的那些属性和一点没法归类的杂碎了。 盒侧边的简记属性 任何块级 (block level) 元素 (像 div，表格，列表，段落等) 的四边都有 边白 (margin)，边界 (border)，和 补白 (padding)，都可以分别设置不同的宽度。对于边界 (border) 来说，还能给每边分配不同的 border-style 和 border-color 。若要一条条地显式地指明所有这些属性，代码就会变得很冗长。使用简记规则的意义正在于此：彻底地减少这样负担。 “钟面” 然而很有可能某一侧需要一个不同的值，这时 CSS 的“钟面”特性就上台了。把此处的盒子想象为一个钟面，当指针指向 12 点时，表示盒子的正上方，这就是简记属性中第一个值的含义；下一个是 3 点，这是盒子的右侧；接下来是 6 点，表示盒子的下方；最后呢是 9 点，盒子的左侧。 让我们看看这个例子吧。在页面中我们需要一个 10px 上边白，5px 右边白， 3px 下边白，无左边白的盒子。则 margin 简记属性应该这么写： 为什么零宽度的边白就不需要指定单位了呢？因为零个任何单位 (px, em, %, 等等) 的值也就等于任意其他单位的值。 改进的钟面 当某些值重复时，这些“盒侧”属性还能压榨得更短。前面提到过，若各侧都一样，可以只指定一个，让它应用到全部。而一旦顶部和底部的样式是一致的，左侧和右侧却是另一种，margin 的代码可以这么写： 边界 (border) 的一些区别 同样的钟面简记模型也可以用于 border 简记属性 和 padding。 border-width , border-color , border-style , 与 padding 也采用和 margin 一样的方式工作。然而处理 border 属性时却有点不同。 border 属性是同时给盒子的各侧设置 border-width, border-style, 及 border-color 属性的。 如果所有四侧的样式都一样，那当然不会有什么问题。可万一他们不同呢？我们还得回去用那些老式的 border-top, border-right 们？没错，是可以。但幸好我们还有更有效率一点的方法。 考虑我们这个盒子的各个边界有同样的 style 和 color，但宽度不同的情况，最有效的方法是，先像往常一样用 border 简记法来定义好 border-width, border-style, 和 border-color；然后再设置一次 border-width 属性，覆盖上面设置的宽度： 下面我们看看在另一种情形下书写高效的 CSS 会带来什么改变。 多重声明 考虑我们有 6 个采用绝对定位的 div (比如 Dreamweaver 里的层)，且它们的其他属性都一样，只不过在页面中的位置不同。因为它们的位置不同，自然应该有不同的 ID 或者是 class，但剩下的属性还是一样的。 一个 (所见即所得的) 布局编辑器恐怕给每个 ID 都各自写一套属性，包括字体的规则、文本的规则、位置的定义等等。可一遍遍地给这些 div 重复完全一样的规则未免笨了点，不是么？那这样就可以把这些规则减到最短了： 注意：注意最后一个 ID 选择符 并没有 跟着一个逗号。(若多了逗号) 有些浏览器中可能还能看到那些 div，另一些就有可能把这样的样式表视为错误而不显示任何一个 div 了。 默认值 许多 CSS 属性都有它们的默认值，如果这个属性没被定义取代，它们就将应用于 HTML 元素上。比如说每个补白属性中， padding-top , padding-right , padding-bottom , 和 padding-left 的初始值都是 0 。因此如果某个元素不需要任何的补白，自然就可以不设置补白的那些属性了。 注意： 那些简记属性——比如我们先前讨论过的—— 里面，或者其本身都没有什么默认的值。毕竟简记属性其实只是独立属性的一种重现而已，所以如果硬说它们有默认值的话，采用的也是独立属性的那些默认值。尽管 CSS 规范的 Property Index 一节中规定的许多默认值都是 none 或 0 ，浏览器们却往往给不同的属性设置一些不同的默认值。 例：Opera 浏览器给 body 元素设置了 8px 的补白。h1-h6 标题和段落，默认都有非零的边白。列表和列表子项中用到的默认边白和补白，每个浏览器都有所不同。 继承 另一个避免写出冗余代码的方法是，了解哪些属于父元素的属性会由子元素继承下来。会被继承的属性只有很少一些，而且其中大部分是不常用的，比如 voice-family 。所以列个能继承的常用属性的表，其实是很短的，下面就是按字母顺序排出的： 空白 关键是，如果把它们都删除了，CSS 文件就会变得非常难读，更难修改。要是你真的打算这么做，不妨创建一个主 CSS 文件，再根据它生成一个删除了所有空白的副本，修改的时候只修改主文件，根据主文件重新生成一次副本就行了。 请注意，CSS 编码中需要一些空白，删除那些必要的会导致你未曾预料的问题。如果 W3C 规范中用了 "space separated" 这样的语句，那么空格就不可省略。常见的像简记属性中分隔值的那些空格，还有 下降合并符 (descendant combinator)，或者称为下降选择符，就是一个空格。所以说不到非用不可的时候，删除空白这样的方法还是少用。 完结 你现在学会了好几种让你的样式表更高效的方法，益处是在这些技巧下，不仅下载时间被减少了，而且清晰、易于理解、更改的代码随之而来。就算你用排版工具来编辑样式表，也可以在最后用这些方法将其改定为高效的样子。 CSS布局入门CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。 1.定义DIV分析一个典型的定义div例子： #sample{ MARGIN: 10px 10px 10px 10px;PADDING-LEFT: 20px; PADDING-TOP: 20px; PADDING-RIGHT: 10px; PADDING-BOTTOM: 10px; BORDER-RIGHT: #CCC 2px solid; BORDER-BOTTOM: #CCC 2px solid; BORDER-LEFT: #CCC 2px solid; BORDER-TOP: #CCC 2px solid; BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; COLOR: #666; TEXT-ALIGN: center; LINE-HEIGHT: 150%; WIDTH:60%; } 说明如下：
下面是这个层的实际表现: 这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容， 这里是演示内容，这里是演示内容， 这里是演示内容，这里是演示内容， 这里是演示内容...我们可以看到边框是2px的灰色，背景图片在右下没有重复，内容距离上和左边框20px，内容居中，一切和预想的一样。hoho，虽然不好看，但它是最基本的，掌握了它，你就已经学会一半的CSS布局技术了。就是这样，不算难吧！(另一半是什么？另一半是层与层之间的定位。我会在后面逐步讲解。) 2.CSS2盒模型自从1996年CSS1的推出，W3C组织就建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层<div>。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。上面我们讲的sample层就是一个典型的盒。对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。 
3.辅助图片一律用背景处理用XHTML+CSS布局，有一个技术一开始让你不习惯，应该说是一种思维方式与传统表格布局不一样，那就是：所有辅助图片都用背景来实现。类似这样： BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;尽管可以用<img>直接插在内容中，但这是不允许的。这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。例如：相册中的图片、图片新闻中的图片，上面的3d盒模型图片都属于内容的一部分，它们可以用<img>元素直接插在页面里，而其它的类似logo，标题图片，列表前缀图片都必须采用背景方式或者其他CSS方式显示。 这样做的原因有2点：
WEB标准WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准： 1．结构标准语言（1）XML XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。 （2）XHTML XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http://www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。 2. 表现标准语言CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。 3.行为标准（1）DOM DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http://www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。 (2) ECMAScript ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。 XHTML代码规范在开始正式内容制作之前，我们必须先了解一下web标准有关代码的规范。了解这些规范可以帮助你少走弯路,尽快通过代码校验。 1.所有的标记都必须要有一个相应的结束标记以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如: <br /><img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" />2.所有标签的元素和属性的名字都必须使用小写与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。 3.所有的XML标记都必须合理嵌套同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码： <p><b></p>/b>必须修改为： <p><b></b>/p>就是说，一层一层的嵌套必须是严格对称。 4.所有的属性必须用引号""括起来在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如: <height=80>必须修改为： <height="80">特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如： <alt="say'hello'">5.把所有<和&特殊符号用编码表示
注：以上字符之间无空格。 6.给所有属性赋一个值XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如： <td nowrap> <input type="checkbox" name="shirt" value="medium" checked>必须修改为： <td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">7.不要在注释内容中使“--”“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的: <!--这里是注释-----------这里是注释-->用等号或者空格替换内部的虚线。 <!--这里是注释============这里是注释-->以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。 弹性设计CSS要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 像素是计算机屏幕上的不可缩放的点，而一个 em 就是一个字大小的方块。由于字体大小的变化， em 代表用户喜欢的文字大小的相对单位。 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 为了理解弹性设计，我们必须首先来看看一个似乎与此无关的问题 - 指定文字大小的几种方式。 弹性文本 显然文字是最容易实现的弹性设计的。能够设定喜欢的文字大小是用户最常见的要求，因此不可忽视。 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 em 存在的问题 Em 似乎是进行文字相对大小设定时的单位，浏览器默认的文字高度是16像素，对大多数设计者来说太大了，不合他们的口味。要使用 em，设计者一般将文字的初始大小设为小于 1em。 例如： body { font-size: 0.8em; } h1 { font-size: 2em; } p { font-size: 1em; } 看起来似乎可行，但有一个问题 - 如果你在 IE 中将“文字大小”设为“较小”或“最小”，文字就会小得难以阅读。由于 IE 如此普及， em 似乎不是可行的选择。 Jeffrey Zeldman过去曾经对此表示质疑，他认为尽管有其不利之处，以像素指定文字大小还是比用 em 好。这个结论是根据 Owen Briggs 所作的深入研究得出的。 Owen Briggs 测试了264种不同的文字缩放方法并演示了 em 之类的相对单位行不通。许多设计人员现在都用像素为单位指定文字大小，不是出于精确控制网页外观的需要，而是似乎没有更为合理的其他选择。 如此看来，要么是难看的大字体，要么无法缩放，好像无法两全。别着急，接着读下去。 一种“大字体”后备样式 在与无法缩放的像素所带来的亲和力问题的战斗中，许多作者在他们的网页上使用了一种后备样式表的技术，可通过网页上的一个链接进行切换。 这种方法固然不错，但是如果和相对文字大小的措施（比如Wired News所提到的）一起使用，效果会更好。不能指望用户熟悉你的特有界面，用户一般对浏览器的界面更为熟悉，如果他们想看大一点的字体，更倾向于用浏览器来达到而不是用你的界面。而且他们更期望这种方法在各个网站都管用，不想每访问一个网站都改变一次。，比如Wired News CSS 关键词 Font-size 的关键词(xx-small, medium, x-large,等等)好像就是答案。在 IE 中，当用户选择“较大”或“最大”时文字会变大，选择“较小”或“最小”时文字会变小，一直到合适的大小。与其他的弹性设计方法不同，使用关键字的好处是当对文字进行缩放时，永远不会使文字实际像素大小低于某个值，所以无论用户如何选择文字大小，都应当有良好的可读性。 在 ALA 的其他地方对关键字有更详尽的解说，这种方法的最好的示例也许就是你正在阅读的这篇文章。（在最近一次的改版之前，ALA 使用了后备的“大字体”样式切换，一个样式表使用像素指定文字大小，另一个用的是基于关键字的相对大小方法。） 百分比使得 em 可行 Em 之所以可行是因为通过设定初始文字的百分比，可以很容易避免文字过小的问题。虽然其原理并非显而易见，但的确可行。当采用这种方案时，IE 文字大小各档设置之间的间隔就不会显得生硬，设计者可以精确设置初始文字大小，使得在“较小”和“最小”时仍然得到较好的可读性。这样有使 em 有了用武之地。（甚至于 Briggs 现在也更认同 em.） 例如： body { font-size: 80%; } h1 { font-size: 2em; } p { font-size: 1em; } 不用关键字而采用 em 的好处是你可以用 em 来指定全部布局的尺寸，它可以随着文字的大小按比例缩放。 弹性布局 对设计者来说，比弹性字体更困难的是彻底的相对布局 - 如果用 em 来设定布局的尺寸事情就容易了。 让布局具有弹性，使之随着用户改变文字大小时自动适应，这好像有些多余甚至毫无必要。但是既然你让文字可以伸缩，那么让包容文字的布局也随之伸缩也是顺理成章的事。 另外，如果用户选择了较大的字体，则周围的空间应当会随之按比例增加，保持了“设计者”选择的比例，使文章容易阅读。 这种方案的另一个好处是可以避免不希望的文字换行。如果一个窄的栏目宽度以像素来定义，当其中的文字变大时，可能会打乱整个布局。采用文字大小比例来指定栏目宽度就可避免这个问题。 关于该方案的一个例子请看 CSS Zen Garden 上的作品 Elastic Lawn。 太宽了！ 将网页的初始文字大小指定为 100% 以后，在 IE 的“中等”字体下，36em 的宽度应该是 576 个像素（作为参考，ALA 的宽度为600个像素），在“最大”的字体下，36em 应当增加到 768 个像素（Windows 下 IE 6 的测试结果）。如果再大一点，在 800 像素宽的屏幕、“最大”号字体下就可能会显得太宽了。 CSS 对这个问题的解决方案是 max-width 属性，它可以指定某个元素的最大宽度。不幸的是 Internet Explorer 不支持（不知有谁想过没有？）。 另一个解决方案就是采用流动式布局，也就是说根本不指定内容区域的宽度，让文字自然流动，充满屏幕宽度（HTML Dog采用了这种方案）。许多人不接受这种方案，因为在宽屏幕下的可读性不好，但对于移动设备这样的小屏幕非常合适。 如果你准备采用弹性布局方案，在指定边界或者位图之类的由像素构成的对象时，仍然要以像素为单位，这可能会和基于文字大小关系发生冲突；但这不应成为不采用弹性布局的理由。 使图形弹性化 用相对大小来设置位图的尺寸会导致灾难性的后果。对付这个问题可以这样做 - 维持图形原有的解析度不变，将它裁剪到合适的大小。 通过更换背景图片可以就可做到。这里是一个标题元素的例子，你也可以采用其他的图片替换技术： h1 { font-size: 1em; width: 10em; height: 100px; text-indent: -1234em; background-image: url(whatever.jpg); } 或者（正如hebig.org 和 v-2.org所做的那样），你可以将图片包含在一个容器，比如一个有下面样式的 DIV 中: div { width: 10em; overflow: hidden; } 本文中提到的许多弹性设计方法都可以在demonstration page中看到。 网页文字颜色的搭配技巧对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。 一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。下面是我做网页和浏览别人的网页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定会有不错的效果，希望对大家在制作网页时有用。
浅绿色底配黑色文字，或白色底配蓝色文字都很醒目，但前者突出背景，后者突出文字。红色底配白色文字，比较深的底色配黄色文字显得非常有效果。 此文只是起一个“抛砖引玉”的作用，大家可以发挥想象力，搭配出更有新意、更醒目的颜色，使网页更具有吸引力。 |
BgcolorΚ″＃F1FAFA″———做正文的背景色好，淡雅
BgcolorΚ″＃E8FFE8″———做标题的背景色较好
BgcolorΚ″＃E8E8FF″———做正文的背景色较好，文字颜色配黑色
BgcolorΚ″＃8080C0″———上配黄色白色文字较好
BgcolorΚ″＃E8D098″———上配浅蓝色或蓝色文字较好
BgcolorΚ″＃EFEFDA″———上配浅蓝色或红色文字较好
BgcolorΚ″＃F2F1D7″———配黑色文字素雅，如果是红色则显得醒目
BgcolorΚ″＃336699″———配白色文字好看些
BgcolorΚ″＃6699CC″———配白色文字好看些，可以做标题
BgcolorΚ″＃66CCCC″———配白色文字好看些，可以做标题
BgcolorΚ″＃B45B3E″———配白色文字好看些，可以做标题
BgcolorΚ″＃479AC7″———配白色文字好看些，可以做标题
BgcolorΚ″＃00B271″———配白色文字好看些，可以做标题
BgcolorΚ″＃FBFBEA″———配黑色文字比较好看，一般作为正文
BgcolorΚ″＃D5F3F4″———配黑色文字比较好看，一般作为正文
BgcolorΚ″＃D7FFF0″———配黑色文字比较好看，一般作为正文
BgcolorΚ″＃F0DAD2″———配黑色文字比较好看，一般作为正文
BgcolorΚ″＃DDF3FF″———配黑色文字比较好看，一般作为正文|
|
