HTML-加速、再加速

作者:听风    文章来源:eNet技术学院

web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度?答案是:不一定!实际上,有许多关于HTML与DHTML方面的技巧,它们原理简单而且上手容易。无论是技术高超的老手,还是初涉编程的菜鸟,领会这些都十分必要。

明显HTML,暗渡“公用脚本”

减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时,就可以考虑将这些公用部分单独分离出来。比如:我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.js文件,然后再在页面中按如下方式调用它:

<script src=”myfile.js”></script>

这样,公用文件只需要下载一次,然后就进入缓冲区。等下次再次调用包含公用文件的html页面时,下载时间明显减少。

让样式表内容进入地下工作

CSS是HTML装扮器,一个漂亮的Web页面不可能没有它。HTML页面中有多种引用CSS的方法,不同的方法导致的效率也不一样。通常,我们可以将定义于<style></style>间的样式控制代码提取出来,保存到单独的.css文件中,然后在HTML页面中以<LINK>标记或者@import标记的方式进行引用:

<style>
@import url(“mysheet1.css”);
</style>
<link rel=Stylesheet href=”mysheet2.css”>

请注意2点:1、.css文件中无需包括<style>标记;2、@import和LINK标记要定义在HTML页面的HEAD部分。

宝贵内存节省两法

尽量减少HTML页面占用的内存空间是加快页面下载速度的一个有效方法。在这方面,有2个需要注意的问题:

1、使用同一种脚本语言

HTML页面离不开脚本程序的支持,我们经常会在页面中嵌入多种脚本语言,比如javascript与VBScript。但是,不知你发觉没有:这样的混合使用减慢了页面的访问速度。原因在于:要解释并运行多种脚本代码,就必须在内存中装载多种脚本引擎。所以,请尽量在页面中使用同一种脚本语言编写代码。

2、巧用IFrame

你使用过<IFRAME>标记吗?它可是一个非常美妙的功能。如果要在一个HTML文档中包含第2个页面的内容,通常的方法是使用<FRAMESET>标记。但是有了<IFRAME>,一切变得简单了。比如,开发一个文档预览页面,可以在左边放置一系列主题,在右边放置一个IFRAME,其中包含要预览的文档;当鼠标掠过左边的每一个主题链接时,就在右边建立一个新的IFRAME以预览文档。这样做,代码效率无疑是高效的,但同时导致了繁重的处理过程,最终是缓慢的速度。

没关系,我们有办法:只使用单一的IFRAME。当鼠标指向一个新主题时,只需要修改IFRAME元素的SRC属性即可。这样,任何时间内只会有一个预览文档保留在内存。

择优选用动画定位属性

每天上网浏览页面,你一定会看到许多动画效果。比如,一个可爱的小兔子在页面上来回地走动 … 实现这个效果的核心技术就是CCS定位。通常,我们是使用element.style.left和element.style.top2个属性来达到图形定位的目的。但是,这样做会产生一些问题:left属性返回一个字符串,并且其中包含了度量单位(比如100px)。因此,要设定新的位置坐标,就必须首先对这个字符串返回值进行处理,然后才能赋值,象下面一样:

dim stringLeft, intLeft

stringLeft = element.style.left

intLeft = parseInt(stringLeft)

intLeft = intLeft + 10

element.style.left = intLeft;

你一定会感觉做这么点事情竟要编写这么复杂的代码,是否有更简洁的方法?当然有!请看这4个属性:posLeft、posTop、posWidth

和 posHeight,它们对应于相应字符串返回值的点数数值。好了,使用这些属性重新编写代码实现上面代码实现的功能:

element.style.posLeft += 10

代码短小、速度却更快!

循环控制多个动画

说到制作动画效果,当然离不开定时器的运用。通常的方法就是使用window.setTimeout来不断地定位页面上的元素。但是,如果页面上有多个动画要显示,是不是就要设定多个定时器呢?答案是No!原因很简单:定时器功能将消耗掉大量宝贵的系统资源。可是我们仍能在页面上控制多个动画,技巧就是使用一个循环。在循环中根据不同的变量值控制相应动画的位置,整个循环中只使用一个window.setTimeout()函数调用。

Visibility快于Display

让图画时隐时现会创造很有趣的效果,有2种方法可以实现这个目的:使用CSS的visibility属性或者display属性。对于绝对位置元素,diaplay和visibility具有同样的效果。两者的区别在于:设置为display:none的元素将不再占用文档流的空间,而设置为visibility:hidden的元素仍然保留原位置。

但是如果要处理绝对位置的元素,使用visibility会更快。

从小处着手

编写DHTML网页的一个重要提示是:从小处着手。初次编写DHTML页面时,一定不要试图在页面中使用你了解到的全部DHTML功能。每次可以只使用一个单一的新特征,并且仔细地观察由此产生的变化。如果发现性能有所下降,就可以快速地找到为什么。

脚本的DEFER化

