網(wǎng)頁設(shè)計與制作課件 項目10：使用 CSS 美化和布局網(wǎng)頁_第1頁
網(wǎng)頁設(shè)計與制作課件 項目10：使用 CSS 美化和布局網(wǎng)頁_第2頁
網(wǎng)頁設(shè)計與制作課件 項目10：使用 CSS 美化和布局網(wǎng)頁_第3頁
網(wǎng)頁設(shè)計與制作課件 項目10：使用 CSS 美化和布局網(wǎng)頁_第4頁
網(wǎng)頁設(shè)計與制作課件 項目10：使用 CSS 美化和布局網(wǎng)頁_第5頁
已閱讀5頁，還剩38頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

網(wǎng)頁設(shè)計與制作——項目10：使用CSS美化

和布局網(wǎng)頁Project10項目10職場情境網(wǎng)頁的大體制作完畢后，剩余的美化及進一步的布局會讓網(wǎng)頁看起來更加的漂亮大氣，能夠完成這方面的工作，一個網(wǎng)頁基本就算完成了，而這一點恰恰是小艾最缺失的，所以她專門找到了同事凱程，想讓他好好為自己講一講關(guān)于美化和細致布局方面的知識，凱程非常細致的為小艾解說了關(guān)于網(wǎng)頁中CSS樣式及布局網(wǎng)頁方面的知識。CSS樣式是網(wǎng)頁排版的重要核心，它讓設(shè)計師從頁面效果的困擾中得到解脫。雖然它是一套代碼，但是在Dreamweaver的環(huán)境下，使用CSS不需要記憶代碼及寫程序，只要從對話框中設(shè)置即可。精美的網(wǎng)頁離不開

CSS技術(shù)。采用

CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的控制。使用

CSS樣式可以制作出更加復(fù)雜和精巧的網(wǎng)頁，網(wǎng)頁的維護和更新也更加容易和方便。本章主要介紹

DIV與

CSS概念、CSS樣式的基本概念和語法、CSS樣式設(shè)置和

CSS定位。本次項目將會針對CSS樣式的各種類型及應(yīng)用范圍做解說，讓各位可以熟悉CSS功能的應(yīng)用。好了，下面我們就一起來進行學習和進步吧！。學習目標〓知識目標〓掌握在網(wǎng)頁中DIV與

CSS布局的方法。掌握CSS基本知識。掌握設(shè)置CSS樣式〓技能目標〓學會CSS基礎(chǔ)。學會CSS樣式。〓素質(zhì)目標〓做人要講誠信，不能在誠信中有缺失，讓本該要合作的人遠離你。懂得了做事不是靠嘴，而是要靠自己辛勤的付出和努力。要學會與人分享，在團隊中不要以為自己是最牛的，要學會謙虛、學會謙讓。CONTENTS任務(wù)1了解DIV與CSS簡介目錄任務(wù)2了解CSS基本知識任務(wù)3掌握設(shè)置CSS樣式任務(wù)4掌握在CSS設(shè)計器中定義頁面內(nèi)CSS樣式任務(wù)5掌握外部樣式表鏈接任務(wù)6掌握以Div標簽規(guī)劃區(qū)塊綜合實戰(zhàn)—設(shè)置區(qū)塊和方框樣式制作文字介紹課后習題任務(wù)1了解DIV與CSS簡介Dreamweaver中

CSS布局的網(wǎng)頁，<DIV>與<Span>都是常用的標記，利用這兩個標記，加上

CSS對其樣式的控制，可以很方便地實現(xiàn)網(wǎng)頁的布局?；顒?了解DIV概述DIV是

CSS中的定位技術(shù)，在

Dreamweaver中將其進行了可視化操作。文本、圖像和表格等元素只能固定其位置，不能互相疊加在一起，使用

DIV功能，可以將其放置在網(wǎng)頁中的任何位置，還可以按順序排放網(wǎng)頁文檔中的其他構(gòu)成元素。層體現(xiàn)了網(wǎng)頁技術(shù)從二維空間向三維空間的一種延伸。DIV的功能主要有以下兩個方面。重疊排放網(wǎng)頁中的元素：利用

DIV，可以實現(xiàn)不同的圖像重疊排列，而且可以隨意改變排放的順序。精確的定位：單擊

