• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 網頁設計教程 ] 通過語義化的標籤減少DIV簡化網頁代碼—- 其他教程




    教學主題: 通過語義化的標籤減少DIV簡化網頁代碼

    大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

    今天的這個教學主題是: 通過語義化的標籤減少DIV簡化網頁代碼

    這教學的重點為這幾點 [ 簡化,網頁,代碼,減少,語義,標籤,通過,div,結構,定義 ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    本文主要關注如何通過語義化的標籤、減少div使用等方法來簡化代碼。你是否在修改某人的頁面時,被他的亂七八糟的代碼搞暈乎?

    如果你在生成頁面的時候過多的使用div,那你有必要閱讀這篇文章了。本文主要關注如何通過語義化的標籤、減少div使用等方法來簡化代碼。你是否在修改某人的頁面時,被他的亂七八糟的代碼搞暈乎?簡潔的代碼不但方便自己,同時方便你的團隊成員。他在你調試頁面或編輯的時候節省你的時間(尤其對於大的項目來說)。

    一、去掉不必要的div標籤

    我看到好多人都在form或ul列表的外面嵌入一個div結構,為什麼要嵌入這個你不需要的div那?你可以通過給相應的語義化的標籤定義、引用新的css就可以達到同樣的效果。

    實例1:

    一下案例展示的是如何去掉div標籤並定義一個新的樣式給form標籤。

    通過語義化的標籤減少DIV簡化網頁代碼

    實例2

    有時我們為了實現內容間間距的效果而在內容的外面嵌入一個多餘的div標籤。一下例子的左邊增加了

     

    來實現間距。但是,既然每個結構裡面都含有標題標籤h4,我們就可以給h4設置margin屬性來實現間距,從而省去多餘的

     

    結構。

    通過語義化的標籤減少DIV簡化網頁代碼

    二、使用語義化的標籤

    在頁面製作過程中,應盡量使用語義化的標籤(如:h1定義標題,P定義段落文字,ul定義列表項目),即使不定義css樣式,你的文檔也是有意義的。

    通過語義化的標籤減少DIV簡化網頁代碼

    實例:

    一下圖片對比了div定義的結構和語義化標籤定義的結構在沒有定義css展示的效果。

    通過語義化的標籤減少DIV簡化網頁代碼

    三、減少使用div的使用

    實例1

    鏈接導航效果,用p標籤結構代替div標籤結構更有意義。

    通過語義化的標籤減少DIV簡化網頁代碼

    實例2

    一下實例我用一個span標籤代替了原來的兩個div標籤結構,但他們實現的布局結構是一樣的。

    通過語義化的標籤減少DIV簡化網頁代碼

    四、格式化你的結構代碼

    你要保持格式化你的代碼結構,這樣容易閱讀和調試。如果你使用的是Adobe Dreamweaver,你點擊Commands > Apply Source Formatting就很容易實現代碼的格式化。

    通過語義化的標籤減少DIV簡化網頁代碼

    五、註釋閉合div標籤

    開發模版程序的時候(比如WordPress themes),模版程序分成幾個不同的文檔index.php, header.php, sidebar.php, and footer.php等。同時,你也應該經常的註釋你的div標籤結構,不至於自己暈乎。當我看到

     

    時,我就能清楚的辨認出是

    的註釋。

    通過語義化的標籤減少DIV簡化網頁代碼

    總結:

    1、減少使用div標籤;

    2、應該用div定義頁面的主要框架結構,比如頭部、內容、邊欄和底部等結構;

    3、內容應該使用語義化的html標籤,而不是div標籤;

    4、格式化代碼同時要閉合div標籤結構。

    進入論壇參與討論:http://www.missyuan.com/viewthread.php?tid=438269

    看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 通過語義化的標籤減少DIV簡化網頁代碼 這教學會喜歡

    文章標題: 骨子愛創意- 通過語義化的標籤減少DIV簡化網頁代碼–轉載請註明來源處

    本教學分類為網頁設計教程中的 其他教程相關教學

    文章相關關鍵字為: 簡化,網頁,代碼,減少,語義,標籤,通過,div,結構,定義

    本文永久連結 :通過語義化的標籤減少DIV簡化網頁代碼

    本文轉載自 :VIA