DEFER是脚本程序强大功能中的一个“无名英雄”。你可能从没有使用过它,但是看完这里的介绍后,相信你就离不开它。它告诉浏览器Script段包含了无需立即执行的代码,并且,与SRC属性联合使用,它还可以使这些脚本在后台被下载,前台的内容则正常显示给用户。

<SCRIPT DEFER>
function UsedLater()
{
// 用户与页面交互操作时才使用到的函数
}
</SCRIPT>

<SCRIPT>
// 立即要执行的脚本程序
document.write(“<H1>Immediate Gratification</H1>”);
</SCRIPT>

最后请注意两点:

1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。

2、而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

保持同一URL的大小写一致性

我们都知道UNIX服务器是大小写敏感的,但是你知道吗:Internet Explorer的缓冲区也是区别对待大小写字符串的。因此,作为web开发者,一定要记住保持相同链接的URL字符串在不同位置的大小写的一致性。否则,就会在浏览器的缓冲区中存放同一位置的不同文件备份,也增加了下载同一位置内容的请求次数。这些都无疑降低了web访问效率。所以请谨记:同一位置的URL,在不同页面中请保持URL字符串的大小写一致性。

让标记有始有终

自己编写或者查看他人的HTML代码时,我们一定都遇到过标记有头无尾的情况。比如:

<P>有头无尾标记举例
<UL>
<LI>第一个
<LI>第二个
<LI>第三个
</UL>

很明显,上面的代码中缺少三个</LI>结束标记。但是这并不妨碍它的正确执行。在HTML中,这样的标记还有一些,例如FRAME、IMG和P。

可是请不要偷懒,请将结束标记写完整,这样做不仅使HTML代码格式规范,更可以加速页面的显示速度。因为Internet Explorer将不会花费时间判断和计算段落或者列表项目在哪里结束。

<P>有头有尾标记举例</P>
<UL>
<LI>第一个</LI>
<LI>第二个</LI>
<LI>第三个</LI>
</UL>

OK,以上列举了有关加速HTML页面的10个处理技巧,描述这些很简单,但是只有真正领会并掌握其中的本质,并且举一反三,才会编写出更快、更好的程序。

使用wget下载整个网页

wget -r -p -k -np -t 5 http://hao.360.cn

 

 

虽然很好用,但是还是有不少局限性.

 

1. 不能解析CSS文件中 包含的图片信息 例如使用 @import 或者url等等导入的东西

 

2. 不能解析JS中动态写入的资源文件,对于Ajax载入的根本就无从弹起,可能模仿的不是http请求有关

 

3. 她是从取出来的数据流中去解析文件内引用的资源信息,而非使用Dom解析的方式来获取信息

 

4. 中文资源太少

 

优势:

 

1. 开源,免费 [切记: 开源 != 免费]

 

2. 实用,功能强劲 大多数系统平台上都有实现.

 

3. 可以与其他的工具无缝集成.通过PHP可以实现很多东西.我一般都是使用PHP来取代原始的shell脚本.

 

4. 单文件,很小. 可以作为自己的工具箱中的一员 

 

 

注意:

 

1. Wget1.5的windows版本不支持-p选项,我提供的这个版本是1.11.4,提供-p选项

 

block(块元素)、inline(内联元素)的差别

来源:http://www.52css.com/article.asp id=227

block(块元素)、inline(内联元素)的差别是什么

block元素的特点:

Example Source Code [www.52css.com]

  总是在新行上开始;

  高度,行高以及顶和底边距都可控制;

  宽度缺省是它的容器的100%,除非设定一个宽度。

  inline元素的特点:

Example Source Code [www.52css.com]

  和其他元素都在一行上;

  高,行高及顶和底边距不可改变;

  宽度就是它的文字或图片的宽度,不可改变。

  我们来详细了解它们的情况。

  块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签’P”。“form”这个块元素比较特殊,它只能用来容纳其他块元素。

  如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障碍者、盲人等)的角度来看这两种布局,除了页面载入速度的差别外,没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后,两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码,至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说,css layout code应该有更好的美学体验。

  你能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。

  内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”。

  需要说明的是:inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

  块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。

  可变元素是基于以上两者随环境而变化的,它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。

  html标签的block、inline分类明细:

  块元素(block element)

Example Source Code [www.52css.com]

  ◎ address – 地址

  ◎ blockquote – 块引用

  ◎ center – 举中对齐块

  ◎ dir – 目录列表

  ◎ div – 常用块级容易,也是css layout的主要标签

  ◎ dl – 定义列表

  ◎ fieldset – form控制组

  ◎ form – 交互表单

  ◎ h1 – 大标题

  ◎ h2 – 副标题

  ◎ h3 – 3级标题

  ◎ h4 – 4级标题

  ◎ h5 – 5级标题

  ◎ h6 – 6级标题

  ◎ hr – 水平分隔线

  ◎ isindex – input prompt

  ◎ menu – 菜单列表

  ◎ noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容

  ◎ noscript – 可选脚本内容(对于不支持script的浏览器显示此内容)

  ◎ ol – 排序表单

  ◎ p – 段落

  ◎ pre – 格式化文本

  ◎ table – 表格

  ◎ ul – 非排序列表

  内联元素(inline element)

