[分享] 部落格日記表格及作法

自從新版日記上市幾天以來,不斷有人想問日記的作法。那麼就在出國前,把這篇教學分享給大家吧!

簡單說,要製作一個部落格中的日記小本子,有四個大步驟,需要三個程式。

1) 製作日記底圖
2) 製作其他小圖
3) 製作日記表格
4) 日記表格語法

我就來分這四個步驟說明

 

 

步驟一:製作日記底圖

 

需要 PhotoImpact& 光影魔手 NeoImaging 兩個程式


PhotoImpact中開啟一個空白的圖片(你想要日記本是什麼顏色也可以自訂)
要寬版的、長版的,或者有底圖的、有花案的等等,兮聽尊便。


將圖片存檔備用,並開啟光影魔術手。


打開該檔之後,利用「工具」中的「花樣邊框」製作出你想要的日記本樣式,如下:


筆記本樣式日記底圖


標籤式日記底圖,另用 PhotoImpact 寫上一些文字。

我在文末做出了二十幾種,需要者,請自行下載。


步驟二:製作日記花案小圖

 

一樣用 PhotoImpact 隨便做出一些圖片,當然,你也可以將這些圖案直接弄在底圖上。

一樣,需要者請自取。


步驟三:製作日記表格

 

FrontPage 中製作出一個有捲軸的日記本

第一步先將圖片貼在FrontPage上面(當然要先上傳)

接著看一下圖片的長度與寬度,把他記下來。

接著插入一個表格,表格的長度寬度與底圖的長寬等同。

並將此表格的背景圖片網址填入剛才上傳的日記背景網址

接著插入一個圖層

 


步驟四:日記表格語法

 

如果嫌麻煩,還要自己製作底圖、自己設圖層有的沒有的

那就直接COPY下列語法好了

<div align="center">
<table border="0" width="460" height="540" background="底圖網址" cellspacing="0" cellpadding="0">

<tr>
<td>
<div style=" overflow: auto; word-break: break-all;margin-right: 60px; margin-left: 50px; margin-bottom: 100px; margin-top: 60px; width: 360px; height: 360px;">


日記內文在這裡

</div>
</td>
</tr>
</table>
</div>
 

格式說明:

  1. 黑色的<div>表示讓日記本在畫面的中間顯示。

  2. 第二個橘色的<div>是日記中可顯示捲軸的圖層設定,必須依照不同的底圖而有不同的設定,尤其是 padding(與表格之間的距離)要自行設定。

  3. 紅色的部分則是底圖和表格的設定,這點則與你選擇的底圖有關。選擇的底圖多寬多長,那麼表格的寬度和長度也要隨之更動。

簡單講完,酷不酷?

 

 

 


下面還有其他我做出來的一些底圖,有需要者自行下載吧!
請按右鍵複製網址,並將 _m改成 _o

 

http://static.flickr.com/120/269054884
_f57f8838e0_o.jpg

http://static.flickr.com/85/269054856_149669bc39_o.jpg
http://static.flickr.com/118/269054841_9c596fa3e6_o.jpg
http://static.flickr.com/79/269054827_9175c13ad7_o.jpg
http://static.flickr.com/104/269054814_b59cba985e_o.jpg
http://static.flickr.com/92/269054793_65f40de67e_o.jpg
http://static.flickr.com/93/269054781_3b89fa9ff1_o.jpg
http://static.flickr.com/81/269054768_e8098a6f43_o.jpg
http://static.flickr.com/89/269054761_92d9f463e9_o.jpg
http://static.flickr.com/90/269054742_58f16cdffd_o.jpg
http://static.flickr.com/100/269054728_533638ea46_o.jpg
http://static.flickr.com/112/269054713_59e5572309_o.jpg
http://static.flickr.com/85/269054703_bd27ce47d8_o.jpg
http://static.flickr.com/120/269054694_4d9ca1cf5b_o.jpg
http://static.flickr.com/101/269054683_68845ae126_o.jpg
http://static.flickr.com/119/269054669_11163938dc_o.jpg
http://static.flickr.com/81/269054644_27cd8e6896_o.jpg
http://static.flickr.com/105/269054636_7c29eda653_o.jpg
http://static.flickr.com/95/269054615_f3d4c8ee53_o.jpg
http://static.flickr.com/93/269054601_c29209cb1a_o.jpg
http://static.flickr.com/80/269054590_c63f114d0d_o.jpg
http://static.flickr.com/91/269054571_9a97fea4e8_o.jpg

