修改CSS 版面玩美必修技
  類別:  網頁設計
  書號:  AEU008100
  作者:  林安琪/于冠雲
  回線上練功房

只要修改預設的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」欄位中選擇顏色。

 

關於碁峰隱私權政策聯絡我們     檢視 : PC 版  手機版
碁峰資訊股份有限公司 GOTOP INFORMATION INC.
台北市南港區三重路66號7樓之6 / 7F.-6,No.66,Sanchong Rd.,Nangang District,Taipei
TEL:(02)2788-2408 FAX:(02)8192-4433 劃撥帳號:14244383
Copyright 2014© GOTOP Information Inc, All Rights Reserved 請勿任意連結、轉載