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