掌握網(wǎng)站建設(shè)切圖規(guī)范需要了解哪些技巧

會(huì)寫網(wǎng)頁的人有很多。但并不是每個(gè)人都是優(yōu)秀的前端工程師。想要成為一名優(yōu)秀的前端工程師。必須具備網(wǎng)站的用戶體驗(yàn)的優(yōu)化。其中包括網(wǎng)頁打設(shè)計(jì)和實(shí)現(xiàn)。

作為UI設(shè)計(jì)師。過完稿和開發(fā)對(duì)接時(shí)。需要標(biāo)注設(shè)計(jì)稿和切圖。把標(biāo)注切圖文件給到開發(fā)。這個(gè)時(shí)候就犯難了。那么多尺寸怎么切圖呢?

網(wǎng)頁切圖如何進(jìn)行?專業(yè)網(wǎng)站制作切圖規(guī)范都有哪些?

在網(wǎng)站建設(shè)制作中我們經(jīng)常會(huì)聽到定稿后我們就好進(jìn)行切圖了。那么切圖到底是一個(gè)什么樣子的工作。讓我們專業(yè)的前端工程師告訴您。

切圖是網(wǎng)站制作過程中的一個(gè)專業(yè)術(shù)語、是前端工程師必備的一個(gè)基礎(chǔ)技能。切圖是將設(shè)計(jì)文稿轉(zhuǎn)化為HTML的過程。

在網(wǎng)站建設(shè)制作的過程中。網(wǎng)頁切圖是指講設(shè)計(jì)好的pSD文稿轉(zhuǎn)化成html的工作。利用DIV+CSS將設(shè)計(jì)文稿以網(wǎng)頁的形式表現(xiàn)出來。網(wǎng)頁切圖的切指的是將設(shè)計(jì)文稿中的圖片根據(jù)布局的需要。利用photoshop的切片工具將圖像在文稿中分離出來。配合DIV+CSS完成靜態(tài)頁面的制作。

規(guī)范一。文件規(guī)范。

1、html,css,js,images均歸檔至系統(tǒng)開發(fā)目錄中。

2、Html文件命名為英文命名。后綴為.htm。同時(shí)將對(duì)應(yīng)界面放入同一目錄中。如果命名稿為中文。就需要重新命名與htm同文件。以便后端添加和功能查找。

3、CSS。js命名也是如此。

id和class應(yīng)該如何起名？

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

例如頭部我使用了head這個(gè)名字。然后頭部可以分為存放logo和存放導(dǎo)航條兩部分。這兩個(gè)部分我就會(huì)使用head_1、head_2來表示。然后在存放logo的部分有可能分為左右一邊是logo一邊是廣告或者搜索欄。我就會(huì)起名為：head_1_left、head_1_right來表示。這樣子的css代碼有時(shí)候我們?cè)谛薷囊矡o需翻到html頁面看。直接按照樣式的名字就可以看出來了。

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

我們舉一個(gè)例子。有時(shí)候一個(gè)新聞內(nèi)容板塊的html里面。很多人都會(huì)直接在div中間寫上文字。然后給這一個(gè)div進(jìn)行樣式的控制：<div>新聞內(nèi)容</div>。雖然這樣子是完全可以實(shí)現(xiàn)功能。但是在搜索引擎眼中并不認(rèn)為這個(gè)就是一個(gè)正文內(nèi)容而是代碼之類的。所以我們?cè)趯戇@個(gè)的時(shí)候記住合理使用p標(biāo)簽。如上面的新聞內(nèi)容應(yīng)該寫為：<div><p>新聞內(nèi)容</p></div>。在我們合理使用標(biāo)簽的時(shí)候一方面可以讓人感覺到你是用心來做這個(gè)網(wǎng)頁的排版。更重要的是讓這個(gè)網(wǎng)站后期的優(yōu)化事半功倍。下面給大家總結(jié)一下自己感覺上要加的標(biāo)簽：

h1：一個(gè)網(wǎng)頁的主題。在一個(gè)頁面里面只能出現(xiàn)一個(gè)。權(quán)重僅次于網(wǎng)站標(biāo)題。所以盡量單純把自己網(wǎng)站建設(shè)的主關(guān)鍵詞放在里面。如果關(guān)鍵詞包在一個(gè)句子里面如這篇文章的標(biāo)題。我們可以寫成如下：

<p>說說彭健自己對(duì)</p>

<h1>網(wǎng)頁排版</h1>

<p>的時(shí)候要注意的一些事情</p>。

h2-h3：在網(wǎng)頁里面一般使用到h3就足夠了。后面的h4-h6一般都不會(huì)再使用。這些兩個(gè)標(biāo)簽我們需要合理安排。h2表示一個(gè)頁面里面的欄目。h3表示在這個(gè)欄目里面的子欄目或者文章。

p：p標(biāo)簽為段落標(biāo)簽。我們也可以說他是內(nèi)容標(biāo)簽。這個(gè)標(biāo)簽里面的才是真正的內(nèi)容。

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

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

<a title=”網(wǎng)頁排版注意事項(xiàng)”href=”">說說彭健自己對(duì)網(wǎng)站建設(shè)排版的時(shí)候要注意的一些事情</a>。

把最精準(zhǔn)簡(jiǎn)短能夠說明這條標(biāo)題的意思寫下即可。

nane：這個(gè)標(biāo)簽相信沒幾個(gè)人會(huì)注意到。這個(gè)名字標(biāo)簽可以說是直接跟搜索引擎說話的標(biāo)簽。他也是用在a里面。他是告訴搜索引擎。進(jìn)入這個(gè)超鏈接里面是什么東西。就如上面的標(biāo)題我們可以寫成：

<a name=”網(wǎng)頁排版注意事項(xiàng)”title=”網(wǎng)頁排版注意事項(xiàng)”href=”">說說彭健自己對(duì)網(wǎng)站排版的時(shí)候要注意的一些事情</a>。

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

上面的一些總結(jié)是筆者自己在網(wǎng)頁的排版中一步一步總結(jié)出來的。當(dāng)我們?nèi)プ鲆粋€(gè)網(wǎng)頁前端工程師的時(shí)候。你單純懂得代碼是可以。但是當(dāng)我們要做一個(gè)兼顧網(wǎng)站建設(shè)運(yùn)營的網(wǎng)頁前端工程師的時(shí)候。我們還必須兼顧到程序員看到你的排版的感受和網(wǎng)站對(duì)搜索引擎優(yōu)化的難易。