您現在的位置: 网站首頁 / 網站建設 / 正文

DIV CSS布局分析与切图的实战应用介绍

作者: admin 发布: 2015-6-7 11:27:6 分类: 網站建設 閱讀: 次 查看評論

  DIV CSS布局分析与切图的实战应用介绍

  从美工图到DIV CSS到制作成HTML中间必不可少的步骤为对美工图的分析和美工图的切图。平时大家说切图也是从这个步骤捡取的一个词语来代表css完整制作的代名词,就像div css制作一样。

  一、美工圖分析

  在拿到網頁美工圖,第一件事不是直接切圖,而是分析美工圖,主要從以下方面分析:

  1、網頁結構分析

  從上到下,從外到內分析美工圖結構情況,以便布局時候如何架構網頁框架,分析美工圖結構時,無需真正畫出結構情況,而是默默分析即可。

  2、圖片素材分析

  哪些是內容圖片、哪些是背景素材,如何切、切多少作爲素材,都需要直接分析出。

  以上分析只需要直接在心裏默默分析即可,均不需要動手畫。

  二、切圖(布局所需圖片素材獲得)

  根據分析,使用軟件切出需要的圖片內容和圖片素材,切圖時候圖片素材注意與周圍聯系技巧性切取(具體切圖軟件使用方法與圖文教程在VIP教程均提供,同時在線培訓時也演示個大家)。

  切素材圖片時候盡量切小,能平鋪使用圖片注意把握規律,切出後在布局中平鋪使用即可,不需要整切,從而減少文件大小。

  三、導出圖片

  切好圖片後,就是導出圖片素材,導出圖片有2種情況,常見有3個圖片文件方式——gif,jpg和png格式。

  導出切好圖片時,可以在切好一處導出一次,也可以切好多處一次性導出幾處的圖片素材。

  導出圖片時候常用gif格式,如果圖片色彩比較絢麗豐富,一般GIF格式圖片就不是那麽清楚漂亮,這個時候選擇jpg或png格式圖片,在導出JPG格式的圖片時候根據需求選擇高、非常高的質量。

  在導出半透明或陰影圖片時候我們通常使用導出png擴展名的圖片文件,導出時候選擇png-24格式質量的Png。

  有時可能一次性不能導出所有所需的圖片素材,可能會忘記一些,這時無所謂再通過軟件切出和導出所需素材即可。

  从美工图分析到切好图片素材后,即开始DIV CSS布局网页,这个时候从上开始从外到内,根据分析一步步完成CSS开发制作。

  以上DIVCSS5爲大家介紹分析和切圖的思維總結,希望對大家有一定幫助。

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: DIV  CSS  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表