用于项目设计的一些网页设计知识

分辨率专题(2):满屏显示设计方案作者:自由勇点击: 更新 2004-02-11

如果您是位网页制作的初学者,最好不要考虑制作这种网页,因为这当中可能会遇到非常多的问题、以及非常烦琐的操作。建议将网页做成居中,或偏左的形式,在800×600分辨率下可正常浏览的网页,像国内大多数网站一样,详细请见我写的这篇:http://www.webshu.com/dissert/act/5,id=0301.htm

制作满屏显示可适应任何分辨率的网页,需要比较深厚的网页制作经验,并不是单单把表格的宽度设为100%。除了把表格的宽度设为100%,表格当中套入的表格、以及其它单元格的宽度,要根据实际情况灵活设置宽度,有时候必须使用像素单位,有时候必须使用百分比单位。

满屏显示有很多种制作方案,首先一定要在纸上将表格的结构画出来。由于满屏显示的网页表格结构的极其复杂性,这里只能简单地做个介绍。当然,只要你肯动脑筋,满屏显示并不是什么难事,只是会遇到非常多的麻烦:

步骤1、无论使用FrontPage,还是Dreamweaver软件,首先必须将网页左边距、顶边距、表格的cellspacing、cellpadding这四项设为零。

步骤2、无论上下建立了多少个大表格,它的最外层table元素的宽度必须是100%。并根据实际情况,适当地给这个最长的表格填上背景颜色或者画出线条,以体现网页的长度。

步骤3、这时候立刻就可以看出,网页已经可以在任何分辨率下占满全屏。如果你浏览过很多国外网站,你会发现只是那些线条占满了全屏,其它部分仍是像居中时候的样子,其实这也是一种很好的设计方案。其方法就是在这个表格的<table>后面立刻加一句<center>,在<center>后面再套入一个表格。

步骤4、如果想达到全部满屏的效果,接着步骤2,最外层table元素的宽度必须是100%。第一层的table内的<td>元素的宽度必须是百分比单位,然后在它套入的第二层表格的宽度可以是100%,也可以是像素。我建议这时候用像素单位比较好,它最大的好处是切换到800×600、1024×768不会变形,而且在640×480分辨率下可以出现横向滚动条,决定了该网页的最低分辨率是800×600。

步骤5、适当将表格中的某些文字或图片设为右对齐,方法是<p align=right>,这是非常重要的一个步骤。

最后,请切换到800×600、1024×768等分辨率下分别检查。

如果为了适应分辨率而全部制作2个网页,使用JavaScript来判断、跳转,经过长期实践之后,你会发现这是在浪费人力,没有实际意义。

如何制作漂亮的弹出窗口(专题)作者:自由勇点击:MT-8000更新 2003-09-27

在什么场合下需要弹出窗口,是要非常慎重的!不知道这会不会影响访问量,但至少我不会这样做,现在的Google工具条已经有弹出窗口拦截功能,所以弹出窗口在一定程度上已经失去了意义。如果想让弹出窗口更人性化,可以用Cookies来记录,让这个窗口在一周内只弹出一次。(具体方法,在这篇有介绍。)

弹出窗口的参数,在JavaScript教程里有详细的介绍,你有必要去买这本书,或者从Google上找个教程,下面整理一下各参数的作用,以及具体操作方法。注意,有关涉及到编程、代码的步骤,应该用记事本来做,不要在Dreamweaver下操作,否则,会有意想不到的麻烦

一、如何在打开网页时弹出一个页面?
很简单。只要在网页代码最后加入这句:
<script>window.open("URL","a","width=420,height=330")</script>

例如这页弹的窗口就是这句代码,这里的URL表示页面的地址,可以是相对路径,也可以是http的绝对路径,例如这页的弹出窗口,这里使用的是相对路径,这里的../表示向上一级,代码如:<script>window.open("../../serve/mend/sp2.htm","a","width=420,height=330")</script>。
也可以用绝对路径,如:<script>window.open("http://www.webshu.com/serve/mend/sp2.htm","a","width=420,height=330")</script>。

参数说明,第二个属性"a",表示窗口的名字,它的意义在于,当你刷新原始的这页全窗口的时候,弹出窗口就会刷新一次;而如果把名字省略,改为"",那么当刷新这页的时候,就会新增加一个弹出窗口。
width表示弹出窗口的宽度,height表示高度。

二、如何点击超链接弹出一个窗口?
请先点击这里的演示效果,它的代码如:
<a style="cursor:hand" onclick='window.open("URL","","width=420,height=330")'>超链接描述文字</a>

三、如何批量实现第二步的效果?
<script>function y(e){window.open(e,"","width=400,height=300")}</script><style>.h{cursor:hand}</style>
<a onclick=y("http://www.webshu.com") class=h>网页树树</a>
<a onclick=y("http://ziyy.com/co") class=h>自由勇主页</a>
<a onclick=y("http://www.cctv.com") class=h>中央电视台</a>

