U Web 網站靜態網頁編輯與基礎CSS應用(上)

文：Polly L .

U Web除了內容上稿區，更提供靜態網頁編輯區，使用者可以選擇純文字、word等模式貼上內容，如果我們想要有樣式上的變化，必須進入HTML做原始碼編輯！
我們要介紹基礎的HTML編輯方式與CSS應用，主要分為【表格】與【影像】兩種，今天先介紹表格的部分。
【TABLE編輯語法】：
我們先來試試看一般不套用樣式的寫法

<table  border="1">
<tr>
<th >About　uTrust </th>
<th>introduce</th>
</tr>
<tr>
<td>服務項目Service </td>
<td>中小企業U Web網站快捷建置服務/ U Book電子書快捷建置服務</td>
</tr>
<tr>
<td>最新消息News </td>
<td>免費企業mail 好康服務！(限30名企業) </td>
</tr>
<tr>
<td>成功實績Performance </td>
<td>義大遊樂世界官方網站  / 大小創意/ 日月光國際家飾館</td>
</tr>
</table>

呈現效果如下：(圖A1)

 

在部分頁面中，U Web會先預設寫好CSS的樣式設定，如果我們想要套用CSS樣式，只需要在第一行寫入：
<table  class="TableSet"  border="1">

呈現效果如下：(圖A2)

這樣一個基本的兩欄四列表格就完成囉! 兩種樣式上的差別是不是很大呢？
不過如果今天我們沒有CSS樣式可以套用，遇到表格的部分，又要如何編輯才會讓樣式有不同的變化呢？
表格寬度：width=" " 高度：height=" "；
表格背景顏色設定：bgcolor=" " ；
表格框線設定：bordercolor=" "；
接下來我們就把以上這些表格的設定套入原始碼的部分吧！
讓我們比對一下套入CSS樣式與HTML編輯的效果：
呈現效果如下：(圖A3)

比較之下效果相似度很高，只要會善用CSS就可輕鬆完成精美的圖表喔！