7_24_heml_美食网设计_3_完整稿

完成了美食网完整的设计，代码一共2600行，就这个设计的经验来说，设计之初对网页完整的了解非常重要，最好是能够在开始coding之前就知道所有需要实现的效果应该如何的布局，表格应该设计成多宽多高，每块小的表格又需要由怎样的的表格来嵌套。当自己对这些都心里有数之后就可以开始coding了，在写单独一块表格的时候，要一直记得这个表格是一个几行几列的表格，否则很可能把本来应该写在不同<td></td>里的内容写到<tr></tr>里。

我个人是在每一个<table>标签上面添加<!-- 嵌套一个n*n的表格 -->注释，表示我应该写几行几列，然后在每个<tr></tr>标签上下分别添加

<!-- 第n行start -->  <!-- 第n行end -->注释,在<td></td>便签前后添加<!-- 主体部分start -->  <!-- 主体部分end -->

Etc.

<!-- 嵌套一个3*1的表格 -->

<table border="0" width="240" height="180" cellpadding="0" cellspacing="0" bgcolor="#FEF8C7">

<!-- 第一行 -->

<tr>

<!-- 标题部分start -->

<td>

<!-- 嵌套一个1*3的表格 -->

<table border="0" width="240" height="31" cellpadding="0" cellspacing="0">

<tr>

<td width="62" height="31"><img src="image/ms_index_017.gif" /></td>

<td width="" height="31" background="image/ms_index_018.gif">

<!-- 嵌套一个2*1的表格 用开控制文字高度 -->

<table border="0" height="5" cellpadding="0" cellspacing="0">

<tr height="9">

<td></td>

</tr>

<tr height="22">

<td><font size="2" color="#C64B64">美食情报站</font></td>

</tr>

</table>

</td>

<td width="10" height="31"><img src="image/ms_index_019.gif" /></td>

</tr>

</table>

</td>

<!-- 标题部分end -->

</tr>

<!-- 第一行end -->

<!-- 第二行start -->

<tr>

<!-- 文字部分 -->

<td>

<!-- 嵌套一个5*1的表格写文字 -->

<table border="0" width="240" height="110" cellpadding="0" cellspacing="0">

<tr>

<td><font size="2" color="#AA8C2D" style="text-indent:1em">·[好姐妹碳烤羊腿]开业羊腿羊排68折</font></td>

</tr>

<tr>

<td><font size="2" color="#AA8C2D" style="text-indent:1em">·宏状元推出大师新菜啦！</font></td>

</tr>

<tr>

<td><font size="2" color="#AA8C2D" style="text-indent:1em">·台湾推出“重口味”食品：大雕烧</font></td>

</tr>

<tr>

<td><font size="2" color="#AA8C2D" style="text-indent:1em">·江边诱惑巫山烤全鱼[烤鱼6.8折]</font></td>

</tr>

<tr>

<td><font size="2" color="#AA8C2D" style="text-indent:1em">·广州新东方烹饪学校牵手大运会</font></td>

</tr>

</table>

</td>

</tr>

<!-- 第二行end -->

<!-- 第三行start -->

<tr>

<td>

<!-- 嵌套一个2*1的表格 -->

<!-- 显示更多》》 -->

<table border="0" width="240" height="35" cellpadding="0" cellspacing="0">

<tr height="10">

<td></td>

</tr>

<tr height="25">

<td align="right"><font size="2" color="#775D0C">更多>></font></td>

</tr>

</table>

</td>

</tr>

<!-- 第三行end -->

</table>

 

上面是自己写的一部分代码，就注释部分这么贴一个例子，如果你把这段代码的注释看完了，觉得看的不舒服的地方就是写代码的的习惯里需要改进的地方。总的来说，注释还是应该怎么舒服怎么写，只要能让自己知道这个部分是什么，可以在复杂代码里给你提供提示的注释就是好的的注释