隨着移動互聯網的興起，越來越多的公司、個人把展示的內容轉到了手機網站上，學會製作手機網站就成了大家關注的熱點。傳統的網頁製作工具製作電腦端的網站功能很強大，但手機網站由於手機屏幕大小和CPU處理能力較弱，對網站的要求與傳統網站有很大的不同。如果用傳統的網頁製作工具設計手機網站需要的技術複雜，操作難度大，一般人很難完成。如果有一個傻瓜式的工具，讓用戶無需複雜操作就能完成手機網站的設計，將會大受歡迎。

手機網站展示

下面就給大家推薦的就是一款這樣的工具，使用它可以像搭積木一樣快速完成網站的設計，再也不用被專業技術名詞和操作包圍，痛苦難受了。

這個軟件叫WYSIWYG Web Builder，是一個所見即所得的網頁設計工具，體積小巧，使用簡單。這個軟件最大的特點就是採用了圖層概念，任何元素都是圖層，可以拖放到頁面上的任意位置，而不影響其他的元素，非常適合初學者使用。不需要學習html知識就可以設計一個手機網站。

WYSIWYG Web Builder

下面以設計一個網站的三個頁面為例，了解一下該軟件的使用，首先看一下這三個頁面的實際效果。

網頁實際效果

下面逐一介紹每個頁面的創建過程。

一、設計網站結構

要想做網站，首先要搭建網站結構，由於是演示，這個網站只有三個頁面：首頁、新聞資訊、關於我們。

啟動WYSIWYG Web Builder，程序自動新建一個空白頁面，這個頁面是PC端的，而我們要設計的是手機端網站，所以要進行更改。

在「站點管理器」中選中「無標題1」，單擊站點管理器工具欄中的「新建移動頁」按鈕，新建一個「頁面1」，重複上述操作，在新建「頁面2」、「頁面3」。選中index，單擊工具欄中的「刪除」按鈕，把這個pc端的頁面刪除，然後分別右鍵單擊頁面1、頁面2、頁面3，在彈出的菜單中選擇「重命名頁面」，將這三個頁面分別命名為index、news、about，對應於網站的首頁、新聞資訊、關於我們。

站點管理器

在編輯區看到網頁變成了手機的豎屏頁面，上面的標籤也也出現了三個頁面的名稱，下面就開始設計這三個頁面。

二、建立首頁

由四部分組成，由上到下依次是：標題、導航條、圖片、頁腳。

A、標題

單擊「插入—文本」的命令，在頁面上用鼠標拖動，產生一個文本框，雙擊這個文化，在其中輸入文字，然後在「格式」標籤頁中設置字體類型、大小、顏色、排列方式等。

B、導航條

單擊」插入—導航—導航欄」，在頁面上拖動，生成一個導航欄，雙擊導航欄，打開設置對話框，單擊「條目」右側的按鈕，進入導航欄對話框，在「名稱」列表中選中一個選項，單擊右側的「編輯」按鈕，可以設置文本名稱、連接頁面等參數。

導航欄對話框

單擊「添加」按鈕，可以新增項目，同時可以單擊「向下移動」和「向上移動」按鈕，調整條目的順序。

C、圖片

單擊「插入—圖像—從圖像文件」命令，在網頁上拖動，從本機中選擇一個圖片插入，可以拖動調整圖片的大小位置。

D、頁腳

單擊「插入—頁腳」命令，在頁面上拖動，插入頁腳，雙擊頁腳打開編輯窗口，單擊「條目」右側的按鈕，打開「常規」設置框，單擊「添加」按鈕，增加頁腳中包含的內容，在打開的窗口中輸入文本、指定圖標、設置好連接的頁面，重複以上操作，添加多個頁腳內容。返回頁腳設置對話框，在「圖標位置」下拉列表中選擇圖標的顯示方式，同時將標題中的Footer刪除。

頁腳編輯窗口

三、建立新聞資訊頁

有頁眉、頁腳、新聞列表3部分組成。頁腳與前面首頁中的相同，直接複製粘貼到當前頁即可。

A、頁眉

單擊「插入—標題」命令，在頁面中拖動，生成一個頁眉，它會自動處於頁面頂部，雙擊頁眉，打開設置對話框，在「左鍵按鈕」中，將文本改為「首頁」，URL指向index，將「右鍵按鈕」中的文本改為「關於我們」，URL指向about，將「雜項」中的標題改為「新聞資訊」。

頁眉對話框

B、新聞列表

單擊「插入—列表視圖」，在網頁中插入一個列表，雙擊它，打開設置對話框，在「名稱」列表中選中一個條目，單擊「編輯」按鈕設置文本、圖像、連接頁面等參數，單擊「添加」按鈕，可以添加新的條目。

列表視圖

四、建立關於我們頁

有頁眉、頁腳、可摺疊面板三部分組成。頁腳與前面相同，直接複製粘貼，也沒設置。頁眉設置不屬於新聞資訊頁相同，只不過是把「右鍵按鈕」中的URL改為news，即新聞資訊頁。

單擊「插入—可摺疊」，在頁面中插入一個可摺疊面板，默認有兩個面板，可以雙擊打開設置對話框，添加更多面板。單擊加號按鈕展開面板，然後將需要的元素插入其中即可。

可摺疊面板

五、預覽網站

在首頁標籤中單擊預覽按鈕或按F5鍵，用瀏覽器預覽網頁。

六、發佈網站

製作好的網站可以直接上傳到網站服務器上，也可以保存到本機上的某個目錄中，在「首頁」標籤中單擊「發佈」按鈕，打開發佈站點對話框。

發佈站點對話框

單擊「新建」按鈕，在「類型」列表中選擇「本地文件夾」，單擊「文件夾」右邊的按鈕，選擇一個保存網站的目錄，單擊「確定」按鈕返回。

添加發佈位置

單擊「發佈」按鈕，即可將製作好的網站保存到本機中，發佈完成後，打開保存目即可瀏覽設計好的網站，與上傳到網上的效果是完全一樣。

通過上面的實戰操作，我們可以體會到WYSIWYG Web Builder使用非常簡單。無須html知識，只需要點擊鼠標就可以完成網站的設計，簡潔高效，WYSIWYG Web Builder功能非常強大，你可以在製作中逐漸學習，越用你會越喜歡他。