2004/09/13 另類音樂
2004/09/13
2004/09/14 懷念無間
2004/09/14

▍魔法快速編輯漂亮文章 [ Version 1.5 Power by Andy Liu . ]


█ 事前準備:


  文章用色說明:紅字:語法的指令綠字:指令的參數 紫字:語法註解

  其實這只不過是個簡單的小技巧,稱不上什麼「語法」教學,但是我是覺得蠻好用的!「魔法快速編輯文章」聽起來好像很炫,其實也沒有這麼誇張拉,還魔法咧!你們可以看到「教學分享」裡面的文章,比起其他文章要來的「有看頭」,許多重點的部分都有加入顏色,使得瀏覽起來更為方便、舒服!一般來說要達到這樣的效果,只要在發表新文章時,在文章裡面加入語法控制就可以了,或者在發表文章時也有一個「進階編輯器」,都能夠幫助我們更為視覺化的編輯文章,但是說真的,網誌裡面發表文章的文字區塊還是有許多限制,文章一長,便顯的有點礙手礙腳!現在就往下看吧,一個好用的小技巧!


█ 觀念說明:


★注意:你必須要有 Microsoft Office FrontPage 或者是 Macromedia Dreamweaver 這兩套軟體其中一套!

  這個小技巧,主要是利用這些網頁編輯軟體WYSIWYG(所見及所得)的特性,所謂的所見及所得就是說,在編輯網頁的時候,你想要什麼樣式,例如文字要紅色、要粗體、大小、位置怎樣,都可以直接調整,你不用自己寫語法,程式便能夠幫你編輯好,而且你在程式畫面看到的編輯畫面,就是網頁上傳之後的畫面,簡單來說,網誌(BLOG)經常都要動用的「語法手術」,常常你編寫了一段程式,就要讓他重新整理一次,才能看到結果,如果不滿意,又要回到「修改」中,去修改語法,真的是很麻煩!現在你能很方便的使用 Microsoft Office FrontPage 或者是 Macromedia Dreamweaver 這兩套軟體其中一套,來編寫網頁,編寫好了之後,再直接將「原始碼」貼到網誌裡面,就樣一來不是就方便多囉!

  或許有的人覺得這樣好像多此一舉,反而更顯的麻煩,但是這樣的步驟其實不難!往下看下去就知道囉!

  在此之前,我先來列出幾個使用這種方式編輯文章的優點:

  1. 所見及所得,不會發生要重複作修正的問題!
  2. 檔案可以直接存成網頁的檔案,儲存方便,檔案管理也方便許多!
  3. 不需要學習或記得太多的語法!
  4. 編輯文章更為快速!
  5. (保留!有想到再補充!^^)

 


█ 實際操作:


  1. 首先先開啟你的 Microsoft Office FrontPage 或者是 Macromedia Dreamweaver 軟體

[圖一]

  1. 請先隨便開始一個空白的頁面(檔案),先隨便打上幾個文字(如圖二)!例如:我愛魔法快速編輯漂亮文章

★注意:在此僅作為示範,實際內容當然依照你文章的內容編寫!至於 Microsoft Office FrontPage 或是 Macromedia Dreamweaver 的軟體操作,並不是本文的重點,在此並不贅述,您可以參考相關書籍,以作進一步學習!

[圖二]

  1. 接著請注意[圖三] (Microsoft Office FrontPage畫面)和[圖四] (Macromedia Dreamweaver畫面)。分別找到「程式碼」的部分,將其點一下,作切換的動作!

  ★注意:正常情況下,一進入軟體應該是處於「設計」的狀態!

[圖三]

 

[圖四]

  PS1  畫面會因為軟體的版本不同,而有所差異!但是選項應該都是相同!

  1. 接著看到[圖五] 的部分,你會看到畫面已經轉化成「程式碼」,全部都是一堆HTML語法!仔細看一下,紅色圈選的部分,就是我們在「設計」畫面編輯的文字,其他程式碼都已經由軟體本身所產生出來!

[圖五]

  1. 現在作重要的部分來了!請在程式語法中找到…..的部分!將…..之間的「程式碼」(HTML語法)全部複製起來。[圖六]

  ★注意:不包含…..!

[圖六]

  1. 接下來回到BLOG的部分,在首頁找到「發表新文章」[圖七]

[圖七]

  1. 找到發表文章中「自動加
    的部分[圖八],將勾選取消(就是不要打勾喔!)

