05b_banner
建立banner，設計可隨內文增多而延展的背景。 Breadcrumbs(麵包屑的應用)，以及用web developer工具修改細部css。
- #banner-wrap背景延伸
- #banner的背景和框線(border)
- #banner和<header>的內距(padding)
- #banner的寬度
- firebug debug css
- #banner之內的<img>、<p>、<button>的設定
- breadcrumbs的背景漸層、z-index、圓角
- 在瀏覽器內修改css
#banner-wrap背景延伸
接下來開始進行BANNER的部份
在PSD的原始圖內解說，當內文超過原定範圍時，背景該如何自動延伸
banner-wrap負責放背景、banner負責放內文
設定為clear:both，來確保其它層的物件不會應浮動的關係而移到banner層
可看到header層的物件，都能固定在預定的位置，而不會跑到banner層來
試著在#banner內設置背景，看會有何問題
可看到背景不應設在#banner層，因背景不只有24格而已，而是會佔滿整個網頁，所以背景應設在#banner-wrap層才對
因此，將清除浮動和背景的設定，設至在#banner-wrap中
運行結果，可到到即使新增一堆內文，背景也會隨之延伸
為了使#banner-wrap和#banner之間留一點間距，設置其內距patting-bottom:15px
#banner的背景和框線(border)
#banner-wrap的外框線也是有顏色的，至photoshop中量取其邊線的顏色(#bba67b)
#banner-wrap的部份設置完畢，接下來設置#banner的背景圖片
背景顏色是正確的，但是正正方方的不好看，所以因將其邊線設置圓角
在#banner加入自訂的圓角類別-rounded
運行結果，可看到#banner有圓角框線了。但是#banner和header區的<nav>太接近了
#banner和<header>的內距(padding)
因此將#banner外距設為45px
但設置完margin-top後，卻發現背景有問題，竟然出現了#banner-wrap的背景
改為內距padding-top，在來觀察背景問題解決了沒
運行結果，可看到padding-top解決了背景問題
背景的間距問題最好是集中在#banner-wrap內，因為它是專門負責放背景的，所以將padding-top從#banner移到#banner-wrap內
運行結果，可看到背景依然正確
#banner-wrap的部份設置完畢，接下來設置#banner的內容。首先，需設置其標題的內距，所以至photoshop中，量測其上內距、左內距
將#banner的上下內距設為50px，左右內距設為40px
運行結果，可看到完成了內距的設定
#banner的寬度
#banner的寬度需設為880px，因為24格的960寬度為880px+左右外距(40px*2)，所以#banner實際上的寬度只有880px
並設定文字顏色為白色，並設置排列為relative，好確保內部元件如要設置為absolute時，只會在#banner區內移動，而不會跑到其它層
運行結果，可看到顏色被成功設置了
firebug debug css
故意將color的css給寫錯，看看要如何debug
在firebug中檢視目前套用在<h2>上的css
可看到沒有出現剛才故意打錯的color部份的css
經過這個實驗，我們就可了解以後css錯誤時，該如何檢查了。因此我們再量測正確的color值，修正color的錯誤
#banner之內的<img>、<p>、<button>的設定
#featured是用來放置#banner內2張圖片的區塊，將其指定為在#banner內的絕對位置，靠右40px、靠上35px
圖片是排好了，但是和文字的位置太接近了
至photoshop中量測，可發現文字距離右邊界的間距為517px
所以將標題和文字，設為離右內距517px
運行結果，可看到文字和圖片間的間距看起來不會這麼擠了
接下來，設定按鈕間的間距為20px
至photoshop中量測，可發現原始設計距離為29px，和我們剛才輸入的20px差不多，完成了按鈕的間距設定
接下來，設定#featured內，那2張圖片間重疉距離。由於要使第1張圖可指定位移位置，設為relative、靠左160px、靠上14px
可看到第一張圖經位移後，重疉一部份到第2張圖上了
讓我們回到photoshop中，仔細看這2張圖片間的關係(有陰影、且第一張圖蓋住了第2張圖的一部份)
因此，在第一張圖設置陰影
運行結果，可看到陰影被成功設置了
為了確保所有瀏灠器都能運行陰影，寫入各個瀏灠器的陰影css的寫法，完成了圖片陰影的設置
breadcrumbs的背景漸層、z-index、圓角
在PSD檔中，解釋導覽列(breadcrumbs)的部份
開始寫BREADCRUMBS的css部份，由於BREADCRUMBS為#banner的子階層，我們使用/**/來做為子階層的標記
在psd檔中，檢測出該導覽列的背景是有漸層的，因此先量測背景顏色(#257386)
量測完後，加入背景的顏色-background:#257386
漸層為由上至下分佈，所以先量測上面的顏色(#298192)
在量測下面的顏色(#247184)
在將漸層顏色依序寫入css中
漸層設好了，但是這個導覽列太窄了，應該將高度加高一點
因此設其行高(line-height)為43px
但此導覽列(#breadcrumbs)的行高加高後，有點檔住了#banner的咖啡色背景，所以應該降低導覽列的堆疉順序(z-index)
為了設置z-index，需指定排列方式為relative，在將z-index設為2
運行結果，設了z-index後，也是沒有作用。原因是因為我們尚為設置#banner的z-index
將#banner的z-index設為3(因為#breadcrumbs的值為2，需設的比它大一層才行)
我們希望導覽列(#breadcrumbs)的上端部份呈現一點點被#banner蓋住的效果，所以將#breadcrumbs的上邊界(top)設為-6px
運行結果，#banner和#breadcrumbs的重疉問題被解決了，但是加一點圓角會好看一些
所以將#breadcrumbs加入了自訂的圓角設定(rounded)
運行結果，是有圓角了，但沒有對齊好，而且字和左邊界的距離太近了
因此，設定上下內距為0且左右內距為40px，來讓字和邊距且有點距離。並且設定#breadcrumbs的寬度和#banner一樣都為880px，來和#banner對齊
運行結果，可看到成功對齊了
再來為其文字加入陰影
運行結果，陰影是設好了，但是超連結的文字顏色需統一為白色
設定超連結的文字為白色且為粗體
運行結果，完成了#breadcrumb內的所有文字設定了
在瀏覽器內修改css
目前文字和右邊界的距離是根據psd檔所設計的間距(517px)，但有時psd檔的設計和實際網頁輸出時的情形會略有不同，所以應根據實際網頁的情況來決定距離為多少較美觀
因此將右內距改為400px
運行結果，右內距改為400px後的效果
其餘還有許多排版上的細節，可切換至firebug，檢示其原始碼，可看到每個html tag，而其右側所對應的Layout排版資訊，可直接修改如padding、margin的數值
要觀察各物件間有無對齊，可使用miscellaneous工具的display Rule的功能，來產生檢查排版用格線
運用此格線比對時，可發現標題和圖片的上邊界不一樣
此時打開firebug，再微調上邊界，使其對齊
