很多人都把建立網站想得太複雜了,感覺好像是要會一大堆的知識及技巧,才有辦法建立一個屬於自己的網站,其實,沒那麼難啦,看你對於你的網站的期望是什麼而定。很多的朋友,只想要把自己的一些想法放在網路上和其它人分享,也沒有什麼特別的想法,那麼只要去一些免費的部落格系統申請一個就可以了,甚至連Facebook上都有粉絲專頁以及社團可以申請,在社團中也可以寫一些文章當做是簡單的網誌來使用。

  但是,畢竟這些都是在別人的地盤上放東西,難免被別人放一些他們系統的廣告,有些朋友並不太喜歡。如果,你想要有一個完全乾淨的網站環境,那麼就可以考慮自己去申請一個免費的主機空間(現在大部份的免費主機都是不會顯示廣告的,例如http://yabi.me, http://yabi.runhosting.com),如何申請這些空間在http://skynetbooks.com的第二章中也有詳細的介紹。當然,現在主機這麼便宜,一年花個幾百元擁有一個屬於自己的網址和網站空間,也是非常划算的。

  有了自己的主機空間之後,一定要安裝WordPress或是許多大型的CMS系統才能夠開始在上面發佈文章嗎?其實不是喔。只要是網站的主機空間,本身就具備可以提供網頁的能力,所以,我們只要放置網頁在相對應的主機資料夾之下(一般都是wwwroot或是public_html),而且以.html或.htm或是.php做為副檔案,就會被解讀為網頁文件,就可以在瀏覽者自己的瀏覽器中順利呈現了。如果,這個網頁是以index.html或是index.htm或是default.htm來命名,那麼它會被當做一進入這個網站的索引頁,也就是當瀏覽者不指定瀏覽的網頁時,預設被顯示出來的網頁。

  也就是說,例如我們在主機的public_html目錄下建立了一個叫做index.html的文字檔案,然後輸入以下的內容:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>歡迎光臨</title>
  </head>
  <body>
    <h1>這是我的第一個網頁</h1>
    <hr>
  </body>
</html>

  這樣就是一個完整的網頁內容了。假設我們的網址是cash.oo.gd,那麼任何人的只要輸入http://cash.oo.gd,這個網頁就會被呈現出來。這是一個典型的HTML5的基本架構,一個網頁的雛型結構,就是這樣而已。

  而所謂的HTML5也沒有什麼特別的地方,就是網頁編輯語言的最新標準格式罷了!只是來到現代的環境,以前大家都會把HTML的標記用來調整網頁的呈現外觀,想辦法使用基本的HTML標記網頁看起來比較好看。但是現在不一樣囉!現在網頁製作的想法都是,使用HTML5來描述網頁資料的內容,儘量讓每一頁網頁的內容更有結構化,更容易組織成為可以方便查詢存取的資料單位,而外觀的部份,就交給CSS3來負責。所以,可以簡單的把它們的角色看成HTML5負責內容,而CSS3負責外觀。至於使用者的介面以及動態資料存取等等,則交給JavaScript。

  以下就以iMaxNOW主機的主控台,來操作一次給初學者參考。首先,進入虛擬主機的主控台http://imaxnow.com/cpanel,找到FileManager,如下所示:

cash00

  當然,現在iMaxNOW的主控已經完全支援中文了,所以你也可以先切換為中文的介面,如下所示:

cash00a

  然後找到檔案管理員功能,如下所示:

cash00b

  點擊進入檔案管理員,會先遇到這個訊息,不用理會它,直接按下「移至」按鈕即可:

cash00c

  進入檔案管理員之後,先建立一個叫做index.html的檔案,如下所示:

cash01

  建立了index.html之後,我們可以點選index.html這個檔案,然後來進行編輯的工作。有三個編輯器可以選用,如下所示:

cash02

  在這裡,我們選擇「程式碼編輯器」,也是會先出現一個提示訊息,如下:

cash03

  直接按下「Edit」按鈕進入即可。如下所示:

cash04

  然後我們就可以把之前的網頁HTML碼輸入到這個編輯區中,再按下右上角的「保存」即可。這樣子就編輯完成了我們的第一個網頁了。而這個編輯器,還支援許多不同程式語言的高亮度文字顯示功能,包括以下這些:

cash05

  在儲存完畢之後,不需要有任何其它額外的設置動作,只要在任何人的瀏覽器輸入你的網址(在此例為http://cash.oo.gd),就可以看到以下的網頁內容囉:

cash06

  一切都很簡單吧!只要是可以正常使用的主機,你可以直接在虛擬主機的cPanel主控台中修改及編輯網頁,儲存之後立即生效!

  當然,如果你要編輯的網頁是比較複雜的,還是需要其它的軟體來輔助,我們在後面的文章中會再加以說明。

(2467)

%d 位部落客按了讚: