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

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

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

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

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

DIV+CSS布局

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

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

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

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