网页制作常见问题

Author: 徐艺波(xuyibo) Views: 595 UpdateTime:2007-1-17
      留言

  1. 简介
  2. 在开始网页常见问题前,我们先熟悉一下网页的各种标准、技术为什么诞生,是什么需求推动它们的诞生。

    HTML - 文件后缀为.htm或.html。HTML是伴随网络的诞生而诞生的。有了网络,沟通多了,现实需要一种工具来简单的沟通信息,它必须足够简单,以便大多数人都能编辑;其次它必须强大,足够描述人们想表达的信息。而HTML就是这样而诞生的。

    CSS - 文件后缀为.css。有了HTML后,特别是大的网站 – 有成千上万的网页的。设计者觉得需要修改一下网页的样式,比如将网页里显示字体从“宋体9号”该成“Verdana”,这下设计者头疼了,这么多的网页,一个一个手动编辑,什么时候才能完成呢?于是CSS就诞生了,它将HTML各种标识的属性抽象出来,比如body里有字体设置你只要在.css文件中,定义了:body {font-family:"宋体"},所有使用这个网页的css的字体就变成了宋体了。使用CSS还有一个好处就是网页变小了,不变的css被抽出来了。

    DHTML - 上面的功能有了,人们可能就在想,我能不能让用户参与进来,比如一幅图片,当用户鼠标点过来的时候,我向下移动100个象素。而DHTML就这样应运而生了。D是Dynamic的缩写。它让动态设置HTML标识的属性成为了可能。

    VBScript、JavaScript - 两种脚本,后缀名分别为.vbs,.js。上面说的DHTML,它们往往是结合者语言实现的,而vbscript和javascript就是这样的语言。VBscript是从Visual Basic进化而来的,是VB功能的子集,毕竟在网络上使用了语言都必须面对安全问题,比如格式化硬盘操作,vbs脚本就没有这个原生函数。Javascript是从最早的mozzia那里诞生的,现在你还能从网络上下载Javascript的源码,现在有许多大型软件底层都是依靠Javascript这样的语言来驱动的,比如DreamWeaver MX,Mozzia的网站上还有很多这样的例子。微软给自己的Javascript起了个不同的Jscript。Javascript从名字看好像跟java有点近亲,但实际上没有什么特别关系,估计是当时的开发者看到Java比较火,跟时髦了?Javascript的语法非常类似C++语言。

    XML - 我现在很少用XML,但最近Ajax比较火。其实Ajax的功能在2000年就有了。微软的.NET说它的所有服务都是围绕XML进行的。XML的诞生估计是大家越来越觉得HTML的规定的标识太有限,不足以有效的描述各种数据。

    AJAX – 异步Javascript和XML的缩写。Ajax这种方式的使用才真的实现了网页到网络程序的转变。原先,大伙是请求一个网页,然后服务期接受并发送相关网页给用户,期间用户一直等待着数据的到了;而Ajax的使用,使得用户在提交请求后,能够继续做其他事情(看设计者怎么设计了),等到服务期发送数据到来的时候,将发回来的数据以某种格式显示给用户。就好像这种操作是在本地完成的一样。

  3. 参考资料
  4. 微软的MSDN 2000中包含上面列出的所有标准、技术的参考资料。由于比较大106MB,所以我的精简版的MSDN中不包含这个文档。你可以在MSDN 2000的光盘中找到它:inet.chm。将inet.chm和其索引文件inet.chi拷贝出来,就可以了。

  5. 如何为同一个网页定制不同的样式表
  6. 如果设计过网页,你可能遇到过这个问题:自己为自己的网页设计几种不同的样式表(CSS),但怎样将定制给访问者呢?比如在某个时间,网页使用这个样式表,在另一个时间使用另外一个样式表?

    如果是动态网页,那很好处理,根据时间或用户选择的session来生成特定的CSS嵌入代码,比如下面的代码:

    <%
    if hour(now()) < 12 then
    <link href="style1.css" rel="stylesheet" type="text/css">
    else
    <link href="style2.css" rel="stylesheet" type="text/css">
    end if
    %>

    如果使用静态网页,那只能通过脚本来实现了,微软的MSDN 2000中的网页就是这种情形:查询一个函数,右键代码网页源码,发现没有连接任何.css,奇怪了?让我们先看看其导入的一个.js脚本的内容吧:

    writeCSS(scriptPath());
    function scriptPath()
    {
    	var col = document.scripts;
    	return col[col.length - 1].src;
    }
    function writeCSS(spath)
    {
    	// Get a base CSS name based on the browser.
    	var css = "backsdkn.css";
    	if (navigator.appName == "Microsoft Internet Explorer") {
    		var sVer = navigator.appVersion;
    		sVer = sVer.substring(0, sVer.indexOf("."));
    		if (sVer >= 4)
    			css = "backsdk4.css";
    		else
    			css = "backsdk3.css";
    	}
    	// The CSS is in the same directory as the script.
    	css = spath.replace(/linkcss.js/, css);
    	document.writeln('<LINK REL="stylesheet" HREF="' + css + '">');
    } 
    	  

    嘿嘿!看到没有,这里有我们期望的解决方法。只要我们把writeCSS函数中的判断代码修改一下,就可以了:

    writeCSS();
    function writeCSS()
    {
    	var oDate = new date();
    	var vHour = oDate.getHour();
    	if (vHour > 12) {
    		document.writeln('<LINK REL="stylesheet" HREF="style1.css">');
    	} else {
    		document.writeln('<LINK REL="stylesheet" HREF="style2.css">');
    	}
    } 

     

  7. CellSpacing、CellPadding使用CSS描述
  8. table.default{border:1px solid;width:100%;border-color:https://xuyibo.org/461-2/a312a;border-collapse:collapse}
    .default thead {font-family:"Verdana";font-size:14px;font-weight:bold;background-color:https://xuyibo.org/16-2/74d47;}
    .default td {border-right:1px solid https://xuyibo.org/461-2/a312a;border-bottom:1px solid https://xuyibo.org/461-2/a312a}
      
    然后只需要在html网页的table标签中添加:class=”default”就可以了。

  9. 定制滚动条
  10. 在css的body中添加:

    scrollbar-base-color:https://xuyibo.org/461-2/12721;scrollbar-track-color: https://xuyibo.org/461-2/f362f; scrollbar-highlight-color:https://xuyibo.org/16-2/74d47;

  11. 保证文件编码的统一性
  12. 不知道你是否遇到过这样的问题,设计了一个UTF-8页面,老是发现样式表不能正常工作。如果是,请检查一下你的.css和.js文件是否也都是UTF-8编码的,今天我就遇到这个奇怪的问题,原因就是因为web页面是UTF-8编码的,而样式表却依旧使用gb2312编码。

  13. 了解IE缓存的存在
  14. 编写html页面或者php等动态页面,最好将公用的下载到客户端的东西放到一个文件中,这样可以提高效率。如果你熟悉HTTP协议就知道为什么了。每当浏览器请求一个页面的时候,如果文件存在缓存的话,浏览器会发送包含缓存文件时间的文件请求到Web服务器,如果文件没有修改,请求立马返回,浏览器使用现有的缓存来处理页面。显然,如果公用的脚本放在一个文件,对于一个客户端来说,它实际上只下载了一次到本地,以后所有用到这个文件的地方都使用了浏览器缓存。

  15. 解决form撑大表格一法
  16. 如果用frontpagep或dreamweaver在一个很小的表格里插入一个form,会撑大表格,严重影响页面元素的定位,解决方法是将<form>标签放在<tr>和<td>之间,这样fp或dw中就不会看到form的红框了,举例如下:


    由fp或dw生成的代码型如

    <table><tr><td><form>

    ……(提交的内容)

    </form></td></tr></table>

    将其改为
    <table><tr><form><td>

    ……(提交的内容)

    </td></form></tr></table> 即可。

留言: (留言使用了AJAX,提交的留言将自动显示在下面)Top
User:

Email:[email protected] QQ:85521028
Copyright ©2002-2007 XuYibo All rights reserved. License | Contributor
网站地图