網站排版的時候要注意的一些事情

現(xiàn)在在學校里面，培訓機構里面都有很多課程是前端切圖這一方面的，簡單來說就是學習div+css網頁排版。有很多人經過這一輪的學習之后就發(fā)現(xiàn)自己對排版這一方面非常的熟悉甚至說自己的div+css的高手。其實真正說要懂得一個網頁排版需要注意的一些問題是什么呢？是不是在電腦上面看到自己排版出來的頁面就真的是一個成功的網頁了嗎？下面我說一下我自己在網頁排版上面會注意的一些事情：

一、使用樣式的種類和名字的規(guī)范。

id和class應該如何使用

在我們使用div+css排版的時候，每一個div我們都會給他一個樣式，而樣式有兩種一種是id一種是class。有時候無論我們使用哪一種作為 標志都一樣可以實現(xiàn)頁面的css樣式控制。但是為什么會出現(xiàn)id和class這兩種呢？其實在一個網頁里面我們可以做一個比喻：body我們可以認為是一 個學校，id我們可以認為是一個班級，class我們可以認為是一個人。那么在同一個學校里面，班級是不能重復的而我們每一個人的名字有可能是同名的。所 以在一個網頁里面，一個id只能出現(xiàn)一次，一個class可以出現(xiàn)多次。而id的權限比class的權限要高，所以我們可以把一些不需要復制重復的div 使用id來表示把一些可以重復用到的樣式使用class來表示。例如一個網頁只有一個頭部，中部，底部。所以這三個部分我們可以使用id。有一些博客中間 部分有分為左右，這一些板塊在我們網頁里面一般是不需要重復的，所以我們使用id來為他定義，而每一個板塊里面的內容有時候是可以重復使用的，所以我們使 用class為他定義。有時候會有人問，如果我們全部單獨使用一個也可以實現(xiàn)功能，為什么我們不單純使用id和class呢？這個是因為如果全部使用id 的時候，我們網頁的JS和PHP的函數(shù)調用都是使用到id的，如果我們在css樣式就占用了那程序員會非常麻煩，如果全部使用class的時候可能會因為 權限不夠而在同一個層里面的沒有標志的元素例如ul，li，a等的會收到外面一層的樣式影響到這樣導致要要多寫比較多的代碼。

id和class應該如何起名？

這個名字是可以隨自己喜歡來起名，所以有一些人使用英文，拼音或者亂打幾個字母。雖然說這樣子是可以的，但是會導致自己和別人在后期的修改網站非常麻煩，就因找一個標簽也要頭暈了。 我個人起名字是按照層次來起，下面舉個例子：

例如頭部我使用了head這個名字，然后頭部可以分為存放logo和存放導航條兩部分。這兩個部分我就會使用head_1、head_2來表示，然 后在存放logo的部分有可能分為左右一邊是logo一邊是廣告或者搜索欄，我就會起名為：head_1_left、head_1_right來表示。這 樣子的css代碼有時候我們在修改也無需翻到html頁面看，直接按照樣式的名字就可以看出來了。

二、合理使用標簽有助于網站的收錄和SEO優(yōu)化

我們舉一個例子，有時候一個新聞內容板塊的html里面，很多人都會直接在div中間寫上文字，然后給這一個div進行樣式的控 制：

新聞內容

。雖然這樣子是完全可以實現(xiàn)功能，但是在搜索引擎眼中并不認為這個就是一個正文內容而是代碼 之類的，所以我們在寫這個的時候記住合理使用p標簽，如上面的新聞內容應該寫為：

新聞內 容

。在我們合理使用標簽的時候一方面可以讓人感覺到你是用心來做這個網頁的排版，更重要的是讓這個網站后期 的優(yōu)化事半功倍。下面給大家總結一下自己感覺上要加的標簽：

h1：一個網頁的主題，在一個頁面里面只能出現(xiàn)一個。權重僅次于網站標題，所以盡量單純把自己網站的主關鍵詞放在里面。如果關鍵詞包在一個句子里面 如這篇文章的標題，我們可以寫成如下：

說說彭健自己對

網頁排版< /h1>

的時候要注意的一些事情

。

h2-h3：在網頁里面一般使用到h3就足夠了，后面的h4-h6一般都不會再使用。這些兩個標簽我們需要合理安排，h2表示一個頁面里面的欄目，h3表示在這個欄目里面的子欄目或者文章。

p：p標簽為段落標簽，我們也可以說他是內容標簽。這個標簽里面的才是真正的內容。

alt：搜索引擎是不會看圖片的，我們必須要為他說明這個圖片表示的是什么，所以我們注意在每一張圖片上為他說明。

