The Will Will Web

基本上，網頁遇到「中文字」超過一行時都可以正常的斷字，只是若是英文字寫了一大串沒有空白的字，就會導致網頁版型被撐開，如下圖例就是因為網址過長而導致網頁被撐版，進而影響頁面的呈現。

IE 從 5.5 ~ 8.0 版的 CSS 都有支援一個 word-wrap 屬性，當你指定屬性值為 break-word 時就可以強迫瀏覽器進行斷字的動作，這樣就可以避免文字被斷行了。

不過要在 Firefox 中使用 word-wrap 就不可行了，一直到前天才正式發佈的 Firefox 3.0 也還是不支援 word-wrap 屬性，不過 word-wrap 屬性已經被編進 CSS 3.0 的規格中了，相信遲早有一天可以支援的。

不過在 Firefox 中也不是完全沒辦法，網路上有篇文章就有寫到如何在 Firefox 中實現自動斷字的方式，有興趣的可以上去看看。

我這裡摘要一下要達到目的必須的步驟：

1. 在 CSS 中定義一個 wordwrap 類別

.wordwrap
{
    word-wrap: break-word;
    -moz-binding: url('wordwrap.xml#wordwrap'); 

    display: block;
    overflow: auto;
}

這幾行 CSS 定義都是有意義的，內容這四行我大致解釋一下：

第一行：給 IE 看的，讓斷字產生。

第二行：給 Firefox/Mozilla 看的，透過 binding 的方式執行一段 JavaScript，當 Element 套用此 wordwrap 類別時讀取 wordwrap.xml 檔案，裡面有定義一組JavaScript程式可動態執行。

第三行、第四行：wordwrap.xml 裡面定義當 overflow 事件發生時執行一段程式讓文字斷行，所以 display 屬性一定要設定成 block 才有可能引發 overflow 事件（使用 inline 是沒辦法的），而最後的 overflow 就設定成 auto 即可。

2. 新增一個 wordwrap.xml 檔案

