網頁

ASP.NET多國語言開發快速體驗

在ASP.NET之中,如果要開發多國語言的網頁,已經比其他程式語言簡單許多。而我們在開發多國語言時,都會使用組件資源檔(*.resx),加到「\App_GlobalResources」資料夾中,資源檔的內容是字串構成的對照表格,而且除了字串,也能將圖檔或其他檔案加入資源檔之中。

我們先在\App_GlobalResources中新增一個資源檔

Resource.resx

名稱:PageTitle
值:English Sample Page

再新增一個繁體中文資源檔

Resource.zh-TW.resx

名稱:PageTitle
值:繁體中文抬頭網頁


新增Default.aspx網頁,在@Page指示詞最後加上「Culture="Auto" UICulture="Auto"」兩屬性,跟ASP.NET說,此網頁請自動幫忙選擇文化屬性。

最後我們在Page_Load新增以下程式碼:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
   '由資源檔Resource讀取PageTitle的值
   Page.Title = Resources.Resource.PageTitle
End Sub

要取得資源檔裡名稱與值很簡單,使用Resources.資源檔.名稱就可以取得名稱的值。這樣我們馬上就完成一個自動判定語系的網頁,而且會自動抓取抬頭設定值,如果你是使用繁體中文的瀏覽器,那網頁的抬頭應該是「繁體中文抬頭網頁」,其他語系瀏覽器應該都是「English Sample Page」。ASP.NET會自動判定你的語系,抓取對應的資源檔,如果沒有對應的資源檔,會使用預設資源檔的值(Resource.resx)

在設計上,我們會先計設一個預設語言的資源檔,再依序新增其他語言的資源檔,例如:
WebResource.resx (預設)
WebResource.zh-TW.resx
WebResource.zh-CN.resx

這裡有一點要注意,就是後面新增資源檔的「語系」命名不能隨便亂設,例如你把繁體中文的資源檔命名為WebSource.Big5.resx、WebSource.GB2312.resx,而是要依照.NET Framework中CultureInfo類別的規定來命名。

另外,如果你只想讓某一個.aspx網頁使用資源檔,則需要將資源檔新增至「\App_LocalResources」資料夾之下,然後依網頁名稱來命名資源檔名稱及相關資源檔。

例如,我有一個讓User下載資料的網頁Download.aspx,所以我們在\App_LocalResources新增以下資源檔:
Download.aspx.resx
Download.aspx.zh-TW.resx
Download.aspx.zh-CN.resx

這樣明白了吧,就把是直接用網頁名稱來命名資料檔,然後再依照預設資源檔來新增相關語系(zh-TW、zh-CN…)的資源檔,當ASP.NET執行到Downloads.aspx時,會自動去判斷瀏覽器的語系,再去找相對應的資源檔,再顯示出相關語言的頁面。

記得,語系(zh-TW…)的命名一樣是要照規定。

全球一動WiMAX(4G)初體驗,新竹測試募集

http://event.g1.com.tw/cb/

細節請入內自行觀看,明天(10/30)是最後一天,想要的人手腳要快。

SQL語法之Insert-Update-Delete三部曲

如果你常下SQL語法,久了就會了解,不外呼兩大部份,一是Select,一是異動,含Insert-Update-Delete,雖然標題是三部曲,但今天主要是介紹Insert及Update這兩個使用上的一點小技巧。

Insert語法


標準語法:
Insert into orders values ('2009/10/29', 1010, NULL)

Insert into orders(order_num, cust_num, order_date) values (200, 1010, '2009/10/29')

以上兩種是標準Insert的用法,而且我們在寫網頁時,常常要「組合」這種語法,欄位一多,跟看3D立體圖差不多,常常為了對應欄位與值,少一個「'」符號,在那裡Debug。

但在Insert語法中還可以使用execute statement,通常我們使用Select可以從資料表中取回資料,但資料可能是一筆,可能是十筆、百筆、萬筆等大量資料,也可能什麼都沒有,但我們可以搭配Insert語法,將Select取回的資料全部Insert進指定的資料表中,來簡省大量輸入及除錯的時間,想想用手輸入1000筆和執行兩三行指令,你要選那一個。

進階語法

Insert into [kk].[dbo].[orders] (order_num, order_date, customerid)
Select order_num, order_date, cust_num from orders

將原本Insert後面values的語法修改為Select語法,而且這個語法的好處可以把原本在Insert語法的重心,重新拉回來Select的身上,只要將規則或條件(Where…)設好,就可能取回你想要的資料,又不用怕輸入錯誤,真的是一舉二得。

Update語法

標準語法:
Update products set phone='035678901' where cust_num=1010

Update product set unit_price=unit_price * 1.05

以上兩種也是常見的Update使用方法,但Update還有一種用法是修改的來源是從某張資料表內的資料,像是Insert可以從別的資料表取得資料一般。

進階語法

update items set unit_price=products.unit_price
from products
where items.prod_num=products.prod_num and items.supp_code=products.supp_code and order_num>888

第一行,我們將products中的價格指定給items;
第二行,指定來源資料表;
第三行,Where條件,確認products中PK;

以上紹介的這兩種進階語法,都是一般入門書中比較不易看到的,提供出來給大家參考。

小巧(108KB)好用的SQL指令執行工具--QueryExpress