DIV上方的四邊形控制手柄，將其拖動到指定位置，就可以改變層的位置。如果要精確定位

APDIV在頁面中的位置，可以在

DIV的屬性面板中輸入精確的數(shù)值坐標。如果將

DIV的坐標值設(shè)置為負數(shù)，DIV會在頁面中消失。任務(wù)1了解DIV與CSS簡介Dreamweaver中

CSS布局的網(wǎng)頁，<DIV>與<Span>都是常用的標記，利用這兩個標記，加上

CSS對其樣式的控制，可以很方便地實現(xiàn)網(wǎng)頁的布局。活動2了解DIV與

SPAN的區(qū)別DIV和

SPAN元素最大的特點是默認都沒有對元素內(nèi)的對象進行任何格式化渲染。主要用于應(yīng)用樣式表（共同點）。兩者最明顯的區(qū)別在于

DIV是塊元素，而

SPAN是行內(nèi)元素（也稱作內(nèi)嵌元素）。所謂塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行。塊元素和行內(nèi)元素也不是一成不變的，通過定義

CSS的

display屬性值可以互相轉(zhuǎn)化。＜span＞SPAN標記有一個重要而實用的特性，即它什么事也不會做，它的唯一目的就是圍繞HTML代碼中的其他元素，這樣就可以為它們指定樣式了。還有一個標識符具有類似的功能，＜DIV＞DIV也被用來在

HTML文件中建立邏輯部分。但與＜DIV＞SPAN不同，＜DIV＞工作于文本塊一級，它在它所包含的

HTML元素的前面及后面都引入了行分隔。任務(wù)1了解DIV與CSS簡介活動3了解DIV與

CSS布局優(yōu)勢掌握基于

CSS的網(wǎng)頁布局方式，是實現(xiàn)

Web標準的基礎(chǔ)。在主頁制作時采用

CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的控制。只要對相應(yīng)的代碼做一些簡單的修改，就可以改變網(wǎng)頁的外觀和格式。采用

CSS布局有以下優(yōu)點。

大大縮減頁面代碼，提高頁面瀏覽速度，縮減帶寬成本。

結(jié)構(gòu)清晰，容易被搜索引擎搜索到。

縮短改版時間，只要簡單地修改幾個

CSS文件就可以重新設(shè)計一個有成百上千頁面的站點。

強大的字體控制和排版能力。CSS非常容易編寫，可以像編寫

HTML代碼一樣輕松地編寫

CSS。

提高易用性，使用

CSS可以結(jié)構(gòu)化

HTML，如<p>標記只用來控制段落，<heading>標記只用來控制標題，<table>標記只用來表現(xiàn)格式化的數(shù)據(jù)等。

表現(xiàn)和內(nèi)容相分離，將設(shè)計部分分離出來放在一個獨立樣式文件中。

更方便搜索引擎的搜索，用只包含結(jié)構(gòu)化內(nèi)容的

HTML代替嵌套的標記，搜索引擎將更有效地搜索到內(nèi)容。table的布局中，垃圾代碼會很多，一些修飾的樣式及布局的代碼混合一起，很不直觀。而DIV更能體現(xiàn)樣式和結(jié)構(gòu)相分離，結(jié)構(gòu)的重構(gòu)性強。

可以將許多網(wǎng)頁的風格格式同時更新。不用再一頁一頁地更新?？梢詫⒄军c上所有的網(wǎng)頁風格都使用一個

CSS文件進行控制，只要修改這個

CSS文件中相應(yīng)的行，整個站點的所有頁面都會隨之發(fā)生變動。任務(wù)2了解CSS基本知識活動1了解CSS的基本概念在制作網(wǎng)頁時，對文本的格式化是一件很繁瑣的工作。利用

CSS樣式（CascadingStyleSheets）。不僅可以控制一篇文檔中的文本格式，而且可以控制多篇文檔的文本格式。因此使用

CSS樣式表定義頁面文字，將會使工作量大大減小。一些好的

