首頁 > web前端 > css教學 > 主體

WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁

黄舟
發布: 2016-12-26 16:21:34
原創
1677 人瀏覽過

導讀:Microsoft WebMatrix是一個免費的工具,可用於建立、自訂和在Internet上發佈網站。

WebMatrix讓您能夠輕鬆建立網站。您可以從一個開源應用程式(例如WordPress、Joomla、DotNetNuke或Orchard)開始,WebMatrix會為您處理下載、安裝和設定這些應用程式的任務。或者您可以使用許多內建的模板自行編寫程式碼,這些模板有助於您迅速上手。無論您做何選擇,WebMatrix都提供了您的網站運作所需的一切內容,包括Web伺服器、資料庫和框架。透過在您的開發桌面上使用與您將在Web主機上使用的相同堆疊,將網站上線的過程變得既輕鬆又順利。

您可以從http://web.ms/webmatrix下載它。

現在您只需花幾個小時便可學會使用WebMatrix、CSS、HTML、HTML5、ASP.NET、SQL、資料庫等知識以及如何編寫簡單的Web應用程式。內容如下:


在第1部分中您了解了WebMatrix的基本概念,了解如何安裝並運行它。在本章中將使用它來創建您的第一個網站,以及向其中填充您的第一個網頁。


建立網站

選擇「來自範本的網站」選項,您將看到下面的對話框。請注意,您可能會看到許多不同的模板,因為WebMatrix的功能不斷在改進。您需要使用的是Empty Site模板。選擇此模板,將它命名為Movies。

WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁

當按下OK時,WebMatrix將為您建立一個新的空白網站。然後此網站將載入到WebMatrix編輯器中。您可以在這裡看到這一點:


WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁

在進一步開發之前,理解在這裡看到的一些內容會有所幫助。第一點是WebMatrix不僅僅是一個程式碼編輯工具。它整合了一個名為IIS Express的Web伺服器。 Web伺服器是一個特殊的軟體,它監聽Internet的資料請求,透過(通常是向網頁瀏覽器)傳送該資料來回答該請求。

只要您開啟瀏覽器並鍵入類似http://www.microsoft.com這樣的內容,您就會呼叫Microsoft的Web伺服器,該伺服器將透過發送HTML、JavaScript、CSS、圖片等程式碼來回應。然後您的瀏覽器會將它們組合到一個網頁中。

WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁

在WebMatrix中內建一個伺服器,使您能夠像使用網路上的Web伺服器一樣非常輕鬆地開發網站。如果您查看螢幕,在網站名稱(在本例中為「Movies」)的下方您將看到該伺服器在位址http://localhost:8946上提供該網站,這表示伺服器的主機位於本地,也就是位於您的開發機器上。

從WebMatrix內,您可以啟動該Web伺服器並運行您的網站,但是如果您現在這麼做,將得到一個錯誤,因為您還未為網站創建任何內容。我們下一步將完成此任務。

創建您的第一個網頁

您將注意到,WebMatrix允許您透過選擇左側的按鈕,在不同的工作區之間切換。現在選擇的是Site按鈕,工作區為您顯示了網站的詳細資訊(例如網站的URL)和您可使用的其他工具(例如監控您的網站請求)。在學習本文的過程中將深入分析每個工作區,但現在只需按下Files按鈕選擇該工作區。

WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁

WebMatrix現在將開啟File工作區,由於您的網站中還沒有任何文件,所以它看起來是空的。但是,它提供了一個非常友好的按鈕,允許您向網站添加文件,或者您可以使用工具列中的New按鈕建立新文件。

WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁


無論選擇哪種方法,您都將看到Choose a File Type對話框,其中提供了針對網路上通常使用的許多不同檔案類型的許多選項。

WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁

選擇HTML檔案類型,將它命名為default.html並按OK。 WebMatrix現在將建立一個簡單的HTML檔案並開啟它。

WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁


HTML(超文本標記語言)檔案是一組指令,它告訴瀏覽器如何繪製網頁。它通常包含一個標頭和一個正文,標頭中包含關於網頁本身的指令,正文是網頁的內容。內容使用標記來進行標記,內容從尖括號中的標記名稱開始,例如

