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

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

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

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

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

　　在網(wǎng)站建設制作的過(guò)程中，網(wǎng)頁(yè)切圖是指講設計好的PSD文稿轉化成html的工作，利用DIV+CSS將設計文稿以網(wǎng)頁(yè)的形式表現出來(lái)，網(wǎng)頁(yè)切圖的切指的是將設計文稿中的圖片根據布局的需要，利用Photoshop的切片工具將圖像在文稿中分離出來(lái)，配合DIV+CSS完成靜態(tài)頁(yè)面的制作。

　　規范一，文件規范。

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

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

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

　　id和class應該如何起名？

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

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

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

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

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

　　<p>說(shuō)說(shuō)彭健自己對</p>

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

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

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

　　p：p標簽為段落標簽，我們也可以說(shuō)他是內容標簽。這個(gè)標簽里面的才是真正的內容。

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

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

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

　　把最精準簡(jiǎn)短能夠說(shuō)明這條標題的意思寫(xiě)下即可。

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

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

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

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

http://www.ezekroy.com/jianzhanzhishi/6221.html 掌握網(wǎng)站建設切圖規范需要了解哪些技巧