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