序言：

         许多朋友想要制作个人网站。但总是苦于找不到头绪或不知如何制作。其实网站分很多种。有的是功能性的网站；有的是门户试的网站；也有的是论坛、聊天室等等。但是大致分为3种。既静态、动态、综合。可无论是哪种网站都有一个基本的元素。就是html页面。即便是asp、xml网站，也无法脱离html元素。

         我第一次接触html语言是一盘光碟的欢迎页面。当时我还没有上网。但是我知道通过ie自动打开的这个页面叫做“网页”。看到那个“网页”的第一眼就被那些绚丽的色彩吸引。我想要了解它。但是我没有、不了解也不知道任何编辑网页的软件。但是我却鬼使神差的在ie中选择了“查看原文件”。就这样，一个再普通不过的记事本窗口把我带入了html的世界。

        改一改某个数据，保存然后刷新页面。就这样。我在摸索中逐渐了解了这个神秘的语言。后来我上网了。安装了这个迄今为止依然在使用的dreamweaver。

       有了一些语言基础后的我，开始使用dreamweaver编辑win98中的htt模板。htt模板的结构非常复杂。其变化多端的表达、显示方式影响了如今我的设计方式。

      本教程就教大家如何快速、准确的学习、设计一个html页面。本教程分为2个章节。第一个章节是如何学习html页面和一些学习的技巧。第2个章节通过一些实力教大家如何设计出一个动人的页面。

学习设计：

        学习网页最好还是循序渐进。从书本开始。但是书本只能讲述基本的设计方法。最后是否能达到让人瞠目结舌的效果就全靠自己。
     
       学习的第一个目标便是积累。只有积累才能释放。这个积累包括知识、素材。但是最重要的就是创意。microsoft每年都出几十位百万富翁。福利更是不在话下。长时间的休假、世界各地的游玩。这些都让他们积累了无数的创意。最好的例子就是www.microsoft.com/china！这个页面中，那山是山吗？点击左侧的连接，在新的页面中，那是什麽？是夏威夷的沙滩吗？当然都不是。一点色彩的运用却能引起如此大的视觉震撼。这就叫创意！

       创意、灵感是在玩乐之中产生的。但是无法玩乐的人怎麽办？那就多去一些著名的网站。仔细体验其中的意境吧。

        知道了如何获取灵感。那麽素材又如何获取呢？其实很简单，网上有很多“网页特效”的网站。尝试把你感觉比较好的网站加入收藏夹，以后或许会用到其中的内容哦。

       至于知识的累积。书本是个很好的方式。但是书本只能教你基础内容。想要快速学习高级的知识，还是要“偷”。“偷”知识并不可耻。那是一种好学心。是光荣的。所有的知识都是世界共享的。否则人类不会有今日的成就。但是我所说的这个“偷”并不是“盗用”。而是学习、修改！

       以下我将用3个事例讲述如何学习别人的知识：

1.java程序（修改法）

       许多时候，在“网页特效”网站中的java特效程序并不能满足我们的需求。此时我们就需要修改。如果不知道哪些数值将影响到那个部分不要紧。修改一个数值，保存后再用ie打开查看效果就可以了。不要着急。俗话说心急吃不了热豆腐。
例如下面一段特效（七色风网站—文件夹式菜单）：


//修改下面的样式表属性
<style type=text/css>.sec1 {
border-right: gray 1px solid; border-top: #ffffff 1px solid; border-left: #ffffff 1px solid; cursor: hand; color: #000000; border-bottom: #ffffff 1px solid; background-color: #ff99cc
}
.sec2 {
border-right: gray 1px solid; border-top: #ffffff 1px solid; font-weight: bold; border-left: #ffffff 1px solid; cursor: hand; color: #000000; background-color: #ffe1f5
}
.main_tab {
border-right: gray 1px solid; border-left: #ffffff 1px solid; color: #000000; border-bottom: gray 1px solid; background-color: #ffe1f5
}
</style>

<!--javascript部分-->
           <script language=javascript>
    function secboard(n)
 {
   for(i=0;i<sectable.cells.length;i++)
     sectable.cells[i].classname="sec1";
   sectable.cells[n].classname="sec2";
   for(i=0;i<maintable.tbodies.length;i++)
     maintable.tbodies[i].style.display="none";
   maintable.tbodies[n].style.display="block";
 }
     </script>
<!--html部分-->
           
<table id=sectable cellspacing=0 cellpadding=0 width=300 border=0 class="css3">
 <tbody>
 <tr align=middle height=20>
               
   <td class=sec2 onclick=secboard(0) width="10%">关于本站</td>
               
   <td class=sec1 onclick=secboard(1) width="10%">返回首页</td>
               
   <td class=sec1 onclick=secboard(2) width="10%">返回目录</td>
               
   <td class=sec1 onclick=secboard(3)
             width="10%">赏心悦目</td>
 </tr></tbody></table>
           
