網(wǎng)頁設(shè)計與制作 課件 （向隅） 項目3-5 使用表格布局網(wǎng)頁、使用CSS樣式美化網(wǎng)頁、使用div+CSS布局網(wǎng)頁_第1頁
網(wǎng)頁設(shè)計與制作 課件 （向隅） 項目3-5 使用表格布局網(wǎng)頁、使用CSS樣式美化網(wǎng)頁、使用div+CSS布局網(wǎng)頁_第2頁
網(wǎng)頁設(shè)計與制作 課件 （向隅） 項目3-5 使用表格布局網(wǎng)頁、使用CSS樣式美化網(wǎng)頁、使用div+CSS布局網(wǎng)頁_第3頁
網(wǎng)頁設(shè)計與制作 課件 （向隅） 項目3-5 使用表格布局網(wǎng)頁、使用CSS樣式美化網(wǎng)頁、使用div+CSS布局網(wǎng)頁_第4頁
網(wǎng)頁設(shè)計與制作 課件 （向隅） 項目3-5 使用表格布局網(wǎng)頁、使用CSS樣式美化網(wǎng)頁、使用div+CSS布局網(wǎng)頁_第5頁
已閱讀5頁，還剩57頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

任務(wù)3-1認(rèn)識表格

任務(wù)3-2設(shè)置表格和單元格的屬性

任務(wù)3-1認(rèn)識表格1.表格的基本構(gòu)成表格是網(wǎng)頁設(shè)計制作中不可缺少的元素，它可以將各類網(wǎng)頁元素有序地顯示在頁面上。表格由3個基本部件構(gòu)成：(1)行：水平空間。(2)列：垂直空間。(3)單元格：行列相交處的空間。整張表格的邊緣成為邊框，單元格中的內(nèi)容和邊框之間的距離稱為單元格邊距(CellPad)，單元格和單元格之間的距離稱為單元格間距(CellSpace)，如圖3-1所示。2.創(chuàng)建和選擇表格1)創(chuàng)建表格插入表格的位置必須是從一個新行開始，且表格獨占一行。Dw中創(chuàng)建表格的步驟如下：(1)將光標(biāo)置于要插入表格的位置，選擇“插入”菜單中的“表格”選項或在“插入”面板的“常用”選項卡中單擊“表格”按鈕，打開“表格”對話框，根據(jù)需求設(shè)置表格初始屬性，如圖3-2所示。(2)單擊“確定”按鈕即可將表格插入頁面，可輸入表格內(nèi)容，文字、圖片。表格建立好后就可以向表格內(nèi)添加元素了，如圖像、文字和表格等，方法如同在Word文檔中操作一樣，添加文本，表格會隨著增多而自動增高。在單元格中添加圖像時，如果單元格的尺寸小于圖像的尺寸，單元格會自動增高或增寬。在單元格中插入表格時，單元格中的表格叫作內(nèi)嵌式表格。內(nèi)嵌式表格中的單元格可以再拆分成多行或多列，并且可以無限制地插入，不過內(nèi)嵌的表格越多，瀏覽器下載時間越長，所以內(nèi)嵌表格最好不要超過三層。2)選取表格對表格進(jìn)行編輯前，需要先選擇表格。選擇整個表格的方法：將鼠標(biāo)光標(biāo)移動到表格的任意邊框上，當(dāng)光標(biāo)變成雙向箭頭形狀時，單擊鼠標(biāo)左鍵，即可選擇整個表格，如圖3-4所示。3)選取行或列在選擇表格時，可以通過鼠標(biāo)直接選擇表格的某一行或某一列，也可以同時選擇多行或多列。(1)選擇表格的一行。移動光標(biāo)到表格的某一行左邊框處，當(dāng)鼠標(biāo)光標(biāo)變成向右的黑箭頭時，單擊鼠標(biāo)即可選擇該行，如圖3-5所示。(2)選擇表格的一列。移動光標(biāo)到表格的某一列上邊框處，當(dāng)鼠標(biāo)光標(biāo)變成向下的黑箭頭時，單擊鼠標(biāo)即可選擇該列，如圖3-6所示。若要選擇多行或多列，可以配合“Ctrl”鍵和“Shift”鍵使用。4)選取單元格在選取單元格時，可以選擇單個單元格，也可以選擇一個單元格、單元格區(qū)域或不相鄰的多個單元格。當(dāng)某個單元格被選時，該單元格周圍會出現(xiàn)黑色邊框。單擊表格中的某個單元格，按住鼠標(biāo)左鍵從當(dāng)前單元格上方開始向要連續(xù)選擇單元格的方向拖動鼠標(biāo)選擇單元格，釋放鼠標(biāo)后，完成某個區(qū)域的單元格選取，如圖3-7所示。在選擇單元格前按住“Ctrl”鍵，然后單擊需要選擇的單元格，最后釋放“Ctrl”鍵可選擇多個不相鄰的單元格，如圖3-8所示。任務(wù)3-2設(shè)置表格和單元格的屬性創(chuàng)建表格后，需要對表格元素進(jìn)行一系列的操作，最常用的就是設(shè)置它的屬性。1.設(shè)置表格屬性在網(wǎng)頁中加入表格后，可以對表格的布局、樣式等進(jìn)行詳細(xì)的設(shè)置，以使表格中的布局可以精確地達(dá)到要求。選定整個表格后，屬性面板會變成表格屬性面板，從選項中設(shè)置各個參數(shù)，如圖3-9所示。2.設(shè)置單元格屬性選定單元格后，屬性面板會變成單元格屬性面板，如圖3-10所示。任務(wù)4-1認(rèn)識CSS

