目錄表 |
|
||
5 玩法一:串聯貼紙活動 接下來,只要在適當的位置建立的個空的區塊,並在 <div>...</div> 標籤裡填上串聯用的 HTML 碼就行了。 操作步驟:為了避免不小心失敗,修改前一定要先備份。 在珍惜台灣,小心輕放網頁裡,將串聯用的 HTML 代碼複製,第二段的 HTML 代碼包含連至該文章的超連結。 在側邊欄模版適當地方插入一個空區塊的 HTML 代碼。 ( 請參考上一節:看懂側邊欄模版 ) 以下操作以 Standard 模版為例: 搞定!接下來就可以看看改好的模版是否有成功了。 失敗了怎麼辦?如果你是使用文字編輯器修改,檢查看看是不是忘了 UTF-8 no BOM 的問題? 如果是版面發生錯亂的情形,檢查一下,貼上的區塊語法有沒有錯誤?通常,忘記結尾標籤 ( 例如 </h2> 、 </ul> 、 </li> 或 </div> ) 都會造成版面錯亂。 可以利用模版編輯器的備份功能回複。 ( 參考開始動手玩模版章節。 ) 關於貼上的語法貼上的 HTML 語法裡,包括一個插入圖檔的 <img> 標籤,和一個超連結的 <a>...</a> 標籤。 技術說明: <img> 標籤語法: <img src="圖檔 url" alt="圖檔說明文字" title="圖檔說明文字" /> <img> 標籤在瀏覽器視窗裡所在位置會以 src 裡指定的圖檔來顯示。 alt 與 title 的圖檔說明文字在 IE 與 firefox 裡的解釋不太一樣,基本上,兩個屬性都指定後,在兩種瀏覽器裡都可以讓滑鼠停在圖檔時顯示說明文字。 技術說明: <a>...</a> 標籤語法: <a href="超連結網址" title="超連結說明文字">...</a> 在 HTML 裡,夾在 <a>...</a> 裡的任何內容都會變成超連結,當滑鼠停在超連結上時,會顯示 title 裡指定的說明文字。 課後作業替貼紙圖檔加上 alt 與 title 屬性原始活動網頁上串聯貼紙的 HTML 語沒並沒有替 <img> 標籤加上 alt 與 title 屬性,請替你的模版補上這兩個屬性。 將貼紙圖檔放在自己的部落格貼紙圖檔放在原作的網站上有個小缺點,若原作網站掛了或是該圖檔不見了,那參與串聯的我們的部落格就會出現俗稱叉燒包的找不到圖檔錯誤。 所以,在原作同意的情況下,將貼紙圖檔放在自己的部落格,並修改語法使用自己部落格裡的貼紙圖檔。 發起自己的貼紙串聯活動學完這個部份,你應該也有能力發起自己的貼紙串聯活動了。這就留給各位自行發揮囉! |