1、制作显示效果页面

先用Dreamweaver做出网页效果，如下为我们预先做的普通HTML页面效果（图1）：

1、制作显示效果页面 - 图1

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <title>ecmsinfo万能标签使用教程</title>
  6. <style>
  7. td {font-size: 10pt;}
  8. .line{line-height: 14pt;font-size: 10pt;}
  9. A:link {text-decoration: none; color:#000000}
  10. A:visited {text-decoration: none; color: #000000} 
  11. A:active {text-decoration: underline; color: #000000 } 
  12. A:hover {text-decoration: underline;    color: #FF0000;}
  13. </style>
  14. </head>
  16. <body topmargin="0">
  17. <table width="700" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
  18.   <tr>
  19.     <td height="60"> 
  20.       <div align="center"><font size="6"><strong>ecmsinfo万能标签使用教程</strong></font></div></td>
  21.   </tr>
  22.   <tr>
  23.     <td height="25" bgcolor="#FFFFFF">&nbsp; </td>
  24.   </tr>
  25. </table>
  26. <table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
  27.   <tr> 
  28.     <td width="50%" valign="top"> <table width="98%" border="0" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
  29.         <tr> 
  30.           <td height="23"><strong>国内新闻</strong></td>
  31.         </tr>
  32.         <tr> 
  33.           <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="1" cellpadding="3">
  34.               <tr> 
  35.                 <td width="82%" height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
  36.                 <td width="18%"><div align="right">[11-08]</div></td>
  37.               </tr>
  38.               <tr> 
  39.                 <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
  40.                 <td><div align="right">[11-08]</div></td>
  41.               </tr>
  42.               <tr> 
  43.                 <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
  44.                 <td><div align="right">[11-08]</div></td>
  45.               </tr>
  46.             </table></td>
  47.         </tr>
  48.       </table></td>
  49.     <td width="50%" valign="top"> <table width="98%" border="0" align="right" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
  50.         <tr> 
  51.           <td height="23"><strong>国际新闻</strong></td>
  52.         </tr>
  53.         <tr> 
  54.           <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="1" cellpadding="3">
  55.               <tr> 
  56.                 <td width="82%" height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
  57.                 <td width="18%"><div align="right">[11-08]</div></td>
  58.               </tr>
  59.               <tr> 
  60.                 <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
  61.                 <td><div align="right">[11-08]</div></td>
  62.               </tr>
  63.               <tr> 
  64.                 <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
  65.                 <td><div align="right">[11-08]</div></td>
  66.               </tr>
  67.             </table></td>
  68.         </tr>
  69.       </table></td>
  70.   </tr>
  71.   <tr> 
  72.     <td colspan="2">&nbsp;</td>
  73.   </tr>
  74.   <tr> 
  75.     <td colspan="2">
  76. <div align="center">
  77.         <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
  78.           <tr> 
  79.             <td height="23"><strong>图片新闻</strong></td>
  80.           </tr>
  81.           <tr> 
  82.             <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="3" cellpadding="1">
  83.                 <tr> 
  84.                   <td width="25%" height="92"> 
  85.                     <div align="center"><a href="http://www.phome.net" title="帝国软件" target="_blank"><img src="pic.gif" width="135" height="90" border="0"></a></div>
  86.                   </td>
  87.                   <td width="25%">
  88.                     <div align="center"><a href="http://www.phome.net" title="帝国软件" target="_blank"><img src="pic.gif" width="135" height="90" border="0"></a></div>
  89.                   </td>
  90.                   <td width="25%">
  91.                     <div align="center"><a href="http://www.phome.net" title="帝国软件" target="_blank"><img src="pic.gif" width="135" height="90" border="0"></a></div>
  92.                   </td>
  93.                   <td width="25%">
  94.                     <div align="center"><a href="http://www.phome.net" title="帝国软件" target="_blank"><img src="pic.gif" width="135" height="90" border="0"></a></div>
  95.                   </td>
  96.                 </tr>
  97.               </table></td>
  98.           </tr>
  99.         </table>
  100.       </div></td>
  101.   </tr>
  102.   <tr>
  103.     <td colspan="2">&nbsp;</td>
  104.   </tr>
  105.   <tr> 
  106.     <td valign="top"> <table width="98%" border="0" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
  107.         <tr> 
  108.           <td height="23"><strong>娱乐新闻</strong></td>
  109.         </tr>
  110.         <tr> 
  111.           <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="1" cellpadding="3">
  112.               <tr> 
  113.                 <td width="82%" height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
  114.                 <td width="18%"><div align="right">[11-08]</div></td>
  115.               </tr>
  116.               <tr> 
  117.                 <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
  118.                 <td><div align="right">[11-08]</div></td>
  119.               </tr>
  120.               <tr> 
  121.                 <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
  122.                 <td><div align="right">[11-08]</div></td>
  123.               </tr>
  124.             </table></td>
  125.         </tr>
  126.       </table></td>
  127.     <td valign="top"> <table width="98%" border="0" align="right" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
  128.         <tr> 
  129.           <td height="23"><strong>体育新闻</strong></td>
  130.         </tr>
  131.         <tr> 
  132.           <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="1" cellpadding="3">
  133.               <tr> 
  134.                 <td width="82%" height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
  135.                 <td width="18%"><div align="right">[11-08]</div></td>
  136.               </tr>
  137.               <tr> 
  138.                 <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
  139.                 <td><div align="right">[11-08]</div></td>
  140.               </tr>
  141.               <tr> 
  142.                 <td height="23">·<a href="http://www.phome.net" target="_blank">帝国网站管理系统6.0正式版开源发布</a></td>
  143.                 <td><div align="right">[11-08]</div></td>
  144.               </tr>
  145.             </table></td>
  146.         </tr>
  147.       </table></td>
  148.   </tr>
  149. </table>
  150. <br>
  151. <table width="700" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">
  152.   <tr>
  153.     <td height="23">
  154. <div align="center">Powered by <a href="http://www.phome.net" target="_blank">EmpireCMS</a><br>
  155.       </div></td>
  156.   </tr>
  157. </table>
  158. </body>
  159. </html>