7_24_heml_美食网设计_3_完整稿
2015-07-24 21:38
274 查看
完成了美食网完整的设计,代码一共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>
上面是自己写的一部分代码,就注释部分这么贴一个例子,如果你把这段代码的注释看完了,觉得看的不舒服的地方就是写代码的的习惯里需要改进的地方。总的来说,注释还是应该怎么舒服怎么写,只要能让自己知道这个部分是什么,可以在复杂代码里给你提供提示的注释就是好的的注释
我个人是在每一个<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>
上面是自己写的一部分代码,就注释部分这么贴一个例子,如果你把这段代码的注释看完了,觉得看的不舒服的地方就是写代码的的习惯里需要改进的地方。总的来说,注释还是应该怎么舒服怎么写,只要能让自己知道这个部分是什么,可以在复杂代码里给你提供提示的注释就是好的的注释
相关文章推荐
- [LeetCode]Reverse Words in a String
- PAT (Basic Level) Practise (中文)1033. 旧键盘打字(20) C语言
- HDOJ-2091 空心三角形 C语言
- PHP CURL CURLOPT参数说明(curl_setopt)
- JavaScript入门篇 第三天(认识DOM)
- 《ASP.NET》数据绑定——GridView
- Spark 调优
- [C Language]一个c回调函数的例子
- 字节流InputStream和OutputStream简单使用
- 杭电2005 第几天 函数形式
- *HDU 5305 - Delicious Apples (贪心+背包)
- HD2091 空心三角形
- Java 注解
- 每天一个小知识点12(jQueryMobile总结三)
- Spring(九)让Spring自动扫描和管理Bean
- 省市区字典数组嵌套(UI版)
- MATLAB 概率统计
- 数据流重定向
- HDOJ-1201 18岁生日
- C# ?? 和 ?: 运算符