《網(wǎng)頁(yè)設(shè)計(jì)與制作》課件-項(xiàng)目3 網(wǎng)頁(yè)布局

主講教師：項(xiàng)目3網(wǎng)頁(yè)布局1.Div+css布局網(wǎng)頁(yè)基礎(chǔ)知識(shí)學(xué)習(xí)目標(biāo)了解div概念、作用1掌握css作用2理解常用選擇器類型3導(dǎo)入DIV是HTML中最常用的塊元素，起到分段分塊的作用，可用來布局頁(yè)面結(jié)構(gòu)，CSS主要用于對(duì)頁(yè)面字體、顏色、背景等進(jìn)行精確控制，從而對(duì)網(wǎng)頁(yè)的外觀進(jìn)行布局。Div概念Div，全稱為“division”，在網(wǎng)頁(yè)設(shè)計(jì)中，它就像是一個(gè)容器，可以把網(wǎng)頁(yè)中的內(nèi)容劃分成不同的部分。它在語(yǔ)義上不表示任何特定類型的內(nèi)容，但可以將內(nèi)容分組。在不使用CSS的情況下，Div對(duì)內(nèi)容或者布局沒有任何影響，但它為我們后續(xù)的樣式設(shè)計(jì)和布局管理提供了基礎(chǔ)。示例#header#nav#banner#content#foot插入div的方法插入菜單>布局對(duì)象>DIV標(biāo)簽插入面板>布局選項(xiàng)卡>插入div標(biāo)簽CSS作用CSS是層疊樣式表（Cascading

Style

Sheets）的縮寫，它的主要作用是為HTML文檔添加樣式?？刂凭W(wǎng)頁(yè)內(nèi)容的外觀和布局。實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容與樣式的分離，提高網(wǎng)頁(yè)的可維護(hù)性和可讀性。支持響應(yīng)式設(shè)計(jì)，使網(wǎng)頁(yè)在不同設(shè)備和屏幕尺寸上都能良好地顯示。100%新建css樣式表打開css面板窗口/css樣式點(diǎn)擊下方新建按鈕常用的選擇器標(biāo)簽選擇器01類選擇器02ID選擇器03包含選擇器04常用的選擇器1.標(biāo)簽選擇器通常用于指定某個(gè)HTML標(biāo)簽名的樣式。例如：使用body標(biāo)簽選擇器設(shè)置網(wǎng)頁(yè)背景顏色。使用p標(biāo)簽選擇器設(shè)置所有段落的文字樣式。100%常用的選擇器2.類選擇器允許以一種獨(dú)立于文檔元素的方式來指定樣式，多個(gè)元素可以使用一類樣式。定義類選擇器時(shí)需要在名稱前加一個(gè)英文點(diǎn)號(hào)

.

