今天按照提供的网页完整图片试着设计一张美食网的首页,这张网页整体内容还是很多的,主要是利用表格对整个网页进行布局,再根据每一块具体需要实现的效果在相应位置的单元格内嵌套表格;
总的来说,还是需要对网页有一个整体的了解,大致知道怎么布局,我觉得这需要我们有一个比较好的直觉,比如看到网页的一部分,认真研究一下,就能知道大致需要设计一个几行几列的表格可以相对简单的实现这部分内容;
在知道了一个部分需要如何设计表格之后就要开始coding了,现在我有的一些经验是在coding之前,最好先定好这个表格的width和heigth;在<table></table>标签中我们应该先设置
border=”0”,cellpadding=””,cellspacing=”0”,width和heigth设置成预先定好的,这样可以保证每一个表格在边框等属性上的一致和比较直观的看出代码设计的效果;在<tr></tr>和<td></td>标签中应该在需要的时候设置width和heigth属性,注意<tr></tr>属性没有width属性;
虽然我之前说了我们应该对布局表格有比较好的直觉,但我们还是应该尽量避免过多的表格嵌套,否则代码量会非常多;今天我为了实现网页的左半部分内容,coding了1000+行代码,而周围的同学有的只写了300+的代码,显然可以用也少的代码实现同一种功能要好很多;不过我写的代码中有很多都是为了做到和图片上的效果一直而添加的,处女座有的时候就是想把事情做得完美一点。。。
另外在coding的时候,还需要注意的就是在很多需要的地方添加显而易见的注释,这样可以不至于回头看代码是忘记这些部分代码的功能;比如在一个大表格的开始和结尾添加注释,表示出开始和结束;