WEB前端開發(fā)經(jīng)驗(yàn)總結(jié)_第1頁
WEB前端開發(fā)經(jīng)驗(yàn)總結(jié)_第2頁
WEB前端開發(fā)經(jīng)驗(yàn)總結(jié)_第3頁
WEB前端開發(fā)經(jīng)驗(yàn)總結(jié)_第4頁
WEB前端開發(fā)經(jīng)驗(yàn)總結(jié)_第5頁
已閱讀5頁,還剩1頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、WEB前端開發(fā)閱歷總結(jié)發(fā)布時(shí)間:2009-04-20 09:05:33  來源:  作者:shengman  點(diǎn)擊:21015這里跟大家談?wù)剛€(gè)人對(duì)WEB前端開發(fā)的一些閱歷(當(dāng)然都是個(gè)人的一些理解,有什么地方說的欠妥或不對(duì)的地方還請(qǐng)包含和指正),這里我就從WEB標(biāo)準(zhǔn)開頭吧。WEB標(biāo)準(zhǔn)是什么?說是WEB標(biāo)準(zhǔn),不過我這里主要是對(duì)XHTML1.1 和 CSS2.1的一些閱歷總結(jié)。由于WEB含蓋的內(nèi)容實(shí)在是太多了,“WEB標(biāo)準(zhǔn)”是一系列標(biāo)準(zhǔn)的總稱,包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScrip

2、t1.1、DOM1.0等等。所以這里要跟大家指出來一下,WEB標(biāo)準(zhǔn)不是我們所說的DIV+CSS。剛剛上面提到了DIV+CSS,這里要說明下,這樣說其實(shí)是不正確的。DIV+CSS精確的說法(個(gè)人的理解)應(yīng)該是:接受W3C推舉的WEB標(biāo)準(zhǔn)中的XHTML1.1結(jié)合CSS2.0樣式表制作頁面的方法,DIV應(yīng)該指的是XHTML標(biāo)簽,而CSS顯示是指的CSS樣式表了。 接受WEB標(biāo)準(zhǔn)開發(fā)的好處那么W3C為什么會(huì)推舉這樣的頁面制作方法呢?下面我們就簡潔的看看接受WEB標(biāo)準(zhǔn)開發(fā)(個(gè)人理解的)相對(duì)以前TABLE布局的優(yōu)勢(shì)有哪些?1、節(jié)省運(yùn)營成本看看我們的WEB標(biāo)準(zhǔn)制作方法是如何做到的?接受WEB標(biāo)準(zhǔn)制作,我們可

3、以做到表現(xiàn)很形式的分離,我們用XHTML來表現(xiàn)(數(shù)據(jù)),用CSS來掌握(頁面元素呈現(xiàn)的)形式。寫的好的頁面,XHTML代碼中基本上都是用戶要看的數(shù)據(jù),還其他修飾性的東西,全部由我們的CSS來掌握。這樣一來我們的(XHTML)頁面的體積就大大減小了,這樣你在帶寬上的費(fèi)用就會(huì)大家降低了,這個(gè)怎么降低的,你可以想象一下,YAHOO的首頁小1K,100W個(gè)人一起訪問,那么帶寬節(jié)省了多少?而且可以更充分的利用帶寬。而我們的CSS掌握了,全部的頁面元素的樣式,現(xiàn)在想改網(wǎng)站的整體風(fēng)格,你只需要花幾分鐘修改一下一個(gè)CSS文件,就可以輕松搞定了。維護(hù)的成本也下來了,省了不少錢了吧?還有,你開這個(gè)頁面的速度會(huì)快很

