完整範例導引,新手也能快速上手
17章徹底學會網頁優化,增強網頁視覺效果
可搭配網站影片,進行延伸學習
這不是一本在解釋CSS3各函式有甚麼作用的辭典書!
本書針對初學者與有心自學的讀者,採用完整案例,由淺入深,您會一步一步看到網頁套用CSS之後的變化。若您已有CSS語法基礎,也可以直接跳到所需章節學習與複習CSS3的功能。
看完本書,讀者馬上學會如何將單調網頁賦予生命,並學習到將網頁自動轉換成適合手機閱讀樣式的方法。
除了基本的CSS3基礎知識之外,您還可以學到:
‧利用CSS打造適用於電腦與行動裝置瀏覽器的網頁
‧執行視覺效果
‧利用變形讓網頁充滿生氣
‧精通CSS語法
‧利用位移與動畫讓網頁栩栩如生
‧建立多欄式版面
‧指定媒體類型與使用媒體查詢
‧靈活運用文字與字體樣式
‧可改善工作流程的「最佳做法」
作者簡介:
Ian Lunn
自由接案的前端開發人員,熱衷於利用CSS3及HTML5等技術來建構網頁的未來。擁有網路科技類高級國家職業文憑的Ian,將其所受教育與CSS、HTML、JavaScript和WordPress等專業知識相結合,打造出具創意又有效的網站和應用程式。而Ian在倡導尖端技術方面的努力不亞於他運用這些技術的熱忱,他透過部落格教學課程和開放原始碼專案的形式,與大家分享他的知識。
你也能在推特上與他互動(Twitter帳號@IanLunn),他會在上面分享與網頁設計及開發有關的連結和理念。
作者序
前言
你在一個振奮人心的時刻閱讀了此書。現在,網頁樣式的設定方式正在改變,而且隨著技術的持續進步,這變化似乎不會很快結束。網頁已是一個美麗世界,但當有了比以往更多的功能可妝點你的頁面時,創作的可能性就變得更無窮無盡。
誰適合閱讀此書?
本書主要是為那些完全沒接觸過網頁樣式的人所寫,但對於熟悉CSS 的人來說
這依舊是很棒的參考書籍-尤其是當你想多複習一些還記不太起來的最新CSS
功能時。
你最好對HTML(Hypertext Markup Language,超文本標記語言)有基本的
了解,不過這並非絕對必要。我將於第2 章為你介紹建構本書範例網頁所用的
HTML。因此不論你是選擇先學HTML 再學CSS,又或反之,都一定能夠漸漸
熟悉這兩種技術。
若你是個業餘愛好者、某個想轉行至美好網路產業的人、一個網站亟需修改樣式的站長,抑或是一個想提升自我並學會最新技術與現今所用方法的網頁設計/ 開發人員,本書正是為你而設計。
你將學到的內容
本書不僅能讓你起步,還要讓你能跑、能跳、能有大躍進!
你將從網頁樣式極基本的設定開始學習,包括更改背景色、文字尺寸⋯等等,接著進入較進階的主題如動畫和媒體查詢,而這些功能可讓你依據不同大小的裝置來變更頁面配置。
雖然全書各章基本上是由淺入深的,不過更重要的是,本書所呈現的編排方式
正是我和其他許多網路業界人士建立網站時所採取的工作流程。因此在你學習
CSS 的同時,還能學到可應用於實際專案的「最佳做法」,讓你的網頁不只是美觀而已,還便於更新,且可在各式各樣的裝置上檢視(例如桌上型電腦和手機)。
你還會學到一些未列在CSS 規格書(介紹CSS 的官方技術文件)中的特殊方法與技巧,而多年來,網頁設計師與開發人員們一直是靠著這規格書來運用CSS
的呢。
你將學到的內容
本書不僅能讓你起步,還要讓你能跑、能跳、能有大躍進!
你將從網頁樣式極基本的設定開始學習,包括更改背景色、文字尺寸⋯等等,接著進入較進階的主題如動畫和媒體查詢,而這些功能可讓你依據不同大小的裝置來變更頁面配置。
雖然全書各章基本上是由淺入深的,不過更重要的是,本書所呈現的編排方式
正是我和其他許多網路業界人士建立網站時所採取的工作流程。因此在你學習
CSS 的同時,還能學到可應用於實際專案的「最佳做法」,讓你的網頁不只是美觀而已,還便於更新,且可在各式各樣的裝置上檢視(例如桌上型電腦和手機)。
你還會學到一些未列在CSS 規格書(介紹CSS 的官方技術文件)中的特殊方法與技巧,而多年來,網頁設計師與開發人員們一直是靠著這規格書來運用CSS
的呢。
本書使用方法
在第2 章中,我將為你介紹一間虛構的公司,而該公司要求你替他們建立網頁-無酬勞,但經驗無價!你可下載專案所需的檔案以著手製作。這份下載資料包含各章所需的最新專案檔(有些較大章節還會分成幾個不同階段的檔案)。我會在書中標明不同階段該用的檔案,以便你比較這些專案檔和你自己的製作成果,或是若你沒有依據前面的步驟操作,那麼也可直接使用特定階段的專案檔來進行後續練習。
你可依據自己目前的CSS 運用經驗,來決定跳到某些讓你最感興趣的章節-別
擔心,各章開頭處都會標明該章節應使用的專案檔。
讀完本書後,它將成為你桌面上的最佳參考書,當你需要複習某些功能的用法,
或想解決特定問題時,本書都能派上用場。每個屬性的說明內容都包含了實用資訊,例如該屬性的初始值與瀏覽器的相容性⋯等等,有利於快速查詢。而若你並不熟悉這些術語,我也會為你說明喔!
閱讀本書時可搭配運用Treehouse 學習網站
你不須成為Treehouse 學習網站的會員,也一樣可以有效運用本書,但這兩者確實是相輔相成的。雖然兩者都以全面性的學習為目標,但總還是能學到一些額外的東西。
更重要的是,Treehouse 影片課程的最後往往帶著一些有趣、具互動性的挑戰
題,可讓你好好測試一下所學知識。你可以不斷反覆嘗試任一挑戰題,直到你覺得自己已經充分熟悉該主題為止。
Treehouse網站上也有個很棒的社群(身為其中一員我感到相當榮幸),每當你
有疑問或想炫耀你的CSS 技巧時,就來加入我們吧!
前言
你在一個振奮人心的時刻閱讀了此書。現在,網頁樣式的設定方式正在改變,而且隨著技術的持續進步,這變化似乎不會很快結束。網頁已是一個美麗世界,但當有了比以往更多的功能可妝點你的頁面時,創作的可能性就變得更無窮無盡。
誰適合閱讀此書?
本書主要是為那些完全沒接觸過網頁樣式的人所寫,但對於熟悉CSS 的人來說
這依舊是很棒的參考書籍-尤其是當你想多複習一些還記不太起來的最新CSS
功能時。
你最好對HTML(Hypertext Markup Language,超文本標記語言)有基本的
了解,不過這並非絕對必要。我將於第2 章為你介紹建...
目錄
PART 1 入門
CHAPTER 1 了解CSS 與現代網頁
CHAPTER 2 學習前的準備工作
PART 2 學習CSS 語法並加入外觀呈現類樣式
CHAPTER 3 掌控CSS 選擇器的威力
CHAPTER 4 利用屬性值來建立樣式
CHAPTER 5 加入外觀呈現類樣式
PART 3 建構穩固且適應力強的網頁結構
CHAPTER 6 建立基本的網頁結構
CHAPTER 7創造空間與理解區塊模型
CHAPTER 8 建立多欄式版面配置
CHAPTER 9 理解顯示、定位與文件流
PART 4 文字編排
CHAPTER 10 改變字型
CHAPTER 11 為字型及文字套用樣式
PART 5 利用變形與動畫功能將網頁帶入全新的層次
CHAPTER 12 加入2D 變形效果
CHAPTER 13 以3D 變形超群脫俗
CHAPTER 14 利用變形與動畫功能為你的網站帶來生命力
PART 6 為多種瀏覽器及裝置做準備
CHAPTER 15 進行跨瀏覽器測試
CHAPTER 16 讓你的網站能跨多種裝置完美呈現
CHAPTER 17 最後的處理與結論
PART 1 入門
CHAPTER 1 了解CSS 與現代網頁
CHAPTER 2 學習前的準備工作
PART 2 學習CSS 語法並加入外觀呈現類樣式
CHAPTER 3 掌控CSS 選擇器的威力
CHAPTER 4 利用屬性值來建立樣式
CHAPTER 5 加入外觀呈現類樣式
PART 3 建構穩固且適應力強的網頁結構
CHAPTER 6 建立基本的網頁結構
CHAPTER 7創造空間與理解區塊模型
CHAPTER 8 建立多欄式版面配置
CHAPTER 9 理解顯示、定位與文件流
PART 4 文字編排
CHAPTER 10 改變字型
CHAPTER 11 為字型及文字套用樣式
PART 5 利用變形與動畫功能將網頁帶入全新的層次
CHAP...