手機網(wǎng)站展示

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

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

WYSIWYG Web Builder

下面以設計一個(gè)網(wǎng)站的三個(gè)頁(yè)面為例，了解一下該軟件的使用，首先看一下這三個(gè)頁(yè)面的實(shí)際效果。

網(wǎng)頁(yè)實(shí)際效果

下面逐一介紹每個(gè)頁(yè)面的創(chuàng )建過(guò)程。

一、設計網(wǎng)站結構

要想做網(wǎng)站，首先要搭建網(wǎng)站結構，由于是演示，這個(gè)網(wǎng)站只有三個(gè)頁(yè)面：首頁(yè)、新聞資訊、關(guān)于我們。

啟動(dòng)WYSIWYG Web Builder，程序自動(dòng)新建一個(gè)空白頁(yè)面，這個(gè)頁(yè)面是PC端的，而我們要設計的是手機端網(wǎng)站，所以要進(jìn)行更改。

在“站點(diǎn)管理器”中選中“無(wú)標題1”，單擊站點(diǎn)管理器工具欄中的“新建移動(dòng)頁(yè)”按鈕，新建一個(gè)“頁(yè)面1”，重復上述操作，在新建“頁(yè)面2”、“頁(yè)面3”。選中index，單擊工具欄中的“刪除”按鈕，把這個(gè)pc端的頁(yè)面刪除，然后分別右鍵單擊頁(yè)面1、頁(yè)面2、頁(yè)面3，在彈出的菜單中選擇“重命名頁(yè)面”，將這三個(gè)頁(yè)面分別命名為index、news、about，對應于網(wǎng)站的首頁(yè)、新聞資訊、關(guān)于我們。

站點(diǎn)管理器

在編輯區看到網(wǎng)頁(yè)變成了手機的豎屏頁(yè)面，上面的標簽也也出現了三個(gè)頁(yè)面的名稱(chēng)，下面就開(kāi)始設計這三個(gè)頁(yè)面。

二、建立首頁(yè)

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

A、標題

單擊“插入—文本”的命令，在頁(yè)面上用鼠標拖動(dòng)，產(chǎn)生一個(gè)文本框，雙擊這個(gè)文化，在其中輸入文字，然后在“格式”標簽頁(yè)中設置字體類(lèi)型、大小、顏色、排列方式等。

B、導航條

單擊”插入—導航—導航欄”，在頁(yè)面上拖動(dòng)，生成一個(gè)導航欄，雙擊導航欄，打開(kāi)設置對話(huà)框，單擊“條目”右側的按鈕，進(jìn)入導航欄對話(huà)框，在“名稱(chēng)”列表中選中一個(gè)選項，單擊右側的“編輯”按鈕，可以設置文本名稱(chēng)、連接頁(yè)面等參數。

導航欄對話(huà)框

單擊“添加”按鈕，可以新增項目，同時(shí)可以單擊“向下移動(dòng)”和“向上移動(dòng)”按鈕，調整條目的順序。

C、圖片

單擊“插入—圖像—從圖像文件”命令，在網(wǎng)頁(yè)上拖動(dòng)，從本機中選擇一個(gè)圖片插入，可以拖動(dòng)調整圖片的大小位置。

D、頁(yè)腳

單擊“插入—頁(yè)腳”命令，在頁(yè)面上拖動(dòng)，插入頁(yè)腳，雙擊頁(yè)腳打開(kāi)編輯窗口，單擊“條目”右側的按鈕，打開(kāi)“常規”設置框，單擊“添加”按鈕，增加頁(yè)腳中包含的內容，在打開(kāi)的窗口中輸入文本、指定圖標、設置好連接的頁(yè)面，重復以上操作，添加多個(gè)頁(yè)腳內容。返回頁(yè)腳設置對話(huà)框，在“圖標位置”下拉列表中選擇圖標的顯示方式，同時(shí)將標題中的Footer刪除。

頁(yè)腳編輯窗口

三、建立新聞資訊頁(yè)

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

A、頁(yè)眉

單擊“插入—標題”命令，在頁(yè)面中拖動(dòng)，生成一個(gè)頁(yè)眉，它會(huì )自動(dòng)處于頁(yè)面頂部，雙擊頁(yè)眉，打開(kāi)設置對話(huà)框，在“左鍵按鈕”中，將文本改為“首頁(yè)”，URL指向index，將“右鍵按鈕”中的文本改為“關(guān)于我們”，URL指向about，將“雜項”中的標題改為“新聞資訊”。

頁(yè)眉對話(huà)框

B、新聞列表

單擊“插入—列表視圖”，在網(wǎng)頁(yè)中插入一個(gè)列表，雙擊它，打開(kāi)設置對話(huà)框，在“名稱(chēng)”列表中選中一個(gè)條目，單擊“編輯”按鈕設置文本、圖像、連接頁(yè)面等參數，單擊“添加”按鈕，可以添加新的條目。

列表視圖

四、建立關(guān)于我們頁(yè)

有頁(yè)眉、頁(yè)腳、可折疊面板三部分組成。頁(yè)腳與前面相同，直接復制粘貼，也沒(méi)設置。頁(yè)眉設置不屬于新聞資訊頁(yè)相同，只不過(guò)是把“右鍵按鈕”中的URL改為news，即新聞資訊頁(yè)。

單擊“插入—可折疊”，在頁(yè)面中插入一個(gè)可折疊面板，默認有兩個(gè)面板，可以雙擊打開(kāi)設置對話(huà)框，添加更多面板。單擊加號按鈕展開(kāi)面板，然后將需要的元素插入其中即可。

可折疊面板

五、預覽網(wǎng)站

在首頁(yè)標簽中單擊預覽按鈕或按F5鍵，用瀏覽器預覽網(wǎng)頁(yè)。

六、發(fā)布網(wǎng)站

制作好的網(wǎng)站可以直接上傳到網(wǎng)站服務(wù)器上，也可以保存到本機上的某個(gè)目錄中，在“首頁(yè)”標簽中單擊“發(fā)布”按鈕，打開(kāi)發(fā)布站點(diǎn)對話(huà)框。

發(fā)布站點(diǎn)對話(huà)框

單擊“新建”按鈕，在“類(lèi)型”列表中選擇“本地文件夾”，單擊“文件夾”右邊的按鈕，選擇一個(gè)保存網(wǎng)站的目錄，單擊“確定”按鈕返回。

添加發(fā)布位置

單擊“發(fā)布”按鈕，即可將制作好的網(wǎng)站保存到本機中，發(fā)布完成后，打開(kāi)保存目即可瀏覽設計好的網(wǎng)站，與上傳到網(wǎng)上的效果是完全一樣。

通過(guò)上面的實(shí)戰操作，我們可以體會(huì )到WYSIWYG Web Builder使用非常簡(jiǎn)單。無(wú)須html知識，只需要點(diǎn)擊鼠標就可以完成網(wǎng)站的設計，簡(jiǎn)潔高效，WYSIWYG Web Builder功能非常強大，你可以在制作中逐漸學(xué)習，越用你會(huì )越喜歡他。

1.閱后如果喜歡，不妨點(diǎn)贊、評論和關(guān)注一下。