[这个贴子最后由bslwjf在 2006/08/17 01:47am 第 1 次编辑] [color=#FF0000] 制作个人网站教程[/color] [color=#556B2F]序言：[/color] 许多朋友想要制作个人网站。但总是苦于找不到头绪或不知如何制作。其实网站分很多种。有的是功能性的网站；有的是门户试的网站；也有的是论坛、聊天室等等。但是大致分为3种。既静态、动态、综合。可无论是哪种网站都有一个基本的元素。就是html页面。即便是asp、xml网站，也无法脱离html元素。 我第一次接触html语言是一盘光碟的欢迎页面。当时我还没有上网。但是我知道通过ie自动打开的这个页面叫做“网页”。看到那个“网页”的第一眼就被那些绚丽的色彩吸引。我想要了解它。但是我没有、不了解也不知道任何编辑网页的软件。但是我却鬼使神差的在ie中选择了“查看原文件”。就这样，一个再普通不过的记事本窗口把我带入了html的世界。 改一改某个数据，保存然后刷新页面。就这样。我在摸索中逐渐了解了这个神秘的语言。后来我上网了。安装了这个迄今为止依然在使用的Dreamweaver。 有了一些语言基础后的我，开始使用Dreamweaver编辑Win98中的Htt模板。Htt模板的结构非常复杂。其变化多端的表达、显示方式影响了如今我的设计方式。 本教程就教大家如何快速、准确的学习、设计一个html页面。本教程分为2个章节。第一个章节是如何学习html页面和一些学习的技巧。第2个章节通过一些实力教大家如何设计出一个动人的页面。 [color=#556B2F]学习设计：[/color] 学习网页最好还是循序渐进。从书本开始。但是书本只能讲述基本的设计方法。最后是否能达到让人瞠目结舌的效果就全靠自己。 学习的第一个目标便是积累。只有积累才能释放。这个积累包括知识、素材。但是最重要的就是创意。Microsoft每年都出几十位百万富翁。福利更是不在话下。长时间的休假、世界各地的游玩。这些都让他们积累了无数的创意。最好的例子就是www.microsoft.com/china！这个页面中，那山是山吗？点击左侧的连接，在新的页面中，那是什麽？是夏威夷的沙滩吗？当然都不是。一点色彩的运用却能引起如此大的视觉震撼。这就叫创意！ 创意、灵感是在玩乐之中产生的。但是无法玩乐的人怎麽办？那就多去一些著名的网站。仔细体验其中的意境吧。 知道了如何获取灵感。那麽素材又如何获取呢？其实很简单，网上有很多“网页特效”的网站。尝试把你感觉比较好的网站加入收藏夹，以后或许会用到其中的内容哦。 至于知识的累积。书本是个很好的方式。但是书本只能教你基础内容。想要快速学习高级的知识，还是要“偷”。“偷”知识并不可耻。那是一种好学心。是光荣的。所有的知识都是世界共享的。否则人类不会有今日的成就。但是我所说的这个“偷”并不是“盗用”。而是学习、修改！ 以下我将用3个事例讲述如何学习别人的知识： [color=#FF7F50]1.Java程序（修改法）[/color] 许多时候，在“网页特效”网站中的java特效程序并不能满足我们的需求。此时我们就需要修改。如果不知道哪些数值将影响到那个部分不要紧。修改一个数值，保存后再用ie打开查看效果就可以了。不要着急。俗话说心急吃不了热豆腐。 例如下面一段特效（七色风网站—文件夹式菜单）： [color=#0000FF] //修改下面的样式表属性

关于本站

返回首页

返回目录

赏心悦目

本网站是为广大的网页设计者服务的网站。网站收集了大量的网页素材、JSP编程、图形特效、JavaST特效和网页制作工具的使用方法。　另外，网站还收集了一些精美的图片和音乐供你欣赏。

去首页看看微风吹拂，竹叶轻摇的特效。 返回首页

本页从上千个网页特效中精选了300多个实用的网页特效。对每个特效我们都做了严格的测试，相信一定能对你的网页制作起到一定作用。 返回目录

你浏览本网站辛苦了，休息一会，去到本站的赏心悦目找个美眉让她看看你。赏心悦目

[/color] 在以上特效中，我们首先找到了2个Java对象的名字。分别是“secTable”和“mainTable”。他们对应的是上侧按钮和下册显示框架。这2个名字在Java部分中都有定义。当然，这两个名字是可以改变的。但是java部分中也要改变并与之相同才可以正常使用。而secBoard(0)、secBoard(1)等分别代表表格内的第一个行（列）、第2个行（列），以此类推。 在这个特效中，stctable和maintable两个表格是贴在一起的。而在我们的网页中，在某中情况下也许需要将他们分开。这段代码中，stctable和maintable两个表格自身是不相互关联的。所以即使分开也不会影响效果。 这段特效中，当点击按钮时，被激活的按钮会随之变色。就如同我们桌面“显示属性”对话框的效果一样。而这变色就是使用Css渲染。通过修改css，可以使这个特效更加符合我们的页面。而修改css就要依靠你们对css的掌握和平时对好的css程序的累积了。 在此我送给大家一段css（xp按钮样式）： [color=#0000FF] [/color] 通过修改以上的css，还可以变化出不同的效果。 大家都知道即将推出的Vista系统最显著的改变就是没有了“菜单”。取而代之的是类似office的工具条。那麽这种工具条特效应该如何编写呢？仔细研究上述“文件夹式菜单”。稍加改变，就能做成office工具条。不信？看看以下这幅图，在这个侧边栏的最下面一排按钮：

[color=#FF7F50]2.获得Flash背景(排除法)[/color] 我计划制作一个关于“分布式计算”的网页（http://mws.mm9mm.com/fbnet/main.htm）。由于需要，我要使用Flash做背景。可是由于Microsoft最新的控件提示。使用普通方法在页面中放置Flash会显示边框和激活提示。虽然网络上有很多解决方法，但是都不完美。而在Microsoft的Vista网站上（http://www.microsoft.com/china/windowsvista/features/default.mspx），该背景恰恰就是Flash。俗话说解铃还需系铃人。Microsoft的解决方案当然是最完美的。 接下来看看我如何获得这个完美的方案： 1.用“查看原文件”打开http://www.microsoft.com/china/windowsvista/features/default.mspx。将其中的代码复制到Dreamweaver。 2.在Dreamweaver中尽量删除所有文字和图片。通过排查，我发现一段代码： [color=#0000FF]

[/color] 根据这个层的名字，我初步可以确定其中的activeXFix.js就是Flash背景。然后通过该地址，在/china/windowsvista/includes/activeXFix.js前加上www.microsoft.com。下载并保存该js文件。 3.打开这个js文件，获得以下代码： [color=#0000FF]锘¿// JScript File document.write(';';); [/color] 其中虽然完全已js方式编写代码，但还是保持基本的Flash控件表达式。因此如何修改这个js以便适合自己的网页的方法我就不详细讲述了。 至此，我就获得了一个完美的Flash背景程序。其实这个例子完全可以举一反三。看到别人网站中的某个经典程序。完全可以通过各种方式查看。当然，这并不属于盗用。因为这种程序属于知识。而知识永远不属于“盗窃”。不过如果在网站中加入感谢，感谢这个程序的编写方就更加好了。

[color=#006400]编写网页实例教程：[/color] 做网页的第一件事就是策划。要做什麽类型的网页、什麽功能、具体的内容、排版分类后的资源量、风格，这些都要首先考虑到。如果是个人网页。是否能经常的更新内容也是一个问题。以下就我做的一个网页（MWS博善中华（http://mws.mm9mm.com/cry/main.htm））为例，讲述编写过程： 准备： 1.MWS博善中华属于慈善网页。由于是个人网页，没有经历经常更新是个大问题。为了避免内容陈旧。我决定将这个网页做成开放式门户网页。提供“慈善”教学、各大慈善网站地址、捐款地址等。 2.“慈善”就牵扯到捐款。因此要选择长期、稳定、安全、合法、正规的捐款机构。经过最终的挑选，我选择了“中华慈善总会”和“中国红十字会”的捐款地址。 3.由于需要适应各种分辨率，我决定使用iframe方式框嵌“博善中华”。 4.考虑到色彩、美工。我决定使用浅色调。风格仿效Microsoft的Vista页面。这样可以给人已远眺的感觉。 所有图片可以到“MWS博善中华”中找到。最终效果也请参考“MWS博善中华”。准备好左右图片后，进行下列步骤： 1.在网页目录中新建一个记事本文件，输入如下css代码： [color=#0000FF] a:link { color: #000000} 输入完毕后保存。并将该文件的文件名和扩展名改为mosb.css 2.再次新建一个文本文件，打开并输入如下css代码： [/color][color=#0000FF] .Tm80 { filter: Alpha(Opacity=80)} .Tm70 { filter: Alpha(Opacity=70)} .Tm60 { filter: Alpha(Opacity=60)} .Tm50 { filter: Alpha(Opacity=50)} .Tm40 { filter: Alpha(Opacity=40)} .Tm30 { filter: Alpha(Opacity=30)} [/color] 保存后，更改文件名和扩展名为：ap.css 3.使用Dreamweaver新建一个页面，并设置为“显示代码和设计视图”。 4.右键点击该页面，选择“页面属性”。设置“左边界”、“顶部边界”、“边界宽度”、“边界高度”均为 0。 5.在标签之上输入CSS代码： [color=#0000FF] [/color] 6.打开“对象”界面的“标准”栏。选择“插入图像”按钮。在页面顶部插入headerbg.jpg（该图像可在MWS博善中华中找到）。 7.新建1层，层编号为Layer1，左0，上150，宽255，高266。 8.在Layer1层中插入图像leftbk.gif。并将该图像命名为logback，地图名为logback，宽241，高558。 9.新建1个层，层编号为Layer2，左802，上62，宽97，高109。 10.在Layer2层中插入图片imgk.gif（该图片在MWS博善中华中可以找到）。并设置名称为c2，地图名为c2。宽200，高250。 11.新建一个层，层编号为Layer3，左804，上265，宽195，高248。背景色设置为#FCFCFB。 12.在Layer3层中输入如下代码： [color=#0000FF]

中华慈善总会u

中国红十字会u

热线电话： (010)66055848 传 真： (010)66083264 联系人： 苏辉、王玲 接受捐款账号及地址如下: 银行汇款: 人民币捐款帐户开户单位： 中华慈善总会 帐号：0200002809014450409 开户行： 中国工商银行北京西四支行 外币捐款帐户： 开户单位： 中华慈善总会 帐号： 00100914908091014 开户行： 中国银行总行营业部[北京市复兴门内大街1号] 邮局汇款: 中华慈善总会地址： 北京市西城区二龙路甲33号新龙大厦 邮编： 100032

救灾专用账号： 开户单位： 中国红十字会总会 人民币开户行： 中国工商银行北京分行东四南支行 人民币账号： 0200001009014413252 外币开户行： 中信实业银行酒仙桥支行 外币账号： 7112111482600000209 热线电话： (8610)65139999 地址： 北京市东城区北新桥三条8号 邮编： 100007

[/color] 这段代码是MWS博善中华页面右侧“中华慈善总会”、“中国红十字会”的body部分。 13新建一个层，层编号为main，左241，上129，宽563，高217。z轴为5。然后输入以下代码： [color=#0000FF]

基本u

关于u

什麽是慈善事业： \n\n慈善事业是您对个人、社会、国家所实施的救助活动。您对任何个人、社会、国家所进行的任何救助、帮助都统称为“慈善”。';);MM_showHideLayers(';menu';,';';,';hide';)" height="12">什麽是慈善事业 我为什麽要做慈善事业： \n当您手中拿着水晶酒杯，站在落地窗前看着窗外的鹅毛大雪。您是否曾想到也许在您脚下正有一个年轻的生命因为没有一件御寒的衣服而失去生命？ \n\n当您在梯形讲室中看着讲师谈吐激昂，您是否想到正有一名失学儿童的生涯渺茫？ \n\n当您在群山之颠看着那日出东方所散射出的耀眼光芒，您是否想到曾经跟您一样的一家人正在灾难中濒临死亡？ 当您看着自己的儿女茁壮成长，您是否知道有一个跟您的子女一样大的小孩失去了所有的亲人？ 当您看着父母的喜笑颜开，您是否知道有一个孤寡老人正在疾病中孤单的离开这个世界？';);MM_showHideLayers(';menu';,';';,';hide';)" height="9">我为什麽要做慈善事业 我能做哪些慈善事业： \n您做慈善事业，我们感谢您的善心。 尽您自己所能。您的任何帮助，我们都是需要的。如果您的经济允许，您可以给慈善基金会捐款、捐物。 您也可以将“慈善”融入您的生活。您可以参加公益事业。您可以每天抽出几个小时在孤儿院中照料孤儿或在老人院中陪老人聊天。 \n如果您愿意，您也可以在闲暇之余，去贫困地区亲自救助、帮助那里的失学儿童或穷苦民众。 如果您愿意奉献更多。我们推荐您参加援外组织。根据您的专业，您可以在您居住区以外地区或国家担任义工。';);MM_showHideLayers(';menu';,';';,';hide';)" height="2">我能做哪些慈善事业 我应该如何做慈善事业： \n\n您的奉献我们身表感激！ \n\n如果您要捐款捐物。您可以联系您当地的慈善团体或联系“博善中华”给您推荐的慈善组织。 \n\n在右侧，“博善中华”为您提供了“中华慈善总会”和“中国红十字会”的电话、地址和汇款账户。这些信息MWS确保是正确并且合法的（详情请看声明）。\n\n\n\n您也可以点击左侧的推荐列表进入“中华慈善总会”或“中国红十字会”的官方网站进行查询或募捐。 \n\n\n\n如果您想参加志愿者、义工活动。您可以联系您当地的慈善组织或志愿者、义工团体。您也可以点击左侧列表为您列出的“义工联盟”或“中国志愿服务网”。 \n\n\n\n如果您是专业医师或专业急救医师，您想参加援外救援。您可以直接联系您当地的红十字会。或直接联系“中国红十字会”。';);MM_showHideLayers(';menu';,';';,';hide';)" height="9">我应该如何做慈善事业 法律法规请您选择：';);MM_showHideLayers(';menu';,';';,';show';)" height="6">法律法规u

MWS博善中华责任声明： \n\n MWS博善中华是已方便您的爱心为目的的门户式网络。\n 博善中华会聚了各大慈善网络。使您更加快捷的奉献您的爱心。\n\n 博善中华所提供给您的“中华慈善总会”和“中国红十字会”的电话、地址、邮政编码、人民币捐款账户、外币捐款账户都经过MWS确认并核实。MWS确保其是安全、正确、合法的。\n\n 博善中华左侧联合网络中给您提供的慈善网站的网址都经MWS核实。MWS确认是安全、正确的。\n\n 博善中华只提供“中华慈善总会”和“中国红十字会”的捐款账号。并不具备其管理能力。因此如果因您捐款而遭受到任何损失，MWS不承担任何责任。';);MM_showHideLayers(';menu';,';';,';hide';)" height="22">MWS博善中华责任声明 MWS博善中华版权声明：\n MWS博善中华版权归MWS、B-S-L所有。任何人在未经MWS工作组、B-S-L许可的情况下不得已任何理由、任何方式仿效、转载、修改MWS博善中华。\n\n MWS博善中华中提供的第三方网址的版权归该网站所有。\n\n MWS工作组保有对以上声明的解释权。';);MM_showHideLayers(';menu';,';';,';hide';)" height="19">MWS博善中华版权声明 联系方式和慈善联盟： \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n如果您有任何问题或建议，欢迎您联系MWS网络-慈善中华工作组。电子邮件：bslwjf@hotmail.com\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n 或者您也可以联系以下慈善中心：\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n 中华慈善总会： 电话：（010）66055848。 传真：(010)66083264。 地址：北京市西城区二龙路甲33号新龙大厦。 邮编：100032 \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n 中国红十字会：\n\n\n\n\n\n\n\n\n\n\n\n\n\n 电话：(8610)65139999。地址：北京市东城区北新桥三条8号。 邮编：100007。\n\n\n\n\n\n\n\n\n\n\n\n\n\n 其他慈善中心联系方式请参照该网站说明。您本地慈善中心或慈善组织的联系方式请您查询当地“114”。\n\n\n\n\n\n\n\n\n\n\n 以下是《慈善中华》中部分资源借取方：其版权归该方所有。排名不分先后：\n\n\n\n\n\n\n\n 中华慈善总会|| 中国红十字会|| 台湾佛教慈济慈善基金会|| 义工联盟|| 中国志愿服务网|| 慈善在线||';)">联系方式和慈善联盟

[/color] 以上代码是页面中“基本”“关于”项的整体代码。 14.添加一下java代码以前： [color=#0000FF] [/color] 细心的人一定发现了以上的java中，function secBoard(n)和function main(n)部分就是页面中的两个“文件夹式菜单”的java代码（12、13步中添加的文件夹式菜单）。而后面部分包括了“隐藏层”、“设置层文本”和“交换图像”的Java代码。这两部分的的代码以后会用到。 15.新建1个层，层编号为Layer4，左11，上247，宽205，高251。z轴设为4。 16.在Layer4层内新建表格20行，1列。宽100%。边框0，边距0，间距0。并在其中输入要导航的著名慈善网站的名称： [color=#0000FF] 推荐给您： 中华慈善总会 中国红十字总会 台湾佛教慈济慈善基金会 义工联盟 中国志愿服务网 慈善在线 国际救援： 绿色和平组织(greenpeace) 世界关怀组织(world concern) 救护国际(Shelter For Life) 世界自然基金会(WWF) 世界救济组织(World Relief) 亚洲基金会(The Asia Foundation) 世界宣明会 个人基金会： 李嘉诚基金会 国政部门： 中华人民共和国卫生部 [/color] 输入完毕后，给各个名称加上连接。 14.给Layer4层内的所有连接的的标签中添加 class="menulink" CSS。然后给每行表格添加title="*****"提示标签。如“title="进入“慈善在线”"”。 15.新建1层，层标签为Layer6，左133，上111。宽42，高50。z轴为9。 16.准备一张宽70，高70的全透明gif图片（无任何图像的全透明图片）。并插入Layer6层中。命名为logm 17.制作第16步中所输入的慈善网站的logo图片。大小为70×70。 18.给Layer4层内的所有连接所属的表格架添加“交换图像”和“恢复交换图像”。每个表格架完成后的代码应该类似“ [color=#0000FF]

[color=#FF7F50]适应分辨率方法：[/color] 1.新建一个页面命名为main.htm。 2.在以前输入如下css： [color=#0000FF] [/color] “back”css的意思是让headerbgb.jpg作为背景，但是只横向重复图像，禁止纵向重复图像。 3.新建1表格，行2，列1，宽413，高100%，中间对其。 4.在第一行表格中输入如下代码： [color=#0000FF] [/color] 5.在第二行表格里输入基本的版权信息。 整个网页到此就制作完毕。使用ie打开main.htm文件看看。是不是很完美？其实制作网页很简单，只要注意细节。懂得变通，即使很简单的一些代码也可以有新的意境！但是最后还要提醒大家一下。仔细看看页面中“版权声明”。不只是自己的版权，别人的版权也很重要。在这个网页中，我使用了很多其他网站的资源。在“版权声明”中，我把这些网站也都一一列举。当然，因为在这个网页中有关系到汇款的地址。所以在责任方面也要做一定的澄清。 制作网页就是几个词：积累、变通、耐心！

顶一个先！
全是代码，看起来晕啊！
做个网页真就这么难？！

做网页并不难，随便做点什麽东西就是一张网页了。但是做个经典的网页就要下功夫了。创意是第一，积累是第二，耐心是第三。

楼主辛苦！
呵呵！俺的个人网站也快出来的

做网页很简单啊，难就难在做精做好。我教给大家的方法其实就是通过简单的代码使页面变的更加的好的方式