自我接觸網路時就有過想法做一個自己的網站，但那會什麼都不懂，就連伺服器是什麼都不知道。全靠百度搜索，翻過各種誤導資訊廣告資訊，總算是得到了一些了解，但最終還是因為技術層面了解得太少，興趣被耗空了，最終放棄了最初的那種熱情。

最初的想法已經過去好多年了。

但就在幾個月前，忽然又萌生回了這個想法，做個自己的個人主頁吧，放一些個人作品什麼的。但是我還是不會html，雖然學習html並不難，但問題是，html對於我或者在看本文的很多人來說，平時可能幾乎都用不上，一個不常用的技能卻要花比較多的時間和精力去學習，而且還建立在毫無興趣的基礎上，這可能會很難，因此這個想法擱置了半年了也一直沒有動靜。

不過近期閒著也是閒著，要不就就試試找找看吧，在這個年代，專業工作軟體越來越往簡易化智慧化的方向發展，說不定還會有更加簡單，更低成本的網站建立辦法呢。

於是，現在我算是找到了（一個可能比較可行的辦法）。

不需要寫程式碼，即可製作網頁（靜態頁面），釋出到網際網路。非常合適小白入手。

平臺和工具：阿里雲OSS ，WYSIWYG Web Builder（網頁生成工具）

前排提示：本圖文教程面向新手小白，手把手式指點教程，因此節奏比較慢。

教程內容分為兩部分，製作網頁和釋出網站。圖文為了讓小白稍微理解一下網站知識，所以這裡先說阿里雲OSS如何釋出網頁，再說如何製作網頁，不用擔心，內容都很簡單。

---------------------------------------------

阿里雲是國內知名的雲端計算平臺，如果小白沒有聽說過這名字，那你總聽說過和它同一家的阿里巴巴和淘寶吧。

而OSS是什麼呢？它是物件儲存，更加直白一點說就是個雲盤，但實際用途並不只是雲盤。

物件儲存主要用於伺服器的資料檔案存放，比如你使用某app時註冊了賬號，上傳了一張頭像，那這個檔案就會被app伺服器存放到物件儲存裡。

OSS只是阿里雲物件儲存的名稱，其他雲端計算平臺的有所不同，比如騰訊雲的物件儲存叫COS等，名字略有不同但使用大概都差不多。

（也好像不用註冊，直接登入支付寶賬號就行了，畢竟是一家的）

現在我們需要配置好OSS這個東西，再進行網頁製作。

註冊/登入完成後，在阿里雲首頁左側欄就能找到【物件儲存OSS】，（上圖裡也能看到），點進去，就能看到OSS的產品介紹和購買按鈕，這裡不需要進入購買，直接選擇【管理控制檯】

接下來即物件儲存OSS的控制檯介面，在左側欄選擇【Bucket 列表】，Bucket即一個物件儲存容器，再說直白點就是一個儲存空間，你一個賬戶可以建立很多個不同的OSS。

將會彈出一個視窗，主要設定Bucket的名稱，地域，讀寫許可權等。

Bucket名稱隨意；

地域建議選擇上海；

讀寫許可權得改為公共讀，這樣你的網站才能被別人訪問。

上圖中，Endpoint即你的OSS訪問網址，建立好OSS後，通過這個連結就能訪問你這裡存放的檔案。

資訊都填好後，點確定即可建立。

建立完成再回到Bucket列表就能看到它了。

接下里，

這是我現在在用的Bucket，因此右側存放了一些檔案。到這裡關於Bucket的配置就好了。

那麼小白看到這裡可能心裡還有點不太明白，到目前為止，教程所做的東西幹什麼。

這裡說一下物件儲存的一些基礎小知識吧

開頭說了，物件儲存就像是一個雲盤，但不同的是它存放的檔案，預設都具備一個絕對路徑連結，也叫直鏈（即直通檔案的連結）。通過這個絕對路徑，其他人就可以直接線上訪問/下載這個檔案。網頁檔案即html格式，那麼把它存放在這裡面，通過瀏覽器開啟時，瀏覽器就能識別這個網頁並將它呈現在螢幕上，就是這麼簡單就實現了網站的基礎，接下來只需要製作好網頁再上傳到這裡，網站就完成了。

值得一提的是，我們所訪問的網站如百度首頁，www。 Baidu。com，它的字尾並沒有.html的檔名，那麼為什麼瀏覽器訪問它也能開啟網頁呢？那是因為，當瀏覽器訪問這個地址時，如果連結裡字尾沒有檔名，那麼瀏覽器會預設補上”index.html“，百度首頁的頁面其實是www。 Baidu。com/ index.html（14。215。177。39 /index. html）。

