DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 網站開發and設計者的十點建議
網站開發and設計者的十點建議
編輯:AJAX詳解      日期:2016/12/30 17:42:55

1. 使用Firefox

Firefox是你觸手可及的最重要的平台,網站開發時必不可少。並不是說你非得把它作為默認浏覽器——平時上網時,你想用哪個都行。

自Firefox問世,就有一些居家旅行必備擴展隨之產生。如果你想事半功倍立竿見影,快用它們。

必備擴展

Web Developer (Chris Pederick)

這個擴展有很多功能,雖然多數已被FireBug(下文會談到)涵蓋,還是有一些頗為好用的。其中包括:

  • 縮放浏覽器窗口
    簡單迅速的縮放窗口,800×600、1024×768… 任何指定的尺寸。使用此功能,可以查看各種分辨率下網站的表現。到你的Google Analytics帳戶裡看看哪種分辨率的訪問者最多吧,然後重點為它設計。(FireBug沒這個功能)
    My Visitors' Resolutions
  • 編輯CSS/Html無需刷新
    使用此功能,不必刷新頁面即可修改CSS,並將結果實時呈現於頁面。太節省時間了。(Firebug裡有類似功能,但沒這麼方便)
    (Htmlor注:靠,用了這麼久居然都沒發現這個好東西,真是太遜了~)
  • 查看頁面加載的所有Javascript
    使用此功能,可以在一個頁面內查看所有已加載的JS。查看自己或別人的JS代碼,方便的很。(Firebug能顯示出所有JS名稱,但代碼沒有擺在一起,不方便查詢)
  • 查看生成的源代碼
    如果你有用AJax或者Javascript改變頁面內容,此功能絕對實用。因為通常的“查看源文件”模式下,是看不到動態生成的Html代碼的。(Firebug也有此功能)

Firebug (Joe Hewitt)

在辦公室裡,我們常常會問:“還記得沒有Firebug時怎麼過麼?”它確實改變了我的生活。其主要好處如下:

  • 檢閱DOM
    點擊“Inspect”,然後鼠標放到頁面元件上,就能看到此元件的Html和CSS代碼。
  • 顯示樣式繼承的實時CSS編輯
    簡直就是錢啊——這大大節省了布局設計的時間。例如,在Firebug裡可以選擇一個DIV標記,點擊margin屬性後手工調整,上下鍵為加減1個像素,上下翻頁鍵為加減10個像素。(Htmlor注:任何數值屬性都可以這樣調整) 還可以在當前樣式添加新屬性。效果滿意之後,再把修改的CSS代碼貼到實際文件中去。
  • 詳盡的Javascript調試
    這裡的JS控制台比Firefox自帶的稍好。它更詳盡,是默認控制台不錯的替代品。
  • 查看頁面加載的所有文件及總字節數
    對於優化站點加載時間來說,這很關鍵。你可以測試單個文件會加載多久,圖片,JS文件,AJax調用等。在“Net”部分的最後一行,可以看到頁面加載文件的總字節數。

2. 保持兼容性

保持跨浏覽器的兼容性很重要。對我來說,這是不怎麼好玩的一件事。我之前說過最好在Firefox下開發,但也別忘了檢查一下頁面在IE6、IE7、Safari(或者還有Opera)中的表現。還有,到Google Analytics裡看看你的訪問者都用什麼浏覽器。他們用哪些,你就得重點照顧哪些。

My Visitors' Browsers

在自己網站的Google Analytics帳戶裡,我親眼目睹了IE6占浏覽器比例的下滑,持續下滑。等到哪天它跌破5%時,我會開個party慶祝一下——因為再也用不著支持它了。

想要不那麼費事的實現兼容,那就簡單一點。比如你為了某種效果在一個浏覽器裡百般調試、費盡周折,它卻很可能在另外的浏覽器裡不好好表現。這就要說到下個建議:少即多。

3. 少即多

把握好分寸。圖形設計,編程,頁面布局,任何事情都需如此。簡單一點。

  • 圖形設計
    現在有一種濫用漸變、斜角和陰影的態勢。有時候事情如果沒搞好,很可能是東西太多了。簡簡單單、大方得體就好。
  • 花哨的Javascript
    用一些很酷的JS效果增強用戶界面很好,不過另一方面,它會造成用戶的負擔,尤其是那些沒有像你一樣擁有超級電腦的用戶。此外,還有跨浏覽器不兼容的麻煩。再強調一次,不要對JS倚重太過,什麼事都靠它。如果實在想用JS,我強烈推薦>jQuery

4. Javascript?就用jQuery

Javascript用來顯示/隱藏信息很棒,它讓頁面空間開闊,不會擠成一堆。想以一種更新更酷更簡單的方式操控JS?一定要試試jQuery。

jQuery

jQuery的主要優點之一:兼容性已廣受各大浏覽器的考驗。也就是說,其所有方法都能保證正常運行。優點之二:極其易用。