CSS樣式表的建立，使我們可以更進一步對頁面及文本格式進行精確定制。CSS的全名是CascadingStyleSheets，一般稱為串聯(lián)式樣式表，其作用是為了加強網(wǎng)頁上的排版效果。因為在網(wǎng)頁設(shè)計初期，由于HTML代碼上的不足，使得網(wǎng)頁上的排版效果一直無法達到令人滿意的境界，也因為這個緣故才會在HTML之后繼續(xù)開發(fā)CSS代碼。由于CSS是用來補充HTML的格式，而非用來取代HTML，因此CSS的所有功能，都是擺放在畫面效果的設(shè)計，讓HTML代碼只單純負責頁面的內(nèi)容結(jié)構(gòu)。所以各位在頁面上進行內(nèi)容編輯時（包含文字、表格、窗體等），都還是使用HTML代碼來創(chuàng)建頁面結(jié)構(gòu)，等到需要套用一些樣式效果時才使用CSS樣式。另外，設(shè)計者也可以將CSS樣式儲存成一個獨立文件，再讓這個樣式文件同時套用到多個網(wǎng)頁上，如此一來會讓網(wǎng)頁風格的設(shè)計更加簡單方便。任務(wù)2了解CSS基本知識活動2了解CSS的基本語法現(xiàn)在首先討論在

HTML頁面內(nèi)直接引用樣式表的方法。這個方法必須把樣式表信息包括在<style>和</style>標記中，為了使樣式表在整個頁面中產(chǎn)生作用，應(yīng)把該組標記及其內(nèi)容放到<head>和</head>中去。例如，若要設(shè)置

HTML頁面中所有

H1標題字顯示為藍色，其代碼如下：樣式表的基本語法如下：任務(wù)2了解CSS基本知識在使用樣式表過程中，經(jīng)常會有幾個標志用到同一個屬性，例如規(guī)定

HTML頁面中凡是粗體字、斜體字、1號標題字則顯示為紅色，按照上面介紹的方法應(yīng)書寫為：顯然這樣書寫十分麻煩，引進分組的概念會使其變得簡潔明了，可以寫成：用逗號分隔各個HTML標志，把

3行代碼合并成

1行。此外，同一個

HTML標志，可以定義多種屬性，例如，規(guī)定把

H1～H6各級標題定義為紅色黑體字，帶下畫線，則應(yīng)寫為：任務(wù)3掌握設(shè)置CSS樣式控制網(wǎng)頁元素外觀的

CSS樣式用來定義字體、顏色、邊距和字間距等屬性，可以使用Dreamweaver來對所有的

CSS屬性進行設(shè)置。CSS屬性被分為

9大類，即類型、背景、區(qū)塊、方框、邊框、列表、定位、擴展和過濾，下面分別對其進行介紹。課堂實操—通過新建CSS規(guī)則創(chuàng)建CSS規(guī)則定義在Dreamweaver中創(chuàng)建CSS規(guī)則定義可以在“類”、“ID”、“標簽”、“復(fù)合內(nèi)容”4個方面進行創(chuàng)建，這里我們按照“標簽”進行創(chuàng)建。具體步驟如下；實踐經(jīng)驗：在“規(guī)則定義”下拉列表中有兩個選項，如果選擇“(僅對該文檔)”選項，則所定義的CSS樣式為內(nèi)部CSS樣式，CSS樣式代碼都會自動添加到頂部的<style>與</style>標簽之間。如果選擇“(新建樣式表文件)”選項，則可以直接創(chuàng)建外部樣式表文件，并將CSS樣式定義在該外部CSS樣式表文件中。如果已經(jīng)鏈接了外部CSS樣式文件，在該下拉列表中還將出現(xiàn)所鏈接的外部CSS樣式文件。任務(wù)3掌握設(shè)置CSS樣式拓展知識在

CSS樣式定義對話框中可以對不同的分類進行詳細的設(shè)置。1。設(shè)置文本樣式在

CSS樣式定義對話框左側(cè)的“分類”列表框中選擇“類型”選項，在右側(cè)可以設(shè)置

CSS樣式的類型參數(shù)，如圖所示?！邦愋汀敝械母鬟x項參數(shù)含義如下。Font-family：用于設(shè)置當前樣式所使用的字體。Font-size：定義文本大小?？梢酝ㄟ^選擇數(shù)字和度量單位來選擇特定的大小，也可以選擇相對大小。Font-style：將“正常”、“斜體”或“偏斜體”指定為字體樣式。默認設(shè)置是“正常”。Line-height：設(shè)置文本所在行的高度。該設(shè)置傳統(tǒng)上稱為“前導”。選擇“正?！弊詣佑嬎阕煮w的行高，或輸入一個確切的值并選擇一種度量單位。Text-decoration：向文本中添加下劃線、上劃線或刪除線，或使文本閃爍。正常文本的默認設(shè)置是“無”。“鏈接”的默認設(shè)置是“下劃線”。將“鏈接”設(shè)置為“無”時，可以通過定義一個特殊的類刪除鏈接中的下劃線。Font-weight：對字體應(yīng)用特定或相對的粗體量。“正?！钡扔?/p>

