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

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

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

Posted by amarylliss at 痞客邦 PIXNET Comments(33) Trackback(1) Hits(4101)

Shorten Url Forward by E-mail Forward to Guestbook
Posts on this date
▲top

open trackbacks list Trackbacks (1)

  • #1 by 茉然。漠然@pixnet ::PIXNET BLOG:: at 17 January, 2007 14:02

  • [教學] 如何製作線上記事本(上)

    \r\n　　其實，線上記事本是件不太難的小工程。\r\n\r\n　　之前因為在艾瑪家看到一篇amarylliss。艾瑪[隨處走走] - [分享] 部落格日記表格及作法 PIXNET BLOG時引起我很大的興趣，也正巧各家都開...

Comments (33)

Post Comment
  • #1 valence on 2006/10/14 16:37

  • 謝謝艾瑪這篇教學~~

    再來好好研究一下這日記表格

    還有自製表格 ^^
  • #2 smilejojo on 2006/10/14 17:05

  • 酷！
  • #3 hsienlynn on 2006/10/14 17:07

  • 嗚～～超棒的



    被amarylliss寫的好像很簡單一樣～～



    起立鼓掌ing...............







  • #4 maviswang on 2006/10/14 17:20

  • 哇 好棒 謝謝分享
  • #5 jakeandy on 2006/10/14 17:53

  • 果然祈禱靈驗

    真是感謝艾瑪的分享
  • #6 Boo on 2006/10/14 18:49

  • 回家用自己的電腦

    再來慢慢實作....

    謝謝艾瑪的分享 ^^



    希望巴黎一行一切平安順利：）
  • #7 rainer35509 on 2006/10/14 20:48

  • 這個超棒的拉

    艾瑪真是超慷慨的～
  • #8 yujen0825 on 2006/10/14 22:03

  • 謝謝艾瑪的教學＆分享！很實用的一篇教學～
  • #9 MeiyiWu on 2006/10/14 22:39

  • 贊啊!
  • #10 lowinnie0917 on 2006/10/14 23:11

  • 每次艾瑪都講解的很詳細

    詳細到讓人覺得很簡單

    可是每次實際去做就好難喔

    不過很謝謝艾瑪不藏私的教導

    祝你的巴黎行一切順心喔

    ~大眼妹
  • #11 hsl on 2006/10/15 01:36

  • 感謝艾瑪的分享~

    很詳盡的教學文唷！可是自己太沒天分

    測試了好久，還是失敗~><

    找一天一定要好好的研究不可！

    謝謝囉~^^
  • #12 devika1959 on 2006/10/16 14:15

  • 謝謝妳,雖然我做的不好，但是還是謝謝好的分享。
  • #13 santorini on 2006/10/17 20:04

  • 我在Erica 家看到...覺得好新奇...

    謝謝艾瑪的分享唷~
  • #14 sallysoup on 2006/10/18 17:27

  • 每次看艾瑪的日記

    就很佩服

    也很喜歡呢~~

    改天也一定要試試看~~
  • #15 Maymay on 2006/10/18 17:49

  • 真的是很好的教學耶~^^

    謝謝艾瑪的分享~

    也把妳分享的表格帶走了~~謝謝!!:)
  • #16 katherine819 on 2006/10/18 18:46

  • 艾瑪 我是無名新手

    我不董日記表格的最後成果是什麼

    如何應用

    有沒有完成圖可以參考咧?
  • #17 avading on 2006/10/30 11:07

  • 做好底圖了，但是不知道怎麼在frontpage弄卷軸耶!!
  • #18 amarylliss on 2006/10/30 11:14

  • frontpage 中的編輯模式中

    都不會顯示捲軸

    你可以在「預覽」的地方看

    或者貼到BLOG中來看

    應該就會自動生成捲軸了
  • Private Comment
  • #20 amarylliss on 2006/11/21 22:13

  • 樓上這位小朋友

    你的火星文我看不太懂

    所以無法回答你

    不好意思喔！
  • #21 ARIES6533 on 2006/11/23 18:21

  • 請問一下!文章內ㄉ捲軸要如何用呢?

    麻煩你!

    感謝!
  • #22 juiyaya on 2006/11/24 10:02

  • 先感謝艾瑪教導這篇文章^0^

    做到一半，有些問題想請教一下!

    再步驟三 製作日記表格 發現有問題~

    Q：是不是教學圖沒貼對順序?

    Q：文中在插入圖層之後就沒圖片了?

    (我發現第一張圖比較像是插入圖層之後的教學圖片)

    Q：插入圖層之後就算完成了嗎?

    Q：使用方法就是複製語法貼到部落格來使用嗎?



    不好意思，問這麼多問題!

  • #23 jakeandy on 2006/11/24 20:16

  • 艾瑪

    這篇我反覆看了很久終於看懂

    也成功的發文

    不過很奇怪,一樣的css

    在無名貼卻發生旁邊連結列掉到下面去

    拿到
    除了圖片不能置中

    其他都恢復,到pixnet貼卻是OK的

    怪了~不能理解
  • #24 amarylliss on 2006/11/25 02:05

  • ★ jakeandy



    如果你的首頁文章行數設定是三行

    那麼請在三行之後再貼 DIV語法

    免得斷行不完整

    整個畫面就亂了～



  • #25 jakeandy on 2006/11/25 08:00

  • 原來是這樣

    感謝解惑!
  • #26 emily2005 on 2006/12/02 20:12

  • 庫
  • #27 stylesweat on 2006/12/05 19:40

  • ˊˋ





    我還沒案進去"(繼續閱讀...)"的時候





    畫面只有一個小本子





    沒有圖片 沒有文字 沒有捲軸





    只有一個小本子= =





    唉 果然還是我太笨
  • #28 likelove18 on 2006/12/07 13:23

  • 我也要來試試看

    呵呵呵~
  • #29 likelove18 on 2006/12/07 13:52

  • 弄了好久還是弄不出來

    不曉得是哪裡出錯了

    我再試試看吧
  • #30 egyacom35 on 2006/12/10 20:25

  • 我可以借問一下嗎!?





    這語法是要貼在哪裡才是恰當的@@?



    日記內文



    黑色的是指分格線嗎!?





    橘色的又要怎樣設定呀!?



    我不知道耶,,,



    http://static.flickr.com/80/269054590_c63f114d0d_o.jpg





    我選的是這個圖!?



    瀏覽看起來好大 *



    你可以交我怎樣條小一點嗎!?





    很謝謝如果你可以解答>"<



  • #31 George on 2007/01/17 21:10

  • 您好棒喔！

    您好....酷^^
  • #32 yunro1128 pixnet user on 2007/12/10 23:30

  • 嗚嗚嗚。我實在太笨了。
    試了好幾次，還是一樣。不行耶。
    我是貼在寫網誌前邊，
    可是出現還是字，還是字，還是字。
    到底是那裡錯了。
  • 你使用的不是「一般編輯」
    而是進階編輯吧？
    所以貼出什麼字 顯示就是什麼字...

    還是得回歸到「一般編輯」
    貼上原始碼才可以喔！

    amaryllissreplied on 2007/12/11 00:12

  • #33 yunro1128 pixnet user on 2007/12/11 14:34

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

Comment Permissions: Allow commenting

Leave Comment

*帳號/暱稱
E-mail
Personal Website
Comment Title
*Comment
* Private Comment