|
在可視化CSS編輯器方面，GoLive在版本6已經(jīng)成型，其設(shè)計(jì)構(gòu)思甚至成為許多專業(yè)CSS編輯器模仿的對(duì)象，如眾所周知的TopStyle。近來(lái)隨著中文版GoLive的發(fā)布，引發(fā)了業(yè)內(nèi)網(wǎng)頁(yè)制作軟件之爭(zhēng)。面對(duì)這個(gè)在國(guó)內(nèi)幾乎是一夜之間出現(xiàn)的新面孔，許多人開(kāi)始關(guān)注。
我曾發(fā)表過(guò)有關(guān)GoLive將在網(wǎng)頁(yè)制作方面取代DreamWeaver的評(píng)論，預(yù)計(jì)后者將轉(zhuǎn)型為數(shù)據(jù)庫(kù)開(kāi)發(fā)組件。這是因?yàn)镈reamWeaver在數(shù)據(jù)庫(kù)方面非常優(yōu)秀，但在可視化網(wǎng)頁(yè)編輯方面早已落后(應(yīng)該說(shuō)不曾領(lǐng)先)。只是憑借著中文化優(yōu)勢(shì)占領(lǐng)著國(guó)內(nèi)市場(chǎng)。
在CSS+DIV方式逐漸成為主流網(wǎng)頁(yè)結(jié)構(gòu)的今天，一款功能完善使用簡(jiǎn)單的CSS編輯器是非常必要的，并且應(yīng)該融合到網(wǎng)頁(yè)制軟件之中，在這方面，GoLive領(lǐng)先同行軟件至少兩年。只是之前由于開(kāi)發(fā)商不關(guān)注中文市場(chǎng)而一直不為人知。今天我們就來(lái)粗略看一下如何在GoLive中使用CSS編輯器。
1：CSS文件管理
GoLive默認(rèn)是基于站點(diǎn)的軟件，在建立新站點(diǎn)后將自動(dòng)產(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)頁(yè)文件也將默認(rèn)以鏈接方式使用這個(gè)外部CSS文件，這在源代碼視圖中可以看到。如下圖。
對(duì)于已經(jīng)打開(kāi)處于編輯狀態(tài)的頁(yè)面，可長(zhǎng)按編輯窗口右端紅色箭頭處的CSS編輯圖標(biāo)來(lái)選擇更改外部CSS文件鏈接。如下圖。
還可以在編輯窗口點(diǎn)擊紅色箭頭處的標(biāo)頭區(qū)，然后選擇其中綠色箭頭處的外部CSS指示圖標(biāo)(刪除該圖標(biāo)即脫離該外部CSS文件)，然后在檢查器〖CTRL_1〗調(diào)板中按住藍(lán)色箭頭處拖出定位線，定位到站點(diǎn)窗口的CSS文件名稱上。
即使在頁(yè)面文件未打開(kāi)的情況下，也可以在站點(diǎn)窗口中選擇文件(可多選)，然后通過(guò)CSS調(diào)板來(lái)更改外部CSS文件鏈接，如下圖就是為photo.html和story.html增加new1.css外部樣式表的過(guò)程。此外還可以點(diǎn)擊紅色箭頭處的按鈕來(lái)增加。
若要脫離外部CSS樣式文件，可在CSS調(diào)板中選擇后點(diǎn)擊紅色箭頭右方的垃圾桶圖標(biāo)。
2：在頁(yè)面中應(yīng)用樣式
主要使用CSS調(diào)板〖CTRL_SHIFT_9〗來(lái)完成頁(yè)面內(nèi)容的樣式指定。還可以使用快捷鍵〖CTRL_B〗開(kāi)啟浮動(dòng)式CSS調(diào)板，每次操作之后浮動(dòng)調(diào)板將消失。
如下圖所示，指定的類型分為四種：內(nèi)聯(lián)樣式(鼠標(biāo)所選部分)、塊樣式(光標(biāo)所在文字塊)、p(光標(biāo)所在段落)、body(全頁(yè)面)。如果光標(biāo)位于一個(gè)鏈接之上還將出現(xiàn)a(鏈接樣式)，選擇表格或單元格后還將出現(xiàn)table(表格)和td(表格中的單元格)。
雖然完成指定后編輯窗口中將實(shí)時(shí)顯示效果，GoLive還是提供了指定預(yù)覽功能，鼠標(biāo)在樣式名稱上懸停將出現(xiàn)浮動(dòng)預(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文件就可以開(kāi)啟樣式編輯器。在開(kāi)啟的頁(yè)面中點(diǎn)擊右上角的CSS編輯按鈕(本篇第3圖所示)也可以開(kāi)啟編輯器。兩者的區(qū)別在于前者是編輯外部樣式文件，后者是編輯自身html樣式表。
現(xiàn)在我們來(lái)看一下GoLive的樣式編輯器，分為可視化編輯和提供給代碼狂人使用的源代碼(紅色箭頭處)兩大視圖。并提供了樣式搜索器(綠色箭頭處)，這個(gè)看似簡(jiǎn)單的搜索其實(shí)非常全面，點(diǎn)擊放大鏡處可選擇搜索的選項(xiàng)。
CSS內(nèi)容可大致分為元素樣式和自定義樣式，元素樣式的作用基本都是全局性的，如td將應(yīng)用于頁(yè)面中全部的單元格。而自定義樣式(即類樣式)可選擇性地應(yīng)用于頁(yè)面的某個(gè)部分。在編輯窗口左方是樣式列表，其中包含著元素樣式和類樣式，點(diǎn)擊橙色箭頭處可新建元素，點(diǎn)擊紫色箭頭處可新建類。
點(diǎn)擊藍(lán)色箭頭處的兩個(gè)按鈕可將編輯窗口拆分為源代碼或文本預(yù)覽。此外在編輯的同時(shí)檢查器調(diào)板〖CTRL_1〗也會(huì)出現(xiàn)文本預(yù)覽。有關(guān)樣式編輯器的其他設(shè)定可參考視頻教程：http://www.99ut.com/tutorial/golive/video/glv023.html
>
在左方選擇一個(gè)樣式后，則可進(jìn)入編輯狀態(tài)，如下左圖，共有7大項(xiàng)目：字體屬性、文本屬性、塊屬性、邊距和填充、邊框和外框、列表項(xiàng)目及其它、背景屬性。默認(rèn)為字體屬性。相應(yīng)屬性如果被設(shè)定，將會(huì)在信息欄(紅色箭頭處)出現(xiàn)圖標(biāo)。
點(diǎn)擊綠色箭頭處將出現(xiàn)顏色調(diào)板，從中可以選取色彩。GoLive提供了很多專業(yè)的色板，如下右圖就是著名的VisiBone配色表。
其他6類屬性設(shè)定如下各圖所示。
此外，GoLive可以從對(duì)象調(diào)板〖CTRL_2〗中使用CSS布局，如下圖紅色箭頭處。從而實(shí)現(xiàn)CSS+DIV的網(wǎng)頁(yè)結(jié)構(gòu)。
建立了CSS布局后將產(chǎn)生相應(yīng)的樣式，可在頁(yè)面的樣式編輯器中進(jìn)行設(shè)定。如下左圖�？赏瑫r(shí)配合如下右圖的表和框調(diào)板進(jìn)行選擇。
有關(guān)GoLive的CSS具體操作已做成視頻教程，大家可通過(guò)文章前面的鏈接觀看或訪問(wèn)http://www.99ut.com/tutorial，有關(guān)使用DIV布局的視頻教程及GoLive文字教程將在近期制作。大家互相交流，共同進(jìn)步。
出處：藍(lán)色理想
責(zé)任編輯：趙鵬
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
