網(wǎng)站開發(fā)是網(wǎng)站建設(shè)工作的總稱。這包括從標(biāo)記和編碼到腳本、網(wǎng)絡(luò)配置和內(nèi)容管理系統(tǒng)開發(fā)的所有工作。網(wǎng)站開發(fā)通常是指網(wǎng)頁標(biāo)記和編碼，而網(wǎng)站開發(fā)則包括所有相關(guān)的開發(fā)任務(wù)，如客戶端腳本、服務(wù)器端腳本、服務(wù)器和網(wǎng)絡(luò)安全配置、電子商務(wù)開發(fā)和內(nèi)容管理系統(tǒng)(CMS)開發(fā)。

這項(xiàng)工程聽起來很復(fù)雜，但是很多高校的老師都會給計(jì)算機(jī)專業(yè)的學(xué)生布置這樣的作業(yè)，那么留學(xué)生們要如何開發(fā)網(wǎng)頁呢?

1. 制定計(jì)劃

在將筆放在紙上或手放在鍵盤上之前，首先與組織內(nèi)的團(tuán)隊(duì)和人員聯(lián)系，制定網(wǎng)站計(jì)劃至關(guān)重要。在你的第一個網(wǎng)站草稿之前，以下是一些需要考慮的問題：

- 你的網(wǎng)站的目標(biāo)是什么?

- 你的受眾是誰，你希望他們在你的網(wǎng)站上做什么?

- 你正在構(gòu)建哪種類型的網(wǎng)站?(例如基本信息、會員制、在線商店)

- 你打算發(fā)布什么內(nèi)容，以及發(fā)布的數(shù)量是多少?

- 這些內(nèi)容的目的是什么?

- 你將如何構(gòu)建網(wǎng)站以獲得最佳導(dǎo)航體驗(yàn)?

- 你的預(yù)算是多少?

回答這些問題需要與你的網(wǎng)站開發(fā)、市場營銷和財(cái)務(wù)團(tuán)隊(duì)互動，以確定你的優(yōu)先事項(xiàng)并做出明智的決策。簡而言之，與其在遇到障礙時再返工，不如在過程開始時創(chuàng)建一份路線圖要容易得多。

2. 創(chuàng)建線框圖

所有好的網(wǎng)站都從一個藍(lán)圖開始。開發(fā)人員稱之為線框圖。它不必是正式的文件;它只是你網(wǎng)站的一個愿景，可以為你和你的開發(fā)人員提供方向和一個開始的地方。你可以在白板上繪制它，或者使用工具如Invision、Slickplan或Mindnode。

線框圖是純粹的視覺工具，將幫助你了解文本和圖像將在各個網(wǎng)頁上放置在何處。你可以使用空白框和“虛擬文本”來了解你的內(nèi)容將如何顯示在前端。與你的開發(fā)人員合作創(chuàng)建線框圖，以便他們了解你的想法。

3. 編寫站點(diǎn)地圖

接下來，是創(chuàng)建站點(diǎn)地圖的時候(不要與sitemap.XML混淆，后者是一個幫助搜索引擎爬行和查找你的網(wǎng)站的XML文件)。就像商業(yè)計(jì)劃為潛在投資者提供了關(guān)于你的目標(biāo)和可交付內(nèi)容的洞察一樣，站點(diǎn)地圖為開發(fā)人員提供了滿足你的愿景所需的信息。你可以自己創(chuàng)建站點(diǎn)地圖，也可以與你的開發(fā)人員合作。

在計(jì)劃你的網(wǎng)站時，可以考慮以下一些問題：

- 你想要哪些個別頁面?

- 這些頁面上會有什么內(nèi)容?

- 你如何將這些頁面組織成類別?

- 你的網(wǎng)站頁面的層次結(jié)構(gòu)是什么?

- 頁面之間如何鏈接?

- 哪些頁面和類別對你的網(wǎng)站和用戶體驗(yàn)至關(guān)重要?

- 哪些頁面或類別可以刪除或合并?

再次強(qiáng)調(diào)，與你組織內(nèi)的其他團(tuán)隊(duì)咨詢是個好主意。如果你有一個SEO和/或內(nèi)容戰(zhàn)略團(tuán)隊(duì)，他們的意見在頁面鏈接結(jié)構(gòu)和分類方面將至關(guān)重要。

4. 編寫網(wǎng)站代碼

Web開發(fā)過程的下一步是編寫代碼。開發(fā)人員將使用不同的編程語言來開發(fā)網(wǎng)站的前端和后端，以及網(wǎng)站的不同功能(如設(shè)計(jì)、交互等)。這些不同的語言一起工作來構(gòu)建和運(yùn)行你的網(wǎng)站。讓我們從最常用的語言開始。

