用 Dreamweaver CS6 輕鬆完成手機網站選單
要架設手機網站, 聽起來好像很難, 比如手機螢幕上的觸控按鈕、選單、連結…該怎麼做呢？讓人不知該從何開始！不過, 只要你有 Dreamweaver
CS6, 一切就變得好簡單！因為它提供了所有你需要的設計元件, 包括：清單、可收合區塊、按鈕, 或是文字欄位、選取選單、核取方塊、選項按鈕…等,
只要點點按按, 即可做出適合手機裝置的介面, 下面就一起來編輯 jQuery Mobile 頁面吧！
[選取、新增與連結頁面]
例如我們要製作一個「FlagJapan 福拉格日本旅遊網」手機版網站, 它的結構如下：
由上圖可看出, 此網站總共需要 7 個頁面, 但是 Dreamweaver CS6 預設的 jQuery Mobile 頁面只有 4 頁,
因此首先要新增 3 個頁面, 並變更首頁的選單項目與連結。請開啟本書附贈光碟中的練習檔 Ex19-02.html, 其中已經建立好預設頁面,
您可以如下練習：
[選取 jQuery Mobile 頁面的 Div
區塊]
jQuery Mobile 頁面由許多 Div 區塊所構成, 一不小心很容易就選錯標籤。為了避免把元素置入到錯誤的位置, 在此就先來學習最基本的
Div 區塊選取方法, 讓編輯過程更順手吧！
滑鼠指標滑過 Div 區塊時, 會顯示藍色標籤, 點選標籤也可選取該 Div 區塊, 但有時多個藍色標籤會重疊在一起, 可能會無法準確地選取目標區塊,
此時便可利用上述方法來選取。
[新增頁面]
學會基本的 Div 區塊選取方法後, 接著要來實際新增頁面。jQuery Mobile 網站會把整個網站的頁面全都寫在同一個網頁中, 因此我們要在最後一個頁面
(第四頁, #page4) 之後再插入 3 個新的頁面：
首先將工作區切換成行動裝置應用程式。此工作區會將相關的面板都開啟, 方便製作 jQuery Mobile 頁面：
請點選最後一個頁面, 然後按→鍵將插入點置於頁面標籤的最後, 再按下插入面板 jQuery Mobile 頁次的頁面鈕, 即可在該頁面的下方插入新的頁面：
請比照上述方法, 繼續插入 2 個頁面 (#page6、#page7)。
[設定頁面連結]
新增好頁面後, 再來請參考上面的結構圖, 修改首頁的選項並設定連結。
「福拉格日本旅遊網」共有 5 個選項, 因此請再如下新增 2 個選項：
接著要替新增的 2 個選項設定連結：
最後你可按下即時鈕或F12鍵, 預覽頁面的新增與連結設定 (完成結果可參考書附光碟中的 Ch19-02.html)。
之後只要再插入圖片並修改文字, 就完成了這個網站的首頁設計, 如下圖所示。
.....更多內容請見《Dreamweaver CS6 魔法書
》
|
第399
期
