星期五, 12月 29, 2006

[自創]在blogger中使用「延伸閱讀」按鈕

因為blogger都會在列表頁中完整呈現每篇文字的內容,在舊版還可以靠國外網站來幫忙 ,但新版就沒版法了,不過還是有很多大大提供了很有效的方法,但是卻都還是要去動到HTML原始檔,頗為麻煩。

因此,就在不動到html的前提之下,自己做了個「延伸閱讀」的解決方法。優點就是不用去冒險修改html原始碼,但缺點是這個方法要在列表頁全部讀完之後才會開始有作用。因此,有興趣的人可以繼續看下去。

  1. 進入管理頁面
  2. 到「範本」管理介面
  3. 在「網頁元素」頁面中,的頁面底部,點選「加入網頁元素」
  4. 再跳出來的小視窗中,選擇「HTML/JavaScript」
  5. 在新增「HTML/JavaScript」的頁面下,加入以下程式碼
    <script language="javascript" type="text/javascript">
    <!--
    function checkIndex(url,height){
    var j = ""+location.href;
    var k = ""+url+"index.html";
    var ch1=j.indexOf("search?",0);
    var ch2=j.indexOf("_archive",0);
    var ch3=j.indexOf("search/label/",0);
    checkHeight=""+height;
    if(checkHeight==""){
    height=150;
    }
    if(j==url || j==k || ch1!=-1 || ch2!=-1 || ch3!=-1){
    var allPageTags=document.getElementsByTagName("div");
    var nowTagNum=0;
    var theClass="post-body";
    while(nowTagNum<allPageTags.length){
    if (allPageTags[nowTagNum].className==theClass) {
    allPageTags[nowTagNum].style.overflow="hidden";
    allPageTags[nowTagNum].style.height=height+"px";
    }
    if(allPageTags[nowTagNum].className=="post-footer"){
    getLink=allPageTags[nowTagNum].getElementsByTagName("a");
    addHtml="<div style=\"background:#efefef;padding:5px\"><a href=\""+getLink[0].href+"\" style=\"display:block;font-size:15px\">詳細內容</a></div>";
    allPageTags[nowTagNum].innerHTML=addHtml+allPageTags[nowTagNum].innerHTML;
    }
    nowTagNum+=1;
    }
    }
    }
    checkIndex('http://intermax.blogspot.com/','250')
    -->
    </script>
  6. 藍色字的區塊填寫你的網址(包括最後的斜線),而綠色字則是容器的高度
  7. 點選「確定」之後即可觀看結果

這個作法是使用CSS的overflow屬性,在blogger中的html架構下,有用到class名為「post-body」的div標籤,將其顯示範圍加以限制,並在有用到class名為「post-footer」的div標籤下找到超連結後,加入「延伸閱讀」的按鈕。因此,並不需要動到html原始碼架構

由於剛寫出來沒多久,可能會有例外情況產生,而且也有文章開頭前面所說的,要等到頁面全部讀取完才能做動的缺點,因此把此原始碼分享,希望能給各位有能力的大大們,可以找到更兩全其美的方法。

星期日, 12月 24, 2006

區塊互動變色

呈現的結果

