此 Document 為 VMFive | Playable Advertising Technology 之說明文件

若有任何疑問，歡迎聯絡 Eugene，Thank you so much!

HTML FILES INCLUDED :

• Home
  • 繁體中文版 ••► home.html
  • 日文版 ••► home_japanese.html
• Products
  • 繁體中文版 ••► products.html
  • 日文版 ••► products_japanese.html
• Partners
  • 繁體中文版 ••► partners.html
  • 日文版 ••► partners_japanese.html
• About
  • 繁體中文版 ••► about.html
  • 日文版 ••► about_japanese.html
• News
  • 繁體中文版 ••► news.html
  • 日文版 ••► news_japanese.html

• home.html
  • section#slider（首頁最上頭的 carousel）
  • header#header（Menu Bar）
  • section.headerFill
             (headerFill 的用途是，防止下滑網頁時 header 的 position 從 relative --> fixed 造成網頁突然跳動一格）（若不明白，可試試看去除 headerFill 的結果）
  • section#features（包含四張圖的特色）
  • section#intro（Vimeo 影片介紹 adplay）
  • section#awards（獎項的 carousel 區塊）
  • section#partners（夥伴區塊 - 點 logo 可以切換描述）
  • section#news（三則新聞區塊）
  • section#hiring（招募 - 點中間字樣可導到 wantedly 頁面）
  • footer#footer（Footer）

• products.html
  • header#header（Menu Bar）
  • section.headerFill
             (headerFill 的用途是，防止下滑網頁時 header 的 position 從 relative --> fixed 造成 section 突然跳動一格）（可試試看去除 headerFill 的效果）
  • section#product（最上頭的背景自動播放影片）
  • section#adplay（AdPlay & Features 區塊）
  • section#benefit（The Benefits of AdPlay 區塊）
  • section#howitwork（How AdPlay Works 區塊）
  • footer#footer（Footer）

• partners.html
  • header#header（Menu Bar）
  • section.headerFill
             (headerFill 的用途是，防止下滑網頁時 header 的 position 從 relative --> fixed 造成 section 突然跳動一格）（可試試看去除 headerFill 的效果）
  • section#partners（Strong Partners 區塊，點 logo 可外連到新聞）
  • footer#footer（Footer）

• about.html
  • header#header（Menu Bar）
  • section.headerFill
             (headerFill 的用途是，防止下滑網頁時 header 的 position 從 relative --> fixed 造成 section 突然跳動一格）（可試試看去除 headerFill 的效果）
  • section#aboutIntro（公司簡介區塊：左圖＋右文字）
  • section#aboutHistory（公司歷史：火箭＋圖文）
  • section#team（團隊大頭貼區塊）
  • section#hiring（招募 - 點中間字樣可導到 wantedly 頁面）
  • footer#footer（Footer）

• news.html
  • header#header（Menu Bar）
  • section.headerFill
             (headerFill 的用途是，防止下滑網頁時 header 的 position 從 relative --> fixed 造成 section 突然跳動一格）（可試試看去除 headerFill 的效果）
  • section#news（Press Center 區塊）
  • section#news2（News 區塊）
  • section#vmmedia（九宮格媒體區塊）
  • section#hiring（媒體下載包 - 採用與 hiring 相同的 style， 點中間字樣可導到媒體包頁面）
  • footer#footer（Footer）

1. 主要 - CSS Style File ••► style.css（此份檔案開頭有 CSS code 結構解說如右）
2. 主要 - CSS Min Style File ••► style.min.css
3. 動畫 - CSS3 Animations CSS Style File ••► css/css3-animations.css
4. 一些小圖示 - Font Awesome CSS Style File ••► css/font-awesome.css
5. 古老的IE - Special CSS Style File For Any Fixes in IE ••► css/ie.css
6. RWD - Main Responsive CSS Style File ••► css/responsive.css
7. RWD - Main Responsive CSS Min Style File ••► css/responsive.min.css
8. Bootstrap - Bootstrap CSS Style File ••► css/bootstrap.css
9. Bootstrap - Bootstrap CSS Min Style File ••► css/bootstrap.min.css
10. Skins（主視覺顏色）：
    • （採用中的）VMFive Brand Style File ••► css/skins/brand-color.css
    • Blue CSS Style File ••► css/skins/sample-blue.css
    • Blue LESS Style File ••► css/skins/smaple-blue.less

< link rel="stylesheet" href="css/skins/brand-color.css" >

::-moz-selection {
background-color: #FC981C;
}
::-webkit-selection {
background-color: #FC981C;
}
::-o-selection {
background-color: #FC981C;
}
::-khtml-selection {
background-color: #FC981C;
}
......
			

總共有三份 javascript file，以及它們各自的 minified file

• complier.js : 把所有第三方 libraries 整合在同一份 .js 中以減少 requests 次數
• scripts.js : 包含所有 custom JS Codes(該份檔案的最底下) 和 Libs Options
• bootstrap.js : 恩，這個不用說明

• Google Analytics : 送出 GA pageview
• Language Detect : 偵測瀏覽器語言並跳轉至對應語言頁面
• Fluid Video Hack : 隨螢幕寬度自動調整影片區塊寬度

採用 7 Host Template

下載位置：https://www.dropbox.com/sh/u1n2tcn7t8vuhb4/AABe1_MXrDbBNowS65KPBGava/VMFive_template?dl=0