<?xml version = "1.0"?>
<bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
            
            var elem = this;

            elem.addEventListener('overflow',
                function()
                {
                    var exp = /<&#8203;\/*[&#8203;_\s="'\w]+>/g;
                    
                    var txt = elem.innerHTML;
                    var chars = txt.split('');
                    var newTxt = chars.join('&#8203;');                    
                    newTxt = newTxt.replace(exp, reconstructTag);                    
                    elem.innerHTML = newTxt;
                },false);
                
                function reconstructTag(_tag)
                {
                    return _tag.replace(/&#8203;/g, '');
                }

            //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

內容我就不詳述，請自行到 Emulating CSS word-wrap for Mozilla/Firefox 閱讀相關說明。

3. 最後，到你的 HTML 中會破版的那個標籤套上 wordwap 類別即可。

<span class="url wordwrap">一個非常長的網址.....</span>

在我的例子裡，套用之後在 Firefox 中的顯示效果如下：

就這樣三個步驟就可以達成完美、跨瀏覽器的自動斷字功能。這裡有個線上的 DEMO，你們可以用 Firefox 去看看執行的效果如何。

相關連結

• MSDN Library - word-wrap Attribute | wordWrap Property
• Cascading Style Sheets (CSS), Level 3 (CSS3)
• Emulating CSS word-wrap for Mozilla/Firefox

如果你在網站使用過多的 JavaScript 就很有可能會讓你的網頁反應時間拖的很長，因為瀏覽器在頁面顯示的過程中只要遇到任何 JavaScript 都會等他下載完畢或執行完畢才會繼續顯示下面的資料，即便你網頁已經下載完了也有可能因為 JavaScript 的關係而讓頁面遲遲不出現，所以在進行網站設計的時候需要特別注意這部分，尤其是較大型的網站。

在我之前的一篇文章加速前端網頁效能的14條規則中的第 6 點的 Move JS to the bottom 就是說這點，將所有 JavaScript Include 都移至網頁最下方，如果你不將 JavaScript 檔放到最下方其實還有另一個小技巧，就是在 JavaScript 的宣告標籤裡加上 defer 屬性：

<script type="text/javascript" src="common.js" defer="defer"></script>

加上這個屬性就等於跟瀏覽器宣告說「不要等我，請先繼續顯示網頁」的意思。

不過這可不能亂用喔，如果你載入的 JavaScript 中有使用到 document.write 或是會影響到網頁 DOM 物件的地方，就很有可能會造成網頁大亂！因為加上了 defer 屬性後，瀏覽器會在 JavaScript 下載完的時候執行，你會變得無法掌控這個 JavaScript 到底何時才會執行。

例如我之前就有試著將 funP 與 HEMiDEMi 的部落格外掛改成 defer，結果就導致全網站變成只有 funP 的 Icon 而已，而有時又變成 hemidemi 的 Icon，反正就是後面執行的直接蓋掉前面輸出的網頁內容，這都是 document.write 將網頁覆寫掉的原因。

今天看到一個好玩的東西，雖然不是很實用，但是有在玩 Linux 的人看到這個應該會覺得很有趣，叫做 Google command line shell

這可不是 Google 的新玩意，而是一個網友自己開發的一個小工具，可以在 Browser 中使用類似 Linux 下的 shell 環境，可以下指令進行 Google 各類服務的操作，例如說 Web 搜尋、圖片搜尋、新聞搜尋、Blogs 搜尋、影片搜尋、翻譯、讀取 RSS、......等等。

你只要進入 http://goosh.org/ 這個網址就會看到以下畫面（跟 Linux 指令列環境很像）：

輸入 h 就可以列出說明

例如你要搜尋 YouTube 上面的影片，可以輸入：v 馬英九總統就職演說

如果要用 Google 翻譯功能的話，可以輸入：t en zh Convergence

相關連結

• goosh.org - the unofficial google shell
• goosh, the Unofficial Google Shell - Slashdot

JSON ( Javascript Object Notation ) 是一種很方便的資料格式，常用於 AJAX 的相關應用中，主要是可以將 JavaScript 的物件資料變成一種字串的格式，以方便網路傳輸，也是序列化的一種方式。

當然在 .NET 這個領域也少不了他，我之前就用過 Json.NET 1.3 版，真的是還蠻方便的，但因為當時文件不多，也只有提供一些範例程式而已，所以應用的範圍並不廣，不過還是幫我省去了許多 ASP.NET 與 JavaScript 之間交換資料的困擾。

新版的 Json.NET 2.0 除了提供相當完整的線上文件之外，還提供了 LINQ to JSON 的 LINQ Provider 可以更方便的存取 JSON 物件，今後將可比以往用更輕鬆的方式用 .NET 撰寫 JSON 相關的程式了，新版的 Json.NET 2.0 大概有以下特色：

1. 支援 LINQ to JSON
2. 快速的 JsonReader 與 JsonWriter 類別
3. 可透過 JsonSerializer 輕易且快速的轉換你現有的 .NET 物件為 JSON 格式（也可從 JSON 格式轉回 .NET 物件）
4. Json.NET 也可幫你將 JSON 字串格式化成有縮排的格式，用以方便除錯與檢視
5. 可設定 JsonIgnore 與 JsonProperty 屬性(Attribute)到你的類別中，用以宣告物件要如何序列化
6. 能夠將 JSON 轉成 XML 格式，也可將 XML 轉成 JSON 格式

如果要下載 Json.NET 2.0 可以到 Json.NET CodePlex Project 網站下載。

相關連結

• Json.NET 2.0 Released
• Json.NET on CodePlex - Json.NET 的專案網站(開放原始碼)
• Json.NET 2.0 Quick Starts & API Documentation - 很棒的線上文件
• James Newton-King's Blog - 作者的部落格
• Introducing JSON

Web 的開發工作千頭萬緒，什麼樣的鬼事都遇的到，什麼 CSS, DOM, JavaScript, ... 在每個 Browser 都有些小地方不太一樣，難怪很多學 Windows AP 或 Windows Form 的開發人員都不太願意轉到 ASP.NET 開發（至少我遇過好幾個不太想轉換的朋友）。

Google 最近推出了個名為 Google Doctype 的網站，目的是想創立一個所有跟 Web 有關的百科全書，所有跟 Web 安全、JavaScript 的 DOM 處理、CSS 的撰寫技巧、網頁效能、跨瀏覽器的議題，或其他所有跟 Web 相關的東西都會在這上面。

我自己上去看了一下覺得有些文章還蠻不錯的，都是非常實用的技巧與觀點，例如說 Web security。其實目前所看到的這些文章都是 Google 的員工（Googler）寫的，不過只要你有 Google 的帳號就可以參與創作，一起貢獻你的想法、發表你的開發技巧、評論現有的文章或修改現有的文章。

雖然目前 Google Doctype 上面的內容還不多，不過我想未來應該會有不少東西吧！

相關連結

• Introducing Google Doctype
• Google Doctype
• Browse Google Doctype

有一個小巧玲瓏的網站 MiniAjax.com，裡面收錄了 62 個好用的 Ajax 小元件(陸續增加中...)，我自己親身試用了幾個發現還真不錯呢，另外也有些 Ajax Library 功能真的很酷！

例如說有個可以偵測你網站中大部分人都會在你的網站點選哪些位置，並且用顏色標注出來：

或者有個圖片放大鏡的工具

還有很多呢，上去看就知道了。

該網站也有提供 RSS 有興趣的人可以去訂閱，只要有新出爐的 Ajax 元件你就可以馬上知道喔。

相關連結

• MiniAjax.com / A showroom of nice looking simple downloadable DHTML and AJAX scripts

我第一次接觸 Regular Expression (正規表示式) 是 8 年前在學 Perl 程式語言的時候，當初一開始接觸 Regular Expression 時好像看到無字天書一樣，實在是無法「直接看語法」猜到 Regular Expression 的意義，所以只好一個規則一個規則的看，看不懂先跳過，然後一行程式一行程式的練習寫、寫錯就一直改，直到熟能生巧後，日後的子不知道省去我多少時間啊！任何有需要「字串處理」的地方全部都用 Regular Expression 來寫，不管是 Perl, PHP, JavaScript, C# 全部都有支援 Regular Expression，且語法規則都大同小異，所以真的是學一次用一輩子，反正是程式設計師一定要學的技能就是了。

學習資源

• [Regex] Regular Expression 初論
  http://phone.idv.tw/cs2/forums/thread/424.aspx
  
  
• Introduction To .NET Regular Expression (內附中文PDF文章可下載喔)- 黑暗執行緒
  
  
• 正規表示式的入門與應用(一)
• 正規表示式的入門與應用(二)
• 正規表示式的入門與應用(三)
  
  
• .NET Framework 開發人員手冊 - .NET Framework 規則運算式
  http://msdn2.microsoft.com/zh-tw/library/hs600312.aspx
  
  
• JavaScript RegExp Object Reference
  http://www.rtfiber.com.tw/~changyj/regex.3/index.html
  
  
• JScript .NET  - 規則運算式語法
  http://msdn.microsoft.com/library/cht/default.asp?url=/library/CHT/jscript7/html/jsjsgrpregexpsyntax.asp

開發工具 / 學習工具

• Expresso Regular Expression Development Tool ( v3.0 )  !! 強烈推薦安裝 !!
  http://www.ultrapico.com/Expresso.htm
• RegEx Tester - Regular Expression Tester
  http://www.codeproject.com/KB/string/regextester.aspx

Date Slider 是一個很酷的「日期區間」選取器，用 Flash 做的，對於需要選取兩個日期區間的操作介面，可以考慮用這個元件。

以下是圖示：

使用的時候 Flash 會將選取的參數透過 JavaScript 傳出來，你就可以取得這些參數進行查詢，如果再配合 AJAX 的效果，其介面真的蠻酷的。

相關網址

• Date Slider
  http://www.measuremap.com/developer/slider/

網站的前台套版，使用 ListView + LinqDataSource 真的是超強的啦！網頁程式碼的數量精簡到不行，大部分的情況是一點程式都不用寫的，甚至於可以用一個 LinqDataSource 套出「兩層」的 ListView。

例如以下的例子就是透過一個 LinqDataSource 直接套出兩層的 ListView，真的很漂亮。

<asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="MyDataContext"
  TableName="ProductCategory"
  Select="new (ID,Name,Image,ProductCategory_Child)">
</asp:LinqDataSource>
<asp:ListView ID="ListView1" runat="server" DataSourceID="LinqDataSource1" ItemPlaceholderID="item">
  <LayoutTemplate>
    <ul>
      <li runat="server" id="item"></li>
    </ul>
  </LayoutTemplate>
  <ItemTemplate>
    <li>
      <a href="ProductCatetory.aspx?id=<%#Eval("ID")%>"><%#Eval("Name")%></a>
      <asp:ListView ID="ListView2" runat="server" 
        DataSource='<%# Eval("ProductCategory_Child") %>'
        ItemPlaceholderID="item">
        <LayoutTemplate>
          <ul>
            <li runat="server" id="item"></li>
          </ul>
        </LayoutTemplate>
        <ItemTemplate>
          <li><a href="Product.aspx?id=<%#Eval("ID")%>"><%#Eval("ProductName")%></a>
        </ItemTemplate>
      </asp:ListView>
    </li>
  </ItemTemplate>
</asp:ListView>

但是要能透用這種方式套版有兩點要注意：

1. 必須先在 DBML ( Linq to SQL Class ) 中設定關連( Association ) 才可以使用。
2. 在 LinqDataSource 中必須明確的宣告 Select 屬性中的關連欄位名稱。

而針對一些頁面上的 UI 互動或細節的調校可以用 jQuery 來處理，學會 jQuery 可以節省你不少時間。

例如說兩層子選單的第二層選單顯示與否，就可以透過 jQuery 來設定是否展開，完全不需要在 ASP.NET 中寫的死去活來的。

$(function()
{
    $('ul.item_model a').each(function(i)
    {
        if(this.href.indexOf('<%=Request.QueryString["id"]%>') > 0)
        {
            $(this).addClass("active");
            
            if($(this).parent().parent().attr('class') == 'item_model_list')
            {
                $(this).parent().parent().show();
            }
            
            if($(this).next().attr('class') == 'item_model_list')
            {
                $(this).next().show();
            }
        }
    });
});

如果要用分頁的話，就使用 ListView + DataPager 來處理，整個網頁套版的動作十分的直覺。

相關連結

• The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI)
  http://weblogs.asp.net/scottgu/archive/2007/08/10/the-asp-listview-control-part-1-building-a-product-listing-page-with-clean-css-ui.aspx
  
   
