網(wǎng)頁前端開發(fā)教案

1、網(wǎng)頁前端開發(fā)教案html網(wǎng)頁設(shè)計(jì)教案】html網(wǎng)頁設(shè)計(jì)教案列1號(hào)共5頁html網(wǎng)頁設(shè)計(jì)教案（續(xù)頁）第2頁【篇二：web前端開發(fā)技術(shù)授課計(jì)劃】學(xué)期授課計(jì)劃編寫說明授課計(jì)劃表【篇三：前端開發(fā)基礎(chǔ)篇（一）】xhtml+css頁面布局教程一、知識(shí)篇1. 你必須知道的知識(shí)知識(shí)一div+css的叫法是不準(zhǔn)確的在整個(gè)教程的最前面必須先給大家糾正一個(gè)錯(cuò)誤，就是“div+css”！“div+css這種叫法其實(shí)是一種不準(zhǔn)確的叫法，是國人給這種布局標(biāo)”準(zhǔn)頁面的方法起的名字，是對(duì)技術(shù)理解不夠透徹導(dǎo)致的，而標(biāo)準(zhǔn)的叫法是什么呢？呵呵，沒錯(cuò)，是xhtml+css！為什么國人將這種布局標(biāo)準(zhǔn)頁面的方法叫做div+css？因?yàn)榈?/p>

2、一個(gè)將這種技術(shù)引進(jìn)中國的人，對(duì)這門技術(shù)理解不夠透徹，單純從代碼上辨別過去的頁面布局方法和現(xiàn)在流行的頁面布局方法，認(rèn)為過去布局頁面用的是table，稱之為“table+css”，而現(xiàn)在布局頁面呢，用div，所以叫div+css。聽起來也挺合理，豈不知這種叫法誤導(dǎo)了絕大部分的網(wǎng)頁開發(fā)者，認(rèn)為這樣布局出來的頁面也就是標(biāo)準(zhǔn)頁面，就是符合w3c標(biāo)準(zhǔn)的頁面，更甚者走了極端，看到網(wǎng)站上用到table，就會(huì)嘲笑頁面做的不夠標(biāo)準(zhǔn)，結(jié)果用不用table成為了判定頁面是否標(biāo)準(zhǔn)的關(guān)鍵點(diǎn)。還有另外一種極端，將頁面中用到的標(biāo)簽全部換做div，那就更是大錯(cuò)特錯(cuò)了。知識(shí)二div+css將你引入誤區(qū)“div+css”叫法將網(wǎng)頁

