只要修改預設的CSS 規則及輸入取代預設的文字即可。請先將檔案存檔為「travel.html」。CSS 版面是由一個一個區塊所組成,首先修改標題列區塊,將文字換成圖片。
Step 1.
將標題列預設的文字刪除, 雙按CSS 面板中的「.twoColFixLtHdr#header」規則。
Step 2.
點按「方框」分類,將寬度設為780,高度設為226,以符合事先製作的圖片尺寸。並將「Padding」欄位預設的數字清除掉後,勾選「全部一樣」選項。「Padding」是控制文字與邊框的間隔。
Step 3.
點按「背景」分類,在「Background-image」欄位瀏覽選取影像檔案「\images\travel\head.jpg」。
按「套用」後可看到圖片已取代背景。因為目前左右兩欄寬度不一,要修改左邊欄位以擴大範圍。
Step 4.
雙按CSS 面板中的「.twoColFixLtHdr #sidebar1」規則。點按「方框」分類,將寬度設為350。接著輸入文字取代預設的文字。為了節省時間,請開啟範例檔案「seattle-travel.html」,選擇「編輯 →全選」後,選擇「編輯 → 複製」,複製裡面的內容。
Step 5.
切換回「travel.html」,選取左邊欄位的文字,選擇「編輯 → 貼上」。會看到左邊欄位已變寬,原先的文字已被取代。
用同樣的方法,將右邊欄位的內容,用「vancouver-travel.html」檔案取代。
如要修改整體背景顏色,雙按CSS 面板中的「body」規則。點按「背景」分類,在「Background-color」欄位中選擇顏色。