- HTML(超文本標(biāo)記語言)：自1990年代以來一直在使用。它是構(gòu)建網(wǎng)站所需的最基本的東西。雖然只使用HTML可以創(chuàng)建一個網(wǎng)站，但它可能不會看起來特別吸引人。以下是一個基本的Bootstrap按鈕的HTML代碼示例：

```html

<button type="button" class"btn">Click Me</button>

```

類似CSS和JavaScript這樣的語言可以增強(qiáng)和修改由HTML代碼構(gòu)建的基本網(wǎng)站結(jié)構(gòu)。HTML5是最新版本，支持跨平臺瀏覽器功能，因此在移動應(yīng)用程序開發(fā)中非常流行。

- CSS(層疊樣式表)：在1990年代末開發(fā)。它添加了設(shè)計(jì)元素，如排版、顏色和布局，以改善網(wǎng)站的整體“外觀”。CSS允許開發(fā)人員根據(jù)你為網(wǎng)站設(shè)想的美感來進(jìn)行轉(zhuǎn)換，與HTML5一樣，CSS與所有瀏覽器兼容。

- JavaScript：JavaScript是編程語言中的“點(diǎn)睛之筆”。它于1990年代中期創(chuàng)建，用于為網(wǎng)站添加功能。開發(fā)人員使用它來添加動畫、自動化某些頁面內(nèi)的任務(wù)，并添加增強(qiáng)用戶體驗(yàn)的交互功能。JavaScript正在迅速發(fā)展。曾被認(rèn)為是“玩具”語言，現(xiàn)在是世界上使用最廣泛的編程語言。在Node.Js的幫助下，它現(xiàn)在是后端編程語言。它是瀏覽器能夠理解的第一種語言，甚至有人討論將機(jī)器學(xué)習(xí)應(yīng)用于它。以下是一個在WordPress中自動打開鏈接的JavaScript代碼示例。

HTML、CSS、JavaScript是Web開發(fā)的“三巨頭”。幾乎每個網(wǎng)站都以某種方式使用它們。還有許多其他語言，如Java、C++、Python和SQL等，但理解這三種語言是構(gòu)建你的網(wǎng)站開發(fā)知識的基礎(chǔ)。

5. 構(gòu)建網(wǎng)站的后端

編寫代碼可能是Web開發(fā)的較復(fù)雜部分之一，但它遠(yuǎn)不是唯一的組成部分。你還必須構(gòu)建網(wǎng)站的后端和前端結(jié)構(gòu)以及設(shè)計(jì)。

讓我們從后端開始。

后端處理支持前端功能的數(shù)據(jù)。例如，F(xiàn)acebook的后端存儲我的照片，以便前端可以讓其他人查看它們。后端由兩個關(guān)鍵組件組成：

- 數(shù)據(jù)庫：負(fù)責(zé)存儲、組織和處理數(shù)據(jù)，以便它可以通過服務(wù)器請求檢索。

- 服務(wù)器：構(gòu)成計(jì)算機(jī)的硬件和軟件。服務(wù)器負(fù)責(zé)發(fā)送、處理和接收數(shù)據(jù)請求。它們是數(shù)據(jù)庫和客戶端/瀏覽器之間的中介。瀏覽器實(shí)際上會告訴服務(wù)器“我需要這些信息”，服務(wù)器將知道如何從數(shù)據(jù)庫獲取該信息并將其發(fā)送到客戶端。

這些組件共同工作，為每個網(wǎng)站構(gòu)建基礎(chǔ)。

至于構(gòu)建你的網(wǎng)站，后端開發(fā)人員將建立以下三個重要部分：

- 邏輯代碼：這是你的網(wǎng)站將如何響應(yīng)特定請求以及網(wǎng)站對象將如何交互的一組規(guī)則。

- 數(shù)據(jù)庫管理：這是你的網(wǎng)站將如何組織、管理和檢索數(shù)據(jù)的方式。

- 基礎(chǔ)架構(gòu)：這是你的網(wǎng)站將如何托管的方式。托管自己的網(wǎng)站將為你提供更大的控制權(quán)，但成本更高，需要維護(hù)自己的服務(wù)器健康和安全。

有了這些組件和決策，你的網(wǎng)站將準(zhǔn)備好進(jìn)行前端開發(fā)。

注意：后端與Web開發(fā)略有不同，因?yàn)槿绻悴淮鎯θ魏螖?shù)據(jù)，你不總是需要后端。在這種情況下，“數(shù)據(jù)”指的是你需要保存和持久化的任何用戶輸入信息。想象一下登錄到一個網(wǎng)站。如果他們沒有后端，他們?nèi)绾斡涀∧愕牡卿浶畔?或者你的配置設(shè)置是什么?要獲得這些信息，你需要后端。例如，F(xiàn)acebook需要知道你的好友列表中有哪些人，你加入了哪些活動，你創(chuàng)建了哪些帖子等等。這都是存儲在數(shù)據(jù)庫中的“數(shù)據(jù)”。如果他們沒有帶有數(shù)據(jù)庫的后端，那么這些數(shù)據(jù)對他們來說都是不可訪問的。另一方面，一個純粹提供信息的網(wǎng)站，不需要用戶輸入任何數(shù)據(jù)，可能不需要后端。