title：這個標簽是用在a標簽里面的，一般很少人使用。但是我們要兼顧搜索引擎的優(yōu)化所以我們必須要注意給搜索引擎一個簡單精準的說明，例如說 一篇文章標題是“說說彭健自己對網站排版的時候要注意的一些事情”。然后我們的代碼應該寫成說說彭健自己對網站排版的時候要注意的一些事情。

strong：這個是重要標簽，這個的樣子跟b標簽一樣。很多做seo而不懂代碼的人他們知道每一篇文章要把重要的關鍵詞加粗，但是他們總是以為這 個加粗是b標簽。其實這個加粗是strong標簽。我們可以幫我們網頁的重要關鍵詞加上這個標簽，然后在css里面設置他跟普通的字一樣，在正常瀏覽的時 候并不會有什么影響，但是其實他已經優(yōu)化了。

三、代碼的層次感和規(guī)劃讓你代碼看上去更加舒服

在我彭健自己寫代碼的時候是非常注意這一方面的事情，因為一個頁面做出來可以給客戶看得舒服也能給自己看得舒服。我自己比較喜歡使用同級換行，下級 換行退格的方法。例如一個網頁的頭部可以分為上部分和導航條部分，然后上部分分為左右。我們可以和容易看出，上下部分這兩個div是同級的，而左右的 div是下級的，代碼如下：

至于規(guī)劃這一方面就是css的代碼放到css文件里面，js代碼放到js代碼里面，而不實用嵌入式和捆綁式的書寫方法。

四、排版的時候要注意到后臺的調用

我們在排版一個頁面的時候，我們使用無數(shù)個樣式一個一個規(guī)定每一個div或者li的樣式都是可以的，效果看上去也是一樣但是這樣是成功的代碼那？我 們知道做出來的頁面并非這樣就放上網站上面運行，而是把頁面做成模版加入后臺調用標簽進行調用。例如一個文章列表（ul）里面的非常多個文章題目 （li）。我們知道每一個文章題目都是從后臺調用出來的，所以這些li是需要循環(huán)使用，如果我們每一個li都有一個不同的class的話，相信這個循環(huán)調 用是讓程序員非常頭痛的事情。所以在我們做這個的時候盡量使用統(tǒng)一樣式。如果導航條的每個項目有一條豎線隔開的情況，我們一般把這條豎線放到每個li的左 邊，然后給第一個首頁的li加一個樣式把這條豎線去掉，因為這樣就可以順利讓后面的欄目進行后臺調用。而首頁是每一個網站都需要的所以這個做成靜態(tài)也沒有 關系。

而我們網頁上面的圖片也有兩種，一個是樣式圖片一個是數(shù)據(jù)圖片。樣式圖片指的是不需要變動的如導航條背景（我們平時在瀏覽器上無法保存下來的）他是 存放在css里面的，數(shù)據(jù)圖片是可以隨時變動的，他是從后臺調用出來的如商品縮略圖（我們平時在瀏覽器上可以保存下來的）。在我們寫代碼的時候要明確分辨 這些圖片屬于哪一種，這樣才能更加專業(yè)的把一個頁面排版出來。而關于logo這個有些人喜歡放在css里面有些人喜歡放在html里面，這個就根據(jù)自己需 要了。

五、網頁圖片大小

我們做好一個網頁有時有不同人做出來的大小都不一樣，然而這個我們需要怎么解決呢？例如一個網頁的導航條，如果是一個春色導航條，我們在排版上有3 種做法。1、把設計圖上整整一塊導航條切圖下來做背景。2、切一個像素進行平鋪。3、直接使用顏色做背景。這三種做法效果都是一樣，但最節(jié)省地方是第三 種。所以我們可以明白到做一個網頁能把效果做出來并且做得最小的才是好的。所以我們要注意：能用顏色的用顏色，不能用顏色的用平鋪的用平鋪，最后才考慮 用圖片。

有時候一張圖片并不是單純一個地方用到而是多個地方用到，所以我們就要注意到，把這個圖片應用到多個地方而不是每一個地方都要切一塊圖片。最后我們在切圖的時候也要注意到一項，并不是一個圖片大片切下來就可以，我們必須要精準切到最邊，盡量把圖片的大小縮小到最小。

編后語

上面的一些總結是彭健自己在網頁的排版中一步一步總結出來的。當我們去做一個網頁前端工程師的時候，你單純懂得代碼是可以，但是當我們要做一個兼顧 網站運營的網頁前端工程師的時候，我們還必須兼顧到程序員看到你的排版的感受和網站對搜索引擎優(yōu)化的難易。

網站標題：網站排版的時候要注意的一些事情
分享路徑：http://www.muchs.cn/news30/218980.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、網站改版、營銷型網站建設、建站公司、企業(yè)建站、靜態(tài)網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)