這段文字的區塊會變色
原始碼如下:
<style type="text/css">
.chcolor:hover{background:#FF0000;}
</style>
<div class="chcolor">這段文字的區塊會變色</div>

不一定都要用div標籤,事實上,只要套用這個class的任何標籤 都可以產生作用

這是套用class="chcolor"的超連結

這是段普通文字,這裡的文字又套用了class="chcolor"屬性,這裡又是段普通的文字

沒辦法使用html標籤的style屬性來定義

這個方法沒有辦法像一般都使用「style=""」來定義,得使用<style>定義來做才行。雖然步驟上有些麻煩,但在某些情況下還是會有好處的,請參考以下範例

呈現的效果
     
     
     
原始碼如下:
<style type="text/css">
.tableHover td:hover{background:#FF0000;}
</style>

<table width="100" border="1" cellspacing="2" cellpadding="2">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

只需要一個定義就可以讓九個儲存格都具有這樣的效果,這就是「包含選擇符」的效果。

星期三, 12月 20, 2006

靠邊區塊製作法

新垣結衣:2001年,身為女子中小學生流行雜誌『ニコラ』的讀者的姊姊,說了「我不能參加了,所以你代我去參加」,結果在『ニコラ』模特兒應募中,獲得最優秀獎。

有些時候,需要在文章中使用輔助圖片,並放置在該段文章的左側或右側,雖然可以靠img標籤的align屬性來達成。但如果想要如右邊一樣,在靠邊的圖片下加註文字,那該怎麼做呢?

<div style="width:131px;float:right;margin:5px"><img src="圖片網址" width="131" height="87"/> 新垣结衣......</div>

解說:

得在該段文字的前面置入這張圖片與文字,並且將圖片與文字包覆在DIV標籤中,我們就可以使用CSS的float屬性把整個DIV物件置於整個HTML排版的右邊(float:right)或左邊(float:left),其下面的內容就會去遞補DIV標籤所空下來的區塊。

這邊要注意的是,使用float時,寬度(width)與高度(height)的設定很重要,以上面例子而言,為了不讓照片加註文字超過照片寬度,把DIV的寬度設的跟圖片一樣寬。而為了不讓DIV區塊與其他段落區塊的文字混雜在一起,範例中也設了margin屬性來區隔出與段落文字間的邊界距離。

與表格排版之間的差異性:

這樣的排版方法,與用表格(table)創造出來的排版方法的差異是:除了原始碼簡單明瞭以外,另一個好處就是這樣的排版具備了彈性的配置。可以應付任何寬度的螢幕來閱覽。您可以任意拖動網頁視窗的寬度。體驗一下這樣的排版所帶來的彈性配置。

星期二, 12月 19, 2006

[轉貼]用Firefox來寫blog吧!

又有人為Firefox寫了一個超好用外掛,這個外掛的名字叫Performancing。它可以讓你直接從Firefox撰寫部落格文章,而且功能不輸 單獨程式。平常Performancing只是Firefox狀態列上的一個小按鈕,但只要用滑鼠在上面按一下,就會蹦出一個功能完整的文章編寫器來,各 式排版按鈕都一應俱全,並能直接加上Technorati標籤、傳送Trackback等。讓你不需再登入部落格的後台,就能夠直接發布部落格文章。

Performancing小檔案:

版本:1.3.5

支援Firefox版本:1.5~2.0.0

下載位址:http://tinyurl.com/y6tyu5

一次管理多個部落格

雖然Performancing只是Firefox的外掛,但功能很多。在右方的活頁標籤中,〔Blog〕活頁標籤能夠讓你一次管理許多部 落格;而〔Categs.〕則是讓你管理文章的分類,至於最近所發佈的文章則會顯示在〔History〕中。〔Notes〕則是讓你在看到感興趣的事時, 直接用Performancing記錄下來。這些活頁標籤能讓你更有效地管理文章的發佈。

支援多個外部網站功能

Performancing左方的功能按鈕中,還支援許多外部網外的功能,讓使用者能更簡單地使用外部網站的功能。你可以利用 Performacing推出的流量監視網站觀查自己部落格的人氣,也能夠直接搜尋 Technorati引擎,並能直接將目前頁面加入到del.icio.us書籤中。這些整合進來的外部網站,讓Performacing更為強大。

文/Download!網路學習誌12月號

powered by performancing firefox

星期日, 12月 17, 2006

轉載:基於XHTML標準的DIV+CSS佈局對於SEO的影響

基於XHTML標準的DIV+CSS佈局對於SEO的影響

樂思蜀 發表在 十二月 14, 2006

前兩天發完《SEO參考:DIV+CSS三行兩列經典佈局》一文,不少朋友在MSN上問我,使用XHTML標準的DIV+CSS佈局對於SEO到底有什麼作用。這兩天簡單總結了一下,寫出來供參考。

  XHTML技術問題請參考相關網站研究,下面說說在SEO方面的影響。

  代碼精簡

  使用DIV+CSS佈局,頁面代碼精簡,這一點相信對XHTML有所瞭解的都知道。代碼精簡所帶來的直接好處有兩點:一是提高spider爬行 效率,能在最短的時間內爬完整個頁面,這樣對收錄品質有一定好處;二是由於能高效的爬行,就會受到spider喜歡,這樣對收錄數量有一定好處。

  表格的嵌套問題

  很多SEOer在其文章中稱,搜索引擎一般不抓取三層以上的表格嵌套,這一點一直沒有得到搜索引擎官方的證實。我的幾項實驗結果沒有完全出來, 但根據目前掌握的情況來看,spider爬行Table佈局的頁面,遇到多層表格嵌套時,會跳過嵌套的內容或直接放棄整個頁面。

  使用Table佈局,為了達到一定的視覺效果,不得不套用多個表格。如果嵌套的表格中是核心內容,spider爬行時跳過了這一段沒有抓取到頁面的核心,這個頁面就成了相似頁面。網站中過多的相似頁面會影響排名及功能變數名稱信任度。

  而DIV+CSS佈局基本上不會存在這樣的問題,從技術角度來說,XHTML在控制樣式時也不需要過多的嵌套。

  這雖然沒有得到確認,但還是建議使用Table佈局的朋友們,在設計時盡可能的不要使用多層表格嵌套,SEOer們在文章中說明了這一點,相信他們也不是沒有依據的。

  速度問題

  DIV+CSS佈局較Table佈局減少了頁面代碼,載入速度得到很大的提高,這在spider爬行時是非常有利的。過多的頁面代碼可能造成爬行超時,spider就會認為這個頁面無法訪問,影響收錄及權重。

  另一方面,真正的SEOer不只是為了追求收錄、排名,快速的回應速度是提高用戶體驗度的基礎,這對整個搜索引擎優化及行銷都是非常有利的。

  對排名的影響

  基於XTHML標準的DIV+CSS佈局,一般在設計完成後會盡可能的完善到能通過W3C驗證。截止目前沒有搜索引擎表示排名規則會傾向於符合W3C標準的網站或頁面,但事實證明使用XTHML架構的網站排名狀況一般都不錯。這一點或許會有爭議,但樂思蜀本人保持這樣的觀點,有異議者可以拿三組以上基本同等品質的網站對比觀察。

  我想,這樣的情況可能不是排名規則,最大的可能還是spider爬行網站時,出現以上差異導致收錄品質的不同。

  畢竟廖勝於無,建議建站或改版的朋友們,技術許可的情況下,還是選擇DIV+CSS佈局為好。

  PS:寫完才發現,部分觀點可能有些妄斷,有異議不要砸磚,到論壇交流,有話好好說 (^_^)

作者: 樂思蜀 原載: 點石互動搜索引擎優化博客

版權聲明:本文已經獲得作者授權發佈,轉載請保留本版權資訊,嚴禁一切非法複製。

歡迎訪問點石論壇: http://www.dunsh.org/forums/thread-2029-1-1.html 參與本文的討論。

星期三, 12月 13, 2006

被忽略許久的HTML標籤

從網路上知道了這個網站後,瞭解了更多HTML語意標籤,也更瞭解了許多我們都沒注意到的HTML標籤。沒注意到的原因是,工具列多半都沒有這類標籤的按鈕,而這些標籤,有些也只有語意,並不會有什麼外觀上的改變。

如果您也是個跟HTML標籤苦戰的部落客,也許你可以從以下的介紹,找到一些很有用的標籤,這些標籤有些已經不建議使用,但在XHTML2.0還遲遲未到的今天,只要原始碼改起來方便,我認為,用用也無妨的。

<abbr>縮寫標籤:
當你會使用到一些,英文縮寫的英文字時,又想要加上這縮寫的完整意思,就可以使用這個標籤,使用的狀況如下
原始碼如下:
<abbr title="Incorporated">.Inc</abbr>
視覺效果如下(請將滑鼠滑過並等候一下)
.Inc
<acronym>首字母縮略字標籤:
與上面的縮寫標籤不一樣的是,有些單字是用該句的所有字首所組成,就可以用這個標籤來表達其語意,其視覺效果與上方的<abbr>類似。
<big>大型字體與<small>小型字體:
不被建議使用的標籤,其作用就是呈現大一級(或小一級)的字體。
原始碼如下:
<big>嘩!!</big>真<small>的</small>嘛?
視覺效果如下
嘩!!嘛?
<center>置中標籤:
其效果就跟一般<div align="center">是一樣的,不過現在都不被建議使用了。
<cite>引證標籤:
引述某人或是某書中的內容所用的語意標籤,其視覺標籤會有斜體的感覺。
<code>電腦程式碼:
要呈現電腦程式碼時所使用的語意標籤,並不會有視覺上的效果。
<dl>定義式清單標籤<dt>下定義名詞標籤<dd>定義說明標籤:
此三個標籤式共同使用的標籤,用來解釋名詞用的清單組合,其視覺效果就如這篇一樣。原始碼如下:
原始碼如下:
<dl>
<dt>名詞</dt>
<dd>名詞說明</dd>
</dl>
視覺效果如下
名詞
名詞說明
<del>刪除標籤:
用來表示某段文字有誤用的語意標籤,其視覺效果,會呈現一刪除線於文字中央。
<fieldset>表單控制組與<legend>表單控制組標題:
此兩種標籤是共同使用的標籤,用於群組表單所使用。
原始碼如下:
<fieldset>
<legend>身體情況</legend>
身高 <input type="text" size="3" />
體重 <input type="text" size="3" />
</fieldset>
視覺效果如下
身體情況 身高 體重
<sup>上標標籤與<sub>下標標籤:
有些時候會需要用到此類方法來呈現某些事情,比方:能法師。
以下介紹的是表格相關的HTML標籤,其原始碼用法與視覺效果將留在下一篇補述
<caption>表格標題標籤:
他可以在表格的最上層產生一個,專屬表格的標題區塊,視覺呈現會跟表格有所區別,是置中的區塊文字。
<col>表格欄位與<colgroup>表格欄位組:
這兩個通常都是共同使用的狀況,他們可以定義縱列儲存格的相關視覺定義。
<thead>表頭內容組<tbody>表格內容組<tfoot>表尾內容組
可以將儲存格以分組的方式加以分類,再視覺上並不會有什麼特別的效果,但在IE瀏覽器中,原本必須要完整讀取完<table>...</table>才會顯示在螢幕上,利用上述三種標籤可以預先呈現群組讀取完成後的內容。

星期一, 12月 11, 2006

blog用flash「鑽地小遊戲」誕生

置入您的部落格的方法

遊戲再畫面的右邊,請各位試玩,有興趣帶回家者,將以下原始碼貼到您的部落格即可
<script language="javascript" type="text/javascript" src="http://www.engine.idv.tw/gamedb/gameWatch.js"></script>

全部的排行榜

星期五, 12月 08, 2006

使用表格排版1:結構對齊

雖然這樣說很令人吃驚~向來不建議使用表格做網頁排版的我,今天這個標題實在可以上報紙頭條了。而「使用表格做網頁排版」系列,也並不是使用表格來做出合理的網頁排版。而是我們來借用表格,來解惑使用表格排版,會產生哪些不穩定的因素,以及要注意哪些設定事項。並且藉由表格,來讓大家對更正確的網頁排版方式有更明確的概念,未來,就可以更輕鬆的使用CSS排版,脫離table排版的魔咒了!

表格排版,要注意結構對齊

什麼是結構對齊,首先,我們必須要瞭解表格的HTML碼,表格的原始碼是HTML結構中最常見,最複雜的結構,因為多數網頁設計師都用表格排版,所以也算是也是讓HTML混亂的元兇之一。以下是表格不考慮所有屬性時,二欄二列的原始碼:

第一列第一欄 第一列第二欄
第二列第一欄 第二列第二欄

<table>
 <tr>
  <td>第一列第一欄</td><td>第一列第二欄</td>
 </tr>
 <tr>
  <td>第二列第一欄</td><td>第二列第二欄</td>
 </tr>
</table>

我們可以看見表格是用<table><tr><td>這三種標籤組合而成的,以下我們簡單的替這三個標籤做介紹

  • <table>表格父標籤:表格的最父層結構,他本身可以做到表格與頁面間對齊方式、欄內內距、欄內行距設定,邊框寬度與邊框顏色,整個表格的寬度還可以指定所有欄標籤背景色。
  • <tr>表格列標籤:表格的列結構,統整欄位高度,一般在看網頁的時候看不見他的視覺效果,但卻是使用表格排版時扮演最重要的角色。他可以控制所管轄的該列背景色,邊框顏色,背景顏色,背景影像,欄內對齊方式。
  • <td>表格欄標籤,表格的最小結構,主要目的是讓網頁設計師放置文字,圖案等作用,可以控制本身的邊框顏色,背景顏色,欄內對齊方式。

表格的欄標籤與欄標籤,列標籤與列標籤之間會相互牽制。所以沒辦法做出不對齊的列或是不對齊的欄。如右圖,雖然在一個表格中切的出來,但是卻沒辦法讓所有切好的欄位,都具有自己的寬度與高度,換言之,欄位們會各被所屬的列所牽制著,當超出指定寬度與高度時,整個版面即會破裂。

因此,要做出右圖般複雜的欄與列排版,就要使用很多表格來幫忙完成,我會先做一個四列一欄的表格,然後在第二列中,再置入一個一列五欄的表格,下面依次,第三列與第四列再各置入一個二欄的表格;再回到第三列的第一欄放入一個六列的表格,第二欄放入一個二列的表格。看不懂上面步驟說明的,這裡有影片可以讓您觀看我是如何建構右圖的複雜排版的。

星期三, 12月 06, 2006

網頁設計不難!只是很麻煩!

要學會很多軟體應用,而且還是得碰程式碼才行

由於網頁具備多媒體效果,所以最少得學會二種軟體應用才算數:「網頁編輯軟體、圖片編輯軟體」,不過,如果你想要有更炫的效果,那你還得想辦法去學會:「向量動畫軟體,影像剪接軟體,影像效果軟體,3D動畫軟體」。

如果你想要自己做一個屬於自己style的留言板,抱歉~你得開始去學伺服器語言,學如何建構資料庫,等學會做出來了,才能開始去想怎麼裝飾你寫好的留言板。

歐!你還得去找有支援伺服器語言的伺服器;一般來說,現在免費網頁空間很難找。免費又有支援伺服器語言的空間更難找。只有國外的免費伺服器有在支援伺服器語言;而如果你想掛在國外伺服器,那麼你最其碼還要去解決伺服器語言編碼輸出的問題。

就算有網頁編輯軟體,製作網頁還是很麻煩

也許你看了上面的寫法後,你放棄要一個討論區或是留言板了,乖乖的用網頁編輯軟體來做一般網頁就行了……很抱歉耶,即使是這樣,你還是逃離不了原始碼的魔掌。

多數網頁初學者,使用網頁編輯軟體,在自己的電腦做好漂漂亮亮的網頁之後。總是會碰到這樣的問題:「為什麼網頁上傳了圖片卻看不見?」

會遇到這樣問題的人,一定沒弄懂「絕對路徑」跟「相對路徑」的關係,如果這層關係都沒辦法弄懂,即使你會用網頁編輯軟體,那想要做網頁設計絕對是難上加難。

不管是什麼樣的網頁編輯器,如果你不瞭解HTML語法的構成,那麼,光是排版,就老是會有一些:「莫名的空格」、「無法控制的高度或寬度」、「字體大小莫名的失控」。等小問題。這些問題產生的原因,不外乎就是太依賴工具按鈕的緣故,我常會看見網頁設計新手的原始碼,會長類似以下的樣子:

<font color="#ff0000"><font color="#00ff00"><font color="#0000ff">藍色字</font></font></font>

其實原始碼只要這樣就能達到一樣的效果:

<font color="#0000ff">藍色字</font>

太過依賴網頁編輯軟體的工具,就會造成多餘的html標籤的產生,因此就會有不可抗力的小問題產生,而這些小問題的解決方法,就只能仰賴檢視原始碼的方法找出來。

要有心理準備,才能學好網頁設計

就網頁排版來說,HTML本身就是個相當親和的網頁程式語言了,如果你連HTML都無心弄懂,想光靠FLASH就想要做自己的網站就更是癡人說夢!因為,光是要在flash做一個超連結,就有四個地方讓你選擇,每個地方的寫法都還不一樣!

所以,你必須得先拋棄「光靠編輯軟體就能完成網頁設計」的心態,這樣學習網頁設計,就可以如倒吃甘蔗般,漸漸的體會其奧妙的。

星期五, 12月 01, 2006

即將消逝的HTML標籤

簡述XHTML1.0

XHTML是當前HTML版的繼承者。HTML語法要求比較鬆散,這樣對網頁編寫者來說,比較方便,但對於機器來說,語言的語法越鬆散,處理起來就越困難,對於傳統的電腦來說,還有能力相容鬆散語法,但對於許多其他設備,比如手機,難度就比較大。因此產生了由DTD定義規則,語法要求更加嚴格的XHTML。

在XHTML1.0,只是個過渡階段的版本,並沒有開始對已經是不良結構的標籤大加撻伐,但已經開始建議(或是刪除)不可以使用以下標籤(標示常用的):

  • <b>粗體標籤:仍舊可以使用,但建議用<strong>,具有語意的標籤替代。
  • <i>斜體標籤:仍舊可以使用,但建議用<em>,具有語意的標籤來替代。
  • <u>底線標籤:不可使用,欲使用底線,只能用CSS的text-decoration:underline來顯示。
  • <br>強制斷行標籤:不可使用,需補上結尾符號,改寫成<br />
  • <hr>水平線標籤:不可使用,需補上結尾符號,改寫成<hr />
  • <img>圖片標籤:不可使用,需補上結尾符號,改寫成<img src="....." /> 另外,每個img標籤都必須要含有alt屬性,屬性內容可以留白
  • <a>超連結標籤的target屬性:target屬性及代表超連結被點擊時,指定開啟的視窗框架,講明白一點,就是再也不能製作開新視窗的超連結了

XHTML2.0草案

XHTML 2.0 的第一個工作草案於 2002 年 8 月 5 日發佈,一大新聞就是取消了向後相容性,換句話說,使用XHTML為基礎的網頁,就無法使用以下的標籤:

  • <b>粗體標籤:用<strong>,具有語意的標籤替代。
  • <i>斜體標籤:用<em>,具有語意的標籤來替代。
  • <br>強制斷行標籤:在XHTML1.0建議的補上結尾符號<br />也一併不支援,改用具有結尾標籤的<line>替代。
  • <h1>到<h6>章節標籤:改用單純的<h>標籤代表,然後用<section>標籤來區分重要性。
  • <a>超連結標籤:在XHTML2.0將會完全的功成身退,在XHTML裡的所有標籤都將可具備超連結的功能(href屬性),比如:
    <em href="http://tw.yahoo.com" >雅虎奇摩網站</em>
    <p href="http://www.w3c.com">這是一個段落,點擊這個段落也可以啟動超連結</p>
  • <img/>圖片標籤:這個標籤也將被刪去,替代他的是也已經存在很久的<object>。使用 object 標籤的主要優點在於,它被設計成向下串連。換句話說,如果瀏覽器不能顯示一個特定物件,那麼它將顯示該物件的內容。例如,遇到下列程式碼片斷的瀏覽器首先試圖載入電影。如果載入電影失敗,則載入圖像。如果載入圖像失敗,那麼它只顯示純文字。
    <object data="rides.mpeg" type="application/mpeg">
     <object data="rollercoaster.jpg" type="image/jpg">
        Jack tries to expand his horizons on the racing coasters.
     </object>
    </object>

現在擔心還太早

2002 年 8 月 5 日的 XHTML 2.0 工作草案中唯一可以確定的事就是不能確定任何事情。 在現在的草案和被作為建議書採納的過程中,幾乎可以肯定它將在某些方面發生變化。又,已經累積上億頁的舊版html資料龐大,我相信各家瀏覽器一定盡可能的繼續支持向後相容,所以,新的XHTML最大受惠者,還是屬於記憶體較小,處理能力較差的小型瀏覽器(如:手機)。