Onepage Website - 介紹

  • 這個教學是簡化過的單頁式網頁設計(One Page Website)。
  • 這個教學使用的是Bootstrap 3,而Joomla!內建的版本是經過修改的2.3.2版本,這兩個版本有一些差異,需要再調整過。

單頁式網站(One Page Website)

特性:

  • 整個網站只有一頁網頁,類似公司或產品的網路電子型錄,設計簡單、平坦化
  • 選單的項目只是捲動到(scroll)這一頁網站的某個區塊,一般都是使用HTML中的錨點(anchor)連結
  • 會應用許多特效,多半和捲動(scroll)、燈箱(lightbox)相關的Javascript特效。
  • 必定會使用"響應式網頁設計(RWD)",這是指網頁可以依照螢幕解析度,自動調整大小或給定觀看的內容

常見特效:

視差(Parallax)

背景圖或多個圖層,在捲動時的移動動作不同。更進階的應用為捲動動畫或影片背影。以下為範例:

這是進階的應用(捲動動畫)的範例:

平順捲動(Smooth ScrollTo)

用於選單項目,可以平順地捲動到某個區塊。以下為範例:

捲動間諜(Scrollspy)

根據捲動到的位置自動更新導航列(選單列)的項目,Bootstrap有內建這個功能。以下為範例:

Google地圖

加上Google地圖在網頁的某個區塊中,並且要取消地圖中的捲動功能。以下為範例:

動畫

註:本課程不包含這個教學

在捲動時,對某區塊中的資訊塊或圖片,呈現移入或移出,淡出或淡入等動作。以下為範例:

圖片(影片)輪播

註:本課程不包含這個教學

通常用於一進入網頁的區塊中的特效,目前都要求需要支援手機的手勢(左滑或右滑)。以下為範例:

圖庫(gallery)

註:本課程不包含這個教學

通常用於作品集或場地圖片等區塊,使用燈箱(Lightbox)之類的特效,點小圖直接放大圖觀看。以下為範例:

其他相關技術

  • icon字型
  • AJAX技術
  • off-canvas(滑動導航)列

準備工具(15分鐘)

已安裝好的Joomla!系統

安裝Joomla!需要先在個人電腦中先安裝執行環境,請參考以下的文件或影片資料:

程式碼編輯工具

相關套件下載