<table class=main_tab id=maintable height=180 cellspacing=0
           cellpadding=0 width=300 border=0>
 <!--关于tbody标记-->
 <tbody style="display: block">
 <tr>
               <td valign=top align=middle><br><br>
                 
     <table cellspacing=0 cellpadding=0 width=291 border=0>
       <tbody>
       <tr>
                     <td class="css3">本网站是为广大的网页设计者服务的网站。网站收集了大量的网页素材、jsp编程、图形特效、javast特效和网页制作工具的使用方法。　另外，网站还收集了一些精美的图片和音乐供你欣赏<font size="2"><font color="#000000">。</font></font><br>
           <br>
         </td>
       </tr>
       </tbody>
     </table>
   </td></tr></tbody><!--关于cells集合-->
             <tbody style="display: none">
             <tr>
               <td valign=top align=middle><br><br>
                 
     <table cellspacing=0 cellpadding=0 width=291 border=0>
       <tbody>
       <tr>
                     <td class="css3">
                       <p>去首页看看微风吹拂，竹叶轻摇的特效。</p>
                       <p><a href="../../index.asp">返回首页</a><br>
                         <br>
                       </p>
                     </td>
       </tr>
       </tbody>
     </table>
   </td></tr></tbody><!--关于tbodies集合-->
             <tbody style="display: none">
             <tr>
               <td valign=top align=middle><br><br>
                 
     <table cellspacing=0 cellpadding=0 width=291 border=0>
       <tbody>
       <tr>
                     <td class="css3">
                       <p>本页从上千个网页特效中精选了300多个实用的网页特效。对每个特效我们都做了严格的测试，相信一定能对你的网页制作起到一定作用。</p>
                       <p><a href="../wytx.htm">返回目录</a><br>
                         <br>
                       </p>
                     </td>
       </tr>
       </tbody>
     </table>
   </td></tr></tbody><!--关于display属性-->
             <tbody style="display: none">
             <tr>
               <td valign=top align=middle><br><br>
     <table cellspacing=0 cellpadding=0 width=291 border=0>
       <tbody>
       <tr>
                     <td class="css3">你浏览本网站辛苦了，休息一会，去到本站的赏心悦目找个美眉让她看看你。<a href="../../sxym/sxym.htm">赏心悦目</a><br>
                       <img src="../../sxym/renwu/image/015s.jpg" width="140" height="105">
                       <img src="../../sxym/renwu/image/013s.jpg" width="140" height="105">
                     </td>
       </tr>
       </tbody>
     </table>
   </td>
 </tr></tbody></table>


            在以上特效中，我们首先找到了2个java对象的名字。分别是“sectable”和“maintable”。他们对应的是上侧按钮和下册显示框架。这2个名字在java部分中都有定义。当然，这两个名字是可以改变的。但是java部分中也要改变并与之相同才可以正常使用。而secboard(0)、secboard(1)等分别代表表格内的第一个行（列）、第2个行（列），以此类推。

          在这个特效中，stctable和maintable两个表格是贴在一起的。而在我们的网页中，在某中情况下也许需要将他们分开。这段代码中，stctable和maintable两个表格自身是不相互关联的。所以即使分开也不会影响效果。

          这段特效中，当点击按钮时，被激活的按钮会随之变色。就如同我们桌面“显示属性”对话框的效果一样。而这变色就是使用css渲染。通过修改css，可以使这个特效更加符合我们的页面。而修改css就要依靠你们对css的掌握和平时对好的css程序的累积了。

在此我送给大家一段css（xp按钮样式）：

<style>
.btn {
            border-right: #7b9ebd 1px solid; padding-right: 2px; border-top:
           #7b9ebd 1px solid; padding-left: 2px; font-size: 12px; filter:
           progid:dximagetransform.microsoft.gradient(gradienttype=0,
           startcolorstr=#ffffff, endcolorstr=#cecfde); border-left: #7b9ebd
           1px solid; cursor: hand; color: black; padding-top: 2px;
           border-bottom: #7b9ebd 1px solid
           }
</style>


        通过修改以上的css，还可以变化出不同的效果。
        大家都知道即将推出的vista系统最显著的改变就是没有了“菜单”。取而代之的是类似office的工具条。那麽这种工具条特效应该如何编写呢？仔细研究上述“文件夹式菜单”。稍加改变，就能做成office工具条。

2.获得flash背景(排除法)

      我计划制作一个关于“分布式计算”的网页（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中尽量删除所有文字和图片。通过排查，我发现一段代码：


<div id="flashbg">
     <script src="/china/windowsvista/includes/activexfix.js"></script>
   </div>

根据这个层的名字，我初步可以确定其中的activexfix.js就是flash背景。然后通过该地址，在/china/windowsvista/includes/activexfix.js前加上www.microsoft.com。下载并保存该js文件。

3.打开这个js文件，获得以下代码：

锘¿// jscript file
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="600px" align="top">');
document.write('    <param name="movie" value="/china/windowsvista/includes/bg.swf" />');
document.write('    <param name="quality" value="high" />');
document.write('    <param name="menu" value="false" />');
document.write('    <param name="wmode" value="transparent" />');
document.write('    <param name="play" value="false" />');
document.write('    <param name="loop" value="false" />');
document.write('    <embed src="/china/windowsvista/includes/bg.swf" width="100%" height="600px" loop="false" align="left" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" play="false"></embed>');
document.write('</object>');


其中虽然完全已js方式编写代码，但还是保持基本的flash控件表达式。因此如何修改这个js以便适合自己的网页的方法我就不详细讲述了。

       至此，我就获得了一个完美的flash背景程序。其实这个例子完全可以举一反三。看到别人网站中的某个经典程序。完全可以通过各种方式查看。当然，这并不属于盗用。因为这种程序属于知识。而知识永远不属于“盗窃”。不过如果在网站中加入感谢，感谢这个程序的编写方就更加好了。