[圖八]

 

  1. 找到「文章內容」的部分[圖九],將剛剛複製的「程式碼(HTML語法)」貼上,然後按確定!就大功告成囉![圖十]

[圖九]

[圖十]


█ 語法說明:


★注意:此部分屬於補充知識,和本文並不直接的關係!可自行決定閱讀與否!

  現在看到[圖十一]的部分,看一下裡面的HTML基本的語法。

[圖十一]

  在一個完整的HTML網頁程式裡面,一定會包含下面三大部分:

  1. …:為宣告HTML檔案的開始,加上斜線 “/” 的為HTML檔案的結束。所以網頁的HTML語法一定都要包含在這一個部分裡面。
  2. …:head(頭):標籤裡面,就像我們人身體頭的部分一樣,記憶著許多的資訊。這部分裡面的語法,大都是記著網頁標題、網頁使用的程式語言、網頁使用的語系等等資訊。通常我們在瀏覽網頁的時候,這部分幾乎(少部分標籤會)是不會呈現在我們的眼前。雖然是這樣,但是這一個部分卻是缺之不可,正如你有看過那個人沒有頭嗎?
  3. …:body(身體):正如人的身體一般,佔了人的絕大部分,這也是網頁主要的部分,所有我們看到的網頁內容,包括文字、圖片等等這些語法,都是寫在這個部分裡面!

  瞭解這些之後,在回顧一下剛剛「實際操作」的第四個步驟。為何我們只需要複製網頁…..之間的「程式碼」(HTML語法)呢?有猜到了嗎?因為當我們閱覽BLOG的時候,網頁都是透過伺服器產生出來,一開始就會幫我們寫好的的部分,通常這部分也不會允許我們自行修改。而的內容就是我們在發表新文章時,在「文章內容」裡面填寫的部分,所以囉!我們透過Microsoft Office FrontPage Macromedia Dreamweaver 編寫網頁時,軟體本身又會產生一次的部分,為了避免重複,當然我們必須將這個部分去除囉!

  ★注意:在網頁當中都只能夠是唯一!不能有重複的語法出現!


|| 歡迎轉載 但請勿盜用|| http://andyliu.24cc.com
Copyright (C) 2004 Andyliu Design . All rights reserved .