3、制作者引入兩大誤區(qū)【誤區(qū)一】網(wǎng)頁中用了table，頁面就不標(biāo)準(zhǔn)，甚至覺著用table丟人，table成為了判定頁面是否標(biāo)準(zhǔn)的關(guān)鍵點(diǎn)?！菊`區(qū)一】認(rèn)為網(wǎng)頁中的div標(biāo)簽用的越多越好，甚至有人將頁面中所有的標(biāo)簽都替換為div，div的多少，決定頁面標(biāo)準(zhǔn)的程度。這個(gè)時(shí)候肯定用table最合適了，而表格外面組成頁面結(jié)構(gòu)的部分當(dāng)然用div了，這是由他們兩個(gè)誕生的目的決定的，也是符合w3c標(biāo)準(zhǔn)的，那么這個(gè)頁面就是標(biāo)準(zhǔn)頁面。既然是標(biāo)準(zhǔn)頁面，標(biāo)簽各干各的活“各司其職”，table就用來存儲(chǔ)數(shù)據(jù)，怎么用table就丟人了呢？怎么就不標(biāo)準(zhǔn)了呢？div就用來構(gòu)架頁面結(jié)構(gòu)，怎么會(huì)用的越多越標(biāo)準(zhǔn)呢？歸根結(jié)底就是“div+

4、css”的叫法導(dǎo)致。知識(shí)三什么是w3c？我們平時(shí)說的w3c，其實(shí)是worldwidewebconsortium的縮寫，中文是w3c組織或者萬維網(wǎng)聯(lián)盟，w3c這個(gè)組織做什么的呢？很簡(jiǎn)單，就是出網(wǎng)頁標(biāo)準(zhǔn)的。那么有w3c組織出的標(biāo)準(zhǔn)就被稱為w3c標(biāo)準(zhǔn)，那么符合w3c標(biāo)準(zhǔn)的頁面就是標(biāo)準(zhǔn)頁面了，好，問題來了什么是w3c標(biāo)準(zhǔn)？【注意】下面對(duì)w3c標(biāo)準(zhǔn)的解釋，需要理解一下，因?yàn)樵诤芏鄔eb前端開發(fā)工程師面試的時(shí)候會(huì)遇到這方面的問題，很多企業(yè)在面試一些web前端技術(shù)人員的時(shí)候，認(rèn)為如果連什么是w3c都不知道，那做出來的頁面肯定就不能夠符合w3c標(biāo)準(zhǔn)，所以要求大家留意下！w3c標(biāo)準(zhǔn)不是一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的

5、集合，包含三部分的標(biāo)準(zhǔn)：結(jié)構(gòu)標(biāo)準(zhǔn)、表現(xiàn)標(biāo)準(zhǔn)和動(dòng)作標(biāo)準(zhǔn)。與結(jié)構(gòu)標(biāo)準(zhǔn)對(duì)應(yīng)的代表語言是xhtml，與表現(xiàn)標(biāo)準(zhǔn)對(duì)應(yīng)的代表語言是css，與動(dòng)作標(biāo)準(zhǔn)對(duì)應(yīng)的代表語言是javascript。當(dāng)我們將一個(gè)成品的網(wǎng)頁設(shè)計(jì)制作成一個(gè)靜態(tài)頁面的時(shí)候，就要符合前面兩種標(biāo)準(zhǔn)，結(jié)構(gòu)標(biāo)準(zhǔn)和表現(xiàn)標(biāo)準(zhǔn)，那么制作出來的頁面就是標(biāo)準(zhǔn)頁面，用他們相對(duì)應(yīng)的語言來描述這種制作標(biāo)準(zhǔn)頁面的技術(shù)我們就稱之為“xhtml+css”！【總結(jié)】知識(shí)一、知識(shí)二、知識(shí)三是大家必須知道的，知道了這些無論去面試還是和其他人溝通，都會(huì)讓對(duì)方感覺你這個(gè)人很專業(yè)，對(duì)技術(shù)理解很透徹！二、基礎(chǔ)篇2. 你必須掌握的基礎(chǔ)本節(jié)主要講解，兩個(gè)內(nèi)容：第一：css如何控制頁面樣式

6、，有幾種樣式；第二：這些樣式出現(xiàn)在同一個(gè)頁面時(shí)的優(yōu)先級(jí)。使用xhtml+css布局頁面，其中有個(gè)很重要的特點(diǎn)就是結(jié)構(gòu)與表現(xiàn)相分離，結(jié)構(gòu)指xhtml頁面代碼，表現(xiàn)就是css代碼了，如果把一個(gè)網(wǎng)頁看成穿著衣服的人的話，人就是xhtml，是結(jié)構(gòu)，而衣服呢就是css，是表現(xiàn)，現(xiàn)在出現(xiàn)的問題是，如何讓css去控制頁面？或者說，如何讓衣服穿在人身上；不同的css就可以使頁面出現(xiàn)不同的風(fēng)格適用不同的網(wǎng)站，而不同的衣服，人穿上后就會(huì)體現(xiàn)出不同的職業(yè)。知識(shí)一css如何控制頁面第一：如何讓css去控制html頁面？有4種樣式（方式），行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式、導(dǎo)入樣式1）行內(nèi)樣式行內(nèi)樣式是4種樣式中最直接最簡(jiǎn)

7、單的一種，直接對(duì)html標(biāo)簽使用style=，例如：1 .pstyle=color:#f00;background:#ccc;font-size:12px;/p雖然這種方法比較直接，在制作頁面的時(shí)候需要為很多的標(biāo)簽設(shè)路style屬性，所以會(huì)導(dǎo)致html頁面不夠純凈，文件體積過大，不利于搜索蜘蛛爬行，從而導(dǎo)致后期維護(hù)成本高。2 ）內(nèi)嵌樣式內(nèi)嵌樣式就是將css代碼寫在head/head之間，并且用style/style進(jìn)行聲明，例如：1.!doctypehtmlpublic-/w3c/dtdxhtml1.0transitional/en:打造中國web前端開發(fā)人員最專業(yè)的貼心社區(qū)！/title6.

8、 styletype=text/css7. body,div,a,img,pmargin:0;padding:0;8. acolor:#fff;9. imgfloat:left;10. #containerwidth:500px;height:350px;background:url（/static/image/cm/demo/2d121/w3cbg.jpg）no-repeat;position:relative;margin:0auto;11. #containerpwidth:380px;height:40px;position:absolute;left:60px;bottom:60px

9、;color:#fff;font-size:12px;line-height:18px;text-align:center;font-family:微軟雅黑,verdana,geneva,sans-serif;12. #regdisplay:block;width:114px;height:27px;position:absolute;left:191px;bottom:28px;13. /style14. /head15. body16. divid=container17. p全國的web前端開發(fā)工程師歡聚于ahref=/最專業(yè)的貼心社區(qū)！”/p18. ahref=/member.php?

10、mod=registertarget=_blankid=reg/a19. /div20. /body21. /html內(nèi)嵌樣式，大家也許已經(jīng)意識(shí)到，即使有公共css代碼，也是每個(gè)頁面都要定義的，如果一個(gè)網(wǎng)站有很多頁面，每個(gè)文件都會(huì)變大，后期維護(hù)難度也大，如果文件很少，css代碼也不多，這種樣式還是很不錯(cuò)的。3）鏈接樣式鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在head/head之間加上link就可以了，如下：linktype=text/cssrel=stylesheethref=style.css/舉個(gè)例子：1.!doctypehtmlpublic-/w3c/dtdxhtml1.0tran

11、sitional/en:打造中國web前端開發(fā)人員最專業(yè)的貼心社區(qū)！/title6. linkrel=stylesheettype=text/csshref=/static/image/cm/demo/2d121/style.css/7. /head8. body9. divid=container10. p全國的web前端開發(fā)工程師歡聚于a們的口號(hào)是“打造中國web前端開發(fā)人員最專業(yè)的貼心社區(qū)！”/p11. ahref=member.php?mod=registertarget=_blankid=reg/a12. /div13. /body14. /html這種樣式將html文件和css文件徹