120 likes | 302 Views
4.3.3 透過標籤檢視窗變更表格屬性. 標籤檢視窗 面板 屬性 索引標籤,能讓您使用屬性表來編輯標籤及物件。「相關網站」資料表格將先透過 屬性 索引標籤為表格設計上背景色彩,並產生深灰色的邊框線。 選按功能表列 視窗 標籤檢測器 ,再於 標籤檢視窗 面板選按 屬性 索引標籤。. 4.3.4 插入、刪除欄列. 編輯區中的表格物件,若需要再插入、刪除欄列時該如何處理?於 P4-11 表格作品完成圖,可以了解「相關網站」表格扣除標題列,尚需一般列十列,而目前該表格物件僅設計了一列一般列,現在請試著為表格物件插入九列一般列。.
E N D
4.3.3 透過標籤檢視窗變更表格屬性 • 標籤檢視窗 面板 屬性 索引標籤,能讓您使用屬性表來編輯標籤及物件。「相關網站」資料表格將先透過 屬性 索引標籤為表格設計上背景色彩,並產生深灰色的邊框線。 • 選按功能表列 視窗 \ 標籤檢測器,再於 標籤檢視窗 面板選按 屬性 索引標籤。
4.3.4 插入、刪除欄列 • 編輯區中的表格物件,若需要再插入、刪除欄列時該如何處理?於 P4-11 表格作品完成圖,可以了解「相關網站」表格扣除標題列,尚需一般列十列,而目前該表格物件僅設計了一列一般列,現在請試著為表格物件插入九列一般列。
4.3.5 置入文字內容 • 請開啟 <C:\ tokyotravel \ txt \ information_相關訊息.txt> 檔參考其文字,將資料填入表格內。 請如圖填入相關資料,「資料收集」欄位下請先維持空白。
4.3.6 透過 CSS 設計儲存格內容的樣式 • 在瀏覽器中瀏覽表格作品時,會發現標題儲存格目前的設計:深藍底色搭配黑色文字,讓文字看起來很不清楚,這時可透過 CSS 來調整內容樣式。 • 將插入點置於任一儲存格內,可於下方的 屬性 面板看到看相關設定欄位。 • 當選按 鈕進入 HTML 格式時,Dreamweaver 會將調整的屬性加入至網頁內文的 HTML 程式碼中 (此方法無法讓其他物件快速選套相同屬性)。 • 當選按 鈕進入 CSS 格式時,Dreamweaver 會將屬性寫入文件的標題或指定的樣式表中 (此方法可讓物件於 CSS 規則清單內快速選擇套用)。
4.3.7 排序表格內的資料 • 表格相關功能中,還可以依據單一或多欄的內容來排序表格的列資料,這主要是針對表格內容的數值或中、英文比劃依照順序排列。 • 將欄 2 「網站.網址」 標題儲存格下方的資料內容,以中文名稱筆劃遞增的方式排序:
4.3.8 合併儲存格 • 設計表格時,不一定只是一格格呆板的配置方式,也可以搭配合併與分割儲存格的動作,讓版面更加活潑。 • 請將欄 1 「資料收集」 標題儲存格下方的空白列資料合併起來:
4.4 重疊擺放與 CSS 樣式 - 製作巢狀表格 • 巢狀結構表格,也就是一個表格置於另一表格的儲存格中。同樣的可以格式化巢狀表格,就像設計一般表格一樣;但是內部表格與儲存格的寬度會受到它所出現之儲存格的寬度所限制。
在動手製作表格前,先來看一下這個作品的結構,待會就要按圖施工囉!在動手製作表格前,先來看一下這個作品的結構,待會就要按圖施工囉!
4.4.1 製作第一層與第二層表格 • 請進入「東京慢旅行」範例網站,開啟 <information.htm> 檔案。延續上一節繼續設計,首先於 「相關書籍」 下方插入第一層表格。
4.4.2 將圖片與文字填入表格並調整樣式 • 請先將插入點置於第二層表格的左欄中,並插入第一張書籍影像。
習作園地 實作題 • 依照如下提示,完成 「香草園圃」 表格資料的製作。