用于项目设计的一些网页设计知识
2005-12-22 09:31
211 查看
分辨率专题(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表示高度。
二、如何点击超链接弹出一个窗口？
请先点击这里的演示效果[/u]，它的代码如：
<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，表示是。
这里只举滚动栏的例子，因为只有它对我们来说是有真正意义的，演示请点击这里[/u]。
它的代码如：
<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代码，应该如下图：
#o{margin-top:0}
是否能让别人不看到网页源代码作者：自由勇点击：
更新 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源代码，是没有办法的。
更新 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表示高度。
二、如何点击超链接弹出一个窗口？
请先点击这里的演示效果[/u]，它的代码如：
<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，表示是。
这里只举滚动栏的例子，因为只有它对我们来说是有真正意义的，演示请点击这里[/u]。
它的代码如：
<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代码，应该如下图：
#o{margin-top:0}
|
更新 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源代码，是没有办法的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 学习中收集的一些有关网页UI设计、前端开发的相关知识网址分享，赶紧收藏走起。。。
- 提升网页和博客设计品质的一些实例…
- 去年5月份，公司项目较少，我就组织了一个用于公司内部办公管理的项目（以下称OA)。第一个目的是为了让公司里面一些技术较差的人员得到真正编程的锻炼；第二个目的是为了使用空闲的人员为公司开发一个产品，在内
- DIV+CSS网页布局常用的一些基础知识整理
- 网页设计中要关注的搜索优化知识
- Firefox上一些我用于知识管理的扩展
- 网页设计开发的一些想法
- 前端网页设计的知识要点(补充~)
- 项目中数据库设计的一些心得
- Ganglia是UC Berkeley发起的一个开源集群监视项目，设计用于测量数以千计的节点
- 学习笔记—网页设计基础知识（一）
- 分享一些网页设计的素材
- 20佳用于手绘风格网页设计的字体素材 !
- 最近项目中用到的一些jquery选择器等前端知识
- DIV+CSS网页布局常用的一些基础知识整理
- 项目管理的一些知识
- 40款用于简洁网页设计的光滑英文字体【下】
- 网页设计的一些技巧
- 网页设计的一些网站
- 大设计时代：针对超大网页布局的一些思考和建议 [Aseoe]