威尼斯wnsr888

設計、網站、推廣
始于2004年
當前位置:首頁 > 網站制作

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

發表日期:2019-6-3 作者來源:威尼斯wnsr888 浏覽次數:

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


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

  网页切图如何进行?专业網站制作切图规范都有哪些?

  在網站制作中我们经常会听到定稿后我们就好进行切图了,那么切图到底是一个什么样子的工作,让我们专业的前端工程师告诉您。

  切图是網站制作过程中的一个专业术语、是前端工程师必备的一个基础技能,切图是将设计文稿转化为HTML的过程。

  在網站制作的过程中,网页切图是指讲设计好的PSD文稿转化成html的工作,利用DIV+CSS将设计文稿以网页的形式表现出来,网页切图的切指的是将设计文稿中的图片根据布局的需要,利用Photoshop的切片工具将图像在文稿中分离出来,配合DIV+CSS完成静态页面的制作。

  規範一,文件規範。

  1、html,css,js,images均歸檔至系統開發目錄中。

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

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

  id和class應該如何起名?

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

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

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

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

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

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

  <h1>網頁排版</h1>

  <p>的時候要注意的一些事情</p>。

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

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

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

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

  <a title=”网页排版注意事项”href=”">说说彭健自己对网站排版的时候要注意的一些事情</a>。

  把最精准簡短能夠說明這條標題的意思寫下即可。

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

  <a name=”网页排版注意事项”title=”网页排版注意事项”href=”">说说彭健自己对网站排版的时候要注意的一些事情</a>。

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

  上面的一些總結是筆者自己在網頁的排版中一步一步總結出來的。當我們去做一個網頁前端工程師的時候,你單純懂得代碼是可以,但是當我們要做一個兼顧網站運營的網頁前端工程師的時候,我們還必須兼顧到程序員看到你的排版的感受和網站對搜索引擎優化的難易。
本文章系本站編輯轉載,轉載目的在于傳遞更多信息,並不代表本網贊同其觀點和對其真實性負責。如涉及作品內容、版權和其它問題,請在30日內與本站聯系,我們將在第一時間刪除內容!

相關網站設計案例

相關推薦新聞
网站建设解決方案