資訊

精準傳達 • 有效溝通

從品牌網站建設到網絡營銷策劃,從策略到執行的一(yī)站式服務

掌握網站切圖規範需要了解哪些技巧

來源:中(zhōng)聯星空網絡科技有限公司 |

  會寫網頁的人有很多,但并不是每個人都是優秀的前端工(gōng)程師。想要成爲一(yī)名優秀的前端工(gōng)程師,必須具備網站的用戶體(tǐ)驗的優化,其中(zhōng)包括網頁打設計和實現。


  作爲UI設計師,過完稿和開(kāi)發對接時,需要标注設計稿和切圖,把标注切圖文件給到開(kāi)發。這個時候就犯難了,那麽多尺寸怎麽切圖呢?


  網頁切圖如何進行?專業網站制作切圖規範都有哪些?


  在網站制作中(zhōng)我們經常會聽(tīng)到定稿後我們就好進行切圖了,那麽切圖到底是一(yī)個什麽樣子的工(gōng)作,讓我們專業的前端工(gōng)程師告訴您。


  切圖是網站制作過程中(zhōng)的一(yī)個專業術語、是前端工(gōng)程師必備的一(yī)個基礎技能,切圖是将設計文稿轉化爲HTML的過程。


  在網站制作的過程中(zhōng),網頁切圖是指講設計好的PSD文稿轉化成html的工(gōng)作,利用DIV+CSS将設計文稿以網頁的形式表現出來,網頁切圖的切指的是将設計文稿中(zhōng)的圖片根據布局的需要,利用Photoshop的切片工(gōng)具将圖像在文稿中(zhōng)分(fēn)離(lí)出來,配合DIV+CSS完成靜态頁面的制作。


掌握網站切圖規範需要了解哪些技巧



  規範一(yī),文件規範。


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


  2、Html文件命名爲英文命名,後綴爲.htm。同時将對應界面放(fàng)入同一(yī)目錄中(zhōng),如果命名稿爲中(zhōng)文,就需要重新命名與htm同文件。以便後端添加和功能查找。


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


  id和class應該如何起名?


  這個名字是可以随自己喜歡來起名,所以有一(yī)些人使用英文,拼音或者亂打幾個字母。雖然說這樣子是可以的,但是會導緻自己和别人在後期的修改網站非常麻煩,就因找一(yī)個标簽也要頭暈了。我個人起名字是按照層次來起,下(xià)面舉個例子:


  例如頭部我使用了head這個名字,然後頭部可以分(fēn)爲存放(fàng)logo和存放(fàng)導航條兩部分(fēn)。這兩個部分(fēn)我就會使用head_1、head_2來表示,然後在存放(fàng)logo的部分(fēn)有可能分(fēn)爲左右一(yī)邊是logo一(yī)邊是廣告或者搜索欄,我就會起名爲:head_1_left、head_1_right來表示。這樣子的css代碼有時候我們在修改也無需翻到html頁面看,直接按照樣式的名字就可以看出來了。


  二、合理使用标簽有助于網站的收錄和SEO優化


掌握網站切圖規範需要了解哪些技巧



  我們舉一(yī)個例子,有時候一(yī)個新聞内容闆塊的html裏面,很多人都會直接在div中(zhōng)間寫上文字,然後給這一(yī)個div進行樣式的控制:<div>新聞内容</div>。雖然這樣子是完全可以實現功能,但是在搜索引擎眼中(zhōng)并不認爲這個就是一(yī)個正文内容而是代碼之類的,所以我們在寫這個的時候記住合理使用p标簽,如上面的新聞内容應該寫爲:<div><p>新聞内容</p></div>。在我們合理使用标簽的時候一(yī)方面可以讓人感覺到你是用心來做這個網頁的排版,更重要的是讓這個網站後期的優化事半功倍。下(xià)面給大(dà)家總結一(yī)下(xià)自己感覺上要加的标簽:


  h1:一(yī)個網頁的主題,在一(yī)個頁面裏面隻能出現一(yī)個。權重僅次于網站标題,所以盡量單純把自己網站的主關鍵詞放(fàng)在裏面。如果關鍵詞包在一(yī)個句子裏面如這篇文章的标題,我們可以寫成如下(xià):


  <p>說說彭健自己對</p>


  <h1>網頁排版</h1>


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


  h2-h3:在網頁裏面一(yī)般使用到h3就足夠了,後面的h4-h6一(yī)般都不會再使用。這些兩個标簽我們需要合理安排,h2表示一(yī)個頁面裏面的欄目,h3表示在這個欄目裏面的子欄目或者文章。


  p:p标簽爲段落标簽,我們也可以說他是内容标簽。這個标簽裏面的才是真正的内容。


  alt:搜索引擎是不會看圖片的,我們必須要爲他說明這個圖片表示的是什麽,所以我們注意在每一(yī)張圖片上爲他說明。


  title:這個标簽是用在a标簽裏面的,一(yī)般很少人使用。但是我們要兼顧搜索引擎的優化所以我們必須要注意給搜索引擎一(yī)個簡單精準的說明,例如說一(yī)篇文章标題是“說說彭健自己對網站排版的時候要注意的一(yī)些事情”。然後我們的代碼應該寫成


  <a title=”網頁排版注意事項”href=”">說說彭健自己對網站排版的時候要注意的一(yī)些事情</a>。


  把最精準簡短能夠說明這條标題的意思寫下(xià)即可。


  nane:這個标簽相信沒幾個人會注意到。這個名字标簽可以說是直接跟搜索引擎說話(huà)的标簽。他也是用在a裏面,他是告訴搜索引擎,進入這個超鏈接裏面是什麽東西。就如上面的标題我們可以寫成:


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


  strong:這個是重要标簽,這個的樣子跟b标簽一(yī)樣。很多做seo而不懂代碼的人他們知(zhī)道每一(yī)篇文章要把重要的關鍵詞加粗,但是他們總是以爲這個加粗是b标簽。其實這個加粗是strong标簽。我們可以幫我們網頁的重要關鍵詞加上這個标簽,然後在css裏面設置他跟普通的字一(yī)樣,在正常浏覽的時候并不會有什麽影響,但是其實他已經優化了。


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

十八年 建站經驗

多一(yī)份參考,總有益處

聯系客服,免費(fèi)獲得專屬《策劃方案》及報價

咨詢相關問題或預約面談,可以通過以下(xià)方式與我們聯系

業務熱線:400-606-8008 / 大(dà)客戶專線 濟南(nán):15589999555