Example Source Code [www.52css.com]

  ◎ a – 锚点◎ abbr – 缩写

  ◎ acronym – 首字

  ◎ b – 粗体(不推荐)

  ◎ bdo – bidi override

  ◎ big – 大字体

  ◎ br – 换行

  ◎ cite – 引用

  ◎ code – 计算机代码(在引用源码的时候需要)

  ◎ dfn – 定义字段

  ◎ em – 强调

  ◎ font – 字体设定(不推荐)

  ◎ i – 斜体

  ◎ img – 图片

  ◎ input – 输入框

  ◎ kbd – 定义键盘文本

  ◎ label – 表格标签

  ◎ q – 短引用

  ◎ s – 中划线(不推荐)

  ◎ samp – 定义范例计算机代码

  ◎ select – 项目选择

  ◎ small – 小字体文本

  ◎ span – 常用内联容器,定义文本内区块

  ◎ strike – 中划线

  ◎ strong – 粗体强调

  ◎ sub – 下标

  ◎ sup – 上标

  ◎ textarea – 多行文本输入框

  ◎ tt – 电传文本

  ◎ u – 下划线

  ◎ var – 定义变量

  可变元素

Example Source Code [www.52css.com]

    可变元素为根据上下文语境决定该元素为块元素或者内联元素。

  ◎ applet – java applet

  ◎ button – 按钮

  ◎ del – 删除文本

  ◎ iframe – inline frame

  ◎ ins – 插入的文本

  ◎ map – 图片区块(map)

  ◎ object – object对象

  ◎ script – 客户端脚本

CSS中expression使用简介CSS脚本[z]

http://www.zjboke.cn/Blog/article.asp id=27

定义 
  IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 

  给元素固有属性赋值

  例如,你可以依照浏览器的大小来安置一个元素的位置。

#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: expression(document.body.offsetWidth - 110 + "px");
top: expression(document.body.offsetHeight - 110 + "px");
background: red;
}

  给元素自定义属性赋值

  例如,消除页面上的链接虚线框。 通常的做法是:

<a href="link1.htm" onfocus="this.blur()">link1</a>
<a href="link2.htm" onfocus="this.blur()">link2</a>
<a href="link3.htm" onfocus="this.blur()">link3</a> 

  粗看或许还体现不出采用expression的优势,但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,何况两者一比较,哪个产生的冗余代码更多呢?

  采用expression的做法如下: 

<style type="text/css">
a {star : expression(onfocus=this.blur)}
</style>
<a href="link1.htm">link1</a>
<a href="link2.htm">link2</a>
<a href="link3.htm">link3</a> 

  说明:里面的star就是自己任意定义的属性,你可以随自己喜好另外定义,接着包含在expression()里的语句就是JS脚本,在自定义属性与expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非s cript内。OK,这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意,如果触发的特效是CSS的属性变化,那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改,你可能想当然的会认为应该写为 

<style type="text/css">
input 
{star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<style type="text/css">
input {star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<input type="text">
<input type="text">
<input type="text">

  可结果却是出现脚本出错,正确的写法应该把CSS样式的定义写进函数内,如下所示:

<style type="text/css">
input {star : expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
</style>
<input type="text">
<input type="text">
<input type="text"> 

  注意

  不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高。

Web开发的角色划分

Web开发经常把角色划分为界面开发人员(Designer)和程序设计人员(Developer)。我倒觉得两种角色由同一人担当开发效率更高。

1.        
DesignerDeveloper的交流成本太高。页面代码中充斥着静态HTML和服务器脚本,服务器脚本让HTML难以理解,经常让Designer很头疼,不得不反复与Developer交流。

2.        
Designer善于撰写HTML,但是不善于Clean CodeRefactoring。这就导致了最后形成的View层的HTML代码重复冗长,难以维护。现实是,Web开发的大部分工作量在表示层,难以理解,让人恶心的HTML大大增加了Web开发的成本。HTML代码也是代码,垃圾代码永远是项目的绊脚石。

3.        
一些HTML可以用DSL代替,DSL的撰写更应当由Developer来承担。XML格式的标签语言创建的初衷就是给机器读的,不是给人读的。称XML更容易让人理解的人绝对有病,每次我看见嵌套的XML标签时都想吐。自HTML创生以来,各大IDE厂商都试图减轻XML格式对人的负担,可惜都失败了,甚至会生成更加垃圾的HTML。易读易改的代码才是王道。于是一些HTMLDSL比如HAMLActiveForm诞生了。这些DSL的设计目的就是撰写表示层代码更加容易,无论对Developer还是Designer

并非Designer完全没有用武之地,Designer只要负责绘制效果图和一些Logo图片,也许还要有修改CSS的能力,然后由Developer实现HTML。只要严格按照Web标准开发,表示层可以清晰的划分为:StructureHTML),PresentationCSS),BehaviorJavaScript)。大部分的显示效果完全可以由CSS来实现,根本不用动HTML

