目錄表
上一頁下一頁

5 玩法一:串聯貼紙活動
5.3 貼上貼紙囉

接下來,只要在適當的位置建立的個空的區塊,並在 <div>...</div> 標籤裡填上串聯用的 HTML 碼就行了。

操作步驟:

為了避免不小心失敗,修改前一定要先備份。

珍惜台灣,小心輕放網頁裡,將串聯用的 HTML 代碼複製,第二段的 HTML 代碼包含連至該文章的超連結。

複製串聯貼紙代碼

在側邊欄模版適當地方插入一個空區塊的 HTML 代碼。 ( 請參考上一節:看懂側邊欄模版 ) 以下操作以 Standard 模版為例:

編輯側邊欄模版檔案,本例為 footer.template

插入一個空白的區塊

回到模版新增的區塊,將複製的 HTML 代碼貼入 <div>...</div> 區塊中。

貼上串聯用的 HTML 語法

搞定!接下來就可以看看改好的模版是否有成功了。

完成圖

失敗了怎麼辦?

如果你是使用文字編輯器修改,檢查看看是不是忘了 UTF-8 no BOM 的問題?

如果是版面發生錯亂的情形,檢查一下,貼上的區塊語法有沒有錯誤?通常,忘記結尾標籤 ( 例如 </h2> 、 </ul> 、 </li> 或 </div> ) 都會造成版面錯亂。

可以利用模版編輯器的備份功能回複。 ( 參考開始動手玩模版章節。 )

關於貼上的語法

貼上的 HTML 語法裡,包括一個插入圖檔的 <img> 標籤,和一個超連結的 <a>...</a> 標籤。

技術說明: <img> 標籤

語法: <img src="圖檔 url" alt="圖檔說明文字" title="圖檔說明文字" />

<img> 標籤在瀏覽器視窗裡所在位置會以 src 裡指定的圖檔來顯示。 alt 與 title 的圖檔說明文字在 IE 與 firefox 裡的解釋不太一樣,基本上,兩個屬性都指定後,在兩種瀏覽器裡都可以讓滑鼠停在圖檔時顯示說明文字。

使用 img 的 title 與 alt 屬性

技術說明: <a>...</a> 標籤

語法: <a href="超連結網址" title="超連結說明文字">...</a>

在 HTML 裡,夾在 <a>...</a> 裡的任何內容都會變成超連結,當滑鼠停在超連結上時,會顯示 title 裡指定的說明文字。

課後作業

替貼紙圖檔加上 alt 與 title 屬性

原始活動網頁上串聯貼紙的 HTML 語沒並沒有替 <img> 標籤加上 alt 與 title 屬性,請替你的模版補上這兩個屬性。

將貼紙圖檔放在自己的部落格

貼紙圖檔放在原作的網站上有個小缺點,若原作網站掛了或是該圖檔不見了,那參與串聯的我們的部落格就會出現俗稱叉燒包的找不到圖檔錯誤。

 叉燒包

所以,在原作同意的情況下,將貼紙圖檔放在自己的部落格,並修改語法使用自己部落格裡的貼紙圖檔。

發起自己的貼紙串聯活動

學完這個部份,你應該也有能力發起自己的貼紙串聯活動了。這就留給各位自行發揮囉!

上一頁下一頁