Dreamweaver中用CSS樣式製作漂亮的彩色邊框表格

Dreamweaver可以直觀的製作各種表格,但是用普通的製作表格的方法想設置出漂亮的彩色邊框卻是一件不容易的事情。那麼如何用CSS樣式快速的製作出漂亮的邊框表格呢?下面我們來動手學習一下吧!

工具/原料

Adobe Dreamweaver軟體

方法/步驟

啟動Adobe Dreamweaver軟體,單擊歡迎界面窗口中的新建HTML按鈕,創建一個新的空白網頁文檔。

保存文檔後,將Dreamweaver窗口右上角的工作區布局更改為「經典」布局方式,這樣可以讓「插入」面板顯示出來。

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

表格插入後,在單元格中任意輸入文本。然後單擊Dreamweaver窗口右邊「CSS樣式」浮動面板上的「新建CSS樣式規則」按鈕,彈出「新建CSS規則」對話框。

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

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

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

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

然後選擇左邊「分類」選項中的「方框」項,默認勾選「填充」欄中「全部相同」的複選框,填入數值5px,讓單元格內的文字與單元格四周的距離均為5像素。

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

單擊「確定」按鈕完成製作。保存文檔後預覽最終頁面表格效果,可以看到漂亮的彩色邊框表格。

注意事項

本文中使用的是Adobe Dreamweaver CS6軟體版本,其他版本也能用此方法製作。
文中的CSS樣式窗口是中文版,所以建議提前安裝Dreamweaver CS6的CSS樣式中文補丁。

