閱讀500 返回首頁    go 阿裏雲 go 技術社區[雲棲]


手把手教你建網站--程序小白適用篇

互聯網時代不管是個人還是企業,網站都成為非常普遍的展示和營銷方式,那對於完全不懂代碼的程序小白,怎樣去快速的建一個網站呢。今天就手把手教給大家網站的具體搭建方法,希望那些沒有任何程序基礎的人也能自己建站。

【1】準備工作

當然在建網站前是需要先申請域名進行備案的,具體步驟和注意事項可以參考《十年建站老司機帶你十分鍾搭建網站》。

我的網站都是用蟬知係統搭建的,當然市麵上還有很多不錯的建站係統,像word press。不過,蟬知的特點是0基礎建站,對於小白人群還是非常適合的。下麵我們就開始搭建吧。

【2】開通站點

我使用的是蟬知的雲建站係統。統一在臻網開通,輸入網址後點擊立即開通,一個新的網站就算開通了。

file-read-4442.png

在後台就可以看到我所建的所有網站。找到我們今天要演示的網站,我首先需要給網站續費,維護費一年333元,主要優點是方便,不需要本地部署。如果你想要用免費版的也可以,蟬知的開源版完全免費,下載一個安裝包就可以了,而且市場上很多建站係統都支持免費試用,你也可以去找找。

file-read-4443.png

我們先看一下前台吧。可以看到此時網站隻有幾個係統自帶的版塊,沒有任何內容的。file-read-4444.png

【3】選擇網站模板

下麵我們就自己試著搭建吧。點擊網站【後台】按鈕進入網站的操作後台。

file-read-4445.png

看一下這是後台的界麵。所有功能模塊居左側排列,頂部是對應模塊的細分功能。

file-read-4446.png

首先要做的第一個工作就是要為網站選擇一套主題,也就是說你的網站要做成什麼樣子的,先把框架定下來。

在【設計-界麵】中選擇喜歡的版式,點擊確認就可以。我選擇的是第一款。

file-read-4447.png

回到前台看一下選好模板的網站。你一定會說,什麼嘛?分明一點變化都沒有啊。沒錯。因為我們還沒有添加內容啊,網站的元素基本包括文字,圖片,音頻等形式,我們要做的工作就是利用這些元素把主題豐富起來。file-read-4448.png

【4】設置網站基本信息

首先,先把我們的logo放上。因為logo可以說是一個網站的符號,是一個最重要的元素。

可以看到,現在logo的位置是“蟬知企業門戶係統”字樣,這是係統內置的,我們需要先把這裏改掉。

在【設計-標誌】中,上傳自己的logo就可以了,支持各種圖片格式,大小可以參照下方給出的範圍。

file-read-4449.png

除了需要上傳logo,在右側還有個小圖標的上傳入口。那小圖標是在哪裏呢?我們回到前台看一下。

file-read-4450.png

小圖標是在瀏覽器窗口顯示的,看起來像是logo的縮小版。如果你隻上傳了logo而沒有修改小圖標,那可是非常不專業的哦。可以看到除了小圖標,在瀏覽器窗口還可以看到有文字內容,這裏取的是網站名稱。

現在我們需要上傳小圖標,但是小圖標可不是直接上傳就可以的,必須是.ico圖標文件。ico格式怎麼製作呢,其實特別簡單,網上有很多在線製作工具,製作起來都很方便,我用的是比特蟲

file-read-4451.png

在比特蟲上上傳你的logo圖片(這裏說一下,如果你對圖片不是很熟悉,就用png格式的,因為png格式的圖片背景透明,如果是jpg的可能會留有白色背景在灰色窗口上,不美觀),尺寸設置為16*16,填寫驗證碼點擊生成就製作好一個ico文件了,然後再把生成的小圖標上傳就可以了。上傳後我們去前台看一下效果。

file-read-4452.png

怎麼樣?還不錯吧。你會看到,我不僅傳了小圖標,還把網站口號也加上了,是不是瞬間感覺高大上了不少呢?網站口號,公司信息都在哪裏設置呢?我們回到【後台-設置】。

這裏的設置是對網站基本信息的設置,其中的【站點設置】包括站點的類型是個人網站還是企業門戶網站,網站的名稱,功能模塊的選擇,關鍵詞,網站口號和站點描述等,都要認真填寫,當然像功能模塊你也可以根據需要隨時增加。如產品網站可能需要會員,商城,產品等功能。

file-read-4453.png

【公司信息】展示的是企業的基本信息,包括聯係方式,都需要填充完整。

file-read-4454.png

【語言設置】是對網站語言的設置,默認簡體,繁體,和英文,這個根據自己的需要選擇就可以。語言在前台的顯示位置是在右上角。