同樣的這個規則也存在於阿里雲OSS裡，阿里雲Bucket的預設首頁也是你的OSS連結/index. Html。不止是index，還有404頁面也是如此（OSS連結/404. html）。只要把做好的網頁檔案，命名為index.html，上傳到OSS裡，就可以直接訪問首頁了。

------------------------------------------

那麼接下來製作網頁，你只需要把首頁的頁面字尾名改成index.html，再上傳到OSS根目錄中，那通過OSS的網址直接訪問就能進入你的網站了。

------------------------------------------

小知識到此完畢，那麼接下來來說說如何製作網頁吧。

首先不得不提一下很廢話東西，網頁本質是什麼。

如果在電腦上新建一個記事本的文字文件，如1.txt，如下圖

通過瀏覽器開啟文件後，我們能看到剛剛所編輯的文字顯示到了瀏覽器上。

做這個演示的目的就是告訴你，網頁實際上就是一個文字文件，本身就不需要程式碼即可呈現。

但TXT純文字文件是不具備任何格式的，甚至連字型大小顏色都沒有，這樣所製作的網頁會非常空乏，完全不能滿足於普通使用，因此就有了html程式碼。

Html程式碼的本質是一種標記語言，並不屬於程式設計程式碼。它的作用是把內容文字進行標記，如標記這個文字是標題，字號是多少，顏色是什麼；或者標記了這個元素屬性是按鈕，而不是圖形；那個是帶連結的文字而不是普通文字。Html程式碼的寫法幾乎就是背單詞，沒有任何邏輯運算，學習起來其實也很簡單。

但即便如此，對於剛入手的人來說，或者對於程式碼不感興趣的人來說，編寫html仍然是一個難題。我的確想要一個網站，但我並不想花時間精力去學習對自己完全不必要的html技能。

我所使用過的方法有以下：

Adobe XD + html匯出外掛；

Office Powerpoint 2007（可另存為html）；

使用建站平臺（建站之星，凡科，等）做好網頁後，使用瀏覽器另存為頁面；

下載網頁模板（但還是要改程式碼內容）

Mockplus（可以匯出html，軟體主要用途類似XD）

Adobe Muse

WebPageMaker（功能有點缺乏））

但上述辦法實際上都存在各自的缺陷

以及接下來要講的主角：

WYSIWYG Web Builder

（末尾提供下載）開啟軟體主介面，能看到這玩意介面就像是office和VS的結合體。

其實這軟體使用起來還真是挺簡單的，就像畫圖一樣，左側欄工具箱裡把你想要的部件拖上去，拉個大小，就好了。這個軟體使得網頁設計輕鬆了很多，但有一點不得不提的是，這軟體，bug特別多，但又真找不到能替代它的軟體了，不得已這裡還是用它來說吧。

下面來舉個栗子，我隨便用它做了一個網頁，最終成品效果：檢視連結

美觀程度也就一般，因為我沒有具體設計，只是為了接下來的教程演示而隨便做的一個。以及這個網頁沒有適配手機版頁面，動畫元素都是配合電腦寬屏瀏覽器的。

當然如果你有網頁設計更具體想法的話，可以嘗試做的更好一些，這個軟體也可以把網頁做的很好看。

（注：網站背景圖是5K解析度的）

那麼下面開始吧，接下來的教程，我就以上面發的網站最終效果圖為案例進行製作。

首先，新建一個檔案，在頂部選單欄選擇首頁→屬性。

在彈出的視窗中設定頁面大小為1000*2000（主要設定寬度，高度會跟隨內容自動增加。建議最低1000或1200，不要超過1400為好）

因為我現在的電腦螢幕比較小，所以選擇了1000的寬度。

然後在左側工具欄，裡找到【影象】，拖動到頁面上。作為個人網站的背景圖。

選擇好你想要的圖片，這樣圖片就加入好了。

現在圖片是加入了，但排版還不正確。在介面右下角即屬性面板，即可設定這張圖片的屬性資訊，修正它的排版問題。

找到【位置】和【大小】，位置即圖片左上角的座標，設定0,0即可；大小隻需要把寬度改成上一步設定的網頁寬度即可，我設定的是1000。設定好寬度後，高度預設也會自動按比例縮放，現在這張圖片的排版就已經正確了。

（PS：如果你的電腦螢幕跟我一樣也比較小，記得主介面右下角可以縮放大小）

接下來，新增一個居中的頭像。作為個人網站，直接放自己的照片也行，但如果你不想放照片，放一個自己的虛擬頭像也是很合適的。

在頂部選單欄，選擇【插入】頁面，找到圖形這個圖示，展開下拉找到圓形。

