0027 程式設計實現一個最簡單的網站要做哪些工作

ADVERTISEMENT

前面第一部分的教程結束了,很多朋友都催著寫後面的教程,可是,學哥也要上班的,也要養家餬口的,所以只能業務時間進行創作,因此更新時間上可能無法保證很及時,請各位朋友們多多諒解。學哥也爭取寫的更詳細一些,方便很多零基礎的同學能夠跨過第一個門檻,從而進入程式設計的美妙世界。

教程規劃

第二部分:html+css靜態網站和阿裡雲上線

學習做網站程式,學習html構造網頁內容佈局,css來控製網頁顯示效果

學會做好自己的個人簡歷網站,學習如何設計,開發,測試網頁

學會在本地執行網頁,以及如何將網站部署到阿裡雲

詳細說明一下規劃:

首先介紹一些網站基礎原理,將一個網站如何訪問的原理說明清楚

然後讓大家瞭解一個最簡單的helloworld網頁是如何一行一行寫出來,並可以呈現在瀏覽器中

再接著就是介紹關於html當中的各種各樣的標籤,具體的用法

然後以完成一個個人簡歷網站為實際例子來做講解說明

逐漸一個一個頁面的完成整個網站的設計,開發,部署

同時引入css將整個網站進行美化和優化,看起來更美觀

詳細講解css一些常用的標籤屬性參數等等

最後是將完成的網站部署到公網上

具體要說明如何在阿裡雲購買一個伺服器,並安裝一些必要的伺服器軟體

然後將程式碼部署上去,如何進行網站測試

最後說明如何在阿裡雲購買一個域名,並進行域名備案,然後將域名解析到對應的伺服器

最後通過瀏覽器測試部署好的網站,完成整個項目

當然,系列課程少不了練習題目,練習題目就是模仿實現一個真實的公司網站,如下圖:

什麼是網站

網站的概念,絕大多數人應該都理解。在電腦或者手機上,開啟一個瀏覽器軟體或者App,然後在位址列中輸入一個網站地址,例如www.toutiao.com,然後輸入回車,就可以看到網站的內容了。

網站都有哪些概念或者元素呢?用下面這個圖來描述一個經典的網站概念:

ADVERTISEMENT

下面,我們按照互動次序來解釋對應的概念。

1.客戶端系統

要訪問一個網站,一般是在某個作業系統裡面訪問,那這個作業系統一般在某個硬體裝置上。

例如可以是一個桌上型電腦安裝了蘋果系統,也可以是一個筆記本安裝了windows系統,還可以是一個手機安裝的是安卓系統或者蘋果手機系統。

一個經典的例子是一個筆記本安裝了Windows 7作業系統:

2.瀏覽器軟體

訪問網站,一般都是通過瀏覽器。

瀏覽器軟體常用的比如windows裡面的IE, 或者chrome ,或者Firefox,或者蘋果系統裡面的safari瀏覽器。

瀏覽器軟體有很多種,不同的瀏覽器軟體都必須遵循一定的規範,這樣可以讓網站在不同的瀏覽器中都能正常顯示,但是也有很多瀏覽器會有自己定義的一些規範,碰到這種規範就一定要小心,要正確儘量使用標準的規範,讓自己的網站在儘可能多的瀏覽器軟體中都能正常訪問。

有的客戶端系統安裝的時候會打包帶著瀏覽器,這樣就無需安裝瀏覽器軟體。

大多數時候,我們都需要下載安裝我們喜歡的瀏覽器軟體。

建議大家在自己的電腦上安裝Chrome瀏覽器,因為用它來偵錯我們開發的網站很方便。

3.域名

一般要訪問一個網站,都是通過域名進行訪問。

域名就是網路上一臺伺服器或者一群伺服器對外提供的一個地址索引。

就好比:上海市人民公園 就是一個域名 www.renmingongyuan.com,它具體的地址是 南京西路231號 對應的就是伺服器的IP地址,假設是121.38.234.124 ,一般很難記住一個IP地址,但比較容易記住域名。

域名的用途是通過名稱進行索引到對應的網路IP地址。

4.網路連線

一般訪問網站都不是訪問本機作業系統中的程式,都是訪問網際網路絡上的一個機器上的程式,這就需要客戶端系統能夠和網路進行連線,確保物理連線層面是連線著的,這樣瀏覽器才可以訪問對應的機器上的網站程式。

當然,剛開始測試網站的時候,是可以放在自己機器電腦上進行測試,測試完成後再部署到網路機器上進行測試。

網路連線可以簡單分為區域網連線和網際網路連線。

區域網連線就是電腦和電腦之間組成的網路是一個訪問受到限制的網路,也就是一般不能在很遠的地方進行訪問,基本上都在一個比較靠近的物理空間之中。例如一個公司內部的網路,不能上網的網路。

