網頁設計教學中DIV+CSS佈局的運用論文

一、引言。

網頁設計教學中DIV+CSS佈局的運用論文

隨着時代的發展進步,網絡計算機技術的飛速發展進步,網頁設計領域也有了極其廣泛的發展空間,各個院校都開設了網頁設計這一學科的教學,爲培養這方面更多的人才對推動我國網頁設計專業的發展進程作出重要的貢獻。目前,在我國網頁設計這一學科的教學過程中,教學使用的軟件一般都是 Dre-amweaver,這一軟件在設計網頁的時候,網頁佈局法最常用的就是 Table 頁面佈局以及 DIV + CSS 頁面佈局這兩種,本文就深入瞭解分析 DIV + CSS 頁面佈局法這一頁面佈局法解決傳統表格佈局法的不足之處,利於後期的網頁維護和修改工作的進行,簡化了代碼,從而減少了網絡資源的浪費。由於 DIV + CSS 佈局在當今社會的應用中受到廣泛的歡迎,因此,我國各院校也應重視這一佈局法在網頁設計教學中的應用,改變傳統網頁設計教學課堂的教學氛圍,提高教學質量,從而對提高學生的能力起到深遠的作用。

二、DIV + CSS 佈局。

( 一) 傳統的網頁頁面佈局法。在傳統的網頁設計教學過程中,使用的頁面佈局法主要是表格頁面佈局和框架佈局。表格佈局法的優勢在於可以隨意設置單元格的高度和寬度,還可以實現嵌套,能讓網頁中的各元素都擺放在預期的地方; 它的操作簡單易行,可以完成各種版式的佈局。但是它也存在很多缺點,比如說在設計複雜的網頁時候,HTML 文檔內容將會特別多,這樣瀏覽器在加載完表格再顯示頁面的過程中,要消耗很長的時間,此外,表格佈局法還可能使 HTML 文檔的內部結構混亂,其頁面的維修和修改工作也特別困難。

( 二) 含義。DIV 是一種容器性質的元素,它的存在是爲HTML 文檔內容提供結構和背景,它是由起始標籤 < div > 和結束標籤 < /div > 之間的內容構成的。CSS 就是層疊樣式表,主要是用來設計網頁的排版和風格的,使網頁變得更加豐富。

CSS 由兩個主要部分組成: 選擇器和聲明,其中選擇器的使用需要改變樣式的元素; 聲明則是由一個屬性一個值組合成的,屬性和值需要用冒號來隔開,聲明和聲明之間需要用分號來隔開。如果要將網頁頁面上的元素實現一對一的控制,就需要使用 CSS 選擇器,常用的有標籤選擇器、類選擇器、id 選擇器、羣組選擇器以及後代選擇器這幾種,它們都有着各自的優點和缺點。

( 三) 佈局原理。DIV + CSS 頁面佈局法是 WEB 設計的標準,它和以往的表格頁面佈局法有着明顯的不同之處,可以實現網頁頁面內容和表現分離,其中 DIV 是用來完成網頁的框架結構,CSS 是用來美化網站的樣式,它們的共同使用可以將網站進行重構,使網站進一步實現標準化,簡化 HTML 文檔內容的代碼,有利於網站結構的搭建。

三、網頁設計教學過程中 DIV + CSS 佈局法的應用路徑。

( 一) DIV + CSS 佈局法的優點。

