網(wǎng)頁設(shè)計(jì)教學(xué)中DIV+CSS布局的運(yùn)用論文

Word-5-網(wǎng)頁設(shè)計(jì)教學(xué)中DIV+CSS布局的運(yùn)用論文

一、引言。

隨著時(shí)代的進(jìn)展長(zhǎng)進(jìn)，網(wǎng)絡(luò)計(jì)算機(jī)技術(shù)的飛快進(jìn)展長(zhǎng)進(jìn)，網(wǎng)頁設(shè)計(jì)領(lǐng)域也有了極其廣泛的進(jìn)展空間，各個(gè)院校都開設(shè)了網(wǎng)頁設(shè)計(jì)這一學(xué)科的教學(xué)，為培養(yǎng)這方面更多的人才對(duì)推進(jìn)我國網(wǎng)頁設(shè)計(jì)專業(yè)的進(jìn)展進(jìn)程作出重要的貢獻(xiàn)。目前，在我國網(wǎng)頁設(shè)計(jì)這一學(xué)科的教學(xué)過程中，教學(xué)使用的軟件普通都是Dre-amweaver,這一軟件在設(shè)計(jì)網(wǎng)頁的時(shí)候，網(wǎng)頁布局法最常用的就是Table頁面布局以及DIV+CSS頁面布局這兩種，本文就深化了解分析DIV+CSS頁面布局法這一頁面布局法解決傳統(tǒng)表格布局法的不足之處，利于后期的網(wǎng)頁維護(hù)和修改工作的舉行，簡(jiǎn)化了代碼，從而削減了網(wǎng)絡(luò)資源的鋪張。因?yàn)镈IV+CSS布局在當(dāng)今社會(huì)的應(yīng)用中受到廣泛的歡迎，因此，我國各院校也應(yīng)重視這一布局法在網(wǎng)頁設(shè)計(jì)教學(xué)中的應(yīng)用，轉(zhuǎn)變傳統(tǒng)網(wǎng)頁設(shè)計(jì)教學(xué)課堂的教學(xué)氛圍，提升教學(xué)質(zhì)量，從而對(duì)提升同學(xué)的本事起到深遠(yuǎn)的作用。

二、DIV+CSS布局。

（一）傳統(tǒng)的網(wǎng)頁頁面布局法。在傳統(tǒng)的網(wǎng)頁設(shè)計(jì)教學(xué)過程中，使用的頁面布局法主要是表格頁面布局和框架布局。表格布局法的優(yōu)勢(shì)在于能夠任意設(shè)置單元格的高度和寬度，還能夠?qū)崿F(xiàn)嵌套，能讓網(wǎng)頁中的各元素都擺放在預(yù)期的地方；它的操作容易易行，能夠完成各種版式的布局。但是它也存在無數(shù)缺點(diǎn)，比如說在設(shè)計(jì)復(fù)雜的網(wǎng)頁時(shí)候，HTML文檔內(nèi)容將會(huì)特殊多，這樣掃瞄器在加載完表格再顯示頁面的過程中，要消耗很長(zhǎng)的時(shí)光，此外，表格布局法還可能使HTML文檔的內(nèi)部結(jié)構(gòu)混亂，其頁面的修理和修改工作也特殊困難。

（二）含義。DIV是一種容器性質(zhì)的元素，它的存在是為HTML文檔內(nèi)容提供結(jié)構(gòu)和背景，它是由起始標(biāo)簽div和結(jié)束標(biāo)簽/div之間的內(nèi)容構(gòu)成的。CSS就是層疊樣式表，主要是用來設(shè)計(jì)網(wǎng)頁的排版和風(fēng)格的，使網(wǎng)頁變得越發(fā)豐盛。

