CSS編輯工具Topstyle輕鬆打造網頁風格

本文特意為你找來了一款CSS編輯利器——Topstyle，利用它你能輕鬆做出更有風格的網頁來！

精彩、漂亮是每一個設計者在製作網頁時的不懈追求，而網頁的精彩幾乎都離不開CSS的強力“支撐”；CSS是一種為超文字標籤語言提供增強補充服務的技 術，可對每一個html的標籤做精雕細刻的修飾。活用CSS，將會使網頁更加生動活潑。不過，普通的網頁編輯工具在CSS方面，表現難能讓人滿意；為了充 分發揮CSS潛能，設計出更加美麗的網頁.

　　最新版本：3.11
　　檔案大小：3836KB
　　 軟體性質：共用
　　 使用平台：Win9x/Me/NT/2000/XP

　　軟體功能

　 　該程式是一款功能強大的CSS編輯設計工具，功能相當多，不但你可以輕鬆建立各種樣式的檔案，而且方便對已有的樣式進行編輯，其內建的CSS碼檢查功 能，可以讓你減少寫錯的機會。特別是它的HELP檔案中詳細的各種CSS指令介紹，很適合用作參考檔案和初次接觸CSS的使用者學習使用。

　　下載安裝

　 　Topstyle是一款專門用來讓設計和編輯樣式的工具，它的大小已經達到4M左右，可以說該軟體是那種“強壯剽悍”型的，不過身材龐大也意味著該軟體 實現的功能是比較新穎、實用和強大的。利用該軟體，我們可以隨心所欲地建立各種樣式表檔案，並且能為網頁輕鬆設計出各種令你感到非常滿意的視覺效果。從網 上下載下來的Topstyle是一個副檔名為exe的可執行檔，大家在進行安裝之前，可以直接用滑鼠雙擊它，這樣系統就能自動開啟一個標準的 windows程式安裝介面，我們只要按照介面的提示，一路單擊next按鈕就能順利完成安裝了。該程式在沒有註冊的情況下，可以在同一台電腦中使用 20次；隨Topstyle一起安裝到系統中的還有一個名為Topstyle lite的程式，該程式在使用次數上沒有什麼限制，不過在功能方面肯定會有所限制，但對於普通個人使用者來說，它提供的功能已經足夠了！

圖1

　 　安裝完成後，程式在預設狀態下會自動在系統的開始菜單中添加一個Topstyle程式運行功能表項目。此時，我們要是想運行Topstyle程式的話，可以 用滑鼠依次單擊“開始”/“程式”/“Topstyle 3”，螢幕上首先會出現一個樣式定義嚮導視窗，在初次使用該程式時，可以先一路單擊“next”按鈕，這樣就能開啟一個1所示的程式主操作介面了。為 防止日後使用者暫時不需要該軟體時，該程式會佔用的系統資源可能較多，我們可以在控制台視窗中，利用添加刪除程式來將Topstyle程式的所有組件徹底 從系統中清除，因此從這個意義上來說，該軟體還可以稱得上是一款綠色軟體。一旦運行該程式後，該介面就是一種完全的XP風格，讓人感到親切、柔和！

　　建立新的樣式

　 　Topstyle程式為我們提供了幾種建立新樣式檔案的方法，其中比較簡單的一種就是使用嚮導功能來建立樣式檔案；在使用這種方法時，可以先用按一下滑鼠 主介面中的“file”功能表項目，從開啟的下拉式功能表中執行“New style sheet wizard”命令，這樣就能開啟一個2所示的嚮導設定介面；用按一下滑鼠“next”按鈕，在接下來出現的介面中，你就能對網頁中的文字顏色以及背景 顏色進行合適的設定；設定完成後，繼續單擊“next”，接著為網頁中文字選擇一種合適的字型，需要哪種字型時，可以在對應字型前面的方框中打上勾號；完 成了這步設定後，下面你還可以設定網頁中文字的大小，文字的加粗屬性，網頁中超級連結的正常顯示顏色以及單擊後的顏色變化，完成所有相關參數的設定後，向 導設定框還會開啟一個3所示的預覽介面；要是對設定的效果感到滿意的話，可以繼續用按一下滑鼠“next”來完成最後的樣式建立任務。倘若對設定的效果 不滿意的話，還能在這裡單擊“previous”按鈕，來返回到前面的設定頁面中，重新調整網頁的樣式屬性，直到自己滿意為止。最後，我們可以為上面建立 的樣式檔案起一個名稱，同時選擇好檔案儲存的位置，並單擊嚮導介面中的“finish”按鈕結束樣式檔案的建立工作。