你是否想過,SSMS是非常強大的SQL Server管理工具,但安裝檔又大,安裝步驟又麻煩,又是.NET Framework,又是powershell,installer還要4.5以上…如果只是為了下幾行的Select * From Customer,就要安裝SSMS,實在划不來。

今天介紹一個工具「Query Express」,其實這個工具已經出來很久了,但實在好用,而且作者還提供原始程式碼,程式complier出來後,了不起108KB,透過這個工具,加上SQL語法,你已經可以完成資料庫裡應該80%以上的工作沒有問題,而且我測試SQL Server 2005/2008 (Express)都可以正常使用。

再更簡單的說,你也只能透過Query Express來向SQL Server執行SQL語法或T-SQL,只要SQL Server能接受的指令,通通可以透過Query Express來執行。

User → QueryExpress(T-SQL) → SQL Server

因為使用上太簡單了,我就不多介紹,因為重點是在SQL語法T-SQL身上,而不是軟體,軟體只是中介。另外作者有提供原始程式碼,所以我就手癢癢,使用VS2008重新complier及正(繁)體中文化了一下。而且Query Express本身是綠色免安裝軟體,你可以放在隨身碟裡,想用就用,實在太得我心了。

補充:從原作者網站還可以發現另一個好用的linqpad,這有空再介紹。

ps:原始程式是使用vs.net 2003寫的,程式部份是使用C#。
ps:原始網頁:http://www.albahari.com/queryexpress.aspx

Query Express繁體中文版:

$1,688 免費 AdWords 關鍵字廣告試用

有需要的人拿去吧,但請回覆你已使用了。

$1,688 免費 AdWords 關鍵字廣告試用,讓您立刻上網招攬客戶

親愛的 Google Analytics 用戶
較早前我們送您的 $1,688 Google AdWords 關鍵字廣告試用券,必須在 10 月 30 日前申請,逾期無效!現在,請立即前往 Google AdWords 網頁登記!
Google AdWords 的五大優點
  • 傳播範圍最大: Google 的內容聯播網涵蓋73%* 亞太區網路使用者,並是全球最大的廣告平台
  • 廣告有效,才須付費: 廣告刊登是免費的,有人點擊廣告,您才須付費
  • 有效控制廣告預算: 無預算門檻限制,且隨時可依需求調整每日預算
  • 廣告最彈性: 隨著您的促銷活動或新產品上市,隨時設計新廣告或調整廣告投放地區及網站等設定
  • 設定最快速: 15分鐘就能建立廣告並開始播放
如何兌現 AdWords 關鍵字廣告試用券及連結您的 Analytics 帳戶:
1. 前往 http://adwords.google.com.tw 首頁,按「立即開始」建立您的帳戶。
2. 進入您登記的電子信箱收帳戶啟用信,登入 AdWords,依照指示逐步設定廣告活動、群組及廣告和關鍵字。
3. 請在「帳單」-->「帳單偏好設定」填寫完整資訊以啟動帳戶。
4. 並請在「兌現促銷的相應號碼」一欄內,輸入您的試用券折換代碼-AXU9-2VUC-6F2T-KMG5-C8N
5. 按「儲存並啟用」後,您的廣告過不久就會上線!
要結合您的 Analytics 及 AdWords 帳戶,請依照這裡的 指示設定。結合 Analytics 及 AdWords,將能幫助您明確監測廣告效果,及瞭解如何持續優化您的關鍵字廣告。
需要協助嗎?請於週一到週五9:00到17:30間致電免費新客戶服務專線 0800-777-799,Google 將有專人協助您建立帳戶。
Google 台灣 Analytics 小組
P.S. 現在就申請使用 Google AdWords,幾個步驟就能取得$1,688元免費關鍵字廣告費。請注意此優惠方案僅限新客戶。折換代碼須於2009年10月30日前使用。

使用條款
這個優惠必須在新 AdWords 帳戶啟動後14日內使用,並必須為自行操作帳戶的線上廣告客戶,其他管道的客戶並不適用。如果您的廣告費用超過試用券贈送的金額,我們會向您收取超出的費用;若不願付出額外費用,客戶需在贈送金額用畢後停止廣告活動。廣告客戶必須擁有有效的 AdWords 網上廣告帳戶,同意廣告通過 Google審核,並接受 Google AdWords Program 條款。若此優惠方案違反法律,則優惠方案無效。試用券金額不得供轉贈、出售或交換。Google Taiwan Limited 保持更改或取消這個活動的最終權利。每一個試用券代碼只供一位客戶使用。廣告客戶須繳付新台幣200元開戶費,但我們提供的試用券已多出200元以抵銷您支付的開戶費。選擇預付方式的客戶,必須先繳付新台幣400元,其中200元為開戶費,200元為可使用的廣告費。有效日期截至:2009年10月30日。
*comScore Media Matrix, July 2008
© 2009 Google Inc. 版權所有。Google 及 Google 商標為 Google Inc. 的註冊商標,
1600 Amphitheatre Parkway, Mountain View, CA 94043.

電郵設定:我們寄這個電郵給你,由於你曾表示願意收到 Google Analytics 及其他 Google 產品的資訊。如果不想再收到這些推廣郵件,請前往您的 Google Analytics 帳戶修改設定版面 (https://www.google.com/analytics/settings/my_account - 需要使用Google Analytics 帳戶登入),取消勾選「特別推廣」(Special Offers)的方格並儲存。

網頁式FTP Client

FTP Client,是要翻譯成「用戶」、「用戶端」、「用戶端連線軟體」,不知那個比較好?

相對於FTP Server,FTP Client也就是跟Server連線的軟體,透過FTP Client與FTP Server連線後,只要權限足夠,那我們可以管理FTP Server上的檔案,上傳、下載、新增、刪除,這不管是在我們檔案管理、網站網頁管理,FTP Server/Client絕對有很大的功勞。

但對於使用者而言,最常用也最常出現「莫名奇妙」問題的FTP Client就是IE,而我們又不能要求這些一般使用者安裝較好的FTP Client軟體,如FileZilla…,這個是我長久以來的問題點,不想讓使用者使用IE來連接FTP Server,尤其是上傳等動作。

所以我找到一個網頁FTP Client的網站,它提供網頁式FTP Client的功能,讓我們可以透過它來登入FTP Server,然後做想做的事。

net2ftp

使用上直覺又簡單,而且還提供多國語系,我透過net2ftp來連台灣及大陸的FTP,速度上都還可以接受,反應時間約在3-4秒。而它除速度不是咻咻咻等級,大概只有帶一點廣告,是我比較不喜歡,其它都是可接受。

而且它還提供原始檔,讓大家可以下載使用,哦,真是佛心級的啦!

SQL Server 2008 Express壓縮功能

原來規格是「參考用」。

之前在寫SQL Server 2008 Express文章時,有放一個「SQL Server版本差異」連結,其中第一項中有一個項目是「資料壓縮」,你會發現,除了Enterprise版本,其他版本都不支援。

在操作SSMS管理工具時,也常被類似「此版本無法執行xxx功能」等訊息爆眼睛,造成眼睛的不適@.@,所以規格上沒有列的東西,也就不想去玩。

不過,今天又學到一個心得,只要管理工具出現可以「玩」的,不要客氣,只要不會讓你的資料庫掛了,讓你的資料毀了,一點訊息,還能接受。

在SSMS工具 &rrar; 選擇資料庫 &rrar; 工作 &rrar; 壓縮 &rrar; 資料庫/檔案

請不要客氣,在SQL Server 2008 Express真的可以透過SSMS手動壓縮資料庫或資料庫檔案,我想,那規格上的壓縮是指動態、全自動的壓縮。

想到可以壓縮資料庫,心情就很好!

ASP.NET網站管理工具的Table新增至自己的資料庫

在ASP.NET 2.0裡提供了好用又強大的會員管理控制項,而且只要在Visual Studio中點擊「ASP.NET組態」就可以馬上使用「ASP.NET網站管理工具」,但預設會在「~/App_Data」之下產生一個「ASPNETDB.MDF」的資料庫檔案,內建了11個系統預設資料表。

如果今天我們想把這些資料表整合到我們自己的資料庫中,那要怎麼做?其實一點都不難,方法有二(其實都是同一個方法,一個使用GUI,一個使用指令):

一、使用GUI(使用檔案總管)
1. 先切換目錄到
C:\Windows\Microsoft.NET\Framework\v2.0.50727
二、點擊ASPNET_REGSQL.EXE;
三、依畫面輸入「主機名稱、帳號、密碼、資料庫名稱」;

主機名稱可以是本機也可以是遠端,只要你的帳號有足夠的權限,都可以新增資料表,按下確定後,系統就會自動將11個表格新增至你所指定的SQL Server的資料庫中。

二、使用指令(cmd.exe)

1. 先切換目錄到
cd C:\Windows\Microsoft.NET\Framework\v2.0.50727
2. ASPNET_REGSQL.EXE指令
aspnet_regsql.exe -S papa -U kkbruce -P 1029384756 -d KKDataCenter -A all
按下Enter,一樣,系統會自動新增資料表到指定的資料庫中。
3. 訊息




開始加入下列功能:
Membership
Profile
RoleManager
Personalization
SqlWebEventProvider

.....

已經完成。




-S:SQL Server資料庫主機名稱。
-U:帳號。
-P:密碼。
-d:資料庫名稱。
-A:加入哪些Provider支援,all指全部要支援。

C:系統磁碟空間不足怎麼辦?

如題?

在一台運行近五年的Server上,近來一直跳出「系統磁碟空間不足」的可怕訊息,一看,事情還很大條:



一開始只能簡單的「清一清」,但效果不佳,沒幾天就又跳出一樣的訊息,有什麼好辦法呢?而且重點在「系統磁碟」,又沒辦法清除再重做,重新Format就沒事了?Server重灌嗎?這是不可能的。

我想到一個好辦法:



不要不相信,就是那麼簡單,一個勾勾,解決所有問題;在壓縮的過程,會要幾個小時之久,然後:



從150MB變成14GB,這可不能說不補,但要犧牲一丁丁點效能,因為作業系統會把所有用不到的檔案程式全部壓縮,在你要使用時再進行解壓縮等動作,所以中間會有一點點效能的差異,但拿效能換來的空間,我覺得太值得了。

SQL Server 2008匯入資料

我需要台灣郵政資料,所以上去中華郵政,現在中華郵政很不錯,有提供電子檔或軟體給大家下載使用,而我需要在資料庫建台灣郵政資料,而中華郵政有提供3碼與5碼郵政資料電子檔,所以就下載回來。

中華郵政下載頁

原先我很呆,因為以前的SQL Server Express版本,記得是沒有匯入功能,想要使用匯入功能,那可是要花$.$,而我也沒想那怎多,處理的方法有二,一是寫段程式,將Excel檔的資料轉存到SQL Server中,二是,建好資料表及資料欄位,然後用「Copy & Paste」的古老方法,因為想快點完成功工作,所以我選擇了方法二。

結果,沒用沒事,用了看起來是最快的方法,結果速度奇慢無比,在從Excel copy to SQL Server過程裡,SSMS完全無法動作,而且Paste速度奇慢,只能看到畫面下面新增成功的資料數一筆一筆慢慢的增加,但Excel中有58865筆資料,Paste一次約要40分鐘以上,天呀~是給我時間泡Coffee,看報紙嗎?

不行。

找了找,試了試,答案原來那麼簡單。先說答案,再來看操作。答案就是,SQL Server 2008 Express支援匯出、匯入功能。原本搞了一下午的工作,在短短的數十秒內被秒殺~秒殺~秒殺~秒殺~秒殺~秒殺~秒殺~秒殺(看了好爽,再多看幾次)。

這次的經驗也讓我學到,以前沒有不代表現在沒有,以前有的也不代表現在會有。把每一次當成全新的開始,好好的學習。

接下來我們看看操作。

我們把台灣郵政資料匯入範例資料庫Northwind:

1. 先下載台灣郵政資料(3碼、5碼隨便),解出Excel(*.xls)檔案;
2. 在SSMSE → Northwind → 右鍵 → 工作;



我們選擇「匯入資料」→ 出現「匯入和匯出精靈」;



在「選擇資料來源」頁面:

資料來源:目前有17種資料來源可以選擇,常用的Access / Excel都有支援,看了好高興,資料來源下方面設定選項會依你選擇不同的資料來源有所不同。我們選Excel。




Excel連接設定:

Excel檔案路徑:選擇Excel所在路徑。
Excel版本:系統會自動偵測。
第一個資料列有資料行名稱。(依情況自行勾選,我們的實例中是不能勾選)



選擇目的地及設定驗證方式:




目的地不一定是SQL Server,也就是說,你可以使用SSMS工具來做資料轉匯的工作,我之前都是使用Access在做這方面的工作。(但我未測試)

指定資料表複製或查詢



我們可以選擇從資料表來匯入,或是寫SQL語法過濾後來匯入;

選擇來源資料表和檢視


選擇要預覽的資料表,然後按下預覽鈕;



執行封裝:也就是執行匯入工作;



成功執行訊息;



這就我們就完成了Excel to SQL Server資料匯入的工作。

真的是「快又有效」。

但有一點要注意,就是匯入的資料格式都是採預設值,如欄位的資料型態都是nvarchar(255),還有欄位名稱是F1, F2, F3, F4,這些事後要記得修改。

順便看一下台灣郵政資料的Schema:

TaiwanPost(<ZipCode,nchar(5)>,<City,nchar(3)>,<Area,nchar(3)>,<Road,nvarchar(11)>,<Scoop,nvarchar(23)>)

微軟詞彙入口網站

微軟詞彙入口網站:http://www.microsoft.com/language/zh/tw/default.mspx

真是相見恨晚的感覺,這個網站把所有Microsoft所使用的詞彙統一整理起來,然後你可以使用它來比較各個詞彙在不同語言裡的翻譯或使用的不同。

例如:

英文詞彙:object
語言:選「中文(台灣)」
結果:物件
(還有其他很多資料...)

英文詞彙:object
語言:選「中文(中華人民共和國)」
結果:对象

一開始的頁面只能「英文-->其他」,但等進到查詢完成頁面,就能「其他-->英文」。

例如:

原文:巡覽
語言:中文(台灣)
譯文:英文
結果:

Nav 巡覽 Visual Studio
Nav 巡覽 .NET Framework
Pager&#0; 頁面巡覽區 .NET Framework
Pager&#0; 頁面巡覽區 Visual Studio
Navigate 巡覽 Visual Studio
Navigate 巡覽 .NET Framework
Navigable 可巡覽 Visio
Navigation 巡覽 Visual Studio
Navigation 巡覽 Unkown
Navigation 巡覽 Access

如果你在msdn或technet或其他關於微軟技術文件上有看不懂的地方,建議可以先上這個網站查查相對應的翻譯。

CSS margin值的設定

CSS margin


margin : 0;
/*一個值:代表上、下、左、右。margin : 0 0 0 0;的簡寫。*/
margin : 5 10;
/*二個值:值1:上下、值2:左右。margin : 5 10 5 10;的簡寫。*/
margin : 5 10 15;
/*三個值:值1:上、值2:左右、值3:下。margin : 5 10 15 10;的簡寫。*/
margin: 1 10 5 15;
/*四個值:值1:上、值2:右、值3:下、值4:左。*/

margin auto


margin裡的auto通常是拿來「置中對齊」使用。也就是我們將左右邊界值設定為「auto」,讓它產生置中對齊的效果。

/*方法一*/
margin-left : auto;
margin-right: auto;
/*方法二*/
margin : auto;
/*方法三*/
margin : 上下 auto;
margin : 0 auto;
/*方法四*/
margin : 上 auto 下;
margin : 0 auto 0;

簡易Menu導覽(巡覽)列加文章下拉效果

我要來實作一個簡單的Menu導覽(巡覽)列。

一、先首我們準備好HTML內容:


<!--巡覽列-->
    <div id="navigation">
        <div id="container">
            <ul id="firstul">
                <li id="home" class="active"><a href="#" title="Home">首頁</a></li>
                <li id="news"><a href="#" title="讀書心得" id="mynews">讀書心得</a></li>
                <li id="about"><a href="#" title="有關我" id="about_us">有關我</a></li>
            </ul>
            <div id="mypage" style="display: none" align="center">
            </div>
        </div>
    </div>
    <!-- 文章:預設只顯示標題 -->
    <div id="content">
        <span id="title01">數位式競爭--讀書心得</span><br>
        <div id="title01_content" style="display: none;">
            這本書為民國89年出版,已經在我書架上很多了年,是我讀大學時的教科書,老師花了一個學期就只上這本書,當時讀起來沒什麼感覺,頂多只是為了交報告而讀,但很奇怪,它就是一直在我的書架上,雖然十多年來,書架上的書已經換了好幾回,尤其是資訊類的書,換的速度之快連我都怕,不過一本好書一定有存在的價值,不會因為時間的變動而有任何改變。我每天可以說都在與技術文件為「舞」,只是不知是我看它跳還是它看我跳。就這樣有一天,不知為何,好像「它」在跟我招手,然後說,來看看我吧,離上次你讀我已經是九年多前的事了,我能給你一些「明牌」!古人說:「不經一事,不長一知。」你沒有經歷過的事,說再多感受就是有限。但九年後的今天重讀本書,真是感受良多,這本書應該是十年前版的「由A到A+」。我一直很佩服國外的研究學者,能花那麼多時間、精神來研究出原本為「隱性」的知識,讓想要更上一層樓的人可以有方法可循。看完這本書後,讓我心有戚戚,十多年前的故事,現在每天還是在不斷重覆發生,不管是成功的故事,還是失敗的故事。我想這可能是知識的傳遞、了解到最後的落實還有很大一段差距。如果你從事軟體相關產業,而還沒有看過這本書,我非常建議你買來看看(我不知道還買不買的到)。
        </div>
        <span id="title02">The Last Lecture -- 讀書心得</span><br>
        <div id="title02_content" style="display: none;">
            「最後的演講」,是一位父親留給孩子的遺言。沒錯,是遺言。聽起來是個不好的消息,但也因為是遺言,所以他必須認真思考要留下什麼給他的孩子們,他晚婚,他小孩都還小,他有成就,他患癌。最後的演講分為兩個部分,一是演講影片,二是書本。我是先看書再看影片,影片的部份,你可以搜尋「朱學恆」在他的部落格裡有影片檔和中文字幕,影片是免費的。這場演講為什麼會是全世界轟動?我想,除了是作者蘭迪.鮑許(Randy
            Pausch)本身在面對癌症時還能散發不可思義的"樂觀"魅力,還有一種「人之將死,其言也善。」的人生智慧在裡面。人生有方向,是多麼重要及快樂的一件事,首先,是完成自我的夢想,然後是啟發他人的夢想,還可以進一步幫助他人完成夢想。這是Randy教授最後想跟我們說的話。反之,也就是人生一定要有「目標」、要有「方向」,要知道你自己的「路」在那裡。這或許是我喜歡讀些哲學類的書籍關係,思考一件的事的角度之多,或許不是你能想像的,提高看事的高度,提高做事的層度,努力的成就自己,但也不要忘了幫助別人,造成一個良性循環的社會。
        </div>
        <span id="title03">Word of Mouth Marketing--讀書心得</span><br>
        <div id="title03_content" style="display: none;">
            我的信箱中有許多的電子報,每天上班第一件事就開打開信箱,確認一下有沒有重要人士的信件,看看Log信件,看看電子報,其實訂了那怎多的電子報,絕大部份都在1-10秒內被我的食指結束生命,快快的按下那Delete鍵,然後Next。而某天的一封電子報裡刊載的標題讓我有興趣「掃」一下,看完後(很少有認真看完全部),內容簡潔但又不失內容,後來又收到幾期的內容,一樣,都是很直接也實用的內容,文筆也不會看了想睡覺。這些電子報其實也是行銷手腕的一種,精選幾段精彩的內容,吸引你的注意,如果你也確實被吸引,但因為你只是看到部份的片面,這時就要看這些精彩的內容是否有足夠的吸引內,讓你採取行動,拿出新台幣去換一本有完整內容的書本。而我,被打動了。雖然我不是行銷人員,但我對行銷、管理方面的知識算很有興趣,一樣是動腦的工作,但行銷、管理和程式就是不同。而作者除了提供大量免費實用的做法外,也提供簡單的5個步驟打造好的「口碑」。
        </div>
    </div>


  • 巡覽列:我們先使用ul及li元素配合CSS來做UI的工作。
  • 文章:一開始只會顯示標題,使用者點選標題,才顯示文章內容。

二、巡覽列之CSS


/*ul元素設定*/
#navigation ul
{
 list-style-type : none ;
 margin : 0 auto; /*置中*/
 padding : 0;
 width : 850px;
}

/*讓li"浮"起來,變成"橫向列"*/
#navigation li 
{
 float : left ;
}

/*Menu中a元素設定*/
#navigation a 
{
 float : left ;
 display : block ; /*以「區塊」元素方式顯示*/
 color : rgb(197,197,197);
 padding : 5px 8px;
 margin-top : 10px;
 border-bottom-width : 0;
}

/*li中類別為active的a元素設定*/
#navigation li.active a
{
 color : rgb(255,204,0);
 background-color : rgb(153,153,153);
}

/*Menu中a元素:hover及:active設定 */
#navigation a:hover, #navigation a:active
{
 color : rgb(204,204,255);
 background-color : rgb(100,90,125);
}

/*文章區塊,<div id="content">設定 */
#content
{
 clear : both ;
 width : 850px;
 margin : 0 auto; /*置中*/
 padding : 0;
 background-color : rgb(193,189,204);
}

/* 文章標題,讓jQuery動態加入 */
.newstitle
{
 color :Black ;
 border-bottom : 1px dotted gray;
}

/* 文章內容,由jQuery動態控制  */
.newscontent
{
 width : 50%;
 color : Black ;
 background-color : rgb(255,153,51);
 border : 1px dotted gray;
 padding : 7px 30px 10px 25px;
}

建議一段一段複製,看整個畫面變化的過程,才能了解為什麼這樣設定。

三、jQuery程式碼


再來就是jQuery來設定文章標題樣式及文章內容顯示部份:
$(function() {
    $("#firstul li:eq(0)").removeClass("active"); //先將"首頁"的類別移除
    $("#firstul li:eq(1)").addClass("active");  // 將"讀書心得"設定.active類別
    $("span[id]").addClass("newstitle"); // 文章標題設定

    $("#title01").click(function() { //點擊標題時,
        //文章內容加入.newscontent類別設定
        $("#title01_content").addClass("newscontent").toggle("slow"); 
        //其他非title01的內容,全部hide()
        $("div[id^=title]:not(#title01_content)").hide("slow");
    });

    $("#title02").click(function() {
    $("#title02_content").addClass("newscontent").toggle("slow");
    $("div[id^=title]:not(#title02_content)").hide("slow");
    });

    $("#title03").click(function() {
    $("#title03_content").addClass("newscontent").toggle("slow");
    $("div[id^=title]:not(#title03_content)").hide("slow");
    });
});

這樣我們就完成了一個起簡單版的Menu巡覽列(CSS實作)加上切換文章內容功能(jQuery)的網頁。程式還有很多改進的空間,加油!

得知使用者按下按鍵代表的意思

HTML

<div id="myform">
Name:<input />
Email:<input />
</div>

jQuery(1)

$(document).keydown(function(e){
  //keyCode為ESC
  if (e.keyCode == 27) {
  $("#myform").hide("slow");
  }
});

我們透過document來為網頁注冊一個keydown事件,如果使用者focus在網頁上,然後由鍵盤有按下任何一個「鍵」,就可以由e.keyCode來得到一個數字,然後依這個數字,我們就可以寫對應的Code。

keyCode請參考:http://unixpapa.com/js/key.html

另外,我也能使用JavaScript中String物件的fromCharCode方法來得到文字內容,而不是數字。

JavaScript

function keyText(e) {
            // e.which 取得keyCode的數字
            // String.fromCharCode將keyCode轉換成對應的文字
            if (window.event) // IE
            {
                keynum = e.keyCode
            }
            else if (e.which) // Netscape/Firefox/Opera
            {
                keynum = e.which
            }
            alert(String.fromCharCode(keynum) + ":按鍵被按下了");
            return true;
        }

        document.onkeydown = keyText;

但以上JavaScript程式在IE8上會有問題,這也顯示出來一個重點,jQuery在跨Browser上的處理能力比傳統的JavaScript好上許多。如果你是資深的網頁程式開發人員就會知道這種痛,同一支程式,還要先去判斷是IE和非IE,是IE走A,不是IE走B,但有了jQuery可以大大減少這種不必要的幸苦路。

最後,我們再來修改一下jQuery程式,顯示一下我們所按下的按鍵文字(0-9,a-z能正常顯示),記得在IE及Firefox都測試看看。

jQuery(2)

$(document).keydown(function(e) {
  alert(String.fromCharCode(e.keyCode) + ":按鍵被按下了");
  //27為ESC
  if (e.keyCode == 27) {
  $("#myform").hide("slow");
  }
});

IIS7設定虛擬目錄產生「allowDefinition='MachineToApplication' 的區段發生錯誤」錯誤訊息

平常都是使用Visual Studio中的開發伺服器,但在設定使用Vista的IIS 7時,不管是設定「虛擬目錄」或是把網站原始目錄(wwwroot)設定到實際運作目錄,怎麼測都會出現錯誤訊息:「在應用程式層級之外使用註冊為 allowDefinition='MachineToApplication' 的區段發生錯誤。錯誤的原因可能是虛擬目錄尚未在 IIS 中設定為應用程式。」

只能說,又是一段天書級說明。還好,這個世界有G大。

參考說明:http://blog.xuite.net/sugopili/computerblog/19116944

錯誤原因是我自己造成的,因為平常我習慣將所有程式集中在一個目錄之下,如下架構:

WebDeveloper
-- WebSite1
-- WebSite2
-- WebSite3
-- ...

所以在每個WebSite之下都會有一個web.config,而我原先的想去是,在IIS設定虛擬目錄,然後指定到WebDeveloper目錄,然後想要執行或測試那個WebSite裡Code都進去Click即可,但這就是「問題點」,因為每個WebSite目錄之下都有完整的web.config,所以造成IIS/.Net Framework在初始化網站時產生錯誤,因為有太多個web.config。

WebDeveloper
-- WebSite1
web.config(完整版)
-- WebSite2
web.config(完整版)
-- WebSite3
web.config(完整版)
-- ...


回到最原始的理論:
Machine.config --> WebSite根目錄(web.config完整版) --> 子目錄(web.config部份版)

也就是說,一個WebSite之下只能有一個完整版web.config,像我們在安全或需要認證的目錄下設定的web.config部份設定,可覆寫根目錄web.config設定。但一個WebSite之下如果有多個web.config完整版的設定檔,就會產生錯誤訊息。

  所以我這種設定法是不正確的,也就產生了天書級的錯誤訊息。所以還是努力一點,想要測那個WebSite程式,就切換過去哪個目錄最保險。

CSS Seletor與jQuery Seletor

在CSS部份,先設計好你所要的樣式,我們這裡舉下載檔案的例子,我們常在網頁上放PDF等類型的檔案讓訪客下載,我們jQuery寫幾行簡單的Code,就可以幫我們處理好全部這類下載的樣式而不用我們一行一行class屬性的設定。
HTML部份:
<a href="kkbruce.blogspot.com" title="KingKong Bruce">Bruce</a> | <a href="KingKong.pdf" title="KingKong PDF file">KingKong PDF</a>

CSS部份:
.pdf {
  background-color: green;
  border: 1px solid #ABABAB;
  color: white;
}

jQuery部份:
$(function(){
  $('a[href$=".pdf"]).addClass('pdf');
  //a[]:屬性過濾
  //$=:結尾是…
  //addClass:加入Class
  //整句話:將a屬性href結尾是.pdf加入Class屬性為pdf
});

或是我們要為網站上的Link設定一個統一的樣式,也可以採用以下寫法,將CSS包在jQuery中:

$(function(){
  $('a[href$=".com"]').css({"background-color": "green",
  "border":"1px solid #ABABAB",
  "color":"white",
  "font-family":'"Verdana", "Courier New"', 
  "font-size": ".93em"});
  //css:加入css設定
  //特性:值
  //整句話:將a屬性href結尾是.com加入css設定(即style屬性)
});

以上只是透過一個簡單的jQuery屬性過濾功能,來針對href來進行過濾及設定。但其實jQuery的選擇器(Selector)是採用CSS Selector,所以相同的東西我們在CSS裡也可以這樣設定:

CSS部份:
a[href$=".pdf"] {
background-color: green;
border: 1px solid #ABABAB;
color: white;
}

這裡我連jQuery程式都沒有寫就完成了我想要的效果。這裡其實我想表達的有兩件事:
  1. CSS能做到的事,不要拿jQuery來開刀。
  2. jQuery就是拿來做有經濟效益的事,如動態效果、程式邏輯、AJAX…等。

XHTML 1.0檢查表

XHTML是XML,而HTML就只是HTML。

以下是從HTML轉換到XHTML的必做事項:

* 將DOCTYPE改為嚴格版XHTML。或者,如果還在用過渡期HTML,可以用過渡期XHTML。

<!-- transitional:過渡期XHTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- strict:嚴格版XHTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* 把xmlns、lang和xml:lang屬性加到<html>起始標籤。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw">

xmlns:用來辨別html所屬的XML語言,URL裡的內容並不重要,你也可以指定成你網域的URL。
lang、xml:lang:en指定使用的語言為英文,zh-tw指定語言為繁體中文,zh-cn指定語言為簡體中文。
* <html>標籤必須是DOCTYPE之後的第一個標籤,而</html>結束標籤必須是文件的最後一個標籤。
* 所有元素名稱都必須是小寫字體。
* 所有起始標籤都必須有結束標籤。如果是空元素,那麼這個標籤必須用空白加上/>做結束。

HTML 4.01:
< br >
<img src="..." alt="...">

XHTML 1.0
< br />
<img src="..." alt"..." />

* 所有屬性值都要用雙引號框住,而且都一定要含有數值。
* 不可在HTML內容使用&。&是實體的起始字元,所以請用&amp;,也請將其他特別的字元轉換為實體。


參考資料:Head First HTML with CSS & XHTML (中文:深入淺出HTML、CSS與XHTML)

HTML 4.01 Strict導覽

主要規則

1. <html>元素:出門在外別忘了帶<html>喔!
每個頁面開端一定要用DOCTYPE,緊跟著DOCTYPE之後,<html>元素一定要是頁面首席元素或是根元素。因此,在DOCTYPE之後,要用<html>標籤放在頁面開端,且應用</html>標籤結束頁面,至於其他的東西都是巢居在這兩個標籤裡頭。
2. 記住要用你的<head>和<body>,才會有比較好的HTML喔!
只有<head>和<body>元素可以直接放在<html>元素裡,其他元素都應放在<head>或<body>元素裡。絕無例外。
3. 沒有<title>的<head>是什麼?
一定要給<head>元素一個<title>元素。這是法律,辦不到的話,那就會使用HTML不符合一致性。<head>元素是唯一該放<title>、<meta>、<style>元素的地方(也許還會含<script>標籤)。
4. 只能給你的<body>吃有益的區塊元素。
只能把<h1>、<h2>…<h6>、<p>、<blockquote>…等區塊元素直接放到你的<body>元素內。所有的行內元素與文字都要先放在別一個區塊元素內,之後才能放進<body>元素內。
5. 行內元素要遠離區塊元素。
唯一能放行內元素內的東西就是文字和其他行內元素。區塊元素無論如何都不可以放在行內元素裡。

Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 如有使用到JavaScript語言請加上此<meta>標籤 -->
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<!-- 如有使用到CSS請加上此<meta>標籤 -->
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="auther" content="作者" />
<meta name="description" content="此網頁說明或描敘" />
<meta name="keywords" content="關鍵字, 關鍵字, 關鍵字" />
</head>

<body>

</body>
</html>


HTML 4.01 Strict導覽續篇(一)

次要規則

1. <p>元素要遠離區塊元素。
段落是用在文字的,所以別讓區塊元素靠近段落。當然,所有你想要的行內元素,如:<em>、<a>、<strong>、<img>、<q>…等,都可以放在<p>元素裡面。
2. 清單(<ol>、<ul>)裡就只能放清單項目(<li>)。
只有<li>元素能放在<ul>和<ol>元素裡,你也不會想放非清單項目的東西放在未排序或排序的清單裡吧?
Example:

<ol>
<li></li>
<li></li>
</ol>

3. 清單項目<li>裡放什麼都行。
<li>元素裡非常自由,文字、行內元素或是區塊元素。
4. 誰知道?<blockquote>只喜歡區塊元素。
<blockquote>元素裡頭需要一個或更多的區塊元素。雖然常見到文字直接放在區塊元素裡,但這還沒列入HTML 4.01的法條裡。務必先把文字和行內元素被在區塊元素內之後,才能把這些內容放進<blockquote>裡。
Example:

<blockquote>
<p>...Context...</p>
</blockquote>

5. 將某個行內元素巢居在另一個行內元素內時,請務必要小心謹慎。
雖然幾乎每個行內元素都能巢居在另一個行內元素裡,但是還是有幾個特例。絕對不要把<a>元素放在<a>元素內,因為這會讓訪客感到極度困擾。還有,<img>這類的空元素不能讓其他行內元素巢居於內。

HTML 4.01 Strict導覽續篇(二):

注意事項

1. 區塊(block)元素獨立自主;行內(inline)元素隨波逐流。
區塊元素是用在網頁的主要建築區塊,而行內元素則標示出內容的一小部份。行內元素要放在區塊元素裡。
2. 給連結(<a title="...")標題,提升連結識別度。
* 連結標籤要精簡,不要放整句話或一段長文字到連結上。
一般而言,放幾個字就好了,額外的資訊可以放在title屬性。
* 連結標籤要有意義。
不要使用類似「點擊此處」或「本頁」的描述。
* <a>標籤有兩個角色
一是從一個頁面跳到另一個頁面,二是擔任連結的降落點(landing point)或目的地(destination),要成為降落點可使用id屬性。

<a id="landing">段落二</a>

在URL最後使用"#"來進行降落的動作:

<a href="index.html#landing">段落二</a>

3. <img>標籤的alt屬性是有意義的圖像描述。記得,<img>是行內元素,所以參考第一點最後一段文字。

<p>
<img src="..." alt="..." />
</p>

4. 清楚的<meta>標籤告訴瀏覽器網頁的額外資訊,加快瀏覽器的處理速度。
在<head>標籤素加入以下基本<meta>標籤:
<!-- charset設定HTML文件是以何種文字碼所寫成,如BIG5、GB2312、UTF-8…等,不分大小寫。 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 設定該HTML文件內之樣式表和預設的Script語言。一般使用環境中,即使不指定,也會自動將樣式表視為CSS,並將Script語言視為JavaScript,但指定預設語言才是正確的作法。 -->
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="auther" content="作者" />
<!-- 你可能會在搜尋引擎上的結果頁面看到搜尋引擎對此網頁文件的描述,此描述大多來自description,你會想點擊有良好說明的搜尋連結或是沒有說明的搜尋連結。 -->
<meta name="description" content="此網頁說明或描述" />
<!-- keywords以是半型逗點來分隔關鍵字,一般最多10組 -->
<meta name="keywords" content="關鍵字, 關鍵字, 關鍵字" />

除了良好的(X)HTML架構與實用的內容,<meta>標籤內容的設計,也是一個簡單的SEO(Search engine optimization,搜尋引擎最佳化),讓你的網站網頁可以得到比別人更搜尋引擎排名。
5. 怪異模式
許多瀏覽器有兩種顯示HTML的模式:「怪異模式」用在舊版HTML,標準模式用在HTML 4.01或XHTML1.0/1.1。如果不告訴瀏覽器你用的是哪種版本的HTML(未使用文件類型定義"DOCTYPE"),許多瀏覽器就會用怪異模式,這會導致不同的瀏覽器出現不一致的頁面顯示結果,例如IE6這個版本的瀏覽器。

參考1:Head First HTML with CSS & XHTML (中文:深入淺出HTML、CSS與XHTML)
參考2:http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
參考3:http://www.addedbytes.com/cheat-sheets/html-character-entities-cheat-sheet/