• Using ASP.NET 3.5's ListView and DataPager Controls: Sorting Data with the ListView Control
  http://aspnet.4guysfromrolla.com/articles/011608-1.aspx
  
  
• ListView and DataPager in ASP.NET 3.5
  http://www.west-wind.com/WebLog/posts/127340.aspx
  
   
• Paging Through Data with the ASP.NET 3.5 ListView and DataPager Controls
  http://aspnet.4guysfromrolla.com/articles/021308-1.aspx
  
  
• Building a Grouping Grid with the ASP.NET 3.5 LinqDataSource and ListView Controls ( 推薦啦 )
  http://mattberseth.com/blog/2008/01/building_a_grouping_grid_with.html
  
  
• Some ASP.NET 3.5 ListView Control Examples
  http://blogs.msdn.com/mikeormond/archive/2008/01/23/some-asp-net-3-5-listview-control-examples.aspx
  
  
• ASP.NET 3.5 的 ListView 控件与 CSS Friendly
  http://www.cnblogs.com/cathsfz/archive/2007/08/22/864797.html
  
  
• jQuery 官方網站
  http://jquery.com/
  
  
• jQuery 教學 (中文的喔)
  http://jsgears.com/thread-63-1-1.html

有些網站會放置 Flash 前導頁（ 例如：http://www.liteonaward.com/ ），但我也看過許多網站在設計 Flash 前導頁的時候，整個網頁就只有一個 Flash 而已，所有進站的 Link 全部寫在 Flash 裡面，沒考慮到「萬一」使用者的瀏覽器不支援 Flash player 或 Flash player 所安裝的版本太舊怎麼辦！這時使用者就像是人到了你家，卻找不到門口進入一樣，連按電鈴的地方都沒有。

