tag:blogger.com,1999:blog-74323027750270963912024-03-06T12:28:20.509+08:00DFUNS 的工作筆記分享一些網站前端開發與使用者經驗的教學角落Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.comBlogger78125tag:blogger.com,1999:blog-7432302775027096391.post-6700192060721178162013-08-16T08:44:00.001+08:002013-11-16T14:47:46.379+08:00Javascript 輪播式廣告早期網路上常見的輪播式廣告大多是由 Flash 所完成,但近年來行動裝置的盛行再加上 IOS 不支援 Flash 以及 SEO 極差的情況下,網頁設計師紛紛向 Javascript 、 jQuery 來朝聖。用 Javascript 、 jQuery 來動畫製作效果不僅能排除前面所敘述的問題,更能相容於各家的瀏覽器。以未來整體趨勢來說,撰寫 Javascript 、 jQuery 將是一般網頁設計師所必備的基本技術。
對於現今業界上所看到的情況更是如此,一群 Designer 紛紛向此領域來靠攏;在求職時,公司對於 Designer 的求才條件更是將此技術列為評量之一。因此,未來將要進入此領域的各位,你們是不是要先準備好呢?俗話說~機會是留給準備好的人,不要淪落為「書到用時方恨少」的窘境。
好了~廢話不再多說了!請看以下 Demo 與解說~
Demo
DownloadAwayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-86877692302041627962013-08-13T11:02:00.002+08:002013-08-16T08:49:00.584+08:00Dreamweaver 行為 - 調換影像在使用網頁的經驗中,大家是否有遇過影像太小看不到細節的狀況?若是我們可以使用滑鼠滑入或點擊該影像,能在另一個區域中檢視到放大的影像,那應該是比較妥當的呈現方式!
一般的購物網站都有製作此機制,否則,使用者在購物中都只能看到小圖而看不到細節的顯示時,難免會對該商品的認知、品質產生懷疑、不安全感而不敢購買,自然而然地便損失了商機!
若我們製作此效果該用什麼樣方式來做呢?答案是 Javascript 、 jQuery ,誠如前篇所描述的一樣,若是不會撰寫 Javascript 不就挫咧蛋!現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果,在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用,點選後即會幫我們產生 Javascript 程式碼,所以各位也不必擔心不會撰寫 Javascript 語法的問題。
各位可點選下方的 Demo 連結以檢視成品展示Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-81511629952427847982013-08-12T08:55:00.000+08:002013-08-16T08:49:11.676+08:00Dreamweaver 行為 - 設定容器文字若各位要在網頁上與使用者做個小小的提示互動~沒有第二句話,就直接撰寫 Javascript 吧!
誠如前篇所描述的一樣,若是不會撰寫 Javascript 不就挫咧蛋!剛好遇到某些時候業務急著要、上司急著要、老闆急著要、客戶急著要、媽媽急著要(媽媽來亂的),怎麼辦?雙手一攤,到時再說吧!在工作職場上可不容許這樣的情況發生,若是做不出來總要有些補救方法吧!
現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果,在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用,點選後即會幫我們產生 Javascript 程式碼,所以各位也不必擔心不會撰寫 Javascript 語法的問題。
各位可點選下方的 Demo 連結以檢視成品展示。(將游標移至下方的五張縮圖中)
Demo
Download
接下來,我們就開始使用 Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-54152622008671207192013-08-09T14:27:00.001+08:002013-08-16T08:49:21.958+08:00Dreamweaver 行為 - 互動式更改文字大小各位有在上網時發現到某些網站內的文字內容過小而導致不易閱讀的情況嗎?遇到此情形,一般人通常都會使用 Browser 來縮放文字或畫面。但是,連結至其他網頁後,如果該網站在還沒放大時的文字顯示是合宜一般人的閱讀時,往往會因為之前的放大設定而套用到目前網頁中,此時就要再做縮小顯示。這樣一來一往的放大又縮小的確挺費時地。
因此,大部分的入口型網站都有製作一些使用機制,讓使用者依個人需求去選擇要顯示的文字大小,這些基本上都是使用 Javascript 或 jQuery 所撰寫而成的,若不會撰寫前面敘述兩種語法的人當然無法完成這種互動式更改文字。
現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果,在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用,點選後即會幫我們產生 Javascript 程式碼,所以各位也不必擔心不會撰寫 Javascript 語法的Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-81520559360346151362013-08-08T17:03:00.002+08:002013-08-16T08:49:37.659+08:00CSS3 Transform 變形效果 - 3D 篇再來篇差不多的文章,同樣是換湯不換藥~當然還是要為各位解說一下 CSS3 Transform 的 3D 基本觀念。首先,我要先釐清一下軸線的方向:
哇~真是太神奇了!在高興的同時別忘了~並不是所有的瀏覽器都有支援!請各位還是以先進的瀏覽器以進行檢視吧!
3D CSS3 Transform
Google Chrome
Safari
Firefox
IE
Opera
12.0
4.0
10.0
10.0
12.0
當 CSS3 Transform 與 CSS3 Transition 的邂逅
再來個同時使用的效果,以呈現出與使用者互動式的感覺較為有趣。請點閱下方 Demo 按鈕看成品展示。
Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-86343517117797947162013-08-07T13:24:00.001+08:002013-08-16T08:49:48.822+08:00CSS3 Transform 變形效果 - 2D 篇嗯~就叫它「變形效果」吧!
在 CSS3 中再加入了 Transform 效果囉!此屬性可產生一些簡單的 2D 變形如縮放、旋轉、傾斜。此外,更可產生 3D 的變形,這...真的是太強悍啦!
在高興的同時別忘了~並不是所有的瀏覽器都有支援!請各位還是以先進的瀏覽器以進行檢視吧!
2D CSS3 Transform
Google Chrome
Safari
Firefox
IE
Opera
1.0
3.2
3.5
9.0
10.5
CSS3 Transform 基本變形
首先,先介紹一下 CSS3 Transform 的一些簡單的基本控制:
Transform 常用的屬性值:
scale:縮放。&Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-2947270570620133272013-08-06T14:19:00.002+08:002013-08-16T08:50:02.724+08:00CSS3 Transition 轉場動畫應用實例 - 滑動廣告篇再來一篇換湯不換藥的範例,我們稱它為滑動廣告!其觀念是與前篇一模一樣,僅僅是 HTML 結構不一樣而已!請各位仔細聽我說來...
若還不熟悉請見以下兩篇文章~
淺談 CSS3 Transition 轉場動畫效果
CSS3 Transition 轉場動畫應用實例 - 滑動選單篇
Demo
Download
簡單的描述一下 <div> 的關鍵屬性:
<div.mask>:設定 overflow 為 hidden,將超出範圍的部份隱藏起來。
<div.boxWrap>:包覆 <div.box1> 與 <div.bo2> 區塊,便於移動控制。
<div.box1>:放入所需資訊。
<div.box2>:放入所需資訊。
載入畫面後的一般狀態如下圖左所示;當滑鼠滑入(:hover)Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-20679520212284062272013-08-05T09:04:00.003+08:002013-08-16T08:50:20.723+08:00CSS3 Transition 轉場動畫應用實例 - 滑動選單篇不知各位有沒有仔細研讀 淺談 CSS3 Transition 轉場動畫效果 的文章內容呢?如果沒有仔細研讀的話,請趕快回去複習一番!否則,會不知道接下來我要做什麼喔!?
接下來,要教各位利用 CSS3 Transition 來製作出網路上常見的滑動選單效果。各位可以點選下方的 Demo 連結來檢視一下效果的呈現!( 請各位還是要注意一下前篇提供給各位的各家瀏覽器支援度 )
Demo
Download
此選單效果的製作觀念相當容易理解,只要稍微點一下大家就知道了 !!
各位只要釐清兩種不同狀態即可,分別為一般狀態,如下圖左;當滑鼠滑入到連結區的狀態,如下圖右。
聰明的各位是不是已經發現不同點了呢?
沒錯!!就是在滑入的狀態時,<a> 區塊的 margin-top 的屬性值設定為 -41 px。
接下來,我們就來看一下 CSS3 coding (Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-87571487565109384062013-08-04T19:15:00.003+08:002013-08-16T08:50:35.225+08:00淺談 CSS3 Transition 轉場動畫效果哇... CSS3 出現轉場效果了耶!也就是俗稱的動畫效果~讓您的滑入( :hover )不再是死板板的變化了!不過,還是請各位不要使用腦殘的 IE 來觀看喔!否則的話,是看不到 CSS3 Transition 的轉場動畫效果喔!以下幫各位整理一下瀏覽器的支援性~
IE6 IE7 IE8 IE9 Firefox Opera Google Chrome Safari
X X X X O O O O
以下提供幾個相關的網站,搜集了一些 CSS3 Transition 的轉場動畫效果應用,大家在觀看他們範例網頁的時候,可將游標滑入並滑出連結區域試試看,就會看到Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0台灣新北市24.9157122 121.6739370999999923.9946252 120.3830436 25.8367992 122.96483059999998tag:blogger.com,1999:blog-7432302775027096391.post-24069645562476545302011-05-03T20:30:00.001+08:002013-08-04T18:54:39.867+08:00公司網站的七大錯誤在這個網路時代,擁有一個網站能為公司錦上添花,提升公司的能見度與資訊傳遞的範圍,然而錯誤的網頁設計卻可能造成反效果。公司雜誌(Inc.)訪問了六位頂尖設計師和創意總監,將這些專家深痛惡絕的設計元素整理成七大項。且讓我們聽聽這七大罪惡是什麼。
以自己的設計為第一優先。創意副總監歐瑞果(Andres Orrego)表示,網頁的重心應該是使用者所需要的資訊,而不是那些花俏的設計。它應該讓使用者能夠自然地瀏覽該網頁,迅速地獲得資訊。
過量的Flash動畫。設計顧問拿瓦列特(Antonio Navarrete)認為,雖然動畫能為網頁增色,但今天的客戶想要的是提升網站的能見度,所以網頁設計要以提高網站在搜尋引擎的排名為原則,而在這種情況下,Flash動畫就不見得有那麼高的必要性了。
驅逐訪客的歡迎畫面。在點進某些網站時,頭一個看到的不是首頁,而是彈跳出來的歡迎畫面。設計專家卡佛瑞克(Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-10073212624654168522011-03-29T15:37:00.006+08:002013-04-26T08:53:19.737+08:00inline-block對於各家瀏覽器的呈現將清單設定為水平的方式最常用的方法就是對 li 設定 float:left ,用久了亦會過於乏味。最近在案子中 Amos 使用到 display:inline 也是不錯的選擇,只不過配合使用的 inline-block 此屬性對於 IE6、IE7 有些小小的問題。請看下列示範 ~
如果設定 li 為 inline 屬性,在每個瀏覽器中測試出來的結果是每個 li 區塊間都會有一點小空間,並不是使用 margin 所造成的。如下圖所示:
此時,再將 a 與 span 設定為 display:inline-block 並套用 background 後所呈現(適當控制文字色彩與高度)以下效果。要注意:在 IE6、IE7 中,游標移置區塊上會發現到並不會出現”手指符號”,由此可見~ IE6、IE7 對於 inline-block 這種屬性設定值有待加強。其實,只要再加上 cursor:Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-63107111404872948002010-06-14T11:47:00.001+08:002013-01-22T13:12:29.252+08:00讀入XML資料利用陣列方式去讀取外部檔,各位只要更改陣列的內容,就可以更改載入的外部檔案,是不是相當地方便?但是,要更改陣列內容勢必還是得開啟FLASH軟體才能修改,並重新發佈與上傳!!
所以,現在要教各位另一種方式來載入資料,那就是XML。目前各大網站中的一些廣告輪播都是採用XML當架構,再透過flash將相關的資訊呈現出來。透過XML的資訊,便可動態的更換FLASH中的內容,因此當下次要更換圖片、廣告、資訊時,只要修改XML檔,隨即畫面就會跟著一起變更了,完全不用動到FLASH,所以只要辛苦一次將FLASH的效果製作完畢後,日後更新只要修正XML檔就可以了,是不是很方便呢?
以下為XML的架構內容:
<?xml version="1.0" encoding="utf-8"?> <data> <Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-90082689077224594382010-06-13T13:52:00.001+08:002013-01-22T13:16:21.666+08:00救生圈(網格工具+剪裁遮色片)由於複合路徑無法執行網格填色的功能,所以在此利用剪裁遮色片的觀念,運用在網格填色上。
1.利用「網格工具」調整好色彩的分佈與路徑。
2.選取兩物件並執行「物件→剪裁遮色片→製作」。
3.再做適當修飾即可。 Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-47742172501067690532010-06-12T17:30:00.000+08:002013-01-22T13:12:48.693+08:00定時執行函數/清除定時執行函數使用setInterval()函數可依指定時間間隔,重複呼叫執行函數。呼叫clearIntervla()函數可終止setInterval()函數執行的函數。
以下為語法結構: 定時器物件變數 = setInterval( 欲執行的函數 , 時間設定 ) ※時間設定參數是以毫秒為單位 clearInterval ( 定時器物件變數 )
接下來,筆者就做個簡單小案例:
1.請先準備影像並放入影格中,如下圖所示。在圖中,筆者準備了分別命名為AS、text、photo的圖層。 AS圖層:可放置待會要撰寫的ActionScript 。 text圖層:分別放置了靜態文字(為識別使用,可不增加)。 photo圖層:分別放置了九張不同的影像內容。
2.在AS圖層中撰寫以下程式碼: stop(); var Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-62616177483655180162010-06-11T22:04:00.007+08:002013-01-22T13:16:32.458+08:00小丑魚(網格工具+剪裁遮色片)複雜輪廓雖然可以製作網格填色,但容易形成糾結扭曲的網格,不易控制色彩分佈,所以也可以利用剪裁遮色片功能,在複雜輪廓內製作整齊的網格。
1.利用網格工具調整好色彩的分佈與路徑
2.執行「物件→剪裁遮色片→製作」
3.再做適當修飾即可。
Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-59197961678882807452010-05-30T20:19:00.001+08:002013-01-22T13:13:10.258+08:00有條件執行的迴圈敘述與亂數區間控制(大樂透)這案例是有學生提~我才會做!!正所謂"會吵的小孩有糖吃",不然,此案例只會在我的隨身碟中繼續封存下去~><~
此案例分兩個部分來製作: 1.先抓出六組亂數區間1~49個號碼,並分別顯示在動態文字框內。在Flash中的亂數區間為0<=N<1,知道亂數的max、min便可求出1~49的區間值。如果跑出不是在1~49的亂數值,請仔細檢查您的語法使否有錯!!否則,請您找我領一罐小瓶養樂多。 get_btn.addEventListener(MouseEvent.CLICK,getNum); function getNum(e:MouseEvent):void { var r1:Number = Math.floor(Math.random() * 49) + 1; &Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-28420520763371585552010-05-23T14:57:00.011+08:002013-01-22T13:13:24.008+08:00摩擦力(漸進移動)摩擦力是指物體在運動時遇到阻力而漸漸地變慢,這樣的效果也常常運用在Flash中。如果是使用補間動畫裡的"減速"也可達到,但有些呆板!!而使用程式碼來製作摩擦力效果的話,則可以讓整個移動方式變得很靈活,甚至可以即時更改要移動到的目標位置,且相當的自然,以下就是為各位所做的示範:
1.請自行開啟一個Flash文件(AS 3.0)。
2.準備一個影片片段元件並輸入實體名稱ball。
3.在影格上建立一個as圖層(建議各位將您的設計元素與程式碼分開較好管理),如下圖:
4.指定as圖層的第一格並於動作面板中鍵入以下程式碼: this.addEventListener(Event.ENTER_FRAME,easing); function easing(e:Event):void { ball.x = Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-46258461848010891152010-05-22T01:17:00.010+08:002013-01-22T13:16:40.982+08:00天空之城(網格工具)嘿嘿!各位~新書內容又來囉!
不過,以下教學就僅有雲朵的繪製而已喔!主要還是把案例重心擺在網格工具的使用。做法還蠻簡單的,不算太難!!但...以網格工具製作的物件還是需要耐心地。筆者不算是有耐心之人,再加上最近天氣日漸炎熱,筆者畫到都已經要罵出三字經了...
天空之城篇
追日篇
首先產生任意矩形並利用「物件建立漸層網格」,來產生所需之網格數目。
以「套索工具」與「直接選取工具」來選擇錨點並填入適當填色,如下:
接下來,使用「直接選取工具」來修改其錨點位置與把手力道。
加個物件放在雲朵下來當作襯底。
套用「效果Photoshop效果模糊高斯模糊」。
可依此方法再多做幾朵並適當排列即可。
Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-5594235370521543102010-05-19T14:46:00.011+08:002013-01-22T13:17:15.019+08:00PSP商品繪製(漸層工具)看到這案例有沒有很眼熟?沒錯!是在CS4-Ai書上的案例~
這插圖不知道是在幾年前畫的?不過...當初有許下個願望,等到繪製完成後也要敗一台來玩玩。多年後的今天...筆者還是買不下手(都已經出新機型了),還在望梅止渴!!
利用「路徑管理員」視窗製作出以下造形並填入漸層色。
以「物件→路徑→位移複製(往內縮)」,產生另一個形狀並給其不同的漸層色彩即可呈現出厚度的效果。
再次利用「路徑管理員」視窗製作出以下造形並填入漸層色。
再次以「物件→路徑→位移複製(往內縮)」,產生另一個形狀並給其不同的漸層色彩即可呈現出厚度的效果。
製作此造形來當作按鈕上的面板。
繪製此造形並套用「效果→模糊→高斯模糊」,來當作反光的位置。
以「橢圓型工具」繪製出圓形並適當排列來當作造形孔。
製作螢幕部分(文字工具、路徑管理員、漸層工具)。
製作以下形狀並調整漸層Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-23333646234336140812010-05-19T13:46:00.019+08:002013-01-22T13:17:23.976+08:00iPod Shuffle商品繪製(漸層工具)某年某月的某一天在網路上看到這項商品時發現到,造型這樣簡單的MP3真好看,不需要有多餘的設計裝飾也相當的有感覺。
當然...對於我這樣愛繪製商品插畫的人是絕不可能放過的!!以下就是筆者的繪製心得,未來也會在CS5-Ai的書上與各位見面!!請各位先睹為快~
請先繪製一矩形物件並填入漸層色彩,如下圖:
利用同心圓並配合「路徑管理員→減去上層」來完成環狀物件,填入放射狀漸層填色。
利用「矩形工具」、「多邊形工具」、「鏡射工具」來完成以下介面。
如要製作多色系的呈現,請選取填入漸層色的矩形物件並執行「編輯→拷貝」、「編輯→貼至上層」,並更改為單一色彩。套用「透明度→色彩增值」即可完成,如下圖:
最後倒影的製作請參考這篇文章 - 倒影效果的製作 -
就這樣做完了...懷疑嗎?就這麼簡單!!Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-67515560885513785712010-05-18T10:28:00.013+08:002013-01-22T13:17:33.273+08:00既然拍不出來...那就用畫的吧!(網格工具)
產生一矩形物件並填入黑色,至「物件→建立漸層網格」調整所需的橫欄與直欄。
利用「直接選取工具」選取錨點並填入所需之色彩。
修改錨點與把手的位置並調整細部色彩。
可多找幾張花花草草的影像置入到Illustrator中,並利用「物件→即時描圖」將點陣圖向量化。
展開即時描圖之屬性,並將向量化之物件做適當修整,再放置於網格物件上(可重複利用)。
再另外繪製一矩形,依之前的方法來「建立漸層網格」並填入色彩。
配合「彎取工具」來扭曲其造形,完成雲朵不規則的外型。
套用「效果→Photoshop效果→模糊→高斯模糊」來達成邊緣柔化之效果。
將雲朵造形放置於網格物件上的適當位置,套用「透明度→柔光」與「不透明度」即可完成(可重複利用)。
Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-46589473227459400952010-05-17T15:49:00.003+08:002013-01-08T03:28:56.176+08:00十年後人類以無性生殖為主~「性」只為娛樂!澳洲科學家預測,十年以後人類將是以無性生殖為主了。性將只是娛樂,不再負責傳宗接代。
澳洲梅鐸大學獸醫博士岳維奇說,由於試管技術日益精進,再加上傳統的受孕方式效率太低。因此,他認為十年以後,很多男女都會選擇直接用試管受精的方式,孕育下一代。
岳維奇說,經由性交懷孕的比例過低。即使是二十多歲,身體狀況都很好的年輕夫妻,成功受孕的機會也只有四分之一。他說,目前試管嬰兒的成功率已經高達五成,十年以後應該可以達到百發百中的目標。所以,大膽預測十年以後性生活就只剩下作愛的功能,不需要負責傳宗接代了。
這一天真正到來的時候基督宗教也會受到很大的衝擊。因為教會一向認為性愛的任務就是繁衍後代。要是生孩子不勞父母同床,或許教會就會規定夫妻分房了。
引用 - YAHOO新聞 -Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-15662113542396564342010-05-13T00:57:00.010+08:002013-08-04T16:49:16.248+08:00在Blogger中顯示簡易的程式碼區第一步請先把以下的 CSS 貼入<head>...</head>之間
CODE {
display: block; /* fixes a strange ie margin bug */
font: 9pt/1.5em Courier New;
overflow:auto;
background: #f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-90620012099637495202010-05-12T15:59:00.006+08:002013-01-08T03:28:56.227+08:00這家飯店的服務真是好呀!今天收到了一個掛號,郵差通知的時候我還以為又是罰單來了,心裡又是一陣OOXX。
誰知~拿到手卻是一個包裹。原來是前幾天為了慶祝母親節,全家到了礁溪老爺酒店去度假慶祝,在離開時所遺忘的衣物。瞧!!寄來時的外包裝(郵局的外包裝)
拆開外包裝後,裡面還用一層牛皮紙袋包裝著。
再拆開來就可以看到我的外套(還有一層透明袋裝著),老實說~看了就是一個字~"爽"!
原來~貴!不是沒有原因的(不知道有沒有順便幫我洗一洗?)。在那裏真有賓至如歸的感覺,服務真是好...下次還要再去!!
Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0tag:blogger.com,1999:blog-7432302775027096391.post-37392162732058993122010-05-11T16:15:00.007+08:002013-01-08T03:30:39.835+08:00在Blogger中加入分享書籤今天為自己的Blogger加個分享書籤,希望這樣對網站的人氣有些幫助...XD
簡單來說,要在每一篇post都加上分享書籤,必須先找到blogger中,用來跑出每一篇post的程式碼位置。以在下Blogger為例,將分享書籤加在文章標題下方,就必須先找到<div class='post-header-line-1'/>(記得要先展開小裝置範本)。在這行下方,貼上分享書籤的HTML即可。
詳細內容如下:
<div class='post-header-line-1'/>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>分享至FB</a><script src='http://static.ak.fbcdn.net/Awayhttp://www.blogger.com/profile/04562232020083696747noreply@blogger.com0