问题是这种Developer需要比较全面地精通Web开发,难以聘用到。话又说回来,招不到精英就不要开公司,回家种田算了。If
you hire a sucker, you are a sucker.

css之ime-mode

css 之 ime-mode

语法:

ime-mode : auto | active | inactive | disabled

取值:

auto : 默认值。不影响ime的状态。与不指定 ime-mode 属性时相同

active : 指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime

inactive : 指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime

disabled : 完全禁用ime。对于有焦点的控件(如输入框),用户不可以激活ime

说明:

设置或检索是否允许用户激活输入中文,韩文,日文等的输入法(ime)状态。

此属性对于 currentstyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 imemode 。

示例:

input {ime-mode: auto; }

就是这样。所以当某个文本域不需要中文输入的时候,我们可以通过设置 ime-mode 属性值为 inactive 或者 disabled,减少错误的可能性。同样的我们可以设置那些需要中文输入的文本域的 ime-mode 属性值为 active。

通常C/S的业务系统,都会注意输入法的控制问题。开发基于B/S的业务系统,也一定会遇到同样问题,ime-mode相信可以帮上忙。不过 FireFox 并不支持这一样式单属性。

这是我做的一个例子:

<form action=”cgi-bin/aaa.cgi” method=”post”>

ID<br><input type=”text” name=”mail” size=”30″ style=”ime-mode: disabled;”><br>

名前<br><input type=”text” name=”name” size=”40″ style=”ime-mode: active;”><br>

メール<br><input type=”text” name=”mail” size=”40″ style=”ime-mode: inactive;”><br>

備考:<br><textarea name=”bikou” rows=”2″ cols=”40″ style=”ime-mode: auto;”>

</textarea><br>

<input type=”submit” value=”送信”><input type=”reset” value=”リセット”>

</form>

用JS脚本做一个可拖动的对话框

JS脚本做一个可拖动的对话框

左直拳

一、 可拖动

关键是能跟踪鼠标坐标的变化,从而不断修正对话框的坐标。

假设待移动的对话框为objMove,则有

pX = event.x – objMove.style.pixelLeft;

pY = event.y – objMove.style.pixelTop;

其中pixelLeftpixelTop是对话框左边缘、顶边缘与document左边缘、顶边缘的距离,event.xevent.y是鼠标按下(未松开)的坐标值。

因此可得到鼠标抓紧点与对话框边缘的坐标差pXpY。只要在鼠标移动过程中,保持这一坐标差恒定不变,月亮走我也走,鼠标送阿框到村口,即可实现对话框的拖动:

objMove.style.left = event.x – pX;

objMove.style.top = event.y – pY;

这只是原理,还需要一些函数进行支撑。

设置三个函数:

MDown()//鼠标按下时触发,得到pX,pY的值,放在对话框的onmousedown调用

MMove()//鼠标移动时触发,拖动,document.onmousemove

MUp()//鼠标松开时触发,释放,document.onmouseup,当然放在对话框的onmouseup调用也是可以的

注意这个对话框要用绝对定位。

二、 对话框内的文本框等可正常编辑

如果对话框内有文本框、下拉框等可供用户进行编辑的控件,如果不进行特别处理,则光标在这些控件内拖动同样会引起对话框的移动,这跟我们平时使用的习惯不符,给框内的编辑带来麻烦。

怎么办呢?

如果知道鼠标抓紧时落在哪种类型的控件上就好了。

嘿,这位老板,你好运了!可以用event.srcElement来获取这个控件

var hitpoint = event.srcElement;

if( hitpoint.tagName == “INPUT”

|| hitpoint.tagName == “TEXTAREA”

|| hitpoint.tagName == “SELECT” )

{

objMove = null;//不鸟它

return;

}

三、 半透明

这个对话框还要有点透明,拖动时下面的元素若隐若现,这样才让人够兴奋,浮想联翩。

主要是CSS里实现。style=”FILTER:alpha(opacity=90);position:absolute;left:60%;……

不过这好象在IE系的浏览器里才有用,对firefox这些则没效果。

附录:drag.js

var objMove = null;

var pX = 0;

var pY = 0;

document.onmouseup = MUp;

document.onmousemove = MMove;

function MDown(objMoveId)

{

var hitpoint = event.srcElement;

if( hitpoint.tagName == “INPUT”

|| hitpoint.tagName == “TEXTAREA”

|| hitpoint.tagName == “SELECT” )

{

objMove = null;

return;

}

objMove = document.getElementById(objMoveId);

if( objMove == null )

{

return;

}

objMove.style.cursor = “move”;

//objMove.setCapture();

pX = event.x – objMove.style.pixelLeft;

pY = event.y – objMove.style.pixelTop;

}

