Introduction to

網頁排版With Cascading Style Sheets

視傳一 網頁設計／林金祥

Webpage Design/ by Chin-Hsiang Lin 1

網頁版面概念 (800x600)

Webpage Design/ by Chin-Hsiang Lin 2

網頁版面概念(1024x768)

Webpage Design/ by Chin-Hsiang Lin 3

網頁版面概念(1600x1050)

4Webpage Design/ by Chin-Hsiang Lin

黃金比例

Webpage Design/ by Chin-Hsiang Lin 5

ba

a

a:b = (a+b):a

黃金比例欄寬 (1024x768)

Webpage Design/ by Chin-Hsiang Lin 6

810

500

例用黃金比例求得主要欄寬與次要欄寬的寬度

總寬÷ 1.62 = 主要欄寬

810 ÷ 1.62 = 500

網格版面設計

7Webpage Design/ by Chin-Hsiang Lin

加強「頭版」區域的資訊

8Webpage Design/ by Chin-Hsiang Lin

摺線

﹁頭版﹂區域

善用延伸資訊區

9Webpage Design/ by Chin-Hsiang Lin

摺線

延伸資訊區

開發網頁的好工具

安裝 FireFoxhttp://moztw.org/

安裝 Plugin: Web Develophttps://addons.mozilla.org/zh-TW/firefox/search?q=web+developer&cat=all

10Webpage Design/ by Chin-Hsiang Lin

http://moztw.org/https://addons.mozilla.org/zh-TW/firefox/search?q=web+developer&cat=allhttps://addons.mozilla.org/zh-TW/firefox/search?q=web+developer&cat=all

版型的設計範例 (1)

Webpage Design/ by Chin-Hsiang Lin 11

版型的設計範例 (2)

Webpage Design/ by Chin-Hsiang Lin 12

Keep Learning!多練習就會熟悉，加油！

© 2009, 視傳／祥子

Webpage Design/ by Chin-Hsiang Lin

Introduction to �網頁排版�With Cascading Style Sheets網頁版面概念 (800x600)網頁版面概念(1024x768)網頁版面概念(1600x1050)黃金比例黃金比例欄寬 (1024x768)網格版面設計加強「頭版」區域的資訊善用延伸資訊區開發網頁的好工具版型的設計範例 (1)版型的設計範例 (2)Keep Learning!�多練習就會熟悉，加油！