CSS由兩個(gè)主要部分組成：挑選器和聲明，其中挑選器的使用需要轉(zhuǎn)變樣式的元素；聲明則是由一個(gè)屬性一個(gè)值組合成的，屬性和值需要用冒號(hào)來隔開，聲明和聲明之間需要用分號(hào)來隔開。假如要將網(wǎng)頁頁面上的元素實(shí)現(xiàn)一對(duì)一的控制，就需要使用CSS挑選器，常用的有標(biāo)簽挑選器、類挑選器、id挑選器、群組挑選器以及后代挑選器這幾種，它們都有著各自的優(yōu)點(diǎn)和缺點(diǎn)。

（三）布局原理。DIV+CSS頁面布局法是WEB設(shè)計(jì)的標(biāo)準(zhǔn)，它和以往的表格頁面布局法有著顯然的不同之處，能夠?qū)崿F(xiàn)網(wǎng)頁頁面內(nèi)容和表現(xiàn)分別，其中DIV是用來完成網(wǎng)頁的框架結(jié)構(gòu)，CSS是用來美化網(wǎng)站的樣式，它們的共同使用能夠?qū)⒕W(wǎng)站舉行重構(gòu)，使網(wǎng)站進(jìn)一步實(shí)現(xiàn)標(biāo)準(zhǔn)化，簡(jiǎn)化HTML文檔內(nèi)容的代碼，有利于網(wǎng)站結(jié)構(gòu)的搭建。

三、網(wǎng)頁設(shè)計(jì)教學(xué)過程中DIV+CSS布局法的應(yīng)用路徑。

（一）DIV+CSS布局法的優(yōu)點(diǎn)。

1.使網(wǎng)頁結(jié)構(gòu)實(shí)現(xiàn)標(biāo)準(zhǔn)化。因?yàn)閭鹘y(tǒng)的表格頁面布局法使用過程中，網(wǎng)頁垃圾代碼過多，用于裝點(diǎn)的樣式和頁面布局代碼的混合導(dǎo)致頁面結(jié)構(gòu)不美觀，此外，表格頁面布局中的多層嵌套、單元格的合并與拆分這些對(duì)一個(gè)單元格的調(diào)節(jié)工作，都會(huì)影響到其余單元格的表現(xiàn)效果。但是DIV+CSS頁面布局法很好地解決了這一問題，在頁面布局設(shè)計(jì)的時(shí)候，使用DIV盒子來確定大小，其邊框局、間距等多種屬性都能夠舉行數(shù)值上的調(diào)節(jié)，這就使網(wǎng)頁頁面的結(jié)構(gòu)塑造性極強(qiáng)。

2.使網(wǎng)頁內(nèi)容和樣式相分別。DIV+CSS頁面布局法的使用，解決了以往網(wǎng)頁風(fēng)格不統(tǒng)一的問題，有利于更新和網(wǎng)頁修理修護(hù)工作的舉行。DIV（網(wǎng)頁內(nèi)容）和CSS（樣式）的互相分別，普通是利用將頁面內(nèi)容放到HTML文檔文件中而樣式則放在單獨(dú)的CSS文件里，當(dāng)需要舉行網(wǎng)頁內(nèi)容修改時(shí)候，只需要對(duì)HTML文件改動(dòng)，對(duì)網(wǎng)頁頁面效果修改時(shí)候，則只需要對(duì)CSS文件中的內(nèi)容舉行修改即可，大大節(jié)約了工作的時(shí)光和人力的消耗。DIV+CSS頁面布局法將網(wǎng)頁內(nèi)容和樣式的分別，對(duì)網(wǎng)頁的更新工作帶來極大的方便，此外，還能夠?qū)崿F(xiàn)網(wǎng)頁風(fēng)格的互相統(tǒng)一。

3.優(yōu)化搜尋引擎。網(wǎng)頁設(shè)計(jì)中的搜尋引擎主要是針對(duì)網(wǎng)頁內(nèi)容也就是文字、代碼完成的，而傳統(tǒng)的表格頁面布局法中使用的頁面代碼過多，搜尋引擎工作很難完成。但是DIV+CSS頁面布局法中的網(wǎng)頁代碼簡(jiǎn)潔，在舉行搜尋引擎工作的時(shí)候，只需要將被搜尋的內(nèi)容從HTML文檔中的代碼舉行搜尋即可，搜尋引擎只需要輸入搜尋內(nèi)容的關(guān)鍵詞，削減了繁復(fù)的搜尋內(nèi)容，提升了搜尋引擎工作的效率，削減了大量的工作時(shí)光。

