DIV+CSS技術在資源平臺網(wǎng)站建設的應用_第1頁
DIV+CSS技術在資源平臺網(wǎng)站建設的應用_第2頁
DIV+CSS技術在資源平臺網(wǎng)站建設的應用_第3頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

1、DIV+CSS技術在資源平臺網(wǎng)站建設的應用摘要：本文介紹了 DIV+CSS技術的概念以及應用 DIV+CSS技 術制作網(wǎng)頁的優(yōu)勢，并以資源平臺網(wǎng)站建設為例介紹了 DIV+CSS技 術在網(wǎng)頁制作過程中結構設計、二級菜單設計上的具體應用。關鍵詞：DIV CSS資源平臺網(wǎng)頁制作1在網(wǎng)頁制作技術的發(fā)展過程中，TABLE布局方式在WEB2.0 盛行前是比較流行的布局方式，基于 TABLE布局的網(wǎng)頁具有搭建速 度快、容易控制等特點，但這種布局方式將網(wǎng)頁內(nèi)容和表現(xiàn)混合在一 起，結構不清，增加了設計和維護的成本，伴隨著互聯(lián)網(wǎng)的發(fā)展、多 瀏覽器的盛行，傳統(tǒng)的TABLE布局方式遇到了前所未有的挑戰(zhàn)，越 來越多的網(wǎng)

2、站在開發(fā)過程中米用了 DIV+CSS技術，將網(wǎng)頁的結構和 表現(xiàn)分離，通過將網(wǎng)頁內(nèi)容模塊化，解決了網(wǎng)頁制作流程復雜，制作 周期長及后期維護不便等問題。在網(wǎng)站后臺開發(fā)課程資源庫平臺 網(wǎng)站建設中，我們也選擇了 DIV+CSS技術進行網(wǎng)站的制作。1“ DIV+CSS”術介紹“ DIV+CSS準確地說應該是“ XHTML+ CSS ,但由于大家在使用 XHTML對網(wǎng)站進行標準化重構時，DIV是使用頻率最高的一個元素， 因此人們習慣稱之為 “DIV+CSSo DIV可以為HTML文檔內(nèi)大塊 (block-level)的內(nèi)容提供結構和背景，在起始標記“ &t;div>和結束標記“&am

3、p;lt;/div>之間的所有內(nèi)容都是用來構成這個塊的，其中所包 含元素的表現(xiàn)形式由套用的 CSS樣式來定義。CSS即Cascading StyleSheet中文稱為層疊樣式表）,是一種用來表現(xiàn)HTML或XML等文件 樣式的腳本語言，可以對HTML中的各種元素實現(xiàn)更加精確的控制。用DIV+CSS技術制作網(wǎng)站就是在HTML中只放網(wǎng)頁內(nèi)容，用CSS控制內(nèi)容的表現(xiàn)，實現(xiàn)網(wǎng)頁表現(xiàn)和結構的分離，網(wǎng)頁代碼簡潔， 體積減少，在網(wǎng)站維護和更新時，也只需要修改CSS,不需要對網(wǎng)頁 結構進行重新設計，從而降低了網(wǎng)站改版的成本。2在資源平臺建設上應用DIV+CSS技術的優(yōu)勢采用DIV+CSS技術制作的

4、資源平臺與采用傳統(tǒng)的 TABLE布局 的網(wǎng)站相比具有十分明顯的優(yōu)勢。2.1精簡代碼，訪問速度提高、用戶體驗性好使用DIV+CSS技術制作的網(wǎng)頁，由于網(wǎng)頁的結構和表現(xiàn)是分離的，冗余代碼大大減少，對搜索引擎的收錄更加友好，更容易被搜索 引擎搜索到網(wǎng)頁內(nèi)容。對網(wǎng)站瀏覽者來說，頁面簡潔，網(wǎng)頁流量更小， 也節(jié)約了上網(wǎng)成本。2.2網(wǎng)站輕松改版，更容易編輯和維護由于結構和表現(xiàn)分離，可以在不影響內(nèi)容的前提下，通過修改頁 面樣式文件來改變頁面的表現(xiàn)效果，使得網(wǎng)站的改版更加輕松容易， 樣式的修改也可以直接修改 CSS文件，所有使用該CSS的HTML文 件都支持自動更新，非常方便。3資源平臺網(wǎng)站的頁面設計3.1網(wǎng)站

