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