任務(wù)4-2創(chuàng)建和使用CSS樣式

任務(wù)4-3設(shè)置CSS樣式屬性

任務(wù)4-4認(rèn)識CSS選擇器任務(wù)4-1認(rèn)識CSSCSS非常靈活，既可以嵌入在HTML文檔中，也可以是一個單獨的外部文件，如果是獨立的文件，則必須以.css為后綴名。1.?CSS的優(yōu)勢(1)內(nèi)容和樣式分離，使網(wǎng)頁設(shè)計更加明了、簡潔。(2)彌補HTML對標(biāo)簽屬性控制的不足。(3)可精確控制網(wǎng)頁布局。(4)可提高網(wǎng)頁效率，增強易用性和擴(kuò)展性。(5)增強網(wǎng)頁特效，提升用戶體驗。2.?CSS的核心基礎(chǔ)1)?CSS樣式規(guī)則使用CSS對網(wǎng)頁進(jìn)行修飾，首先要了解CSS樣式規(guī)則。CSS樣式語法格式如下：選擇器{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n}其中，選擇器可以是標(biāo)簽選擇器、id選擇器、類選擇器和偽類選擇器。選擇器嚴(yán)格區(qū)分大小寫，屬性和屬性值不區(qū)分大小寫。屬性和屬性值以鍵值對的形式出現(xiàn)。2)引入CSS樣式表使用CSS修飾網(wǎng)頁，需要在HTML文檔中引入CSS樣式表，CSS提供了4種引入方式，分別是行內(nèi)式、內(nèi)嵌式、外鏈?zhǔn)胶蛯?dǎo)入式。(1)行內(nèi)式。行內(nèi)式也被稱為內(nèi)嵌樣式，是通過標(biāo)簽的style屬性來設(shè)置標(biāo)簽的樣式，其基本語法格式如下：<標(biāo)簽名style="屬性1:屬性值1;屬性2:屬性值2;...;屬性n:屬性值n">內(nèi)容</標(biāo)簽名>上述語法中，style是標(biāo)簽的屬性，實際上任何HTML標(biāo)簽都擁有style屬性，用來設(shè)置行內(nèi)式。(2)內(nèi)嵌式。內(nèi)嵌樣式是將CSS代碼集中寫在HTML文檔的<head>頭部標(biāo)記中，并且用<style>標(biāo)簽定義。其基本語法格式如下：在上述語法中，<style>標(biāo)簽一般位于<head>標(biāo)簽中的<title>標(biāo)簽之后。(3)外鏈?zhǔn)?。外鏈?zhǔn)绞菍⑺械臉邮椒旁谝粋€或多個以.css為擴(kuò)展名的外部樣式表文件中，通過<link/>標(biāo)簽將外部樣式文件鏈接到HTML文檔中。其語法格式如下：其中：①?href：定義所鏈接外部樣式表文件URL。②?type：定義所鏈接文檔的類型。③?rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系。(4)導(dǎo)入式。導(dǎo)入式與外鏈?zhǔn)较嗤?，都是針對外部樣式表文件的，但它使用的是@import語句。其基本語法格式如下：該語法中，style樣式標(biāo)簽內(nèi)還可以存放其他的內(nèi)嵌樣式，但@import語句需要位于其他內(nèi)嵌樣式的上面。大多數(shù)網(wǎng)站都是采用外鏈?zhǔn)揭胪獠繕邮奖恚饕蚴撬鼈兊募虞d方式不同。當(dāng)一個頁面被加載時，外鏈?zhǔn)降臉邮綍煌瑫r加載，而導(dǎo)入式的樣式需要等到頁面全部下載完后才被加載，這樣會造成不好的用戶體驗。3)?CSS基礎(chǔ)選擇器要想將CSS樣式應(yīng)用于特定的HTML標(biāo)簽，首先需要找到該目標(biāo)元素。在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則被稱為選擇器。CSS中的基礎(chǔ)選擇器有標(biāo)簽選擇器、類選擇器、id選擇器和通配符選擇器。(1)標(biāo)簽選擇器。標(biāo)簽選擇器是指HTML標(biāo)簽名稱作為選擇器，其基本的語法規(guī)則如下：標(biāo)簽名{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n}所有的HTML標(biāo)簽名都可以作為標(biāo)簽選擇器。標(biāo)簽選擇器的最大優(yōu)點是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式，其缺點是不能設(shè)計差異化的樣式。(2)類選擇器。類選擇器使用“.”(英文點號)進(jìn)行標(biāo)識，后面緊跟類名，而類名是與標(biāo)簽名不同的一串字符。其基本語法格式如下：.類名{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n}在HTML中，類名為class的屬性值，大多數(shù)HTML元素都可以定義class屬性。類選擇器的優(yōu)點是可以為元素對象定義單獨的樣式。注意：①類名的第一個字符不能使用數(shù)字，且嚴(yán)格區(qū)分大小寫。②一般類名采用小寫英文字符。(3)?id選擇器。id選擇器使用“#”進(jìn)行標(biāo)識，后面緊跟id名，其id名不能為標(biāo)簽字符串。id選擇器的語法格式如下：#id標(biāo)簽{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n}在HTML中，id名即為id的屬性值，大多數(shù)HTML元素都可以定義id屬性，元素的id名是唯一的，只能對應(yīng)于文檔中某一個具體的元素。(4)通配符選擇器。通配符選擇器用“*”號表示，它是所有選擇器中使用范圍最廣的，能匹配頁面中所有的元素，其基本語法格式如下：*{屬性1:屬性值1;屬性2:屬性值2;…;屬性n:屬性值n}任務(wù)4-2創(chuàng)建和使用CSS樣式1.“CSS設(shè)計器”面板在DreamweaverCC中，可以通過“CSS設(shè)計器”面板來創(chuàng)建樣式。CSS設(shè)計器是一個集成面板，支持可視化創(chuàng)建CSS文件、規(guī)則、集合屬性以及媒體查詢，如圖4-3所示。1)源“源”組中列出了所有與文檔有關(guān)的CSS樣式表。在這個組中，可以創(chuàng)建CSS樣式并將其附加到文檔中，如圖4-4所示。2)?@媒體“@媒體”組用于列出“源”組中選中的規(guī)則的全部媒體查詢，媒體查詢可以向不同設(shè)備提供不同的樣式。3)選擇器“選擇器”組用于列出“源”組中選擇的規(guī)則的全部選擇器，如果沒有選擇CSS樣式或媒體查詢，則此組將顯示文檔中的所有選擇器，如圖4-5所示。4)屬性“屬性”組可為指定的選擇器設(shè)置屬性，主要有布局、文本、邊框、背景及其他屬性，如圖4-6所示。2.創(chuàng)建CSS樣式選擇器CSS樣式選擇器中包括標(biāo)簽選擇器、類選擇器和id選擇器。1)標(biāo)簽選擇器標(biāo)簽選擇器是現(xiàn)有的HTML標(biāo)簽(或稱標(biāo)記)。用CSS控制這些標(biāo)簽，會改變標(biāo)簽的默認(rèn)樣式。其語法格式如下：標(biāo)簽名稱{屬性:屬性值1;屬性:屬性值2;…}創(chuàng)建標(biāo)簽選擇器的具體操作方法如下：(1)完成網(wǎng)頁的內(nèi)容架構(gòu)。(2)單擊“CSS設(shè)計器”面板中“源”組右側(cè)的“+”按鈕，在彈出的菜單中選擇“創(chuàng)建新的CSS文件”，彈出“創(chuàng)建新的CSS文件”對話框。(3)在彈出的對話框中，在“文件/URL(F):”文本框中輸入想要使用的CSS文件名，并可通過

按鈕選擇樣式文件保存位置。此時會在“文檔”窗口添加名為“style.css”選項卡，在“源代碼”中添加鏈接<linkhref="CSS/style.css"rel="stylesheet"type="text/css">，如圖4-8所示。(4)選擇新建的“style.css”，在“選擇器”組中單擊右側(cè)的“+”按鈕添加選擇器，選擇器會自動添加當(dāng)前光標(biāo)所在位置的HTML標(biāo)簽，如圖4-9所示。用戶也可以自行修改需要使用的HTML標(biāo)簽。(5)在“屬性”組中單擊“Text(文本)”欄，為網(wǎng)頁的正文添加所需要的樣式，如圖4-10所示，對h2標(biāo)簽選擇器添加了“font-family”“text-decoration”等屬性，分別設(shè)置了文字的字體、樣式。對p標(biāo)簽選擇器添加了“font-family”“font-size”和“text-indent”等屬性，分別設(shè)置了文字的字體、字體大小和樣式，如圖4-11所示。(6)單擊“文檔”窗口的“style.css”選項卡，可以看到h2標(biāo)簽和p標(biāo)簽的CSS樣式代碼，如圖4-12所示。(7)保存網(wǎng)頁HTML文件和CSS樣式文件，在瀏覽器中預(yù)覽頁面，即可查看整個網(wǎng)頁的字體類型等發(fā)生改變。2)類選擇器當(dāng)希望某一個或某幾個元素的外觀與網(wǎng)頁上的其他相關(guān)標(biāo)簽有所不同時，設(shè)計者就可以使用類選擇器。類選擇器可以應(yīng)用到網(wǎng)頁中任意的元素上，還能更精確地控制網(wǎng)頁中的某一元素。很多時候在CSS中看到名稱前以“.”開頭，這個英文句點開關(guān)就表示CSS的類樣式，類是可以被多次調(diào)用的。創(chuàng)建類選擇器的具體操作方法如下：(1)與創(chuàng)建標(biāo)簽選擇器相同，在創(chuàng)建類選擇器之前，需要先設(shè)計網(wǎng)頁內(nèi)容，并在“CSS選擇器”面板中創(chuàng)建或選擇“源”組中對應(yīng)的CSS文件。(2)在“選擇器”組中單擊“+”按鈕添加選擇器，在顯示的文本框中輸入“.one”文本，如圖4-14所示。(3)在“屬性”組中單擊“文本”欄，為網(wǎng)頁的正文添加所需要的樣式，如圖4-15所示，添加了“color”“font-weight”和“font-size”，設(shè)置了文字的顏色、字體粗細(xì)和字體大小。(4)在“文檔”窗口選中想要應(yīng)用該類的網(wǎng)頁內(nèi)容，右擊鼠標(biāo)，從彈出的菜單中選擇“CSS樣式”“one”菜單命令。(5)保存網(wǎng)頁HTML文件和CSS樣式文件，在瀏覽器中預(yù)覽頁面，即可查看整個網(wǎng)頁的字體類型等發(fā)生改變。3)?id選擇器創(chuàng)建id選擇器的具體操作方法如下：(1)與創(chuàng)建標(biāo)簽選擇器、類選擇器相同，在創(chuàng)建id選擇器之前，需要先設(shè)計網(wǎng)頁內(nèi)容，并在“CSS選擇器”面板中創(chuàng)建或選擇“源”組中對應(yīng)的CSS文件。(2)在“選擇器”組中單擊“+”按鈕添加選擇器，在顯示的文本框中輸入“#two”文本，如圖4-17所示。(3)在“屬性”組中單擊“布局”欄和“文本”欄，為網(wǎng)頁的正文添加所需要的樣式，如圖4-18所示，添加了“color”和“float”，設(shè)置了文字的顏色和文字的位置。(4)在“文檔”窗口選中想要應(yīng)用該類的網(wǎng)頁內(nèi)容，右擊鼠標(biāo)，從彈出的菜單中選擇“CSS樣式”“.one”菜單命令。(5)保存網(wǎng)頁HTML文件和CSS樣式文件，在瀏覽器中預(yù)覽頁面，即可查看整個網(wǎng)頁的字體類型等發(fā)生改變。任務(wù)4-3設(shè)置CSS樣式屬性創(chuàng)建CSS樣式表的過程，就是對各種CSS屬性的設(shè)置過程，因此了解和掌握屬性設(shè)置非常重要。在DreamweaverCC中，為了方便初學(xué)者學(xué)習(xí)CSS樣式屬性，提供了可視化操作，那就是“CSS設(shè)計器”面板上的屬性組，該組中可以設(shè)置“布局”“文本”“邊框”“背景”“其他”5種類型的屬性。DreamweaverCC實現(xiàn)CSS屬性設(shè)置功能是完全可視化的，無須編寫代碼。1.設(shè)置布局樣式在“屬性”組的“布局”欄中，可以設(shè)置頁面元素在頁面上的放置位置。在應(yīng)用填充與邊距設(shè)置時，將設(shè)置應(yīng)用于元素的各條邊上，同時可以應(yīng)用定位來確定元素在頁面上的相關(guān)位置，如圖4-19為CSS面板的“布局”欄。定義樣式設(shè)置可以控制頁面上的元素布局。常用的屬性如下：(1)“width”(寬度)和“height”(高度)：設(shè)置元素的尺寸大小，默認(rèn)值為auto，可以使用px、cm等單位確定具體的寬度和高度。(2)“margin”(邊界)：設(shè)置對象的外邊距。(3)“padding”(填充)：設(shè)置對象的內(nèi)容距四邊的距離，即內(nèi)邊距，定義元素內(nèi)容和邊框之間的空間大小。(4)“float”(浮動)：移動元素并將其放置在頁面邊緣的左側(cè)或右側(cè)，其他環(huán)繞移動的元素則保持正常。該屬性是實現(xiàn)div+CSS布局的關(guān)鍵。(5)“clear”(清除)：定義元素的哪一邊不允許有層。如果層出現(xiàn)在被清除的那一邊，則(設(shè)置了清除屬性的)元素將移動到層的下面。“margin”和“padding”很重要，它們與盒模型有關(guān)系。2.設(shè)置文本樣式在網(wǎng)頁設(shè)計過程中，文本的CSS樣式是使用最頻繁的。在“屬性”組的“文本”欄中，可以通過定義CSS樣式來對文本樣式進(jìn)行設(shè)置，如圖4-20所示。3.設(shè)置邊框樣式在“屬性”組的“邊框”欄中，能夠設(shè)置網(wǎng)頁標(biāo)簽4個邊框的各種屬性?！斑吙颉狈譃闃邮?style)、寬度(width)、顏色(color)等，圖4-21為CSS面板的“邊框”欄。4.設(shè)置背景樣式合理使用“背景”樣式設(shè)置網(wǎng)頁背景可以使網(wǎng)頁更加美觀。一般來說，背景顏色或背景圖像顏色深時，文字顏色應(yīng)該偏淺；背景顏色或背景圖像顏色淺時，文字顏色應(yīng)該偏深。這樣設(shè)置的目的是容易閱讀，如圖4-22所示。常用的背景樣式屬性如下：1)背景圖(1)“background-color”(背景顏色)：默認(rèn)值為transparent，表示背景顏色為透明，也可以用RGB顏色值、十六進(jìn)制顏色值和顏色名稱作為屬性值。(2)“background-image”(背景圖)：設(shè)置要用的背景圖像，需要指定背景圖的路徑。(3)“background-position”(背景位置)：設(shè)置背景圖像的位置。(4)“background-repeat”(重復(fù)方式)：設(shè)置背景圖像是否平鋪，其值有repeat(默認(rèn)值，表示縱向和橫向平鋪)、no-repeat(不平鋪)、repeat-x(僅橫向平鋪)、repeat-y(僅縱向平鋪)。(5)“background-attachment”(滾動方式)：設(shè)置背景圖像是否固定或隨著頁面的其余部分滾動，取值scroll(默認(rèn)值，隨內(nèi)容滾動)和fixed(固定不滾動)。2)相框陰影(1)“box-shadow”(相框陰影)：為相框添加一個或多個陰影。(2)“h-shadow”(水平陰影)：設(shè)置水平陰影。(3)“v-shadow”(垂直陰影)：設(shè)置垂直陰影。(4)“blur”(模糊)：設(shè)置模糊的距離。(5)“spread”(擴(kuò)展)：改變陰影的尺寸。(6)“color”(陰影的顏色)：設(shè)置陰影的顏色。(7)“inset”(向內(nèi))：將外部陰影改為內(nèi)部陰影。5.設(shè)置其他樣式“屬性”組的“其他”欄，主要是對列表樣式表進(jìn)行設(shè)置，它可以設(shè)置出非常豐富的列表樣式，如圖4-23所示。任務(wù)4-4認(rèn)識CSS選擇器1.關(guān)系選擇器關(guān)系選擇器可以更精確地控制元素樣式。CSS中的關(guān)系選擇器主要包括子元素選擇器和兄弟選擇器，其中子元素選擇器由符號“>”連接，兄弟選擇器由符號“+”和“~”連接。1)子元素選擇器子元素選擇器主要用來選擇某個元素的第一級子元素，即只能選擇作為某元素子元素的元素。其格式如下：標(biāo)簽>標(biāo)簽1{}標(biāo)簽1為標(biāo)簽的子元素，標(biāo)簽包含標(biāo)簽1。2)兄弟選擇器兄弟選擇器是用來選擇與某元素位于同一個父元素之中，且位于該元素之后的兄弟元素。兄弟元素選擇器分為相鄰兄弟選擇器和普通兄弟選擇器兩種。(1)相鄰兄弟選擇器。相鄰近兄弟選擇器使用“+”來連接前后兩個選擇器。選擇器中的兩個元素有同一個父元素，且第2個元素必須緊跟第1個元素。(2)普通兄弟選擇器。普通兄弟選擇器使用“~”來連接前后兩個選擇器。選擇器中的兩個元素有同一個父親且第2個元素不必緊跟第1個元素。2.結(jié)構(gòu)化偽類選擇器結(jié)構(gòu)化偽類選擇器允許開發(fā)者根據(jù)文檔結(jié)構(gòu)來指定元素的樣式。CSS3中增加了許多新的結(jié)構(gòu)化偽類選擇器，方便網(wǎng)頁設(shè)計者精準(zhǔn)地控制元素樣式。常用的結(jié)構(gòu)化偽類選擇器有以下6類。1)?:root選擇器:root選擇器用于匹配文檔根標(biāo)簽，在HTML中，根標(biāo)簽始終是html標(biāo)簽，即使用“:root選擇器”定義的樣式，對所有頁面標(biāo)簽有效。對于不需要該樣式的標(biāo)簽，可以單獨設(shè)置樣式進(jìn)行覆蓋。2)?:not選擇器如果對某個結(jié)構(gòu)標(biāo)簽使用樣式，而又想排除這個結(jié)構(gòu)標(biāo)簽下面的子結(jié)構(gòu)標(biāo)簽，讓它不使用這個樣式，則可以使用:not選擇器。3)?:only-child選擇器:only-child選擇器用于匹配屬于某父標(biāo)簽的唯一子標(biāo)簽的標(biāo)簽，也就是說，如果某個父標(biāo)簽僅有一個子標(biāo)簽，則使用“:only-child選擇器”可以選擇這個子標(biāo)簽。4)?:first-child選擇器和:last-child選擇器:first-child選擇器和:last-child選擇器分別用于為父標(biāo)簽中的第一個或者最后一個子標(biāo)簽設(shè)置樣式。5)?:nth-child(n)和:nth-last-child(n)選擇器使用:first-child選擇器和:last-child選擇器可以選擇某個父元素中第一個或最后一個子元素，但是如果用戶想要選擇第2個或倒數(shù)第2個子元素，這兩個選擇器就不起作用了。為此，CSS3引入了:nth-child(n)和:nth-last-child(n)選擇器，它們是:first-child選擇器和:last-child選擇器的擴(kuò)展。6)?:nth-of-type(n)和:nth-last-of-type(n)選擇器:nth-of-type(n)和:nth-last-of-type(n)選擇器用于匹配屬于父元素的特定類型的第n個子元素和倒數(shù)第n個子元素。3.偽元素選擇器所謂偽元素選擇器，是針對CSS中已經(jīng)定義好的偽元素使用的選擇器。CSS中常用的偽元素選擇器有??:before選擇器和?:after選擇器。1)?:before選擇器:before選擇器用于在被選元素的內(nèi)容前面插入內(nèi)容，必須配合content屬性來指定要插入的具體內(nèi)容。其格式為：2)?:after選擇器:after選擇器用于在某個元素之后插入一些內(nèi)容，使用方法與:before選擇器相同。任務(wù)5-1布局概述

