[教學]讓網頁使用各種特殊文字區塊__(2) 實作範例「公告+修訂區塊」(CSS 技巧)

(Pic from: psdgraphics.com)寫完「第一篇」後，覺得內容稍微硬了一些，如有個實作的例子相佐會比較容易吸收，奈何文長已經無法再塞入舉例內容，因此就把實例留到本篇了。

一般文章常見的特殊文字區塊有公告區、修訂(增補、註釋)區、參考資料區等等，而本站的 "參考資料區塊"(可參考「這篇文章」的文末)、"系列文區塊"(可參考「這篇文章」的文末)，其作法與"程式碼區塊"雷同，可參考「第一篇」的 CSS 設定以及那塊程式碼區域的樣式即可；以下要詳述的是本站 "公告區塊" 與 "修訂區塊" 的作法。


一、公告區塊實作

1. 裝飾圖案：公告通常使用醒目的紅色為基色，我選擇淡紅色打底，右上角使用紅色緞帶裝飾。在「素材網頁」找到適合顏色後，用圖片編輯軟體調整角度、裁切、加上文字，效果如下圖：



2. CSS 設定：


以上的設定跟「第一篇」 →「一、標示特定文字區塊的原理」不同之處特別說明一下：

C：這一項第一篇的後面有提，一定要加。

D：讓公告區塊置中會比本文區來得顯眼。

E：寬度不設的話會自動使用 100% 的寬度，跟本文區的寬度一樣；讓公告區塊稍微小一點感覺比較顯眼。

H～I：這兩行可增加公告區塊的美觀。

J：第一篇距離左邊界的 padding 設為 21，是因為裝飾圖案在左邊，所以距離左邊界必須設遠一點；本篇的裝飾圖案在右上角，padding 值就可以正常設置。

L：這一行主要的差別為紅字部分，為了把裝飾圖案放右上角，參數必須改為 right top，且不需重複圖案，所以參數設為 no-repeat。

其他不一樣的地方為捨棄 max-height 這一項，不限制公告區塊的高度。


3. 安裝：

接下來很簡單，依照第一篇的步驟依樣畫葫蘆即可。

(1) 假設公告區塊要呼叫的 HTML 標籤命名為 <im> (取 important 前兩個字母)，也可自取容易記的字母。

(2) 到 Blogger 後台打開範本文件 → 修改 HTML。接著把下面的程式碼插入 </head> 的前面：

<style type="text/css">
im {
display: block;
overflow: auto;
word-wrap: break-word;
margin: auto;
width: 80%;
color: #990000;
font-size: 14pt;
border: 1px dotted lavender;
box-shadow: 2px 2px 2px #d6d6d6;
padding: 5px 10px 5px 10px;
line-height: 1.2em;
background: #FFFBFA url(http://4.bp.blogspot.com/-eh0DVjUHMdY/UDCexvH_ECI/AAAAAAAADyE/y01rDd93CHA/s1600/important.png) right top no-repeat;
}
</style>

<script type="text/javascript">
document.createElement("im")
</script>
存檔後即可隨時呼叫公告區塊的功能。


4. 使用：

呼叫的方法為在文章內將公告內容放在 <im> 與 </im> 之間，例如以下為使用 Blogger 文章編輯器顯示的 html 內容：

<im><b><span style="color: #999999;">2012.10.5 公告</span></b>

本站啟用首頁公佈欄功能，在首頁會顯示本站大事紀要內容，在文章中則會將內容收起。但 IE 瀏覽器將無法顯示公佈欄這個小工具的內容，故建議使用 Chrome、FireFox 以獲得較佳的網頁瀏覽效果。</im>
儲存後，文章顯示的效果將會如下──

2012.10.5 公告

本站啟用首頁公佈欄功能，在首頁會顯示本站大事紀要內容，在文章中則會將內容收起。但 IE 瀏覽器將無法顯示公佈欄這個小工具的內容，故建議使用 Chrome、FireFox 以獲得較佳的網頁瀏覽效果。
除了標題使用 Blogger 文章編輯器改成灰色之外，公告文字會自動顯示預設的紅色。



二、修訂區塊實作

我的修訂區塊作法其實與公告區塊步驟一模一樣，因此以下就可省略重複的解釋，直接列出內容即可。

1. 裝飾圖案：我選擇使用藍色為基色，用淡藍色打底，右上角使用藍色緞帶裝飾──



2. CSS 設定：

display: block;
overflow: auto;
word-wrap: break-word;
margin: 0px auto;
width: 90%;
color: #20124d;
border: 1px dotted lavender;
box-shadow: 2px 2px 2px #d6d6d6;
padding: 5px 10px 5px 10px;
line-height: 1.2em;
background: #F4FCFF url(http://4.bp.blogspot.com/-6QBXtaq7KB0/UDDgtTcgWdI/AAAAAAAADyw/0h5xF52UXpM/s1600/modify.png) right top no-repeat;

以上跟公告區相比少了 font-size，因為我把公告的字體調大，而修訂區只要不設定文字大小，就會維持跟本文區的字體一樣大。

3. 安裝：

(1) 假設修訂區塊要呼叫的 HTML 標籤命名為 <md> (取 modify 縮寫)，也可自取容易記的字母。

(2) 到 Blogger 後台打開範本文件 → 修改 HTML。接著把下面的程式碼插入 </head> 的前面：

<style type="text/css">
md {
display: block;
overflow: auto;
word-wrap: break-word;
margin: 0px auto;
width: 90%;
color: #20124d;
border: 1px dotted lavender;
box-shadow: 2px 2px 2px #d6d6d6;
padding: 5px 10px 5px 10px;
line-height: 1.2em;
background: #F4FCFF url(http://4.bp.blogspot.com/-6QBXtaq7KB0/UDDgtTcgWdI/AAAAAAAADyw/0h5xF52UXpM/s1600/modify.png) right top no-repeat;
}
</style>

<script type="text/javascript">
document.createElement("md")
</script>
存檔後即可隨時呼叫修訂區塊的功能。


4. 使用：

呼叫的方法為在文章內將公告內容放在 <md> 與 </md> 之間，例如以下為使用 Blogger 文章編輯器顯示的 html 內容：

<md><b><span style="color: #999999;">2012.10.5 增補</span></b>

上一篇 CSS 程式碼後面的雙斜線 "//" 及註解文字，貼到範本時必須將雙斜線及其後的註解文字刪除。雖然這是合法的註解，但經測試後，在 Blogger 中可能會導致 CSS 敘述無法執行。</md>
儲存後，文章顯示的效果將會如下──

2012.10.5 增補

上一篇 CSS 程式碼後面的雙斜線 "//" 及註解文字，貼到範本時必須將雙斜線及其後的註解文字刪除。雖然這是合法的註解，但經測試後，在 Blogger 中可能會導致 CSS 敘述無法執行。
除了標題使用 Blogger 文章編輯器改成灰色之外，公告文字會自動顯示預設的藍色。


三、結語

以上是簡單製作公告區、修訂區的筆記，操作上如果遇上問題，因「第一篇」解說得較詳細，可回去看看能否找到答案。

CSS 技巧相關文章：