400，“粗體”等于

700。Font-variant：設(shè)置文本的小型大寫字母變量。Dreamweaver不在文檔窗口中顯示該屬性。Text-transform：將選定內(nèi)容中的每個單詞的首字母大寫或?qū)⑽谋驹O(shè)置為全部大寫或小寫。Color：設(shè)置文本顏色。任務(wù)3掌握設(shè)置CSS樣式2.設(shè)置背景樣式使用“CSS規(guī)則定義”對話框的“背景”類別可以定義

CSS樣式的背景設(shè)置?？梢詫W(wǎng)頁中的任何元素應(yīng)用背景屬性，如圖所示?！氨尘啊边x項中可以設(shè)置以下參數(shù)。Background-color：設(shè)置元素的背景顏色。Background-image：設(shè)置元素的背景圖像?？梢灾苯虞斎雸D像的路徑和文件，也可以單擊“瀏覽”按鈕選擇圖像文件。Background-repeat：確定是否以及如何重復(fù)背景圖像。有

4個選項：“不重復(fù)”指在元素開始處顯示一次圖像；“重復(fù)”指在元素的后面水平和垂直平鋪圖像；“橫向重復(fù)”和“縱向重復(fù)”分別顯示圖像的水平帶區(qū)和垂直帶區(qū)。圖像被剪輯以適合元素的邊界。Background-attachment：確定背景圖像是固定在它的原始位置還是隨內(nèi)容一起滾動。Background-position(X)和

Background-position(Y)：指定背景圖像相對于元素的初始位置，這可以用于將背景圖像與頁面中心垂直和水平對齊。如果附件屬性為“固定”，則位置是相對于文檔窗口而不是元素。任務(wù)3掌握設(shè)置CSS樣式3.設(shè)置區(qū)塊樣式使用“CSS規(guī)則定義”對話框的“區(qū)塊”類別可以定義標簽和屬性的間距和對齊設(shè)置，在對話框左側(cè)的“分類”列表中選擇“區(qū)塊”選項，在右側(cè)可以設(shè)置相應(yīng)的

CSS樣式，如圖所示。“區(qū)塊”各選項中參數(shù)含義如下。Word-spacing：設(shè)置單詞的間距，若要設(shè)置特定的值，在下拉列表框中選擇“值”，然后輸入一個數(shù)值，在第二個下拉列表框中選擇度量單位。Letter-spacing：增加或減小字母或字符的間距。若要減少字符間距，指定一個負值，字母間距設(shè)置覆蓋對齊的文本設(shè)置。Vertical-align：指定應(yīng)用它的元素的垂直對齊方式。僅當應(yīng)用于<img>標簽時，Dreamweaver才在文檔窗口中顯示該屬性。Text-align：設(shè)置元素中的文本對齊方式。Text-indent：指定第一行文本縮進的程度。可以使用負值創(chuàng)建凸出，但顯示取決于瀏覽器。僅當標簽應(yīng)用于塊級元素時，Dreamweaver才在文檔窗口中顯示該屬性。White-space：確定如何處理元素中的空白。從下面

3個選項中選擇：“正?！敝甘湛s空白；“保留”的處理方式與文本被括在<pre>標簽中一樣（即保留所有空白，包括空格、制表符和回車）；“不換行”指僅當遇到<br>標簽時文本才換行。Dreamweaver不在文檔窗口中顯示該屬性。Display：指定是否以及如何顯示元素。任務(wù)3掌握設(shè)置CSS樣式4.設(shè)置方框樣式使用“CSS規(guī)則定義”對話框的“方框”類別可以為控制元素在頁面上的放置方式的標簽和屬性定義設(shè)置?？梢栽趹?yīng)用填充和邊距設(shè)置時將設(shè)置應(yīng)用于元素的各個邊，也可以使用“全部相同”設(shè)置將相同的設(shè)置應(yīng)用于元素的所有邊，如圖所示。“方框”各選項中參數(shù)含義如下。Width和

