手把手教你建网站--程序小白适用篇
對于完全不懂代碼的程序小白,怎樣去快速的建一個網(wǎng)站呢,在此之前一直感覺建站是一個非常龐大負責(zé)的工作,直到接觸了css,js并且自己也搭了幾個站以后以后才發(fā)現(xiàn)建站其實還是非常簡單的。今天就手把手教給大家網(wǎng)站的具體搭建方法,希望那些沒有任何程序基礎(chǔ)的人也能自己建站。
【1】準備工作
當然在建網(wǎng)站前是需要先申請域名進行備案的,具體步驟和注意事項可以參考我之前讀過的一篇文章《十年建站老司機帶你十分鐘搭建網(wǎng)站》,作者介紹的非常詳細。
我的網(wǎng)站都是用蟬知系統(tǒng)搭建的,當然市面上還有很多不錯的建站系統(tǒng),像wordpress。不過,蟬知的特點是0基礎(chǔ)建站,對于小白人群還是非常適合的。下面我們就開始搭建吧。
【2】開通站點
我使用的是蟬知的云建站系統(tǒng)。統(tǒng)一在臻網(wǎng)開通,輸入網(wǎng)址后點擊立即開通,一個新的網(wǎng)站就算開通了。
在后臺就可以看到我所建的所有網(wǎng)站。 www.okr.men是我們今天要演示的網(wǎng)站。我首先需要給網(wǎng)站續(xù)費,維護費一年333元,主要是方便,不需要本地部署。如果你想要用免費版的也可以,蟬知的開源版完全免費,下載一個安裝包就可以了,而且市場上很多建站系統(tǒng)都支持免費試用,你也可以去找找。
我們先看一下前臺吧??梢钥吹酱藭r網(wǎng)站只有幾個系統(tǒng)自帶的版塊,沒有任何內(nèi)容的。
【3】選擇網(wǎng)站模板
下面我們就自己試著搭建吧。點擊網(wǎng)站【后臺】按鈕進入網(wǎng)站的操作后臺。
看一下這是后臺的界面。所有功能模塊居左側(cè)排列,頂部是對應(yīng)模塊的細分功能。
首先要做的第一個工作就是要為網(wǎng)站選擇一套主題,也就是說你的網(wǎng)站要做成什么樣子的,先把框架定下來。
在【設(shè)計-界面】中選擇喜歡的版式,點擊確認就可以。我選擇的是第一款。
回到前臺看一下選好模板的網(wǎng)站。你一定會說,什么嘛?分明一點變化都沒有啊。沒錯。因為我們還沒有添加內(nèi)容啊,網(wǎng)站的元素基本包括文字,圖片,音頻等形式,我們要做的工作就是利用這些元素把主題豐富起來。
【4】設(shè)置網(wǎng)站基本信息
首先,先把我們的logo放上。因為logo可以說是一個網(wǎng)站的符號,是一個最重要的元素。
可以看到,現(xiàn)在logo的位置是“蟬知企業(yè)門戶系統(tǒng)”字樣,這是系統(tǒng)內(nèi)置的,我們需要先把這里改掉。
在【設(shè)計-標志】中,上傳自己的logo就可以了,支持各種圖片格式,大小可以參照下方給出的范圍。
除了需要上傳logo,在右側(cè)還有個小圖標的上傳入口。那小圖標是在哪里呢?我們回到前臺看一下。
小圖標是在瀏覽器窗口顯示的,看起來像是logo的縮小版。如果你只上傳了logo而沒有修改小圖標,那可是非常不專業(yè)的哦。可以看到除了小圖標,在瀏覽器窗口還可以看到有文字內(nèi)容,這里取的是網(wǎng)站名稱。
現(xiàn)在我們需要上傳小圖標,但是小圖標可不是直接上傳就可以的,必須是.ico圖標文件。ico格式怎么制作呢,其實特別簡單,網(wǎng)上有很多在線制作工具,制作起來都很方便,我用的是比特蟲。
在比特蟲上上傳你的logo圖片(這里說一下,如果你對圖片不是很熟悉,就用png格式的,因為png格式的圖片背景透明,如果是jpg的可能會留有白色背景在灰色窗口上,不美觀),尺寸設(shè)置為16*16,填寫驗證碼點擊生成就制作好一個ico文件了,然后再把生成的小圖標上傳就可以了。上傳后我們?nèi)デ芭_看一下效果。
怎么樣?還不錯吧。你會看到,我不僅傳了小圖標,還把網(wǎng)站口號也加上了,是不是瞬間感覺高大上了不少呢?網(wǎng)站口號,公司信息都在哪里設(shè)置呢?我們回到【后臺-設(shè)置】。
這里的設(shè)置是對網(wǎng)站基本信息的設(shè)置,其中的【站點設(shè)置】包括站點的類型是個人網(wǎng)站還是企業(yè)門戶網(wǎng)站,網(wǎng)站的名稱,功能模塊的選擇,關(guān)鍵詞,網(wǎng)站口號和站點描述等,都要認真填寫,當然像功能模塊你也可以根據(jù)需要隨時增加。如產(chǎn)品網(wǎng)站可能需要會員,商城,產(chǎn)品等功能。
【公司信息】展示的是企業(yè)的基本信息,包括聯(lián)系方式,都需要填充完整。
【語言設(shè)置】是對網(wǎng)站語言的設(shè)置,默認簡體,繁體,和英文,這個根據(jù)自己的需要選擇就可以。語言在前臺的顯示位置是在右上角。
【5】設(shè)置網(wǎng)站導(dǎo)航
網(wǎng)站的基礎(chǔ)信息設(shè)置好以后就可以填充具體內(nèi)容了。我們按照網(wǎng)站自上而下的順序展開,首先設(shè)置導(dǎo)航,導(dǎo)航是網(wǎng)站所有內(nèi)容的總覽,一般位于網(wǎng)站的頭部位置。
導(dǎo)航的設(shè)置在【設(shè)計-導(dǎo)航】中。在編輯導(dǎo)航內(nèi)容之前可以先在【內(nèi)容-文章】里設(shè)置文章類目,因為網(wǎng)站的文字信息大多以文章的形式呈現(xiàn),類目也就是文章的分類。如果想要表現(xiàn)的內(nèi)容很多可以設(shè)置子類目。
那設(shè)置導(dǎo)航和文章類目有什么關(guān)系呢?現(xiàn)在我們?nèi)サ皆O(shè)計-導(dǎo)航中看一下,此時就可以看到文章類目已經(jīng)同步過來了,直接選擇就可以,還是比較人性化的。當然如果你不想要展現(xiàn)相同內(nèi)容,也可以自己編輯填寫。
在后臺設(shè)置好以后,我們看一下前臺的效果,網(wǎng)站導(dǎo)航就完成了。
【6】設(shè)置幻燈片
導(dǎo)航設(shè)置好以后就可以添加幻燈片了?;脽羝钦麄€網(wǎng)站最能吸引人注意的版塊,因為圖片相比文字來說視覺沖擊力更強,圖文結(jié)合的版式排列的也更美觀。蟬知幻燈片可以設(shè)置多組,每一組可以設(shè)置多張。我們在【設(shè)計-幻燈片】中點擊編輯,打開編輯窗口就可以添加幻燈片了。
幻燈片里樣式有單色和圖片兩種樣式,這里需要注意的是“標題”,“按鈕”等是直接在幻燈片背景上顯示的。我選擇上傳的圖片本身就比較豐富,所以其他內(nèi)容我并沒有填寫。上傳完成后我們?nèi)デ芭_看一下。
加上幻燈片的網(wǎng)站會豐富很多,我另外截取了一張蟬知官網(wǎng)的幻燈片給大家看一下,它含有“標題”和“按鈕”效果,大家根據(jù)自己的需要制作就可以了。
【7】內(nèi)容版塊布局
做好了幻燈片以后接下來該設(shè)置其他版塊了。你可能從后臺無法直觀的看到前臺的樣式,此時就可以用到【可視化】編輯的功能了,點擊【設(shè)計-可視化】跳轉(zhuǎn)到前臺,你會發(fā)現(xiàn)此時你可以從前臺進行編輯,版塊可以拖動,刪除,修改文字。是不是超級方便?
如果你想要從后臺進行操作也可以。在后臺的【布局管理】中選擇首頁的中部按鈕,彈出編輯框??梢栽O(shè)置版塊名稱,寬度,邊框等,版塊的位置可以調(diào)整。前后臺的操作可以實現(xiàn)相同的目的。
【8】發(fā)布文章
設(shè)置好版塊后,就可以發(fā)布文章了。我們回到內(nèi)容-文章,點擊發(fā)布文章按鈕。選擇文章所在的類目,標題,關(guān)鍵字,摘要,內(nèi)容等在相應(yīng)編輯框內(nèi)填寫就可以了。
發(fā)布時需要注意的地方是,你可以根據(jù)需要隨意選擇發(fā)布時間,訪問身份可以設(shè)置為公共或者會員(公共是指任何人都可以看,會員則是只有注冊了會員的人才可以看)。草稿狀態(tài)的文章只有從后臺可以看到,從前臺是不可見的。如果文章發(fā)布后再修改內(nèi)容,已經(jīng)發(fā)布的文章也會同步到最新內(nèi)容。
這是文章列表,你所發(fā)布的文章都在列表中顯示,文章還可以添加圖片,附件,修改,置頂?shù)炔僮?。上傳后我們看一下前臺效果。
顯示的文章數(shù)量可以自己設(shè)置,在【設(shè)置-列表】設(shè)置中編輯就可以了。
【9】設(shè)置底部導(dǎo)航
到此,網(wǎng)站的基本模塊都搭建好了,當然你也可以添加底部導(dǎo)航,比如用來做友情鏈接的版塊。那就需要在【設(shè)計-區(qū)塊】中的自定義中增加一個區(qū)塊。點擊自定義的添加按鈕,選擇底部導(dǎo)航。
然后將名稱改為“友情鏈接”,輸入鏈接的名字和地址保存。
做完這一步,可不要以為就添加好了哦,你現(xiàn)在去前臺是看不到友情鏈接版塊的。我們還需要去到【布局管理】界面相應(yīng)的位置添加上。
選好版塊,調(diào)整好寬度和樣式就可以了。然后在前臺就可以看到了。
本文介紹的是用蟬知系統(tǒng)搭建一個網(wǎng)站的基本流程,主要交給你基礎(chǔ)模塊的設(shè)置和內(nèi)容填充的方法,掌握這些方法你就可以自己搭建一個網(wǎng)站了。當然,要想做與眾不同的效果是需要時間去練習(xí)和操作,掌握更多方法和技巧的,加油。
總結(jié)
以上是生活随笔為你收集整理的手把手教你建网站--程序小白适用篇的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【转】实战USB接口手机充电 看3.0/
- 下一篇: 傅立叶变换,时域,频域一