切割网页的两种方法
1. 用辅助线划分出一个区域即马上切割该区域
区域要装在表格中
区域中不好对齐的部分可考虑用表格的嵌套来显示
表格的嵌套最好不多于3层,一来方便编辑,二来提高显示速度
为了精确地裁切区域块,通常是贴着辅助线来定出裁切范围的
故裁切后的区域块图片大小即为DW中要插入的表格大小
裁切区域时有几个小技巧,根据裁切的内容来定
若是裁切文章栏目列表框,则通常是将框的拐角部分包含在框的上下两部分图片中,
左右边框则可只裁切一小部分以在单元格背景中垂直循环显示即可,
因为表格的高度可自由拉升以显示超出的要显示的文本内容。
背景图片采用风格模板即CSS文件来描述其路径。
文本列表等内容则通过调用动易标签来显示。
就这样逐一区块的划分并切割,然后填充到DW的表格中直至整张网页的完成。
这种方法要自己给每张切割的图片命名,有点麻烦。
2. 用PS的切片工具切割后生成HTML页
这种方法的速度快,它避免了给图片素材元素命名的麻烦
生成的HTML页是一个大表格,这样在实际应用中是不可能的,
因为显示速度肯定很慢,所以要对生成的网页进行修改,
行与行之间分成若干个表格
表格中的复杂单元格结构可改为多个表格的嵌套来完成。
这样裁切可将某些图片如文章列表图片可保留在表格中,
作为背景,以编辑文章列表的HTML表格做辅助对齐作用。
HTML表格修改完成后,再定义CSS。
表格嵌套的小技巧:
外层表格和内层表格宽度相同时,内层表格的宽度要用100%来设置。
若外层表格设置为150,内层表格也设置为150,则外层表格在浏览器中显示时会稍微宽些。
可通过以下代码来实验:
<html><body>
<table width="150" height="50" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
<tr>
<td width="150"><table width="150" height="30" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>外表格为150,<br />
内表格设置为150,<br />
外表格被撑大了</td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="150" height="50" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
<tr>
<td width="150"><table width="100%" height="30" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>外表格为150,<br />
内表格设置为100%,<br />
外表格没被撑大</td>
</tr>
</table></td>
</tr>
</table>
</body></html>