DIV+CSS布局在《網(wǎng)頁制作》課程中的教學(xué)改革探究

1、    div+css布局在網(wǎng)頁制作課程中的教學(xué)改革探究    王愛菊楊金川摘要：在網(wǎng)頁制作課程中，布局方法直是學(xué)習(xí)本門課程的重點(diǎn)與難點(diǎn)，div+css的網(wǎng)頁布局方法越來越廣泛地應(yīng)用于網(wǎng)頁設(shè)計(jì)中，表現(xiàn)與內(nèi)容的分離不僅精減了大量table標(biāo)簽所產(chǎn)生的冗余代碼，而且大大提高了頁面的瀏覽速度。針對(duì)學(xué)生學(xué)習(xí)div+css教學(xué)環(huán)節(jié)的特點(diǎn)，從教學(xué)內(nèi)容和教學(xué)手段等方面對(duì)該環(huán)節(jié)進(jìn)行改革。關(guān)鍵詞：div+css；網(wǎng)頁布局；web標(biāo)準(zhǔn)隨著計(jì)算機(jī)互聯(lián)網(wǎng)的飛速發(fā)展，通過網(wǎng)頁獲取信息、交流信息是不可缺少的一個(gè)重要途徑。網(wǎng)站制作應(yīng)用的技術(shù)和顯示頁面效果的好壞直接影響到使用者的數(shù)量，

2、因diw+css布局方式使網(wǎng)頁加載速度快、便于維護(hù)、便于更新，采用這種布局方式已成為網(wǎng)頁制作中的主要潮流。那么從教學(xué)過程中如何加強(qiáng)這方面的改進(jìn)，培養(yǎng)出更適合網(wǎng)頁設(shè)計(jì)和開發(fā)的人才，是我們研究的主題。1 課程中div+css教學(xué)環(huán)節(jié)現(xiàn)狀div+css是網(wǎng)站標(biāo)準(zhǔn)中常用的術(shù)語之一，通常以此說明與html網(wǎng)頁設(shè)計(jì)中表格定位方式的區(qū)別，因在xhtml網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)了，早期網(wǎng)頁設(shè)計(jì)中使用table進(jìn)行布局，但是由于table布局非常不靈活，后期維護(hù)困難，且不利于網(wǎng)頁瀏覽。因此現(xiàn)在很多的網(wǎng)站多采用div+css布局頁面的方式進(jìn)行各種定位。div是用來為html文檔內(nèi)大塊內(nèi)容提供結(jié)構(gòu)和背景

3、的一個(gè)元素。div的開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容都是用來構(gòu)成這個(gè)塊的，其所包含元素的特性一部分是由div標(biāo)簽的屬性進(jìn)行控制，一部分通過使用樣式表格式化這個(gè)塊進(jìn)行控制。采用css+div布局頁面與傳統(tǒng)的表格布局頁面有以下幾個(gè)優(yōu)勢(shì)。1.1 表現(xiàn)和內(nèi)容相分離它使得頁面格式設(shè)置與頁面內(nèi)容獨(dú)立開來，可以單獨(dú)設(shè)置樣式然后應(yīng)用到頁面中，使網(wǎng)頁設(shè)計(jì)和管理維護(hù)的效率大為提高。1.2 提高搜索引擎對(duì)網(wǎng)頁的索引效率用只包含結(jié)構(gòu)化內(nèi)容的html代替了嵌套的標(biāo)簽，搜索引擎將會(huì)更有效地搜索到網(wǎng)頁內(nèi)容，并給出一個(gè)比較高的評(píng)價(jià)。1.3 使頁面載入得更快因?qū)⒋蟛糠值捻撁娲a寫到css中，使頁面體積容量相對(duì)變得較小。相對(duì)于表格嵌