file-read-4455.png

【5】設置網站導航

網站的基礎信息設置好以後就可以填充具體內容了。我們按照網站自上而下的順序展開,首先設置導航,導航是網站所有內容的總覽,一般位於網站的頭部位置。

導航的設置在【設計-導航】中。在編輯導航內容之前可以先在【內容-文章】裏設置文章類目,因為網站的文字信息大多以文章的形式呈現,類目也就是文章的分類。如果想要表現的內容很多可以設置子類目。

file-read-4456.png

那設置導航和文章類目有什麼關係呢?現在我們去到設計-導航中看一下,此時就可以看到文章類目已經同步過來了,直接選擇就可以,還是比較人性化的。當然如果你不想要展現相同內容,也可以自己編輯填寫。

file-read-4457.png

在後台設置好以後,我們看一下前台的效果,網站導航就完成了。

file-read-4458.png

【6】設置幻燈片

導航設置好以後就可以添加幻燈片了。幻燈片是整個網站最能吸引人注意的版塊,因為圖片相比文字來說視覺衝擊力更強,圖文結合的版式排列的也更美觀。蟬知幻燈片可以設置多組,每一組可以設置多張。我們在【設計-幻燈片】中點擊編輯,打開編輯窗口就可以添加幻燈片了。

file-read-4462.png

file-read-4461.png

幻燈片裏樣式有單色和圖片兩種樣式,這裏需要注意的是“標題”,“按鈕”等是直接在幻燈片背景上顯示的。我選擇上傳的圖片本身就比較豐富,所以其他內容我並沒有填寫。上傳完成後我們去前台看一下。

file-read-4489.jpg

加上幻燈片的網站會豐富很多,我另外截取了一張蟬知官網的幻燈片給大家看一下,它含有“標題”和“按鈕”效果,大家根據自己的需要製作就可以了。

file-read-4464.png

【7】內容版塊布局

做好了幻燈片以後接下來該設置其他版塊了。你可能從後台無法直觀的看到前台的樣式,此時就可以用到【可視化】編輯的功能了,點擊【設計-可視化】跳轉到前台,你會發現此時你可以從前台進行編輯,版塊可以拖動,刪除,修改文字。是不是超級方便?

file-read-4465.png

如果你想要從後台進行操作也可以。在後台的【布局管理】中選擇首頁的中部按鈕,彈出編輯框。可以設置版塊名稱,寬度,邊框等,版塊的位置可以調整。前後台的操作可以實現相同的目的。

file-read-4466.png

file-read-4467.png

【8】發布文章

設置好版塊後,就可以發布文章了。我們回到內容-文章,點擊發布文章按鈕。選擇文章所在的類目,標題,關鍵字,摘要,內容等在相應編輯框內填寫就可以了。

file-read-4468.png

file-read-4469.png

發布時需要注意的地方是,你可以根據需要隨意選擇發布時間,訪問身份可以設置為公共或者會員(公共是指任何人都可以看,會員則是隻有注冊了會員的人才可以看)。草稿狀態的文章隻有從後台可以看到,從前台是不可見的。如果文章發布後再修改內容,已經發布的文章也會同步到最新內容。

file-read-4470.png

這是文章列表,你所發布的文章都在列表中顯示,文章還可以添加圖片,附件,修改,置頂等操作。上傳後我們看一下前台效果。

file-read-4475.png

file-read-4476.png

顯示的文章數量可以自己設置,在【設置-列表】設置中編輯就可以了。

file-read-4477.png

【9】設置底部導航

到此,網站的基本模塊都搭建好了,當然你也可以添加底部導航,比如用來做友情鏈接的版塊。那就需要在【設計-區塊】中的自定義中增加一個區塊。點擊自定義的添加按鈕,選擇底部導航。

file-read-4478.png

file-read-4479.png

然後將名稱改為“友情鏈接”,輸入鏈接的名字和地址保存。

file-read-4480.png

做完這一步,可不要以為就添加好了哦,你現在去前台是看不到友情鏈接版塊的。我們還需要去到【布局管理】界麵相應的位置添加上。

file-read-4481.png

選好版塊,調整好寬度和樣式就可以了。然後在前台就可以看到了。

file-read-4482.png

file-read-4483.png

本文介紹的是用蟬知係統搭建一個網站的基本流程,主要交給你基礎模塊的設置和內容填充的方法,掌握這些方法你就可以自己搭建一個網站了。當然,要想做與眾不同的效果是需要時間去練習和操作,掌握更多方法和技巧的,加油。

1Q2Ey40z5UyKFO.gif

最後更新:2017-10-25 08:33:56

  上一篇:go  2018web前端麵試總結
  下一篇:go  阿裏雲服務器怎麼更換操作係統?