function MMove()

{

if(objMove != null)

{

objMove.style.left = event.x – pX;

objMove.style.top = event.y – pY;

}

}

function MUp()

{

if(objMove != null)

{

//objMove.releaseCapture();

objMove.style.cursor = “default”;

objMove = null;

}

}

在JSP中forward和redirect的实例应用

绝对路径与相对路径

如果咱们使用的URL网址是以“/”开头的,那么这个网址就叫做绝对路径。

如果咱们使用的URL网址不是“/”开头的,那么这个网址就叫做相对路径。

在相对路径上,两者的表现是相同的。

看看lingo-sample/03-03/这个例子,如果我们去请求relative/forward.jsp或redirect.jsp,然后从这里再跳转向它下面的result/result.jsp会怎样呢?

forward的例子:

<%request.getRequestDispatcher(“result/result.jsp”).forward(request, response);%>                        这里的相对路径就是result/result.jsp。

因为刚刚请求的test.jsp是在/03-03/relative/下,所以我们的当前路径就是/03-03/relative/,执行forward的时候会寻找当前路径下的result/result.jsp,找到之后便转发请求。

redirect的例子:

<%response.sendRedirect(“result/result.jsp”);%>                        这里的相对路径也是result/result.jsp。

因为刚刚请求的test.jsp是在/03-03/relative/下,所以我们的当前路径就是/03-03/relative/,执行redirect的时候会把当前路径加上result/result.jsp,把结果作为重定向的地址发送给浏览器,浏览器再去请求/03-03/relative/result/result.jsp,从而得到响应。

绝对路径
问题出现了,绝对路径在forward和redirect中出现了差别,还是刚才的情况,但使用绝对路径的时候写法便不同了。

forward的例子:

<%request.getRequestDispatcher(“/relative/result/result.jsp”).forward(request, response);%>这里的绝对路径就是/relative/result/result.jsp。在本地测试时,forward把http://localhost:8080/03-03/当作根路径,在它的基础上计算绝对路径。

这是由jsp的部署方式决定的,webapp里可以放好多项目,为了让这些项目可以互不影响、独立运行,不能让请求从一个项目直接在服务器内部转移到另一个项目。为了防止出现这种情况,在执行forward的时候干脆把项目的路径当作根目录,开发者看不到其他项目,也就不会出现问题了。

redirect的例子:

<%response.sendRedirect(“/03-03/absolute/result/result.jsp”);%>                        这里的绝对路径却是/03-03/absolute/result/result.jsp。

在本地测试时,redirect把http://localhost:8080/当作根路径,在它的基础上计算绝对路径。

因为redirect会让浏览器重新发起一个新请求,所以不会搅乱服务器里多个项目之间的关系,也就不需要对它做限制,如果需要在多个项目之间进行跳转,就只能使用redirect。不过因为重新发起了新的请求,上次请求的那些数据都会丢失,如果有什么重要的数据,记得要重新设置。
orward导致找不到图片
找不到图片,找不到js脚本,找不到css样式表,都属于这个问题。

要演示这个问题,是非常容易的,只需要满足两个条件
forward前后的jsp页面不在一个目录下。

forward后的jsp页面里使用相对路径引用一些资源,图片,js脚本,css样式表什么的。

03-04里就模拟了这样一个环境,你进入http://localhost:8080/03-04/,选择“有问题的”:

 

打开03-04可以看到如下的目录结构:

|–+ 03-04   |— index.jsp   |— test.jsp   |–+ result      |— success.jsp      |— failure.jsp      |— lingo.png            刚才咱们看到的页面是failure.jsp,它里边显示图片的部分是:

<img src=”lingo.png” />            这时候就有疑问了,lingo.png和failure.jsp明明在同一个目录下,为什么无法显示。

现在请在无法显示的图片上,点击鼠标右键,选择属性,让我们看一下图片的请求地址:

图片的位置本来在http://localhost:8080/03-04/result/lingo.png,但请求的地址却是http://localhost:8080/03-04/lingo.png。问题就是丢掉了中间的/result。

再试一次index.jsp上的“没问题的”:

这次我们看到的页面是success.jsp,它里边显示图片的部分是:

<img src=”result/lingo.png” />            结果手工加上result这段路径后就可以显示图片了。

这个问题还要追溯到浏览器对html的处理方式,在html里包含的图片,css样式表,js脚本,视频等等外部资源,都需要浏览器再次向服务器发起请求。

如果这些外部资源使用了相对路径,浏览器就会在当前请求路径的基础上,加上相对路径拼接出完整的http请求,发送给服务器。这个例子中,我们请求http://localhost:8080/03-04/test.jsp,浏览器得到的当前路径就是http://localhost:8080/03-04/,failure.jsp中图片的相对路径是lingo.png,那么拼接的结果是http://localhost:8080/03-04/lingo.png。

