網(wǎng)頁設(shè)計教學(xué)中DIV+CSS布局的運用論文
一、引言。
隨著時代的發(fā)展進步，網(wǎng)絡(luò)計算機技術(shù)的飛速發(fā)展進步，網(wǎng)頁設(shè)計領(lǐng)域也有了極其廣泛的發(fā)展空間，各個院校都開設(shè)了網(wǎng)頁設(shè)計這一學(xué)科的教學(xué)，為培養(yǎng)這方面更多的人才對推動我國網(wǎng)頁設(shè)計專業(yè)的發(fā)展進程作出重要的貢獻。目前，在我國網(wǎng)頁設(shè)計這一學(xué)科的教學(xué)過程中，教學(xué)使用的軟件一般都是 Dre-amweaver,這一軟件在設(shè)計網(wǎng)頁的時候，網(wǎng)頁布局法最常用的就是 Table 頁面布局以及 DIV + CSS 頁面布局這兩種，本文就深入了解分析 DIV + CSS 頁面布局法這一頁面布局法解決傳統(tǒng)表格布局法的不足之處，利于后期的網(wǎng)頁維護和修改工作的進行，簡化了代碼，從而減少了網(wǎng)絡(luò)資源的浪費。由于 DIV + CSS 布局在當今社會的應(yīng)用中受到廣泛的歡迎，因此，我國各院校也應(yīng)重視這一布局法在網(wǎng)頁設(shè)計教學(xué)中的應(yīng)用，改變傳統(tǒng)網(wǎng)頁設(shè)計教學(xué)課堂的教學(xué)氛圍，提高教學(xué)質(zhì)量，從而對提高學(xué)生的能力起到深遠的作用。
二、DIV + CSS 布局。
（ 一） 傳統(tǒng)的網(wǎng)頁頁面布局法。在傳統(tǒng)的網(wǎng)頁設(shè)計教學(xué)過程中，使用的頁面布局法主要是表格頁面布局和框架布局。表格布局法的優(yōu)勢在于可以隨意設(shè)置單元格的高度和寬度，還可以實現(xiàn)嵌套，能讓網(wǎng)頁中的各元素都擺放在預(yù)期的地方； 它的操作簡單易行，可以完成各種版式的布局。但是它也存在很多缺點，比如說在設(shè)計復(fù)雜的網(wǎng)頁時候，HTML 文檔內(nèi)容將會特別多，這樣瀏覽器在加載完表格再顯示頁面的過程中，要消耗很長的時間，此外，表格布局法還可能使 HTML 文檔的內(nèi)部結(jié)構(gòu)混亂，其頁面的維修和修改工作也特別困難。
（ 二） 含義。DIV 是一種容器性質(zhì)的元素，它的存在是為HTML 文檔內(nèi)容提供結(jié)構(gòu)和背景，它是由起始標簽 < div > 和結(jié)束標簽 < /div > 之間的內(nèi)容構(gòu)成的。CSS 就是層疊樣式表，主要是用來設(shè)計網(wǎng)頁的排版和風(fēng)格的，使網(wǎng)頁變得更加豐富。
CSS 由兩個主要部分組成： 選擇器和聲明，其中選擇器的使用需要改變樣式的元素； 聲明則是由一個屬性一個值組合成的，屬性和值需要用冒號來隔開，聲明和聲明之間需要用分號來隔開。如果要將網(wǎng)頁頁面上的元素實現(xiàn)一對一的控制，就需要使用 CSS 選擇器，常用的有標簽選擇器、類選擇器、id 選擇器、群組選擇器以及后代選擇器這幾種，它們都有著各自的優(yōu)點和缺點。
（ 三） 布局原理。DIV + CSS 頁面布局法是 WEB 設(shè)計的標準，它和以往的表格頁面布局法有著明顯的不同之處，可以實現(xiàn)網(wǎng)頁頁面內(nèi)容和表現(xiàn)分離，其中 DIV 是用來完成網(wǎng)頁的框架結(jié)構(gòu)，CSS 是用來美化網(wǎng)站的樣式，它們的共同使用可以將網(wǎng)站進行重構(gòu)，使網(wǎng)站進一步實現(xiàn)標準化，簡化 HTML 文檔內(nèi)容的代碼，有利于網(wǎng)站結(jié)構(gòu)的搭建。
三、網(wǎng)頁設(shè)計教學(xué)過程中 DIV + CSS 布局法的應(yīng)用路徑。
（ 一） DIV + CSS 布局法的優(yōu)點。
1. 使網(wǎng)頁結(jié)構(gòu)實現(xiàn)標準化。由于傳統(tǒng)的表格頁面布局法使用過程中，網(wǎng)頁垃圾代碼過多，用于裝飾的樣式和頁面布局代碼的混合導(dǎo)致頁面結(jié)構(gòu)不美觀，此外，表格頁面布局中的多層嵌套、單元格的合并與拆分這些對一個單元格的調(diào)整工作，都會影響到其余單元格的表現(xiàn)效果。但是 DIV + CSS 頁面布局法很好地解決了這一問題，在頁面布局設(shè)計的時候，使用 DIV 盒子來確定大小，其邊框局、間距等多種屬性都可以進行數(shù)值上的調(diào)整，這就使網(wǎng)頁頁面的結(jié)構(gòu)塑造性極強。
2. 使網(wǎng)頁內(nèi)容和樣式相分離。DIV + CSS 頁面布局法的使用，解決了以往網(wǎng)頁風(fēng)格不統(tǒng)一的問題，有利于更新和網(wǎng)頁維修修護工作的進行。DIV（ 網(wǎng)頁內(nèi)容） 和 CSS（ 樣式） 的相互分離，一般是通過將頁面內(nèi)容放到 HTML 文檔文件中而樣式則放在單獨的 CSS 文件里，當需要進行網(wǎng)頁內(nèi)容修改時候，只需要對 HTML文件改動，對網(wǎng)頁頁面效果修改時候，則只需要對 CSS 文件中的內(nèi)容進行修改即可，大大節(jié)省了工作的時間和人力的消耗。DIV+ CSS 頁面布局法將網(wǎng)頁內(nèi)容和樣式的分離，對網(wǎng)頁的更新工作帶來極大的便利，此外，還可以實現(xiàn)網(wǎng)頁風(fēng)格的相互統(tǒng)一。
3. 優(yōu)化搜索引擎。網(wǎng)頁設(shè)計中的搜索引擎主要是針對網(wǎng)頁內(nèi)容也就是文字、代碼完成的，而傳統(tǒng)的表格頁面布局法中使用的頁面代碼過多，搜索引擎工作很難完成。但是 DIV + CSS 頁面布局法中的網(wǎng)頁代碼簡潔，在進行搜索引擎工作的時候，只需要將被搜索的內(nèi)容從 HTML 文檔中的代碼進行搜索即可，搜索引擎只需要輸入搜索內(nèi)容的關(guān)鍵詞，減少了繁復(fù)的搜索內(nèi)容，提高了搜索引擎工作的效率，減少了大量的'工作時間。
（ 二） DIV + CSS 布局在網(wǎng)頁設(shè)計中的具體應(yīng)用路徑。DIV+ CSS 這一布局法在網(wǎng)頁設(shè)計學(xué)科的教學(xué)過程中有著重要的作用，但是其技術(shù)性較高，操作困難，這就需要老師在教學(xué)過程中通過以下路徑提高教學(xué)質(zhì)量。
1. 教學(xué)內(nèi)容。目前，我國多數(shù)網(wǎng)頁設(shè)計課程采用的教材在DIV + CSS 布局這方面的講解都是從含義講起，再分析字體、表格、圖像等屬性，內(nèi)容散亂無章，學(xué)生學(xué)起來也顯得十分困難。因此，應(yīng)該從教學(xué)內(nèi)容的制定上實現(xiàn)創(chuàng)新，教學(xué)內(nèi)容由簡單到困難，不斷深入了解其具體含義。教學(xué)內(nèi)容困難度的由淺及深，可以使學(xué)生在輕松愉悅的氛圍中學(xué)習(xí)，激發(fā)學(xué)生的學(xué)習(xí)興趣，這樣網(wǎng)頁設(shè)計這一學(xué)科的教學(xué)質(zhì)量才能得到進一步的提高，學(xué)生自身的知識能力水平也將得到大幅度的進步。
2. 教學(xué)方法。隨著社會的發(fā)展進步，我國教學(xué)事業(yè)也得到了飛速的進步，教學(xué)理念都發(fā)生了巨大的改變，在當今教學(xué)活動中，應(yīng)該彰顯學(xué)生在課堂中的主體地位。這就需要從教學(xué)方法開始作出改變。傳統(tǒng)的網(wǎng)頁設(shè)計課程都是通過老師控制學(xué)生電腦演示設(shè)計過程來完成的，這種講課方法學(xué)生無法親自動手參與到課堂教學(xué)中，老師講完后讓學(xué)生自己輸入代碼，學(xué)生就被動輸入代碼，這樣學(xué)生的思維得不到培養(yǎng)，教學(xué)質(zhì)量也將受到限制。因此，老師應(yīng)該創(chuàng)新教學(xué)方法，充分利用先進的多媒體技術(shù)，不再操作學(xué)生的電腦，讓學(xué)生自己動手，自主思考問題，這樣教學(xué)質(zhì)量才能得到提高。
3. 教學(xué)評價。傳統(tǒng)的網(wǎng)頁設(shè)計教學(xué)考核主要是通過試卷完成的，這不符合這一學(xué)科的特征，因此，老師要在教學(xué)評價上實現(xiàn)創(chuàng)新，可以通過綜合課程設(shè)計以及期末機房考試這兩部分實現(xiàn)對學(xué)生的考核，既可以檢查學(xué)生平常上課中綜合案例的掌握情況，又可以檢測學(xué)生的網(wǎng)頁設(shè)計情況，教學(xué)評價體系的創(chuàng)新對推動學(xué)生的學(xué)習(xí)有著重要的作用。
四、結(jié)語。
總體說來，在當今社會形勢下，各院校都要綜合考慮社會市場對網(wǎng)頁設(shè)計領(lǐng)域人才的需求以及這一學(xué)科自身的特點，制定合理的教學(xué)內(nèi)容、教學(xué)方法，提高學(xué)生的綜合素質(zhì)，重視 DIV +CSS 布局在網(wǎng)頁設(shè)計教學(xué)過程中的應(yīng)用，使學(xué)生充分掌握這一技術(shù)。
【參考文獻】
[1]黃玉春，陳霞。 DIV + CSS 布局在網(wǎng)頁設(shè)計教學(xué)中的應(yīng)用研究[J]. 電腦知識與技術(shù)，2013,10
[2]王愛菊，楊金川。 DIV + CSS 布局在《網(wǎng)頁制作》課程中的教學(xué)改革探究[J]. 無線互聯(lián)科技，2015,5
【網(wǎng)頁設(shè)計教學(xué)中DIV+CSS布局的運用論文】相關(guān)文章：
本文來源：http://www.nvnqwx.com/shiyongwen/2478693.htm