任務(wù)5-2布局常用屬性

任務(wù)5-3布局類型任務(wù)5-1布局概述網(wǎng)頁布局是指網(wǎng)頁上的各種元素，如文字、圖片、視頻、按鈕等的展示和組織方式。網(wǎng)頁布局的目的是使頁面的內(nèi)容更易于理解和瀏覽，同時增強網(wǎng)站的視覺吸引力。div?+?CSS是Web的一種標(biāo)準(zhǔn)，也是一種網(wǎng)頁的布局方法。div?+?CSS布局是采用<div>標(biāo)簽配合CSS實現(xiàn)對網(wǎng)頁標(biāo)簽定位的一種布局方法。此種定位方式不同于傳統(tǒng)的表格(table)布局定位方式，它可真正實現(xiàn)網(wǎng)頁內(nèi)容與表現(xiàn)相分離的效果。這里div為division的縮寫，意思為劃分，也可以稱為層或區(qū)塊。通過合理的網(wǎng)頁布局設(shè)計，可以讓頁面內(nèi)容更加有序、整潔，并且使用戶更容易找到自己需要的信息。div?+?CSS布局的主要優(yōu)點如下：(1)網(wǎng)頁和表現(xiàn)內(nèi)容分離，便于站點重構(gòu)頁面。(2)結(jié)構(gòu)清晰，對搜索引擎更加友好。(3)便于Web項目開發(fā)分工協(xié)作。1.?div標(biāo)簽<div>標(biāo)簽常用于對塊進(jìn)行標(biāo)記，以便通過樣式表來對<div>標(biāo)簽標(biāo)記塊進(jìn)行格式化。<div>標(biāo)簽可以把文檔分割為獨立的、不同的部分。如果用id或class來標(biāo)記<div>標(biāo)簽，那么該標(biāo)簽的作用會變得更加明顯。1)?<div>標(biāo)簽的基本語法<div>標(biāo)簽的基本語法格式如下： <div

