首頁 美術繪圖 | 美術設計 | 熱門標籤 | 首選 | 首頁宣傳 | 近期作品 論壇: 發表 | 美術工作 | 美術比賽 | 展覽活動 | 美術相關 | 一般討論 | 美術同好 CG 討論 :: Photoshop | Painter | 3D 行動 | AMP

【 立即註冊 】 : 更改個人資料 : : 登入

會員名稱: 登入密碼: 保持登入

表格製作 PART-1 (表格基本製作)

表格的製作

DreamWeaver 就像是VB一樣,將原本必須自行寫的程式碼,利用元件的方式將這些程式碼圖形化:

比如說,在以前使用notepad編寫網頁時,遇到「表格」(table)時,必須寫上一大段文字:

 

但在 DreamWeaver 中的作法是這樣的:

.

ctrl + F2 會出現物件版面(如下圖)

物件版面

 

 

 

.

點選版面上的 「insert table」,會出現一個對話窗

 

「Rows」表示直的行數,「Columns」表示橫的列數,「Width」表示表格的寬度大小,「Borde」r表示表格的邊框寬度,輸入需要的格數資料後,按下「ok」,一個表格就製作完畢了(如下圖)。

 

 

這個表格,就是依照「insert table」內輸入的資訊所顯現,成為一行、兩列、寬度為600pixels、邊框寬度為1pixels的表格了,這個方法是在 DreamWeaver 終至做表格最基本的步驟。

 

 

 

表格的應用與變化

表格製作完畢後,如果希望在上面做點變化,您可以這樣做:

 

Sctrl + F3 ,會出現「屬性檢視版面」(如下圖)

 

 

 

將表格選取起來,屬性檢視版面會變成該表格所有有關的變項,如下圖所示,在選取表格後,屬性版面上的選項變成所有可以改變表格屬性的選項。

 

 

 

在這塊版面上可以直接改變表格屬性,比方說,在製作完一個表格後,發現格數不夠,直接選取表格,並在屬性版面上的「Rows」(改變直的行數)或是「Cols」(改變橫的列數)中輸入需要的行列數即可改變,如下圖中顯示,在「Rows」中輸入「5」、在「Cols」中輸入「3」會將原來的只有一行二列的表格變成五行三列。

 

 

 

如果想改變表格寬度的話,可以直接以滑鼠拉取,或是在屬性面上的「W」(寬度)和「H」(高度)中輸入數值,如下圖例,使用屬性版面功能,在「W」中將原來的100改為「300」、在「H」中輸入「50(在此要說明的是,本章教學中,所有數值都以「pixels」為單位,但在CW的表格單位有兩種,一為「pixels」、一為「%」,因為以「%」製作的表格為因為不同電腦中對網頁設定的不同而有所異動,所一般來說是用「pixels」比較多)

 

 

 

在表格屬性中的「CellPad」可以改變表格中字與格線間的距離,以下圖為例,若採系統預設的話,字與格線間的距離是2或是1pixels,若在「CellPad」中輸入數值「10」,則字與格線間的距離明顯變寬了。

 

 

 

在表格屬性中的「CellSpace」可以改變格線寬度,以下圖為例,若採系統預設的話,字與格線間的距離是1pixels,若在「CellSpace」中輸入數值改為「10」的話,則格線寬度就被改變了。

 

 

與「CellSpace」非常像的是「Border」,一般表格的「Border」值為「1」,若需要製作沒有格線的表格,則在「Border」中輸入「0」,其結果如下,變成雖然有「格子」的存在,但看不到格線。

 

 

另外,若將「Border」內的數值改為「10」的話,格線也會變寬,如下圖例,但形式與「CellSpace」便寬的方式不同。

 

 

 

我們也可以使用屬性版面來改變表格的顏色, 在「Bg Color」後面的空格中輸入顏色碼(網頁中用來設定顏色的code)若不曉得顏色碼是什麼也沒關係,「Bg Color」後面點選「 」圖示會出現顏色碼表(如下圖),直接選取喜歡的顏色,若覺得色碼表上的顏色不敷使用,可以選擇表上「」圖示,並在出現的色彩盤上選擇您需要的顏色。

 

 

 

以本章為例, 在「Bg Color」上的色碼表選擇「#0099FF」這個顏色,原來的表格,顏色會變成如下圖的顏色。

 

 

 

這時如果在「Brdr Color」中以相同的的方式選擇顏色,則會改變線框的顏色(如下圖)。

 

 

也可以利用「背景圖」來美化表格,若有一張像這樣「」的圖案,以滑鼠將表格選起來,在「Bg Image」中輸入該背景圖的位置,或是點選「」圖示選取該圖,則表格就會有背景底圖囉,如下圖所示。

 

 

 

如果需要將表格移動,同樣將表格以滑鼠選取,在屬性版面上的「Align」有四種選擇,「Default」表示系統預設的位置(一般來說是左邊);選擇「Left」表格會對齊左邊;選擇「Center」表格會對齊中間;選擇「Right」表格會對齊右邊

 

 

 

如果想看該表格的原始碼,您可以 「ctrl + Tab」來切換與 Code View 與 Design View 間的畫面。或者,在表格被選取的情況下用「ctrl + t 」來觀看表格原始碼。