[心得] 簡單的一頁網站製作心得

[evenwu (EvenWu)]

分享一下 http://evendesign.tw/demo/999/ 這種單頁衝人數的製作心得筆記

標準html+css

       這是必須的

absolute layout

       這種作法在於簡單的一頁版面可以讓重點置中（垂直與水平皆置中）
       通常是主要logo或標語
       很有主題性

       使用方法：
       假設今天是h1要置中，A、B為你自定的寬高（必須定義才有辦法）

       h1 {
               position: absolute;
               width: A;
               height: B;
               top: 50%;
               left: 50%;
               margin-left: A/2;
               margin-top: B/2;
               }

       要記得A、B自己要計算阿...
       最後所有東西都設好了
       再把 z-index 設定加進去
       免得前後覆蓋不正確

ie6 css hack

       /*\*/
       * html h1 {
               background-image: url(xxx.gif);
       }
       /**/

       這東西是懶得去做pnghack，給ie6吃的一個規則
       把原本 h1 背景用的 png 換成另外特別作的 gif 檔案
       另外值得一提的是 absolute layout 很少會遇到ie6的css bug
       所以這個網頁只有這一個css hack而已

webkit animation

       由於這個東西跑起來比 js 動畫還要順（廢話）
       所以也給他玩了一下，讓中間的 h1 跳起舞來

       h1 {
               -webkit-animation-name: tp1;
               -webkit-animation-duration: 1.9555s;
               -webkit-animation-iteration-count: infinite;
       }

       @-webkit-keyframes tp1 {
               0% {
                   -webkit-transform: translate(-20px,0px);
               }
               10% {
                   -webkit-transform: translate(-20px,0px) rotate(-10deg);
               }
               20% {
                   -webkit-transform: translate(-50px,-50px) rotate(-30deg);
               }
               30% {
                   -webkit-transform: translate(-80px,20px) rotate(-30deg);
               }
               40% {
                   -webkit-transform: translate(-50px,-50px) rotate(-10deg);
               }
               60% {
                   -webkit-transform: translate(-20px,0px) rotate(10deg);
               }
               70% {
                   -webkit-transform: translate(50px,-50px) rotate(30deg);
               }
               80% {
                   -webkit-transform: translate(80px,20px) rotate(30deg);
               }
               90% {
                   -webkit-transform: translate(50px,-50px) rotate(10deg);
               }
               100% {
                   -webkit-transform: translate(-20px,0px);
               }
       }

       tp1 是自己定義的一個動作
       然後 @-webkit-keyframes tp1 就是指定 tp1 要怎麼做了
       由於我設定的是無限循環，所以必須注意 0% 與 100% 必須要一樣
       以及中間的步驟時間點（也可以當做key frame來說啦，類似）

       當然這玩意兒，只有 webkit 核心的瀏覽器能跑
       如 safari, chrome... 所以其他瀏覽器頂多不跳舞
       要記得這一點，當做是 bonus 吧

javascript

       jquery.js       http://jquery.com

       jquery.flash.js http://jquery.lukelutman.com/plugins/flash/
                       這東西我是拿來放歌用的
                       由於html5還不流行，只好偷卡一個swf放歌了...

                       *** 值得注意的地方是，原本我想把這個swf藏起來
                           但是發現 ff/win, chrome/win 等瀏覽器都不會放歌
                           可是 ff/mac, safari/mac 都可以放歌
                           查半天才知道是 swf 沒有跑起來
                           原來 win 裡面的 swf display 不能隱藏
                           所以後來就把這隻swf偷偷秀1px出來在角落
                           所有瀏覽器就順利播放了orz

       snowstorm.js    http://www.schillmania.com/projects/snowstorm/
                       這個是下雪的，只是他圖片可以自己定義
                       我不太喜歡blur視窗時為了省資源停住
                       所以把裡面凍結的程式註解掉就好了

       FancyZoom.js    http://www.cabel.name/2008/02/fancyzoom-10.html
                       這個是用來秀明翰哥的訂購單的js
                       可能有人覺得都用jquery了，有一堆lightbox秀圖
                       還用這有點浪費
                       不過我就是喜歡他的設計...
                       有很smooth的zoom效果
                       沒辦法，就用了XDDD

       bg.js           這一支是控制背景移動，就一直在那邊加數字
                       反正這種網頁也不可能看太久，就這樣吧

最後有兩個也是js的東西，是硬寫在html裡面的：

        onClick="javascript: void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(document.title)) .concat(' ') .concat(encodeURIComponent(location.href))));"
        onClick="javascript: void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('(') .concat(encodeURIComponent(document.title)) .concat(')')));"
        看你要放在哪個element都可以
        只是要記得style樣式，不然人家不知道可以點
        通常會加 cursor: pointer;

        加了這東西好處是可以傳遞的很快
        有plurk帳號的可以搜尋evendesign看看有多少浪

hosting

       東西做好之後，為了能夠阻擋大量鄉民人肉DDoS
       於是朋友支援了Amazon S3空間
       把靜態圖檔,js,css,以及最吃流量的mp3檔案
       通通都丟到S3去，就不用擔心主機掛掉的問題...
       S3是看你用多少算多少錢，而且很便宜
       這幾天鄉民一起測試的結果是85G左右，帳單大概會是US$15上下

       弄這個S3要注意的是js裡面的path與css裡頭的path要正確
       不然有可能白弄，忘記還是吃自己主機就糟糕了

       ***要上八卦版又要熱門，VPS一定要1G以上才有擋頭
          如果用一般便宜的shared hosting就等著炸掉XD

       如果說，原本沒有買hosting的人，可以考慮去租cloud hosting
       看需要來配置，也是可以擋很大流量
       瞬間與總流量都是要考慮進去的！

以上就是整個惡搞的心得，如果有想起來別的再補充。

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 210.64.16.123
推 Ramone:首推 !
推 tomin:很酷炫　可惜的是我Fx的stop autoplay擋下flash　又沒辦法開
推 wiipeer:cool!推推!
→ huge:要置中的話..何不考慮 body {margin: 0 auto;}
→ evenwu:您的置中方法無法控制垂直絕對置中
推 bobju:推!
推 ss163500:作者現身說法耶  大推!
→ ateclean:我的Opera看該網頁沒法垂直置中哩 會跑
→ evenwu:用opera開來測一下，沒問題耶 http://is.gd/1oWEa
→ evenwu:可能需要update opera版本？
推 shadowjohn:水~1px，我也是這麼用的Orz