Cara's Life

　　很好，相信你一定會用HTML了！那我們就繼續來看看CSS要怎麼編輯吧～一般我常用來編寫網頁的軟體有兩種，一個是DreamWeaver，另一個是EditbPlus，DreamWeaver也可以寫CSS的，而且操作很簡單，不過缺點是裡面關於CSS可操作的元素太少了，只是適合簡單的編輯。而EditPlus的功能有點像記事本，但是比記事本好的是，會用顏色來區分不同的程式碼，例如變數或函式等等等(名稱不記得了~)，也可以用來預覽網頁。

　　然而大家公認最推崇的就是用TopStyle來編寫CSS檔，因為他就像利用DW寫網頁一樣，會自動產生CSS標籤，不用讓你在那邊打英文字打半天，也可以預覽成果。而CSS有兩種形式附在HTML檔裡面，一種是寫在HTML檔裡面，一種是裡用外部連結的方式做。在這邊我先單純的教一般提供Blog樣版的供應商，如樂多或天空部落等等等，大多會提供一些CSS檔的範本，讓使用者自行去變更自己設計新樣版(也就是穿新衣服的意思)。通常這種都是用外部連結CSS檔的方式去做，會有一段語法在網頁的開頭例如：＜link href="http://blog.roodo.com/caracat/site.css" type="text/css" rel="stylesheet" /＞，而test.css就是我們要編輯的CSS檔。(可利用瀏覽器的[檢視]-->[原始檔]來看)

　　用現有的網頁簡單介紹一下TopStyle怎麼修改這些CSS檔吧~首先，先準備一頁.html的網頁吧！你也可以用自己的Blog來做，例如先用瀏覽器開啟自己的Blog，然後選擇瀏覽器左上方的[檔案]-->[另存新檔]，命個名，存在你希望放置的磁碟機位置，OK之後再來做下一步。

　　注意，當你存下網頁的時候，瀏覽器會幫你把網頁和網頁上的資料一起存下來，所以除了一個.html檔之外，還會有一個資料夾，例如我的網站叫做Cara's Life，就會產生一個叫做"Cara's Life.files"的資料夾，在這個資料夾內就會有一個.CSS的檔案。如果是樂多的部落格，可以利用[網頁樣式設定]裡面的[個人化設定]，做法是先選用一個你喜歡的設計樣版，先套用在自己的Blog之後，再到[個人化設定]裡，顯示如下：

把文字欄位裡的文字複製，再到EditPlus(或是記事本)裡面貼上(如下)，存檔時記得選所有檔案，附檔名打上.css。

以上的動作，是為了要取得.CSS檔，不論方法為何，只要你有辦法弄到一個喜歡的CSS檔就可以了。

接下來開使用TopStyle編輯，首先打開.Html檔，如下：

1.開啟的檔案顯示位置，也是在這邊切換檔案，很像Excel裡面的活頁標籤。

2.網頁原始碼的顯示位置，你可以在這邊找到這段語法＜link href="E:\test.css" type="text/css" rel="stylesheet" /＞，請注意E:\test.css代表.css檔放置的位置，像我是要連結放在E槽下面的tset.css檔，而各位放置的位置不同，請改變。如果是放在同一個目錄下面就改成＜link href="test.css" type="text/css" rel="stylesheet" /＞。如果還是沒概念的話，再提問囉~

3.網頁預覽顯示區(很像DW的半程式半預覽工作區)。

HTML檔案打開後，再打開CSS檔(TopStyle的開啟舊檔圖示應該都看的懂吧~~)，打開後如下圖示：

1.CSS檔的元素顯示區，也就是說，現在你的CSS檔裡面編輯了哪些元素，這邊就會顯示出來，你可以從這邊選元素，然後左邊的編輯區(編號3)就會跳到那個元素的位置。

2.元素控制區，每一個元素可以控制的項目不同，例如最常見的就是控制顏色、字體大小、粗體或斜體字、寬多少像素等等等等，這些也可以在編輯區手動Key in。控制區下方有個小小的顯示 "Sample Text"的地方，是元素編輯的預覽區塊，可以按右上角的放大鏡就會顯示這個預覽區塊。

3.CSS檔文字編輯區。

4.CSS檔預覽區

以上是版面簡介，操作方法是：改變CSS檔的某元素的文字大小或顏色，再點到HTML檔那邊去看改變的結果(重點必須html檔有連結到此CSS檔)，由於每個CSS檔所定義的元素名稱不一定相同，所以我現在是Try & Error！！每一個改改看，看看是變動在哪邊，就知道那個元素代表的式控制哪個區塊了。

如果要變更Blog的圖檔，可以在CSS檔裡面看見有圖檔的連結，就把那個圖檔的連結改變成你想要變更的圖檔連結位置就可以了(大小長寬可在CSS檔內調整)。

這只是簡單的介紹TopStyle之如何改變Blog的樣式版。至於其他的操作方式，有興趣的可以自己玩玩看，或者等改日我玩出其他的心得，再發表上來。正所謂凡是起頭難，當知道了原來TopStyle可以這樣邊改邊看的時候，真的是很開心啊!!!

這是我第一次寫教學網頁，很多寫不好的地方請路人們多多包涵，不懂再提問囉~

ps:現在開始要來進行blog改造工程，期待ing~~~

您可能有興趣的文章：