最簡(jiǎn)單的divcss網(wǎng)頁(yè)設(shè)計(jì)報(bào)告及其代碼

本文格式為Word版下載后可任意編輯和復(fù)制第第頁(yè)最簡(jiǎn)單的divcss網(wǎng)頁(yè)設(shè)計(jì)報(bào)告及其代碼

第一天XHTMLCSS基礎(chǔ)學(xué)問(wèn)

歡迎大家學(xué)習(xí)《十天學(xué)會(huì)web標(biāo)準(zhǔn)》，也就是我們常說(shuō)的DIV+CSS。不過(guò)這里的DIV+CSS是一種錯(cuò)誤的叫法，建議大家還是稱之為web標(biāo)準(zhǔn)。

學(xué)習(xí)本系列教程需有肯定html和css基礎(chǔ)，也就是指您之前做過(guò)網(wǎng)頁(yè)，會(huì)用表格布局。假如您剛開頭學(xué)習(xí)網(wǎng)頁(yè)制作，不知道什么是表格布局及html和css，建議您先去充電，否則學(xué)習(xí)本教程會(huì)特別吃力或者根本就聽(tīng)不懂。

由于時(shí)間關(guān)系，本教程只講解一些基礎(chǔ)學(xué)問(wèn)，讓您從原來(lái)的表格布局跨入到web標(biāo)準(zhǔn)（div+css）布局，會(huì)使用web標(biāo)準(zhǔn)制作出常見(jiàn)的頁(yè)面，這也達(dá)到了本教程的目的。本教程多以實(shí)例形式循序漸進(jìn)講解，實(shí)例涉及到哪些關(guān)鍵點(diǎn)或難點(diǎn)就講解什么，較少講解概念。因?yàn)楦拍钸@些東西很難說(shuō)明白，或者說(shuō)明白你也不肯定能聽(tīng)懂，聽(tīng)懂了也不肯定能理解。所以把概念留給大家以后再深化討論。

由于章節(jié)關(guān)系，沒(méi)有把css和csshack單獨(dú)分出，只是在用到的時(shí)候穿插入講解了。html基礎(chǔ)和css基礎(chǔ)只在第一節(jié)中介紹了幾點(diǎn)重要的。

下面我們開頭第一天的學(xué)習(xí)

一、xhtmlcss基礎(chǔ)學(xué)問(wèn)

首先說(shuō)一下我們這節(jié)課的學(xué)問(wèn)點(diǎn)

1.文檔類型

2.語(yǔ)言編碼

3.html標(biāo)簽

4.css樣式

5.css優(yōu)先級(jí)

6.css盒模型組成

1）文檔類型

當(dāng)我們用dreamweaver新建一下html格式文檔時(shí)，查看源代碼，會(huì)發(fā)覺(jué)代碼最上部有如下這句話：

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN/retype/zoom/42bebb3d9e3143323868939e?pn=4&x=0&y=138&raww=462&rawh=427&o=png_6_0_0_135_245_519_480_892.979_1262.879&type=pic&aimh=427&md5sum=3d603fce4e95b9a20b144da2c27ed416&sign=77b67ee18f&zoom=&png=2348-6175&jpg=0-0"target="_blank">點(diǎn)此查看

(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具備這些屬性。

我們可以把它想像成現(xiàn)實(shí)中上方開口的盒子，然后從正上往下俯視，邊框相當(dāng)于盒子的厚度，內(nèi)容相對(duì)于盒子中所裝物體的空間，而填充呢，相當(dāng)于為防震而在盒子內(nèi)填充的泡沫，邊界呢相當(dāng)于在這個(gè)盒子四周要留出肯定的空間，便利取出。是不是這樣就很簡(jiǎn)單理解盒模型了。

所以整個(gè)盒模型在頁(yè)面中所占的寬度是由左邊界+左邊框+左填充+內(nèi)容+右填充+右邊框+右邊界組成，而css樣式中weight所定義的寬度僅僅是內(nèi)容部分的寬度，這是很多伴侶簡(jiǎn)單搞混的地方

這里的邊界我們也稱之為：外邊距、外補(bǔ)丁；填充也叫：內(nèi)邊距、內(nèi)補(bǔ)丁。

假如現(xiàn)在您對(duì)CSS盒模型理解還不夠透徹，連續(xù)往下看，后來(lái)的章節(jié)會(huì)都會(huì)應(yīng)用到盒模型實(shí)例。

二、如何開頭學(xué)習(xí)web標(biāo)準(zhǔn)？

1）有HTML和CSS基礎(chǔ)

學(xué)習(xí)本系列教程前，要求您有肯定的html和css基礎(chǔ)，制作過(guò)網(wǎng)頁(yè)，會(huì)用表格進(jìn)行網(wǎng)頁(yè)布局，這樣學(xué)習(xí)起來(lái)才會(huì)很輕松。假如您對(duì)這些還不懂，建議先學(xué)習(xí)這些學(xué)問(wèn)，然后再來(lái)學(xué)習(xí)本教程。

2）轉(zhuǎn)變觀念

在以前我們制作網(wǎng)站時(shí)，總是習(xí)慣于先考慮外觀、顏色、字體及布局等全部表現(xiàn)在頁(yè)面上的內(nèi)容。但外觀并不是最重要的，相反最終用戶在訪問(wèn)網(wǎng)頁(yè)時(shí)的體驗(yàn)才是優(yōu)先要考慮的。一個(gè)由div＋css布局且結(jié)構(gòu)良好的頁(yè)面可以通過(guò)css定義成任何外觀，在任何網(wǎng)絡(luò)設(shè)備上（包括手機(jī)、PDA和計(jì)算機(jī)）上以任何外觀表現(xiàn)出來(lái)，而且用div＋css布局構(gòu)建的網(wǎng)頁(yè)以夠簡(jiǎn)化代碼，加快顯示速度。

所以要想學(xué)好div＋css，首先要轉(zhuǎn)變觀念，需要拋棄傳統(tǒng)的表格(Table)布局方式，采納層(DIV)布局，并且使用層疊樣式表(CSS)來(lái)實(shí)現(xiàn)頁(yè)面的外觀。給網(wǎng)站掃瞄者更好的體驗(yàn)。

3）多動(dòng)手、多動(dòng)腦

說(shuō)到這點(diǎn)，有點(diǎn)小兒科了，就像我們上學(xué)校時(shí)老師經(jīng)常教我們的那樣。為什么我在這里也做為一點(diǎn)列出來(lái)呢，我是通過(guò)評(píng)論發(fā)覺(jué)，有些同學(xué)提的問(wèn)題太沒(méi)水平了，略微動(dòng)下腦筋就明白了，或者自己動(dòng)手一試就知道了，但他就懶得試。舉個(gè)簡(jiǎn)潔的例子，拿掃瞄器兼容來(lái)說(shuō)吧，你寫個(gè)樣式之后，在IE和火狐分別打開看一下不就明白了，但就是不去做。還有一個(gè)同學(xué)留言要我把一個(gè)實(shí)例中的圖片打包發(fā)給他