隨著移動互聯(lián)網(wǎng)的興起，越來越多的公司、個(gè)人把展示的內(nèi)容轉(zhuǎn)到了手機(jī)網(wǎng)站上，學(xué)會制作手機(jī)網(wǎng)站就成了大家關(guān)注的熱點(diǎn)。傳統(tǒng)的網(wǎng)頁制作工具制作電腦端的網(wǎng)站功能很強(qiáng)大，但手機(jī)網(wǎng)站由于手機(jī)屏幕大小和CPU處理能力較弱，對網(wǎng)站的要求與傳統(tǒng)網(wǎng)站有很大的不同。如果用傳統(tǒng)的網(wǎng)頁制作工具設(shè)計(jì)手機(jī)網(wǎng)站需要的技術(shù)復(fù)雜，操作難度大，一般人很難完成。如果有一個(gè)傻瓜式的工具，讓用戶無需復(fù)雜操作就能完成手機(jī)網(wǎng)站的設(shè)計(jì)，將會大受歡迎。
手機(jī)網(wǎng)站展示
下面就給大家推薦的就是一款這樣的工具，使用它可以像搭積木一樣快速完成網(wǎng)站的設(shè)計(jì)，再也不用被專業(yè)技術(shù)名詞和操作包圍，痛苦難受了。
這個(gè)軟件叫WYSIWYG Web Builder，是一個(gè)所見即所得的網(wǎng)頁設(shè)計(jì)工具，體積小巧，使用簡單。這個(gè)軟件最大的特點(diǎn)就是采用了圖層概念，任何元素都是圖層，可以拖放到頁面上的任意位置，而不影響其他的元素，非常適合初學(xué)者使用。不需要學(xué)習(xí)html知識就可以設(shè)計(jì)一個(gè)手機(jī)網(wǎng)站。
WYSIWYG Web Builder
下面以設(shè)計(jì)一個(gè)網(wǎng)站的三個(gè)頁面為例，了解一下該軟件的使用，首先看一下這三個(gè)頁面的實(shí)際效果。
網(wǎng)頁實(shí)際效果
下面逐一介紹每個(gè)頁面的創(chuàng)建過程。
一、設(shè)計(jì)網(wǎng)站結(jié)構(gòu)要想做網(wǎng)站，首先要搭建網(wǎng)站結(jié)構(gòu)，由于是演示，這個(gè)網(wǎng)站只有三個(gè)頁面：首頁、新聞資訊、關(guān)于我們。
啟動WYSIWYG Web Builder，程序自動新建一個(gè)空白頁面，這個(gè)頁面是PC端的，而我們要設(shè)計(jì)的是手機(jī)端網(wǎng)站，所以要進(jìn)行更改。
在“站點(diǎn)管理器”中選中“無標(biāo)題1”，單擊站點(diǎn)管理器工具欄中的“新建移動頁”按鈕，新建一個(gè)“頁面1”，重復(fù)上述操作，在新建“頁面2”、“頁面3”。選中index，單擊工具欄中的“刪除”按鈕，把這個(gè)pc端的頁面刪除，然后分別右鍵單擊頁面1、頁面2、頁面3，在彈出的菜單中選擇“重命名頁面”，將這三個(gè)頁面分別命名為index、news、about，對應(yīng)于網(wǎng)站的首頁、新聞資訊、關(guān)于我們。
站點(diǎn)管理器
在編輯區(qū)看到網(wǎng)頁變成了手機(jī)的豎屏頁面，上面的標(biāo)簽也也出現(xiàn)了三個(gè)頁面的名稱，下面就開始設(shè)計(jì)這三個(gè)頁面。
二、建立首頁由四部分組成，由上到下依次是：標(biāo)題、導(dǎo)航條、圖片、頁腳。
A、標(biāo)題
單擊“插入—文本”的命令，在頁面上用鼠標(biāo)拖動，產(chǎn)生一個(gè)文本框，雙擊這個(gè)文化，在其中輸入文字，然后在“格式”標(biāo)簽頁中設(shè)置字體類型、大小、顏色、排列方式等。
B、導(dǎo)航條
單擊”插入—導(dǎo)航—導(dǎo)航欄”，在頁面上拖動，生成一個(gè)導(dǎo)航欄，雙擊導(dǎo)航欄，打開設(shè)置對話框，單擊“條目”右側(cè)的按鈕，進(jìn)入導(dǎo)航欄對話框，在“名稱”列表中選中一個(gè)選項(xiàng)，單擊右側(cè)的“編輯”按鈕，可以設(shè)置文本名稱、連接頁面等參數(shù)。
導(dǎo)航欄對話框
單擊“添加”按鈕，可以新增項(xiàng)目，同時(shí)可以單擊“向下移動”和“向上移動”按鈕，調(diào)整條目的順序。
C、圖片
單擊“插入—圖像—從圖像文件”命令，在網(wǎng)頁上拖動，從本機(jī)中選擇一個(gè)圖片插入，可以拖動調(diào)整圖片的大小位置。
D、頁腳
單擊“插入—頁腳”命令，在頁面上拖動，插入頁腳，雙擊頁腳打開編輯窗口，單擊“條目”右側(cè)的按鈕，打開“常規(guī)”設(shè)置框，單擊“添加”按鈕，增加頁腳中包含的內(nèi)容，在打開的窗口中輸入文本、指定圖標(biāo)、設(shè)置好連接的頁面，重復(fù)以上操作，添加多個(gè)頁腳內(nèi)容。返回頁腳設(shè)置對話框，在“圖標(biāo)位置”下拉列表中選擇圖標(biāo)的顯示方式，同時(shí)將標(biāo)題中的Footer刪除。
頁腳編輯窗口
三、建立新聞資訊頁有頁眉、頁腳、新聞列表3部分組成。頁腳與前面首頁中的相同，直接復(fù)制粘貼到當(dāng)前頁即可。
A、頁眉
單擊“插入—標(biāo)題”命令，在頁面中拖動，生成一個(gè)頁眉，它會自動處于頁面頂部，雙擊頁眉，打開設(shè)置對話框，在“左鍵按鈕”中，將文本改為“首頁”，URL指向index，將“右鍵按鈕”中的文本改為“關(guān)于我們”，URL指向about，將“雜項(xiàng)”中的標(biāo)題改為“新聞資訊”。
頁眉對話框
B、新聞列表
單擊“插入—列表視圖”，在網(wǎng)頁中插入一個(gè)列表，雙擊它，打開設(shè)置對話框，在“名稱”列表中選中一個(gè)條目，單擊“編輯”按鈕設(shè)置文本、圖像、連接頁面等參數(shù)，單擊“添加”按鈕，可以添加新的條目。
列表視圖
四、建立關(guān)于我們頁有頁眉、頁腳、可折疊面板三部分組成。頁腳與前面相同，直接復(fù)制粘貼，也沒設(shè)置。頁眉設(shè)置不屬于新聞資訊頁相同，只不過是把“右鍵按鈕”中的URL改為news，即新聞資訊頁。
單擊“插入—可折疊”，在頁面中插入一個(gè)可折疊面板，默認(rèn)有兩個(gè)面板，可以雙擊打開設(shè)置對話框，添加更多面板。單擊加號按鈕展開面板，然后將需要的元素插入其中即可。
可折疊面板
五、預(yù)覽網(wǎng)站在首頁標(biāo)簽中單擊預(yù)覽按鈕或按F5鍵，用瀏覽器預(yù)覽網(wǎng)頁。
六、發(fā)布網(wǎng)站制作好的網(wǎng)站可以直接上傳到網(wǎng)站服務(wù)器上，也可以保存到本機(jī)上的某個(gè)目錄中，在“首頁”標(biāo)簽中單擊“發(fā)布”按鈕，打開發(fā)布站點(diǎn)對話框。
發(fā)布站點(diǎn)對話框
單擊“新建”按鈕，在“類型”列表中選擇“本地文件夾”，單擊“文件夾”右邊的按鈕，選擇一個(gè)保存網(wǎng)站的目錄，單擊“確定”按鈕返回。
添加發(fā)布位置
單擊“發(fā)布”按鈕，即可將制作好的網(wǎng)站保存到本機(jī)中，發(fā)布完成后，打開保存目即可瀏覽設(shè)計(jì)好的網(wǎng)站，與上傳到網(wǎng)上的效果是完全一樣。
通過上面的實(shí)戰(zhàn)操作，我們可以體會到WYSIWYG Web Builder使用非常簡單。無須html知識，只需要點(diǎn)擊鼠標(biāo)就可以完成網(wǎng)站的設(shè)計(jì)，簡潔高效，WYSIWYG Web Builder功能非常強(qiáng)大，你可以在制作中逐漸學(xué)習(xí)，越用你會越喜歡他。
1.閱后如果喜歡，不妨點(diǎn)贊、評論和關(guān)注一下。
2.如果喜歡玩軟件，請關(guān)注本頭條號閱讀相關(guān)文章。
3.在學(xué)習(xí)中有什么問題，歡迎與我溝通交流，今日頭條號搜索：微課傳媒，我在這里等你喲！
掃描二維碼推送至手機(jī)訪問。
版權(quán)聲明：本文由信途科技轉(zhuǎn)載于網(wǎng)絡(luò)，如有侵權(quán)聯(lián)系站長刪除。
轉(zhuǎn)載請注明出處http://www.quickersubmitter.com/xintu/14055.html