jQuery使用CSS的選擇器方式操作對象,讓你隨心所欲的控制它們,一切盡在掌握。例如:

隱藏id為myDiv的DIV裡所有的段落

$('#myDiv p').hide();$('#myDiv p').hide('slow'); // 動畫效果隱藏$('#myDiv p').toggle(); // 點擊顯示,再點擊隱藏

從>這裡了解更多jQuery。

其他類似的Javascript庫也不少,像>mootools、>prototype和>script.aculo.us

5. AJax要因地制宜

Web 2.0大潮中,Ajax炙手可熱。很多人都問我“你懂Ajax嗎?”,好像它是種獨立的編程語言似的。說白了,AJax只是一種手段而已,它通過與服務器端交互,無需刷新頁面就能獲取和更新數據。

我注意到最近有一種趨勢:無論干什麼都用AJax。這並不總是明智的選擇。原因?

  • 訪問量。全盤應用AJax,會損失掉寶貴的PV。
  • 可用性。這一點會有爭議,但我認為大多數用戶(可能不包括你)仍舊有個習慣:他們依然把頁面刷新當作某些事件(如表單提交、頁面跳轉等)發生的跡象。

AJax絕對有用武之地,而且某些情況下非它不可。不過重申一遍,少即多。把握分寸,適度使用Javascript和AJax就好。

6. 搜索引擎喜歡結構化代碼

現在有種風潮,人們想盡辦法讓自己的關鍵字在搜索結果中名列前茅。作為開發者,你有責任因勢利導,用結構化代碼盡可能優化網站以適應搜索引擎。

以下是一些重要的結構化標記

  • H1 - 最重要的標題,搜索引擎最重視它。
  • H2,H3,H4,H5 - 重要性依次遞減的標題。用它們恰當的傳遞信息,搜索引擎會根據字號給予相應的關照。
  • A - 鏈接。通常給它個TITLE屬性比較好。
    server technology
  • IMG - 古老的圖像標記。給它個ALT屬性比較好,搜索引擎會把其屬性值當作關鍵字。另外,當圖像無法顯示時,訪問者會看到替代文字。
    server technology email

還有一些重要的標記:

  • TITLE - 此標記會作為搜索引擎查詢結果的標題顯示,應該認真對待。
  • META - 最好完善一下keyWords和description,搜索引擎還是會讀取這兩項老掉牙的信息的。

7. 布局用DIV 別用TABLE

其實這條我們都已習慣了,現在還用TABLE布局是會被人極度鄙視的。在列舉表式數據時用用還差不多。

搞定DIV布局需要很多實踐,不過一旦你掌握訣竅,它將變得俯首帖耳。由此獲得的靈活性,比你能想到的還要多。

其實它非常簡單,就好像 float 和 width 一樣。

我在>Virb寫了個很簡單的兩欄布局教程,有興趣就>看看吧。

8. 少用行內樣式

寫代碼時,通常會直接在元件標記上加幾句樣式,這比往CSS文件裡加個Class或屬性簡單順手一點。不過,最好別這麼做,因為代碼需要可維護性

某些時候,你將不得不面對自己以前寫的代碼。自己的床自己得睡,自己犯懶自己遭罪。10年來,我認識到一個道理:現在額外花時間,將來特別省時間。這就說到了下個建議:代碼要考慮將來。

不好的

第一個標題

正文內容

第二個標題

好的

第一個標題

正文內容

第二個標題

9. 代碼要考慮將來

要給代碼寫注釋。整潔,有序,別偷懶。如果覺得匆匆忙忙沒心思,休息一會兒再回來寫。

某些情況下(比如你的網站將來成功了),別人會來拜讀的代碼。有時候,這個人會是你。

幾年之後,看到自己當年沒有注釋、亂做一團的代碼,你肯定悔不當初。為了避免將來的自怨自艾,現在就把復雜的代碼注釋一下吧。

注釋也不要太多。那些簡單到一目了然的代碼根本沒必要說明,否則泥沙俱下,真正有用的注釋會淹沒在重重文字之中。

10. 了解標准,但不必束手束腳

別再用SMALL、CENTER、FONT等>不被推薦的標記了,這樣給人感覺不好。

聽說SMALL標記還沒被棄用——不過抱歉,我肯定它沒幾天了。

網站上的>有效XHtml和>CSS標志告訴人們,你遵守了某些規則。也許這讓你感覺與眾不同,但是,網站質量與此無關。去看看哪個成功的大網站能完全通過Html標准驗證? 所謂標准,其實跟不上新方法新技術的發展。

開發網站時,要盡量遵循Html標准。不過有時候,可能需要跳出標准去實現某個功能,這樣才能兼容所有浏覽器。對此不必耿耿於懷,說到底,功能才是網站的根本。

如果實在想的話,可以用>W3的>Html驗證器檢查你的代碼。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved