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

下載本文檔

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

文檔簡(jiǎn)介

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

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

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

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

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

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

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

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

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

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

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

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論