，通過給HTML元素添加class屬性來使用。例如：<h1class=“im”></h1><pclass=“im”></p>100%常用的選擇器3.ID選擇器定義ID選擇器時(shí)需要在名稱前加一個(gè)#，與類選擇器不同，在一個(gè)HTML文檔中，ID選擇器會(huì)使用一次，且僅能一次。一個(gè)ID在頁(yè)面中應(yīng)該是唯一的。我們可以用ID選擇器精準(zhǔn)定位某個(gè)特定元素。例如：<divid=“head”>此處顯示head內(nèi)容</div>100%常用的選擇器可以定義同時(shí)影響兩個(gè)或多個(gè)標(biāo)簽，類或ID的復(fù)合樣式。多個(gè)選擇器以空格隔開，組合成包含關(guān)系，且右邊的選擇器從屬于左邊的選擇器。例如：#headp{color:green;}表示對(duì)ID=“head”元素中的p應(yīng)用該樣式，而其他p元素則不受影響。100%4.包含選擇器總結(jié)div概念、作用，插入div1css作用、新建css樣式2常用選擇器類型3主講教師：項(xiàng)目3網(wǎng)頁(yè)布局2.CSS盒子模型學(xué)習(xí)目標(biāo)掌握盒子模型的組成部分1掌握盒子模型的屬性設(shè)置2掌握盒子模型的計(jì)算方式3掌握盒子模型的實(shí)際應(yīng)用4盒子模型概念每個(gè)HTML元素都可以看作是一個(gè)盒子。重要性：影響網(wǎng)頁(yè)元素的排列和間距。css盒模型css盒模型邊框（Border）元素的實(shí)際內(nèi)容，如文本、圖片等。內(nèi)容（Content）內(nèi)容與邊框之間的空白區(qū)域。填充（Padding）圍繞內(nèi)容和內(nèi)邊距的線條。元素與其他元素之間的空白區(qū)域。邊界（Margin）盒子模型的屬性設(shè)置邊框（Border）使用width和height屬性設(shè)置。內(nèi)容區(qū)域（Content）使用padding屬性設(shè)置，可分別設(shè)置四個(gè)方向。填充（Padding）使用border屬性設(shè)置，包括寬度、樣式和顏色。使用margin屬性設(shè)置，同樣可分別設(shè)置四個(gè)方向。邊界（Margin）標(biāo)準(zhǔn)盒子模型的計(jì)算方式寬度和高度只包括內(nèi)容區(qū)域內(nèi)邊距、邊框和外邊距會(huì)增加元素的總尺寸盒子總寬度=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+有邊框+右邊界盒子總高度=上邊界+上邊框+上填充+內(nèi)容高度+下填充+下邊框+下邊界盒子模型的嵌套在實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常會(huì)遇到盒子模型的嵌套情況。嵌套的盒子模型會(huì)遵循CSS的盒子模型規(guī)則，但是在計(jì)算寬度、高度和布局時(shí)需要特別注意?？偨Y(jié)盒子模型簡(jiǎn)介1盒子模型的組成部分2盒子模型的屬性設(shè)置3盒子模型的計(jì)算方式4盒子模型的實(shí)際應(yīng)用5主講教師：項(xiàng)目3網(wǎng)頁(yè)布局3.DIV+CSS頁(yè)面布局優(yōu)化學(xué)習(xí)目標(biāo)掌握使用DIV+CSS設(shè)計(jì)一列布局頁(yè)面1掌握使用DIV+CSS設(shè)計(jì)多列布局頁(yè)面2任務(wù)描述Div是塊級(jí)元素，塊級(jí)元素的顯著特點(diǎn)是：每個(gè)塊級(jí)元素都是從一個(gè)新行開始顯示，而且其后的元素也需另起一行進(jìn)行顯示。本任務(wù)通過設(shè)置CSS樣式，使多個(gè)Div塊能并列在一行，以形成多種不同類型的網(wǎng)頁(yè)布局。任務(wù)分析通過設(shè)置CSS樣式的margin屬性和float屬性，實(shí)現(xiàn)Div塊頁(yè)面居中、多列布局。01操作體驗(yàn)02知識(shí)鏈接知識(shí)鏈接1.文檔流HTML頁(yè)面的標(biāo)準(zhǔn)文檔流（默認(rèn)布局）是：從上到下，從左到右，遇塊（塊級(jí)元素）換行。100%2.浮動(dòng)層浮動(dòng)層：給元素的float屬性賦值后，就是脫離文檔流，進(jìn)行左右浮動(dòng)，緊貼著父元素（默認(rèn)為body文本區(qū)域）的左右邊框。試一試完成下面網(wǎng)頁(yè)規(guī)劃布局總結(jié)CSS樣式的margin屬性和float屬性1實(shí)現(xiàn)Div塊頁(yè)面居中、多列布局2主講教師：項(xiàng)目3網(wǎng)頁(yè)布局4.使用APDIV層布局網(wǎng)頁(yè)學(xué)習(xí)目標(biāo)理解APDIV概念1掌握APDIV創(chuàng)建2掌握APDIV屬性設(shè)置3掌握APDIV嵌套4掌握APDIV和DIV標(biāo)簽的轉(zhuǎn)換5APDIV概念A(yù)Pdiv，全稱為‘Absolutely