4、多啊,一個(gè)讓你等半分鐘的頁面,除非里面的信息對(duì)你很有用,不然我們大家基本都沒有太多的時(shí)間去用來等待的。2、對(duì)用戶友好更友好,且有機(jī)會(huì)獲得更多的用戶現(xiàn)在來說說用戶友好。首先我想把我們的用戶來分下類。第一類:一般用戶(每個(gè)訪問我們網(wǎng)站的人);其次類:搜尋引擎;接受WEB標(biāo)準(zhǔn)開發(fā)的頁面,結(jié)構(gòu)清晰,頁面體積小,掃瞄器兼容性好。一般用戶訪問的時(shí)候,頁面打開速度快,而且不管用戶使用那種掃瞄器,都能夠正常訪問(顯示)頁面,且頁面的結(jié)構(gòu)清晰,要找的數(shù)據(jù)可以很便利的掃瞄到。而對(duì)搜尋引擎來說,一個(gè)好的接受WEB標(biāo)準(zhǔn)開發(fā)的頁面,都是做過SEO優(yōu)化的,它訪問起來很友好,很容易理解你的頁面中哪里是標(biāo)題(H1H6標(biāo)簽),

5、哪里是段落(p標(biāo)簽),哪里是段落里要強(qiáng)調(diào)的內(nèi)容(strong標(biāo)簽) 等,它可以很容易的分析出來。而一個(gè)SEO好的站點(diǎn),大家都知道,被搜尋引擎收錄的機(jī)會(huì)更多,這個(gè)也意味著您的網(wǎng)站會(huì)被更多的一般用戶訪問到,給你的站點(diǎn)帶來更多的用戶。一個(gè)能幫我們省下大筆費(fèi)用,提高工作效率。同時(shí)又能夠提高頁面掃瞄速度,對(duì)用戶友好,甚至能夠不花錢宣揚(yáng),就能給你帶來更多用戶的技術(shù)。你說你會(huì)不會(huì)去使用它?這個(gè)也正式我們的W3C推舉使用WEB標(biāo)準(zhǔn)開放網(wǎng)站的緣由啊。而這個(gè)技術(shù)也得到了我們寬闊用戶的認(rèn)可,所以您現(xiàn)在需要學(xué)習(xí)WEB標(biāo)準(zhǔn)啊。溫習(xí)完了基礎(chǔ)課程,現(xiàn)在正式開頭講XHTML和CSS的技巧了。合理的布局有伴侶會(huì)開頭問了,怎么一

6、開頭就開頭講合理的布局了呢?前面我們提到了一些知識(shí)點(diǎn)“結(jié)構(gòu)清晰、SEO優(yōu)化、頁面體積小、XHTML代碼中基本上都是用戶要看的數(shù)據(jù)”。這些東西,都是我們做了合理布局的結(jié)果。而且我個(gè)人覺得,我們接受WEB標(biāo)準(zhǔn)制作的一切都是從這個(gè)知識(shí)點(diǎn)開頭的,所以我這里就先來說這個(gè)話題。那么大家又會(huì)開頭問,怎樣的一個(gè)頁面,才算是合理的布局的呢?這個(gè)問題問題問得好,也是我們大家剛開頭學(xué)用WEB標(biāo)準(zhǔn)的問得最多的問題之一,我也曾常常被這個(gè)問題所困擾,這里就說說我對(duì)合理布局的一些理解。在開頭講合理布局的頁面要達(dá)到的要素前,我們還是用個(gè)實(shí)例來講解會(huì)更直觀些。先來看看這個(gè)圖片:不錯(cuò),這個(gè)是一個(gè)文章簡略頁,沒有左右兩欄布局,不過

7、這里我重點(diǎn)要講的是合理的布局,在稍后的文章中我會(huì)簡略的介紹浮動(dòng)元素。好,回到剛才的話題,大家看到了這個(gè)頁面了。我這里先把代碼寫給大家看看(省略了部分代碼):<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"

8、 /><title>Ajax標(biāo)簽導(dǎo)航實(shí)例詳解</title><link href="css/article.css" rel="stylesheet" type="text/css" media="all" /><script language="javascript" type="text/javascript" src="/upload/1/0/8/8/10881/"></script>

9、</head><body><div id="container"><div id="topbar"><h1><a href="" target="_blank" title="海嘯的地盤-享受生活,享受每一天!">海嘯的地盤-享受生活,享受每一天!</a></h1><div id="search-bar"><form name="frmsearch&qu

10、ot; id="frmsearch"    action="" method="post"><label for="keyword">站內(nèi)搜尋:</label>    <select id="topics">    <option value="0">全部主題</option>    <

