2022-12-03 分類: 網(wǎng)站建設(shè)
現(xiàn)在在學(xué)校里面,培訓(xùn)機(jī)構(gòu)里面都有很多課程是前端切圖這一方面的,簡(jiǎn)單來(lái)說(shuō)就是學(xué)習(xí)div+css網(wǎng)頁(yè)排版。有很多人經(jīng)過(guò)這一輪的學(xué)習(xí)之后就發(fā)現(xiàn)自己對(duì)排版這一方面非常的熟悉甚至說(shuō)自己的div+css的高手。其實(shí)真正說(shuō)要懂得一個(gè)網(wǎng)頁(yè)排版需要注意的一些問(wèn)題是什么呢?是不是在電腦上面看到自己排版出來(lái)的頁(yè)面就真的是一個(gè)成功的網(wǎng)頁(yè)了嗎?下面我說(shuō)一下我自己在網(wǎng)頁(yè)排版上面會(huì)注意的一些事情:
一、使用樣式的種類和名字的規(guī)范。
id和class應(yīng)該如何使用
在我們使用div+css排版的時(shí)候,每一個(gè)div我們都會(huì)給他一個(gè)樣式,而樣式有兩種一種是id一種是class。有時(shí)候無(wú)論我們使用哪一種作為 標(biāo)志都一樣可以實(shí)現(xiàn)頁(yè)面的css樣式控制。但是為什么會(huì)出現(xiàn)id和class這兩種呢?其實(shí)在一個(gè)網(wǎng)頁(yè)里面我們可以做一個(gè)比喻:body我們可以認(rèn)為是一 個(gè)學(xué)校,id我們可以認(rèn)為是一個(gè)班級(jí),class我們可以認(rèn)為是一個(gè)人。那么在同一個(gè)學(xué)校里面,班級(jí)是不能重復(fù)的而我們每一個(gè)人的名字有可能是同名的。所 以在一個(gè)網(wǎng)頁(yè)里面,一個(gè)id只能出現(xiàn)一次,一個(gè)class可以出現(xiàn)多次。而id的權(quán)限比class的權(quán)限要高,所以我們可以把一些不需要復(fù)制重復(fù)的div 使用id來(lái)表示把一些可以重復(fù)用到的樣式使用class來(lái)表示。例如一個(gè)網(wǎng)頁(yè)只有一個(gè)頭部,中部,底部。所以這三個(gè)部分我們可以使用id。有一些博客中間 部分有分為左右,這一些板塊在我們網(wǎng)頁(yè)里面一般是不需要重復(fù)的,所以我們使用id來(lái)為他定義,而每一個(gè)板塊里面的內(nèi)容有時(shí)候是可以重復(fù)使用的,所以我們使 用class為他定義。有時(shí)候會(huì)有人問(wèn),如果我們?nèi)繂为?dú)使用一個(gè)也可以實(shí)現(xiàn)功能,為什么我們不單純使用id和class呢?這個(gè)是因?yàn)槿绻渴褂胕d 的時(shí)候,我們網(wǎng)頁(yè)的JS和PHP的函數(shù)調(diào)用都是使用到id的,如果我們?cè)赾ss樣式就占用了那程序員會(huì)非常麻煩,如果全部使用class的時(shí)候可能會(huì)因?yàn)?權(quán)限不夠而在同一個(gè)層里面的沒(méi)有標(biāo)志的元素例如ul,li,a等的會(huì)收到外面一層的樣式影響到這樣導(dǎo)致要要多寫比較多的代碼。
id和class應(yīng)該如何起名?
這個(gè)名字是可以隨自己喜歡來(lái)起名,所以有一些人使用英文,拼音或者亂打幾個(gè)字母。雖然說(shuō)這樣子是可以的,但是會(huì)導(dǎo)致自己和別人在后期的修改網(wǎng)站非常麻煩,就因找一個(gè)標(biāo)簽也要頭暈了。 我個(gè)人起名字是按照層次來(lái)起,下面舉個(gè)例子:
例如頭部我使用了head這個(gè)名字,然后頭部可以分為存放logo和存放導(dǎo)航條兩部分。這兩個(gè)部分我就會(huì)使用head_1、head_2來(lái)表示,然 后在存放logo的部分有可能分為左右一邊是logo一邊是廣告或者搜索欄,我就會(huì)起名為:head_1_left、head_1_right來(lái)表示。這 樣子的css代碼有時(shí)候我們?cè)谛薷囊矡o(wú)需翻到html頁(yè)面看,直接按照樣式的名字就可以看出來(lái)了。
二、合理使用標(biāo)簽有助于網(wǎng)站的收錄和SEO優(yōu)化
我們舉一個(gè)例子,有時(shí)候一個(gè)新聞內(nèi)容板塊的html里面,很多人都會(huì)直接在div中間寫上文字,然后給這一個(gè)div進(jìn)行樣式的控 制:
新聞內(nèi)容
。雖然這樣子是完全可以實(shí)現(xiàn)功能,但是在搜索引擎眼中并不認(rèn)為這個(gè)就是一個(gè)正文內(nèi)容而是代碼 之類的,所以我們?cè)趯戇@個(gè)的時(shí)候記住合理使用p標(biāo)簽,如上面的新聞內(nèi)容應(yīng)該寫為:
新聞內(nèi) 容
。在我們合理使用標(biāo)簽的時(shí)候一方面可以讓人感覺(jué)到你是用心來(lái)做這個(gè)網(wǎng)頁(yè)的排版,更重要的是讓這個(gè)網(wǎng)站后期 的優(yōu)化事半功倍。下面給大家總結(jié)一下自己感覺(jué)上要加的標(biāo)簽:
h1:一個(gè)網(wǎng)頁(yè)的主題,在一個(gè)頁(yè)面里面只能出現(xiàn)一個(gè)。權(quán)重僅次于網(wǎng)站標(biāo)題,所以盡量單純把自己網(wǎng)站的主關(guān)鍵詞放在里面。如果關(guān)鍵詞包在一個(gè)句子里面 如這篇文章的標(biāo)題,我們可以寫成如下:
說(shuō)說(shuō)彭健自己對(duì)
網(wǎng)頁(yè)排版< /h1>
的時(shí)候要注意的一些事情
。
h2-h3:在網(wǎng)頁(yè)里面一般使用到h3就足夠了,后面的h4-h6一般都不會(huì)再使用。這些兩個(gè)標(biāo)簽我們需要合理安排,h2表示一個(gè)頁(yè)面里面的欄目,h3表示在這個(gè)欄目里面的子欄目或者文章。
p:p標(biāo)簽為段落標(biāo)簽,我們也可以說(shuō)他是內(nèi)容標(biāo)簽。這個(gè)標(biāo)簽里面的才是真正的內(nèi)容。
alt:搜索引擎是不會(huì)看圖片的,我們必須要為他說(shuō)明這個(gè)圖片表示的是什么,所以我們注意在每一張圖片上為他說(shuō)明。
title:這個(gè)標(biāo)簽是用在a標(biāo)簽里面的,一般很少人使用。但是我們要兼顧搜索引擎的優(yōu)化所以我們必須要注意給搜索引擎一個(gè)簡(jiǎn)單精準(zhǔn)的說(shuō)明,例如說(shuō) 一篇文章標(biāo)題是“說(shuō)說(shuō)彭健自己對(duì)網(wǎng)站排版的時(shí)候要注意的一些事情”。然后我們的代碼應(yīng)該寫成說(shuō)說(shuō)彭健自己對(duì)網(wǎng)站排版的時(shí)候要注意的一些事情。
strong:這個(gè)是重要標(biāo)簽,這個(gè)的樣子跟b標(biāo)簽一樣。很多做seo而不懂代碼的人他們知道每一篇文章要把重要的關(guān)鍵詞加粗,但是他們總是以為這 個(gè)加粗是b標(biāo)簽。其實(shí)這個(gè)加粗是strong標(biāo)簽。我們可以幫我們網(wǎng)頁(yè)的重要關(guān)鍵詞加上這個(gè)標(biāo)簽,然后在css里面設(shè)置他跟普通的字一樣,在正常瀏覽的時(shí) 候并不會(huì)有什么影響,但是其實(shí)他已經(jīng)優(yōu)化了。
三、代碼的層次感和規(guī)劃讓你代碼看上去更加舒服
在我彭健自己寫代碼的時(shí)候是非常注意這一方面的事情,因?yàn)橐粋€(gè)頁(yè)面做出來(lái)可以給客戶看得舒服也能給自己看得舒服。我自己比較喜歡使用同級(jí)換行,下級(jí) 換行退格的方法。例如一個(gè)網(wǎng)頁(yè)的頭部可以分為上部分和導(dǎo)航條部分,然后上部分分為左右。我們可以和容易看出,上下部分這兩個(gè)div是同級(jí)的,而左右的 div是下級(jí)的,代碼如下:
至于規(guī)劃這一方面就是css的代碼放到css文件里面,js代碼放到j(luò)s代碼里面,而不實(shí)用嵌入式和捆綁式的書寫方法。
四、排版的時(shí)候要注意到后臺(tái)的調(diào)用
我們?cè)谂虐嬉粋€(gè)頁(yè)面的時(shí)候,我們使用無(wú)數(shù)個(gè)樣式一個(gè)一個(gè)規(guī)定每一個(gè)div或者li的樣式都是可以的,效果看上去也是一樣但是這樣是成功的代碼那?我 們知道做出來(lái)的頁(yè)面并非這樣就放上網(wǎng)站上面運(yùn)行,而是把頁(yè)面做成模版加入后臺(tái)調(diào)用標(biāo)簽進(jìn)行調(diào)用。例如一個(gè)文章列表(ul)里面的非常多個(gè)文章題目 (li)。我們知道每一個(gè)文章題目都是從后臺(tái)調(diào)用出來(lái)的,所以這些li是需要循環(huán)使用,如果我們每一個(gè)li都有一個(gè)不同的class的話,相信這個(gè)循環(huán)調(diào) 用是讓程序員非常頭痛的事情。所以在我們做這個(gè)的時(shí)候盡量使用統(tǒng)一樣式。如果導(dǎo)航條的每個(gè)項(xiàng)目有一條豎線隔開的情況,我們一般把這條豎線放到每個(gè)li的左 邊,然后給第一個(gè)首頁(yè)的li加一個(gè)樣式把這條豎線去掉,因?yàn)檫@樣就可以順利讓后面的欄目進(jìn)行后臺(tái)調(diào)用。而首頁(yè)是每一個(gè)網(wǎng)站都需要的所以這個(gè)做成靜態(tài)也沒(méi)有 關(guān)系。
而我們網(wǎng)頁(yè)上面的圖片也有兩種,一個(gè)是樣式圖片一個(gè)是數(shù)據(jù)圖片。樣式圖片指的是不需要變動(dòng)的如導(dǎo)航條背景(我們平時(shí)在瀏覽器上無(wú)法保存下來(lái)的)他是 存放在css里面的,數(shù)據(jù)圖片是可以隨時(shí)變動(dòng)的,他是從后臺(tái)調(diào)用出來(lái)的如商品縮略圖(我們平時(shí)在瀏覽器上可以保存下來(lái)的)。在我們寫代碼的時(shí)候要明確分辨 這些圖片屬于哪一種,這樣才能更加專業(yè)的把一個(gè)頁(yè)面排版出來(lái)。而關(guān)于logo這個(gè)有些人喜歡放在css里面有些人喜歡放在html里面,這個(gè)就根據(jù)自己需 要了。
五、網(wǎng)頁(yè)圖片大小
我們做好一個(gè)網(wǎng)頁(yè)有時(shí)有不同人做出來(lái)的大小都不一樣,然而這個(gè)我們需要怎么解決呢?例如一個(gè)網(wǎng)頁(yè)的導(dǎo)航條,如果是一個(gè)春色導(dǎo)航條,我們?cè)谂虐嫔嫌? 種做法。1、把設(shè)計(jì)圖上整整一塊導(dǎo)航條切圖下來(lái)做背景。2、切一個(gè)像素進(jìn)行平鋪。3、直接使用顏色做背景。這三種做法效果都是一樣,但最節(jié)省地方是第三 種。所以我們可以明白到做一個(gè)網(wǎng)頁(yè)能把效果做出來(lái)并且做得最小的才是好的。所以我們要注意:能用顏色的用顏色,不能用顏色的用平鋪的用平鋪,最后才考慮 用圖片。
有時(shí)候一張圖片并不是單純一個(gè)地方用到而是多個(gè)地方用到,所以我們就要注意到,把這個(gè)圖片應(yīng)用到多個(gè)地方而不是每一個(gè)地方都要切一塊圖片。最后我們?cè)谇袌D的時(shí)候也要注意到一項(xiàng),并不是一個(gè)圖片大片切下來(lái)就可以,我們必須要精準(zhǔn)切到最邊,盡量把圖片的大小縮小到最小。
編后語(yǔ)
上面的一些總結(jié)是彭健自己在網(wǎng)頁(yè)的排版中一步一步總結(jié)出來(lái)的。當(dāng)我們?nèi)プ鲆粋€(gè)網(wǎng)頁(yè)前端工程師的時(shí)候,你單純懂得代碼是可以,但是當(dāng)我們要做一個(gè)兼顧 網(wǎng)站運(yùn)營(yíng)的網(wǎng)頁(yè)前端工程師的時(shí)候,我們還必須兼顧到程序員看到你的排版的感受和網(wǎng)站對(duì)搜索引擎優(yōu)化的難易。
網(wǎng)站標(biāo)題:網(wǎng)站排版的時(shí)候要注意的一些事情
分享路徑:http://m.rwnh.cn/news30/218980.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、網(wǎng)站改版、營(yíng)銷型網(wǎng)站建設(shè)、建站公司、企業(yè)建站、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容