Dreamweaver中CSS樣式表的應用實(shí)例
時(shí)間:2006-09-11 00:00來(lái)源:BitsCN.com整理 作者:中國網(wǎng)管聯(lián)盟 點(diǎn)擊:1652次
要想做出精美的網(wǎng)頁(yè)一定要用到CSS。層疊樣式表 (CSS) 是一系列格式規則，它們控制網(wǎng)頁(yè)內容的外觀(guān)。CSS 樣式使您可以控制許多僅使用 HTML 無(wú)法控制的屬性。CSS的重要性就不多說(shuō)了，要說(shuō)清楚CSS可以寫(xiě)成一本大書(shū)。本文的目的，是想通過(guò)一篇文章，掌握CSS最基本最重要的應用。
第一部分:要實(shí)現的目標:把一個(gè)網(wǎng)頁(yè)的文字變成好看的12象素(px)大小。
實(shí)現方法:通過(guò)“重定義HTML”標簽，定義td(td是單元格的標簽)的字體大小為12象素(px)。因為整個(gè)網(wǎng)頁(yè)內容放在表格中的，也是放在單元格中的，所以，可能通過(guò)重定義單元格樣式，改變所有放在單元格里的內容。當然，重定義表格標簽table，也可以實(shí)現同樣的效果。
簡(jiǎn)明步驟:打開(kāi)樣式面板→在類(lèi)型中選擇“重定義HTML”標簽→選擇要重定義的標簽，例如td→給所選標簽(例如td)定義CSS→一個(gè)定義了標簽的網(wǎng)頁(yè)就做好了。
1.打開(kāi)一個(gè)網(wǎng)頁(yè)文檔。
2.打開(kāi)樣式面板。
3.點(diǎn)擊“新建CSS樣式“按鈕。
4.在“類(lèi)型”中，選擇“重定義HTML”標簽。
5.選擇td標簽。Td標簽代表單元格。
6.選擇分類(lèi)中的“類(lèi)型”。
7.設置字體:選擇字體，如果沒(méi)有需要的字體，可以編輯字體列表，見(jiàn)第二部分。
大小:設置字體大小，好看的中文字大小有12象素(px)和9點(diǎn)數(pt)兩種，兩者效果差不多。
行高:行高是一行文字與另一行文字之間的距離，為了方便閱讀，行高設置大點(diǎn)吧?？梢栽O置在15像素到25像素之間。實(shí)例中使用20像素。
修飾:對于普通文本，選擇無(wú)。對于鏈接，可以選擇下劃線(xiàn)，上劃線(xiàn)加下劃線(xiàn)，無(wú)等幾種。
顏色:黑色最適合閱讀，其次就是灰色，白色。鏈接默認的藍色，顏色太深，如果整個(gè)頁(yè)面都是鏈接，使用藍色根本起不到分辨的作用，并且十分難看。建議頁(yè)面不要使用默認的藍色!
8.按“確定”按鈕后，一個(gè)應用了CSS的網(wǎng)頁(yè)就做好了。
第二部分:編輯字體列表。
1.單擊字體欄的下拉箭頭，打開(kāi)編輯字體列表。
2.在編輯字體列表窗口中，點(diǎn)擊加號按鈕。
3.選擇一種字體，如宋體，按左箭頭按鈕。
4.繼續添加字體，選擇一種字體，如Arial，按箭頭按鈕添加。 網(wǎng)管網(wǎng)bitsCN.com
說(shuō)明:一個(gè)字體列表中有多種字體，比如“方正，宋體，黑體，華文中宋”，訪(fǎng)問(wèn)者電腦從最開(kāi)頭的方正字體開(kāi)始執行，如果沒(méi)有對應的方正字體，就執行宋體，沒(méi)有宋體，就執行黑體，如果列表中的字體都沒(méi)有，就用系統默認的字體替代。
5.可以重復以上的步驟，添加其它組合的字體。
第三部分:重定義body標簽，使表格之外的內容應用樣式。如果在一個(gè)網(wǎng)頁(yè)中，在表格之外還有內容，就需要定義body標簽。
54ne.com
1.定義了單元格而沒(méi)有定義body的網(wǎng)頁(yè)。
2.選擇重定義“body”標簽。按照第一部分的方法，定義“body”標簽。
54ne.com
3.定義了body的網(wǎng)頁(yè)。
第四部分:定義表單標簽。如果在一個(gè)網(wǎng)頁(yè)中使用表單，就需要重定義這些表單標簽。
1.定義input標簽。
2.定義select標簽。
3.定義textarea標簽。
第五部分:定義層對應的標簽。層對應的標簽是div。
第六部分:定義錨標簽。也就是有關(guān)鏈接的標簽。錨對應的標簽是a。
1默認錨標簽的網(wǎng)頁(yè)，鏈接有下劃線(xiàn)，藍色。這種鏈接很難看!
2.在標簽下拉欄中選擇a。
3.定義a的CSS樣式。大小選擇12象素;修飾選擇無(wú);顏色選擇一種深灰色，就可以和采用黑色的文本區分開(kāi)來(lái)。
4.重定義了錨標簽的網(wǎng)頁(yè)。
第七部分:修改樣式表。
1.在CSS樣式面板中，單擊“編輯樣式”單選按鈕，再點(diǎn)擊右下角的“編輯樣式表”按鈕。
2.對CSS樣式做一些修改。實(shí)例中是把顏色變得更淡。
3.修改了樣式的網(wǎng)頁(yè)。
一個(gè)網(wǎng)頁(yè)需要定義的基本樣式就定義好了，網(wǎng)頁(yè)會(huì )直接應用上新定義的樣式。根據需要，還可以定義其它標簽的樣式，例如定義水平條的標簽hr的顏色。
在創(chuàng )建CSS時(shí)，可以根據個(gè)人喜好，選擇一種應用CSS的方式。如果希望用相同的樣式控制多個(gè)文檔的格式，使用“外部CSS樣式表”是最簡(jiǎn)單的方法。如果喜歡步驟簡(jiǎn)單，或者只有一個(gè)頁(yè)面需要應用某個(gè)CSS樣式表，那就使用“僅對該文檔的CSS”。
主要內容:
1.“僅對該文檔的CSS”的創(chuàng )建和應用;
2.“外部CSS樣式表”的創(chuàng )建;
3.鏈接“外部CSS樣式表”文件;
4.“僅對該文檔的CSS”轉換成“外部CSS樣式表”;
5.“外部CSS樣式表”轉換成“僅對該文檔的CSS”;
6.使用“代碼片段”功能重復使用“僅對該文檔的CSS”。 feedom.net
在Dreamweaver中創(chuàng )建CSS時(shí)，可以選擇“定義在該文檔”和“新建樣式表文件”之一創(chuàng )建CSS樣式表。“定義在該文檔”只作用在當前文檔;“新建樣式表文件”創(chuàng )建出一個(gè)獨立的外部CSS樣式表文件，多個(gè)文檔可以鏈接到外部CSS樣式表文件。
1. “僅對該文檔的CSS”的創(chuàng )建和應用。
選擇“僅對該文檔”，定義CSS后，CSS就出現在之間。它的優(yōu)點(diǎn)是創(chuàng )建好了就直接應用到當前文檔了。
2. 創(chuàng )建“外部CSS樣式表”。
2.1選擇“新建樣式表文件”?！ ?
2.2選擇保存在的文件夾→給CSS文件命名→選擇相對于文檔→保存。
2.3定義CSS樣式。
2.4一個(gè)“外部CSS樣式表”就做好了。
3. 鏈接“外部CSS樣式表”文件。
使用外部CSS的優(yōu)點(diǎn)是:只要修改外部的CSS樣式表文件，所有鏈接到該樣式表文件的文檔格式都會(huì )自動(dòng)發(fā)生改變。
簡(jiǎn)明步驟:打開(kāi)一個(gè)網(wǎng)頁(yè)文檔→打開(kāi)CSS樣式面板→點(diǎn)擊“附加樣式表”按鈕→點(diǎn)擊“瀏覽”按鈕→選擇需要的外部CSS樣式表文件→點(diǎn)擊“確定”按鈕。
3.1打開(kāi)一個(gè)要應用CSS的網(wǎng)頁(yè)文檔。
3.2打開(kāi)CSS樣式面板。
3.3點(diǎn)擊“附加樣式表”按鈕。
3.4點(diǎn)擊“瀏覽”按鈕。
3.5選擇需要的外部CSS樣式表文件。
3.6點(diǎn)擊“確定”按鈕。之后文檔就會(huì )應用外部樣式。
4. “僅對該文檔的CSS”轉換成“外部CSS樣式表”;
把文檔中的CSS樣式導出成為一個(gè)獨立的CSS樣式表文件。
簡(jiǎn)明步驟:文件→導出→CSS樣式。
5.“外部CSS樣式表”轉換成“僅對該文檔的CSS”;
簡(jiǎn)明步驟:雙擊打開(kāi)外部CSS樣式表文件→在樣式表的開(kāi)頭添加 →把整個(gè)CSS代碼復制到一個(gè)文檔的前面。
6.使用“代碼片段”功能重復使用“僅對該文檔的CSS”。
如果能夠重復使用“僅對該文檔的CSS”，就可以快速應用到大量需要使用相同CSS的文檔中。 54ne.com
簡(jiǎn)明步驟:創(chuàng )建CSS代碼片斷:選擇一個(gè)包含CSS樣式表的文檔→進(jìn)入代碼視圖→選擇CSS樣式代碼→點(diǎn)擊右鍵→點(diǎn)擊“創(chuàng )建新代碼片斷” →命名。 54ne.com
應用CSS代碼片斷:打開(kāi)一個(gè)網(wǎng)頁(yè)文檔→進(jìn)入代碼視圖→把插入點(diǎn)放在前面→打開(kāi)“代碼片斷”面板→選擇定義好的CSS樣式→點(diǎn)擊插入按鈕。
6.1選中文檔中的CSS樣式表代碼，點(diǎn)擊右鍵，點(diǎn)擊“創(chuàng )建新代碼片斷”。
6.2給代碼片斷命名。
6.3打開(kāi)需要應用樣式表的文檔，進(jìn)入代碼視圖，把插入點(diǎn)放在前面。選擇CSS代碼片斷，點(diǎn)擊插入按鈕。