5、的首頁面設計根據(jù)需求分析，資源平臺網(wǎng)站的首頁面設計風格要簡潔大方，顏色以藍色為主，主要內(nèi)容包括網(wǎng)站logo、導航條、網(wǎng)站新聞、版權信 息等，應用Photoshop設計網(wǎng)站首頁面如圖1所示。將設計圖轉化為網(wǎng)頁，分析界面結構，網(wǎng)頁布局采用上下框架型， 框架包括頁面頭部區(qū)（logo和主導航）、主內(nèi)容區(qū)（左側和右側）、頁面 版權信息區(qū)。對頁面各個區(qū)塊進行劃分，網(wǎng)站首頁面框架圖如圖2所 示。根據(jù)框架圖網(wǎng)站首頁面 HTML 的主體 <body></body&g用 三個 &t;div></div&g分 成“head

6、e、”“ mair和“foote上中下三個部分，應用DIV對網(wǎng)頁各區(qū)塊 劃分，三個區(qū)塊的頁面樣式由 CSS控制。3.2導航條下拉菜單的實現(xiàn)應用DIV+CSS技術完成網(wǎng)頁首頁面的頁面制作，但由于資源庫網(wǎng)站的內(nèi)容通常較多，僅是一級導航對于網(wǎng)站來說是不夠的， 需要多 級菜單來有條理的顯示課程的各項資源，使用 CSS制作的菜單可以 很方便地為網(wǎng)站帶來清晰的導航支持。本資源庫平臺在HTML無序列表的結構基礎上基于 CSS技術制作了一個兩級下拉菜單，如圖 3 所示。二級菜單的制作過程是先定義菜單的 HTML結構，然后利用CSS 設置樣式，實現(xiàn)當鼠標經(jīng)過主菜單項時相應的二級菜單顯示，鼠標離開時二級菜單隱藏的

7、效果。網(wǎng)頁中通過 DIV定義網(wǎng)頁的導航條內(nèi)容， 具體代碼如下：<div id= “ nav ” >& lt;ul><liclass二 “ menu2onmouseover二 “ this.className二´menu1´”onmouseout二 “ this.className二´menu2´課” > 程介紹& lt;a href二<div class= “l(fā)ist ” &g

8、t;“#課&|定位& lt;/a&gt ;<br />& lt;a href=“ #課&程特色& lt;/a&gt ;<br /><liclass= “ menu2onmouseover二 “ this.className二´menu1´”onmouseout二 “ this.className二´menu2´師” >資隊伍& lt;di

9、v class=“l(fā)ist ” >& lt;a href=#課&程負責人 </a><br />& lt;a href=“ # 教師隊伍& lt;/a>&l t;br/>& lt;/div>& lt;/li>應用CSS樣式menu1、menu2實現(xiàn)菜單效果，如想更換菜單效 果，直接修改CSS樣式表即可，代碼如下。.men u1width:100px;/* 設置寬度 */height:auto; /* 設置高度 */m

10、argin:6px 4px Opx Opx;/* 設置外邊距 */border:1px solid #197FC2; /*設置外邊框寬度和顏色*/ background-color: #FFFFFF; /*設置背景顏色 */ color:#336601; /*設置字體顏色*/padding:6px 0px 0px 0px; /* 設置內(nèi)邊距 */cursor:hand;/*設置鼠標顯示方式*/overflow-y:hidden; /*設置當Y方向內(nèi)容溢出時隱藏*/ filter:Alpha(opacity=75);/* 降低透明度 */.menu2width:100px;/* 設置寬度 */h

11、eight:18px;/* 設置高度 */margin:6px 4px 0px 0px; /*設置外邊距 */background-color: #FFFFFF; /* 設置背景顏色 */color:#999999; /*設置字體顏色*/padding:6px Opx Opx Opx;/*設置內(nèi)邊距 */overflow-y:hidden; /*設置當Y方向內(nèi)容溢出時隱藏*/cursor:hand;/*設置鼠標顯示方式*/基于CSS技術制作出來的下拉菜單樣式美觀，初始狀態(tài)下二級 菜單項是隱藏的，只顯示主菜單項，不影響整個網(wǎng)頁的顯示效果和瀏 覽速度，而當瀏覽者需要查看某個菜單的具體內(nèi)容時就可以將鼠標移 動到該菜單項區(qū)域，該菜單的二級菜單項就會通過列表形式展現(xiàn)，瀏覽者就可以根據(jù)需要進入到相應的菜單項查看相關內(nèi)容。這種下拉菜單結構實用性強，易于實現(xiàn)，在網(wǎng)頁設計中可以廣泛采用。4結語綜上可以看出，應用DIV+CSS技術制作的資源平臺網(wǎng)站頁面， 代碼簡潔、樣式美觀、后期維護和更新也很方便，具有明顯的優(yōu)勢， 本文的制作方法也為其他的資源平臺網(wǎng)站開發(fā)提供了借鑒。參考文獻1 蘇文.DIV+CSS技術在高校教務

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論