相關文章

  1. Word2010怎樣使用表格樣式製作漂亮表格

    我們在使用Word2010製作和編輯表格時,可以使用表格樣式快速製作出漂亮的表格,本篇經驗就介紹一下使用樣式和改變默認表格樣式的方法. 工具/原料 Word 2010 一.使用表格樣式 打開Word2 ...
  2. 用PS濾鏡快速製作漂亮的彩色方格背景

    用PS濾鏡快速製作漂亮的彩色方格背景 工具/原料 Adobe Photoshop CS6 方法/步驟 設置前景色為黑色,背景色為白色,新建畫布,執行濾鏡-雲彩 ,如圖 執行濾鏡-像素化-馬賽克,單元格 ...
  3. 使用PS濾鏡快速製作漂亮的彩色方格背景

    到網上去搜漂亮的背景素材是做設計的人員經常需要的,但是有很多喜歡的背景素材都帶著水印,或者清晰度不夠,雖然是背景,但是卻影響整個圖片的設計效果,所以最好的辦法就是我們自己使用PS濾鏡快速製作漂亮的彩色 ...
  4. Dreamweaver視頻教程CSS樣式表的建立關聯到頁面

    使用Dreamweaver對網頁div的布局建立關聯CSS樣式 工具/原料 Dreamweaver軟體 方法/步驟 使用Dreamweaver對網頁樣式表進行建立關聯, 首頁div布局介紹 CSS樣式 ...
  5. photoshop圖層樣式製作漂亮的網頁按鈕

    這是一篇photoshop按鈕做教程,教程中把為各位講解怎麼樣運用photoshop中的圖層樣式功能做出水晶按鈕的透明與三維效果,各位一起來動手做吧. 先看完成圖. 工具/原料 photoshop 步 ...
  6. 多種導航菜單樣式製作漂亮的網站導航菜單

    多種導骯菜單樣式的使用,使得在網站導航製作的過程中,有多種樣式可選 工具/原料 碩思閃客菜單 步驟/方法 碩思閃客菜單擁有豐富多彩的菜單項樣式,給了用戶很多選擇的餘地,以後來著重介紹此款菜單製作工具的 ...
  7. dreamweaver cs5 css樣式表漢化補丁

    dreamweaver cs5 css樣式表漢化補丁 工具/原料 dreamweaver cs5 css樣式表漢化補丁 方法/步驟 下載dreamweaver cs5 css樣式表漢化補丁 如果dre ...
  8. CSS+JS製作漂亮的下拉菜單

    菜單是每個網址都必須要有的東西,菜單的樣式非常多,最近小編製作了一款漂亮的下拉菜單,非常實用.在這裡介紹給大家!小編的下拉菜單是將W3c的菜單內容改變過來的,內容不變,只改變樣式.並且附帶代碼和代碼分 ...
  9. 利用圖層樣式製作漂亮的紫色玻璃心形

    教程分為兩個大的部分:背景和水晶心形.背景先用漸變色填充,然後填充自製圖案,再用濾鏡等做一些變形處理:心形部分製作稍微複雜一點,用到多個圖層,分別控制高光.暗部.細節等,用圖層樣式來完成.最終效果 工 ...
  10. 怎樣用PS圖層樣式製作漂亮的霓虹燈效果文字

    閃爍的霓虹燈很是漂亮,筆者以洋紅色霓虹燈效果為例,跟朋友們分享用PS軟體的圖層樣式製作霓虹燈效果的文字.(數字是我用滑鼠寫的,如果直接打出來數字會漂亮很多.) 工具/原料 PS軟體 方法/步驟 打開P ...
  11. 用PS怎麼製作漂亮的彩色色塊文字

    PS是個比較專業的圖片處理軟體,小編學習PS製作已經很長時間了,但是想要學好PS必須自己不斷的進行實踐,將學習到的知識靈活的應用才可以熟練掌握PS的操作.對於很多剛學習PS的朋友來說,對於一些文字效果 ...
  12. 如何製作漂亮的彩色刺蝟禮物

    小編自己親手製作了幾隻小刺蝟送給朋友,朋友很喜歡,都希望我出個類似的教程給她們看看,她們又可以依樣畫瓢送給別人.一直覺得心靈手巧的人都是內心善良並且有耐心的人.依心而行,隨手而作,只為做出最好的禮物獻 ...
  13. 怎樣利用濾鏡及圖層樣式製作漂亮的斑駁晶格字

    本教程大致分為兩部分來完成.首先是水晶字部分的製作,用圖層樣式就可以做好.然後是文字表面的紋理製作.過程稍微複雜一點,需要用多種濾鏡來製作紋理.做好後疊加到水晶字上即可. 步驟/方法 新建一個1350 ...
  14. Photoshop製作漂亮的彩色發光字動畫

    PS基礎教程! Photoshop製作漂亮的彩色發光字動畫! 本教程介紹帶有放射光束的文字製作方法.製作的時候需要用到多種濾鏡來製作文字的放射光束, 做好後還需要調色等.最後用IR連成動畫即可. 工具 ...
  15. Photoshop製作漂亮的彩色紐扣

    其實製作扣子不麻煩,製作起來掌握住方法就很快,得到的效果也非常好.在製作扣子前要在自己腦海中給出一個大概,是水晶的還是玻璃的或者是塑料的等待.個人感覺如果製作時再給扣子的材料添加些紋理,那樣做出的效果 ...
  16. Photoshop製作漂亮的彩色水晶字

    Photoshop製作漂亮的彩色水晶字 工具/原料 photoshop軟體 方法/步驟 建一個畫布800x800,然後用漸變工具拉一個白色到黑色的線性漸變填充 複製一層,執行:編輯 > 變換 & ...
  17. ps製作漂亮的彩色泡泡

    ps製作漂亮的氣泡 工具/原料 pscs6 方法/步驟 新建一個1024 * 1024像素的文檔,然後把背景填充黑色, 執行:濾鏡 > 渲染 > 鏡頭光暈,把光暈移到靠中間位置 按Ctrl ...
  18. 怎樣用Photoshop濾鏡製作漂亮的彩色漩渦

    本教程效果非常的綺麗,夢幻中帶點抽象的味道.然而這種效果僅用PS自帶的濾鏡即可製作出來.方法也非常簡單,用漸變拉出簡單的漸變色,然後用扭曲濾鏡裡面的幾款濾鏡稍作變形處理,效果就出來了. 最終效果: 步 ...
  19. ps利用濾鏡及畫筆製作漂亮的彩色光環

    ps利用濾鏡及畫筆製作漂亮的彩色光環 方法/步驟 啟動pscs3軟體,執行文件--新建命令,創建一個像素為800*800的像素的文件,並將背景填充為黑色,效果如下圖 然後對背景層執行--濾鏡--渲染- ...
  20. 如何製作漂亮的彩色鹽

    我們經常可以看到一些禮品店中賣著裝有彩色鹽的透明玻璃瓶.那麼,那個彩色鹽是怎麼製作的呢?今天小編將教給大家一種特別簡單的製作彩色鹽的方法.以後就不怕沒有東西來裝飾自己的玻璃瓶了. 工具/原料 鹽,水彩 ...