網際網路連線就是電腦和電腦之間可以通過網路運營商提供的網際網路接入方式進行連線的網路。例如家裡通過光纖和撥號裝置進行連線到網際網路的網路。俗稱可以上網。也就是可以訪問公網,也就是網際網路公共網路。

ADVERTISEMENT

5.Http網路協議

從客戶端系統的瀏覽器上,輸入一個域名,然後瀏覽器通過一個資料協議向網際網路絡進行索引定位到對應的伺服器。

然後伺服器上面的web服務程式根據訪問請求,找到對應的網站頁面程式,解釋執行之後,將生成的網站內容資料通過網路返回給瀏覽器。

瀏覽器收到這些資料之後,按照html語法進行描繪並顯示在瀏覽器當中,就是我們看到的網站內容了。

這當中計算機瀏覽器和伺服器web服務程式之間進行通訊,遵循的協議就叫Http協議。

當然,這只是一個最簡單的解釋,真正的計算機網路協議一共有7層,適用於不同的理解模式。

具體大家可以去搜尋“分層網路協議”,進行學習。這裡我們只要知道http網路協議即可。

6.伺服器

伺服器就是一臺能提供網站服務的機器裝置。

它可以是一臺物理機器,也可以是一臺虛擬機器器。

關鍵在於它上面安裝了作業系統,作業系統提供了一些服務程式,對外提供web服務。

作業系統可能是Windows系統,也可能是linux系統,也可能是unix系統。

一個經典的伺服器是阿裡雲的一檯安裝了ubuntu作業系統的虛擬機器。

7.web服務程式

在伺服器上一般要對外提供網站訪問服務,都需要安裝web服務程式。

比如windows系統上的IIS服務程式,linux系統上的Apache服務程式。

將網頁程式碼部署到www服務程式規定的目錄下,我們就可以從網際網路訪問這些網頁了。

一個經典的web服務程式是Nginx服務程式。

8.網站程式檔案

不同的網站頁面,意味著是用不同的網站程式檔案來實現的。

一個登入網站頁面,和一個產品詳細介紹網站頁面,肯定是不一樣的檔案。

ADVERTISEMENT

將這些網站程式檔案部署到www服務程式規定的目錄下,才能對外提供網站服務。

然後不同的客戶端通過瀏覽器訪問該網站時,看到的才是一樣的內容。

網站程式檔案,一般分為靜態程式檔案和動態程式檔案。

靜態程式檔案,就是裡面的輸出內容是固定的,主要是以.html檔案結尾的程式檔案。例如 index.html 或者 product.html。

動態程式檔案,就是根據情況輸出的內容是變化的,主要是根據web服務程式提供的可用程式語言來實現。

例如login.php檔案 或者 logout.aspx檔案 等等。

一個經典的網站程式檔案就是用helloworld.html。

9.html語法

瀏覽器收到伺服器web服務程式返回的結果資料之後,要按照html語法格式進行分析,然後將對應的頁面元素描繪到瀏覽器當中,就是我們看到的內容了。

例如

網頁標題,在瀏覽器的標題欄就是現實“網頁標題”。

例如

表格元素,在瀏覽器裡面就會出現一個表格。

後面,我們主要就是要學習通過html語法,將我們要呈現的頁面按照html語法寫成網站程式檔案。

綜合上面的說明,一個經典的網站原理圖就是下面這樣的:

實現一個最簡單的靜態網站要做哪些工作

根據不同的需求,要做的事情不同。

如果這個靜態網站隻需要本機訪問:

1.用編輯器軟體編寫html網頁檔案

2.開啟瀏覽器訪問這個檔案

如果這個靜態網站隻需要區域網訪問:

1.用編輯器軟體編寫html網頁檔案

2.在本機安裝web服務程式

3.將html網頁檔案複製到web服務程式指定目錄下

4.在區域網中任何一臺電腦,開啟瀏覽器訪問本機IP地址的這個檔案

如果這個靜態網站需要網際網路訪問:

1.用編輯器軟體編寫html網頁檔案

2.在一臺具有公網地址的伺服器上安裝web服務程式,例如購買一個阿裡雲伺服器

3.將html網頁檔案複製到該伺服器的web服務程式指定目錄下

4.任何一臺能上網際網路的電腦,開啟瀏覽器訪問公網IP地址的這個檔案

如果這個靜態網站需要網際網路域名訪問:

1.用編輯器軟體編寫html網頁檔案

2.在一臺具有公網地址的伺服器上安裝web服務程式,例如購買一個阿裡雲伺服器

3.將html網頁檔案複製到該伺服器的web服務程式指定目錄下

4.任何一臺能上網際網路的電腦,開啟瀏覽器訪問公網IP地址的這個檔案

5.購買一個域名,將域名解析到具有公網地址的伺服器IP地址

6.任何一臺能上網際網路的電腦,開啟瀏覽器訪問域名的這個檔案

後續,這4種形式,都會進行詳細講解說明。

» 零基礎學程式設計

ADVERTISEMENT