Height：設(shè)置元素的寬度和高度。Float：設(shè)置其他元素在哪個邊圍繞元素浮動。其他元素按通常的方式環(huán)繞在浮動元素的周圍。Clear：定義不允許

APDIV的邊。如果清除邊上出現(xiàn)

APDIV，則帶清除設(shè)置的元素將移到該

APDIV的下方。Padding：指定元素內(nèi)容與元素邊框（如果沒有邊框，則為邊距）之間的間距。取消選擇“全部相同”選項可設(shè)置元素各個邊的填充；“全部相同”將相同的填充屬性應(yīng)用于元素的

top、right、bottom和

left側(cè)。Margin：指定一個元素的邊框（如果沒有邊框，則為填充）與另一個元素之間的間距。僅當應(yīng)用于塊級元素（段落、標題和列表等）時，Dreamweaver才在文檔窗口中顯示該屬性。取消選擇“全部相同”可設(shè)置元素各個邊的邊距；“全部相同”將相同的邊距屬性應(yīng)用于元素的

top、right、bottom和

left側(cè)。任務(wù)3掌握設(shè)置CSS樣式5.設(shè)置邊框樣式CSS的“邊框”類別可以定義元素周圍邊框的設(shè)置，如圖所示?！斑吙颉备鬟x項中參數(shù)含義如下。Style：設(shè)置邊框的樣式外觀。樣式的顯示方式取決于瀏覽器。Dreamweaver在文檔窗口中將所有樣式呈現(xiàn)為實線。取消選擇“全部相同”可設(shè)置元素各個邊的邊框樣式；“全部相同”將相同的邊框樣式屬性應(yīng)用于元素的

top、right、bottom和

left側(cè)。Width：設(shè)置元素邊框的粗細。取消選擇“全部相同”可設(shè)置元素各個邊的邊框?qū)挾?；“全部相同”將相同的邊框?qū)挾葢?yīng)用于元素的

top、right、bottom和

left側(cè)。Color：設(shè)置邊框的顏色?？梢苑謩e設(shè)置每個邊的顏色。取消選擇“全部相同”可設(shè)置元素各個邊的邊框顏色；“全部相同”將相同的邊框顏色應(yīng)用于元素的

top、right、bottom和

left側(cè)。任務(wù)3掌握設(shè)置CSS樣式6.設(shè)置列表樣式CSS的“列表”類別為列表標簽定義列表設(shè)置，如圖所示。“列表”各選項中參數(shù)含義如下。List-style-type：設(shè)置項目符號或編號的外觀。List-style-image：可以為項目符號指定自定義圖像。單擊“瀏覽”按鈕選擇圖像，或輸入圖像的路徑。List-style-position：設(shè)置列表項文本是否換行和縮進（外部）以及文本是否換行到左邊距（內(nèi)部）。任務(wù)3掌握設(shè)置CSS樣式7.設(shè)置定位樣式CSS的“定位”樣式屬性使用“層”首選參數(shù)中定義層的默認標簽，將標簽或所選文本塊更改為新層，如圖所示?！岸ㄎ弧边x項中各參數(shù)含義如下。position：在

CSS布局中，Position發(fā)揮著非常重要的作用，很多容器的定位都是用

Position來完成的。Position屬性有

4個可選值，它們分別是

static、

absolute、

fixed和relative。absolute：能夠很準確地將元素移動到你想要的位置，絕對定位元素的位置。fixed：相對于窗口的固定定位。relative：相對定位是相對于元素默認的位置的定位。static：該屬性值是所有元素定位的默認情況，一般情況下，不需要特別地去聲明它，但有時候遇到繼承的情況，我們不愿意見到元素所繼承的屬性影響本身，因而可以用ibility：如果不指定可見性屬性，則默認情況下大多數(shù)瀏覽器都繼承父級的值。Placement：指定

APDIV的位置和大小。Clip：定義

APDIV的可見部分。如果指定了剪輯區(qū)域，可以通過腳本語言訪問它，并操作屬性以創(chuàng)建像擦除這樣的特殊效果。通過使用“改變屬性”行為可以設(shè)置這些擦除效果。任務(wù)3掌握設(shè)置CSS樣式9.設(shè)置過渡樣式在過去的幾年中，大多數(shù)都是使用JavaScript來實現(xiàn)過渡效果的。使用