圖2

圖3

　　 編輯已有樣式

　 　除了建立新的樣式外，我們還能對目前已經存在的樣式檔案進行編輯和調整。編輯調整時，可以在主介面中依次執行“file”/“open”命令，來將已有 的樣式檔案開啟，任何在Topstyle程式介面中，利用工具列中的各種工具按鈕，來對樣式檔案進行任意修改；要是自己非常熟悉網頁原始碼的話，可以選擇 在原始碼視窗中來進行修改（4所示），倘若對原始碼比較“感冒”的話，我們還能在Topstyle程式介面右上方的“Style Inspector”子視窗中來修改，這樣可以更直接一點，而且在這裡我們幾乎也能修改樣式中的任意參數，比方說網頁文字的大小、字型、顏色，網頁的背景 顏色、超級連結的顏色等。此外，執行功能表列中的“file”/“open from web”命令，在隨後開啟的視窗中直接輸入某網站的網址，我們就能對指定網站上的網頁樣式進行修改和編輯了。

圖4

　　檢查樣式錯誤

　 　在編輯修改樣式的過程中，可能會因操作不慎，出現這樣或者那樣的錯誤，此時你大可不必擔心，因為Topstyle程式為我們提供了CSS碼的錯誤檢查功 能，這樣我們在修改過程中，產生的任何錯誤Topstyle程式都不會忽略。我們對樣式的任何一步修改和建立工作，都在Topstyle程式的“監控”之 下，一旦修改出錯的話，程式會馬上彈出一個對話方塊，5所示，來提醒我們當前樣式中出現了錯誤；同時在主介面的原始碼編輯子視窗中，我們會發現程式在出 錯的地方以紅顏色來反白；而在“Style Inspector”子視窗中，程式會以藍顏色將出錯的地方反白出來；一旦我們將錯誤調整過來後，對應位置處的反白顏色也會自動消失。

圖5

　　預覽樣式效果

　 　Topstyle程式還為我們提供了即時預覽功能，利用該功能，我們對樣式參數每一步的修改效果都能被即時顯示出來。主介面中的“Output”子視窗 就是用來即時預覽樣式效果的，在該子視窗中，我們發現它包含了五個標籤頁面，用按一下滑鼠“preview”標籤，就會看到具體的樣式預覽效果了；由於 Topstyle程式支援各個版本的IE瀏覽器、Netscape瀏覽器以及Opera瀏覽器，因此我們可以對各種樣式進行邊修改邊預覽，從而保證了樣式 編輯的效率。此外，在“Style checker”標籤頁面中，我們能很清楚地看到當前樣式檔案中，有哪些文法上的錯誤，用按一下滑鼠其中的某一錯誤內容後，Topstyle程式還能彈出一 個資訊提示，來知道我們該如何正確改正語法錯誤。在其他的標籤頁面中，我們還可以瞭解到當前樣式表的一些注釋和統計資訊，例如樣式檔案中包含了多少行內容 等。

　　輔助學習功能

　　 Topstyle程式特別為那些剛剛接觸CSS的菜鳥使用者 們，提供詳細的協助功能。利用該功能，使用者可以從該程式內建的help檔案中，查詢到與CSS相關的各種指令的詳細用法介紹，以及編寫CSS原代碼的一些 小技巧，菜鳥完全可以將它作為一個很好的CSS資料來學習使用。

　　 此外，與Topstyle程式一起安裝的Topstyle Lite版本，相對來說，功能更簡潔明了，我們可以在Topstyle程式的安裝目錄中運行這個簡裝版程式；該程式只為我們提供了簡單的樣式檔案的編輯、 建立以及預覽功能，而沒有嚮導建立功能、CSS碼檢查錯誤功能等，不過這些功能對菜鳥使用者來說，已經是綽綽有餘了！

　　 總之，Topstyle程式的整體效能很不錯，是一款不可多得、不可不用的樣式表編輯工具。有了Topstyle程式的協助，相信你一定會成為一位出色的CSS編輯和設計專家。