您的位置:首頁>正文

怎麼設置Dreamweaver表格邊框顏色?

怎麼設置Dreamweaver表格邊框顏色?網頁設計上的表格顏色預設顯示的都是黑色的, 雖然看起來很清楚, 想要做出彩色邊框卻需要CSS樣式的説明, 如果你不是很瞭解CSS表格樣式, 可以看看下文教程!

怎麼設置Dreamweaver表格邊框顏色?

1、啟動Adobe Dreamweaver軟體, 按一下歡迎介面視窗中的新建HTML按鈕, 創建一個新的空白網頁文檔。

2、保存文檔後, 將Dreamweaver視窗右上角的工作區佈局更改為“經典”佈局方式, 這樣可以讓“插入”面板顯示出來。

3、按一下“常用”面板當中的“插入表格”按鈕, 彈出“表格”對話方塊, 設置插入的表格為3行3列, 寬度600圖元(大家可以根據自己的需要設置行列以及寬度值), 邊框粗細、儲存格邊距和間距均設置為0, 我們等會用CSS樣式來控制它們。

4、表格插入後, 在儲存格中任意輸入文本。

然後按一下Dreamweaver視窗右邊“CSS樣式”浮動面板上的“新建CSS樣式規則”按鈕, 彈出“新建CSS規則”對話方塊。

5、在“新建CSS規則”對話方塊的“選擇器類型”下拉清單中選擇“標籤(重新定義HTML元素)”選項, “選擇器名稱”的下拉清單中選擇“table”也就是表格的標籤, “規則定義”選項預設為“僅限該文檔”(如果需要對其他文檔中的表格也使用此樣式可更改此選項)。

6、按一下“確定”按鈕後打開“table的CSS規則定義”對話方塊, 選擇左邊“分類”選項中的“邊框”項, 我們來對表格的外邊框進行設置。 將右邊視窗中“樣式”、“邊框”、“顏色”欄下“全部相同”的核取方塊取消勾選,

因為對於表格我們只設置上邊和左邊的邊框樣式, 上和左的“樣式”選擇“solid(實線)”, “寬度”填入數值2px(細邊框表格此處填1圖元), 顏色可以任意選擇自己喜歡的顏色。 按一下“確定”按鈕完成對於表格的樣式設置。

7、再次返回Dreamweaver窗口,按一下右邊“CSS樣式”浮動面板上的“新建CSS樣式規則”按鈕,彈出“新建CSS規則”對話方塊。這次我們在“新建CSS規則”對話方塊的“選擇器名稱”的下拉清單中選擇“td”也就是儲存格的標籤,其他選項同上。

8、按一下“確定”按鈕後打開“td的CSS規則定義”對話方塊,先選擇左邊“分類”選項中的“區塊”項,我們把“文本對齊”方式設置為“center(居中)”,讓儲存格中的文本都居中對齊。

9、然後選擇左邊“分類”選項中的“方框”項,默認勾選“填充”欄中“全部相同”的核取方塊,填入數值5px,讓儲存格內的文字與儲存格四周的距離均為5圖元。

10、最後選擇左邊“分類”選項中的“邊框”項,我們來對儲存格的邊框進行設置。將右邊視窗中“樣式”、“邊框”、“顏色”欄下“全部相同”的核取方塊取消勾選,因為對於儲存格我們只設置右邊和下邊的邊框樣式,右和下的“樣式”選擇“solid(實線)”,“寬度”填入數值2px(細邊框表格此處填1圖元),顏色可以任意選擇自己喜歡的顏色。按一下“確定”按鈕完成對於儲存格的樣式設置。

11、按一下“確定”按鈕完成製作。保存文檔後預覽最終頁面表格效果,可以看到漂亮的彩色邊框表格。

以上步驟便是關於怎麼設置Dreamweaver表格邊框顏色的方法,因為使用的Dreamweaver是中文版,所以CSS也是中文版的,使用正版的用戶,可以下載漢化補丁來處理。

7、再次返回Dreamweaver窗口,按一下右邊“CSS樣式”浮動面板上的“新建CSS樣式規則”按鈕,彈出“新建CSS規則”對話方塊。這次我們在“新建CSS規則”對話方塊的“選擇器名稱”的下拉清單中選擇“td”也就是儲存格的標籤,其他選項同上。

8、按一下“確定”按鈕後打開“td的CSS規則定義”對話方塊,先選擇左邊“分類”選項中的“區塊”項,我們把“文本對齊”方式設置為“center(居中)”,讓儲存格中的文本都居中對齊。

9、然後選擇左邊“分類”選項中的“方框”項,默認勾選“填充”欄中“全部相同”的核取方塊,填入數值5px,讓儲存格內的文字與儲存格四周的距離均為5圖元。

10、最後選擇左邊“分類”選項中的“邊框”項,我們來對儲存格的邊框進行設置。將右邊視窗中“樣式”、“邊框”、“顏色”欄下“全部相同”的核取方塊取消勾選,因為對於儲存格我們只設置右邊和下邊的邊框樣式,右和下的“樣式”選擇“solid(實線)”,“寬度”填入數值2px(細邊框表格此處填1圖元),顏色可以任意選擇自己喜歡的顏色。按一下“確定”按鈕完成對於儲存格的樣式設置。

11、按一下“確定”按鈕完成製作。保存文檔後預覽最終頁面表格效果,可以看到漂亮的彩色邊框表格。

以上步驟便是關於怎麼設置Dreamweaver表格邊框顏色的方法,因為使用的Dreamweaver是中文版,所以CSS也是中文版的,使用正版的用戶,可以下載漢化補丁來處理。

同類文章
Next Article
喜欢就按个赞吧!!!
点击关闭提示