標籤: html

  • 你敢自稱是網頁設計師?

    之前在 Mobile01 就有這個主題討論串「設計師就設計師 為什麼要叫美工呢?」,本人理所當然地戰下去…

    不說結論,單以最簡單的網頁設計來說,和我合作過的不下十人,只是每個幾乎都沒底子;難道真的只要會 Photoshop 合成圖庫、Dreamweaver 拉 HTML 就可以自稱設計師?
    (閱讀全文…)

  • 這個梗不知道有沒有人懂?

    我想應該很少吧?XD

    <!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    (略)
    <style type="text/css">
    body{padding:3px}
    .box{width:500px;margin:0 auto}
    .year{color:#c00;}
    </style>
    (略)
    <div class="box">
      <p>你知道嗎?</p>
      <ul>
        <li>哪一部電影獲得<span class="year">2006</span>年第59屆康城影展金棕櫚獎?</li>
        <li>哪一位耶穌會傳教士是把儒家的五經翻譯成拉丁文的第一人?(圖)</li>
        <li>康熙年間哪位清朝官員在廣州創立了羊城書院的前身-穗城書院與嶺南義學?</li>
      </ul>
    </div>
    </pre>
    <div>&nbsp;</div>
    body{
        padding-top:3px;
        padding-right:3px;
        padding-bottom:3px;
        padding-left:3px;
    }
    .style1{color:#cc0000;}
    <table width="500" cellpadding="1" cellspacing="1" border="0" align="center">
      <tr>
        <td align="left" height="30">你知道嗎?</td>
      </tr>
      <tr>
        <td align="left"">
          <table width="300" cellpadding="1" cellspacing="1" border="0">
            <tr>
              <td width="10"><div align="left"><span>.</span></div></td>
              <td width="290"><div align="left"><span>哪一部電影獲得<span class="style1">2006</span>年第59屆康城影展金棕櫚獎?</span></div>
            </td></tr>
            <tr>
              <td width="10"><div align="left"><span>.</span></div></td>
              <td width="290"><div align="left"><span>哪一位耶穌會傳教士是把儒家的五經翻譯成拉丁文的第一人?(圖)</span></div></td>
            </tr>
            <tr>
              <td width="10"><div align="left"><span>.</span></div></td>
              <td width="290"><div align="left"><span>康熙年間哪位清朝官員在廣州創立了羊城書院的前身-穗城書院與嶺南義學?</span></div></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  • jQuery FlyDOM 樣板系統範例

    範例連結:jQuery FlyDOM 樣板系統範例

    這個範例將伺服器端定位為資料提供者,所有的排版、定位等都交給使用者端來運算,也因為如此,所以特地試做了「檢視方式」清單,效果還不錯,只是還有幾個小問題要解決。

    除了三種樣式作成樣板物件之外,包括分頁選擇也都獨立成樣板,伺服器端的頁數資料我也是用 JSON:

    //css 的值就是各頁數的樣式類別
    [{'page':'1', 'css':'selected'}, {'page':'2', 'css':''}]
    

    為了讓總筆數和「目前顯示」資料能正確使用並減少伺服器存取的次數,我把這個項目也列入資料產出的 JSON 並放到最後,所以每次查詢資料就會有這項資訊可以使用,不用再額外撈一次:

    [{'id':'1', 'player':'Paul Konerko'....}, ......, {'records':'18', 'display':'1-9'}]
    

    ※ 資料使用 MLB 2009-04-07 白襪對皇家例行賽的打者成績,直接建立成 JSON 所以無法進行刪除,而修改也沒完成,反正只是 FlyDOM 的範例嘛…

    這是預設的「詳細資料」樣式。

    jQuery FlyDOM 樣板系統範例

    檢視方式的下拉選擇清單,只需要簡單的定位就能完成。

    jQuery FlyDOM 樣板系統範例 - 檢視方式清單

    圖示檢視,這個順便用了 jQuery UI 做了拖曳排序的效果。

    jQuery FlyDOM 樣板系統範例 - 圖示檢視

    清單檢視

    jQuery FlyDOM 樣板系統範例 - 清單檢視

    參考資料:

  • XHTML 1.0 Strict 的 iframe 標籤替代方案

    前幾天裝了 XML-Google Maps Plugin,預設會輸出 iframe 來內嵌 Google Maps,只是 XHTML 1.0 Strict 已經不支援 iframe 這個標籤,所以改用下列方式替代:

    原來的用法:

    <iframe id="embeddedhtml" src ="http://www.ashcombe.surrey.sch.uk/MM_french/1a_self_family/self_family_fset.htm" width="100%" height="600"></iframe>

    改成:

    <object id="embeddedhtml" type="text/html" data="http://www.ashcombe.surrey.sch.uk/MM_french/1a_self_family/self_family_fset.htm" width="100%" height="600"></object>>

    參考來源:[#MDL-17702] iframe is not supported in XHTML 1.0 Strict – Moodle Tracker

  • Flash Satay 語法轉換器再次更新

    這次加入了 Yahoo! Video 及 Google Video 的支援,以及可即時播放轉換後的語法,並增加全螢幕的 param 選項。

    ※ Yahoo! Video 在 Firefox 下不支援 transparent,所以預設將不能勾選透明背景。

    Flash Satay 語法轉換器

    以後的更新可能只有影片網站的支援了…

  • Flash Satay 語法轉換器更新

    因為之前轉換器的主機拆下來清灰塵之後就懶得組裝回去,所以這個轉換器就消失了,趁著今天閒閒改寫一下程式碼,並且除了 YouTube 之外還加入 Vimeo 的轉換。

    在 param 選項部份,除了預設的 allowscriptaccess 為 always 以外,可以再選擇是否顯示影片選單、wmode 透明等,其餘 param 之後再視情況增加了。

    Flash Satay Converter 沙嗲語法轉換器

    Flash Satay 語法轉換器

    使用方法一樣:

    1. 選擇來源影片的網站
    2. 填入影片網址(播放頁面的網址,不是 embed 的內容)比方說:http://tw.youtube.com/watch?v=Q3J8gBUXrK0
    3. 修改播放器的寬高
    4. 勾選額外選項,如:影片選單、wmode 透明
    5. 點選右側轉換按鈕
    6. 複製下方的轉換結果
  • 關於救救設計師活動

    今年四月份響應了「救救設計師,對 IE6 勇敢說不!」的網站活動,活動發起人沒有刻意要推廣那一套瀏覽器,所以列出了下列這張圖:

    救救設計師,對 IE6 勇敢說不!

    不過今天我在整理佈景主題的時候試著連過去 savethedevelopers.org,卻發現網站導向了 Microsoft Get Internet Explorer 7,看了一下 DNS 異動記錄是 10 月 17 日進行最後一次變更。

    應該是活動發起人被微軟和諧了吧?XD

  • 救救設計師,對 IE6 勇敢說不!

    SaveTheDevelopers.org :: Making The Web A Better Place, One Campaign At A Time…

    Say No to IE6 - SaveTheDevelopers.org

    這是一個對網頁設計者很有意義的活動,

    現在開始,只要在網站上加入一段簡單的 javascript,就能讓使用 IE6 的訪客在瀏覽網站時,瀏覽器上方浮現這張圖:

    拒絕 IE6

    請記得!儘速參與活動,救贖自己(或設計師朋友) XD

    使用語法:

    
    

    其實我對紀念 T-shirt 更有興趣,不知道有沒有人要辦團購?XD

    紀念品 - SaveTheDevelopers.org

    延伸閱讀: