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