DW網頁設計商業應用學習流程_RWD響應式網頁設計模版套修階段學習方法

普通table表格樣式及代碼大全(全)(一)

資料來源

單實線邊框表格

單實線邊框表格

虛線邊框表格

虛線邊框表格

點線邊框表格

點線邊框表格

雙實線邊框表格

雙實線邊框表格

槽線邊框表格

槽線邊框表格

脊線邊框表格

脊線邊框表格

內凹效果邊框

內凹效果邊框

外凸效果邊框

外凸效果邊框

內虛外實邊框

內虛外實邊框

外虛內實邊框

外虛內實邊框

無邊框表格

無邊框表格

隱藏下邊框

隱藏下邊框

隱藏上邊框

隱藏上邊框

隱藏左邊框

隱藏左邊框

隱藏右邊框

隱藏右邊框

隱藏左右邊框

隱藏左右邊框

隱藏上下邊框

隱藏上下邊框

只顯示上邊框

只顯示上邊框

只顯示下邊框

只顯示下邊框

只顯示左邊框

只顯示左邊框

只顯示右邊框

只顯示右邊框

不顯示任何邊框

不顯示任何邊框

單行單列

單行單列

一行多列

一行多列

一行多列

一行多列

一行多列

一行多列

一列多行

一列多行

一列多行

一列多行

一列多行

一列多行

多行多列	多行多列	多行多列
多行多列	多行多列	多行多列
多行多列	多行多列	多行多列

多行多列	多行多列	多行多列
多行多列	多行多列	多行多列
多行多列	多行多列	多行多列

合并列的表格
合并列的表格	合并列的表格	合并列的表格
合并列的表格	合并列的表格	合并列的表格

合并列的表格
合并列的表格	合并列的表格	合并列的表格
合并列的表格	合并列的表格	合并列的表格

合并行的表格	合并行的表格	合并行的表格
	合并行的表格	合并行的表格
	合并行的表格	合并行的表格

合并行的表格	合并行的表格	合并行的表格
	合并行的表格	合并行的表格
	合并行的表格	合并行的表格

復雜表格	復雜表格			復雜表格
復雜表格	復雜表格	復雜表格	復雜表格	復雜表格
		復雜表格	復雜表格	復雜表格
		復雜表格	復雜表格	復雜表格
	復雜表格	復雜表格

復雜表格	復雜表格			復雜表格
復雜表格	復雜表格	復雜表格	復雜表格	復雜表格
		復雜表格	復雜表格	復雜表格
		復雜表格	復雜表格	復雜表格
	復雜表格	復雜表格

隱藏	橫向	分隔線
隱藏	橫向	分隔線
隱藏	橫向	分隔線

隱藏	橫向	分隔線
隱藏	橫向	分隔線
隱藏	橫向	分隔線

隱藏	縱向	分隔線
隱藏	縱向	分隔線
隱藏	縱向	分隔線

隱藏	縱向	分隔線
隱藏	縱向	分隔線
隱藏	縱向	分隔線

隱藏	縱橫	分隔線
隱藏	縱橫	分隔線
隱藏	縱橫	分隔線

隱藏	縱橫	分隔線
隱藏	縱橫	分隔線
隱藏	縱橫	分隔線

標題

文本內容——標題位于表體外的表格

標題

文本內容——標題位于表體外的表格

標題

文本內容——標題位于表體內的表格

標題

文本內容——標題位于表體內的表格

標題

文本內容——標題位于邊框上的表格

標題

文本內容——標題位于邊框上的表格

 

表中表 文本內容——表中表效果

表中表 文本內容——表中表效果

利用Div標籤與CSS建立基本單欄網頁版型

資料來源
利用Div標籤與CSS建立基本網頁版型，以全國比較文學會議網站為例 

1. 一、Div標籤與CSS

在早期瀏覽器以IE為主的網頁設計時代，大多以表格(TABLE)或頁框(FRAME)，來製作網頁主要的定位與架構，但是隨著上網習慣的改變，網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等，目前網頁設計的架構，多半以DIV搭配CSS為設計主流，以Div標籤來建立網頁區塊，區分各個主要頁面做為主要的排版架構，搭配CSS語法來美化網頁，以往的網頁美化設定大多直接寫在HTML網頁本身，現在則分開以HTML為架構設定，CSS為風格設定，一個建築網頁架構，一個塑造網頁美感。 

