瀏覽量:100次
怎么設(shè)置Dreamweaver表格邊框顏色?網(wǎng)頁(yè)設(shè)計(jì)上的表格顏色默認(rèn)顯示的都是黑色的,雖然看起來(lái)很清楚,想要做出彩色邊框卻需要CSS樣式的幫助,如果你不是很了解CSS表格樣式,可以看看下文教程!
怎么設(shè)置Dreamweaver表格邊框顏色?
1、啟動(dòng)Adobe Dreamweaver軟件,單擊歡迎界面窗口中的新建HTML按鈕,創(chuàng)建一個(gè)新的空白網(wǎng)頁(yè)文檔。
2、保存文檔后,將Dreamweaver窗口右上角的工作區(qū)布局更改為"經(jīng)典"布局方式,這樣可以讓"插入"面板顯示出來(lái)。
3、單擊"常用"面板當(dāng)中的"插入表格"按鈕,彈出"表格"對(duì)話(huà)框,設(shè)置插入的表格為3行3列,寬度600像素(大家可以根據(jù)自己的需要設(shè)置行列以及寬度值),邊框粗細(xì)、單元格邊距和間距均設(shè)置為0,我們等會(huì)用CSS樣式來(lái)控制它們。
4、表格插入后,在單元格中任意輸入文本。然后單擊Dreamweaver窗口右邊"CSS樣式"浮動(dòng)面板上的"新建CSS樣式規(guī)則"按鈕,彈出"新建CSS規(guī)則"對(duì)話(huà)框。
5、在"新建CSS規(guī)則"對(duì)話(huà)框的"選擇器類(lèi)型"下拉列表中選擇"標(biāo)簽(重新定義HTML元素)"選項(xiàng),"選擇器名稱(chēng)"的下拉列表中選擇"table"也就是表格的標(biāo)簽,"規(guī)則定義"選項(xiàng)默認(rèn)為"僅限該文檔"(如果需要對(duì)其他文檔中的表格也使用此樣式可更改此選項(xiàng))。
6、單擊"確定"按鈕后打開(kāi)"table的CSS規(guī)則定義"對(duì)話(huà)框,選擇左邊"分類(lèi)"選項(xiàng)中的"邊框"項(xiàng),我們來(lái)對(duì)表格的外邊框進(jìn)行設(shè)置。將右邊窗口中"樣式"、"邊框"、"顏色"欄下"全部相同"的復(fù)選框取消勾選,因?yàn)閷?duì)于表格我們只設(shè)置上邊和左邊的邊框樣式,上和左的"樣式"選擇"solid(實(shí)線(xiàn))","寬度"填入數(shù)值2px(細(xì)邊框表格此處填1像素),顏色可以任意選擇自己喜歡的顏色。單擊"確定"按鈕完成對(duì)于表格的樣式設(shè)置。
7、再次返回Dreamweaver窗口,單擊右邊"CSS樣式"浮動(dòng)面板上的"新建CSS樣式規(guī)則"按鈕,彈出"新建CSS規(guī)則"對(duì)話(huà)框。這次我們?cè)?新建CSS規(guī)則"對(duì)話(huà)框的"選擇器名稱(chēng)"的下拉列表中選擇"td"也就是單元格的標(biāo)簽,其他選項(xiàng)同上。
8、單擊"確定"按鈕后打開(kāi)"td的CSS規(guī)則定義"對(duì)話(huà)框,先選擇左邊"分類(lèi)"選項(xiàng)中的"區(qū)塊"項(xiàng),我們把"文本對(duì)齊"方式設(shè)置為"center(居中)",讓單元格中的文本都居中對(duì)齊。
9、然后選擇左邊"分類(lèi)"選項(xiàng)中的"方框"項(xiàng),默認(rèn)勾選"填充"欄中"全部相同"的復(fù)選框,填入數(shù)值5px,讓單元格內(nèi)的文字與單元格四周的距離均為5像素。
10、最后選擇左邊"分類(lèi)"選項(xiàng)中的"邊框"項(xiàng),我們來(lái)對(duì)單元格的邊框進(jìn)行設(shè)置。將右邊窗口中"樣式"、"邊框"、"顏色"欄下"全部相同"的復(fù)選框取消勾選,因?yàn)閷?duì)于單元格我們只設(shè)置右邊和下邊的邊框樣式,右和下的"樣式"選擇"solid(實(shí)線(xiàn))","寬度"填入數(shù)值2px(細(xì)邊框表格此處填1像素),顏色可以任意選擇自己喜歡的顏色。單擊"確定"按鈕完成對(duì)于單元格的樣式設(shè)置。
11、單擊"確定"按鈕完成制作。保存文檔后預(yù)覽最終頁(yè)面表格效果,可以看到漂亮的彩色邊框表格。
以上步驟便是關(guān)于怎么設(shè)置Dreamweaver表格邊框顏色的方法,因?yàn)槭褂玫腄reamweaver是中文版,所以CSS也是中文版的,使用正版的用戶(hù),可以下載漢化補(bǔ)丁來(lái)處理。
[聲明]本網(wǎng)轉(zhuǎn)載網(wǎng)絡(luò)媒體稿件是為了傳播更多的信息,此類(lèi)稿件不代表本網(wǎng)觀(guān)點(diǎn),本網(wǎng)不承擔(dān)此類(lèi)稿件侵權(quán)行為的連帶責(zé)任。故此,如果您發(fā)現(xiàn)本網(wǎng)站的內(nèi)容侵犯了您的版權(quán),請(qǐng)您的相關(guān)內(nèi)容發(fā)至此郵箱【779898168@qq.com】,我們?cè)诖_認(rèn)后,會(huì)立即刪除,保證您的版權(quán)。
官網(wǎng)優(yōu)化
整站優(yōu)化
渠道代理
400-655-5776