CSS可以實現(xiàn)同樣的過渡效果。“過渡”樣式屬性如圖9所示。過渡效果最明顯的表現(xiàn)就是當用戶把鼠標懸停在某個元素上時高亮顯示它們，如鏈接、表格、表單域、按鈕等。過渡可以給頁面帶來非常平滑的外觀。素養(yǎng)小課堂每個人都是愛美的，無論男生還是女生，愛美之心人皆有之，在學習中要提升自己的審美感知。審美感知具體指向?qū)徝缹ο蟾挥幸馕兜谋憩F(xiàn)特征，以及藝術(shù)活動與作品中的藝術(shù)語言、藝術(shù)形象、風格意蘊、情感表達等。審美感知的培育，有助于發(fā)現(xiàn)美、感知美，豐富審美體驗，提升審美情趣。任務(wù)4掌握在CSS設(shè)計器中定義頁面內(nèi)CSS樣式在頁面中定義CSS樣式是將CSS的樣式代碼包含在該HTML代碼之內(nèi)，不過此種方式只能將CSS樣式套用于目前編輯的網(wǎng)頁上，而無法讓多個網(wǎng)頁同時共享。課堂實操—通過CSS設(shè)計器新增CSS樣式除了在菜單命令中的“插入Div”對話框中創(chuàng)建CSS規(guī)則定義外，還可以在CSS設(shè)計器中新增CSS樣式。下面為文檔創(chuàng)建一個標題樣式，具體操作方法如下：任務(wù)4掌握在CSS設(shè)計器中定義頁面內(nèi)CSS樣式課堂實操—通過格式套用樣式效果雖然已經(jīng)設(shè)置了H2的標題文字，但是在網(wǎng)頁上并沒有看到任何的變化，這是因為<H>標簽是屬于HTML的代碼，因此必須設(shè)置哪個文字段落要套用<H2>的標簽。具體操作方法如下：任務(wù)4掌握在CSS設(shè)計器中定義頁面內(nèi)CSS樣式課堂實操—通過屬性面板修改與增添樣式內(nèi)容在Dreamweaver中，在“CSS設(shè)計器”面板中，透過屬性下方的五個按鈕，就可以分別設(shè)置布局、文本、邊框、背景、其它等五種類別的CSS樣式，如圖所示?；顒?掌握“CSS設(shè)計器”面板當各位勾選“顯示集合”的選項時，屬性面板下方只會列出已經(jīng)設(shè)置過的屬性，所以若要變更原先設(shè)置的內(nèi)容，只要勾選“顯示集合”，就可以快速找到要修改的屬性。下面就對其進行更改，具體操作如下：任務(wù)4掌握在CSS設(shè)計器中定義頁面內(nèi)CSS樣式任務(wù)4掌握在CSS設(shè)計器中定義頁面內(nèi)CSS樣式活動2掌握啟用/停用CSS屬性為了方便使用者觀看“CSS樣式”設(shè)置前或后的效果變化，“Dreamweaver”提供了快速切換“CSS屬性”的功能，也就是說，使用者可以直接在”CSS設(shè)計器」面板上設(shè)置啟用和停用“CSS屬性”。只要在屬性后方按下

按鈕，即可關(guān)閉該樣式。再按一下該鈕又可重新啟動該屬性設(shè)置，如圖所示。如果設(shè)置樣式后覺得不滿意，也可以針對特定的屬性加以刪除喔！只要在屬性后方按下