2. 二、單欄版型的範例

進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。 
這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。 

第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/ 

imXD5 以HTML5為架構的WordPress佈景主題

資料來源

又到了換佈景的季節了，這回突然心血來潮想要挑戰一下HTML5的架構。雖說這個架構要到2022年才會完全落實，不過現在開始動其實也不嫌早，畢竟這是未來的趨勢，使用語意標籤去架構整個網站，未來維護也會比較方便，新標籤也多了一些額外功能，對於搜尋引擎來講，似乎有一些小小的加分(?)，在這樣的迷思下，不小心就把網站給改好了。

像是上一版的imXD只有一張RSS圖感覺非常單調，所以這次加了許多的小圖案(雖然也不是很明顯..)來點綴一下網站。不過主要的變化還是對整體的網站架構有了新的變動，也把許多功能function化，讓佈景主題程式碼乾淨一點，只是functions.php倒是增肥了不少，至於CSS也用了一些CSS3的語法來達到一些小小的特效。

本來這篇文章是想要先打完之後，再跟著佈景一同現身，不過因為想說都調整這麼久了，總有一股衝動想要直接給他啟用，所以在昨天晚上半夜12點多，趁著網站人數不多的時候，默默地上架了。一上架就發現許多小問題，因為本機電腦環境和實際運作環境的東西有差，所以修正這一些小問題又花了不少的時間。會出問題的主要是在側邊欄模組，因為我本機電腦環境和網站上落差蠻大的Orz。

版面寬度990

就從版面框框先講起，如果大家有注意到，這次的版面「好像」比較寬一點？沒錯！因為版面的寬度從原本的960調整到990，想說現在的螢幕都逐漸走向寬螢幕1024×768的解析度使用者應該越來越少，所以就偷偷調整了。雖然我每次都跟人家講說網頁寬度請保持在960px~980px之間，不過考慮到一些狀況，所以這次就真的給他改下去了，因為有好幾次都想說將舊版改寬，但中間都遇到很多突發狀況。

這回的版面除了調寬之外，側邊欄也縮小，上一版的imXD則是將側邊欄放寬到快300px，這回側邊欄僅有250px而已，這樣改主要是想讓內容寬度可以更寬一些，因為內容區域是網站的一個主體，如果小小窄窄的，閱讀起來不太舒服、也會感受到一些小小的壓力。以前曾經換成三欄式，結果一個月就下架了。後來接手的就是目前新佈景imXD5架構的雛型了…(就是傳說中的inove佈景，相信大家都不陌生。)

〈▲以HTML5+CSS3為架構：imXD5。〉

HTML5的語意架構

前一版不是叫做imXD，這版怎麼會突然跳成imXD5呢？因為這次的版面使用HTML5的架構去寫的主題，如同前面提到，HTML5是目前最新的網頁架構，強調「語意」標籤，用這個架構主要是為了搜尋引擎最優化，因為HTML5語意的關係，對於搜尋引擎來講等於說是直接告訴他網頁哪個地方權重較高，直接把重點給搜尋引擎，另外網頁程式碼也會比HTML4更好解讀。目前WordPress的預設佈景twentyeleven就是使用HTML5的架構，你發現了嗎？

〈▲HTML5特色：語意標籤。〉

內文側邊社群分享按鈕

目前還算是社群服務還是很夯的時代，所以不得不把社群分享按鈕弄得明顯一點。如果螢幕寬度夠寬的畫，相信會在內文頁面的左方看到一排分享按鈕。有Google+1、Facebook以及Twitter的分享按鈕。這樣的做法是上次在硬是要學的網站上看到，感覺不錯就學回來了(國外網站也蠻多這樣做的)。

〈▲看到這邊，別忘了看看左邊，順手按個讚！〉

網頁上方社群分享按鈕

