當前位置:愛純凈 > 系統(tǒng)教程 > 怎么設置Dreamweaver表格邊框顏色?

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

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

更新時間:2017-11-01 文章編輯:愛純凈 信息來源:網(wǎng)絡 閱讀次數(shù):
  怎么設置Dreamweaver表格邊框顏色?網(wǎng)頁設計上的表格顏色默認顯示的都是黑色的,雖然看起來很清楚,想要做出彩色邊框卻需要CSS樣式的幫助,如果你不是很了解CSS表格樣式,可以看看下文教程!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  7、再次返回Dreamweaver窗口,單擊右邊“CSS樣式”浮動面板上的“新建CSS樣式規(guī)則”按鈕,彈出“新建CSS規(guī)則”對話框。這次我們在“新建CSS規(guī)則”對話框的“選擇器名稱”的下拉列表中選擇“td”也就是單元格的標簽,其他選項同上。

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

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

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

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

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

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

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

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

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

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

留言與評論(共有 條評論)
驗證碼:

本類最新列表

最熱系統(tǒng)下載