《網(wǎng)頁設(shè)計與制作》課件-第七章 CSS常用模塊實現(xiàn)

第七章CSS常用模塊實現(xiàn)本章知識點網(wǎng)頁中常用的模塊導(dǎo)航條內(nèi)容模塊“文字列表”的實現(xiàn)“圖標(biāo)列表”的實現(xiàn)“圖片列表”的實現(xiàn)圖片播放器網(wǎng)頁整體布局面向?qū)ο蟮腃SS一、網(wǎng)頁中常用的模塊如果從組成結(jié)構(gòu)上來看，大部分網(wǎng)站都是相似的。一般來說，網(wǎng)頁從上至下可以分成頭部、主體、底部一、網(wǎng)頁中常用的模塊在一個網(wǎng)站內(nèi)，所有網(wǎng)頁的頭部一般是一致的，以此保持網(wǎng)站的風(fēng)格統(tǒng)一，主要包括：網(wǎng)站標(biāo)志（Logo）導(dǎo)航條（Nav）快捷導(dǎo)航條（QuickNav）搜索框（Search）廣告（Banner）登錄（Login）一、網(wǎng)頁中常用的模塊網(wǎng)頁主體是當(dāng)前網(wǎng)頁的主要內(nèi)容所在，由各種“內(nèi)容模塊”組成?！皟?nèi)容模塊”的基本結(jié)構(gòu)是相同的，根據(jù)其內(nèi)容分為：用戶登錄滾動新聞分類菜單快捷導(dǎo)航條文字列表排序列表圖片列表圖文混排圖片播放器分頁列表一、網(wǎng)頁中常用的模塊與頭部類似，為保持網(wǎng)站的風(fēng)格統(tǒng)一，整個網(wǎng)站的網(wǎng)頁底部都是一致的，包括：友情鏈接（FriendLink）版權(quán)申明（Copyright）快捷導(dǎo)航條（QuickNav）二、導(dǎo)航條導(dǎo)航條是一個網(wǎng)頁中極為重要的部分，由多個超鏈接組成，這些超鏈接可以鏈接到網(wǎng)站的各個二級欄目各種風(fēng)格的導(dǎo)航條二、導(dǎo)航條導(dǎo)航條的各種顯示效果欄目鏈接之間一般有分隔鼠標(biāo)停留在某欄目上，一般有鼠標(biāo)懸停效果一般使用特殊的樣式標(biāo)示當(dāng)前頁面所屬欄目有的欄目鏈接上還需要用特殊的小圖標(biāo)進(jìn)行標(biāo)識有的欄目鏈接有子導(dǎo)航，子導(dǎo)航的顯示效果有兩類：鼠標(biāo)懸停時以下拉或橫向顯示子導(dǎo)航，鼠標(biāo)移出時消失主欄目導(dǎo)航下方固定出現(xiàn)子導(dǎo)航有的導(dǎo)航條上，通過顏色、字體劃分出左右兩部分，以此區(qū)分主要欄目導(dǎo)航和重要功能導(dǎo)航二、導(dǎo)航條任務(wù)：實現(xiàn)導(dǎo)航條的步驟構(gòu)造HTML結(jié)構(gòu)導(dǎo)航條的欄目鏈接相互獨立，但又是一個整體，所以使用無序列表<ul>是比較合適的編寫CSS代碼由大范圍至小范圍，一步步實現(xiàn)CSS樣式二、導(dǎo)航條實現(xiàn)導(dǎo)航條的重要知識及技巧HTML默認(rèn)樣式重置在不同的瀏覽器下，某些標(biāo)簽?zāi)J(rèn)的顯示效果是不同的，為兼容各個瀏覽器，使顯示效果一致，應(yīng)首先在CSS中對顯示效果不同的屬性進(jìn)行定義浮動整個導(dǎo)航條是一個無序列表（<ul>），欄目鏈接及分割線都是列表項目（<li>）。<li>是塊級元素，要讓其在一行內(nèi)排列，必須將其設(shè)置為“float:left;”偽類設(shè)置鼠標(biāo)懸停效果，會用到偽類“:hover”CSSSprites三、內(nèi)容模塊各種“內(nèi)容模塊”是構(gòu)成網(wǎng)頁主體的主要部分，根據(jù)其具體內(nèi)容不同，又分為不同的類型。盡管類型不同，但“內(nèi)容模塊”的基本結(jié)構(gòu)是一致的，主要由以下部分組成：標(biāo)題欄間隙內(nèi)容部分三、內(nèi)容模塊標(biāo)題欄可能包括“修飾小圖標(biāo)”、“標(biāo)題（可能有多個）”、“更多”一般使用<h1-6>標(biāo)題標(biāo)簽間隙“標(biāo)題欄”與“內(nèi)容部分”之間的間距一般高度為5px，有些內(nèi)容模塊會省略“間隙”內(nèi)容部分內(nèi)容頭部：采用特殊效果，以圖片作為背景，可省略內(nèi)容主體：放置具體內(nèi)容，不能省略內(nèi)容底部：采用特殊效果，以圖片作為背景，可省略三、內(nèi)容模塊內(nèi)容模塊結(jié)構(gòu)的實現(xiàn)四、“內(nèi)容模塊”中的具體內(nèi)容各種類型的“內(nèi)容模塊”按照具體內(nèi)容的類型，可以分為：文字列表四、“內(nèi)容模塊”中的具體內(nèi)容圖標(biāo)列表四、“內(nèi)容模塊”中的具體內(nèi)容圖片列表四、“內(nèi)容模塊”中的具體內(nèi)容“文字列表”的實現(xiàn)無序修飾圖標(biāo)有序修飾圖標(biāo)從HTML結(jié)構(gòu)來說，兩種圖標(biāo)大同小異，主要的差別在CSS上由于“l(fā)ist-style-image”在各個瀏覽器下支持不是很好，所以列表項目前的修飾圖標(biāo)是通過背景的方式進(jìn)行設(shè)置的四、“內(nèi)容模塊”中的具體內(nèi)容“圖標(biāo)列表”的實現(xiàn)“圖標(biāo)列表”經(jīng)常用來做導(dǎo)航鏈接，通過圖標(biāo)與文字的配合，能起到美化網(wǎng)頁，以圖達(dá)意的效果四、“內(nèi)容模塊”中的具體內(nèi)容“圖片列表”的實現(xiàn)如果有文字標(biāo)題的圖片列表，一般要使用定義列表<dl>，如果是沒有文字標(biāo)題的圖片列表，使用無序列表<ul>即可五、圖片播放器圖片播放器是美化網(wǎng)頁不可缺少的特效，能在一個固定尺寸的空間內(nèi)，自動或被動的顯示多張圖片，常用來做廣告展示或重要內(nèi)容的提示五、圖片播放器要實現(xiàn)一個圖片播放器效果，需要使用HTML、CSS、Javascript三種語言，這里只對HTML部分、CSS部分進(jìn)行介紹一個完整圖片播放器應(yīng)該由三大部分組成：圖片列表、按鈕列表、文字提示在播放的過程中，圖片列表中當(dāng)前播放的圖片顯示，其他的圖片應(yīng)該要隱藏（display:none;）在播放的過程中，當(dāng)前的按鈕應(yīng)該高亮顯示，其他按鈕應(yīng)該普通顯示文字提示如果覆蓋在圖片上，一般需要半透明顯示（opacity）五、圖片播放器圖片播放器的實現(xiàn)六、網(wǎng)頁整體布局要做出一個完整的網(wǎng)頁，除了掌握各個局部模塊，還要實現(xiàn)網(wǎng)頁的整體布局網(wǎng)頁的整體布局是網(wǎng)頁的代碼（HTML、CSS）和顯示效果的統(tǒng)一，是網(wǎng)頁中各個模塊如何擺放、相互關(guān)系的統(tǒng)稱六、網(wǎng)頁整體布局一個良好的網(wǎng)頁整體布局，應(yīng)該有以下特征：簡約：在實現(xiàn)同樣效果的情況下，代碼及代碼的嵌套應(yīng)盡量的少語義化：整個代碼中HTML的使用，class的命名應(yīng)符合語義化的要求易維護(hù)：代碼的結(jié)構(gòu)應(yīng)利于重用，便于修改兼容性：網(wǎng)頁在不同的瀏覽器中，能保持一致的顯示效果自適應(yīng)：網(wǎng)頁中某些模塊應(yīng)做到寬度或高度上的自適應(yīng)，在不同的屏幕、不同的內(nèi)容下保持顯示效果一致六、網(wǎng)頁整體布局不考慮具體內(nèi)容，只考慮整體結(jié)構(gòu)，實現(xiàn)簡單布局六、網(wǎng)頁整體布局整體分析網(wǎng)頁分成頭部、主體、底部三部分主體包含6個內(nèi)容模塊兩種布局方案A：1、3為一列，2、4為一列，5、6各為一行B：1、2為一行，3、4為一行，5、6各為一行六、網(wǎng)頁整體布局A方案的“線框圖”六、網(wǎng)頁整體布局A方案的代碼構(gòu)思頭部頭部包含兩個部分：廣告位和導(dǎo)航條，但寫代碼時可不用層把它們包裹在一起，能減少代碼的嵌套主體主體有6個內(nèi)容模塊，對于選擇器的使用有多種思路，通過對4種實現(xiàn)方式的比較，理解網(wǎng)頁整體布局思想六、網(wǎng)頁整體布局A方案中內(nèi)容模塊的4種實現(xiàn)方式比較最后一個方案是CSS代碼最少，最容易維護(hù)的方案?；舅悸罚簩⑺袃?nèi)容模塊都看做同一類，在CSS中，通過Class選擇器“.box”定義6個內(nèi)容模塊的共同點。通過“class”屬性，組合“.box”選擇器和“.box_0X”選擇器。如果“.box”中沒有定義的樣式則由“.box_0X”進(jìn)行補充；如果“.box”中定義了樣式，但與該內(nèi)容模塊所需要的樣式不同，則由“.box_0X”重新定義，覆蓋“.box”中的。七、面向?qū)ο蟮腃SS面向?qū)ο蟮腃SS是一種“模塊化”的設(shè)計思想，我們也稱之為“面向?qū)ο竽K化設(shè)計”核心思想：將HTML和CSS通過一定的規(guī)則進(jìn)行分類、組合，以達(dá)到特定HTML、CSS在特定范圍內(nèi)最大程度的復(fù)用實現(xiàn)方式：模塊化分析與面向?qū)ο蟮腃SS模型建立七、面向?qū)ο蟮腃SS模塊化分析的基本思路前提：具備完善的UI平面圖原則：每個模塊應(yīng)該具備“單一職責(zé)”模塊與模塊之間盡量不要包含相同部分模塊的功能應(yīng)該相對簡單穩(wěn)定為提高模塊的重用性，其應(yīng)盡量做到少而簡單本章小結(jié)一般來說，網(wǎng)頁從上至下可以分成頭部、主體、底部三個部分，包含一到多個“模塊”功能上或結(jié)構(gòu)上是一個整體的部分，稱之為“模塊”實現(xiàn)“模塊”的主要步驟：構(gòu)造HTML結(jié)構(gòu)，編寫CSS代碼導(dǎo)航條是一個網(wǎng)頁中極為重要的部分，由多個超鏈接組成各種“內(nèi)容模塊”是構(gòu)成網(wǎng)頁主體的主要部分，一個完整的“內(nèi)容模塊”主要由標(biāo)題欄，間隙，內(nèi)容部分組成“內(nèi)容模塊”中的具體內(nèi)容有：“文字列表”、“圖片列表”、“圖標(biāo)列表”本章小結(jié)圖片播放器是美化網(wǎng)頁不可缺少的特效，常用來做廣告展示