按鈕即可，如圖所示。任務(wù)5掌握外部樣式表鏈接活動1掌握外部樣式的觀念所謂“外部樣式”就是將設(shè)計的樣式效果儲存成一個獨立的文件﹙擴展名為CSS﹚，樣式文件完成以后，再對需要此樣式效果的網(wǎng)頁以”鏈接」的方式，把樣式效果置入到網(wǎng)頁中。往后只要樣式表文件的內(nèi)容有修改，那么鏈接此樣式文件的網(wǎng)頁也會跟著更新，所以在管理及設(shè)計樣式效果時，就可以很單純的只針對樣式文件作編修，而不用去管整個套用樣式的頁面范圍。所以將網(wǎng)站上的所有網(wǎng)頁一起鏈接到同一個樣式文件上，如此只要修改樣式文件內(nèi)容，就能讓所有網(wǎng)頁同時更新。剛剛介紹的樣式設(shè)置只能套用于目前所編輯的頁面，對于網(wǎng)頁設(shè)計師或網(wǎng)頁維護者來說，大概沒有人愿意只是為了修改某個特定文字的格式，而必須對所有的頁面內(nèi)容一一的去加以修改。要解決這個惱人的問題，那么“外部樣式表”的鏈接就可以徹底解決。課堂實操—通過CSS設(shè)計器面板創(chuàng)建外部樣式表首先我們來學習如何創(chuàng)建外部的樣式表文件。具體操作方法如下：任務(wù)5掌握外部樣式表鏈接任務(wù)5掌握外部樣式表鏈接課堂實操—儲存外部樣式表文件完成如上設(shè)置后，各位會在文件標簽下方看到”源代碼」鈕和CSS文檔的名稱，點選CSS名稱即可看到樣式設(shè)置的代碼。特別注意的是，如果在CSS文檔名稱上方看到“*”的圖示，這是表示該樣式表文件尚未被儲存，請務(wù)必點選

