導讀: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。
當按下OK時,WebMatrix將為您建立一個新的空網站。然後此網站將被載入到WebMatrix編輯器中。您可以在這裡看到這一點:
在進一步開發之前,理解在這裡看到的一些內容會有所協助。第一點是WebMatrix不僅僅是一個代碼編輯工具。它整合了一個名為IIS Express的Web伺服器。Web伺服器是一個特殊的軟體,它監聽Internet的資料請求,通過(通常是向Web瀏覽器)傳送該資料來回答該請求。
只要您開啟瀏覽器並鍵入類似http://www.microsoft.com這樣的內容,您就會調用Microsoft的Web伺服器,該伺服器將通過發送HTML、JavaScript、CSS、圖片等代碼來回應。然後您的瀏覽器會將它們組合到一個網頁中。
在WebMatrix中內建一個伺服器,使您能夠像使用Internet上的Web伺服器一樣非常輕鬆地開發網站。如果您查看螢幕,在網站名稱(在本例中為“Movies”)的下面您將看到該伺服器在地址http://localhost:8946上提供該網站,這表明伺服器的主機位於本地,也就是位於您的開發機器上。
從WebMatrix內,您可以啟動該Web伺服器並運行您的網站,但是如果您現在這麼做,將得到一個錯誤,因為您還未為網站建立任何內容。我們下一步將完成此任務。
建立您的第一個網頁
您將注意到,WebMatrix允許您通過選擇左側的按鈕,在不同的工作區之間切換。現在選擇的是Site按鈕,工作區為您顯示了網站的詳細資料(比如網站的URL)和您可使用的其他工具(比如監控您的網站請求)。在學習本文的過程中將深入分析每個工作區,但是現在只需按下Files按鈕選擇該工作區。
WebMatrix現在將開啟File工作區,由於您的網站中還沒有任何檔案,所以它看起來是空的。但是,它提供了一個非常友好的按鈕,允許您向網站添加檔案,或者您可以使用工具列中的New按鈕建立新檔案。
無論選擇哪種方法,您都將看到Choose a File Type對話方塊,其中提供了針對網路上通常使用的許多不同檔案類型的許多選擇。
選擇HTML檔案類型,將它命名為default.html並按下OK。WebMatrix現在將建立一個簡單的HTML檔案並開啟它。
HTML(超文字標記語言 (HTML))檔案是一組指令,它告訴瀏覽器如何繪製網頁。它通常包含一個標題和一個本文,標題中包含關於網頁本身的指令,本文是網頁的內容。內容使用標記來進行標記,內容從角括弧中的標記名稱開始,比如<body>,到角括弧中的斜杠後跟名稱結束,比如</body>。因此,這些標記中的任何內容都會被瀏覽器視為網頁的本文。您可以在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's a wonderful life</li> <li>Lord of the Rings</li> <li>The Fourth World</li> <li>The Lion King</li> </ol> </body> </html>
您在<title>標記中輸入了一些文本,並在<body>標記之間添加了一些代碼。此代碼將使用<h1>作為Heading樣式文本,使用<ol>告訴瀏覽器您在呈現一個列表,使用一些<li>項告訴瀏覽器您在呈現一些清單項目。
在WebMatrix工具列中,您將看到一個“Run”按鈕。
選擇它,WebMatrix將啟動瀏覽器,開啟在您的本機伺服器上啟動並執行網站。
這裡發生了很多事情。我們詳細分析一下。
Web伺服器
注意到瀏覽器上的地址欄了嗎?它沒有開啟您硬碟上的檔案,但它啟動了Web伺服器並將瀏覽器指向該Web伺服器,要求它提供檔案default.html。
看一下您PC上的系統托盤,您將看到一個小表徵圖表明Web伺服器IIS Express正在運行。
按右鍵它,您將看到它正在運行您的Movies網站。
網頁標題
現在看一下網頁的瀏覽器選項卡。它應該包含文本“My Favorite Movies”。為了進行比較,我們在Internet Explorer、Chrome、Safari、FireFox和Opera中運行同一個網站。可以注意到,該文本是您輸入到網頁的<head> 中的 <title>標記內的內容,您通過這種方式告訴瀏覽器這是網頁標題。不同的瀏覽器會採用不同的方式處理網頁標題。
Internet Explorer:
Chrome:
Safari:
Firefox:
Opera:
Web開發人員需要注意的是,不同的瀏覽器執行操作的方式稍微不同。在不同的瀏覽器上測試您的網頁,檢查它的行為是否符合預期,這是個不錯的想法。
注意:在不同的瀏覽器中啟動您的網站
WebMatrix的一個真正不錯的方面不是為您提供了一個在開發機器上啟動並執行Web伺服器,而是能夠快速啟動您安裝的任何瀏覽器。可以單擊WebMatrix工具功能區中的Run按鈕底部的向下箭頭體驗這一點。
該列表將僅顯示您已安裝的瀏覽器。
以上就是WebMatrix進階教程(2):教您如何使用WebMatrix建立第一個網頁的內容,更多相關內容請關注topic.alibabacloud.com(www.php.cn)!