Dreamweaver怎么設(shè)計(jì)彩色邊框的表格?

2024-09-12 12:29:05

字體：大中小

供稿：網(wǎng)友

Dreamweaver中制作表格是很簡(jiǎn)單的，但是想要改變表格邊框顏色，該怎么辦呢？下面我們就來看看詳細(xì)的教程。

1、啟動(dòng)Adobe Dreamweaver軟件，單擊歡迎界面窗口中的新建HTML按鈕，創(chuàng)建一個(gè)新的空白網(wǎng)頁文檔。

2、保存文檔后，將Dreamweaver窗口右上角的工作區(qū)布局更改為“經(jīng)典”布局方式，這樣可以讓“插入”面板顯示出來。

3、單擊“常用”面板當(dāng)中的“插入表格”按鈕，彈出“表格”對(duì)話框，設(shè)置插入的表格為3行3列，寬度600像素（大家可以根據(jù)自己的需要設(shè)置行列以及寬度值），邊框粗細(xì)、單元格邊距和間距均設(shè)置為0，我們等會(huì)用CSS樣式來控制它們。

4、表格插入后，在單元格中任意輸入文本。然后單擊Dreamweaver窗口右邊“CSS樣式”浮動(dòng)面板上的“新建CSS樣式規(guī)則”按鈕，彈出“新建CSS規(guī)則”對(duì)話框。

5、在“新建CSS規(guī)則”對(duì)話框的“選擇器類型”下拉列表中選擇“標(biāo)簽（重新定義HTML元素）”選項(xiàng)，“選擇器名稱”的下拉列表中選擇“table”也就是表格的標(biāo)簽，“規(guī)則定義”選項(xiàng)默認(rèn)為“僅限該文檔”（如果需要對(duì)其他文檔中的表格也使用此樣式可更改此選項(xiàng)）。

6、單擊“確定”按鈕后打開“table的CSS規(guī)則定義”對(duì)話框，選擇左邊“分類”選項(xiàng)中的“邊框”項(xiàng)，我們來對(duì)表格的外邊框進(jìn)行設(shè)置。將右邊窗口中“樣式”、“邊框”、“顏色”欄下“全部相同”的復(fù)選框取消勾選，因?yàn)閷?duì)于表格我們只設(shè)置上邊和左邊的邊框樣式，上和左的“樣式”選擇“solid（實(shí)線）”，“寬度”填入數(shù)值2px（細(xì)邊框表格此處填1像素），顏色可以任意選擇自己喜歡的顏色。單擊“確定”按鈕完成對(duì)于表格的樣式設(shè)置。

7、再次返回Dreamweaver窗口，單擊右邊“CSS樣式”浮動(dòng)面板上的“新建CSS樣式規(guī)則”按鈕，彈出“新建CSS規(guī)則”對(duì)話框。這次我們?cè)?ldquo;新建CSS規(guī)則”對(duì)話框的“選擇器名稱”的下拉列表中選擇“td”也就是單元格的標(biāo)簽，其他選項(xiàng)同上。

8、單擊“確定”按鈕后打開“td的CSS規(guī)則定義”對(duì)話框，先選擇左邊“分類”選項(xiàng)中的“區(qū)塊”項(xiàng)，我們把“文本對(duì)齊”方式設(shè)置為“center（居中）”，讓單元格中的文本都居中對(duì)齊。

9、然后選擇左邊“分類”選項(xiàng)中的“方框”項(xiàng)，默認(rèn)勾選“填充”欄中“全部相同”的復(fù)選框，填入數(shù)值5px，讓單元格內(nèi)的文字與單元格四周的距離均為5像素。

10、最后選擇左邊“分類”選項(xiàng)中的“邊框”項(xiàng)，我們來對(duì)單元格的邊框進(jìn)行設(shè)置。將右邊窗口中“樣式”、“邊框”、“顏色”欄下“全部相同”的復(fù)選框取消勾選，因?yàn)閷?duì)于單元格我們只設(shè)置右邊和下邊的邊框樣式，右和下的“樣式”選擇“solid（實(shí)線）”，“寬度”填入數(shù)值2px（細(xì)邊框表格此處填1像素），顏色可以任意選擇自己喜歡的顏色。單擊“確定”按鈕完成對(duì)于單元格的樣式設(shè)置。