鈕，再執(zhí)行“保存”命令，才會將此文件儲存起來。具體操作方法如下：實踐經(jīng)驗：有了這個外部的樣式表文件后，接下來可以利用前面章節(jié)介紹的方式，來設(shè)置各種樣式或是文字效果，只要在新建CSS規(guī)則時，選擇剛剛創(chuàng)建的外部樣式表文件就行了。如圖所示。任務(wù)5掌握外部樣式表鏈接活動2掌握附加外部樣式表有了現(xiàn)成的樣式表文件后，接下來所設(shè)計的網(wǎng)頁，就可以透過“CSS設(shè)計器”面板將現(xiàn)有的樣式表文件附加進來。打開“CSS設(shè)計器”面板，單擊“源”前面的“+”按鈕，在彈出的菜單中選擇“附加現(xiàn)有的CSS文件”命令，如圖所示。在彈出的“使用現(xiàn)有的CSS文件”對話框，單擊“瀏覽”按鈕，找到之前儲存的.CSS文件，選擇“導入”按鈕，如圖所示。設(shè)置完畢單擊“確定”按鈕，在“屬性”面板中的“格式”下拉菜單中選擇“標題2”，即可運用鏈接的樣式，如圖所示。任務(wù)5掌握外部樣式表鏈接拓展知識CSS的便利與好處實在是多到不行，為了讓各位能夠更加了解CSS對于網(wǎng)頁設(shè)計所帶來的優(yōu)點，這里列出幾個使用技巧來和各位一起分享。課堂實操—設(shè)置水平分隔線樣式首先利用“CSS樣式”來設(shè)計水平分隔線的效果。由于“HTML”代碼中的水平線標簽為“HR”，所以在此只要重新定義“HR”標簽的樣式即可。具體操作如下；樣式名稱作用a：link未鏈接前的樣式效果。a：visited鏈接后的樣式效果。a：hover鼠標移過時的樣式效果。a：active鼠標點選時的樣式效果。任務(wù)5掌握外部樣式表鏈接課堂實操—設(shè)置文字超級鏈接效果這里我們示范a：hover設(shè)置方式，至于鏈接前、后或點選時等效果，請各位自行練習。具體操作如下；任務(wù)5掌握外部樣式表鏈接課堂實操—設(shè)置居中對齊的背景圖片很多人對于頁面背景圖片在不同屏幕分辨率之下所產(chǎn)生的問題感到非常困擾，其實可以憑借“CSS樣式”的幫助，將背景圖片固定于網(wǎng)頁的正中央，這樣一來背景圖片就不會因為分辨率的不同而偏移了。具體操作如下；任務(wù)5掌握外部樣式表鏈接課堂實操—設(shè)置項目符號的樣式各位覺得網(wǎng)頁中的項目符號單調(diào)嗎？利用CSS樣式也能將影像圖片做為項目符號哦！這里要修改的代碼標簽是“l(fā)i”。具體操作如下；任務(wù)6掌握以Div標簽規(guī)劃區(qū)塊課堂實操—通過Div命令插入Div標簽現(xiàn)今的網(wǎng)站內(nèi)容越來越多元化，想要讓很多信息都可以在首頁中就可以找到，那么網(wǎng)頁區(qū)塊的規(guī)劃就顯得格外重要。透過網(wǎng)頁區(qū)外的劃分，再分配網(wǎng)頁內(nèi)容，這樣網(wǎng)頁看起來會比較有條理，才不會雜亂無章。要規(guī)劃區(qū)塊，Dreamweaver提供了Div標簽的功能，可以讓設(shè)計師替網(wǎng)頁定義區(qū)塊，同時為不同的區(qū)塊個別設(shè)置樣式。這一小節(jié)就針對Div標簽的插入方式、大小、背景色或網(wǎng)頁組件插入方式等內(nèi)容，為各位做說明。要使用Div標簽，首先就要預(yù)先想好版面區(qū)塊的配置方式，這樣在實際創(chuàng)建Div標簽時才不會搞迷糊。網(wǎng)頁可以簡要的區(qū)分為上方的頁眉、中間是主要網(wǎng)頁內(nèi)容、以及頁腳三個部分，而中間還則區(qū)分出左、右兩欄。決定區(qū)塊的分割方式后，接下來就要準備插入Div標簽。特別注意的是，標簽的命名不可使用中文、不可包含空格或特殊符號，同時第一個字符也必須使用英文字母才行，其余的字符才可以用數(shù)字或英文。具體操作如下；任務(wù)6掌握以Div標簽規(guī)劃區(qū)塊任務(wù)6掌握以Div標簽規(guī)劃區(qū)塊課堂實操—通過CSS設(shè)計器設(shè)置Div標簽大小或背景色剛剛已經(jīng)將區(qū)塊劃分出來，但是因為沒有一并設(shè)置CSS樣式，所以接下來要來新建CSS規(guī)則，以便設(shè)置區(qū)塊的大小及背景色，而區(qū)塊大小及顏色大致規(guī)劃如圖所示。首先來看看頁眉(header)的設(shè)置方式，其余的設(shè)置請各位自行練習。具體操作如下；任務(wù)6掌握以Div標簽規(guī)劃區(qū)塊接下來同上方式，在“<style>”源下，依序為“contentleft”、“maincontent”、“content”、“footer”新增選取器，并依照前面規(guī)劃的尺寸與顏色設(shè)置區(qū)塊(content只需刪除即可)。透過以上方式完成設(shè)置后，各位會發(fā)現(xiàn)“maincontent”區(qū)塊并未依照構(gòu)思中的方式排列在“contentleft”右側(cè)，此時只要利用“float”屬性，將“contentleft”區(qū)塊設(shè)置為“l(fā)eft”，而“maincontent”區(qū)塊設(shè)置為“right”，這樣左右的兩個標簽就可以分別靠左和靠右浮動了。具體操作如下；任務(wù)6掌握以Div標簽規(guī)劃區(qū)塊活動1掌握編修D(zhuǎn)iv標簽的CSS樣式在“Div標簽”中加入“CSS樣式”后，如果需要修改或添加任何的屬性，都可以通過“CSS設(shè)計器”面板來編修，只要更改數(shù)值或添加選項即可，例如改變背景顏色，如圖所示。任務(wù)6掌握以Div標簽規(guī)劃區(qū)塊活動2掌握為Div區(qū)塊加入圓角、漸變色、陰影在“Dreamweaver”中，通過“CSS設(shè)計器”面板，也可以輕松為規(guī)劃的“Div”區(qū)塊加入圓角效果或任一邊圓角，還可以輕松加入漸變色的區(qū)塊或區(qū)塊陰影。1.設(shè)置圓角輸入點放在“contentleft”中，選擇切換到“邊框”

，設(shè)置“圓角值”為60，選擇“實時預(yù)覽”可以看到效果，如圖所示。任務(wù)6掌握以Div標簽規(guī)劃區(qū)塊2.設(shè)置漸變輸入點放在“contentleft”中，選擇切換到“背景”

，按下“gradient”的色塊，在彈出的漸變色設(shè)置界面中設(shè)置漸變的兩個顏色，選擇“實時預(yù)覽”可以看到效果，如圖所示。。任務(wù)6掌握以Div標簽規(guī)劃區(qū)塊3.區(qū)塊陰影輸入點放在“contentleft”中，選擇切換到“背景”

，設(shè)定陰影的位移值、模糊半徑值、顏

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論