會寫網(wǎng)頁的人有很多，但并不是每個人都是優(yōu)秀的前端工程師。想要成為一名優(yōu)秀的前端工程師，必須具備網(wǎng)站的用戶體驗的優(yōu)化，其中包括網(wǎng)頁打設(shè)計和實現(xiàn)。
作為UI設(shè)計師，過完稿和開發(fā)對接時，需要標注設(shè)計稿和切圖，把標注切圖文件給到開發(fā)。這個時候就犯難了，那么多尺寸怎么切圖呢?
網(wǎng)頁切圖如何進行?專業(yè)網(wǎng)站制作切圖規(guī)范都有哪些?
在網(wǎng)站制作中我們經(jīng)常會聽到定稿后我們就好進行切圖了，那么切圖到底是一個什么樣子的工作，讓我們專業(yè)的前端工程師告訴您。
切圖是網(wǎng)站制作過程中的一個專業(yè)術(shù)語、是前端工程師必備的一個基礎(chǔ)技能，切圖是將設(shè)計文稿轉(zhuǎn)化為HTML的過程。
在網(wǎng)站制作的過程中，網(wǎng)頁切圖是指講設(shè)計好的PSD文稿轉(zhuǎn)化成html的工作，利用DIV+CSS將設(shè)計文稿以網(wǎng)頁的形式表現(xiàn)出來，網(wǎng)頁切圖的切指的是將設(shè)計文稿中的圖片根據(jù)布局的需要，利用Photoshop的切片工具將圖像在文稿中分離出來，配合DIV+CSS完成靜態(tài)頁面的制作。
規(guī)范一，文件規(guī)范。
1、html,css,js,images均歸檔至系統(tǒng)開發(fā)目錄中。
2、Html文件命名為英文命名，后綴為.htm。同時將對應界面放入同一目錄中，如果命名稿為中文，就需要重新命名與htm同文件。以便后端添加和功能查找。
3、CSS，js命名也是如此。
id和class應該如何起名？
這個名字是可以隨自己喜歡來起名，所以有一些人使用英文，拼音或者亂打幾個字母。雖然說這樣子是可以的，但是會導致自己和別人在后期的修改網(wǎng)站非常麻煩，就因找一個標簽也要頭暈了。我個人起名字是按照層次來起，下面舉個例子：
例如頭部我使用了head這個名字，然后頭部可以分為存放logo和存放導航條兩部分。這兩個部分我就會使用head_1、head_2來表示，然后在存放logo的部分有可能分為左右一邊是logo一邊是廣告或者搜索欄，我就會起名為：head_1_left、head_1_right來表示。這樣子的css代碼有時候我們在修改也無需翻到html頁面看，直接按照樣式的名字就可以看出來了。
二、合理使用標簽有助于網(wǎng)站的收錄和SEO優(yōu)化
我們舉一個例子，有時候一個新聞內(nèi)容板塊的html里面，很多人都會直接在div中間寫上文字，然后給這一個div進行樣式的控制：<div>新聞內(nèi)容</div>。雖然這樣子是完全可以實現(xiàn)功能，但是在搜索引擎眼中并不認為這個就是一個正文內(nèi)容而是代碼之類的，所以我們在寫這個的時候記住合理使用p標簽，如上面的新聞內(nèi)容應該寫為：<div><p>新聞內(nèi)容</p></div>。在我們合理使用標簽的時候一方面可以讓人感覺到你是用心來做這個網(wǎng)頁的排版，更重要的是讓這個網(wǎng)站后期的優(yōu)化事半功倍。下面給大家總結(jié)一下自己感覺上要加的標簽：
h1：一個網(wǎng)頁的主題，在一個頁面里面只能出現(xiàn)一個。權(quán)重僅次于網(wǎng)站標題，所以盡量單純把自己網(wǎng)站的主關(guān)鍵詞放在里面。如果關(guān)鍵詞包在一個句子里面如這篇文章的標題，我們可以寫成如下：
<p>說說彭健自己對</p>
<h1>網(wǎng)頁排版</h1>
<p>的時候要注意的一些事情</p>。
h2-h3：在網(wǎng)頁里面一般使用到h3就足夠了，后面的h4-h6一般都不會再使用。這些兩個標簽我們需要合理安排，h2表示一個頁面里面的欄目，h3表示在這個欄目里面的子欄目或者文章。
p：p標簽為段落標簽，我們也可以說他是內(nèi)容標簽。這個標簽里面的才是真正的內(nèi)容。
alt：搜索引擎是不會看圖片的，我們必須要為他說明這個圖片表示的是什么，所以我們注意在每一張圖片上為他說明。
title：這個標簽是用在a標簽里面的，一般很少人使用。但是我們要兼顧搜索引擎的優(yōu)化所以我們必須要注意給搜索引擎一個簡單精準的說明，例如說一篇文章標題是“說說彭健自己對網(wǎng)站排版的時候要注意的一些事情”。然后我們的代碼應該寫成
<a title=”網(wǎng)頁排版注意事項”href=”">說說彭健自己對網(wǎng)站排版的時候要注意的一些事情</a>。
把最精準簡短能夠說明這條標題的意思寫下即可。
nane：這個標簽相信沒幾個人會注意到。這個名字標簽可以說是直接跟搜索引擎說話的標簽。他也是用在a里面，他是告訴搜索引擎，進入這個超鏈接里面是什么東西。就如上面的標題我們可以寫成：
<a name=”網(wǎng)頁排版注意事項”title=”網(wǎng)頁排版注意事項”href=”">說說彭健自己對網(wǎng)站排版的時候要注意的一些事情</a>。
strong：這個是重要標簽，這個的樣子跟b標簽一樣。很多做seo而不懂代碼的人他們知道每一篇文章要把重要的關(guān)鍵詞加粗，但是他們總是以為這個加粗是b標簽。其實這個加粗是strong標簽。我們可以幫我們網(wǎng)頁的重要關(guān)鍵詞加上這個標簽，然后在css里面設(shè)置他跟普通的字一樣，在正常瀏覽的時候并不會有什么影響，但是其實他已經(jīng)優(yōu)化了。
上面的一些總結(jié)是筆者自己在網(wǎng)頁的排版中一步一步總結(jié)出來的。當我們?nèi)プ鲆粋€網(wǎng)頁前端工程師的時候，你單純懂得代碼是可以，但是當我們要做一個兼顧網(wǎng)站運營的網(wǎng)頁前端工程師的時候，我們還必須兼顧到程序員看到你的排版的感受和網(wǎng)站對搜索引擎優(yōu)化的難易。