不要怪浏览器太傻,是因为使用forward的时候浏览器并不清楚这些改变。它一直认为,既然自己请求的是test.jsp,返回的自然就是test.jsp的内容,那么再使用test.jsp当作当前路径去计算相对路径当然没有问题。是我们欺骗了浏览器,在服务器偷偷改变了请求流向,返回了其他页面的内容。

清楚了以上的请求流程,就知道如何应对这种问题了。

第一种方法:不要在不同目录之间使用forward做请求转发,保证当前路径不发生变化。

第二种方法:像上例一样修改图片路径,或全部改为绝对路径。

请根据实际需要进行选择。

 

CSS编码规范

一、 基本书写规范  

1、所有的CSS的尽量采用外部调用
   <LINK href=”/style/style.css”
rel=”stylesheet” type=”text/css”>
  
  
书写时重定义的最先,伪类其次,自定义最后(其中a:link a:visited a:hover a:actived
要按照顺序写)便于自己和他人阅读。
  
  
为了保证不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12pt
和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px 的字号比较合适。

  
2、CSS推
荐模板:


  
<style type=”text/css”>
<!—
body {
font-size:9pt; font-family:Arial, Helvetica, sans-serif; color:#333333;
text-align:center; margin:0px;}
ul { margin:auto; }
img {
border:0px; }
a { font-size:9pt; text-decoration:none;color:#FFFFFF; }
a:hover
{ font-size:9pt; text-decoration:underline; color:#990000; }
a.1 {
font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover {
font-size: 9pt; color: #FF9900; text-decoration: none}

.colorblue,colorblue:hover { color:#003366 ;}
.blue { font-family:
“宋体”; font-size: 9pt; line-height: 20px; color: #0099FF;
letter-spacing: 5em}

.colorRed,a.colorRed:hover{ color: #FF0000; }
.colorLime,a.colorLime:hover{
color: #00FF00; }
.colorGreen,a.colorGreen:hover{ color: #008000; }
.colorBlue,a.colorBlue:hover{
color: #0000FF; }
.colorOrange,a.colorOrange:hover{ color: #FFA500; }
–>

</style>
  
   为了保证浏览器的兼容性,必须设置页面背景<body
bgcolor=”#FFFFFF”>

 

3、其中注释写法
,例:/*header begin!*/

 

二、CSS命名参考

 

1、常用的CSS命名规则:

头:header
内容:content/container
尾:footer

航:nav
侧栏:sidebar
栏目:column

 

2、直观命名

当在设计Web页面以及需要对一个div进行标识的时候,最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id
的名称如下面所示:

自上而下小组:top-panel

横向:horizontal-nav

左面:left-side

中心-栏目:center-column

右面:right-col

这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义,因此满足了标识页面元素以及相应的CSS样式的需要。

但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置,因此在这样的布局之外使用就会显得不合适甚
至造成理解混乱。同时,这些命名没有涉及文档内容的结构。因此,下面给出了对CSS类以及ID命名更好的方法。

 

3、结构化命名

结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记(markup)中的类和id名称。

有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容
(content)以及标记(markup)进行重用。当你理解这种方式时,很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频
(audio)等外观格式上显得非常不合适。因此,应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。

可以按照如下所示的结构化方式来对类以及id名称命名:

顶部抢眼部分:branding

导航部分:main-nav

主要内容部分:main-content

这些名字同直观命名方式一样非常易懂,但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记(structural
markup)的初衷,即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。

即使你不打算在其他的媒体上对Web页面进行格式修改,使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如,结构化命名避
免了当一个div同id right-column移动到页面左边后所带来的混乱。对div
sidebar的采用这样的命名方式就显得更加适当,因为无论它出现在页面的哪一边,这个名字仍然对开发人员来说直观易懂。

 

4、惯例

Andy
Clarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一,但是还是发现了一些频繁出现的
常用名称。这里给出了最常用类/id名称的示例列表:

header

content

nav

sidebar

footer

如果要查看完整的列表,可以看看最常见命名惯例表

这些常见的类以及id名称是否标志着一种标准的诞生或是普遍接受惯例的形成呢?尽管这是我所希望的,但我并不这么认为。我的确希望能够看见一整套对
于我们每天都可以看到的常用页面元素的命名标准。同时,使用标准化的命名方式可以使得寻找页面元素以及对Web站点升级带来方便,尤其当需要在由不同开发
人员在不同时间所开发站点中换来换去工作的时候。

review:

大的布局div可以以外观的方式命名(如header,footer),其他的我觉得还是应该以描述所含内容的标准来命名(如menu,news)

 

5、自定义命名:

根据w3c网站上给出的,最好是用意义命名
比如:是重要的新闻高亮显示(像红色)
有两种
.red{color:red}
.important-news{color:red}

显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字


三、CSS样式书写顺序

 

1、显示属性

* display * list-style * position * float * clear

2、自身属性
* width * height * margin * padding * border * background

3、文本属性
* color * font * text-decoration * text-align
*
vertical-align * white-space * other text * content

规范参考

本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。但是,请大
家千万不要随意更改规范。如果有任何问题,请及时与我联系,我会及时更改本规范的相关代码样例和文档。

/基 本 要 求

1. 在网站根目录中开设images common temp 三个子目录,根据需要再开设media
子目录,images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志、banner 条、菜单、按钮等等;common
子目录中放css、js,、php、include 等公共文件;temp 子目录放客户提供的各种文字图片等等原始资料;media
子目录中放flash, avi, quick time 等多媒体文件 。
2.
在根目录中原则上应该按照首页的栏目结构,给每一个栏目开设一个目录,根据需要在每一个栏目的目录中开设一个images 和media
的子目录用以放置此栏目专有的图片和多媒体文件,如果这个栏目的内容特别多,又分出很多下级栏目,可以相应的再开设其他目录。
3. temp
目录中的文件往往会比较多,建议以时间为名称开设目录,将客户陆续提供的资料归类整理。

4.
除非有特殊情况,目录、文件的名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;目录的命名请尽量以英文为指导,不到万不
得已不要以拼音作为目录名称,经验证明,用拼音命名的目录往往连一个月后的自己都看不懂,

/脚 本 编 写

我们应该有一个脚本整体风格一致的概念,意思是一个月后和一个月前的你写的脚本风格保持一致,以及同一个工作组中不同的开发人员编写的脚本风格保持
一致,因为我们不可能永远孤立的开发,你随时都有可能和三个月前的自己合作(你的客户要求改版),也经常要和工作室中不同的同事共同开发一个项目,还有可
能被要求修改已经离职人员开发的脚本,当然你自己也有可能会扔下一个项目给后来的同事。

1. Html 文件的通用模板:

<html>
<!–
Generator: Sub Design Studio (
www.eastline.net.cn)
Creation Data: 2000-8-1
Original Author:
eastline
–>
<head>
<title> 文档标题 </title>
<meta
http-equiv=”content-type” content=”text/html; charset=gb2312″>
<meta
name=”author” content=”eastline”>
其他meta 标 记

<link rel=”stylesheet” type=”text/css” href=”style/style.css”>

式表定义
客户端Javascript 函数定义及初始化操作

</head>
<body bgcolor=”#ffffff”>
… …
</body>

充:
为了保证网站能够与下一代的web 语言xml 标准兼容,所有的HTML 标签的属性都要用单引号或者双引号括起,即我们应该写
<a href=”url”> 而不 是 <a href=url>.

2.
允许全文检索的页面,为了使Internet上的搜索引擎能够有效检索,在频道的首页的html的<head></head>之
间应该加入Keywords 和Description 元标记,例如 :

<meta name=”keywords” content=”东方新干线,汽车,买车”>
<meta
name=”description” content=”东方新干劲线,全球中文汽车信息第一站”>

3. CSS 文件的格式样例代码 :

<style type=”text/css”>
<!—
p { text-indent: 2em; }
body
{ font-family: “宋体”; font-size: 9pt; color: #000000; margin-top: 0px;
margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
table {
font-family: “宋体”; font-size: 9pt; line-height: 20px; color: #000000}
a:link
{ font-size: 9pt; color: #FFFFFF; text-decoration: none}
a:visited {
font-size: 9pt; color: #99FFFF; text-decoration: none}
a:hover {
font-size: 9pt; color: #FF9900; text-decoration: none}
a:active {
font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:link {
font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:visited {
font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover {
font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:active {
font-size: 9pt; color: #FF9922; text-decoration: none}
.blue {
font-family: “宋体”; font-size: 10.5pt; line-height: 20px; color: #0099FF;
letter-spacing: 5em}
–>
</style>

这里尤其要注意的是a:link a:visited a:hover a:actived
的排列顺序一定要严格照上面的样例代码,否则或多或少会出问题。另外我们规定重定义的最先,伪类其次,自定义最后,便于自己和他人阅读!

为了保证不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12px
和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px 的字号比较合适。

在写 <table>
互相嵌套时,严格按照的规范,对于单独的一个<table>来说,<table><tr>对
齐,<td> 缩进两个半角空格,<td>
中如果还有嵌套的表格,<table>也缩进两个半角空格,如果<td>中没有任何嵌套的表格,</td>
结束标记应该与 <td> 处于同一行,不要换行,

如我们注意在源代码中不应有这样的代码:

<td><img
src=”http://www.pcwiki.net/Html/class4/2006-3/30/”../images/sample.gif””>
</td>

应该是这样的:

<td><img
src=”http://www.pcwiki.net/Html/class4/2006-3/30/”../images/sample.gif””></td>

是因为浏览器认为换行相当于一个半角空格,以上不规范的写法相当于无意中增加一个半角空格,如果确实有必要增加一个半角空格,也应该这样写:

<td><img
src=”http://www.pcwiki.net/Html/class4/2006-3/30/”../images/sample.gif””>
</td>
属于同一个级别 的 <table>
一定是左首对齐的,另外不允许没有任何内容的空的单元格存在,高度大于等于12px 的单元格应该 在 <td> 和
</td> 之间写一个&nbsp;,如果高度小于12px, 则应该 在 <td> 和 </td>
之间插入一个1*1 大小的透明的gif
图片,这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱,在DW3中可以通过command->apply souce
formatting进行重新整理!

5. Width 和height 的写法也有统一的规范,一般情况下只有一列的表格,width 写在<table>
的标签内,只有一行的表格,height 写在 <table> 的标签内,多行多列的表格,width 和height
写在第一行或者第一列的 <td> 标签内。总之遵循一条原则:不出现多于一个的控制同一个单元格大小的height 和width,
保证任何一个width 和height 都是有效的,也就是你改动代码中任何一个width 和height
的数值,都应该在浏览器中看到变化。做到这一条不容易,需要较长时间的练习和思考。

/一 般 原 则

1. 在排布表格之前,请大家一定要好好思考一个最佳的方案,表格的嵌套尽量控制在三层以内,并且应该尽量避免 <colspan>
<rowspan> 两个标记,经验表明,这两个标记会带来许多麻烦。

2.
一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在
一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。如果必须这样做,请使用
<tbody>标记,以便能够使这个大表格分块显示。

3. 排版中我们经常会遇到需要进行首行缩进的处理,不要使用 或者全角空格来达到效果,规范的做法是在样式表中定义 p {
text-indent: 2em; } 然后给每一段加上 <p> 标记,注意,一般情况下,请不要省略 </p> 结束标记

4. 原则上,我们禁止用 <img width=  height= > 来人为干预图片显示的尺寸,而且建议
<img> 标签中不要带上width 和height
两个属性,这是因为制作过程中,图片往往需要反复的修改,这样可以避免人为干预图片显示的尺寸,尽可能的发挥浏览器自身的功能;但是这样的一个副作用是当
网页还未加载图片时,不会留出图片的站位大小,可能会造成网页在加载过程中抖动(如果图片是插在一个固定大小的表格里的,不会有这个现象),尤其是当图片
的尺寸较大时,这种现象会很明显,所以当预料到这种会明显导致网页抖动的情况会发生时,请大家务必在最后给 <img>附上 width 和
height 属性。

5. 为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用<br> 来人工干预分段。

6.
不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。

7. 所有的字号都应该用样式表来实现,禁止在页面中出现 <font size= > 标记。

8. 请不要在网页中连续出现多于一个的也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用 text-indent,
padding, margin, hspace, vspace 以及透明的gif 图片来实现。

9. 中英文混排时,我们尽可能的将英文和数字定义为verdana 和arial 两种字体。

10. 行距建议用百分比来定义,常用的两个行距的值是line-height:120%/150%.

11. 网站中的路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样:<a
href=”aboutus/index.htm”> 而应该这样:<a href=”aboutus/”>

12. 嵌入图形文本的使用较大的字体,建议不要在图形中包括文本。

13.“网页大小”定义为网页的所有文件大小的总和,包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户,网页大
小保持在34K以下为合适。

/文 件 命 名 原 则

1. 每一个目录中应该包含一个缺省的html 文件,文件名统一用index.htm

2.件名称统一用小写的英文字母、数字和下划线的组合。

3.
命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的
文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。

4. 下面以“新闻”(包含“国内新闻”和“国际新闻”)这个栏目来说明html 文件的命名原则 :

☆ 在根目录下开设news目 录

☆ 第一条缺省新闻取名index.htm

☆ 所有属于“国内新闻”的新闻依次取名为:china_1.htm, china_2.htm, …

☆ 所有属于“国际新闻”的新闻依次取名为:internation_1.htm, internation _2.htm, …

☆ 如果文件的数量是两位数,请将前九个文件命名为:china_01.htm, china_02.htm
以保证所有的文件能够在文件夹中正确排序。

5. 图片的命名原则遵循以下几条规范 :

☆ 名称分为头尾两两部分,用下划线隔开。

☆ 头部分表示此图片的大类性质,例如广告、标志、菜单、按钮等等。

☆ 一般来说:

放置在页面顶部的广告、装饰图案等长方形的图片我们取名:banner
标志性的图片我们取名为:logo
在页面上位置不固定并且带
有链接的小图片我们取名为button
在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu
装饰用的照片我们取
名:pic
不带链接表示标题的图片我们取名:title
依照此原则类推。

☆ 尾部分用来表示图片的具体含义。

☆ 下面是几个样例,大家应该能够一眼看明白图片的意义:
banner_sohu.gif banner_sina.gif
menu_aboutus.gif menu_job.gif
title_news.gif logo_police.gif
logo_national.gif pic_people.jpg
pic_hill.jpg.