4、套布局的方式，div+css布局將頁面獨(dú)立分成了更多的區(qū)域，當(dāng)打開頁面時(shí)，是逐層加載的，這不像表格嵌套那樣將整個(gè)頁面套在一個(gè)大表格中，使頁面加載速度相對(duì)較慢。1.4 方便修改與維護(hù)使用了div+css布局方式，后期的維護(hù)和修改變得更加容易，省時(shí)省力。根據(jù)區(qū)域內(nèi)容標(biāo)記，找到css里對(duì)應(yīng)的id，修改頁面很方便，也不會(huì)破壞到頁面中其他部分的布局樣式。如果一個(gè)站點(diǎn)中很多html頁面都應(yīng)用了同一個(gè)css文件，那么可以通過修改css文件，同時(shí)更新應(yīng)用這個(gè)css文件的所有網(wǎng)頁風(fēng)格的格式，不需要再一個(gè)一個(gè)的頁面進(jìn)行更新了，并且風(fēng)格容易統(tǒng)一化。也可將站點(diǎn)所有的網(wǎng)頁風(fēng)格都使用同一個(gè)css文件控制，修改頁面風(fēng)格時(shí)，

5、只需要修改這個(gè)css文件相應(yīng)的行，則整個(gè)站點(diǎn)的所有頁面都會(huì)隨之發(fā)生變化。也可以在一個(gè)文檔中應(yīng)用一個(gè)格式的css樣式，那么只要應(yīng)用這個(gè)格式的文檔中的部分也實(shí)現(xiàn)了統(tǒng)一的管理。1.5 提高易用性用css可以結(jié)構(gòu)化html語言，如：p標(biāo)簽用來控制段落，h1標(biāo)簽用來控制文檔標(biāo)題，a：link用來控制鏈接等?？稍黾雍芏嗟挠脩?，并且不需要建立獨(dú)立的版本。div+css教學(xué)通常是采用兩種模式，其一教師僅根據(jù)教材敘述進(jìn)行簡(jiǎn)單的理論講解。其二教師在講授dreamweaver網(wǎng)頁制作工具時(shí)，向?qū)W生介紹如何通過相應(yīng)的菜單和對(duì)話框創(chuàng)建和使用的，這樣做的好處是學(xué)生可以很快的入手使用這門技術(shù)，但是同樣的學(xué)生只知其然不知所以

6、然，無法了解該技術(shù)的本質(zhì)與應(yīng)用，在實(shí)際應(yīng)用中往往無從下手。因此在這方面教學(xué)中做如下改進(jìn)。2 教學(xué)內(nèi)容改革（1）了解網(wǎng)頁結(jié)構(gòu)原理。網(wǎng)頁本質(zhì)上來講主要由三部分組成：結(jié)構(gòu)、表現(xiàn)和行為。對(duì)應(yīng)的web標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括xhtml和xml，表現(xiàn)標(biāo)準(zhǔn)語言主要包括css，行為標(biāo)準(zhǔn)主要包括對(duì)象模型、ecmascript等。這些標(biāo)準(zhǔn)大部分是由w3c起草和發(fā)布的，也有一部分是由其他標(biāo)準(zhǔn)組織制訂的，比如ecma的ecmascript標(biāo)準(zhǔn)。準(zhǔn)確的說div+css應(yīng)叫做xhtml+css，即結(jié)構(gòu)+表現(xiàn)。（2）根據(jù)原理在講授網(wǎng)頁制作課程中的div+css時(shí)，應(yīng)先建立網(wǎng)頁整體的結(jié)構(gòu)，使學(xué)生明白這種技術(shù)在網(wǎng)

7、頁設(shè)計(jì)中的定位。其次分成三步走的方式來講述：第一步講述div在網(wǎng)頁中排版定位的方式，采用盒模型方式，第二步講述css控制網(wǎng)頁樣式的方式，三種主要的選擇器類型：標(biāo)簽選擇器、id選擇器、類選擇，四種調(diào)用方式：行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式、導(dǎo)入樣式。第三步將div與css結(jié)合，詳細(xì)講述css控制頁面中的細(xì)節(jié)。3 教學(xué)方法改革3.1 貫徹模塊化教學(xué)方法，加強(qiáng)理論課程體系教學(xué)與實(shí)踐性環(huán)節(jié)教學(xué)的有機(jī)統(tǒng)一在網(wǎng)頁設(shè)計(jì)教學(xué)過程中，一直采用將每個(gè)環(huán)節(jié)的課程體系劃分多個(gè)模塊。對(duì)于div+css教學(xué)環(huán)節(jié)，劃分如下幾個(gè)模塊：其一為css講解過程，以學(xué)校網(wǎng)站為例，將學(xué)校網(wǎng)站源碼分解，分離出css部門講解，分為css選擇器

