網頁

2007年12月18日 星期二

Blogger 固定版面配置的寬度 760px

相信使用 Blogger 的部落客們應該都有這樣的經驗，就是在「修改版面配置」時，有時候會修改過 html/css 而導致「版面配置」的物件顯示超出範圍、或是對齊上有些異常；雖然只要 html/css 本身調整是正確的，就不會影響實在網頁呈現的效果，但在「版面配置」的畫面就是美中不足。

其實這個問題，我發現是 Blogger 本身的定義所造成的，因為 blogger 將「版面配置」的寬度訂在 760px，所以我們看到它所提供的範本都是寬度都是設為 760px，而一定寬度超出，就會造成「版面配置」顯示會有怪怪的樣子產生。以筆者而言，不喜歡寬度只有 760px 的版面，而不想因為放大寬度而導致在「版面配置」設定畫面中顯示的不完美。所以筆者是採用「比例」的方式來調整 html/css 中的設定。



另外，其於我是採用比例方式來顯示 blog 中的區塊，所以會需要使用「最小寬度」的設定，以便讓 blog 有過好的呈現效果，而不會因為視窗太小而影響內容的顯示；但問題來囉，因為最小寬度 min-width 的設定在 ie 中是無效的，筆者也試過許多變通的方式及網路上找到的方法，但結果通常都是無法讓 ie 有「最小寬度」的效果，不然就是讓另外寫一個很直的 js 來處理，實在是很麻煩而且不夠簡捷。

最後，筆者想到在 xuite css 中，有一行指令可以讓 xuite blog 在 ie 中也有最小寬度的限制效果，所以我就將那行敘述用到了 blogger html/css 之中，結果真的可以達到我要的效果，而且只要在 html/css 中加入一行敘述就可以了，真的是很簡捷有效。

以下為我在 blogger html/css 中「最小寬度」的設定方式：
body {
...
min-width: 760px;
behavior: expression(this.style.width=(document.documentElement.offsetWidth<760)?"760px":"100%");
}
其中 min-width 在 ie6 中無效，而 behavior 為 ie 專屬，對 fx 無效。

請參閱：讓 ie 也有「最小寬度」的效果
沒有留言:
標籤：

讓 ie 也有「最小寬度」的效果

min-width 是個非常方便的 css 命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但瀏覽器市佔率最高的 ie 卻不認得這個標準指令，而它實際上把 width 當做最小寬度來使。而在網路上看到其他網友，為了讓這一命令在 ie 上也能用，大多都是用一個 <div> 放到 <body> 的方式來處理，如下：
<body>
<div class="container“>
...
</body>

然後在 CSS 部份加入：
#container {
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
可參考「最大寬度與最小寬度網頁設定」

而筆者想到在 xuite css 中，有一行指令可以讓 xuite blog 在 ie 中也有最小寬度的限制效果，所以我就將那行敘述用到了 blogger html/css 之中，結果真的可以達到我要的效果，而且只要在 html/css 中加入一行敘述就可以了，真的是很簡捷有效。

以下為我在 blogger html/css 中「最小寬度」的設定方式：
body {
...
min-width: 760px;
behavior: expression(this.style.width=(document.documentElement.offsetWidth<760)?"760px":"100%");
}
其中 min-width 在 ie6 中無效，而 behavior 為 ie 專屬，對 fx 無效。
沒有留言:
標籤：

2007年12月14日 星期五

重返 Google Reader 的懷抱 !

RSS(Really Simple Syndication) 是一種可供網路使用者「訂閱訊息」的資訊格式， 網站若有提供 RSS 的服務，使用者即可自行訂閱有興趣的內容，而透過 RSS 閱讀器， 便可即時看到網站最新的內容訊息，節省定期查閱特定網站的時間。

由於筆者本身是以 Firefox 為主要瀏覽器的人，所以在 RSS 閱讀工具的選擇上，一直以來都是用 Firefox+Sage 作為 RSS Reader，直到前些日子重新使用 Google Reader 時，才發現 Google Reader 變的十分方便好用；因此，筆者決定讓 Sage 暫時退役，改由 Google Reader 來管理及閱讀 RSS 的訂閱。

優點：
  • Google Reader 和 Sage 一樣，可以對 OPML 進行「匯入/匯出L」的動作。因此兩者可以互相轉換。
  • Google Reader 的 History 是紀錄在 Google 上，而不是在 client reader 的 local history。因此，無論在哪一部電腦上都可以看到一致的資料；不會像 Sage 這類 client reader 會有 RSS 訂閱及瀏覽記錄的同步問題。
  • Google Reader 與 Blogger 一樣，都是使用 Tag 的方式做為「目錄管理」，方便而且快速。
沒有留言:
標籤：

2007年12月13日 星期四

羅技 V470 藍牙雷射滑鼠 - 入手滿意！

在兩三個月前，我使用了一年半的 V270 左鍵已經開始會鬧牌氣了，要不是按了沒反應，就是一次跳點兩三下，而最近不聽使喚的情況越來越頻繁，在昨天我終於是忍不下去，決定要為 IBM ThinkPad T43 (2668-O2V) 添購新滑鼠。(回想筆者過用的羅技滑鼠都是因為左鍵開始有問題而換掉，時間約一年半到兩年。)

於在筆者便看看羅技目前有什麼「好用」的滑鼠(筆者偏好羅技滑鼠)，最後在眾多無線滑鼠中，筆者評估了自身的需求及使用習慣，看上了 VX Nano, V470 這兩款滑鼠，最後筆者是決定「羅技 V470 筆電專用藍牙無線雷射滑鼠」。
V470VX Nano
筆者眼中的 VX Nano 最吸引人的不外乎就是他那超迷你的接收器，但最後沒有選它的原因之一，卻也是因為接收器，因為要佔掉一個 USB；其二是因為它的「中鍵滾輪」的用途是切換「有段、無段式滾動」的設計，但如此一來，筆者我慣用的中間鍵就沒法使用，而只能利用 setpoint 將「搜尋鍵」改成「滑鼠中鍵」，但它的位置又不好按！

而 V470 除了按下「中鍵滾輪」的感覺比較硬了些，整體都讓筆者覺得很滿意，而且因為「藍牙」不會佔用 USB，所以就決定是它囉！

在購買前，在網路上大概知道它的價格，也到過公司附近的內湖燦坤看過價格。
官方定價 $1680
燦坤售價 $1650
Yahoo! 購物 $1580
PCHome 購物 $1380~$1610

而最後筆者是跑到「光華商場」去看，結果在一間「滑鼠專賣店」(其實也不是真的專賣店，只是種類真的很多，各廠牌型號都有，稱之專賣應該不為過)；當筆者問到 V470 賣多少時，聽到的回答是 $1250，筆者當時心裡懷疑了一下，再問了一次，真的是 $1250，所以二話不說就立刻買單，因為在筆者的認知中 V470 並沒有這麼低的價格(真不知道是筆者太衝動，還是店員搞錯價格)。

今天和新伙伴 V470 一起工作、上網時，在網路上看到一位前輩發表的入手心得「[敗家] 羅技 V470 藍牙滑鼠」；他和筆者一樣也是使用 V270 大約一半年的時間後，因為左鍵掛掉而增購 V470 的，整個對 V270,V470, VX Nano 的感覺都和筆者差不多。
沒有留言:
標籤：

2007年12月11日 星期二

文章內的區塊運用

在 Blogger 的文章內容中，我們要將某一段文字特別標示出來，通常最常用的就是「改變字體、顏色、底色」；或是像先前文章「與眾不同的程式碼區塊、與眾不同的程式碼區塊(補充)」中定義新的「標籤(tag)」；除此之外，我們還可以在編修文章時，利用 <table> </table> 來做到相同的效果。
<table style="border: 2px solid rgb(192, 192, 192); margin: 3px; border-collapse: collapse; color: rgb(0, 0, 0); background-color: rgb(255, 225, 192);" border="1" cellpadding="5" cellspacing="0"><tbody><tr><td>
表格文字
</td></tr></tbody></table>
其中 <tbody> 是個特別的表格標籤，它可以讓我們在文章的「撰寫模式」時，很容易的增刪表格欄位。


使用 <code> </code> 的優缺點：
缺點：變更新的「模版」時，必需記得將 code{} 置入。
優點：可以統一定義區塊的格式，而且能夠快速變更區塊樣式。

使用 <table> </table> 的優缺點：
缺點：每次要使用 table 時，就要重新定義一次(或是利用 blogger 所指供的「範本」功能)，無法整批修改不同文章中的區塊格式。
優點：直接寫入本文，不因外部定義而導致格式產生變化。

其實上述兩種方法的優點同時也是缺點，所以就要依個人使用上的習慣來決定哪一種才適合自己囉！
沒有留言:
標籤：

與眾不同的程式碼區塊(補充)

在之前一篇「與眾不同的程式碼區塊」提到經常在一些 Blogger 看到教學內容「程式碼」的特別區塊是如何做到的；它的原理就是定義一個全域的「標籤(tag)」來使用，所以我們可以發現 <code> </code> 並不只是在文章裡可以用，就連「側邊欄(Side)」也可以使用喔。

如果我們確認只要在文章內使用時，只要將 code{} 改成 .post code{} 就可以了。
.post code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 0 0 15px;
}
沒有留言:
標籤：

2007年12月8日 星期六

Blogger 的介面回復為中文囉！

在前一篇的「Blogger 突然變成英文介面 !」提到 Blogger 無故的全面變成了英文介面，經過了三天，現在中文(多語系)介面又自動回復了。
沒有留言:
標籤：

2007年12月6日 星期四

Blogger 突然變成英文介面 !

真是奇怪了！剛才看著自己的 Blogger 時，突然發現 NavBar 從中文變成英文，接著不知為什麼所有的操作介面都突然間都變成英文介面了～而筆者當時對沒有針 Blog 進行任何動作，沒有發文、也沒有動到任何的設定，但為什麼會突然這樣咧～真是奇怪了！

筆者也用不同的電腦連接到 www.blogger.com 也都變成英文介面了，不過旁邊所顯示的 Language ListBox 仍然是選取「Chinese(Traditional)」，所以猜想會不會是 Blogger 本身自動轉換出了什麼狀況！現在只好再觀察看看了～
沒有留言:
標籤：
訂閱： 文章 (Atom)