id="id選擇符">文字或圖像</div>或 <divclass="類選擇符">文字或圖像</div>2)?<div>標(biāo)簽的常用屬性<div>標(biāo)簽的常用屬性如下：(1)?position屬性：表示層的定位方式。(2)?left和top屬性：定義層的位置，與之并列的還有right和bottom屬性，這4個屬性用來設(shè)置層的位置。(3)?width和height屬性：定義層的寬度和高度。(4)?float屬性：定義層的浮動方式。(5)?clear屬性：定義清除屬性，表示層是否允許在某個元素的周圍有浮動元素，即是否去掉某個位置的浮動元素。(6)?z-index屬性：設(shè)置區(qū)域的上下層關(guān)系，相當(dāng)于三維空間的z坐標(biāo)，z-index屬性值越大，其位置就越高。表5-1為<div>標(biāo)簽的屬性及說明。2.?span標(biāo)簽<span>標(biāo)簽與<div>標(biāo)簽一樣也是一個容器元素，被廣泛運用在網(wǎng)頁制作中。<span>標(biāo)簽用來組合文檔中的行內(nèi)元素。<span>元素是一個內(nèi)聯(lián)元素，它包圍的元素不會自動換行。<span>標(biāo)簽沒有固定的格式表現(xiàn)，當(dāng)對它應(yīng)用樣式時，它才會產(chǎn)生視覺上的變化。<span>標(biāo)簽的基本語法如下：<span