Positioned

Div’，也就是絕對(duì)定位的層。是HTML中的重要組成元素之一，它是網(wǎng)頁(yè)的容器元素，可以放置各種內(nèi)容，比如文字、圖像、表單、插件等等。APdiv在網(wǎng)頁(yè)布局中具有重要的作用，它允許我們自由地在網(wǎng)頁(yè)上拖動(dòng)和控制元素的位置、大小和樣式。是快速布局頁(yè)面的重要工具。創(chuàng)建APDIV在菜單欄中選擇“插入”→“布局對(duì)象”→“APDiv”。通過拖動(dòng)鼠標(biāo)在文檔中繪制APDIV。APDiv和Div的主要區(qū)別使用場(chǎng)景APDiv?：絕對(duì)定位。?Div標(biāo)簽?：相對(duì)定位。定位方式?APDiv?：創(chuàng)建時(shí)就具有CSS樣式。Div標(biāo)簽?：需要手動(dòng)添加CSS樣式。樣式應(yīng)用?APDiv?：適合快速設(shè)計(jì)和布局景。?Div標(biāo)簽?：需要精確控制頁(yè)面布局和樣式。position:absolute;轉(zhuǎn)換設(shè)置APDIV屬性CSS-P元素：設(shè)置APDIV的名稱。左、上：設(shè)置APDIV的左邊界和上邊界距離。寬、高：設(shè)置APDIV的寬度和高度。Z軸：設(shè)置APDIV的堆疊次序，值越大越前端顯示?？梢娦裕涸O(shè)置APDIV的顯示狀態(tài)，包括默認(rèn)、繼承、可見和隱藏。背景圖像和背景顏色：設(shè)置APDIV的背景。溢出：設(shè)置APDIV內(nèi)容超出大小時(shí)的處理方法，包括可見、隱藏、滾動(dòng)和自動(dòng)。APDIV布局網(wǎng)頁(yè)應(yīng)用使用APDIV完成下面網(wǎng)頁(yè)布局總結(jié)APDIV基礎(chǔ)1創(chuàng)建APDIV2設(shè)置APDIV屬性3嵌套APDIV4APDIV與DIV的轉(zhuǎn)換5主講教師：項(xiàng)目3網(wǎng)頁(yè)布局5.使用DIV+CSS布局頁(yè)面學(xué)習(xí)目標(biāo)掌握使用DIV布局頁(yè)面功能模塊的方法1掌握使用CSS對(duì)網(wǎng)頁(yè)外觀進(jìn)行設(shè)置方法2任務(wù)分析傳統(tǒng)的表格布局網(wǎng)頁(yè)是通過大小不一的表格和表格嵌套來定位布局網(wǎng)頁(yè)內(nèi)容，本任務(wù)改用DIV+CSS布局，就是通過由CSS定義大小不一的DIV和DIV嵌套來布局網(wǎng)頁(yè)。這種布局方式的網(wǎng)頁(yè)代碼簡(jiǎn)潔，表現(xiàn)和內(nèi)容相分離，維護(hù)方便，能兼容更多的瀏覽器。操作體驗(yàn)按照教材操作步驟完成任務(wù)二使用div+css布局網(wǎng)頁(yè)。知識(shí)鏈接CSS的基本語(yǔ)法選擇器{屬性：屬性值}或?yàn)椋哼x擇器{屬性1：屬性值1；屬性2：屬性值2}100%拓展與提高試一試請(qǐng)新建網(wǎng)頁(yè)文檔，嘗試使用DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)布局結(jié)構(gòu)，效果參照附書素材“素材\項(xiàng)目三\試一試\3-2\shi3-2.html”。100%總結(jié)使用DIV布局頁(yè)面功能模塊1使用CSS對(duì)網(wǎng)頁(yè)外觀進(jìn)行設(shè)置2主講教師：項(xiàng)目3網(wǎng)頁(yè)布局6.使用表格布局頁(yè)面學(xué)習(xí)目標(biāo)在表格內(nèi)添加文字、圖片1表格嵌套2設(shè)置行列、單元格屬性3熟練使用表格布局網(wǎng)頁(yè)4任務(wù)描述通過創(chuàng)建表格布局網(wǎng)頁(yè)，并設(shè)置表格和單元格屬性，使用添加行與列、拆分與合并單元格的方法，最后向表格中添加文本及圖像等對(duì)象。在表格內(nèi)添加元素1.輸入文字，在單元格中輸入文字，有以下幾種方法。單擊任意一個(gè)單元格并直接輸入文本，此時(shí)單元格會(huì)隨文本的輸入自動(dòng)擴(kuò)展。粘貼來自其他文字編輯軟件中復(fù)制的帶有格式的文本。在表格內(nèi)添加元素2.插入圖像，在表格中插入圖像有以下幾種方法。單擊“插入”面板“常用”選項(xiàng)卡中的“圖像”按鈕。選擇“插入菜單>圖像”命令。“插入”面板中“常用”選項(xiàng)卡中的“圖像”按鈕拖曳到單元格內(nèi)。從資源管理器、站點(diǎn)資源管理器或桌面上直接將圖像文件拖到一個(gè)需要插入圖像的單元格內(nèi)。3.嵌套表格，將插入點(diǎn)放到一個(gè)單元格內(nèi)并插入表格，即可實(shí)現(xiàn)嵌套表格。100%操作體驗(yàn)完成任務(wù)一使用表格布局網(wǎng)頁(yè)。知識(shí)鏈接常用表格元素包括table（表格）元素、tr（行）元素、td（單元格）元素。表格元素由行元素組成，行元素由單元格元素組成。啟動(dòng)DreamweaverCS6，新建一個(gè)網(wǎng)頁(yè)，用表格設(shè)計(jì)如圖所示的網(wǎng)頁(yè)布局，注意嵌套表格、合并和拆分單元格、調(diào)整單元格的顏色、行高列寬和對(duì)齊方式等。鞏固與提高Logo圖片Banner動(dòng)畫關(guān)于斑竹導(dǎo)航條主頁(yè)文章本站快報(bào)特別推介每周推介最近更新友情鏈接信息搜索版權(quán)信息主講教師：項(xiàng)目3網(wǎng)頁(yè)布局7.表格的