11、option value="1">(X)HTML</option>    <option value="2">CSS</option>    <option value="3">Javascript</option>    <option value="4">XML</option>    <optio

12、n value="5">ASP/ASP.NET</option>    </select><input type="text" name="keyword" id="keyword" value="請(qǐng)輸入搜尋關(guān)鍵字" maxlength="60" /><input type="reset" name="btnsearch" id="btnsearch

13、" value="開頭搜尋" /></form>        </div>    </div><ul id="nav">    <li><a href="#2">ARTICLES</a></li>    <li><a href="#2&q

14、uot;>TOPICS</a></li>    <li><a href="#2">ABOUT</a></li>    <li><a href="#2">CONTACT</a></li>    <li><a href="#2">GESTBOOK</a></li> &#

15、160;  <li><a href="#2">FEED</a></li>    </ul>    <h2>Ajax標(biāo)簽導(dǎo)航實(shí)例詳解</h2><div id="article-info">作者/程序設(shè)計(jì):<a href="domainmailto:">domain</a>  來源:<a href="" target

16、="_blank"></a>  發(fā)布時(shí)間:2008年4月28日</div><h3>代碼篇</h3>     <p>     之前整理發(fā)表了<a href="" target="_blank">XMLHTTPRequest的屬性和方法簡介</a>,它Ajax要使用的核心的技術(shù)之一,現(xiàn)在就來實(shí)際運(yùn)用它。這個(gè)Ajax標(biāo)簽導(dǎo)航,是我很久前就寫的一個(gè)腳本,很有用的(還

17、被很多網(wǎng)站收錄了哦),現(xiàn)在拿它來做實(shí)例講解吧!當(dāng)然個(gè)人能力有限,有什么不對(duì)的地方還請(qǐng)多包含!     </p>     <p>     效果大家看到了,核心功能有:<br />         1、將當(dāng)前選中標(biāo)簽以特別的樣式顯示<br />         2、將異步加載

18、的頁面信息顯示到指定的DOM節(jié)點(diǎn)中     </p>     <p>     我們來看看處理腳本的代碼吧:     </p><div class="code-title">程序代碼:ajaxtab.js</div>     <div class="js code" name="cod

19、e" id="js-code"><!-<br />/ 推斷是否支持ActiveX<br />var useActiveX=(typeof ActiveXObject != "undefined"); <br />/ 推斷是否支持DOM<br />var useDom=document.implementation && document.implementation.createDocument;<br />/ 推斷是否支持XMLHttpRequest對(duì)象&

20、lt;br />var useXmlHttp=(typeof XMLHttpRequest != "undefined");<br />/ XMLHttpRequest對(duì)象版本<br />var ARR_XMLHTTP_VERS = "MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"<br />/ DOM對(duì)象版本 <br />var ARR_DOM_VERS = "MSXML2.DOMDocument.6.0","MSX

21、ML2.DOMDocument.3.0" <br />/* =<br />* 函數(shù)名稱:$(i)<br />* 參數(shù)說明:i - 目標(biāo)節(jié)點(diǎn)名稱<br />* 函數(shù)功能:獵取指定的目標(biāo)DOM節(jié)點(diǎn)<br />* 返 回 值:返回要搜尋的目標(biāo)DOM節(jié)點(diǎn)<br />* 使用方法:$("frmSearch")<br />= */<br />function $(i)<br />      if(!document.ge

