在可視化CSS編輯器方面，GoLive在版本6已經(jīng)成型，其設計構(gòu)思甚至成為許多專業(yè)CSS編輯器模仿的對象，如眾所周知的TopStyle。近來隨著中文版GoLive的發(fā)布，引發(fā)了業(yè)內(nèi)網(wǎng)頁制作軟件之爭。面對這個在國內(nèi)幾乎是一夜之間出現(xiàn)的新面孔，許多人開始關注。 我曾發(fā)表過有關GoLive將在網(wǎng)頁制作方面取代DreamWeaver的評論，預計后者將轉(zhuǎn)型為數(shù)據(jù)庫開發(fā)組件。這是因為DreamWeaver在數(shù)據(jù)庫方面非常優(yōu)秀，但在可視化網(wǎng)頁編輯方面早已落后(應該說不曾領先)。只是憑借著中文化優(yōu)勢占領著國內(nèi)市場。

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

1：CSS文件管理

GoLive默認是基于站點的軟件，在建立新站點后將自動產(chǎn)生CSS目錄及一個Basic.css文件。如下圖。如果有多個CSS文件存在，加粗的文件為默認CSS文件?？稍诹斜碇杏益I點擊CSS文件設為默認。 建立站點的視頻教程：http://www.99ut.com/tutorial/golive/video/glv002.html (擁有視頻源文件的站點可改為內(nèi)部指向)

而新建的網(wǎng)頁文件也將默認以鏈接方式使用這個外部CSS文件，這在源代碼視圖中可以看到。

對于已經(jīng)打開處于編輯狀態(tài)的頁面，可長按編輯窗口右端紅色箭頭處的CSS編輯圖標來選擇更改外部CSS文件鏈接。如下圖。

還可以在編輯窗口點擊紅色箭頭處的標頭區(qū)，然后選擇其中綠色箭頭處的外部CSS指示圖標(刪除該圖標即脫離該外部CSS文件)，然后在檢查器〖CTRL_1〗調(diào)板中按住藍色箭頭處拖出定位線，定位到站點窗口的CSS文件名稱上。

即使在頁面文件未打開的情況下，也可以在站點窗口中選擇文件(可多選)，然后通過CSS調(diào)板來更改外部CSS文件鏈接，如下圖就是為photo.html和story.html增加new1.css外部樣式表的過程。此外還可以點擊紅色箭頭處的按鈕來增加。 若要脫離外部CSS樣式文件，可在CSS調(diào)板中選擇后點擊紅色箭頭右方的垃圾桶圖標。

2：在頁面中應用樣式

主要使用CSS調(diào)板〖CTRL_SHIFT_9〗來完成頁面內(nèi)容的樣式指定。還可以使用快捷鍵〖CTRL_B〗開啟浮動式CSS調(diào)板，每次操作之后浮動調(diào)板將消失。 如下圖所示，指定的類型分為四種：內(nèi)聯(lián)樣式(鼠標所選部分)、塊樣式(光標所在文字塊)、p(光標所在段落)、body(全頁面)。如果光標位于一個鏈接之上還將出現(xiàn)a(鏈接樣式)，選擇表格或單元格后還將出現(xiàn)table(表格)和td(表格中的單元格)。

雖然完成指定后編輯窗口中將實時顯示效果，GoLive還是提供了指定預覽功能，鼠標在樣式名稱上懸停將出現(xiàn)浮動預覽窗口(下圖紅框內(nèi)即是)，預覽的內(nèi)容包括應用效果和樣式源代碼。根據(jù)不同的指定類型，預覽窗口中的應用效果也不同。如下圖所示，在選擇了GoLive CS2文字后，鼠標懸停于內(nèi)聯(lián)樣式上，預覽窗口就顯示所選的文字內(nèi)容。如果此時鼠標懸停于塊樣式上，預覽窗口文字將顯示為“GoLive CS2中文版”。

3：CSS編輯器

在站點窗口中雙擊css文件就可以開啟樣式編輯器。在開啟的頁面中點擊右上角的CSS編輯按鈕(本篇第3圖所示)也可以開啟編輯器。兩者的區(qū)別在于前者是編輯外部樣式文件，后者是編輯自身html樣式表。

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

CSS內(nèi)容可大致分為元素樣式和自定義樣式，元素樣式的作用基本都是全局性的，如td將應用于頁面中全部的單元格。而自定義樣式(即類樣式)可選擇性地應用于頁面的某個部分。在編輯窗口左方是樣式列表，其中包含著元素樣式和類樣式，點擊橙色箭頭處可新建元素，點擊紫色箭頭處可新建類。

點擊藍色箭頭處的兩個按鈕可將編輯窗口拆分為源代碼或文本預覽。此外在編輯的同時檢查器調(diào)板〖CTRL_1〗也會出現(xiàn)文本預覽。

在左方選擇一個樣式后，則可進入編輯狀態(tài)，如下左圖，共有7大項目：字體屬性、文本屬性、塊屬性、邊距和填充、邊框和外框、列表項目及其它、背景屬性。默認為字體屬性。相應屬性如果被設定，將會在信息欄(紅色箭頭處)出現(xiàn)圖標。

點擊綠色箭頭處將出現(xiàn)顏色調(diào)板，從中可以選取色彩。GoLive提供了很多專業(yè)的色板。

此外，GoLive可以從對象調(diào)板〖CTRL_2〗中使用CSS布局，如下圖紅色箭頭處。從而實現(xiàn)CSS+DIV的網(wǎng)頁結(jié)構(gòu)。

建立了CSS布局后將產(chǎn)生相應的樣式，可在頁面的樣式編輯器中進行設定。如下左圖?？赏瑫r配合如下右圖的表和框調(diào)板進行選擇。

本文來源于成都網(wǎng)站建設公司與成都網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)成都公司！

標題名稱：用GoLive實現(xiàn)CSS+DIV之一
新聞來源：http://jinyejixie.com/news26/316626.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網(wǎng)站、網(wǎng)站營銷、網(wǎng)站設計公司、手機網(wǎng)站建設、、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)