“偷学”网页制作之真经[3]

dn001 2008-01-07 14:16:19

“偷学”网页制作之真经[3] （三）活学活用别人的网页

　　用FrontPage98打开由网上下载的网页（如下图），好学者定会油然而生一种幸福感，天下没有哪类设计语言，能像HTML这样，随处可以得到如此活生生的源程序实例！接下来问题又出现了，从哪学起呢？面对满天掉下的“馅饼”，我们要做的事不妨分为模仿和引用两类。我想下面为朋友们例数一、二，实战中还望大家能举一反三。

一、学习别人成功的页面布局

　　现在网页几乎都使用了表格排版方式，FrontPage98在表格功能上也继承了微软办公系列软件的“传统”，即位置和大小的调整总是有些别扭，难随人愿。当表格嵌套一多，在普通区编辑就有点无能为力了，此时若不接触HTML代码则很难做到乘心如意。所以学习别人的布局方法，一定不要错过对HTML原文件的分析，这样一来，无论多么复杂的效果，我们都将会在编辑器里找到一些蛛丝马迹：
为什么有的页面版块边角能圆滑的过渡？啊！原来只是在版块交界处贴了一张圆弧状图片……
为什么我的表格行或列总是不能错位对齐？噢！原来可用在单元格里插入新表格的方法解决这种问题……
为什么同一张图片能够链接不同的内容？嗯！原来只需简单的划分图片热区便达到了目的……

　　一个个问题相继在别人网页中找到了答案，得以迎刃而解，这一切都该好好感谢英特网，和那些仍在前面摸索着的网虫们。

二、学习页面样式的合理安排

　　DHTML是人们对动态网页的习惯称谓，并没有真正意义上的DHTML语言，事实连IE和NS两种浏览器对它支持的标准都不尽相同。这里的动态可不是GIF动画，它是一种基于用户端的交互式效果，能对用户的不同操作产生不同的动态响应。它一改传统HTML给人的那种呆板印象，大大丰富了网页的亲和力与表现力。现如今，DHTML已被越来越多的优秀主页所采用，它们为“偷学者”提供了绝佳的范例及素材。
　　虽说IE和NS对DHTML的支持各有千秋，但在基本CSS（层叠样式表）上双方观点却是一致的。对于初学者，若暂时还没有精力或条件去为两种浏览器的兼容性劳神，又不愿失去各约50%的访客，抓住CSS这个“魔术师”，同样能使自己的网页发生“翻天覆地”的变化！
　　CSS的关键字是“Style”，使用它有内部（Inline）和外部（External）两种用法。页面内部设置样式时，可在文件头部（<head></head>之间）用<style></style>标签设置，它将影响整个页面；也可放其它标签头部用属性设置（style="样式"），它只影响当前标签对中的内容。至于外部设置样式法，大家可在文件头部找找看，有没有诸如：<link href="网页标题.files /xxxx.css" rel="stylesheet">的语句，其中“xxxx.css”就是外部CSS文件名。它的内容与内部用法相比，除了首尾没有“<style></style>”标签对外，其余都是大同小异的。
　　设置样式的关键字很多，不过只要有一点英文基础都不难看懂。发现别人页面中好的样式，我们只需按它原有的格式及用法，简单地更改一些如：大小、字体、颜色等属性的值，便能为已所用了。需指出的是：样式表中那些以“.”及“#”开头的名称是要在页面中用“class=”及“id=”属性指定对象才起作用的，大家多试几次就明白了。

三、 “篡改”优秀脚本为已用

　　脚本的编程对初学者来说较为复杂，可修改起来却比较简单，在我们垂涎别人页面奇妙效果的同时，不妨也来个巧为己用。众多脚本语言中当数javascript最为普及，理解起来也很容易。
　　脚本的使用与CSS一样分为内部脚本和外部脚本两种，内部脚本以<script language="javascript">开头，</script>结尾；外部脚本在页面中用<script src=" 网页标题.files /xxxx.js"></script>链接调用，它的作用相当于在当前位置，嵌入以指定的外部脚本为内容的内部脚本，其中“xxxx.js”即外部脚本文件名。这是javascript的用法，VBScript与此类似。
　　脚本执行方式又可分为立即执行和调用执行两种，立即执行脚本随着页面打开由浏览器自动执行；而调用执行脚本（即函数）则要待出现“函数名(参数表)”方式调用时才执行。当然也有的函数，是在页面打开时即被自动调用执行了，其与立即执行脚本很相像；但更多的函数是为了响应用户的动作，这也是增强网页交互性的重要手段。函数程序以“function函数名(参数表)”作开始标记，程序内容被放在一对“{ }”之间（若有多层“{ }”时要注意分清配对关系）。
　　采用别人脚本时要明确它的功能，使用时一般无需过多修改；一个脚本有时含有多项功能，应该区分选用。对于立即执行脚本，直接放在页面中需执行的位置就能发挥作用了；对于调用执行脚本，理论上放于页面任何部位都行，但介于目前网络传输速度较慢，最好还是放在页面头部（<head></head>之间）。函数必须调用才起作用，调用方式大家可参照源页面的用法。脚本收集得一多，还需小心页面中各种名称（包括变量名、函数名、对象ID名）的重名冲突，一旦发现，必须改名方能使用。
　　脚本的学问实在是大，最初你可以原文照抄，实践时间一长，相信你也能模仿编出理想的脚本。网上还有很多免费的脚本供人下载，它们基本上都有用法说明及效果演示，有心的朋友可自己去找找。

四、用C/P大法丰富自己的网页

　　相对于前三种“偷”法，C/P大法可谓最为简单实用。C/P看起来挺专业，说白了就是“Copy/Paste”――复制/粘贴（越偷越疯狂了！）。再简单地“偷”都是有学问的，首先复制的对象一般需有独立结构（多是一张完整的表格）；其次这些对象可提供一些我们需要的远端服务；最后还要求复制对象具有可移植性。
例如：我们看到某个网页上的搜索引擎很好，完全可用编辑器打开它，将该引擎整个复制后粘贴进自己的网页中（如下图）。一般这类引擎都对应着远端某个服务器上的ASP或CGI程序，这样即使我们的主页空间不支持ASP、CGI或PHP脚本，我们同样能借用别人的服务器来丰富自己的主页。原来C/P大法就是一种充分利用现有网络服务资源的快捷方式。不要觉得这有什么不好意思，四处转转你会发现一些大网站也在用着别人的服务，网络资源本该是共享的吗！

　C/P时一定要确认是对整个对象的操作，若在普通编辑区复制，要注意观察是否已把表单的头尾都拷过来了，也就是粘贴后的内容有没有外围的虚框；当然有时在普通区完全复制有困难，那只有在HTML区复制代码了。复制时，若为表单对象，就应选择包含以<form>开头，和</form>结尾的代码；若为表格对象，则应选择以<table>开头，和</table>结尾的代码，不过建议在两头加上<div></div>标签对，这样可使粘贴对象的结构独立，便于调试且不会影响自己原来的页面布局。