22、tElementById)return false;<br />      if(typeof i="string")<br />            if(document.getElementById && document.getElementById(i) <br />       &#

23、160;       / W3C DOM<br />              return document.getElementById(i);<br />         <br />         els

24、e if (document.all && document.all(i) <br />              / MSIE 4 DOM<br />               return document.all(i);<br />   &

25、#160;     <br />         else if (document.layers && document.layersi) <br />               / NN 4 DOM. note: this won't find nested layers<br

26、/>               return document.layersi;<br />         <br />         else <br />        

27、;       return false;<br />         <br />      <br />      elsereturn i;<br /><br />/-></div>    <p>id="news"

28、      - news就是我們的導(dǎo)航標(biāo)簽的ID;<br />id="newsCnt"   - newsCnt就是我們要寫入信息的目標(biāo)DOM節(jié)點(diǎn);<br />class="first"  - first當(dāng)前(第一個(gè))標(biāo)簽的樣式;<br />id="news-0"    - news-0 通過”-“分開,我們就分別可以得到news(導(dǎo)航標(biāo)簽ID),0(標(biāo)簽li在導(dǎo)航標(biāo)簽中的索引值)<br

29、 /><a href="news/news0.htm">網(wǎng)站重構(gòu)</a> - 超鏈接<br /><span></span>  - 標(biāo)簽間的分割線<br />    </p>    <p>我排列的這些東西,信任大家開頭看出了些頭緒了,呵呵,不過別急!在我們看處理的腳本之前,先讓我們來看看導(dǎo)航標(biāo)簽的樣式,主要是看看我們對(duì)分割線的處理(一點(diǎn)CSS處理的技巧)。     &

30、#160; </p>    <p>原來想偷個(gè)懶,讓大家看我上邊說的那篇文章,想想也就是Ctrl+C&Ctrl+V,都貼出來吧!呵呵!    </p>    <p>不過還沒有完,最后要說的就是innerHTML這個(gè)特性,這里我們還要感謝微軟啊,innerHTML就是它的專利,我們就是用它來轉(zhuǎn)變指定DOM內(nèi)的HTML字符串的,而不用刷新頁面。簡略的信息大家還是google一下吧,我也要休息下??!喝口茶先!-!    <

31、/p>    <p>以上講了這么多,我們最后來看看,我們這個(gè)ajax標(biāo)簽導(dǎo)航都用到了那些技術(shù)吧:    </p>    <ol><li>XHTML</li><li>CSS</li><li>Javascript</li><li>DOM</li><li>XMLHttpRequest對(duì)象</li><li>innerHTML</li&g

32、t;    </ol>    <p>還有XML,我們這個(gè)例子沒有涉及到。東西雖小,包含的(web前端開發(fā))知識(shí)可是都用到了啊,我把我會(huì)的點(diǎn)東西都端出來了(要失業(yè)了),呵呵!    </p>    <p>當(dāng)然我很喜愛跟大家多溝通,以后有時(shí)間,我們?cè)趤碚務(wù)凜SS的HACKS技巧,Javascript DOM編程等等的,今日就收工了,感謝捧場先!     </p> </div>&l

33、t;p id="copyright">      Copyright &copy; 2007-2008 <strong><a href=""></a></strong>, All rights reserved.    Powered By: <a href="domainmailto:">domain</a></p></body></htm

34、l> 看出來什么沒有?(代碼是很多)可能大家已經(jīng)發(fā)現(xiàn),整個(gè)頁面里基本上都是用戶要看的數(shù)據(jù),其中只包含了很少(必要)的布局(XHTML)標(biāo)簽(請(qǐng)?jiān)试S我這么說)。整個(gè)頁面基本都是由最基礎(chǔ)的h1h6、p、ul、ol、li、form、div標(biāo)簽來實(shí)現(xiàn)的。說到這里就要講到我在前面提到的“結(jié)構(gòu)清晰、SEO優(yōu)化、頁面體積小、XHTML代碼中基本上都是用戶要看的數(shù)據(jù)”,看看我的這個(gè)例子做到了沒有?結(jié)構(gòu)清晰-也就是我們常說的,XHTML標(biāo)簽要結(jié)構(gòu)化(語意化)。什么叫結(jié)構(gòu)化?由于個(gè)人認(rèn)為這個(gè)知識(shí)點(diǎn)是十分重要的,所以請(qǐng)?jiān)试S我在這里多羅嗦幾句,我們接受WEB標(biāo)準(zhǔn)的方法制作頁面的優(yōu)勢(shì)就體現(xiàn)在頁面結(jié)構(gòu)清晰。我們以前用table布局的時(shí)候,我們的表現(xiàn)(數(shù)據(jù))

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論