32 thoughts on “[分享] 部落格日記表格及作法”

  1. 嗚~~超棒的<br />
    <br />
    被amarylliss寫的好像很簡單一樣~~<br />
    <br />
    起立鼓掌ing……………<br />
    <br />
    <br />
    <br />

  2. 回家用自己的電腦<br />
    再來慢慢實作….<br />
    謝謝艾瑪的分享 ^^<br />
    <br />
    希望巴黎一行一切平安順利:)

  3. 每次艾瑪都講解的很詳細<br />
    詳細到讓人覺得很簡單<br />
    可是每次實際去做就好難喔<br />
    不過很謝謝艾瑪不藏私的教導<br />
    祝你的巴黎行一切順心喔<br />
    ~大眼妹

  4. 感謝艾瑪的分享~<br />
    很詳盡的教學文唷!可是自己太沒天分<br />
    測試了好久,還是失敗~><<br />
    找一天一定要好好的研究不可!<br />
    謝謝囉~^^

  5. 每次看艾瑪的日記<br />
    就很佩服<br />
    也很喜歡呢~~<br />
    改天也一定要試試看~~

  6. 真的是很好的教學耶~^^<br />
    謝謝艾瑪的分享~<br />
    也把妳分享的表格帶走了~~謝謝!!:)

  7. frontpage 中的編輯模式中<br />
    都不會顯示捲軸<br />
    你可以在「預覽」的地方看<br />
    或者貼到BLOG中來看<br />
    應該就會自動生成捲軸了

  8. 樓上這位小朋友<br />
    你的火星文我看不太懂<br />
    所以無法回答你<br />
    不好意思喔!

  9. 先感謝艾瑪教導這篇文章^0^<br />
    做到一半,有些問題想請教一下!<br />
    再步驟三 製作日記表格 發現有問題~<br />
    Q:是不是教學圖沒貼對順序?<br />
    Q:文中在插入圖層之後就沒圖片了?<br />
    (我發現第一張圖比較像是插入圖層之後的教學圖片)<br />
    Q:插入圖層之後就算完成了嗎?<br />
    Q:使用方法就是複製語法貼到部落格來使用嗎?<br />
    <br />
    不好意思,問這麼多問題!<br />

  10. 艾瑪<br />
    這篇我反覆看了很久終於看懂<br />
    也成功的發文<br />
    不過很奇怪,一樣的css<br />
    在無名貼卻發生旁邊連結列掉到下面去<br />
    拿到<div>除了圖片不能置中<br />
    其他都恢復,到pixnet貼卻是OK的<br />
    怪了~不能理解

  11. ★ jakeandy<br />
    <br />
    如果你的首頁文章行數設定是三行<br />
    那麼請在三行之後再貼 DIV語法<br />
    免得斷行不完整<br />
    整個畫面就亂了~<br />
    <br />

  12. ˊˋ<br />
    <br />
    <br />
    我還沒案進去"(繼續閱讀…)"的時候<br />
    <br />
    <br />
    畫面只有一個小本子<br />
    <br />
    <br />
    沒有圖片 沒有文字 沒有捲軸<br />
    <br />
    <br />
    只有一個小本子= =<br />
    <br />
    <br />
    唉 果然還是我太笨

  13. 我可以借問一下嗎!?<br />
    <br />
    <br />
    這語法是要貼在哪裡才是恰當的@@?<br />
    <br />
    日記內文<br />
    <br />
    黑色的是指分格線嗎!?<br />
    <br />
    <br />
    橘色的又要怎樣設定呀!?<br />
    <br />
    我不知道耶,,,<br />
    <br />
    http://static.flickr.com/80/269054590_c63f114d0d_o.jpg<br />
    <br />
    <br />
    我選的是這個圖!?<br />
    <br />
    瀏覽看起來好大 *<br />
    <br />
    你可以交我怎樣條小一點嗎!?<br />
    <br />
    <br />
    很謝謝如果你可以解答>"<<br />
    <br />

  14. 嗚嗚嗚。我實在太笨了。
    試了好幾次,還是一樣。不行耶。
    我是貼在寫網誌前邊,
    可是出現還是字,還是字,還是字。
    到底是那裡錯了。
    版主回覆:(12/10/2007 04:12:19 PM)
    你使用的不是「一般編輯」
    而是進階編輯吧?
    所以貼出什麼字 顯示就是什麼字…
    還是得回歸到「一般編輯」
    貼上原始碼才可以喔!

  15. dear 艾瑪:
    謝謝您的回覆,
    我試過了,是可以出現,
    但. . . . . 很軌異的是
    看到的圖案是有. . . 但裡面沒半個內容,如果用修改的話,網誌編輯那邊有字,但就是秀出來就是本子畫面。這我是不是有少打什麼。orz.. 對不起,還要勞煩您回答我,我實在是太笨了,看css也會看到眼花。

發表迴響

你的電子郵件位址並不會被公開。