本文和大家重點討論一下DIV+CSS技術的概念,CSS是CascadingStyleSheets(層疊樣式表單)的簡稱,更多的人把它稱作樣式表。顧名思義,它是一種設計網頁樣式的工具。
網頁制作學習:DIV+CSS技術如何入門
CSS是CascadingStyleSheets(層疊樣式表單)的簡稱。更多的人把它稱作樣式表。顧名思義,它是一種設計網頁樣式的工具。借助CSS的強大功能,網頁將在您豐富的想象力下千變萬化,越來越多的人在學習而很多初學者沒有一個頭緒,整理了一些學習的方法給大家。
一.CSS學習重在方法!
要想掌握CSS,首先要學會Html!
再來談一下學習過程中的細節,因為一個樣式它是不可能脫離HTML頁面的,Html不與樣式結合的話,CSS就失去了存在的意義。所以一般書中都會舉一個例子,然後讓你上機測試效果,這是筆者想讓你有對樣式表CSS有一個初步的印象,告訴你CSS能做什麼。一個小例子:“麻雀雖小,五髒俱全”,你可能看不懂每一個語句的真正意思。但是你可以記得例子的模式,以後在實踐中不斷地用,不斷用的過程就是不斷記的過程,所以不能恢心,不能總認為自己記憶力不好,但不管你騎的是牛也好,千裡馬也罷,只要有恆心,一定會到達終點的。
閱讀一本書,一般來說第一次要先把整個書通讀一遍,不理解的也要往下看,在往下看的過程中你也許會找到那個問題的答案。看完後你有一個大概的印象,但一定有很多不明白的地方,沒關系,繼續往下看。第二遍你就要邊看邊做學習筆記了,把你認為是重點的部分寫上,還有,你覺得有疑問的部分也要記下,帶著疑問看下去,如果沒有答案,你可以去BBS上發一個貼子,好心人還是很多的,提示一句:“一定要學會如何去問問題!”。你還要上機去練習書上的例子,最讓你困惑的:“一是記不住,二是對概念的理解有誤(這一條可能是書譯的不好,另外就是你的理解不對)”,對於第一條你就要樹立信心,堅持再堅持下去。當你到達終點時你回發現一切都是順理成章的事。因為你努力了,努力了就會有回報,有結果。
有好多人也看了,但是沒有什麼進步,主要有以下幾個原因:
原因一:壓力不夠,因為有不少人比如美工學CSS,因為是看別人學,所以學之,不學就沒優勢!這樣的壓力是很小的,學不好還有美工這碗飯。
原因二:只是業余學習,這樣學還只是玩一玩,因為你不一定非要以這門技術吃飯。
原因三:方法不對,有的人只是在看教程,但他不動手去做,我以前就是看的太多,做的太少,所以有了實踐你才能把理論的東西揉進去。
二.掌握CSS的四個學習階段
階段一:不去想浏覽器的兼容性問題的情況下能做出頁面,但頁面裡到處用TABLE的模式DIV寫出的頁面。
階段二:想到了兼容性問題,但無法提前預防,只會修補問題,大量使用HACK技術(我對HACK技術只是知道,但用的很少)
階段三:可提前預防BUG,但樣式表中大量應用了ID,CLASS,CSS譯過來是重疊樣式表,比如“DIVPSPAN”。這句代碼是標明DIV子元素中P的子元素SPAN,這樣寫就可以定義SPAN的樣式了,不用在SPAN中加入CLASS了。這也就是CSS的優點所在,為什麼不好好利用而一定要定義一個CLASS呢!
階段四:這一階段是最難的,良好的Html語義結構、合理的CSS、可重復利用的樣式。良好的語義有這方面的文章,合理的CSS,這兩方面以後一定會寫專題來研究。
三.CSS初學者常見問題:
第一個要求是縮圖的正下方要有個標題。作法相當直接了當:在你的Html裡放上圖片,接著一個斷行(BR),再把標題放在一個段落(P)裡並且置中(利用CSS)。
接著要讓這些縮圖跟標題成對地排列在浏覽器窗口裡。使用表格排版時,這一對對的縮圖跟標題會被分別放置在TD裡。在使用CSS排版時,我們要把它們分別放置在DIV裡。為了讓它們能水平排列在窗口上,我們用CSS讓這些DIV往左浮動(FLOAT)。
◆問題1:學CSS應該選什麼樣書來讀?
先推薦幾本:《CSS權威指南》《網站重構》《網站布局實錄》《Html參考大全》
◆問題2:用什麼軟件編輯CSS代碼?
只要已經能達到會手寫的程度,用什麼軟件都可以,推薦使用DreamWeaver外掛TopStyle(最新版本是ProV3.12)。
◆問題3:先寫Html還是先寫CSS?
網上有很多種答案:先寫HTML後寫CSS;先寫CSS後寫HTML;兩者同時寫。兩者一起寫更適合初學者,先寫CSS或者先寫HTML對於初學者都不是恰當得的方法。如果讓一個人編寫代碼,你告訴他先寫HTML,寫完後Html不能修改了,然後你寫CSS,如果他可以寫出來,那這個人一定是一個水平非常高的Builder了!所以對於初學者,多數情況下建議同時編寫,具體說一下步驟:
先要把站點建好,目錄建好,比如我們建好文件夾CSS,IMAGES,這兩個是最其本的,然後新建一個HTML文件,一個style.CSS一個空的樣式表,把Html頁連接到這個外部樣式表。
然後我們先寫Html中的最基本的布局部分,都是用DIV,然後直接在DIV裡加入ID或CLASS,這些布局部分包括外套部分,頭部分,中間部分,左,中,右,版權部分等。
寫好這些後,這時你可以到樣式表中寫樣式,或者你在接著寫布局裡的部分,拿頭部為例,在頭部寫入LOGO部分,NAV部分也同樣加入ID或CLASS。其它同理。
為什麼說我們不可能一次性把HTML部分寫好呢,因為人都是可能犯錯誤的,可能你的想法寫的過程就是有問題的,或者為了浏覽器的兼容性問題,有些是你由於經驗的不足沒有提前預料到的,所以當你寫樣式時發現了問題時就有可能要改動你的HTML的代碼。大至的寫法就是這樣,你也可以Html/CSS同時進行,都是可以的,看你的習慣。我們寫代碼時很多時候是邊寫代碼邊測試,也不是說寫一句測試一句,而是寫了一段代碼後就進行浏覽器的測試,一個優秀的制作師他們的代碼多數情況寫了很多時他們才測試一下,是因為一個人如果經驗多的話,他們就會知道並提前預防浏覽器錯誤顯示的發生了!所以他們寫代碼的速度比沒有經驗的人快。他們已經經歷過了你所要經歷的錯誤,你第一次遇到錯誤的浏覽器顯示問題你要花時間去修補,而他們可提前防止或遇到了可立即解決問題!這就是你與他們的不同點之一。
初學者與高手不同點之處還有一個就是高手們使用了大量的快捷鍵,所以一定要記住那些常用的快捷鍵,每一個小的細節都有一點提高,綜合在一起就是很大的提高。另外提高自己的水平最好的方法就是多實踐,多找一些比較好的HTML+CSS的模板進行編碼實踐,開始時要選一個簡單點的,把頁面截圖,然後把這張圖用自己的想法還原成Html頁面……