用GoLive實現CSS+DIV之一

css

在可視化CSS編輯器方面，GoLive在版本6已經成型，其設計構思甚至成為許多專業CSS編輯器模仿的對象，如眾所周知的TopStyle。近來隨著中文版GoLive的發布，引發了業內網頁製作軟體之爭。面對這個在國內幾乎是一夜之間出現的新面孔，許多人開始關注。
我曾發表過有關GoLive將在網頁製作方面取代DreamWeaver的評論，預計後者將轉型為資料庫開發組件。這是因為DreamWeaver在資料庫方面非常優秀，但在可視化網頁編輯方面早已落後(應該說不曾領先)。只是憑藉著中文化優勢佔領著國內市場。

在CSS+DIV方式逐漸成為主流網頁結構的今天，一款功能完善使用簡單的CSS編輯器是非常必要的，並且應該融合到網頁制軟體之中，在這方面，GoLive領先同行軟體至少兩年。只是之前由於開發商不關注中文市場而一直不為人知。今天我們就來粗略看一下如何在GoLive中使用CSS編輯器。

1：CSS檔案管理

GoLive預設是基於網站的軟體，在建立新網站後將自動產生CSS目錄及一個Basic.css檔案。如下圖。如果有多個CSS檔案存在，加粗的檔案為預設CSS檔案。可在列表中右鍵點擊CSS檔案設為預設。
建立網站的視頻教程：http://www.99ut.com/tutorial/golive/video/glv002.html (擁有視頻源檔案的網站可改為內部指向)

而建立的網頁檔案也將預設以連結方式使用這個外部CSS檔案，這在原始碼視圖中可以看到。如下圖。

對於已經開啟處於編輯狀態的頁面，可長按編輯視窗右端紅色箭頭處的CSS編輯表徵圖來選擇更改外部CSS檔案連結。如下圖。

還可以在編輯視窗點擊紅色箭頭處的標題區，然後選擇其中綠色箭頭處的外部CSS指示表徵圖(刪除該表徵圖即脫離該外部CSS檔案)，然後在檢查器〖CTRL_1〗調板中按住藍色箭頭處拖出定位線，定位到網站視窗的CSS檔案名稱上。

即使在分頁檔未開啟的情況下，也可以在網站視窗中選擇檔案(可多選)，然後通過CSS調板來更改外部CSS檔案連結，如下圖就是為photo.html和story.html增加new1.css外部樣式表的過程。此外還可以點擊紅色箭頭處的按鈕來增加。
若要脫離外部CSS樣式檔案，可在CSS調板中選擇後點擊紅色箭頭右方的垃圾桶表徵圖。

2：在頁面中應用樣式

主要使用CSS調板〖CTRL_SHIFT_9〗來完成頁面內容的樣式指定。還可以使用快速鍵〖CTRL_B〗開啟浮動式CSS調板，每次操作之後浮動調板將消失。
如下圖所示，指定的類型分為四種：內聯樣式(滑鼠所選部分)、塊樣式(游標所在文字塊)、p(游標所在段落)、body(全頁面)。如果游標位於一個連結之上還將出現a(連結樣式)，選擇表格或儲存格後還將出現table(表格)和td(表格中的儲存格)。

雖然完成指定後編輯視窗中將即時顯示效果，GoLive還是提供了指定預覽功能，滑鼠在樣式名稱上懸停將出現浮動預覽視窗(下圖紅框內即是)，預覽的內容包括應用效果和樣式原始碼。根據不同的指定類型，預覽視窗中的應用效果也不同。如下圖所示，在選擇了GoLive CS2文字後，滑鼠移至上方於內聯樣式上，預覽視窗就顯示所選的文字內容。如果此時滑鼠移至上方於塊樣式上，預覽視窗文字將顯示為“GoLive CS2中文版”。

3：CSS編輯器

在網站視窗中雙擊css檔案就可以開啟樣式編輯器。在開啟的頁面中點擊右上方的CSS編輯按鈕(本篇第3圖所示)也可以開啟編輯器。兩者的區別在於前者是編輯外部樣式檔案，後者是編輯自身html樣式表。

現在我們來看一下GoLive的樣式編輯器，分為可視化編輯和提供給代碼狂人使用的原始碼(紅色箭頭處)兩大視圖。並提供了樣式搜尋器(綠色箭頭處)，這個看似簡單的搜尋其實非常全面，點擊放大鏡處可選擇搜尋的選項。

CSS內容可大致分為元素樣式和自訂樣式，元素樣式的作用基本都是全域性的，如td將應用於頁面中全部的儲存格。而自訂樣式(即類樣式)可選擇性地應用於頁面的某個部分。在編輯視窗左方是樣式列表，其中包含著元素樣式和類樣式，點擊橙色箭頭處可建立元素，點擊紫色箭頭處可建立類。

點擊藍色箭頭處的兩個按鈕可將編輯視窗拆分為原始碼或文本預覽。此外在編輯的同時檢查器調板〖CTRL_1〗也會出現文本預覽。有關樣式編輯器的其他設定可參考視頻教程：http://www.99ut.com/tutorial/golive/video/glv023.html