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