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

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

1：CSS文件管理

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

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

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

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

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

2：在頁面中應(yīng)用樣式

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

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

3：CSS編輯器

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

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

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

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

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

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

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

建立了CSS布局后將產(chǎn)生相應(yīng)的樣式，可在頁面的樣式編輯器中進(jìn)行設(shè)定。如下左圖。可同時(shí)配合如下右圖的表和框調(diào)板進(jìn)行選擇。

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

標(biāo)題名稱：用GoLive實(shí)現(xiàn)CSS+DIV之一
新聞來源：http://www.rwnh.cn/news26/316626.html

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

廣告

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