資源描述：
《使用Div+CSS布局網(wǎng)》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、第7章使用Div+CSS布局網(wǎng)頁Web標(biāo)準(zhǔn)概述認(rèn)識DivDiv+CSS布局簡介使用Spry布局對象7.1Web標(biāo)準(zhǔn)概述7.1.1什么是Web標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)是由W3C（WorldWideWebConsortium）和其他標(biāo)準(zhǔn)化組織制定的一套規(guī)范，包括HTML、JavaScript及CSS等一系列標(biāo)準(zhǔn)，其目的在于創(chuàng)建一個統(tǒng)一的用于Web表現(xiàn)層的技術(shù)標(biāo)準(zhǔn)，以便能通過不同瀏覽器或終端設(shè)備（計算機(jī)、手機(jī)等）向用戶展示信息內(nèi)容。7.1.2Web標(biāo)準(zhǔn)的構(gòu)成1．結(jié)構(gòu)結(jié)構(gòu)技術(shù)用于對網(wǎng)頁中用到的信息（文本、圖像、動畫等）進(jìn)行分類和整理，目前用于結(jié)構(gòu)化設(shè)計的Web標(biāo)準(zhǔn)技術(shù)主要是HTML（第1章中已做了簡單介紹）。
2、2．表現(xiàn)表現(xiàn)技術(shù)用于對已被結(jié)構(gòu)化的信息進(jìn)行顯示上的控制，包括位置、顏色、字體、大小等形式控制。目前用于表現(xiàn)設(shè)計的Web標(biāo)準(zhǔn)技術(shù)就是CSS。W3C創(chuàng)建CSS的目的是用CSS來控制整個網(wǎng)頁的布局，與HTML所實現(xiàn)的結(jié)構(gòu)完全分離。簡單來說就是表現(xiàn)與內(nèi)容完全分離，使站點的維護(hù)更加容易。這也正是“Div+CSS”布局的一大特點。3．行為行為是指對整個文檔的一個模型定義和交互行為的編寫。目前用于行為設(shè)計的Web標(biāo)準(zhǔn)技術(shù)主要有下面兩個。DOM（DocumentObjectModel）：文檔對象模型，相當(dāng)于瀏覽器與內(nèi)容結(jié)構(gòu)之間的一個接口。它定義了訪問和處理HTML文檔的標(biāo)準(zhǔn)方法，把網(wǎng)頁和腳本以及其他的編程語
3、言聯(lián)系了起來。ECMAScript（JavaScript的擴(kuò)展腳本語言）：由CMA（ComputerManufacturersAssociation）制定的腳本語言（JavaScript），用于實現(xiàn)網(wǎng)頁對象的交互操作。7.2認(rèn)識DivDiv全稱Division，意為“區(qū)分”，它是用來定義網(wǎng)頁內(nèi)容中邏輯區(qū)域的標(biāo)簽。我們可以通過手動插入div標(biāo)簽并對它們應(yīng)用CSS樣式來創(chuàng)建網(wǎng)頁布局。7.2.1Div簡介Div是用來為HTML文檔中的塊內(nèi)容設(shè)置結(jié)構(gòu)和背景屬性的元素。它相當(dāng)于一個容器，由起始標(biāo)簽
和結(jié)束標(biāo)簽
之間的所有內(nèi)容構(gòu)成。在它里面可以內(nèi)嵌表格（table）、文本（text）等
4、HTML代碼。其中所包含的元素特性由Div標(biāo)簽的屬性來控制，或使用樣式表格式化這個塊來控制。7.2.2創(chuàng)建DivDiv標(biāo)簽與表格、圖像等網(wǎng)頁對象的插入方法類似，所不同的是，在插入Div標(biāo)簽的同時可以為其設(shè)置樣式。7.2.3選擇Div要對Div執(zhí)行某項操作，首先需要將其選中。在DreamweaverCS4中選擇Div的方法有兩種。將鼠標(biāo)光標(biāo)移至Div周圍的任意邊框上，當(dāng)邊框顯示為紅色實線時單擊鼠標(biāo)左鍵可將其選中。將插入點置于Div中，然后單擊“標(biāo)簽選擇器”中相應(yīng)的
標(biāo)簽，同樣可將其選中7.3Div+CSS布局簡介7.3.1Div+CSS布局的優(yōu)缺點“Div+CSS”布局雖然是目前比較流
5、行的網(wǎng)頁布局方式，但業(yè)界對它的評價卻褒貶不一。本節(jié)我們就從它所具有的優(yōu)勢和存在的問題兩方面入手，來對它做一個公正的評價。7.3.2絕對定位與相對定位1．絕對定位絕對定位在CSS中的寫法是“position:absolute;”。其表達(dá)的意思是參照瀏覽器的左上角，配合top、right、bottom、left（上、右、下、左）值來定位元素，如下CSS代碼：#lay{position:absolute;left:5px;top:5px;}2．相對定位相對定位在CSS中的寫法是“position:relative;”，其表達(dá)的意思是以父級對象（它所在的容器）的坐標(biāo)原點為坐標(biāo)原點。無父級則以body
6、的坐標(biāo)原點為坐標(biāo)原點，配合上、右、下、左（簡稱TRBL）進(jìn)行定位，當(dāng)父級內(nèi)有padding等CSS屬性時，當(dāng)前級的坐標(biāo)原點則參照父級內(nèi)容區(qū)的坐標(biāo)原點進(jìn)行定位。7.3.3浮動定位浮動定位在CSS中用“float”屬性來表示。當(dāng)“float”值為“none”時，表示對象不浮動；為“l(fā)eft”時，表示對象向左浮動；為“right”時，表示對象向右浮動。7.4使用Spry布局對象7.4.1Spry菜單欄Spry菜單欄是一系列導(dǎo)航菜單按鈕，當(dāng)光標(biāo)指向某個按鈕時可以彈出項目的子菜單。使用Spry菜單欄可以在有限的空間內(nèi)顯示大量的導(dǎo)航信息。7.4.2Spry選項卡式面板Spry選項卡式面板是一系列可以在收
7、縮的空間內(nèi)存儲內(nèi)容的面板。瀏覽者可以單擊相應(yīng)面板標(biāo)簽在各個面板之間切換。定位插入點后，單擊“插入”面板中的“Spry選項卡式面板”即可將其插入。7.4.3Spry折疊式Spry折疊式是一系列可以在收縮的空間內(nèi)存儲內(nèi)容的面板窗口。瀏覽者可以通過單擊面板標(biāo)題來顯示或隱藏面板內(nèi)容。定位插入點后，單擊“插入”面板中的“Spry折疊式”即可將其插入。7.4.4Spry可折疊面板Spry可折疊面板是一個可以在收縮的空間內(nèi)
當(dāng)前文檔最多預(yù)覽五頁，下載文檔查看全文
當(dāng)前文檔最多預(yù)覽五頁，下載文檔查看全文