然後在工作區域把這個圓形畫出來，畫好後在右下角屬性面板，把大小修改為200,*200，這個大小在電腦上瀏覽是一個比較合適的大小，當然你可以設定為其他值，這沒限制。

設定好後 ，拖動圓形到圖片中心，不用擔心居中問題，軟體自帶對齊線輔助，只要拖動要差不多中間位置就會出現對齊線。

上面的步驟就做好後，就是這樣子了。

然後是設定頭像了，雙擊這個圓形，將會彈出具體設定。

如下圖操作，記得匯入頭像圖片前，務必把頭像裁剪成正方形。

基本的操作就是像上面這樣，接下來稍微加快教程速度。

新增頭像標題，即你的暱稱。左側欄選擇【文字】，拖放到合適位置，輸入文字。

（PS不知是不是軟體問題，這軟體不能輸入中文，但中文可以複製貼上進去）

文字格式的設定，可以像這樣

Arial字型是網頁通用字型，要記得網頁上字型不能隨便設定，別人客戶端瀏覽器上不一定能顯示出來，除非把字型整合到網站上。但使用Web標準字型都行，就比如預設的Arial就可以了。

其他的，選擇居中，字號差不多就行，可以加粗。

完成後再稍微拖動要居中位置即可。

文字顏色按實際情況設定，一般白色比較通用，但使用白色也存在一個很明顯的問題，看不清。因為我這張圖背景是偏亮的，用白色文字的確會產生視覺干擾。如何解決這個問題呢？比如可以把背景圖壓暗一些，在這裡可以加入一個半透明黑色的遮罩層，降低背景圖的亮度。

同樣的，在頂部選單選擇插入，圖形，繪製一個矩形。

屬性，將矩形的位置設定為0,0，大小設定和背景圖一樣，使得矩形可以剛好重疊背景圖即可。然後右鍵單擊矩形，移動到最底層。

雙擊矩形，在彈出來的視窗設定如下引數：

到這裡，WYSIWYG Web Builder的基本使用方法也就這樣了。

通過更加細緻的修改，你可以加入更多文字或其他元素。

還有一點，如何製作網頁動畫？這個軟體還有一個強項優勢，就是可以很快速的製作出各種不錯的動畫。比如我上面的例案，剛開始就是一個背景圖模糊漸入的動畫。使用WYSIWYG Web Builder製作動畫也很簡單，如下：

首先，給背景圖也做個模糊到清晰的動畫。

在這裡，上面部分是改元素自身的動畫，下面部分是互動產生的動畫，如滑鼠到它上面等。

動畫選擇【filiter-blur-in】，持續時間自定，時間單位是毫秒（ms），1秒＝1000ms，所以我這輸入的5000也就是5秒。

迴圈計次預設是-1，也就是無限迴圈，但我們這裡動畫只需要播放一次即可，所以改為1。

忘記說了，在WYSIWYG Web Builder裡，按F5即可轉跳瀏覽器檢視網頁效果，現在可以試試，按F5，看看剛才設定的動畫效果如何。

軟體裡還有很多預設動畫都可以試試，如果這些動畫都不能 滿足你，還可以試試自制動畫，操作起來也不難，有興趣可以自己試試。

軟體的基本使用到這裡就差不多了，稍微花點時間就能輕鬆把自己的主頁做好了。

當你的網頁最終成品做好後，即要匯出html檔案了。點選左上角檔案→釋出，在彈出的窗口裡，釋出地址即檔案儲存的位置。其他設定預設即可，點選確定就好了。

這樣網頁的製作就完成了，那麼就到了最後一步，釋出網頁。

不過要注意，images資料夾不能直接拖入，先上傳零散檔案。然後在OSS裡新建名為images的資料夾，再把裡面的檔案進行上傳。

然後OSS裡新建資料夾

名字即剛剛網頁匯出目錄的資料夾名字，images。

然後再上傳資料夾裡的檔案，到這裡。

檔案上傳完畢後，再試試開啟你的OSS連結看看主頁如何，什麼，你不知道你的OSS地址是什麼？

這裡就可以看到你的OSS地址（網站地址）了。通過這個地址訪問就能看到剛剛的網頁效果了。

到這裡差不多就結束教程了

這種網站叫靜態網頁，製作簡單成本低廉，適合非計算機行業的業外人士使用。

可能會有“大佬”覺得這種不寫程式碼的辦法太“笨拙”了，但這也不應該這麼想，並不是每一個人都需要學會程式碼，或者反過來說術業有專攻。

教程到這裡就結束了，現在寫完回頭看感覺好像還是有點不夠細緻，不知道小白能不能看懂