有很多人可以寫(xiě)網(wǎng)頁(yè)，但不是每個(gè)人都是一個(gè)好的前端工程師。要成為一名的前端工程師，你必須具備網(wǎng)站用戶(hù)體驗優(yōu)化，包括網(wǎng)頁(yè)設計和完成。

　　作為一名UI設計師，在將完成稿與開(kāi)發(fā)連接時(shí)，需求會(huì )對設計稿和切割圖進(jìn)行標記，并將標記和切割圖的文件發(fā)送給開(kāi)發(fā)。這個(gè)時(shí)分就犯難了，那么多尺寸怎樣切圖呢?

　　如何進(jìn)行網(wǎng)頁(yè)切圖?網(wǎng)站制作切圖的標準是什么?

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

　　切圖是網(wǎng)站制造過(guò)程中的一個(gè)術(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文件命名為英文名，后綴為html。同時(shí)將對應的接口放入相同的目錄中，如果命名為中文，則需要重命名和HTM文件。用于后端添加和實(shí)用程序查找。

　　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)行款式的控制：

新聞內容

。固然這樣子是完整能夠完成功用，但是在搜索引擎眼中并不以為這個(gè)就是一個(gè)正文內容而是代碼之類(lèi)的，所以我們在寫(xiě)這個(gè)的時(shí)分記住合理運用p標簽，如上面的新聞內容應該寫(xiě)為：

新聞內容

。在我們合理運用標簽的時(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ě)成如下：

如何進(jìn)行網(wǎng)頁(yè)切圖?

網(wǎng)站建設

切圖的標準是什么?

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

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

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

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

　　把更精準簡(jiǎn)短可以闡明這條標題的意義寫(xiě)下即可。

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

　　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)化了。

　　上面的總結是作者自己在排版總結中的頁(yè)面布局。當我們去做一個(gè)web前端工程師,你可以簡(jiǎn)單地理解代碼,但當我們想做一個(gè)網(wǎng)站構建的操作的web前端工程師,我們還必需統籌到程序員看到后的感受和網(wǎng)站對搜索引擎優(yōu)化的難易。更多關(guān)于濟南網(wǎng)站建設的相關(guān)內容，請點(diǎn)擊網(wǎng)站：http://www.seermedium.com