使用免費的BlueGriffon來自制一個部落格主題模版

Views

一開始, 先介紹一下BlueGriffon這個免費的開源軟體. 它是一個最佳的網頁製造軟體Dreamweaver的免費替代軟件. 它一共有分三種版本, 免費使用, 付費單機執照, 和商用執照. 本系列將就免費的版本來介紹如何自製一個Blogger的主題模版. 

首先, 先到這裡下載BlueGriffon

然後按下已下載的.exe檔案, 照提示依序按下[Next]鍵來完成安裝bluegriffon
最後按下[Finish]鍵並打開bluegriffon, 就會出現下面的畫面, 按下[OK]便可開始使用bluegriffon了.
開始工作前, 先做如下的設定: 
➤[Tools]→[Perferences]
➤按下[Documents]→取消勾選 [Show HTML comments]
➤然後[Close]這個對話框.

接下來, 
➤在[Panels]下→勾選[Style Properties]→[DOM Explorer]→[Stylesheets]
➤然後按下左上方的[+Create a ne wpage]打開一個空白的工作區域
➤按下下方的[Dual View]
此時可以看到左右二個區塊, 左邊的區塊就是你的網站頁面會呈現出來的樣子, 所有文字的部份, 都可以直接輸入左邊的區塊, 右邊的區塊就是網頁後面的HTML程式碼, 所有主題格式的設定, 都是輸入在右邊的區塊裡.

接下來, 可以到這個網站拿免費的基本版型格式, 這個網站目前提供除了下面12種不同的版型之外, 還有一個完全沒有側欄和上下欄空白版型, 共計13種.
這個網站的基本版型中先挑選一個基本格式, 在本範例中, 使用的格式是[一個側欄位再加上下欄]→然後按下[Go to Step 2]的鍵. 

按下了[Go to Step 2]之後, 會到一個格式設定的頁面, 可以在這裡做背景色和字體及字型的設定. 目前可以就使用預設值不改, 因為接下來會示範如何直接在BlueGriffon裡做修改. 所在這個頁面只需直接拉到頁面下方, 勾選[I agree to the above terms]→然後按下[Generate code]

按下[Generate code]之後, 會到下面這個畫面:
➤點一下HTML Code下方的程式碼框, 便會自動選取所有的HTML程式碼
➤按下[Ctrl+C] 來copy 所有的HTML程式碼
然後回到BlueGriffon, 
➤在HTML區域用[Ctrl+A]選取裡面所有的HTML程式碼
➤然後按下[Ctrl+V]把剛才從Layout Wizard上copy的版型在這裡貼上

此時, 就會看到左邊的區塊不再是空白一片, 而會有如下字樣, 而右邊的區塊則是從Layout Wizard上copy過來的HTML程式碼.

加入CSS程式碼

首先先儲存目前的工作:
➤按下[File]→[Save As]→存成: index.html,
➤接下來[File]→[Close the current tab], 

貼入css碼:
➤按下左上方的[+Create a ne wpage]打開一個新的工作區域
➤下方選[Dual view]
➤在HTML區內按下[Ctrl+A]選取全部的程式碼
➤按下[Delete]鍵清除右邊工作區裡所有的程式碼
➤然後回到剛才Layout Wizard的頁面 
➤在剛才copy的HTML code下面有CSS code, 滑鼠點選一下CSS code的程式碼, 會自動選取
➤按下[Ctrl+C] copy所有的程式碼
➤然後回到BlueGriffon裡, 在右邊HTML工作區內按[Ctrl+V]貼上
接下來儲存目前的工作:
➤按[File]→[Save As]→選取All Files→輸入檔名: styles.css
➤然後按下[Save]鍵
➤接下來, [File]→[Close the current tab]

然後:
➤接下來, [File]→[Open File]
➤選取剛才存的index.html→按下[Open]鍵
此時, 會看到再次打開的index.html已經有側欄和上下欄位了.

接下來加入網站的標題:
➤按下[Format]→[Page Properties]
➤在[Document properties]下, 輸入網站的[Title], 這裡加入的名稱很重要, 是給搜尋引擎用的, 所以一定不要留白.

現在, 則可以開始寫入主頁的本文內容了. 這個就跟在Word上打字一樣, 在左邊的WYSIWYG工作區內直接輸入主頁的內容.
加入網站Logo和Copyright的符號

一個網站如果有上下欄位, 通常上方欄位會是加入網站的Logo或是網站名, 下方欄位則是加入copyright. 加入網站的Logo, 只需直接把游標在左邊的工作區裡的上方欄位裡點二下, 便可以刪除不要的文字.
➤接下來, 按下上方的[Insert]→[Image]
➤選取網站的Logo
➤加入[Title]和[Alternate text]
➤然後按下[OK]鍵即可

加入Copyright只需直接把游標在左邊的工作區裡在下方欄位點二下, 便可以刪除不要的文字, 並輸入copyright 字樣
➤接下來, 按下上方的[Insert]→[Characters and symbols]
➤然後選[0080  Latin-1 Supplement]→點下Copyright的符號
➤按下[Insert]鍵即可


預覽

現在, 可以在瀏覽器中先預覽一下目前的網頁長什麼樣子:
➤按下[Ctrl+O]快捷鍵
➤找到剛才儲存的index.html→選取後按下[Open]鍵
便可以看到目前的網站在瀏覽器下的樣子了.
<延伸閱讀>
如何使用BlueGriffon自製的版型在Blogger上?
BlueGriffon字型設定

0 留言:

張貼留言