因此，如果沒有數(shù)據(jù)，你不一定需要后端開發(fā)。但這并不意味著你不應(yīng)該學(xué)習(xí)基礎(chǔ)知識。你永遠(yuǎn)不知道何時會需要它。

6. 構(gòu)建網(wǎng)站的前端

如果你曾經(jīng)涉足過網(wǎng)頁設(shè)計(jì)，或者嘗試使用WordPress、Squarespace或Google Sites創(chuàng)建網(wǎng)站，那么你已經(jīng)接觸過前端Web開發(fā)。

前端工作很重要，因?yàn)樗鼪Q定了你的訪問者、客戶和用戶看到什么，以及他們將如何使用你的網(wǎng)站。前端(或客戶端)開發(fā)包括JavaScript、HTML和CSS的組合。它還控制了諸如排版和字體、導(dǎo)航、定位以及瀏覽器兼容性和響應(yīng)性等組件。這部分將更多地反映你最初的網(wǎng)站愿景以及你在線框圖中包含的內(nèi)容。

隨著技術(shù)和消費(fèi)者偏好的變化，客戶端編碼往往比后端開發(fā)更容易過時。這就是編碼資源(如下面提到的資源)派上用場的地方。

7.(可選)使用內(nèi)容管理系統(tǒng)(CMS)

為什么有人會選擇使用內(nèi)容管理系統(tǒng)(CMS)而不是手工編碼或從頭開始編碼?的確，CMS不夠靈活，因此在前端上控制權(quán)較小。然而，CMS更容易使用(你需要編寫更少的代碼)，通常具有托管網(wǎng)站、存儲用戶信息、創(chuàng)建博客、發(fā)布著陸頁、捕獲潛在客戶以及構(gòu)建電子郵件列表等工具。因此，你將能夠在不到一半的工作量下使你的網(wǎng)站更加盈利。

CMS選項(xiàng)通常包括插件，可以省去編寫后端的需要。例如，有WordPress的電子商務(wù)插件，因此，不需要構(gòu)建復(fù)雜的后端來向客戶收取信用卡費(fèi)用，可以使用現(xiàn)有的插件，避免處理數(shù)據(jù)庫和服務(wù)器端代碼。

流行的內(nèi)容管理系統(tǒng)包括HubSpot、Joomla、Magento和WordPress，后者在市場上占有65%以上的份額。在這種情況下，我們談?wù)摰氖情_源的WordPress軟件，而不是WordPress網(wǎng)站構(gòu)建器。

8. 獲取域名

此時，你的網(wǎng)站將具有IP地址。它還需要一個域名，一個可記住的網(wǎng)站名稱，讓你的訪問者可以用來找到你的網(wǎng)站。也許你聽說過GoDaddy和Hover等網(wǎng)站。這些服務(wù)可以幫助你購買域名，并在ICANN(互聯(lián)網(wǎng)名稱與數(shù)字地址分配機(jī)構(gòu))注冊。大多數(shù)域名注冊在一年內(nèi)需要續(xù)訂。

網(wǎng)站構(gòu)建器和托管服務(wù)，如WordPress和Squarespace，也允許你購買域名。

9. 啟動你的網(wǎng)站

一旦設(shè)置了域名并將其鏈接到托管服務(wù)器，你幾乎可以準(zhǔn)備將你的工作展示給網(wǎng)絡(luò)。但不要那么快——在正式發(fā)布之前，你仍然需要檢查一些事情。這些包括為團(tuán)隊(duì)分配職責(zé)、徹底測試你的網(wǎng)站是否有任何故障、優(yōu)化SEO以及在“啟動”之前進(jìn)行最后檢查，使你的網(wǎng)站上線。

海馬課堂留學(xué)生作業(yè)輔導(dǎo)，根據(jù)學(xué)生的輔導(dǎo)需求匹配背景相符的專業(yè)老師。1V1個性化備課，雙語教學(xué)，實(shí)時輔導(dǎo)，講解相關(guān)知識點(diǎn)和解題思路，提供大型作業(yè)任務(wù)的解決方案，輔導(dǎo)計(jì)算機(jī)編程語言操作，教授學(xué)生高效完成PPT和演講稿，針對性解決留學(xué)生各類作業(yè)中遇到的困擾，提高作業(yè)成績！