m1net.cn's profilem1net ™PhotosBlogLists Tools Help
    9/11/2005

    浅析日志模板制作

      Web page counters   Hit 
Counter

    Open-Palm ! ™

     

    设计思路 :
    构思制图裁剪嵌入表格设置属性参数调试预览发布
    固定大小模板过于简单,不再讨论,如有问题,留言或给我写信.

    以概念日记为例 :

      Web page counters   Hit 
Counter
     
     
     

     

     
     

    构思 : 设计100%自适应宽,长度可自定义模板,分左右连个日志内容编辑区域,只调整一个区域大小.来实现需求目的,此模板初始设定为调整左区域单元格大小<TD width=90>

    制图 : PhotoShop . Fireworks....习惯哪个用哪个,个人推荐PS.

    裁剪 : 以概念日记为例,按所需大小裁剪模板元素,关节部位,连接部位,重复拉伸部位.此例为9个元素:4个角,2个"丁"字接口,3条线

    嵌入表格 : 因是多区域可变大小设计概念,单一表格已无法实现,所以采用多表格嵌套

    1
    2
       3        4
      5

         6

        7       8

     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
    ......并借助□滚动条颜色生成器□进行进一步设置.

    下来上传图片,调试预览准备发布吧~~ ^_^

    以上是概念日记其中一部分模板结构概念,用边,线,角,"十"字/"丁"字接口等元素来组合所需结构.
    如有问题请留言,没问题也留个言呗,野草长多高啦 ^_^

     

     
     

    Comments (49)

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.

    To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in


    Don't have a Windows Live ID? Sign up

    叶祎wrote:
    :)
    Dec. 23
    竹箫梅笛wrote:
    太难了.老大.偶服了.看的好累.太佩服你了.还是得谢谢.学了不少东东哦.
    June 3
    ○οo︷oCSwrote:
    不懂..不懂...还是不懂...
    能不能弄的简单些呢
    June 2
    巍 崔wrote:
    我想我能看懂,不过要等到我学会忍耐的时候.
    May 16
    Feb. 4
    Picture of Anonymous
    茉莉茶Miriam wrote:
    我是小白 完全看不懂的
    Jan. 15
    Picture of Anonymous
    不瞎说 wrote:
    学习
    Jan. 2
    Picture of Anonymous
    komajie wrote:
    还是不会哦
    Dec. 31
    Picture of Anonymous
    木木卡 wrote:
    哈复杂,看来偶要下点功夫
    Dec. 15
    Picture of Anonymous
    四叶のclover wrote:
    貌似有些复杂...
    Dec. 11
    Picture of Anonymous
    僾鍉折下自己的翅膀à☆鎹給妳飛翔___ wrote:
    大力支持###################
    Dec. 11
    Picture of Anonymous
    liuyk_helen wrote:
    先学习一下,回头请教,谢谢
    Dec. 9
    Picture of Anonymous
    墙头青草 wrote:
    怎么做出来我看不太明白,不过用现成的东西我在行。谢谢!
    Dec. 7
    Picture of Anonymous
    charmaineu wrote:
    恩,我看不懂,看来是我比较笨,不过我会努力学习的。
    Dec. 5
    Picture of Anonymous
    笑天下7190 wrote:
    厉害
    Dec. 1
    Picture of Anonymous
    莲七七 wrote:
    虽然不是完全不懂 但是也算基本不懂 咯呵呵 还是出来一点更为简单的吧
    Nov. 26
    Picture of Anonymous
    ada_zx wrote:
    可能一下子消化不了那么多,不过我尽量吧,谢谢你啊,宝贝!
    Nov. 22
    Picture of Anonymous
    ღ偶然ღ wrote:
    谢谢咯!明白了……已经成功是做一个咯!虽然不太好,也有些抄袭……不过还是成功了!!谢谢!!
    你的idea太好了,让我就不会想到!
    精彩!
    Nov. 20
    Picture of Anonymous
    DreamWiseNeuron wrote:
    好文章
    Nov. 18
    Picture of Anonymous
    绿茶轩 wrote:
    太厉害了,高手。我现在就想解决最基本的问题,就是怎样把日志在主页显示出来,而不是只显示标题。谁能教教我?
    Nov. 17