《Web編程基礎(chǔ)》課件第4章 DIV和頁(yè)面布局技術(shù)

目標(biāo)-1-了解層的概念及應(yīng)用熟練使用<DIV>標(biāo)簽掌握表格布局技術(shù)及優(yōu)缺點(diǎn)掌握框架布局及其優(yōu)缺點(diǎn)熟練使用Dreamweaver來(lái)創(chuàng)建框架熟練使用Dreamweaver設(shè)置框架屬性并保存框架掌握DIV+CSS布局技術(shù)DIV層DIV層<div>標(biāo)簽的主要作用是用于設(shè)定文字、圖片、表格等的擺放位置

當(dāng)把文字，圖片等放在<div>標(biāo)簽中時(shí)，該標(biāo)簽被稱為“DIV塊”或“DIV元素”或“DIV層”。

使用CSS和DIV可以很好的解決圖像或文字定位的難題，通過(guò)DIV和CSS結(jié)合使用，網(wǎng)頁(yè)設(shè)計(jì)人員可以精確的設(shè)定內(nèi)容的位置，還可以將定位的內(nèi)容上下疊放。

示例：4.1DivEG.html-2-<div>標(biāo)簽也稱為區(qū)隔標(biāo)簽，為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的設(shè)置。如果單獨(dú)使用<div>標(biāo)簽，而不加任何CSS樣式修飾，那么它在網(wǎng)頁(yè)中的效果和使用段落標(biāo)簽<p></p>的效果是相同的頁(yè)面布局頁(yè)面布局一般分為以下幾種：表格布局框架布局

DIV+CSS布局

-3-頁(yè)面布局，就是將網(wǎng)頁(yè)中的各個(gè)版塊有效組織并放置在合適的位置。表格布局和DIV+CSS布局是目前最常用的布局方式表格布局表格布局表格在網(wǎng)頁(yè)中更多的是用于網(wǎng)頁(yè)的布局，其優(yōu)勢(shì)在于可以有效地定位網(wǎng)頁(yè)中不同的元素，結(jié)構(gòu)清晰。DreamweaverCS6提供了“布局”模式。在“布局”模式中，可以使用表格作為基礎(chǔ)布局結(jié)構(gòu)來(lái)設(shè)計(jì)網(wǎng)頁(yè)。表格布局有以下原則：不要把整個(gè)網(wǎng)頁(yè)當(dāng)成一個(gè)大表格，盡可能使用多個(gè)表格進(jìn)行分塊。使用嵌套表格。表格的邊框設(shè)置。表格布局步驟：使用布局視圖；繪制布局表格；繪制布局單元格；設(shè)置單元格屬性；預(yù)覽網(wǎng)頁(yè)。示例：4.2通過(guò)DreamweaverCS6演示表格布局的實(shí)現(xiàn)過(guò)程-4-框架布局框架布局框架是另一種常用的網(wǎng)頁(yè)布局排版工具?？蚣芙Y(jié)構(gòu)就是把瀏覽器窗口劃分為多個(gè)區(qū)域，每個(gè)區(qū)域都可以分別顯示不同的網(wǎng)頁(yè)。使用框架最常見(jiàn)的用途就是導(dǎo)航，在使用了框架以后，用戶的瀏覽器不需要為每個(gè)頁(yè)面重新加載與導(dǎo)航相關(guān)的圖。框架布局步驟：建立框架；設(shè)置框架模板；設(shè)置框架的屬性；保存框架；設(shè)置嵌套框架屬性。

示例：4.3通過(guò)DreamweaverCS6演示框架布局的實(shí)現(xiàn)過(guò)程

-5-DIV+CSS布局-1DIV+CSS布局使用DIV+CSS布局，可先不考慮外觀，首先需要將頁(yè)面內(nèi)容的語(yǔ)義或結(jié)構(gòu)確定下來(lái)。使用DIV+CSS布局，外觀不是最重要的，一個(gè)結(jié)構(gòu)良好的HTML頁(yè)面可以通過(guò)CSS以任意外觀表現(xiàn)出來(lái)。引入CSS布局的目的就是為了實(shí)現(xiàn)真正意義上的結(jié)構(gòu)和外觀的分離，這也是DIV+CSS布局最大的特色。-6-DIV+CSS布局-2DIV+CSS布局一個(gè)完整的網(wǎng)頁(yè)通常包含以下幾個(gè)部分：標(biāo)志和站點(diǎn)名稱、主頁(yè)面內(nèi)容、站點(diǎn)導(dǎo)航、子菜單、搜索區(qū)域、功能區(qū)、頁(yè)腳（版權(quán)和法律聲明）

，如下圖：示例：4.4演示DIV+CSS布局的實(shí)現(xiàn)過(guò)程-7-小結(jié)-8-DIV元素是用來(lái)為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素<div>標(biāo)簽可用于定義HTML文檔中的分區(qū)或節(jié)，將HTML文檔劃分為獨(dú)立的、不同的部分布局一般分為表格布局、框架布局和DIV+CSS布局模式在DreamweaverCS6中提供了3種布局視圖：標(biāo)準(zhǔn)、布局和擴(kuò)展表格布局的優(yōu)點(diǎn)是：布局容易、快捷而且兼容性好表格布局的缺點(diǎn)是：改動(dòng)不方便，彼此之間容易受影響，一旦需要調(diào)整工作量會(huì)很大框架由框架和框架集兩部分組成框架是一種常用的網(wǎng)頁(yè)布局排版工具?？蚣芙Y(jié)構(gòu)就是把瀏覽器窗口劃分為多個(gè)區(qū)域，每個(gè)區(qū)域都可以分別顯示不同的網(wǎng)頁(yè)Web網(wǎng)頁(yè)標(biāo)準(zhǔn)構(gòu)成包括結(jié)構(gòu)、外觀和行為三部分用CSS布局外觀不是最