以往，香腸炒魷魚的網站右上角都空空的(因為沒有人買廣告阿~笑)，本來想要把搜尋放到那邊去，但總覺得怪怪的，剛好想起免費資源網路社群網站右上角是放社群分享按鈕，再加Google+1說他們會影響到一些搜尋權重(個人化搜尋)，如法炮製的把按鈕搬到右上角了，只是放三個按鈕還是覺得很少，又加上這一陣子的RSS訂閱數都沒有衝高，所以又擺了個RSS圖示上去，希望以起大家的注意。

〈▲如果你還沒按讚、推、+1的人，別忘了幫我們按一下唷！〉

側邊社群追蹤數字

放一個Facebook粉絲框剛剛好，如果再放上一個Plurk框、Google+框，感覺整排側邊欄就太長了，而且越下面大家越容易沒看到，又加上自己想要看到統計的數字，所以找了一些資料就把功能實做出來了，至於怎麼做，相信大家Google一下國外網站，可以找到不少資料(不過有些寫法比較舊，要自己改寫一下)。在處理的過程中，唯獨噗浪不知道怎麼弄API，所以就直接擺上文字了Orz…。

〈▲歡迎訂閱、追蹤我們！〉

網頁自適應性CSS3 Media Queries

最近mrmu也將自己網站改成HTML5的架構，其中布景也使用了一些CSS3的效果，如果大家有注意到他的網站，最明顯的就是使用CSS3網頁自適應性(CSS3 Media Queries)，因此香腸就把這個做法移到內文區的分享按鈕，解決在瀏覽器寬度太窄的況下，還是會有按鈕顯示。或許大家有個小疑問，為什麼要這麼麻煩？因為內文區擺太脫按鈕改覺很雜，所以才用這樣的方法來處理。(但IE8以下，就全露餡了)

〈▲網頁自適應性可，以讓使用者更好的體驗。〉

隨機分類推薦閱讀

這功能應該是這次花蠻多時間在處理的部分，因為這邊的作法是隨機選取五個分類然後再根據這五個分類去隨機選取五篇文章，並顯示標題、圖片與超連結。並且搭配JQuery的Tab來達成效果，簡單說應該是仿Yahoo首頁新聞的作法。因為我同學Mavis想要在文章內使用這功能，所以我就先拿自己網站開刀測試看看了，如果OK到時候再幫他裝上，她主要是Photoshop教學網站，使用這種方式推薦閱讀，會更有看頭。

〈▲圖像的推薦閱讀，可以更吸引訪客。〉

網站導航麵包屑(Breadcrumb)

以前曾經在Sofreev1.1和LowYA內加入過這樣的導航功能，但後來我也不知道為什麼拿掉了？或許是因為感覺放在那邊跟標題卡在一起感覺很怪吧？這回心血來潮又將按鈕放回去了，並且將顏色調淡、標題有多一些間距，感覺不會搶走標題的風采。補充一下，這個功能正確的名稱是麵包屑(Breadcrumb)，對於搜尋引擎或是訪客，都是一個很好的東西，可以清楚地告知訪客目前位置。

〈▲看到哪邊，都不會迷失方向。〉

HTML5留言表單

既然網頁整體架構使用HTML5去構版，那麼就不得不用一下HTML5的標籤了，雖然WordPress本身有提醒機制，不過使用HTML5的方式去做，感覺可以潮一點。目前暫時找不到針對其他非Google Chrome的瀏覽器，美化這個提示框Orz…

〈▲減少系統驗證，省去資源耗用。〉

新版404錯誤頁面

一個網站對於404頁面的設計其實是最容易忽略的，大多數的人可能認為不重要，但是當訪客近來你的網站，如果找不到想要的資訊就會跳出，那麼我們該如何好號把握這個訪客呢？倘若訪客找不到相關資訊，肯定是關掉瀏覽器走人，這時候我們可以自訂一下404頁面，留下一些可能會吸引訪客的資訊。這回在404頁面上的設計，跳脫了之前的框框，改用虛線底線來牌版，並且顯示各分類的文章，另外下方也顯示一些文章彙整，香腸自己也可以檢視一下每個月寫了多少文章(笑)。

〈▲留住訪客最有效的方式。〉

佈景自訂選項

