浸信会永隆中学IIT教师培训Dreamweaver进阶篇排版甲表格.DOC

浸信會永隆中學 ~ IIT 教師培訓 《Dreamweaver進階篇 ~ 排版》 (甲) 表格(Table) 在設計網頁時，表格是一項非常重要的基本排版工具，運用表格，我們可以將圖片、文字及其他設計元素裝到不同的儲存格(Cell)裡，讓物件可以固定於網頁的特定位置上。 1. 插入表格(Insert Table) 步驟一 在工具箱或指令清單上選擇插入表格指令。 步驟二 在插入表格(Insert Table)對話框中，輸入各項表格設定。 步驟三 完成之後按OK。當表格建立後，我們可以在任何一個儲存格內置入圖片、文字等等。 2. 修改表格屬性 步驟一 選擇表格：將滑鼠移至表格之底部，當浮標變成 後，按滑鼠左鍵便可選擇表格。 步驟二 修改屬性面板上之參數。 3. 修改儲存格屬性 步驟一 選擇儲存格、列或欄：將滑鼠放在表格的左方或上方可選擇列或欄 步驟二 修改屬性面板上之參數。 活動一 運用表格，製作一個相簿網頁。 (乙) 配置式表格(Layout Table) 1. 甚麼是Layout Table？ 其實Layout Table本身就是表格，只不過它是一種以繪圖的方法來建立表格，而且表格儲存格的大小可隨意定義，感覺就好像可以在網頁任可一個位置建立儲存格，然後在該儲存格裝上文字或圖片。 2. 配置檢視(Layout View) 在建立Layout Table前，我們必須進入Layout View 的編輯模式。以下是有關Layout View在工具箱的按鈕： 3. 插入配置式表格(Layout Table) 當進入Layout View後，我們便可建立Layout Table。(注意：雖然我們可以在一張網頁中建立多個Layout Table，但最好是每一張網頁只建立一個Layout Table) 步驟一 按下工具箱中進入配置檢視(Layout View)之按鈕。 步驟二 按下工具箱中建立Layout Table之按鈕，將滑鼠移到網頁需要建立Layout Table之位置，此時滑鼠浮標將變成(＋)的形狀，然後拖放滑鼠即可建立Layout Table。(注意：Layout Table必須建立在沒有任何圖片或文字之位置上) 插入配置式儲存格(Layout Cell) Layout Table其實不能置入任何文字或圖片，要置入文字或圖片，我們必須加入Layout Cell。 步驟一 按下工具箱中建立Layout Cell之按鈕，將滑鼠移到Layout Table內，此時滑鼠浮標將變成(＋)的形狀，然後拖放滑鼠即可建立Layout Cell。 步驟二 重複步驟一以建立更多Layout Cell。 5. 修改配置式表格(Layout Table)屬性 步驟一 單響Layout Table的綠色邊緣將Layout Table選取。 步驟二 修改屬性面板上之參數。 6. 修改配置式儲存格 (Layout Cell) 屬性 步驟一 單響Layout Cell的邊緣將Layout Cell選取。 步驟二 修改屬性面板上之參數。 活動二 運用Layout View，製作一個網頁報導一段新聞，格式須參考報紙之排版。 (丙) 頁框(Frame)排版技術 1. 甚麼是Frame？ Frame是一種網頁分割技術，用來將螢幕分為若干區域，每個Frame中都包含一個獨立的HTML檔，Frame就好像一個容器，隨時可裝入不同HTML檔。如果你編寫一個包含了兩個頁框的網頁，即代表你同時編寫三個HTML檔，包括： HTML檔包含了頁框組Frameset (即兩個頁框之屬性) 裝在頁框一中的HTML檔 裝在頁框二中的HTML檔 2. Frame控制板 當我們建立了頁框後，我們必須使用Frame控制板來修改頁框或頁框組(Frameset)，我們可使用以下方法開啟Frame控制板： 執行 Window ( Frames或按 Shift-F2 鍵 3. 建立網頁頁框 我們可以有許多方法建立頁框網頁，例如 (1) 先編輯好HTML檔，然後將HTML檔置入頁框中，或 (2) 先建立頁框，然後將頁框預設之HTML檔，再編輯該HTML檔。以下是建立一個首頁(index.html)擁有三個頁框之方法： 步驟一 切換工具箱至Frame之模式。 步驟二 按下工具箱中「三個頁框」之按鈕，編輯網頁區立刻建立了一個新網頁，而網頁包含了三個頁框和兩個頁框組。 步驟三 在Frame控制板，分別單響三個頁框，然後到屬性面板修改頁框之屬性。 步驟四 在Frame控制板，單響圍在邊的框，以選擇頁框組(Frameset)，然後到屬性面板修改頁框組之屬性。 步驟五 修改好頁框和頁框組之屬性後，在指令清單上按「File ( Save All Frames」儲存網頁。(注意：這個動作會將建立頁框時預設之HTM