WEB前端開發(fā)經驗總結_第1頁
WEB前端開發(fā)經驗總結_第2頁
WEB前端開發(fā)經驗總結_第3頁
WEB前端開發(fā)經驗總結_第4頁
WEB前端開發(fā)經驗總結_第5頁
已閱讀5頁，還剩1頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、WEB前端開發(fā)閱歷總結發(fā)布時間：2009-04-20 09:05:33  來源：  作者：shengman  點擊：21015這里跟大家談談個人對WEB前端開發(fā)的一些閱歷（當然都是個人的一些理解，有什么地方說的欠妥或不對的地方還請包含和指正），這里我就從WEB標準開頭吧。WEB標準是什么？說是WEB標準，不過我這里主要是對XHTML1.1 和 CSS2.1的一些閱歷總結。由于WEB含蓋的內容實在是太多了，“WEB標準”是一系列標準的總稱，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScrip

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

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

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

5、哪里是段落（p標簽），哪里是段落里要強調的內容（strong標簽） 等，它可以很容易的分析出來。而一個SEO好的站點，大家都知道，被搜尋引擎收錄的機會更多，這個也意味著您的網站會被更多的一般用戶訪問到，給你的站點帶來更多的用戶。一個能幫我們省下大筆費用，提高工作效率。同時又能夠提高頁面掃瞄速度，對用戶友好，甚至能夠不花錢宣揚，就能給你帶來更多用戶的技術。你說你會不會去使用它？這個也正式我們的W3C推舉使用WEB標準開放網站的緣由啊。而這個技術也得到了我們寬闊用戶的認可，所以您現在需要學習WEB標準啊。溫習完了基礎課程，現在正式開頭講XHTML和CSS的技巧了。合理的布局有伴侶會開頭問了，怎么一

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

7、這里我重點要講的是合理的布局，在稍后的文章中我會簡略的介紹浮動元素。好，回到剛才的話題，大家看到了這個頁面了。我這里先把代碼寫給大家看看（省略了部分代碼）：<!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標簽導航實例詳解</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">站內搜尋：</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="請輸入搜尋關鍵字" 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標簽導航實例詳解</h2><div id="article-info">作者/程序設計：<a href="domainmailto:">domain</a>  來源：<a href="" target

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

17、被很多網站收錄了哦），現在拿它來做實例講解吧！當然個人能力有限，有什么不對的地方還請多包含!     </p>     <p>     效果大家看到了，核心功能有：<br />         1、將當前選中標簽以特別的樣式顯示<br />         2、將異步加載

18、的頁面信息顯示到指定的DOM節(jié)點中     </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對象&

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

21、ML2.DOMDocument.3.0" <br />/* =<br />* 函數名稱：$(i)<br />* 參數說明：i - 目標節(jié)點名稱<br />* 函數功能：獵取指定的目標DOM節(jié)點<br />* 返 回 值：返回要搜尋的目標DOM節(jié)點<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就是我們的導航標簽的ID；<br />id="newsCnt"   - newsCnt就是我們要寫入信息的目標DOM節(jié)點；<br />class="first"  - first當前(第一個)標簽的樣式；<br />id="news-0"    - news-0 通過”-“分開，我們就分別可以得到news(導航標簽ID)，0（標簽li在導航標簽中的索引值）<br

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

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

31、/p>    <p>以上講了這么多，我們最后來看看，我們這個ajax標簽導航都用到了那些技術吧：    </p>    <ol><li>XHTML</li><li>CSS</li><li>Javascript</li><li>DOM</li><li>XMLHttpRequest對象</li><li>innerHTML</li&g

32、t;    </ol>    <p>還有XML，我們這個例子沒有涉及到。東西雖小，包含的（web前端開發(fā)）知識可是都用到了啊，我把我會的點東西都端出來了（要失業(yè)了），呵呵！    </p>    <p>當然我很喜愛跟大家多溝通，以后有時間，我們在來談談CSS的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> 看出來什么沒有？（代碼是很多）可能大家已經發(fā)現，整個頁面里基本上都是用戶要看的數據，其中只包含了很少（必要）的布局(XHTML)標簽（請允許我這么說）。整個頁面基本都是由最基礎的h1h6、p、ul、ol、li、form、div標簽來實現的。說到這里就要講到我在前面提到的“結構清晰、SEO優(yōu)化、頁面體積小、XHTML代碼中基本上都是用戶要看的數據”，看看我的這個例子做到了沒有？結構清晰-也就是我們常說的，XHTML標簽要結構化（語意化）。什么叫結構化？由于個人認為這個知識點是十分重要的，所以請允許我在這里多羅嗦幾句，我們接受WEB標準的方法制作頁面的優(yōu)勢就體現在頁面結構清晰。我們以前用table布局的時候，我們的表現（數據）

溫馨提示

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

評論

0/150

提交評論