最後，來看一下佈景後台設置。其實最近這幾個面板，都有加入佈景後台的設計，因為這樣的功能真的很方便，不需要改程式，就可以直接將功能加到主題中了，而且如果把佈景給朋友，他們也可以輕鬆加入自己想要的東西。後台的欄位主要就是整合META優化、廣告欄位以及Facebook留言整合。比起上一版的imXD少掉許多東西，因為目前佈景沒有要釋出，所以功能就不必做太多了。(因為上一版imXD有給幾個同主機的朋友使用:卡咪龜、殺氣、小俊，所以功能較多XD)

〈▲第一次秀後台(blush)。〉

function 功能模組化

這次大多數的功能都盡量做成模組，對於程式設計師來講，一開始會比較難做，因為要考慮到傳值的問題，或者是global變數的使用，但是功能一但做到後，未來如果要改佈景，就使用function即可輕鬆轉移。如果要自訂function的話，就要善用佈景主題的functions.php，即可達到自己所需的效果。

〈▲functions.php檔案變大了〉

IE的一些小問題&總結

這次調整佈景主題只針對IE9、IE8、IE7、Firefox7、Chrome14做校正，其他瀏覽器我就沒辦法支援了。針對目前這些瀏覽器做校正，絕對是可以涵蓋90%以上的使用者，剩下的使用者就請你們轉換一下了。至於蘋果的Safari我也沒去校正，因為Chrome和他同核心，所以網頁樣式不會相差太大的。那IE6呢？我已經把他丟到路邊的垃圾桶了。這回來開IETester都懶…(因為IE9的相容模式可以向下相容到IE7)

IE7其實也不太想調整了，因為她是跟著失敗的作業系統一同現身的，不過還是有很多人使用，所以只好默默地支援了。在改版的過程中遇到了關於IE7的問題，常見的是Google +1按鈕在IE7無法出現，因此版面配置上為了避免排版不好看，Google+1按鈕一定要放在最前面或最後面，不然放中間到時候會變成一個空洞。在IE8的狀況下，Google連結組廣告會被遮蓋(這應該是Google本身的問題)。

整體來講，很多東西都是由前一版imXD來改的，因為目前香腸自己對於這樣的版面算是很滿意，那麼另外一位站長魷魚絲呢？他好像一年沒發文了？(聽說他最近很忙，香腸也很少看見他上線)。既然香腸說OK，魷魚絲應該也OK啦(笑)。目前可能還有一些小Bug，如果大家有發現，別忘了回報一下唷！

這個新版，希望大家會喜歡 

用CSS+DIV畫表格(table)進行網頁排版

資料來源

以往傳統網頁設計都喜歡使用table(表格)來建構網頁，這樣的建構方式對於網頁整體排版來講並沒有太大的問題，可以完美相容於各個瀏覽器。但是時代在進步，還在用table排網頁感覺就有點過時了。會這樣說並不是想引起table和div之戰，而是想要說對於網頁的維護，table表格是比較麻煩一點的，再加上程式碼不太乾淨、過多的巢狀，對於搜尋引擎來講，也比較難發現其中重要的部分。

那如果用CSS+DIV進行網頁排版，就會比較好嗎？基本上是可以這樣講，但是大家又會遇到網頁校正的問題，一口氣要調整四、五種版本的瀏覽器，這樣很可能讓網頁設計者又跑回去用table表格排版。但其實在CSS中，已經有語法是支援表格的了，並不是對表格進行樣簡單的樣式定義，而是透過CSS的表格屬性，完美畫出表格，排除瀏覽器相容的問題，讓傳統的table排版的設計師，也可以快速轉換。

在香腸之前的imXD佈景版本中，就已經將分類文章改採清單的排版方式，目的主要是不讓搜尋引擎收錄過多的重複內容，另一方面也不希望大家找文章不好找，所以改用清單的方式。本來想說使用table來產生清單排版，免除瀏覽器校正問題，但礙於搜尋引擎對表格式的網頁不好解析其內容，所以還是使用DIV排版，並默默的校正一堆瀏覽器。