id="指定樣式名稱">文本</span>3.使用div+CSS布局的流程為了提高網(wǎng)頁制作的效率，布局時通常要遵循一定的布局流程，使用div+CSS布局的具體流程如下：(1)確定頁面的版心寬度。版心是指瀏覽器內(nèi)顯示內(nèi)容的有效面積，顯示內(nèi)容在瀏覽器窗口中一般是居中顯示的。瀏覽器顯示內(nèi)容的最大面積是由顯示器的分辨率決定的。目前顯示器的分辨率大多在1024?×?768px(像素)以上，可設(shè)置版心寬度1000px。在設(shè)計網(wǎng)站時應(yīng)盡量適配主流的屏幕分辨率。常見網(wǎng)頁的寬度值為960px、980px、1000px和1200px等。(2)分析頁面中的模塊。在運用CSS布局之前，首先要對頁面有一個整體的規(guī)劃，用筆畫出頁面的草圖，頁面中包括的模塊及模塊間的關(guān)系。(3)控制網(wǎng)頁的各個模塊。當(dāng)分析完頁面的布局后，就可以運用盒子模型的原理，通過div?+?CSS布局來控制網(wǎng)頁的各個模塊了。初學(xué)者在制作網(wǎng)頁時，一定要養(yǎng)成分析頁面布局的習(xí)慣，這樣可以提高網(wǎng)頁制作的效率。任務(wù)5-2布局常用屬性div?+?CSS布局通常有3種方式，分別是靜態(tài)布局、浮動布局和定位布局。1.靜態(tài)布局靜態(tài)布局，其特點是將網(wǎng)頁中各種布局標(biāo)簽按照其在HTML代碼中的順序從上而下依次顯示。塊級元素生成的是一個矩形框，它按照在文檔中出現(xiàn)的位置正常定位顯示，沒有偏移量。在靜態(tài)布局的網(wǎng)頁中，用戶無須設(shè)置網(wǎng)頁各種布局標(biāo)簽的邊距屬性。例如，一個典型的HTML文檔，其<body>標(biāo)簽中的內(nèi)容通常由頭部(header)、導(dǎo)航欄(nav)、內(nèi)容(content)和頁尾(footer)4個部分組成，使用<div>標(biāo)簽建立這4個部分所在的層，代碼如下：<divclass="header1">網(wǎng)頁的頭部標(biāo)簽，通常包括網(wǎng)頁的Logo、Banner和搜索框等</div><divclass="nav1">網(wǎng)頁的導(dǎo)航條標(biāo)簽，完成站點導(dǎo)航的超鏈接。</div><divclass="content1">網(wǎng)頁的內(nèi)容標(biāo)簽，主要包括網(wǎng)站的各種版塊欄目</div><divclass="footer1">網(wǎng)頁的頁尾標(biāo)簽，主要包含網(wǎng)頁的版權(quán)信息及友好鏈接等內(nèi)容</div>4個部分及<body>的樣式代碼如下：靜態(tài)布局的顯示效果如圖5-6所示。靜態(tài)布局的優(yōu)點是結(jié)構(gòu)簡單，與各瀏覽器兼容性好，缺點是無法實現(xiàn)左右分欄的樣式效果。2.浮動布局浮動布局的作用是，定義網(wǎng)頁布局標(biāo)簽脫離網(wǎng)頁的流動布局結(jié)構(gòu)后顯示的方向。在網(wǎng)頁設(shè)計中，浮動布局可應(yīng)用于多個方面，如實現(xiàn)文本環(huán)繞圖像或?qū)崿F(xiàn)浮動的塊狀標(biāo)簽布局。它是目前最主要的布局方法。為元素設(shè)置浮動，可以使頁面元素變得整齊有序。1)認(rèn)識浮動浮動是指設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)文檔流的控制，移動到其父元素中指定位置的過程。定義浮動的基本語法格式如下：選擇器{float:屬性值;}float常用的屬性值有3個，如表5-2所示。2)清除浮動運用clear屬性清除浮動。其基本語法格式為：選擇器{clear:屬性值;}clear的常用屬性值有3個，如表5-3所示。運用clear屬性只能清除元素左右兩側(cè)浮動的影響。然而在制作網(wǎng)頁時，經(jīng)常會遇到一些特殊的浮動影響。3.定位布局在CSS中，使用定位屬性可以實現(xiàn)網(wǎng)頁中元素的精確定位。元素的定位屬性主要包括定位模式和邊偏移兩部分。1)定位模式position屬性用于定義元素的定位模式，其基本語法格式如下：選擇器{position:屬性值；}position的常用屬性值如表5-4所示。2)邊偏移通過邊偏移屬性top、bottom、left或right來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比，如表5-5所示。任務(wù)5-3布局類型使用div+CSS可以進(jìn)行多種類型的布局，常見的布局類型有單列布局、雙列布局、三列布局3種類型。本任務(wù)將對這3種布局進(jìn)行詳細(xì)講解。1.單列布局單列布局是網(wǎng)頁布局的基礎(chǔ)，所有復(fù)雜的布局都是在此基礎(chǔ)上演變而來的。如圖5-9是一個單列布局頁面的結(jié)構(gòu)示意圖。從圖5-9中可以看出，單列

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論