2012年10月5日

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

A+

(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 技巧相關文章:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。