DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局基本知識 >> DIV CSS制作重要步驟經驗介紹
DIV CSS制作重要步驟經驗介紹
編輯:布局基本知識     

 

div css制作步驟介紹thinkcss經驗篇

ThinkCSS總結CSS制作重要步驟供大家學習與參考。

一、分析帶切美工圖

在CSS制作前對網頁美工圖分析是必不可少的,少了分析會讓你接下來布局凌亂。我們分析也應該遵循整體到局部、從外到內、從上到下,分析內容:

1、網頁結構
分析網頁結構,讓自己有數如何布局網頁框架,比如分析網頁左右、上下結構構造,便於整體布局把握

比如重要的 頭部、內容部分、底部版權
內容部分是什麼結構,可以如何拆分布局。

2、分析需要切出圖片素材
分析網頁美工圖那些是作為網頁背景、那些是內容圖片。

作為網頁背景圖片,如果是背景不重復的一般是隱藏遮擋背景圖片上的內容再整體切出,如果是可以平鋪重復顯示背景,我們如何切出減少素材大小。

3、特效分析
如果網頁中有特效,我們如何實現,自己會那沒問題,也可以找特效嵌入,這個時候就要求平時多收集常用CSS+JS特效(CSS特效、CSS模塊),便於布局運用。

4、整體把握
通過整體、局部分析應該做到對此網頁CSS布局心中有數,整體框架如何布局,網頁如何拆分結構布局、局部是否有難點,難點解決等都要做到心中有數。

二、切出素材

根據第一步分析,切出網頁中圖片、網頁素材等,PS導出切片。

一般圖片GIF格式,如果是圖片有半透明一般導出PNG格式(ie6 png透明解決),圖片內容一般導出為jpg格式。

三、引入ThinkCSS初始化模板

將拷貝一份thinkcss初始化模板,命名好文件夾項目名。提供的初始化css模板,包括了CSS文件(style.css)、HTML文件(index.html)、放圖片images文件夾,已經對應新建好常用文件夾結構。

CSS模板

四、將切出網頁圖片素材放入初始化模板

我們將網頁素材圖片考入新建項目的images文件夾內。

五、開始從上到下、從外到內布局

1、基礎修改設置
一般使用DW軟件打開index.html,首先進行基本設置,比如根據網頁美工圖使用PS獲得文字顏色、背景顏色,對css中設置字體顏色、背景顏色、如果背景是圖片中設置好CSS背景圖片。

2、布局把握
一般是從上到下布局,從外到內布局,先布局同級最大結構框架,再局部布局。

比如,頭部,我們就開始布局頭部最外層div盒子,設置好css布局居中,css寬度等,再布局頭部上下結構情況,再分別設置局部左右框架最後布局內容(左右布局一般使用css float樣式)。

比如左右結構內容,一般是先布局最外層盒子,在跟著布局左右結構2個盒子,然後再回到左側盒子,開始布局左側內容。新手不要布局最外層盒子後,就開始布局左側及左側內容而右側結構都沒有設置布局,如果這樣很容易造成布局混亂與布局錯誤。

重要:一定先最外層,如何對應左側和右側盒子大框架布局了,再回到左側或右側開始從上到下布局局部。

以上布局把握布局步驟讓您在布局時候有條有理,不易造成布局混亂無從下手。

同時在布局時候可能一般不確定自己布局是否正確是否兼容,可以在布局時候邊布局邊在一個浏覽器中測試兼容,新手千萬不要在軟件中布局完網頁才測試,這樣很容易造成錯誤兼容問題找不到原因。在布局中測試可以發現問題解決問題,讓DIV+CSS網頁兼容更好。

布局時候可能您會遇到:
css命名
css hack

六、測試css兼容,完成布局

網頁布局完後,就進行最後常用浏覽器兼容性測試,最後調整修改完善,這樣一個從網頁美工圖到css制作完成的html網頁就完成。

希望以上ThinkCSS總結常見重要布局步驟對大家學習與布局有用,網頁布局總體思維布局方法一定要善於總結。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved