自我接觸網絡時就有過想法做一個自己的網站，但那會什麼都不懂，就連服務器是什麼都不知道。全靠百度搜索，翻過各種誤導信息廣告信息，總算是得到了一些瞭解，但最終還是因為技術層面瞭解得太少，興趣被耗空了，最終放棄了最初的那種熱情。
最初的想法已經過去好多年了。
但就在幾個月前，忽然又萌生回了這個想法，做個自己的個人主頁吧，放一些個人作品什麼的。但是我還是不會html，雖然學習html並不難，但問題是，html對於我或者在看本文的很多人來說，平時可能幾乎都用不上，一個不常用的技能卻要花比較多的時間和精力去學習，而且還建立在毫無興趣的基礎上，這可能會很難，因此這個想法擱置了半年了也一直沒有動靜。
不過近期閒著也是閒著，要不就就試試找找看吧，在這個年代，專業工作軟件越來越往簡易化智能化的方向發展，說不定還會有更加簡單，更低成本的網站建立辦法呢。
於是，現在我算是找到了（一個可能比較可行的辦法）。
不需要寫代碼，即可製作網頁（靜態頁面），發佈到互聯網。非常合適小白入手。
平臺和工具：阿里雲OSS ，WYSIWYG Web Builder（網頁生成工具）
前排提示：本圖文教程面向新手小白，手把手式指點教程，因此節奏比較慢。
教程內容分為兩部分，製作網頁和發佈網站。圖文為了讓小白稍微理解一下網站知識，所以這裡先說阿里雲OSS如何發佈網頁，再說如何製作網頁，不用擔心，內容都很簡單。
---------------------------------------------
阿里雲是國內知名的雲計算平臺，如果小白沒有聽說過這名字，那你總聽說過和它同一家的阿里巴巴和淘寶吧。
而OSS是什麼呢？它是對象存儲，更加直白一點說就是個雲盤，但實際用途並不只是雲盤。
對象存儲主要用於服務器的數據文件存放，比如你使用某app時註冊了賬號，上傳了一張頭像，那這個文件就會被app服務器存放到對象存儲裡。
OSS只是阿里雲對象存儲的名稱，其他雲計算平臺的有所不同，比如騰訊雲的對象存儲叫COS等，名字略有不同但使用大概都差不多。
開始工作，首先得註冊阿里雲，百度搜索進入阿里雲官網，在阿里雲網頁右上角點擊免費註冊，註冊很簡單使用支付寶直接登錄即可。
（也好像不用註冊，直接登錄支付寶賬號就行了，畢竟是一家的）
現在我們需要配置好OSS這個東西，再進行網頁製作。
註冊/登錄完成後，在阿里雲首頁左側欄就能找到【對象存儲OSS】，（上圖裡也能看到），點進去，就能看到OSS的產品介紹和購買按鈕，這裡不需要進入購買，直接選擇【管理控制檯】
接下來即對象存儲OSS的控制檯界面，在左側欄選擇【Bucket 列表】，Bucket即一個對象存儲容器，再說直白點就是一個儲存空間，你一個賬戶可以創建很多個不同的OSS。
因為還沒有使用Bucket，所以列表肯定是空的，因此下一步點擊藍色按鈕【創建Bucket】
將會彈出一個窗口，主要設置Bucket的名稱，地域，讀寫權限等。
Bucket名稱隨意；
地域建議選擇上海；
讀寫權限得改為公共讀，這樣你的網站才能被別人訪問。
上圖中，Endpoint即你的OSS訪問網址，創建好OSS後，通過這個鏈接就能訪問你這裡存放的文件。
信息都填好後，點確定即可創建。
創建完成再回到Bucket列表就能看到它了。
接下里，
點擊剛剛新建的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製作動畫也很簡單，如下：
首先，給背景圖也做個模糊到清晰的動畫。
雙擊背景圖（記得先移開遮罩層），在彈出的窗口裡點擊CSS3動畫頁面。
在這裡，上面部分是改元素自身的動畫，下面部分是交互產生的動畫，如鼠標到它上面等。
點擊右上角的添加，參數如下圖。
動畫選擇【filiter-blur-in】，持續時間自定，時間單位是毫秒（ms），1秒＝1000ms，所以我這輸入的5000也就是5秒。
循環計次默認是-1，也就是無限循環，但我們這裡動畫只需要播放一次即可，所以改為1。
參數修改好後點擊確定即可。
忘記說了，在WYSIWYG Web Builder裡，按F5即可轉跳瀏覽器查看網頁效果，現在可以試試，按F5，看看剛才設置的動畫效果如何。
軟件裡還有很多預設動畫都可以試試，如果這些動畫都不能 滿足你，還可以試試自制動畫，操作起來也不難，有興趣可以自己試試。
軟件的基本使用到這裡就差不多了，稍微花點時間就能輕鬆把自己的主頁做好了。
個人網站其實並不需要很多內容，也並一不一定要做的很正式。希望能在評論區看到各位的個人網站成品模樣。
當你的網頁最終成品做好後，即要導出html文件了。點擊左上角文件→發佈，在彈出的窗口裡，發佈地址即文件保存的位置。其他設置默認即可，點擊確定就好了。
這樣網頁的製作就完成了，那麼就到了最後一步，發佈網頁。
回到最開始搞的阿里雲OSS，進入Bucket，點擊上傳文件，可以直接把上圖導出的這些文件拖動到上傳文件的區域內。
不過要注意，images文件夾不能直接拖入，先上傳零散文件。然後在OSS裡新建名為images的文件夾，再把裡面的文件進行上傳。
然後OSS裡新建文件夾
名字即剛剛網頁導出目錄的文件夾名字，images。
然後再上傳文件夾裡的文件，到這裡。
文件上傳完畢後，再試試打開你的OSS鏈接看看主頁如何，什麼，你不知道你的OSS地址是什麼？
在界面左側欄，點擊概覽，右邊就能找到鏈接地址。
這裡就可以看到你的OSS地址（網站地址）了。通過這個地址訪問就能看到剛剛的網頁效果了。
到這裡差不多就結束教程了
這種網站叫靜態網頁，製作簡單成本低廉，適合非計算機行業的業外人士使用。
可能會有“大佬”覺得這種不寫代碼的辦法太“笨拙”了，但這也不應該這麼想，並不是每一個人都需要學會代碼，或者反過來說術業有專攻。
教程到這裡就結束了，現在寫完回頭看感覺好像還是有點不夠細緻，不知道小白能不能看懂
閱讀更多 索鼕鼕 的文章
