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

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

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

使用CSS和DIV可以很好的解決圖像或文字定位的難題，通過DIV和CSS結(jié)合使用，網(wǎng)頁設(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)頁中的效果和使用段落標(biāo)簽<p></p>的效果是相同的頁面布局頁面布局一般分為以下幾種：表格布局框架布局

DIV+CSS布局

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

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

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

，如下圖：示例：4.4演示DIV+CSS布局的實(shí)現(xiàn)過程-7-小結(jié)-8-DIV元素是用來為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)是：改動不方便，彼此之間容易受影響，一旦需要調(diào)整工作量會很大框架由框架和框架集兩部分組成框架是一種常用的網(wǎng)頁布局排版工具。框架結(jié)構(gòu)就是把瀏覽器窗口劃分為多個區(qū)域，每個區(qū)域都可以分別顯示不同的網(wǎng)頁Web網(wǎng)頁標(biāo)準(zhǔn)構(gòu)成包括結(jié)構(gòu)、外觀和行為三部分用CSS布局外觀不是最