“偷学”网页制作之真经

qchh · 发表于 2005-7-19 22:49:35

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

随着英特网的飞速发展，个人创办网站早已不是什么新鲜事了，可那种看似天书般的HTML代码，却把众多初学者挡在了门外。其实如今制作网页完全靠手工输入代码的几乎没有，像FrontPage Dreamweaver之类的主页工具可成倍提高你的工作效率。这些软件学习起来并不难，不过想做出有水准的东东也不太容易。请教一些成功者，他很可能会告诉你：“我是在参考了N个别人的网页后，才琢磨出现在这种样子的！”网络的巨大魅力之一在于资源共享，知识当然也是共享的财富，既已被别人探索出的技巧，后来者没必要再去重复无用的劳动。说“参考”也好、说“剽窃”也好，总之千万别感到自卑，只要不是出于商业营利目的，学习本身是无错的，相信能得到“斑竹”们的谅解（网虫应是世上最无私的群体）。

　　看来所谓“偷学”不过是“实践出真知”这句话的“变种”而已！说点大道理就是一种由感性认识得到理性认识的学习方法。它与利用教材学习相比具有三大优势：
　　1、生动活泼，大家是先看到效果后学会原理，所以印象深刻；
　　2、高度灵活，学习者不受任何条条框框的约束，自选最感兴趣的内容去学，变传统学习的被动接受为主动吸收；
　　3、以成就促进步，你最初可不必深入了解每个模块的细节，便能象搭积木一样迅速做出精彩的网页，不断的成就感与日益浓厚的兴趣形成良性循环，带你走向成功的彼岸！

　　采取“拿来主义”，虽是学作网页的一条捷径，但最忌讳全盘照抄，否则既不能达到学习的目的；又会给人似曾相识的感觉，缺少新意，这一点还需自己好好把握。我仅想在此介绍一些“偷学”的基本技巧，以及如何靠学来的东西“组装”出理想网页的方法，供准备入门的朋友试试身手。

　　学习前大家应自行掌握一些HTML的基本知识：认识HTML常见标签、了解一点脚本及样式表的作用和连接、嵌入方法，不然照抄都不知从何抄起。学习离不开工具，初学者最佳配置首推Win98+FrontPage98+IE5。我不是微软的信徒，可其产品的简单易用却是不容争辨的事实；版本都说是越高越好，可MicroSoft（我看叫LargeSoft更合适）会让你消耗掉200%的资源去换取20%的性能提升。选用IE5不仅因为众多DHTML、JavaScript新特性需它的支持，更主要的是要用到它那强大的“另存为”功能。

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

　　安装过FrontPage98后它会成为HTML文档的默认编辑器，通过在硬盘中HTML类文件右键菜单里选Edit；或用IE打开后在文件菜单中选编辑，都可启动FrontPage98对网页进行修改。但不能对网上页面进行此种操作，而必须用到IE的“另存为”功能，先存盘再打开。保存时请一定采取“Web页，全部”方式（如：图一），这样IE便会智能的下载全部与该页面有关的所有图片、脚本、CSS样式表等内容，并保存在与主HTML文件同路径下且名为“网页标题.files”的文件夹中（这里面的文件，本文统称为外部文件）。其实此时主HTML文件中所有下载过的嵌入文件相对路径也被IE做了修改。这样保存还有一个好处是：即使当前网页是框架结构，IE也能自动把所有相关祯页面同时保存，你不会再为只下载个空框架而懊恼了。

　　保存前还请注意几点：要有明确的学习目的，看到别人页面上的东西正是自己需要的；或页面很新颖有趣，想弄清它是如何实现的,总之有目的保存会提高自己的学习兴趣。
　　一定要等页面完全显示后再保存，不然有可能因服务器停止响应而造成浏览器死锁，当然你采取离线后脱机浏览历史记录来保存，也是个很好的办法。
一旦发现页面出现错误，多数是因网络传输不稳定引起的，可刷新一次试试，若没见好转，还是暂不存为妙。或是等清除缓存后再试；或是待“斑竹”修改后再图之也不迟。
　　一般由ASP、PHP、CGI程序产生的页面是可以保存的，但JavaScript、VBScript等脚本语言生成的页面保存后是乱码（Unicode），不易还原，况且这些页面多比较简单，没什么可学的，关键还是要学习用于生成它们的脚本，所以遇到此类情况，我们可返回上一页面再保存，常能“窃取”回原始脚本。
　　网页一经存盘，便可用FrontPage98打开编辑了……咦！为什么一片空白，转到HTML区，只有标签间的几行代码，标签间则是一无所有？不要泄气，这是极少数“吝啬”的“斑竹”为防初学者“偷学”，而针对FrontPage施展的障掩法。正常情况下网页是不会加密的，这种方法还不能算做加密，很容易对付。我们可关掉FrontPage，改用记事本打开上述HTML文件，用查找命令找到所有“”（不分大小写）标签，统统删除即可正常编辑了。

　　顺便提一句：Internet临时文件对学习是很重要的，一些已看过却忘了保存的内容，通过脱机浏览以前的网页，往往都能找到。所以在条件许可的情况下，IE缓存空间设大点比较好（100M以上），历史记录天数也应长一些（15天以上）。