但是這回imXD5因為網頁HTML5化，因此所有的CSS與DIV幾乎是重構的狀態，所以在本來的分類文章清單中，樣式也順便進行重構，可是問題來了？「重構=花時間」，因為要用CSS+DIV模擬成table的樣式，如果一直使用float來排版，校正上其實很麻煩，當然在瀏覽器的校正上，更是頭大。後來找了一下發現有有不錯的好東西，在diplay的屬性上，有table相關的屬性值可以使用！

傳統的table構版的問題

一般來講，table打好語法就可以呈現效果了，而且語法很簡單，就單純的table、tr、td，這三個語法就可以畫出表格，在各個瀏覽器下也都可以正常的顯示。如果覺得排版不漂亮，就直接在語法內加上width、color等等的屬性值，效果很容易就達到了，可是這樣會讓程式碼雜亂。對於搜尋引擎來講，他們抓網站內容通常不會一次抓完，會先抓到一定的網頁大小，之後再來，如果你把樣式調整的程式碼都放進去，很快的，搜尋引擎可能光收錄你的表格樣式，還沒抓到重點就已經達到抓取額度了，重要的資料沒被收錄，倒是收錄了一些不重要的樣式設定。

使用CSS構版的優點

既然表格不推薦，那我們可以考慮改用CSS+DIV來構版。CSS+DIV構版的好處就是將網頁樣式設定和主要內容分離，透過style.css檔案來控制樣式，而且可以很方便的改，只要網站架構不變，可以隨你開心設計好幾個版本的樣式表，哪天心情好，換一下style.css的檔案，網頁就整個大不同。這也就是為什麼那一些BSP部落格(例如無名、痞客邦)，會有這麼多不同的套版，他們網頁架構都相同，就只是CSS檔案的不同，透過CSS的變換，可以營造出不一樣的效果。

開始進行CSS+DIV畫表格

為了讓大家方便在DIV和table之間的轉換，所以在CSS的命名上主要就是使用「css_」作為開頭，方便做一個對照。首先，以前面的範例table範例語法：

   

        
        
        
   

   

        
        
        
   
標題
回應
日期
如何停用WordPress內建搜尋功能？
5
2011-10-30

接著，我們將以上語法改成CSS+DIV的切板模式，如同前面所說，為了方便對照，所以CSS的定名開頭採用「css_」。

      

          

標題
        

回應
        

日期
    
    

          

如何停用WordPress內建搜尋功能？
        

5
        

2011-10-30
    

接下來，我們套上CSS的語法，效果就會出現了！

#css_table {
      display:table;
  }
.css_tr {
      display: table-row;
  }
.css_td {
      display: table-cell;
  }

CSS語法與table比對

事實上，從上面的語法來看，要用table改成css的方式並不困難，所有的樣式定義需要全部透過CSS的id或是class全部獨立出來，其他部分寫起來是差不多的。上面的語法，並沒有對CSS畫出的表個做顏色、邊線、寬度作定義，可能看起來醜醜的，這部分就請大家自己摸索了。這篇文章主要是要告訴大家，利用CSS也是可以達到table的效果。下面列出一些display對應table的屬性：

• inline-table：顯示成前後沒有換行的表格
• table：對應標籤，以表格方式顯示。
• table-row：對應 標籤。
• table-row-group：對應標籤。
• table-cell：對應標籤。
• table-caption：對應標籤。
• table-column：對應標籤
• table-column-group：對應標籤。
• table-header-group：對應標籤。
• table-footer-group：對應標籤。

IE7以下不相容

沒錯，這樣的CSS屬性很巧的，只有在IE8以上才有支援，如果是IE7以下的瀏覽器，必須做CSS的相容性校正了，這是小可惜的地方。但目前瀏覽器的使用量，IE7的比例也逐漸下降，因為大多XP使用者如果要升級瀏覽器，都會直接升級IE8。如果要校正，那就要善用幾個屬性：display:block、float:left，還有padding和margin進行校正了。

Templated 免費下載 CSS 和 HTML5 網站模板、佈景主題設計

Templated 免費下載 CSS 和 HTML5 網站模板、佈景主題設計

jQuery之家-自由分享jQuery、html5和css3套件

找到這個網站
覺得還不錯
推薦給各位

http://www.htmleaf.com/