（二）DIV+CSS布局在網(wǎng)頁設(shè)計(jì)中的詳細(xì)應(yīng)用路徑。DIV+CSS這一布局法在網(wǎng)頁設(shè)計(jì)學(xué)科的教學(xué)過程中有著重要的作用，但是其技術(shù)性較高，操作困難，這就需要教師在教學(xué)過程中利用以下路徑提升教學(xué)質(zhì)量。

1.教學(xué)內(nèi)容。目前，我國多數(shù)網(wǎng)頁設(shè)計(jì)課程采納的教材在DIV+CSS布局這方面的講解都是從含義講起，再分析字體、表格、圖像等屬性，內(nèi)容散亂無章，同學(xué)學(xué)起來也顯得非常困難。因此，應(yīng)當(dāng)從教學(xué)內(nèi)容的制定上實(shí)現(xiàn)創(chuàng)新，教學(xué)內(nèi)容由容易到困難，不斷深化了解其詳細(xì)含義。教學(xué)內(nèi)容困難度的由淺及深，能夠使同學(xué)在輕松愉悅的氛圍中學(xué)習(xí)，激活同學(xué)的學(xué)習(xí)愛好，這樣網(wǎng)頁設(shè)計(jì)這一學(xué)科的教學(xué)質(zhì)量才干獲得進(jìn)一步的提升，同學(xué)自身的學(xué)問本事水平也將獲得大幅度的長(zhǎng)進(jìn)。

2.教學(xué)辦法。隨著社會(huì)的進(jìn)展長(zhǎng)進(jìn)，我國教學(xué)事業(yè)也獲得了飛快的長(zhǎng)進(jìn)，教學(xué)理念都發(fā)生了巨大的轉(zhuǎn)變，在當(dāng)今教學(xué)活動(dòng)中，應(yīng)當(dāng)彰顯同學(xué)在課堂中的主體地位。這就需要從教學(xué)辦法開頭作出轉(zhuǎn)變。傳統(tǒng)的網(wǎng)頁設(shè)計(jì)課程都是利用教師控制同學(xué)電腦演示設(shè)計(jì)過程來完成的，這種講課辦法同學(xué)無法親手動(dòng)手參加到課堂教學(xué)中，教師講完后讓同學(xué)自己輸入代碼，同學(xué)就被動(dòng)輸入代碼，這樣同學(xué)的思維得不到培養(yǎng)，教學(xué)質(zhì)量也將受到限制。因此，教師應(yīng)當(dāng)創(chuàng)新教學(xué)辦法，充分通過先進(jìn)的多媒體技術(shù)，不再操作同學(xué)的電腦，讓同學(xué)自己動(dòng)手，自主思量問題，這樣教學(xué)質(zhì)量才干獲得提升。

3.教學(xué)評(píng)價(jià)。傳統(tǒng)的網(wǎng)頁設(shè)計(jì)教學(xué)考核主要是利用試卷完成的，這不符合這一學(xué)科的特點(diǎn)，因此，教師要在教學(xué)評(píng)價(jià)上實(shí)現(xiàn)創(chuàng)新，能夠利用綜合課程設(shè)計(jì)以及期末機(jī)房考試這兩部分實(shí)現(xiàn)對(duì)同學(xué)的考核，既能夠檢查同學(xué)往常上課中綜合案例的掌控狀況，又能夠檢測(cè)同學(xué)的網(wǎng)頁設(shè)計(jì)狀況，教學(xué)評(píng)價(jià)體系的創(chuàng)新對(duì)推進(jìn)同學(xué)的