“偷学”网页制作之真经[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>标签对，这样可使粘贴对象的结构独立，便于调试且不会影响自己原来的页面布局。

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

（四）调试组装好的网页

　　微软的霸道一样在FrontPage98中体现的淋漓尽致，它会在不顾用户感受的情况下乱写代码。虽然设计者的初衷是为了方便宜用、修正错误，但结果常适得其反，垃圾满天飞不说，还有可能毁掉你辛苦做出的网页！再者，别人页面上的效果用在我这里是否合适；借用的远端服务是否正常；各处收集来的脚本是否有冲突等等一系列问题，亟需通过实践去检验。因此对组装好的网页，一定要做好调试工作。本着高效“省钱”的原则，最好能循序渐进地去做。

一、本地脱机调试法

　　FrontPage98是所见即所得类的“竹叶”工具，但动画或动态效果以及脚本运行情况，在编辑区是无法看到的，这就是预览的必要性。FrontPage98预览功能不能让人满意：它每看一次页面都会在临时目录生成一个预览文件，看得次数越多速度就越慢，当碰到需连线的项目时会更慢；由于预览文件与编辑文件不在同一目录，有时调用外部文件时还会出错；对网页精益求精的朋友更要小心，预览区比浏览器略小，对控制页面布局避免出现横向滚动条时不利。建议对已基本完成的大页面，多使用浏览器预览。
　　因为几乎每个页面都有或多或少的在线项目（如计数器等），预览前一定请记住先在资源管理器或IE的文件菜单中，选定“脱机工作”再打开网页（如下图）。作为“组装”的网页，本地脱机调试是最主要的一环，毕竟不少是别人的东西，能否适应新环境扎根本地发光发热，仍需考验，大家一定要仔细观察，即时发现问题。

二、本地在线调试法

　　网页上借用的在线服务在脱机情况下是无法调试的，不过你也别急于上传“竹叶”去试，不妨先用用本地在线调试法。此法一方面可以减少在辛苦上传错误页面后，还要面临结构大调整的后悔；另一方面本地打开网页速度快，调试修改方便，可最大限度的节省Money。
　　进行本地在线调试，是有针对性的，你必须弄清网页中有没有、及有哪几个需连线服务的项目，若没有则根本无需本步骤直接上传即可；若有则要分清在线服务的内容与测试目的。在线服务又可分为自动式连线与交互式连线两种，自动式连线是指代码直接调用远端服务，随着网页打开浏览器会发出服务请求，并把返回结果嵌入页面中（如：计数器、滚动新闻、广告等）；交互式连线是指网页打开时只建立一个交互界面，待用户发出请求后，才连接远端服务（如：借用的个性论坛、聊天室、留言板、搜索引擎等），这种连线不会因远端服务器响应的快慢影响网页打开速度。
　　明确目的后，我们打开MODEM，取消脱机工作，直接双击做好的页面，随着拨号过程的结束，网页便在本地连上了英特网。对于自动式连线服务，要注意它们的连接速度、内容与页面是否和谐、以及对页面其它版块的影响；对于交互式连线服务，则要待网页打开后，一个个的尝试链接是否正常、内容是否符合设计初衷。全部测试一遍过后，一般可以立刻断线，利用缓存继续调试。

三、服务器端调试法

　　如果网页中没有使用ASP、CGI、PHP脚本（初学者一般是用不到的），经以上两步主页便可以说是调试完成，能够上传了。鉴于服务器端软件运行环境与本地不同，网页从那里打开可能出现的意外也很多，上传后的调试是必要的。

网页在服务器端调试的常见问题有：

若服务器操作系统是UNIX或LINUX，就要考虑它们都区分文件名的大小写，这在WINDOWS系统下可是感觉不到的错误！当出现页面找不到的情况时，请仔细检查主页链接中的URL与实际文件名大小写是否一致。最好平时在编辑网页时，也养成一律选用小写文件名的习惯。

制作网站大多采用如“image/1.gif”形式的相对路径指定外部文件（如下图），这样有利于脱机调试修改，以及建立多个高速互不干扰的镜像站点，缺点吗……就是网站文件需要保持目录结构，整体上传或移动；若想使部分页面文件提高可移植性，也可采用绝对路径，即用URL指定外部文件（如：http://www.cfan.com.cn/index.html），这样的页面在网上放到哪都可正常浏览。用FrontPage98稍不注意就有可能使用上本地硬盘的绝对路径（如：c:\\temp\\image\\1.gif），此种页面放到网上当然是要出错的。

少数在线服务项目不能在本地硬盘调试，常见于一些统计服务（如网易的计数器）。不要武断地认为这种服务有问题，上传网页后试试再下结论。还有一些脚本在本地运行能通过，上传后却会出问题，之所以产生这类现象的原因很多。例如：一次我在用JavaScript生成动态页面中调用外部CSS文件，结果本地运行正常，上传后却无法打开，最后直到把外部文件内容全部嵌入脚本才解决。
　　最初几次服务器端调试前，我强烈建议大家清空Internet临时文件夹，因为本地调试时留下的缓存记录，会让你无法了解服务器端打开网页的真实速度及效果。访客的耐心是有限的，如果网页打开的速度连你自己都无法忍受，还是赶快更改或精简你的网页结构吧！

　　如今JavaScript和DHtml是产生各种网页特效的主流手段，同时Macromediea公司的梦之队—— DreamTeam（Dreamweaver、Flash、Firework）也正为越来越多的网虫所推崇，大家可别为学它们挑花了眼。我们完全可以走一条边实践边学习的道路，互联网上到处有我们的老师，面对网上随处可见的素材，尽管用它没商量，只要你构思新颖、取舍得当，完全可做出优秀的主页。而且随着经验的积累，你照样会成为一名网页制作高手。这与电脑DIYer们，无需过多深入了解蕊片的内部结构，也能组装出高性能的“爱机”是一个道理。但愿看过本文后，那些还在门外观望的朋友，会早日迈出你的第一步，尽快在网上建起你的家。

显示全部楼层 · 发表于 2005-10-19 09:17:45

厉害啊值得学习
但太长我就只好下才开了

		自动登录	找回密码
密码			注册