1. 使網頁結構實現標準化。由於傳統的表格頁面佈局法使用過程中,網頁垃圾代碼過多,用於裝飾的樣式和頁面佈局代碼的混合導致頁面結構不美觀,此外,表格頁面佈局中的多層嵌套、單元格的`合併與拆分這些對一個單元格的調整工作,都會影響到其餘單元格的表現效果。但是 DIV + CSS 頁面佈局法很好地解決了這一問題,在頁面佈局設計的時候,使用 DIV 盒子來確定大小,其邊框局、間距等多種屬性都可以進行數值上的調整,這就使網頁頁面的結構塑造性極強。

2. 使網頁內容和樣式相分離。DIV + CSS 頁面佈局法的使用,解決了以往網頁風格不統一的問題,有利於更新和網頁維修修護工作的進行。DIV( 網頁內容) 和 CSS( 樣式) 的相互分離,一般是通過將頁面內容放到 HTML 文檔文件中而樣式則放在單獨的 CSS 文件裏,當需要進行網頁內容修改時候,只需要對 HTML文件改動,對網頁頁面效果修改時候,則只需要對 CSS 文件中的內容進行修改即可,大大節省了工作的時間和人力的消耗。DIV+ CSS 頁面佈局法將網頁內容和樣式的分離,對網頁的更新工作帶來極大的便利,此外,還可以實現網頁風格的相互統一。

3. 優化搜索引擎。網頁設計中的搜索引擎主要是針對網頁內容也就是文字、代碼完成的,而傳統的表格頁面佈局法中使用的頁面代碼過多,搜索引擎工作很難完成。但是 DIV + CSS 頁面佈局法中的網頁代碼簡潔,在進行搜索引擎工作的時候,只需要將被搜索的內容從 HTML 文檔中的代碼進行搜索即可,搜索引擎只需要輸入搜索內容的關鍵詞,減少了繁複的搜索內容,提高了搜索引擎工作的效率,減少了大量的工作時間。

( 二) DIV + CSS 佈局在網頁設計中的具體應用路徑。DIV+ CSS 這一佈局法在網頁設計學科的教學過程中有着重要的作用,但是其技術性較高,操作困難,這就需要老師在教學過程中通過以下路徑提高教學質量。

1. 教學內容。目前,我國多數網頁設計課程採用的教材在DIV + CSS 佈局這方面的講解都是從含義講起,再分析字體、表格、圖像等屬性,內容散亂無章,學生學起來也顯得十分困難。因此,應該從教學內容的制定上實現創新,教學內容由簡單到困難,不斷深入瞭解其具體含義。教學內容困難度的由淺及深,可以使學生在輕鬆愉悅的氛圍中學習,激發學生的學習興趣,這樣網頁設計這一學科的教學質量才能得到進一步的提高,學生自身的知識能力水平也將得到大幅度的進步。

2. 教學方法。隨着社會的發展進步,我國教學事業也得到了飛速的進步,教學理念都發生了巨大的改變,在當今教學活動中,應該彰顯學生在課堂中的主體地位。這就需要從教學方法開始作出改變。傳統的網頁設計課程都是通過老師控制學生電腦演示設計過程來完成的,這種講課方法學生無法親自動手參與到課堂教學中,老師講完後讓學生自己輸入代碼,學生就被動輸入代碼,這樣學生的思維得不到培養,教學質量也將受到限制。因此,老師應該創新教學方法,充分利用先進的多媒體技術,不再操作學生的電腦,讓學生自己動手,自主思考問題,這樣教學質量才能得到提高。

3. 教學評價。傳統的網頁設計教學考覈主要是通過試卷完成的,這不符合這一學科的特徵,因此,老師要在教學評價上實現創新,可以通過綜合課程設計以及期末機房考試這兩部分實現對學生的考覈,既可以檢查學生平常上課中綜合案例的掌握情況,又可以檢測學生的網頁設計情況,教學評價體系的創新對推動學生的學習有着重要的作用。

四、結語。

總體說來,在當今社會形勢下,各院校都要綜合考慮社會市場對網頁設計領域人才的需求以及這一學科自身的特點,制定合理的教學內容、教學方法,提高學生的綜合素質,重視 DIV +CSS 佈局在網頁設計教學過程中的應用,使學生充分掌握這一技術。

【參考文獻】

[1]黃玉春,陳霞。 DIV + CSS 佈局在網頁設計教學中的應用研究[J]. 電腦知識與技術,2013,10

[2]王愛菊,楊金川。 DIV + CSS 佈局在《網頁製作》課程中的教學改革探究[J]. 無線互聯科技,2015,5