本週大綱

  • LifeType Bloggers 進階使用(二)

    有部落格的請登入自己的部落格,沒有部落格的可以使用虛擬伺服器架設的來玩,如果以上兩個都沒有的,上課時,再借用。
    1. 修改 CSS 樣式
      • 如果您美感不錯,就將模版下載,開啟其中的 CSS 利用 Dreamweaver、Firebug這有教使用方法)等來修改。
      • 美感跟我差不多的人,喔,感謝網路善心人士,有 CSS 可以下載使用耶! ()、(
      • 我利用前者為例說明,選擇一個適合自己模版欄位的 CSS 複製全部語法,我選擇的是「貓咪踏青」
      • 打開純文字編輯器,例如筆記本貼上存檔,我就存為 cat.css
      • 將圖檔下載再上傳到自己的網頁空間,或者也可以選擇自己網頁空間原本的圖檔,然後修改 cat.css 裡面的圖檔路徑。
      • 登入→個人網誌設定→網誌模版編輯器
        登入→個人網誌設定→網誌模版編輯器

      • 找到自己自製的模版,點選編輯。
        自製模版→編輯

      • 找到 CSS 點編輯
        找到 CSS 點編輯

      • 先將原來的 CSS 複製存檔起來,萬一改的一團糟或者不滿意時,還可以恢復。

      • 接著將下載修改後的 CSS 複製貼上,按下去更新,就OK了!
        下載修改後的 CSS 複製貼上,按下去更新,就OK了!

      • 弄清楚首頁版面的樣式結構表,可以自己修改創作喔!

    2. 加入 Flash 小時鐘、GIF小動畫:

      Flash 小時鐘

      • 登入→個人網誌設定→網誌模版編輯器
      • 大部份這類小玩意都放在側邊,所以點選編輯 links.template
      • 將語法貼在適當位置。
        小時鐘語法如下,flash 的連結網址和寬、高 width height,請依需要修改
        <embed src="http://yunol.com.tw/swf/cat05-rakyu.swf" width="127" height="87" type="application/x-shockwave-flash" border="0" wmode="transparent">

      • 小時鐘可參考這個網站,收了好多,連語法都備好囉!有興趣的可以上網再找,也可以自己製作。
        http://www.tiec.tp.edu.tw/lifetype/post/1/284

      GIF小動畫

      • 放置編輯位置相同,小動畫語法如下,連結的網址和寬高 width height,還有圖片的替代文字,請依需要修改:
        <img src="http://www.stes.tc.edu.tw/~yunol/images/gears2.gif" alt="新的一年,繼續努力!" width="80" height="84">

    3. 加入音樂播放器,也是編輯 links.template,放個一兩首老歌就好,免得觸犯著作權。

      MediaPlayer語法如下,僅需改音樂網址。

      簡易:
      <embed src='http://www.stes.tc.edu.tw/~yunol/sounds/AnitaMui/test.asx' width='180' height='25' autoStart='0' >

      複雜(有畫面):
      <embed src='http://www.stes.tc.edu.tw/~yunol/sounds/AnitaMui/test.asx' type='video/x-ms-wmv' width='320' height='240' autoStart='1'
      showControls='0' AutoSize='0' AnimationAtStart='1' ClickToPlay='1' EnableContextMenu='0' EnablePositionControls='1' EnableFullScreenControls='1' ShowControls='1' ShowAudioControls='1' ShowDisplay='0'
      ShowGotoBar='0' ShowPositionControls='1' ShowStatusBar='1' ShowTracker='1' ></embed>

      asx播放清單語法如下,曲名和歌曲路徑請自行修改(歌曲路徑雖然可以抓人家的,例如第一首,但最好不要):
      <Asx Version="3.0">
      <Param Name="AllowShuffle" Value="yes"/>
      <Entry>
      <Title>長藤掛銅鈴</Title>
      <Ref href="http://www.fcu.org.tw/~f93b0229/wma05/03002.wma"/>
      </Entry>
      <Entry>
      <Title>胭脂扣</Title>
      <Ref href="http://www.stes.tc.edu.tw/~yunol/sounds/AnitaMui/15.wma"/>
      </Entry>
      </Asx>

      有一款簡易可愛的 FlashPlayer,也順便介紹給大家,網站提供下載喔!
      要特別注意的是,FlashPlayer 所放置的歌曲必須是 mp3 格式,還有要注意到轉速問題。
      反正貼貼歌曲有問題就拿掉,放沒問題的就對啦!還有 LifeType內文頁不可貼 object 標籤,但是貼在 template 就沒問題。
      語法如下(歌曲路徑是好友國華的部落格轉貼,路徑改了放到自己空間了):
      <object type="application/x-shockwave-flash" data="http://yunol.stes.tc.edu.tw/swf/dewplayer.swf?son=http://www.stes.tc.edu.tw/~yunol/sounds/denglijun/Drunken_tango.mp3" width="180" height="20"><br /><param name="movie" value="http://yunol.stes.tc.edu.tw/swf/dewplayer.swf?son=http://www.stes.tc.edu.tw/~yunol/sounds/denglijun/Drunken_tango.mp3" /></object>
    4. 多增加一些選單,語法如下,編輯 header.template
      連結的網址和 title 文字以及 div 標籤位置請自行修改,表情可以讓大家轉貼,因為放在 google 的網頁空間,不擔心吃掉自己主機或者學校主機的頻寬。
      <div align="right"><font size="2">※<a href="{$url->getBaseUrl()}/summary.php">{$locale->tr("summary")}</a>※<a title="洋蔥頭&米滷蛋&麻糬人-更多的表情圖示" href="http://www.yunol.stes.tc.edu.tw-a.googlepages.com/face" target="_blank">表情</a>※<a href="http://yunol.stes.tc.edu.tw/05.htm" target="_blank" title="相簿展示&製作教學">網路相簿集錦</a>
      ※<a href="http://uv.stes.tc.edu.tw:8080/yunol/yunol_gb/guest.php" target="_blank" title="留言版,歡迎留言給我!" >留言版</a>※<a href="http://unas.stes.tc.edu.tw/calendar/cal2.php" target="_blank" title="我的行事曆">行事曆</a>※<a href="http://yunol.stes.tc.edu.tw" title="我的主站,歡迎光臨!">于老師教室</a></font></div>

    部落格要個人化的兩個必要條件,其一是管理者需加掛「網誌模版編輯器」,其二是使用者要自製模版,簡易的就直接複製已有模版即可。語法不難,就開啟網頁編寫軟體,先在設計頁面處理好,再切到程式碼看語法即可,唯一要注意的是,用到的圖檔、音樂檔都要上傳到有效的網頁空間,然後路徑改成絕對路徑,最好不要抓別人的網頁路徑,萬一該網站關閉,自己的也會跟著掛了。

    Demo 網站
    Demo 網站

    研習時間非常短促,本內容主要著重在部落格外觀的立即改變,有興趣者,可以多多參看一些更完整深入的網路教學文件。
    http://uv.stes.tc.edu.tw:8080/yunol/elessonblog/summary.php

    我的CSS網路中心研習用部落格申請

    by yunol

  • 04月 18日 - 04月 24日