8、模塊、css應(yīng)用方法模塊、css修改和維護(hù)模塊。其二講解div部分，將div分為手寫代碼方式模塊展示及dreamweaver制作方法應(yīng)用模塊；其三講解div+css部分。將div盒模型方式用自制實(shí)例化為三個(gè)模塊，photoshop制作效果圖模塊，草圖劃分區(qū)塊模塊及實(shí)施css引用模塊。每個(gè)模塊講解后讓學(xué)生在實(shí)踐環(huán)節(jié)充分練習(xí)，鞏固學(xué)習(xí)效果，做到理論與實(shí)際的有機(jī)統(tǒng)一。3.2 基于工作過程的案例教程在每個(gè)模塊實(shí)施過程中，搜集并選用多個(gè)網(wǎng)站和本環(huán)節(jié)相關(guān)的案例，應(yīng)用不同的實(shí)際案例作為范本，讓學(xué)生在模擬的同時(shí)能夠開闊眼界，了解技術(shù)現(xiàn)狀。學(xué)生可以通過模仿，來實(shí)現(xiàn)所展示的網(wǎng)站，掌握相應(yīng)的知識(shí)點(diǎn)。與此同時(shí)，讓學(xué)生

9、以大作業(yè)的給出若干題目，或者自選題目，建立網(wǎng)站。多個(gè)網(wǎng)頁設(shè)計(jì)中應(yīng)用div+css技術(shù)，然后風(fēng)格一致，以及后期實(shí)現(xiàn)一處修改多處使用的優(yōu)勢(shì)。3.3 分組創(chuàng)作討論法以問題為導(dǎo)向，以學(xué)生為主體，培養(yǎng)學(xué)生自主學(xué)習(xí)的能力。在布置的教學(xué)情境中，依照實(shí)際的工作過程，結(jié)合相應(yīng)的任務(wù)為分發(fā)教學(xué)任務(wù)書，接著對(duì)學(xué)生進(jìn)行分組，然后按照任務(wù)書的具體要求再進(jìn)行“咨詢決策計(jì)劃實(shí)施檢查評(píng)估”。讓各小組成員利用業(yè)余時(shí)間完成任務(wù)，每組的組長(zhǎng)組織任務(wù)的實(shí)施，記錄小組各個(gè)成員的完成情況，最后由組長(zhǎng)給出小組各成員的成績(jī)。各組之間根據(jù)任務(wù)的完成情況給出等級(jí)。通過這種方式能增強(qiáng)小組成員間的合作意識(shí)、溝通能力，并能充分發(fā)揮出創(chuàng)新精神，提高他們

10、的整體素質(zhì)。3.4 學(xué)生參與講課法在傳統(tǒng)課堂均以教師為主，學(xué)生為輔的講課模式。為了激發(fā)學(xué)生主動(dòng)學(xué)習(xí)的意識(shí)，鼓勵(lì)學(xué)生在部分章節(jié)，部分任務(wù)中將查閱資料及自身體會(huì)在課堂上講解給其他同學(xué)，教師和學(xué)生做點(diǎn)評(píng)和討論。有效的提高的學(xué)生自主學(xué)習(xí)的積極性和學(xué)習(xí)能力。3.5 開展課外活動(dòng)法除了課堂講述外，課外積極組織學(xué)生開展課外活動(dòng)，引導(dǎo)學(xué)生通過互聯(lián)網(wǎng)了解課程前沿動(dòng)態(tài)，積極參與學(xué)術(shù)活動(dòng)和科學(xué)實(shí)驗(yàn)。并且聽一些相關(guān)內(nèi)容的講座知識(shí)，從網(wǎng)上下載一些學(xué)習(xí)資源，看一些賞心悅目的網(wǎng)站，也提高他們對(duì)這個(gè)課學(xué)習(xí)的積極性。3.6 去公司參觀和學(xué)習(xí)法如果有相應(yīng)合作的單位或企業(yè)做相關(guān)網(wǎng)站建設(shè)方面的項(xiàng)目，可以讓學(xué)生去參與和鍛煉，并且讓相關(guān)的設(shè)計(jì)師給他們講一講需要的基礎(chǔ)知識(shí)和主要技術(shù)，做項(xiàng)目整個(gè)架構(gòu)到細(xì)節(jié)的一個(gè)過程，他們切身體會(huì)到做這個(gè)的流程，也給他們將來學(xué)習(xí)指引方向。4 教學(xué)效果通過