有很多人可以寫網(wǎng)頁，但不是每個人都是一個好的前端工程師。要成為一名的前端工程師，你必須具備網(wǎng)站用戶體驗優(yōu)化，包括網(wǎng)頁設(shè)計和完成。
作為一名UI設(shè)計師，在將完成稿與開發(fā)連接時，需求會對設(shè)計稿和切割圖進(jìn)行標(biāo)記，并將標(biāo)記和切割圖的文件發(fā)送給開發(fā)。這個時分就犯難了，那么多尺寸怎樣切圖呢?
如何進(jìn)行網(wǎng)頁切圖?網(wǎng)站制作切圖的標(biāo)準(zhǔn)是什么?
在網(wǎng)站建立制造中我們經(jīng)常會聽到定稿后我們就好進(jìn)行切圖了，那么切圖到底是一個什么樣子的工作，讓我們的前端工程師告訴您。
切圖是網(wǎng)站制造過程中的一個術(shù)語、是前端工程師必備的一個根底技藝，切圖是將設(shè)計文稿轉(zhuǎn)化為HTML的過程。
在網(wǎng)站建立制造的過程中，網(wǎng)頁切圖是指講設(shè)計好的PSD文稿轉(zhuǎn)化成html的工作，應(yīng)用DIV+CSS將設(shè)計文稿以網(wǎng)頁的方式表現(xiàn)出來，網(wǎng)頁切圖的切指的是將設(shè)計文稿中的圖片依據(jù)規(guī)劃的需求，應(yīng)用Photoshop的切片工具將圖像在文稿中別離出來，配合DIV+CSS完成靜態(tài)頁面的制造。
標(biāo)準(zhǔn)一，文件標(biāo)準(zhǔn)。
1. HTML, CSS,js和images都存檔在系統(tǒng)開發(fā)目錄。
2.Html文件命名為英文名，后綴為html。同時將對應(yīng)的接口放入相同的目錄中，如果命名為中文，則需要重命名和HTM文件。用于后端添加和實用程序查找。
3、CSS、js的命名也是如此。
id和class應(yīng)該如何命名?
這個名字是能夠隨本人喜歡來起名，所以有一些人運用英文，拼音或者亂打幾個字母。固然說這樣子是能夠的，但是會招致本人和他人在后期的修正網(wǎng)站十分費事，就因找一個標(biāo)簽也要頭暈了。我個人起名字是依照層次來起，下面舉個例子：
例如頭部我運用了head這個名字，然后頭部能夠分為寄存logo和寄存導(dǎo)航條兩局部。這兩個局部我就會運用head_1、head_2來表示，然后在寄存logo的局部有可能分為左右一邊是logo一邊是廣告或者搜索欄，我就會起名為：head_1_left、head_1_right來表示。這樣子的css代碼有時分我們在修正也無需翻到html頁面看，直接依照款式的名字就能夠看出來了。
二、合理運用標(biāo)簽有助于網(wǎng)站的收錄和SEO優(yōu)化
我們舉一個例子，有時分一個新聞內(nèi)容板塊的html里面，很多人都會直接在div中間寫上文字，然后給這一個div進(jìn)行款式的控制：
新聞內(nèi)容
。固然這樣子是完整能夠完成功用，但是在搜索引擎眼中并不以為這個就是一個正文內(nèi)容而是代碼之類的，所以我們在寫這個的時分記住合理運用p標(biāo)簽，如上面的新聞內(nèi)容應(yīng)該寫為：
新聞內(nèi)容
。在我們合理運用標(biāo)簽的時分一方面能夠讓人覺得到你是用心來做這個網(wǎng)頁的排版，更重要的是讓這個網(wǎng)站后期的優(yōu)化事半功倍。下面給大家總結(jié)一下本人覺得上要加的標(biāo)簽：
h1：一個網(wǎng)頁的主題，在一個頁面里面只能呈現(xiàn)一個。權(quán)重僅次于網(wǎng)站標(biāo)題，所以盡量單純把本人網(wǎng)站建立的主關(guān)鍵詞放在里面。假如關(guān)鍵詞包在一個句子里面如這篇文章的標(biāo)題，我們能夠?qū)懗扇缦拢?/div>
如何進(jìn)行網(wǎng)頁切圖?
網(wǎng)站建設(shè)
切圖的標(biāo)準(zhǔn)是什么?
h2-h3：在網(wǎng)頁里面普通運用到h3就足夠了，后面的h4-h6普通都不會再運用。這些兩個標(biāo)簽我們需求合理布置，h2表示一個頁面里面的欄目，h3表示在這個欄目里面的子欄目或者文章。
p：p標(biāo)簽為段落標(biāo)簽，我們也能夠說他是內(nèi)容標(biāo)簽。這個標(biāo)簽里面的才是真正的內(nèi)容。
alt：搜索引擎是不會看圖片的，我們必需要為他闡明這個圖片表示的是什么，所以我們留意在每一張圖片上為他闡明。
title：這個標(biāo)簽是用在a標(biāo)簽里面的，普通很少人運用。但是我們要統(tǒng)籌搜索引擎的優(yōu)化所以我們必需要留意給搜索引擎一個簡單精準(zhǔn)的闡明，例如說一篇文章標(biāo)題是“說說彭健本人對網(wǎng)站排版的時分要留意的一些事情”。然后我們的代碼應(yīng)該寫成
把更精準(zhǔn)簡短可以闡明這條標(biāo)題的意義寫下即可。
nane：這個標(biāo)簽置信沒幾個人會留意到。這個名字標(biāo)簽?zāi)軌蛘f是直接跟搜索引擎說話的標(biāo)簽。他也是用在a里面，他是通知搜索引擎，進(jìn)入這個超鏈接里面是什么東西。就如上面的標(biāo)題我們能夠?qū)懗桑?/div>
strong：這個是重要標(biāo)簽，這個的樣子跟b標(biāo)簽一樣。很多做seo而不懂代碼的人他們曉得每一篇文章要把重要的關(guān)鍵詞加粗，但是他們總是以為這個加粗是b標(biāo)簽。其實這個加粗是strong標(biāo)簽。我們能夠幫我們網(wǎng)頁的重要關(guān)鍵詞加上這個標(biāo)簽，然后在css里面設(shè)置他跟普通的字一樣，在正常閱讀的時分并不會有什么影響，但是其實他曾經(jīng)優(yōu)化了。
上面的總結(jié)是作者自己在排版總結(jié)中的頁面布局。當(dāng)我們?nèi)プ鲆粋€web前端工程師,你可以簡單地理解代碼,但當(dāng)我們想做一個網(wǎng)站構(gòu)建的操作的web前端工程師,我們還必需統(tǒng)籌到程序員看到后的感受和網(wǎng)站對搜索引擎優(yōu)化的難易。更多關(guān)于濟(jì)南網(wǎng)站建設(shè)的相關(guān)內(nèi)容，請點擊網(wǎng)站：
http://www.premium-option.com