基本操作學(xué)習(xí)目標(biāo)掌握插入表格的方法1掌握設(shè)置表格的屬性2掌握表格、行列調(diào)整3掌握單元格的拆分合并4列舉數(shù)據(jù)。用在網(wǎng)頁(yè)定位上。很多網(wǎng)頁(yè)都是以表格布局的，這是因?yàn)楸砀裨趦?nèi)容的組織、頁(yè)面中文本和圖形的位置控制方面都有很強(qiáng)的功能。表格的基本操作1.表格的作用選擇“插入>表格”命令。單擊“插入”面板中“常用”選項(xiàng)卡上的“表格”按鈕。單擊“插入”面板“布局”選項(xiàng)卡中的“表格”按鈕。按Ctrl+Alt+T組合鍵。表格的基本操作2.插入表格表格的基本操作行數(shù)、列文本框；“表格寬度”文本框；“邊框粗細(xì)”文本框；“單元格邊距”文本框；“單元格間距”文本框；“標(biāo)題”選項(xiàng)組；“輔助功能”選項(xiàng)組；3.表格的屬性設(shè)置表格的基本操作100%4.表格、行、列、單元格選擇5.表格、行列調(diào)整，單元格拆分合并動(dòng)手做一做，完成下面表格總結(jié)插入表格的方法1設(shè)置表格的屬性2表格、行列調(diào)整3單元格的拆分合并4主講教師：項(xiàng)目3