Wedding website

很久沒看到大家了, 一回去就要丟炸彈, 這這這… 這叫人情何以堪呢?

宣布喜訊用 Facebook, 現在連統計人數都要倚賴無遠弗屆的網路世界… 這, 這這這…

為了表達我們內心的小小歉意, 就決定架個網站來表達我們的誠意啦!!! ^^

 

說到寫 Blog 這件事, 雖然是源自於大學時代, 但, 大多虎頭蛇尾, 沒認真經營… 一直到結婚這件事, 我突然發現, 架站其實很有趣耶!!!!! 雖然是”架站”, 但也不是這麼厲害, 憑空生出來一個網頁… 基本上我找的網站他們都已經有最基本的模板, 再加上網路上無敵多的神人指導, 很容易就可以做出有模有樣的網站了喔!!!!

一開始會想架結婚網站純粹就是為了邀請函 (統計人數用), 但轉念一想, 既然都要做了就 “順便” 貼貼我們在美國的生活, 如果可以因此省下一些喜帖也很划算… (事實證明真的有很多人只要電子檔啊, 省下一筆小錢呢!!!) 不過這個 “順便” 也真是要累死我了… 因為一直爬文就一直有新的想法, 本來只是簡單的站, 瞬間也變得不簡單了呢!!!

 

我的網頁架構:
  • Intro
  • 愛情故事
  • e喜帖
  • 交通資訊
  • 愛的小窩
  • 我有問題

 

其實一般美國人會有 “關於我們“, 裡面會娓娓道來我當初認識的他 (她), 這也是我的影片靈感來源呢!! 但是我有點懶的寫稿, 所以, 我就直接以 “愛情故事” 充當了  ^^

最重要的邀請函 (人數統計表) 本來要緊接在愛情故事之後, 自己自成一頁, 但我怕大家忘記大家點進來的宗旨, 所以, 我就把他合併到 Intro 了!! 不然 Intro 的概念應該就是個很乾淨的動畫呢!!

PS. 現在邀請函已經失效了喔, 因為就只是一般的 Google Doc, 所以我就不修復啦 ^^”

 

好啦, 說了好多廢話, 我今天要介紹 2 個網站: WeddingWire & Google Sites (Google 協作平台), 他們雖然大同小異, 但各有特色喔!!!

WeddingWire 是美國的一個結婚網站, 裡面已經有為了結婚而設計的一些背版, 可以自行增加側欄的標題操作上也非常的簡單, 他最吸引我的除了花俏的背景 (如左下圖) , 還有下面這個 Intro (右下圖)… 有點像是網頁的華麗入口處 (喜歡歸喜歡, 但沒辦法用自己做的短片當 Intro 就很傷心啊…)!!! 而且, Google Map 沒有台灣這個選項, 自己設計的彈性比較低… 也沒有婚禮倒數… 音樂的部分只能全有或全無 (但也合理啦)…

PS. WeddingWire 已經全面改版了 (Since Dec. 20th, 2013), 很可惜的現在已經沒有提供 Intro, 音樂播放這些功能, 但, 最可惜的是, 現在也不能內嵌 Google Doc 了, 他們是有類似的功能叫做 RSVP, 但十分不適合台灣風俗… (是不是該慶幸自己畢業的早!!!!)

所以, 或許 WeddingWire 不再是大家的一個選項了, 好可惜, 這麼漂亮的一個網站… 唉, 可惜…

結婚網頁設計   結婚網頁設計

 

所以, 追求完美的我過不了多久就投靠 Google Sites 的懷抱了… 他雖然沒有華麗的背景, 但是他有很大的空間讓我自由發揮… 我可以自己設計上下的版面, 放一些小玩具 (婚禮倒數, 點閱人數…) 在側欄, 但是, 還是有讓我很無言, 到現在都無解的痛 (如下圖)… 唉唉, 你們就不能乖乖對齊嗎? 換個瀏覽器就不對齊了, 讓我很無言啊!!!

結婚網頁設計

 

順利把東西都搬到 Google Sites 後, 我還很開心的做了我們自己短短 14″ 的 Intro… (有音樂, 請小心)

 

寫到這邊, 不禁就手癢想順便教學一下…

Q: 如何把 Youtube 影片 embed (內嵌) 到網頁裡, 會 autoplay 又會 repeat 呢?
A: 在上傳完影片後, Share –> Embed, 你就會看到 code 如下, 確認 size 是你要的就可以把 code 複製下來

結婚網頁設計

 

以我的為例:

我設的尺寸是 560 x 315, 我的 playlist 是 SVgUjcPJOdo (會出現在下方綠色文字), 如果想要更改尺寸也可以直接改下面的程式碼. 不需要重新取得程式碼喔  ^^

<iframe width=”560” height=”315” src=”//www.youtube.com/embed/SVgUjcPJOdo” frameborder=”0″ allowfullscreen></iframe>

 

  • 如果你只要 autoplay, 在網址最後加上 “?autoplay=1” 就可以了

<iframe width=”560” height=”315” src=”//www.youtube.com/embed/SVgUjcPJOdo?autoplay=1” frameborder=”0″ allowfullscreen></iframe>

 

  • 如果你只要重複播放, 在網址最後加上 “?version=3&loop=1&playlist=SVgUjcPJOdo“, 原本的 “embed” 也要改成 “v” 就可以了, PS. 綠色的部分要改成你自己的 playlist 喔!!

<iframe width=”560” height=”315” src=”//www.youtube.com/v/SVgUjcPJOdo?version=3&loop=1&playlist=SVgUjcPJOdo” frameborder=”0″ allowfullscreen></iframe>

  • 同理, 如果你跟我一樣很貪心的同時要 autoplay + 重複播放, 在網址最後加上 “?autoplay=1?version=3&loop=1&playlist=SVgUjcPJOdo” & 原本的 “embed” 也要改成 “v” 就可以了, PS. 綠色的部分要改成你自己的 playlist 喔!!

<iframe width=”560” height=”315” src=”//www.youtube.com/v/SVgUjcPJOdo?autoplay=1?version=3&loop=1&playlist=SVgUjcPJOdo” frameborder=”0″ allowfullscreen></iframe>

 

小小心得分享給大家啦!!!

還要很現寶的炫耀我的專屬 Google Map 啦 (還有停車場位置喔)!!! 得意, 嘻嘻嘻!!!

google-map設計

 

雖然我最後還是投靠 Google Sites, 但是, 我覺得 WeddingWire 還是滿棒的, 很容易就可以上手喔 (PS. 更新版本後完全扣分, 不適用了, Sorry)!! 分享我的最終版給大家參考啦!!! –> 我的歸寧宴網站 by Google Sites: https://sites.google.com/site/ymrsvp526

 

延伸閱讀:

–> 更多的婚禮idea 都在 “♡ Marry Me ♡“!!!

現居德州, 致力於在平凡的生活中尋找不平凡, 在忙碌的生活中尋找只屬於我們的小幸福... 旅行。美食。生活。牽著手的三人行... 若無特別聲明, 本站所有文章皆為作者原創, 欲轉載請註明作者 & 文章出處, 請尊重智慧財產權, 謝謝~!!