7>css樣式表在frontpage10中的嶄新應(yīng)用

css在網(wǎng)頁(yè)效果處理中一直比較受關(guān)注,一般情況下應(yīng)用css到指定的網(wǎng)頁(yè)中可以采取兩種不同的方法,外部風(fēng)格頁(yè)與內(nèi)部風(fēng)格定義.

1,外部風(fēng)格頁(yè)

所謂的外部風(fēng)格頁(yè)也就是獨(dú)立開來的擴(kuò)展名為.css的文件,編輯css文件可以在任意的文本處理程序中進(jìn)行,不過畢竟不少作網(wǎng)頁(yè)的新手對(duì)css源代碼的編寫還是不太清楚.

或是出于上面的種種考慮吧,在新的frontpage10中提供了css文件的建立模板,你可以根據(jù)需要定制自己感興趣的模板樣式.

"view"-"task pane",調(diào)出任務(wù)面板,單擊上面的"page temples"項(xiàng),在隨后的"網(wǎng)頁(yè)模板"窗口中選中"style sheets"標(biāo)簽,如圖

列表中提供了12種不同的樣式,選中后,單擊ok,即可查看具體的css代碼信息.建立新的css文件,請(qǐng)選中最上的"normal style sheet"項(xiàng),然后進(jìn)入編輯窗口.關(guān)于更多的css代碼基礎(chǔ)知識(shí)這里就不說了,大家可以查看一下相關(guān)的資料.

不過鑒于直接編寫的困難,frontpage10在"樣式編輯"窗口中提供了一個(gè)手動(dòng)設(shè)定的工具按鈕,如圖

單擊"a style"按鈕,進(jìn)入"style"窗口,開始設(shè)置不同類型的css樣式,完成后所有設(shè)定項(xiàng)目會(huì)自動(dòng)轉(zhuǎn)化成代碼信息,并按先后順序顯示出來.具體的將在內(nèi)部風(fēng)格定義中講到.

完成css文件的創(chuàng)建以后,下一步當(dāng)然就是用它來格式化網(wǎng)頁(yè)了.

進(jìn)入待格式網(wǎng)頁(yè)中,使用菜單"format'-"style sheet link"打開鏈接窗口,如圖

其中"all pages"單選鈕可以將樣式文件應(yīng)用到網(wǎng)站所有網(wǎng)頁(yè)中,而"selected pages"只在當(dāng)前編輯網(wǎng)頁(yè)中使用,一般我們多選擇后者.

單擊"add",在網(wǎng)站根目錄下找到目標(biāo)css文件的位置.當(dāng)然你也可以為同一個(gè)網(wǎng)頁(yè)添加多個(gè)css文件對(duì)象,不過這時(shí)你需要注意他們的前后位置,frontpage會(huì)以優(yōu)先覆蓋的方式來處理其間出現(xiàn)沖突的格式類型.

ok,你會(huì)發(fā)現(xiàn)當(dāng)前網(wǎng)頁(yè)已經(jīng)按照css文件里的設(shè)置自動(dòng)格式化好了.是不是很方便.其實(shí)使用外部風(fēng)格頁(yè)來格式網(wǎng)頁(yè)內(nèi)容,除了可以統(tǒng)一諸多同類頁(yè)的顯示效果外,還有一個(gè)重要的原因就是避免了代碼編寫及瀏覽顯示時(shí)的重復(fù)性,編寫時(shí)提高了工作效率,而瀏覽時(shí)又加快了速度.

外部風(fēng)格頁(yè)的引入代碼也是非常簡(jiǎn)單的,類似下面的形式:

<link rel="stylesheet" type="text/css" href="link.css">