一般來說，許多人都會用以下方式宣告載入 Flash ：

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
   width="960" height="600">
     <param name="movie" value="flash.swf" />
     <param name="quality" value="high" />
     <embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="960" height="600"></embed>
   </object>

雖然已經很少人沒裝 Flash 了 ，但總是有人沒裝的人，萬一使用者沒安裝 Flash player 的話，我們可以選擇一張靜態的圖片輸出，讓使用者知道還是有「門」的。

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
   width="960" height="600">
     <param name="movie" value="flash.swf" />
     <param name="quality" value="high" />
     <embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="960" height="600"></embed>
     <a href="main.htm"><img src="AlternativePic.gif" width="950" height="630" border="0" /></a>
   </object>

微軟在幾年前針對 Internet Explorer 6 與之後的版本進行了一次軟體更新，對 ActiveX 控制項 (就是用 <object> 宣告的語法的物件) 預設都是不啟用的， 請看下圖：

這張圖應該很多人看過吧，如果 Flash 當中有設定超連結，還是必須要先點選一下「啟動此控制項」之後，才能點選，如果頁面上有一堆 Flash 的話，那就麻煩了。詳細資訊可以上微軟技術支援網站查閱。

事實上針對這個問題網路上已經有很多解決方案了，今天我們介紹透過 Adobe 提供的一個 Flash Player Detection Kit 可以協助我們透過 JavaScript 解決這個無法自動啟動的問題。上網下載後可以得到一個 detectionkit.zip 壓縮檔，裡面有個 AC_OETags.js 可解壓縮出來，還有個 ClientSideDetection.html 有使用範例，直接看範例就知道怎麼用的了。

但是他提供的範例我覺得不夠好，萬一使用者電腦 JavaScript 暫時沒啟用的時候怎麼辦？這時候使用者一樣是看不到的！（別懷疑，有時後使用者會外掛一些奇奇怪怪的軟體，有時後會影響 JavaScript 運作），為了這個問題我又多做了一些調整，以下是完整的程式碼：

相關連結

• The Adobe Flash Player Detection Kit
  http://www.adobe.com/software/flashplayer/download/detection_kit/
  
• SWFObject: Javascript Flash Player detection and embed script
  http://blog.deconcept.com/swfobject/
  
• SWFObject: 基于Javascript的Flash媒体版本检测与嵌入模块
  http://www.awflasher.com/flash/articles/swfobj.htm