设计思路 :
构思 → 制图 → 裁剪 → 嵌入表格 → 设置属性参数 → 调试预览发布
固定大小模板过于简单,不再讨论,如有问题,留言或给我写信.
以概念日记为例 :
构思 : 设计100%自适应宽,长度可自定义模板,分左右连个日志内容编辑区域,只调整一个区域大小.来实现需求目的,此模板初始设定为调整左区域单元格大小<TD width=90>
制图 : PhotoShop . Fireworks....习惯哪个用哪个,个人推荐PS.
裁剪 : 以概念日记为例,按所需大小裁剪模板元素,关节部位,连接部位,重复拉伸部位.此例为9个元素:4个角,2个"丁"字接口,3条线
嵌入表格 : 因是多区域可变大小设计概念,单一表格已无法实现,所以采用多表格嵌套
1
| 2
|
2
|
9 |
10 |
11 |
| 12 |
13 |
14 |
| 15 |
16 |
17 | |
外框 :
1. 首先踩入的一个层/表格(1×1),<DIV style="WIDTH: 100%; HEIGHT: 300px"> 设置其参数,宽为100%,高度自定,初始值300px
2. 层1内的1×2表格,表格属性:高宽皆为100%,边框为0,单元格属性自定,一般只修改一个单元格就可.
左区域 :
在表格2插入3×2表格,表格属性:高宽皆为100%,边框为0,如表格属性高/宽不为100%,那么其内单元格如设置高/宽为100%,均不起作用.
3. 左上角图,插入式
4. 上边线图,图宽1象素,背景图,平铺,单元格属性:宽100%
5. 左边线图,图高1象素,背景图,平铺,单元格属性:高100%
6. 日志内容编辑区域,可直接在此单元格内编辑,建议使用层,以达到卷轴滚动效果,详细参考喜欢运动的爬山虎之页面特技系列之七(各种样式的滚动文本框)[2005-08-26] R这里就不再写出了,单元格属性高宽皆为100%/层属性高宽皆为100%
7. 左下角图,插入式
8. 下边线图,图宽1象素,背景图,平铺,单元格属性:宽100%
右区域 :
在表格2插入3×3表格,表格属性:高宽皆为100%,边框为0,如表格属性高/宽不为100%,那么其内单元格如设置高/宽为100%,均不起作用.
9. "丁"字接口1,插入式
10. 上边线图,图宽1象素,背景图,平铺,单元格属性:宽100%
11. 右上角图,插入式
12. 中竖线图,图高1象素,背景图,平铺,单元格属性:高100%
13. 日志内容编辑区域,可直接在此单元格内编辑,建议使用层,以达到卷轴滚动效果,详细参考喜欢运动的爬山虎之页面特技系列之七(各种样式的滚动文本框)[2005-08-26] R这里就不再写出了,单元格属性高宽皆为100%/层属性高宽皆为100%
14. 右边线图,图高1象素,背景图,平铺,单元格属性:高100%
15. "丁"字接口2,插入式
16. 下边线图,图宽1象素,背景图,平铺,单元格属性:宽100%
17. 右下角图,插入式
注意 :
1. 设置一外框,层/表格1×1均可,宽100%,高自定义,其内层/表格属性均为高宽100%,自适应外框大小,达到1控N效应,方便修改
2. 如表格属性高/宽不为100%,那么其内单元格如设置高/宽为100%,均不起作用.
3. 此模板其内区域表格之单元格,有高/宽100%属性,而在其周围均有带元素单元格,那么必须有一处支撑区域,否则会被有高/宽100%属性的表格挤扁.
如为了在角写字而将3.7.9.11.15.17设置为背景图,而非插入式.此模板支撑点,3.7选一,9.15选一,11.17选一,我目前要角没用,故6处都是插入式图片.
4. 两处日志内容编辑区,建议插入层.详细参考喜欢运动的爬山虎之页面特技系列之七(各种样式的滚动文本框)[2005-08-26] R......并借助□滚动条颜色生成器□进行进一步设置.
下来上传图片,调试预览准备发布吧~~ ^_^
以上是概念日记其中一部分模板结构概念,用边,线,角,"十"字/"丁"字接口等元素来组合所需结构.
如有问题请留言,没问题也留个言呗,野草长多高啦 ^_^