35 Comments

  1. tsjunko 說:

    給你個鼓勵^^~

  2. 小藍 說:

    呵~我都沒想過要這樣做耶~
    真是感謝啦~^++++++^

  3. tjliu 說:

    你試試看囉~有心得在和我分享喔^^

  4. 藍色魚 說:

    你好!可否問你一個問題?
    你的網頁教學是全部用網頁編輯軟體編好後再貼到blog裡面
    的嗎?文字也許可以,但是圖片的部分你是怎麼放上去的?你
    的圖當滑鼠放在圖上時都沒有超連結乃,這怎麼用的?
    你是先把圖上傳到相步,再一段文字插一張圖這樣慢慢用嗎?
    還是有別的更快的方法呢?
    感謝…

  5. tjliu 說:

    1. 我的網頁教學完全是用「魔法快速編輯漂亮文章教學」這
    裡面說到的!(當然要愛自己推薦的方式囉!)

    2. 圖片一樣可以在網頁編輯軟體編輯好阿,一般都會有插入
    圖片的功能阿!(只要將圖片位址社對就行囉!)

    3. 圖片沒有連結是因為我沒有寫「連結的語法」阿!這並不
    是什麼特殊效果喔!

    4. 我用的插圖不是網誌裡面那種加入相簿的方式,完全都是
    用網頁編輯軟體編寫!

    PS 如果還是不清楚在發問喔!^^

  6. 藍色魚 說:

    歐!我懂了…感謝 感謝
    但我最主要的迷思是…
    你是不是在網頁編輯軟體裡編好圖文後
    然後把原始碼複製到blog裡面 最後把所有的圖一起上傳
    因為圖上傳到相步後檔名會重編
    所以圖上傳好了 你再把圖的連結全部重新改一次
    是這樣嗎?
    謝謝!

  7. tjliu 說:

    我是先上傳好圖檔!
    在編輯時就把連結也順便搞定囉!

  8. 藍色魚 說:

    歐!原來是將…嗯!了解了解!
    太感謝了!哈哈哈!
    如果我有要放個什麼教學的文章上去的話
    我就用你的決招 這樣一定快多了
    哈哈哈!受教了!

  9. tjliu 說:

    你也有要寫教學阿?
    不錯喔!
    寫哪方面的呢?錄音嗎?
    哈哈!大家多多交流喔!^^

  10. jessierudd 說:

    你好,我想請問為何我的程式碼不會出現像範例中
    face=”…”>的字樣,而是出現的字樣????
    而style都在之前就定義好了!!!!

    我是用Dreamweaver,請問該怎麼設定才會變成跟範例一樣??

    謝謝!!!!

  11. tjliu 說:

    to jessierudd:

    這主要是Dreamweaver的問題
    他本身內建的CSS編輯功能便是如此
    在編輯網頁請不要使用CSS樣式
    用一般的顏色、字型設定
    不要套用CSS
    這樣就會和ForntPage一樣囉!

  12. jessierudd 說:

    謝謝!!!

    但是再請問一下….
    如何設定不套用CSS樣式呢??!!

    再次感激…

  13. jessierudd 說:

    呵….我找到了不套用的方法了!!!

    總之,一切都萬分感激!!!

  14. tjliu 說:

    to jessierudd:

    不用這麼客氣^^

  15. vivianweng 說:

    關于用html語言美化自己的網誌,在msn space那裏很多教程哦。不
    過由于msn space禁止暸某些html語言,所以相對美化傚果少很多,
    如果這裏沒有禁止的話,倒是可以達到很美的傚果,^0^

  16. tjliu 說:

    to vivianweng:

    不過MSN Space的介面漂亮多,就是囉!^^

    PS 你這篇留言空白好多行喔…

  17. aspdoctor 說:

    恩?
    我以為無名只吃

  18. tjliu 說:

    to aspdoctor:

    其實標準的HTML語法是

    而不是無名的

    這或許是網頁設計上的一些考量
    我就不清楚囉!
    但是學習標準的~
    往後到那邊都能使用的^^

  19. FionLiu 說:

    介紹的好仔細,
    謝謝你的說明,
    讓我學到了很多。
    感恩~

  20. tjliu 說:

    to FionLiu:

    不用這麼客氣^^
    你也姓劉嗎?

  21. 新手 說:

    請問我家的是Microsoft FrontPage
    不是Microsoft Office FrontPage
    沒有大大說的那種「程式碼」的部分
    能夠用ㄇ
    還是只能乖乖的學語法呢?
    抱歉 對於電腦我還挺笨的

  22. tjliu 說:

    to 新手:

    ㄟ~Microsoft FrontPage & Microsoft Office FrontPage
    指的都是同一套軟體,只是省略了Office。
    至於你說的「程式碼」是有的…
    你在仔細看一下頁面!

  23. fanny 說:

    真的很受用,謝謝你的教學
    感激落淚中

  24. tjliu 說:

    to fanny:

    謝謝你的留言喔!
    有空歡迎常常來逛逛喔!

  25. dd82478 說:

    請問一下唷~我想要把我ㄉ個人檔案~~留言板~~放我喜歡ㄉ背景要怎
    ㄇ用呢??可以交我嗎??
    還有我想要把音樂放整首ㄉ~~可是都找部到ㄟ!!!~~不知道怎ㄇ用~你
    可以交我ㄇ??

  26. tjliu 說:

    to dd82478:

    背景的部分你可以參考「CSS 標準語法大整理」這篇文章。
    http://www.wretch.cc/blog/tjliu&article_id=889860

    音樂除非你本身拿到的檔案就是完整的,否則就沒有辦法喔!
    你要找到完整的音樂檔!

  27. msgreen 說:

    借轉喔^^
    謝謝你喔~學會怎麼變換字體了:)

  28. tjliu 說:

    to msgreen:

    恩恩,有空常來我BLOG逛逛喔~^^

  29. f0248258 說:

    我們家沒有Microsoft Office FrontPage 程式ㄝ
    這樣要怎麼用???

  30. tjliu 說:

    to f0248258:

    此篇文章是針對有軟題的朋友喔,或者
    你可以到www.adobe.com 下載試用版的Dreamweaver8.0
    他比FrontPage功能更強大喔!

  31. f0248258 說:

    嗯~我知道了
    謝謝你喔!

  32. 路人甲 說:

    “你可以到www.adobe.com 下載試用版的Dreamweaver8.0”
    我也是沒有以上2個軟體
    可是到了那個網址
    都是英文
    不知道要怎麼下載~”~
    可以告訴我嗎?

  33. lnnoheh 說:

    yahoo的BOLG也可以這樣用嗎?

  34. tjliu 說:

    to lnnoheh ,

    適用各種部落格喔^^

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *