tag:blogger.com,1999:blog-36164098107790650112024-03-12T20:00:45.172-07:00自由藍天Explorerhttp://www.blogger.com/profile/02900836041638807955noreply@blogger.comBlogger8125tag:blogger.com,1999:blog-3616409810779065011.post-33027902267536442842013-01-04T01:36:00.000-08:002013-01-04T02:23:34.893-08:00把哇咧網頁分享到臉書時,我發現到的現象<p>先試一下這些步驟</p>
<ol>
<li>複製這個網址: <a href="http://www.walei.tw/action/1397">http://www.walei.tw/action/1397</a></li>
<li>在你的 Facebook "近況更新"上面貼上。 (留言可以不用發送出去,只要等預覽出來就好了)</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-dMPwvzdfsc8/UOZEwP5wi0I/AAAAAAAAAEg/V9dxGtuZmyI/s1600/walei-page-with-url.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="305" src="http://3.bp.blogspot.com/-dMPwvzdfsc8/UOZEwP5wi0I/AAAAAAAAAEg/V9dxGtuZmyI/s400/walei-page-with-url.png" width="400" alt="螢幕截圖: 用 Google Chrome 瀏覽的 http://www.walei.tw/action/1397 網頁" /></a></div>
<a name='more'></a>
<p>結果會這樣:</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-6aWm3D5-F24/UOZEsZgCQxI/AAAAAAAAAEY/HS0x_dhQjCc/s1600/walei-page-on-fb.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="286" src="http://3.bp.blogspot.com/-6aWm3D5-F24/UOZEsZgCQxI/AAAAAAAAAEY/HS0x_dhQjCc/s400/walei-page-on-fb.png" width="400" alt="Facebook 的留言截圖,這留言有預覽網頁的區塊。預覽區塊的圖是一張劃撥單,而文字則見下文敘述。" /></a><p></p></div>
<p>預覽的標題「2012哇咧聖誕口袋書::沒有星星的夜晚::新書介紹」這沒問題,但是內容卻寫著:<br />
「<span style="font-weight: bold;">帳號:13124599 戶名:財團法人基督教青年歸主協會(若你不便下載,郵</span>......」</p>
<p>奇怪,怎麼會這樣呢?為什麼預覽的內容不是原本網頁的這些大字<br />
「<span style="font-weight: bold;">一本你等候許久的療癒小書。[心理測驗]×[動人故事]</span>......」
或是第一段內容「<span style="font-weight: bold;">這本集結今年網友會菁華,並增加精美插圖、更完整內容的小書是份禮物</span>......」呢?</p>
<hr/>
<p>我自己有對這個網頁做小小的分析:</p>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-l8xuxkkRG6g/UOZEzmxkY1I/AAAAAAAAAEs/IuDB3Hy0mow/s1600/walei-page-marked-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="267" src="http://3.bp.blogspot.com/-l8xuxkkRG6g/UOZEzmxkY1I/AAAAAAAAAEs/IuDB3Hy0mow/s400/walei-page-marked-1.png" width="400" /></a></div>
<p>剛剛的「帳號」那段字,是在原網頁下方的「如何購買」的段落裡面,我用 Google Chrome 的"檢查元素"功能,發現那一段字是整個網頁裡面唯一有用 HTML <p> 標籤的地方,其它段落都用 <div>,我想這就是原因了。</p>
<p>看來 <strong>Facebook 在產生網頁預覽的時候只會注意網頁的 <p> 標籤</strong>,不會注意 <div>,所以預覽的內容與圖片才會變得怪怪的。</p>
<p>而網頁上方的大字介紹呢?</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/--GQpB0cOXR0/UOZEzS_uYLI/AAAAAAAAAEo/SvMN7xDIhQw/s1600/walei-page-marked-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="202" src="http://2.bp.blogspot.com/--GQpB0cOXR0/UOZEzS_uYLI/AAAAAAAAAEo/SvMN7xDIhQw/s400/walei-page-marked-2.png" width="400" /></a></div>
<p>"檢查元素"後發現,網頁語法長這樣:</p>
<pre><td background="http://img.walei.tw/at/book5/images/main_intro.png">
<div class="intro">
這本集結今年網友會菁華,並增加精美插圖、更完整內容的小書是份禮物......
</div>
</td></pre>
<p>而「<span style="font-weight: bold;">一本你等候許久的療癒小書。</span>......」這些字通通藏在圖片裡面!這就出現一個大問題了。</p>
<p>首先,不管是 Facebook, Google, 還是螢幕報讀器,都無法閱讀嵌在圖片裡的字。這等於視障者與搜尋引擎完全讀不到它們。記住一個無障礙網頁的常識:<strong>絕對不要把重要的文字內容放在圖片裡面</strong>,如果要放,請記得用 alt 替代文字。不然的話,搜尋引擎讀不到,哇咧的站方也就錯過了提高自己網頁人氣的機會!</p>
<p>再來,那張圖片還是用一個叫 background 的 CSS 屬性顯示的。既然是 background 那一般來說就是裝飾的圖,一定不是重要的東西,那搜尋引擎怎麼會知道有重要的字在裡面呢?</p>
<hr />
<h4>解決方法</h4>
<p>我還不會用CSS3的網頁字型,所以只能提供CSS2.1的做法。
<p>CSS2解決方法:寫出小字,然後再用CSS隱藏它。</p>
<p>範例:</p>
<pre style="border: 1px solid black;"><style>
@media screen { /* 只有圖形的瀏覽器需要隱藏 */
.hidden-text {
/* 注意這裡別用 display: none;,因為有些搜尋引擎
或報讀器會忽略 display: none 的內容。 */
display: block;
position: absolute; /* 讓區塊變成浮動的 */
overflow: hidden; /* 隱藏浮動區塊 */
visibility: hidden; /* 隱藏浮動區塊 */
}
}
.big-description {
background-image: url("http://img.walei.tw/at/book5/images/main_intro.png");
}
</style>
<hgroup class="hidden-text page-title">
<h1>沒有星星的夜晚</h1>
<h2>2012哇咧聖誕口袋書</h2>
</hgroup>
<div class="big-description">
<p class="hidden-text big-description1">
一本你等候許久的療癒小書。
</p>
<p class="hidden-text big-description2">
[心理測驗]×[動人故事]<br />
[天堂來信]×[溫暖小文]
</p>
</div>
<p class="intro">
這本集結今年網友會菁華,並增加精美插圖、更完整內容的小書是份禮物,讓你方便攜帶,搭車、等人、睡前閱讀都很適合,將在越來越寒冷的冬天撫慰你的心、解答友誼困惑。即使生活中,我們內心會經歷人際上的掙扎與困惑,也別放棄對真實友誼的盼望喔!
</p></pre>
<p>這種做法不是最理想的。理想的做法是用前者CSS3的網頁字型,但可能會比較麻煩。</p>
<p>歡迎<a href="http://www.walei.tw/">哇咧星樂園</a>的站方直接引用上面的語法,我不會介意。(或者,有人會CSS3的,可以教我怎麼解嗎?謝謝)</p>Explorerhttp://www.blogger.com/profile/02900836041638807955noreply@blogger.com0tag:blogger.com,1999:blog-3616409810779065011.post-59103583779462869202012-12-10T21:10:00.002-08:002013-01-04T02:15:29.408-08:00投影片上鎖?為什麼這對我來說是背叛<p>這是在台中教育大學資工系的真實案例:</p>
<p>在系上,有兩位教授(我不想直接說出名字)會在他們開的課上,把他們的投影片鎖上密碼。
這個密碼會在第一堂課就給同學,但是教授會宣稱:他們只是在保護智慧財產權,怕學生把投影片散佈出去。</p>
<a name='more'></a>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-3q2UZjOKnJo/UMbAJZjN08I/AAAAAAAAAEE/P-tfTESdYi4/s1600/slide-password-lock.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="http://4.bp.blogspot.com/-3q2UZjOKnJo/UMbAJZjN08I/AAAAAAAAAEE/P-tfTESdYi4/s400/slide-password-lock.png" width="400" alt="位於 elearning.ntcu.edu.tw 的網頁表示:此文件受到密碼保護, 請輸入密碼。" /></a><br/>(中教大資工系的網路電話課,所有投影片、syllabus都有鎖密碼。)</div>
<p>我不知道是不是只有資工系教授會這麼做,但是我從國小到高中,所有教過我的老師都未曾做過這種事情,
只有在大學會這樣。</p>
<p>我對教授做這種事情特別有感覺,為什麼?因為我要求大學給我一個<strong>自由</strong>的學習環境,
而鎖講義、投影片完全與自由背道而馳。</p>
<h2>知識封鎖者</h2>
<p>「知識封鎖者」是我對這些教授的稱呼,即使我沒有直接說是誰,但我希望鎖投影片的教授自己心裡有數。</p>
<p>「你們是知識封鎖者,因為你們畏懼你們所教的知識,你們沒有資格當我們的教授!」
(謎之音:我怎麼在學陳為廷同學說話?) 我的心裡是真的這麼想的。</p>
<p>上學期,我寄了一封email給其中一位教授,我在信中把鎖投影片這件事情比喻成一個DRM。</p>
<p>DRM 名目上叫做「數位版權管理」(digital rights management),
但是它實際上做的事情是限制消費者使用作品的權利,所以有人稱它叫做「數位限制管理」(digital 'restrictions' management)
或「數位手銬」(digital handcuffs)、「數位枷鎖」。</p>
<p>想了解DRM的人,可以看這幾篇文章
<a href="http://jedi.org/blog/archives/005545.html" title="再論 DRM | Jedi's BLOG">[1]</a>,
<a href="http://blog.ofset.org/ckhung/index.php?post/097e" title="Kindle 電子書 "1984" 事件示範 DRM 的黑暗力量 | 資訊.人.權.貴 隨便記">[2]</a>,
<a href="http://blog.ofset.org/ckhung/index.php?post/09ad" title="DRM 綁架消費者 & 刺探隱私 | 資訊.人.權.貴 隨便記">[3]</a>
我不想複誦它們。</p>
<p>如果世界上所有的教科書,上面都有一個密碼鎖,鎖上的密碼只有老師跟書商知道,
而且告訴同學:「這知識是一項秘密,切勿與任何人談論,連學弟妹也不可以。」這世界會變成怎麼樣?</p>
<p>如果孔子對他的弟子這樣教導呢?我想這樣的話,我們就看不到弟子們編寫的《論語》了,
我們也讀不到《論語》裡面,孔子與弟子談論的樣子了。</p>
<p>當然,我知道,教授鎖投影片也有它背後的動機......</p>
<h2>鎖投影片是為了誰</h2>
<p>教授會說,這是保護智慧財產權,這裡我想請大家想一想,這是保護誰的權利?</p>
<p>同學?老師(或教授)?還是學校?都不是,答案是<strong>出版商</strong>。</p>
<p>這我就想到一個奇怪現象:教授吃裡扒外。</p>
<p>我並沒有想要質疑教授的專業能力,或是他們教學的方法(我其實尊敬他們),我只是想問一個基本的態度問題:
「你領了薪水,但你是在為誰服務?」</p>
<p>或者,從我的角度來問,「我繳了學雜費,但是我學到的東西是屬於誰的?」</p>
<p>如果屬於我的,那為什麼我就不能把我學的知識分享出去,為了學弟妹,為了以後想念資訊系的人?</p>
<p>我其實有問過教授關於鎖投影片這事,而從她的回答方式我可以猜出,出版商並沒有做這種要求,
鎖投影片完全是教授自己的點子。她自己想要鎖的。</p>
<h2>背叛的感覺開始</h2>
<p>上學期的那封email,我有請教授移除投影片上的密碼鎖,並且提醒教授,
她的投影片上有些維基百科的圖是創用CC授權,而鎖密碼可能會侵權。
她怕侵權所以解了密碼,但是我聽到學弟說這學期又鎖了,這就是我感覺系上背叛我的開始。</p>
<p><em>悲哀......</em></p>Explorerhttp://www.blogger.com/profile/02900836041638807955noreply@blogger.com0tag:blogger.com,1999:blog-3616409810779065011.post-70494366595882794112012-12-04T02:42:00.000-08:002013-01-04T02:13:33.153-08:00網頁設計,如何判斷老師會不會教 (3/3)<p>這是最後四點,我覺得老師可能會教出來的"網頁設計壞習慣"。</p>
<a name='more'></a>
<h2>5. 教你用IE來瀏覽你的網頁(尤其是 IE6),而不用其他瀏覽器</h2>
<p>如果有人有看過我之前的文章,應該會知道我是反對 IE-only 的網站設計,我知道有很多人不知道製作 IE-only 的網站的壞處,現在我就直接告訴你。</p>
<p>先來一項基本道理:<em>如果你的系統或軟體依賴著一個專有(proprietary)的平台,你到未來換平台的時候一定會遇到阻礙。</em></p>
<p>這叫做 vendor lock-in,而且在資訊系統上常常發生。我不會在這裡繼續討論 vendor lock-in (網路上有太多這樣的討論了),但我會直接向 IE-only 的網站設計者問二個很簡單的問題:</p>
<p>「你希不希望你能用你的<strong>手機</strong>來上你的網站?」或「你希不希望你能用你的 <strong>iPad 平板</strong>來上你的網站?」</p>
<p>這二題是非題都回答 yes 的話,那請想想這個: Android 與 iOS 都沒有 IE ,如果你的網站只設計給 IE 用,你只是在排斥手機與平板的使用者。</p>
<p>(我這裡只提手機與平板,還沒提到 Linux 的桌機呢)</p>
<p>所以,<strong>不要畫地自限</strong>;不要把自己限制在「大家都只用IE」這種思想框框裡面!事實上,Google Chrome的使用率已經超過IE了 (全球的統計數據,在台灣還沒有)</p>
<p>參考資料</p>
<p><a href="http://atelier-wini.blogspot.tw/2009/02/ie-only.html">[網頁設計] 瀏覽器篇 - 非 IE Only 網頁的利益在哪?</a> - Atelier Wini (Blogspot)</p>
<p>或 Google 搜尋 "ie only"</p>
<h2>6. 教你使用閃字或是跑馬燈 (marquee)</h2>
<p>閃字與跑馬燈常常是動態網頁課會教的東西。他們很炫,我知道,但是教這兩個東西的老師往往對「易用性」(usability)一無所知。我看過一些好的網頁教學文章,它們談到閃字或跑馬燈的時候都直接建議 "Just say NO!"</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-LU0KWXlU_4I/UL3QyDkxZ9I/AAAAAAAAAD0/325smMYKqZU/s1600/blink-text.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-LU0KWXlU_4I/UL3QyDkxZ9I/AAAAAAAAAD0/325smMYKqZU/s1600/blink-text.gif" alt="Blink text = BAD! ...and so are marquees" /></a><p>(GIF 閃字範例)</p></div>
<p>為什麼 just say no? 你必須用讀者的角度來想......</p>
<h3>閃字的壞處:</h3>
<p>(無論是 GIF 閃圖、CSS 的閃字還是 HTML <blink> 元素都一樣)</p>
<ol>
<li>一直閃爍的內容會很傷眼睛</li>
<li>讀者會對閃圖很反感,而且像廣告一樣直接忽略他們</li>
<li>網頁列印下來後,沒有閃爍效果</li>
</ol>
<h3>跑馬燈的壞處:</h3>
<ol>
<li><marquee> 不是W3C標準的網頁元素,所以有些瀏覽器會不支援</li>
<li>Javascript 跑馬燈也會有瀏覽器不支援 (尤其是視障者用的瀏覽器)</li>
<li>跟上面的閃圖一樣,讀者會視為廣告而忽略之</li>
<li>每個讀者的閱讀速率不同,你的跑馬燈速率沒辦法符合所有讀者的需求</li>
<li>跑馬燈在 Amazon Kindle 或類似裝置會顯示困難</li>
</ol>
<p>沒有老師會教你這些,所以網路上就有一堆<a href="http://www.google.com/search?q=閃字+知識%2B">幫人做閃字</a>的問題。拜託,<strong>請不要幫他們做閃字</strong>!不要以為你的部落格上面放閃圖就會吸引人進來,相反地,你的網友會感覺你是幼稚的人。</p>
<p>如果要藝術字體,請用靜態的圖片就好了。(還有記得加上替代文字 ^_^)</p>
<p>那跑馬燈呢?就把 <marquee> 去掉,讓捲動的文字攤出來,讓讀者用自己的速率來閱讀文字。如果真的要用跑馬燈,上下捲動的跑馬燈會比左右捲動的好。</p>
<p>參考資料</p>
<ul>
<li><a href="http://www.goer.org/Journal/2003/10/html_house_of_horror_things_that_go_blink_in_the_n.html#26">HTML House of Horror: Things That Go <BLINK> in the Night</a> - goer.org</li>
<li>英文維基百科 "<a href="http://en.wikipedia.org/wiki/Blink_element">Blink element</a>" 與 "<a href="http://en.wikipedia.org/wiki/Marquee_element">Marquee element</a>"</li>
</ul>
<h2>7. 用 Flash 設計網站,或導覽列,或按鈕</h2>
<p>Flash 也是動態網頁課很喜歡教的東西,原因跟跑馬燈差不多,「酷炫、美觀」。不過 Flash 會多一個原因,就是「能互動」。</p>
<p>但是請等等!我要提醒同學:Flash 的強大功能有可能會使你養成壞的網頁設計習慣!</p>
<p>我這裡不是說大家完全不要用 Flash,而是 Flash 要謹慎使用。</p>
<p>以下是 Flash 容易使用不當的地方:</p>
<ol>
<li><p><em>導覽列 (navigation bar) 完全用 Flash 來驅動</em></p>
<p>結果是,iPhone, iPad 無法瀏覽你的網站</p></li>
<li><p><em>使用 Dreamweaver 的「Flash 按鈕」</em></p>
<p>結果是,iPhone, iPad 和搜尋引擎都看不到 Flash 按鈕長什麼樣子</p></li>
<li><p><em>把重要的文字內容放進 Flash 裡</em></p>
<p>結果是,你讓搜尋引擎很難處理你的文字;你還會有段落、結構等問題要處理</p></li>
<li><p><em>整個網站用 Flash 來製作</em></p>
<p>這是最糟的示範,比「框架頁」還糟。結果是,<a href="http://free-explorer.blogspot.tw/2012/10/13.html">前文說的框架頁的困擾</a>,全部出現在這裡!</p></li>
</ol>
<p>Flash 有用對的地方,例如以下這些:</p>
<ol>
<li><em>影片播放器、音樂播放器。</em>(有些瀏覽器還沒有支援 HTML5 的播放器技術,這時候 Flash 的播放器就派得上用場。 YouTube, Vimeo 都有提供 Flash 版與 HTML5 版的播放器。)</li>
<li><em>網頁版的遊戲,或網頁 APP。</em></li>
<li><em>純粹展示 Flash 動畫。</em></li>
</ol>
<p>謹慎使用 Flash,不要讓你的 Flash 成為其他人瀏覽你網站的阻礙。</p>
<p>參考資料</p>
<ul>
<li>Jonathan Beilke, <a href="http://www.moongrabber.com/web-design/why-flash-based-websites-are-bad">Why Flash-based Websites are Bad</a></li>
<li><a href="http://blog.hostbaby.com/2012/01/why-flash-websites-can-be-bad-for-business/">Why Flash and Animated Websites Can Be Bad for Business</a> - The HostBaby Blog</li>
</ul>
<h2>8. 放自動播放的音樂</h2>
<p>這是網頁課的老師完全不會教你的事情,但是<strong>自己有部落格的人必學</strong>!這裡不是要學怎麼自動播放音樂,而是要學習<strong>尊重瀏覽者安靜的權利</strong>。</p>
<p>請各位網友,不要在你的網誌上自動播放音樂。不只是網誌,任何網站都一樣。</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://stickeraction.com/autoplaysucks/" imageanchor="1" style="float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="200" width="142" src="http://stickeraction.com/autoplaysucks/sticker" alt="我很討厭網誌音樂自動播放" /></a><a href="http://danielsu0729.pixnet.net/blog/post/20560509" imageanchor="1" style="float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="32" width="96" src="http://photos1.blogger.com/blogger/4599/1186/1600/noautoplay.png" alt="我不喜歡自動播放" /></a><p style="clear:left;">(以上是串連貼紙,我「借」來用的)</p></div>
<h3>為什麼?</h3>
<ol>
<li>瀏覽者在瀏覽你的網頁時,可能正在聽自己的音樂。如果你的網頁蹦出另一段音樂,瀏覽的人會嚇到。</li>
<li>有些場合需要安靜,例如半夜十二點,或是在開會討論事情的時候。有人會在安靜的場合瀏覽你的網頁,請不要播放音樂打擾他們。</li>
</ol>
<p>如果要在網誌上放音樂怎麼辦?使用音樂播放器,並放上一個大大的 PLAY 按鈕,這樣就可以了。</p>
<p>那這跟「老師會不會教」有什麼關係?因為我知道有老師會在他的投影片上面教一個叫做 <bgsound> 標籤,而 <bgsound> 是一個非常爛的標籤,它除了不是W3C標準以外,它就是自動播放的元兇之一,而且 不 能 暫 停!</p>
<p>我不喜歡自動播放,這些人也是:</p>
<ul>
<li><a href="http://blog.ericsk.org/archives/357">可以不要自動播放音樂嗎?</a> - ericsk.net</li>
<li><a href="http://yoshigo0910.pixnet.net/blog/post/26610915-%E8%AB%8B%E4%B8%8D%E8%A6%81%E5%9C%A8%E9%83%A8%E8%90%BD%E6%A0%BC%E8%87%AA%E5%8B%95%E6%92%AD%E6%94%BE%E9%9F%B3%E6%A8%82">請不要在部落格自動播放音樂</a> - 無心戀花 (Pixnet)</li>
<li><a href="http://danielsu0729.pixnet.net/blog/post/20959646-%E6%88%91%E7%9A%84%E9%83%A8%E8%90%BD%E6%A0%BC%E4%B8%8D%E6%9C%83%E8%87%AA%E5%8B%95%E6%92%AD%E6%94%BE%E9%9F%B3%E6%A8%82">我的部落格不會自動播放音樂</a> - 發呆狂人 (Pixnet)</li>
</ul>Explorerhttp://www.blogger.com/profile/02900836041638807955noreply@blogger.com0tag:blogger.com,1999:blog-3616409810779065011.post-15625067138477686862012-11-27T19:03:00.002-08:002013-01-04T02:14:04.681-08:00學SEO的基礎之一:了解 title 的重要
<p>(這篇是寫給高中生以及大學生,目的就是要提醒他們注意,老師教網頁常忽略的重要細節。)</p>
<p>我上一篇談老師會不會教網頁的時候,有讀者 (剛好是我學長) 就說 SEO 教一個學期也教不完,但是教 SEO 的「基礎」,應該是很容易的事情啊!只要老師能體會到 SEO 的重要性就可以了。</p>
<a name='more'></a>
<p>SEO 的全名為 Search Engine Optimization ,或叫做「搜尋引擎最佳化」。 SEO 簡單的意思就是調整網站或網頁的內容,使得 Google 或 Bing 搜尋引擎更方便地找到你。由於網友找資料的時候都會習慣只點搜尋結果的前一、兩個頁面,所以當你的網站在搜尋結果的前方,就等於有很多網友會前來參觀你的網站。</p>
<p><a href="http://www.dns.com.tw/seo/?p=2862">什麼是SEO (Search Engine Optimization)? dns.com.tw</a> 這裡有很好的短片說明 SEO 基本上在做什麼事情。(英文短片,長3分半鐘)</p>
<p>我在這裡只想講 SEO 的其中一個基礎:網頁標題。</p>
<h2> 網頁標題有兩個: <title> 與 <h1> </h2>
<p>在我說明網頁標題與 SEO 之前,一定要先弄清楚一個概念,就是在網頁的 HTML 原始碼裡面有兩個表示標題的標籤,一個是 <title> ,一個是 <h1>。</p>
<p><h1> 的標題是給人看的。這個標題它預設會用最大的字來顯示,就如同報紙上的新聞大標題一樣,讀者一看報紙上的大標題就會知道這則新聞主要在說什麼。除非完全不會用 <h1> ,不然網頁設計者用 <h1> 標題是很少用錯的。</p>
<p><title> 的標題有兩個東西會看,第一是瀏覽器,第二是搜尋引擎,由於 <title> 不會直接影響到網頁的內容,所以這也是初學者(以及老師)常常會忽略的地方,也是我這篇文章的重點。</p>
<h2> 老師可能教你的 <title> </h2>
<p>以下是老師教我的,可能你們教網頁的時候也會常常聽過。</p>
<p>用 Dreamweaver 開啟網頁後,工具列上面有個「標題」欄位會顯示你的網頁標題,這個網頁標題就是瀏覽器左上方會顯示的標題字。</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-7QxU2LeQxRw/ULTU2wdBBfI/AAAAAAAAAC4/0DYMWpBteqA/s1600/page-title-dw.png" imageanchor="1"><img style="border:0" src="http://3.bp.blogspot.com/-7QxU2LeQxRw/ULTU2wdBBfI/AAAAAAAAAC4/0DYMWpBteqA/s1600/page-title-dw.png" alt="Dreamweaver 編輯網頁的畫面,標題欄位上寫著 "Untitled Document"." /></a><br/>在Dreamweaver上的標題欄位</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-RZsmvhA-OiU/ULTU5BSZLxI/AAAAAAAAADA/cpmcNUPFMnc/s1600/page-title-chrome.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:0" src="http://3.bp.blogspot.com/-RZsmvhA-OiU/ULTU5BSZLxI/AAAAAAAAADA/cpmcNUPFMnc/s1600/page-title-chrome.png" alt="Google Chrome 上瀏覽 http://4ratebig.com/i_cm.php ,頁籤上顯示著 "Untitled Document" (頁籤標題在圖上有加紅框標示);網頁內容則以「親愛的網站所有者!」作開頭。" /></a><br/> (在 Google Chrome 上瀏覽 http://4ratebig.com/i_cm.php)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-3z6Th1mZoXQ/ULTU7FG6ZMI/AAAAAAAAADI/fmN22zKRTwQ/s1600/page-title-ie.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-3z6Th1mZoXQ/ULTU7FG6ZMI/AAAAAAAAADI/fmN22zKRTwQ/s1600/page-title-ie.png" alt="IE8 上瀏覽 http://4ratebig.com/i_cm.php ,頁籤與視窗標題上皆顯示著 "Untitled Document" (頁籤標題與視窗標題有加紅框標示);網頁內容與上圖相同。" /></a><br/> (在 IE8 上瀏覽 http://4ratebig.com/i_cm.php)</div>
<p>嗯,老師說的沒錯,瀏覽器無論是 IE, Firefox, 或 Chrome ,左上方的確會顯示那個標題。可是網頁標題就只有這樣嗎?有些老師會漏掉以下的「精華」...</p>
<h2><title> 是搜尋引擎第一個注意的內容</h2>
<p>在搜尋引擎上, <title> 的網頁標題就是你的網站跟網頁的門面!因為你的 <title> 會變成搜尋引擎結果頁 (SERP) 上面的超連結標題,所以網友在 Google 上會不會注意你的網頁,有三分之一的機會是決定在你的標題。</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-SFUO7H0zy1g/ULTU8RrZASI/AAAAAAAAADQ/tthN0LaPfn4/s1600/page-title-google.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:0" src="http://2.bp.blogspot.com/-SFUO7H0zy1g/ULTU8RrZASI/AAAAAAAAADQ/tthN0LaPfn4/s1600/page-title-google.png" alt="Google 搜尋結果頁上 http://4ratebig.com/i_cm.php 排第一,它的超連結 (加紅框標示) 上面的文字即爲 "Untitled Document"" /></a><br/> (Google 搜尋 "Untitled Document" 的結果)</div>
<p>然後內容是三分之二。從上圖可以看到標題加內容一共有三行,也就是說標題佔三分之一。</p>
<p>所以,漏掉這個 <title> 的標題會是你自己的重大損失。</p>
<h2>怎麼寫網頁標題?</h2>
<p>我在網路上有找到很多怎麼寫好標題的文章,所以我不會在這裏重複那些內容,我只提出兩個重點,以及兩個重點背後的原因:</p>
<h3>1. 「網頁名稱 - 網站名稱」 以這種格式來寫標題</h3>
<p><title>標題應該同時有你的網頁名稱以及網站名稱,而且網站名稱放在後方。這個「網頁名稱」跟 <h1> 一樣可以是文章標題或是新聞標題。</p>
<p>第一點是搜尋引擎在作索引的時候,不會特別標記網站名稱。而讀者在點搜尋結果的時候也不會特別注意它。但是他們把你的網頁加書籤(或是在臉書分享)的時候,有些網友會想要知道你的網站是什麼。把網站名稱標在後方就是這個原因。</p>
<p>有些大站像 Amazon, Apple 會把網站名稱標在前方,這是<a href="http://www.useit.com/alertbox/microcontent-brand-names.html">特別的例外</a>,對小網站我建議別這樣用。</p>
<h3>2. 「前面幾個字」應等於你希望搜尋到的「關鍵字」</h3>
<p>這點對SEO沒有直接關係,但是它還是影響點閱率的一個重要因素。網頁標題的後方文字常常會被切掉,使得讀者有時候會看不到你標題後方的字。(想想看自己瀏覽的習慣,當你一次開很多頁籤的時候,每個頁籤的標題都會變很短。) 還有一點就是,讀者常常快速掃過搜尋引擎結果頁的標題,而在他掃瞄的同時,眼睛只會注意標題前方的字。所以<strong>越前面的字越重要</strong>,<a href="http://www.useit.com/alertbox/nanocontent.html">Jakob Nielsen 他們研究</a>說讀者只注意到前兩個英文單字,不過重點還是前面幾個字是重要的。</p>
<h2>參考資料</h2>
<ul>
<li><a href="http://sofree.cc/blogger-seo-title/">[Blogger]如何對文章標題做SEO優化? - 香腸炒魷魚</a></li>
<li><a href="http://blog.xuite.net/ridges/blog/15266194">SEO搜尋最佳化教學:如何下標題 ~ Brian's Memo ~</a></li>
<li><a href="http://sixrevisions.com/content-strategy/5-common-seo-mistakes-with-web-page-titles/">5 Common SEO Mistakes with Web Page Titles</a>
</ul>
<p>或 Google 搜尋 "title seo" 或 「網頁標題 seo」</p>Explorerhttp://www.blogger.com/profile/02900836041638807955noreply@blogger.com0tag:blogger.com,1999:blog-3616409810779065011.post-70556529010214274272012-10-29T00:34:00.000-07:002013-01-04T02:13:43.501-08:00網頁設計,如何判斷老師會不會教 (2/3)<h2>4. 教你使用 <font> 而不教你 CSS</h2>
<p>(這一項的字比較多,所以我分開po一篇文章)</p>
<p>許多舊的網頁相關書籍會教你如何修改網頁字型,大小,或是顏色,可是這些書教的方法是用過時的 <font> 而不是 CSS。我的老師就照著那書,把 <font> 教了下去。</p>
<a name='more'></a>
<h3>為什麼 <font> 不該教?</h3>
<p>在1998年,制定 HTML 標準的機構 W3C 把 <font> 列為 deprecated 標籤,也就是說不建議網頁設計者再使用它。</p>
<p><font> 標籤設計上有個主要問題,就是它在網頁上放與內容無關的外觀資訊,如果你在 Frontpage 或 Word 上常常修改字型或文字大小,
那麼這些隱藏的外觀資訊將會越來越冗長。這不只檔案大,你未來要修改字型的時候還要再花時間一段一段處理。</p>
<p>這一小段文字就用了 5 個 <font> 標籤,光 face="新細明體" 字樣就出現了 4 次:</p>
<pre><p><font face="新細明體" size="5"><b>我是標題</b></font></p>
<p><font face="新細明體">這是一段用新細明體顯示的文字,<font
size="+1">放大,<b>加粗</b></font>。</font></p>
<p><font face="新細明體">這一段字還是用新細明體。</font></p>
<p><font face="新細明體">這一段字用新細明體,<font
face="Arial">but I use Arial as the English font here.
</font> 你發現了什麼?</font></p></pre>
<p>預覽</p>
<div style="border: 1px gray solid;">
<p><font face="新細明體" size="5"><b>我是標題</b></font></p>
<p><font face="新細明體">這是一段用新細明體顯示的文字,<font size="+1">放大,<b>加粗</b></font>。</font></p>
<p><font face="新細明體">這一段字還是用新細明體。</font></p>
<p><font face="新細明體">這一段字用新細明體,<font face="Arial">but I use Arial as the English font here.</font> 你發現了什麼?</font></p>
</div>
<p>解決這種冗餘資料的方法就是把內容與外觀分開 (Separation of content from presentation),而分開的方法就是使用 CSS。 我以下改用 <style> 標籤然後放 CSS 語法在裡面: (需要支援 HTML5 的瀏覽器)</p>
<style type="text/css" scoped="scoped">
body, p { font-family: Arial, '新細明體', PMingLiU,
sans-serif; }
h1 { font-size: x-large; }
em { font-size: larger; font-style: normal; }
</style>
<h3>我是標題</h3>
<p>這是一段用新細明體顯示的文字,<em>放大,<b>加粗</b></em>。
</p>
<p>這一段字還是用新細明體。</p>
<p>這一段字用新細明體,but I use Arial as the English font
here. 你發現了什麼?</p>
<p>預覽</p>
<div style="border: 1px gray solid;">
<style type="text/css" scoped="scoped">
body, p { font-family: Arial, '新細明體', PMingLiU, sans-serif; }
h1 { font-size: x-large; }
em { font-size: larger; font-style: normal; }
</style>
<h3>我是標題</h3>
<p>這是一段用新細明體顯示的文字,<em>放大,<b>加粗</b></em>。</p>
<p>這一段字還是用新細明體。</p>
<p>這一段字用新細明體,but I use Arial as the English font here. 你發現了什麼?</p>
</div>
<p>這種寫法可以把外觀資訊分開,使得網頁的版型與樣式很容易地被修改。這就是為什麼各大網誌要修改外觀,都會使用 CSS 了。</p>
<h3>把內容與外觀分開 (Separation of content from presentation)</h3>
<p>這個概念很少有電腦老師會教,是因為現今的 Office Word, Excel, Powerpoint 的介面都強調「所見即所得」(WYSIWYG),所見即所得本身不是壞事----它可以讓人快速地開發、設計出作品。可是所見即所得有一個代價是大家看不到的,那就是維護變得困難。上面寫的 <font> 就是其中一個例子,另外一個例子是 ASP.NET:</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-XjKSz_hWR1E/UI4pE7QoH2I/AAAAAAAAACo/Eko_Qw03dYs/s1600/vwd2010-style.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="http://1.bp.blogspot.com/-XjKSz_hWR1E/UI4pE7QoH2I/AAAAAAAAACo/Eko_Qw03dYs/s320/vwd2010-style.png" width="320" /></a></div>
<p>在 ASP.NET 如果你直接調整控制項的 BackColor, BorderColor 等外觀的屬性,除了 CssClass 以外,都會跟 <font> 一樣將來有維護上的問題。</p>
<h3>我用 Office 的習慣</h3>
<p>在 Office Word (以及 OO.o Writer) 上面也有類似的功能可以把文件的內容與外觀分開,如下圖</p>
<table>
<tbody>
<tr>
<td>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-aO859LcUtgo/UI4pDdzu_hI/AAAAAAAAACQ/yHBfPQZXpMQ/s1600/office2003-style-list.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="151" src="http://2.bp.blogspot.com/-aO859LcUtgo/UI4pDdzu_hI/AAAAAAAAACQ/yHBfPQZXpMQ/s200/office2003-style-list.png" width="200" /></a></div>
(Word 2003 的樣式選單)
</td>
<td>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-w6cj8JAV9Pw/UI4pEDDiSqI/AAAAAAAAACc/N3ITfSPeEdQ/s1600/office2007-style-list.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="144" src="http://4.bp.blogspot.com/-w6cj8JAV9Pw/UI4pEDDiSqI/AAAAAAAAACc/N3ITfSPeEdQ/s200/office2007-style-list.png" width="200" /></a></div>
(Word 2007 的樣式選單)
</td>
<td>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-J8CinU5uFVQ/UI4pCY0DrLI/AAAAAAAAACE/gtud0ht6q74/s1600/libreoffice-style-list.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="161" src="http://4.bp.blogspot.com/-J8CinU5uFVQ/UI4pCY0DrLI/AAAAAAAAACE/gtud0ht6q74/s200/libreoffice-style-list.png" width="200" /></a></div>
(LibreOffice Writer 的樣式選單)
</td>
</tr>
</tbody>
</table>
<p>不過我個人覺得不太好用,所以我自己很少用它。我在寫文件草稿的時候,會習慣先用記事本打字,再複製貼上到 Word 裡去做排版,這樣我打字就不需要特別擔心字型等等的問題了。</p>
<p>參考資料</p>
<ul>
<li>http://newtoypia.blogspot.tw/2009/11/2009.html</li>
<li>http://www.htmldog.com/guides/cssbeginner/</li>
</ul>Explorerhttp://www.blogger.com/profile/02900836041638807955noreply@blogger.com8tag:blogger.com,1999:blog-3616409810779065011.post-26584140196136170102012-10-25T22:34:00.001-07:002013-01-04T02:13:50.166-08:00網頁設計,如何判斷老師會不會教 (1/3)<p>這是我自己學網頁的心得,應該是說,我修系上的網頁課加上自己找資料後的心得。<br />
<p>我發現台灣很多教網頁設計的老師們會教一些錯誤觀念,或是漏教一些很重要的東西,導致我的同學做出來的網頁不是沒內容就是爛到不能使用。<br />
<p>以下是我找出來的幾點「爛老師」可能會教你們的東西。這可能只是我的個人觀點,但是如果有老師教同學任何這些東西(而不說明它的壞處),我可以直接說他「<strong>不會教</strong>」或是「爛老師」。<br />
<a name='more'></a>
<h2>
1. 教你使用框架 (frames)</h2>
<p>使用 Frontpage 的人應該知道, Frontpage 裡面可以新增一個所謂「框架頁」(frameset)的東西。我很驚訝的是我系上的老師居然還教這個,甚至要求我在期末作業上展示!<br />
<p><strong>為什麼框架不該教?</strong></p>
<p>乍看之下,框架頁可以讓網頁快速分割成數個欄位,設計上比較方便,可是框架頁會增加使用者很多困擾,例如
<ul>
<li>網址列不會動 (它會一直顯示框架頁的網址)</li>
<li>瀏覽器的「加入書籤」只能加入框架頁,而不是含有內容的頁面</li>
<li>搜尋引擎不會認框架頁</li>
<li>印表機印框架頁可能會印出奇怪的樣子</li>
</ul>
<p>很少人可以把框架頁用得對,其中一種用對方法是針對每一個網頁內容各做一個框架頁 (解決前面兩個問題),但是比起無框架的網站,你會花多一倍的時間在維護框架上。所以除非你知道你在做什麼,不然用框架往往都是壞主意。<br />
<p>2012-11-11 補充:我這裡說的是框架頁,英文叫 frameset,請讀者別把 frameset 跟 framework 搞混了喔!
<p>參考資料<br />
<ul>
<li>(英文) <a href="http://godbit.com/article/why-are-frames-bad">Why Are Frames Bad?</a> (godbit.com)</li>
<li>(英文) <a href="http://www.html-faq.com/htmlframes/?framesareevil">Why are frames so evil?</a> (alt.html FAQ)</li>
<li>(英文) <a href="http://www.useit.com/alertbox/9612.html">Why Frames Suck (Most of the Time)</a> (Jakob Nielsen)</li>
</ul>
<h2>
2. (過於)注重網頁外表,而輕忽內容</h2>
<p>我知道很多人喜歡自己的網頁漂漂亮亮,希望能吸引一些人來觀賞。老師也是一樣 (他可以拿學生做的漂亮網頁去「炫耀」一番)。但是網頁不能只是「金玉其外」,沒有內容只有外表的網頁就如同一家餐廳,裝璜漂亮但沒有菜可以點(飯也沒有),所以沒有客人。<br />
<p>老師常常會忽略到網頁內容的重要性,至少我小學到大學,所有教過我網頁的老師都會這樣。<br />
<p>我這裡並不是說網頁完全不能裝潢 (那是 Content is King 的迷思),而是網頁的版面與設計絕對不能影響到使用者閱讀網頁內容。切記:內容跟易用性比美觀還重要。<br />
參考資料<br />
<ul>
<li><a href="http://people.ofset.org/~ckhung/s/cfws.php">金玉其表之下 -- 從行銷的角度看網頁設計</a> (洪朝貴)</li>
<li>(英文) <a href="http://www.thesitewizard.com/webdesign/usabilitysearchengine.shtml">Appearance, Usability and Search Engine Visibility in Web Design</a> (Christopher Heng)</li>
<li>(英文) <a href="http://www.thesitewizard.com/archive/myths.shtml">Two Common Web Design Myths</a> (Christopher Heng)</li>
</ul>
<h2>
3. 忽略搜尋引擎</h2>
<p>大家每次開瀏覽器第一個上的網站除了 facebook 以外會是什麼?應該是 Google 或 Yahoo 吧。<br />
<p>我們在網路上找資料找東西的時候,第一個使用的東西就是搜尋引擎。以網頁的設計者來說,搜尋引擎就是帶來人氣的主要管道,如果你的網站不對搜尋引擎好,網站就(幾乎)沒人光臨。對搜尋引擎好這種事情就叫做 SEO (搜尋引擎最佳化)。<br />
<p>很可惜,老師教我網頁時幾乎不提這個,只有我自己找資料之後才發現 SEO 的重要。對於公司網站來說,做 SEO 比開臉書的粉絲頁還重要! (當然公司兩個都做最好,我這裡只是說 SEO 比較優先而已) 如果公司的網站沒辦法被 Google 搜尋到,那公司的客戶(或是網站人氣)就會變得很有限。<br />
<p>順便提一下, SEO 可以讓網站有免費的關鍵字廣告,即使修改網站需要經費及時間,網站的管理者卻可以不需要付Yahoo錢就有關鍵字廣告可以用,我指的是公司品牌本身就會是「關鍵字廣告」。<br />
<p>參考資料<br />
<ul>
<li><a href="http://gordon168.com/what-is-seo.html">什麼是SEO搜尋引擎優化</a> (高登 SEO 網站)</li>
<li><a href="http://gordon168.tw/?p=304">瑤瑤也要SEO</a> (高登工作室)</li>
<li><a href="http://www.dns.com.tw/seo/?p=2862">什麼是SEO (Search Engine Optimization)?</a></li>
<li>(英文) <a href="http://www.useit.com/alertbox/seo-ux.html">SEO and Usability</a> (Jakob Nielsen)</li>
</ul>Explorerhttp://www.blogger.com/profile/02900836041638807955noreply@blogger.com2tag:blogger.com,1999:blog-3616409810779065011.post-55114185291397911812012-09-12T23:23:00.000-07:002013-01-04T02:13:55.820-08:00從星木映像官網來看台灣人的網頁設計注意:我在圖片上寫的字可能會很酸,但我沒有故意要冒犯的意思,我只是想指出大家學網頁設計常常忽略的重點,或是錯誤觀念。<br />
<a name='more'></a>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-frvzeg-79cI/UFF6JAhwWVI/AAAAAAAAABo/Ame54sq6YLo/s1600/starwood-bad-web-design.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="556" src="http://3.bp.blogspot.com/-frvzeg-79cI/UFF6JAhwWVI/AAAAAAAAABo/Ame54sq6YLo/s640/starwood-bad-web-design.jpg" width="640" /></a></div>
原網址: http://www.starwoodmovie.com/ <br />
<br />
<h4>基本問題</h4>
整個網頁使用 Flash,表示設計者想要拉大家成為Adobe的粉絲<br />
<h4>
導覽列的問題</h4>
<ol>
<li>導覽列不用中文字,你是在考驗大家的英文能力嗎?</li>
<li>文字還會左右跑來跑去,拜託,使用者不是來玩捉迷藏的好嗎?</li>
<li>白字配淡色底 = 看不到。</li>
</ol>
<h4>
內容問題</h4>
首頁空空一片,沒內容,這樣誰會知道星木映像是做什麼的?<br />
<h4>
底部文字</h4>
<ol>
<li>文字放在圖片裡,這樣搜尋引擎找得到才有鬼!</li>
<li>「建議使用IE 6.0或以上的版本瀏覽」所以你也要我們作微軟迷囉?<br />
(正確觀念:你的網頁要做到各大瀏覽器皆可通,你不應該限制使用者用 IE 或是 Firefox 或 Chrome 或 Opera 或 ...)</li>
</ol>
<br />
<h4>
底部計數器</h4>
放計數器,表示你是新手。記住,Google比計數器重要。Explorerhttp://www.blogger.com/profile/02900836041638807955noreply@blogger.com2tag:blogger.com,1999:blog-3616409810779065011.post-22162500836216635912012-07-13T02:10:00.000-07:002013-01-04T02:12:12.429-08:00如何設計臉書的封面相片 (我的模板)<a name='more'></a>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://dl.dropbox.com/u/70170658/fb_coverphoto_design/fb-coverphoto-template.png" imageanchor="1"><img alt="The size of the Facebook's cover photo (full size) is 851×315px. 臉書的「封面相片」的尺寸是851×315像素。" border="0" src="http://dl.dropbox.com/u/70170658/fb_coverphoto_design/fb-coverphoto-template.png" title="" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://dl.dropbox.com/u/70170658/fb_coverphoto_design/fb-hoverphoto-template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The size of the Facebook's "hover" photo should be at least 370×155px. Facebook will crop the 9px area above and below (colored blue here), so the actual size displayed is 370×137px." border="0" src="http://dl.dropbox.com/u/70170658/fb_coverphoto_design/fb-hoverphoto-template.png" title="" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://dl.dropbox.com/u/70170658/fb_coverphoto_design/fb-hoverphoto-template-zh.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="(zh-TW) 滑鼠移到任何人的名字上,會出現的小框框,它的底圖大小至少要 370×155 像素。注意上下 9 像素的藍色區域會被裁剪掉,所以底圖實際顯示的大小是 370×137 像素。" border="0" src="http://dl.dropbox.com/u/70170658/fb_coverphoto_design/fb-hoverphoto-template-zh.png" title="" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://dl.dropbox.com/u/70170658/fb_coverphoto_design/fb-coverphoto-combined-template-a.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="This is the combined picture. Size: 851×357px. 組合起來就變成這張圖,大小: 851×357px." border="0" src="http://dl.dropbox.com/u/70170658/fb_coverphoto_design/fb-coverphoto-combined-template-a.png" title="" /></a></div>
<br />Explorerhttp://www.blogger.com/profile/02900836041638807955noreply@blogger.com1