※阿拉丁-手機瀏覽網頁頁面製作-第一篇

透過阿拉丁學習如何建置網站,除了可以迅速幫你建立網站架構,還可以建置手機瀏覽的網頁頁面哦!

◎如下圖,日本的九州大學官方網頁就有手機版網頁供人閱覽

clip_image002

而今天我們也可以建置手機瀏覽的網頁頁面(如下圖),透過阿拉丁就可以做到唷!

clip_image004


Step1

首先進入阿拉丁網站後,請先到[首頁精靈]設定版面的比例,將[最左邊]的寬度設為100%],其餘中間與右邊的寬度比例皆為0%],設定完成後再按下[修改],才能完整儲存這次設定的內容哦!

clip_image006


(PART -1)首頁-主要標題建立
Step2

我們要先設置網站的首頁圖片,在左方主選單中,找[頁面設定],點選後在子選單裡選擇[頁面頁首設定],進入畫面後按下圖框右下方的箭頭小按鈕,即可叫出新視窗,再選擇欲上傳的圖檔,最後記得按下[修改]即可

clip_image007

(*注意:欲上傳的圖檔大小最好不要超過240*320cm!)

clip_image009


Step3

再來設定進入首頁網站,能使閱覽者快速瀏覽,進入其他連結頁面的設定。

首先在主選單的[頁面設定]中,選擇[頁首連結設定],進入後在[連結名稱]輸入文字,並勾選[原頁面]與資料[有效]後,於下方勾選[相關連結],並輸入欲前往的網址內容。全部設定完成後,在按下[新增]即可。

clip_image011

 

設定好首頁圖片與頁首連結後,到右上方的[前端]看看,就會出現設定好的樣子囉(如下圖)!

clip_image012


Step4

接著要來製作網站的首頁名稱,我們以「世新大學」的網站架構為例。

先從[模組管理]進入[相關連結模組]做設定,在[分類名稱]中輸入網站代表名稱,再來透過旁邊的小月曆點選[生效日期][失效日期],並在顯示內容設定中勾選[連結名稱],圖型尺寸則按[原始尺寸顯示],接下來則在每列個數設為[1]、每列明細也設定成1,而筆數限定則輸入為0,最後於下方勾[有效],並按下[新增],即可完成囉!

clip_image014


Step5

再來就是將此一資料模組(世新大學)放置首頁,進入[首頁精靈]中做設定,在最視窗左下方Add上頭找下拉式選單,按下倒三角形按鈕後,點擊[連結>世新大學](如圖中步驟1、2、3、4),最後再按下Add,即可完成啦!

clip_image015

 

設定好網站的首頁名稱與連結,並將連結模組放上首頁後,可到右上方的[前端]確認,看看是否順利出現完成設定的樣子(如下圖)!

clip_image017

※阿拉丁-手機瀏覽網頁頁面製作-第一篇 有 “ 2 則留言 ”

  1. 引用通告: ※阿拉丁-手機瀏覽網頁頁面製作-第四篇 « shuccedu

  2. 引用通告: 阿拉丁《用法Right,就愛配》讓網站好感無限加分課程(暗藏密技:製作手機行動網)影音全記錄(2012年) « shuccedu

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s