,到尖括號中的斜線後跟名稱結束,例如。因此,這些標記中的任何內容都會被瀏覽器視為網頁的正文。您可以在w3cschools.com上了解HTML及其標記的更多內容。

http://w3schools.com/html/default.asp。

編輯網頁,使它類似於以下形式:

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
  
<meta charset="utf-8" />  
  
<title>My Favorite Movies</title>  
  
</head>  
  
<body>  
  
<h1>A list of my Favorite Movies</h1>  
  
<ol>  
  
<li>It&#39;s a wonderful life</li>  
  
<li>Lord of the Rings</li>  
  
<li>The Fourth World</li>  
  
<li>The Lion King</li>  
  
</ol>  
  
</body>  
  
</html>
登入後複製

您在

標記中輸入了一些文本,並在標記之間添加了一些程式碼。此程式碼將使用

作為Heading樣式文本,使用
    告訴瀏覽器您在呈現一個列表,使用一些
  1. 項目告訴瀏覽器您在呈現一些列表項目。

    在WebMatrix工具列中,您將看到一個「Run」按鈕。

    WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁

    選擇它,WebMatrix將啟動瀏覽器,打開在您的本地伺服器上運行的網站。

    WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁

    這裡發生了很多事情。我們詳細分析一下。

    Web伺服器

    注意到瀏覽器上的網址列了嗎?它沒有開啟您硬碟上的文件,但它啟動了網路伺服器並將瀏覽器指向該網路伺服器,要求它提供檔案default.html。

    WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁

    看一下您PC上的系統托盤,您將看到一個小圖示表示Web伺服器IIS Express正在運作。


    WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁

    右鍵點擊它,您將看到它正在運行您的Movies網站。

    WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁


    網頁標題

    現在看一下網頁的瀏覽器標籤。它應該包含文本“My Favorite Movies”。為了進行比較,我們在Internet Explorer、Chrome、Safari、FireFox和Opera中運行同一個網站。可以注意到,該文字是您輸入到網頁的

    中的 標記內的內容,您透過這種方式告訴瀏覽器這是網頁標題。不同的瀏覽器會以不同的方式處理網頁標題。 <p>Internet Explorer:</p> <p><img src="https://img.php.cn//upload/image/915/447/252/1482740394715536.png" title="1482740394715536.png" alt="WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁"></p> <p><strong>Chrome:<br></strong></p> <p><br></p> <p><img src="https://img.php.cn//upload/image/301/695/811/1482740408680613.jpg" title="1482740408680613.jpg" alt="WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁"></p> <p><br></p> <p><strong> <br></strong></p> <p><img src="https://img.php.cn//upload/image/860/235/698/1482740425940973.png" title="1482740425940973.png" alt="WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁"></p>Firefox:<p><br></p> <p><strong><br></strong></p> Opera:<p><img src="https://img.php.cn//upload/image/406/268/658/1482740440654102.jpg" title="1482740440654102.jpg" alt="WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁"></p> <p><strong><br></strong></p> <p><img src="https://img.php.cn//upload/image/882/302/483/1482740453452250.png" title="1482740453452250.png" alt="WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁">Web開發人員需要注意的是,不同的瀏覽器執行操作的方式稍微不同。在不同的瀏覽器上測試您的網頁,檢查它的行為是否符合預期,這是一個不錯的想法。 </p> <p>注意:在不同的瀏覽器中啟動您的網站<br></p>WebMatrix的一個真正不錯的方面不是為您提供了一個在開發機器上運行的Web伺服器,而是能夠快速啟動您安裝的任何瀏覽器。可以點選WebMatrix工具功能區中的Run按鈕底部的向下箭頭體驗這一點。 <p></p> <p></p> <p>該清單將僅顯示您已安裝的瀏覽器。 </p> <p><img src="https://img.php.cn//upload/image/400/118/699/1482740473997790.png" title="1482740473997790.png" alt="WebMatrix進階教學(2):教您如何使用WebMatrix建立第一個網頁"></p> <p><br> 以上就是WebMatrix進階教學(2):教您如何使用WebMatrix創建第一個網頁的內容,更多相關內容請關注PHP中文網(www.php.cn)! </p> <p><br></p> <p></p>

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板