四、如何实现带有地址栏和工具栏的弹出窗口?
这样做就没什么意义了,还不如直接就做个超链接。详细参数如:toolbar表示工具栏,menubar表示菜单栏,scrollbars表示滚动栏,resizabl表示是否允许改变窗口大小,location表示是否显示地址栏,status表示是否显示状态栏内。默认情况下,都是否;值选为1或yes,表示是。

这里只举滚动栏的例子,因为只有它对我们来说是有真正意义的,演示请点击这里
它的代码如:
<a style="cursor:hand" onclick='window.open("URL","a","width=430,height=330,scrollbars=1")'>超链接描述文字</a>

五、如何制作精美的弹出窗口呢?
这就需要有见多识广的实际经验,逐渐培养良好的审美观念,多浏览国内大型网站、外国网站,这都是我们学习的好榜样,有创意的东西才是最有生命力的,才会让人眼前一亮。精美的弹出窗口不仅体现在美术设计方面,还体现在内容的清新。
我们可以看看一些商业网站的弹出窗口,内容的中心非常明确。要想让弹出窗口能取得一定的效果,图片是必不可少的,也可以写醒目的大标语,再加上简要的介绍。“详情请进”这个链接也是很有必要的,要巧妙地设置超链接。

至此,本专题就讲完了。内容很简短,但却是非常实用的,在第一、第二、第四的例子中,省略了非常多的网站一直用的function建立自定义函数,因为这里是不必要的。

分辨率专题:网页居中作者:自由勇2003-11-25点击:MT-8000

国内网站大多数都是使用800×600的标准分辨率。这样的好处非常多,一是浏览者习惯,二是为今后减少了很多工作量。800×600分辨率的网页,还有利于内容的集中安排。
如果切换到1024×768或更大的分辨率之后,网页可能就是左对齐了。当然,左对齐也是很正常的,以前的CCTV网站就是左对齐,左对齐并不会影响美观。

如果网页的左边距设为零,800×600分辨率下最多可显示780像素的宽度。如果你想让网页像现在的门户网站一样居中,请按如下步骤进行:
方法1:在FrontPage或Dreamweaver下设置最外层的表格对齐方式为“居中”就可以了,但是这样做很麻烦,你必须准确找到外层表格,然后在最外层表格所含的单元格里按鼠标右键→表格属性。
方法2:先切换到HTML模式下,查找left,如果能找到align="left",应该先全部删除align="left"这句。如果没有找到left,那一切都好办了。只要在<body>后面加一句<center>即可,在网页结束的时候再加</center>。
并且表格宽度不要用百分比,要用像素单位。

一个标准的网页居中的HTML代码,应该如下图:

webshu.htm - 记事本

文件(F)编辑(E)搜索(S)帮助(H)

是否能让别人不看到网页源代码作者:自由勇点击: 更新 2005-01-05

这同样是很多网友关心的问题,自己网站的源代码是否禁止别人查看?答案是否定的,没有办法,只有客户端程序如ASP、PHP,才可以不被别人看到。只能尽可能地将源代码写入到组件中,例如将网页特效程序写入到Flash中,或写入到Java Applet中;或者写在服务器端不返回给客户端,例如将VBScript写在ASP程序中。这两年一些银行网站如招商银行、中国建设银行,都使用过Java Applet的方法。Flash和Java Applet中含有的信息是很难被解译的。

  有3种对策方案:
方法1、禁止鼠标右键。对策:客户端点击IE工具栏的“查看→源文件”,即可看到网页的源文件。如你使用的是弹出没有地址栏的窗口,客户端只要按一次Ctrl+N,即可出现地址栏和工具栏。对策2、打开Internet选项→安全→自定义级别,将“活动脚本”设为“禁用”,即可点击鼠标右键→查看源文件。
方法2、客户端通过写这段代码,即可查看到你的源代码:
<script>function fe(){var gk=document.forms[0].lo.value
window.location='view-source:'+gk;}</script>
<form>
<input name=lo size=30 value=http://> <input type=button value=查看源代码 onClick=fe()>
</form>
  例如在下面输入任意网址,即可查看到HTML源代码,注意你输入地址之后要点击“查看源代码”键,而不要直接按回车键:


  方法3、使用微软出品的“Script Encoder”,以及unescape()方法,为网页加密,这是最有效的加密方法,具体请见http://www.google.com/search?hl=zh-CN&q=Script+Encoder&btnG=Google%E6%90%9C%E7%B4%A2&lr=lang_zh-CN,例如著名的动网论坛6.0版就是使用了Script Encoder,将HTML代码全部变为乱码,例如KU{}xjYmDO@#@&@#@&E~NnJ*Px~rCl1V+MJ@#@&3Hf,?`A@#@&ftEAAA==^#~@。
  但这样做会使网页中的超链接不能被搜索引擎识别,导致某些页面不能被Google和百度收录。同样,此加密方法可以解密,详细请见http://www.google.com/search?hl=zh-CN&newwindow=1&c2coff=1&q=Script+Encoder+%E8%A7%A3%E5%AF%86&lr=lang_zh-CN

  总之,如果想让别人看不到自己的HTML源代码,是没有办法的。

阅读更多
个人分类: javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