導讀：Microsoft WebMatrix是一個免費的工具，可用于創建、自定義和在Internet上發布網站。
WebMatrix使您能夠輕松創建網站。您可以從一個開源應用程序（比如WordPress、Joomla、 DotNetNuke或Orchard）開始，WebMatrix會為您處理下載、安裝和配置這些應用程序的任務。或者您可以使用許多內置的模板自行編寫代碼，這些模板有助于您迅速上手。無論您做何選擇，WebMatrix都提供了您的網站運行所需的一切內容，包括Web服務器、數據庫和框架。通過在您的開發桌面使用與您將在Web主機上使用的相同堆棧，將網站上線的過程變得既輕松又順利。
您可以從http://web.ms/webmatrix下載它。
現在您只需花幾個小時便可學會使用WebMatrix、CSS、HTML、HTML5、ASP.Net、SQL、數據庫等知識以及如何編寫簡單的Web應用程序。內容如下：
在第2部分，您看到了如何使用WebMatrix創建非常簡單的網頁，以及此頁面如何在多種不同瀏覽器中運行。在這一部分中，您將了解如何更改網頁的視覺樣式，使用級聯樣式表(CSS)技術。
這里是您在網頁上內置的簡單電影列表：
使用級聯樣式表準備設置網頁樣式
在接下來的幾步中，您將看到更多的HTML標記，它們可用于實現超鏈接、網頁分區和腳本標記等功能，您還將了解如何使用級聯樣式表(CSS) 編輯此網頁，設置它的外觀。最后將使用布局獲取此網頁和網站上其他網頁之間相同的內容，這樣可以更輕松地編輯相同內容。
使用分隔線
在HTML中，可以使用<div>標記以邏輯方式將網頁劃分為幾塊。這在您在本文后面查看樣式時尤其有用，您可以通過設置相應的div來指定網頁某個部分的樣式。
這里是第一部分中您的網頁的HTML：
<!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>Its a wonderful life</li> <li>Lord of the Rings</li> <li>The Fourth World</li> <li>The Lion King</li> </ol> </body> </html>
要做的第一件事是將包含電影的列表包裝到它自己的<div>中，如下所示
<!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> <div id="movieslist"> <ul> <li>Its a wonderful life</li> <li>Lord of the Rings</li> <li>The Fourth World</li> <li>The Lion King</li> </ul> </div> </body> </html>
現在可以看到，包含電影的<ol><li>列表現在包含在<div>標記中。如果現在查看該網頁，會發現與之前沒什么不同。這是因為<div>標記是一個邏輯分隔線。它沒有任何物理外觀。
使用超鏈接
您可能已經熟悉超鏈接–一個頁面上鏈接到另一個頁面的可單擊區域。盡管這些區域稱為超鏈接，但在HTML中它們最初稱為定位標記(anchor)，因此只要您希望創建超鏈接，就可以使用<a>標記。
<a>（或定位）標記使<a>和</a>之間的內容可以單擊。當用戶單擊此內容時，瀏覽器將重定向到<a>標記中使用href屬性指示的一個HREF（超引用）。
屬性在標記本身上定義，而不是在標記內定義，類似于：
<tag attribute=”attributevalue”>content</tag>
因此，要創建超鏈接，您可以使用這樣的語法：
<a href=”http://www.microsoft.com”>Click Here</a>
href不必是一個像上面這樣的網站，也可以是一個執行編程人員所使用的操作的JavaScript函數。一種特殊的href可在開發期間用作占位符，這樣您可以測試超鏈接的樣式是否有效。為此，使用“#”字符作為href。
所以，為了將所有包含電影的<li>項轉換為超鏈接，我們將電影的文本包裝在<a>標記中，將HREF設置為#，類似于以下形式：
<!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> <div id="movieslist"> <ol> <li><a href="#">Its a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li> <li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li> </ol> </div> </html>
如果運行網頁，您將看到列表上的元素將使用熟悉的超鏈接樣式，也就是所謂的藍色下劃線：
添加頁眉和頁腳
將要做的下一件事是向網頁添加頁眉和頁腳。您將使用Html5中提供的新<header>和<footer>標記來完成此任務。可以在w3cschools網站上了解HTML5的更多信息：http://w3schools.com/html5/default.asp
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Favorite Movies</title> </head> <body> <header> <h1>A list of my Favorite Movies</h1> </header> <div id="movieslist"> <ol> <li><a href="#">Its a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li> <li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li> </ol> </div> <footer> This site was built using Microsoft WebMatrix. <a href="http://web.ms/webmatrix">Download it now.</a> </footer> </html>
可以看到，它們是非常簡單的HTML代碼。
對于頁眉，我們將前面創建的<h1>包裝在<header>標記中，對于頁腳，我們創建一些文本和一個超鏈接。
在瀏覽器中查看網頁，它現在將類似于以下界面：
除了頁腳不同，它沒有太多差異，但不用擔心，這種情況很快就會改變！
定義網頁的外觀
在前面一節中，在介紹定位標記時您了解了屬性，屬性描述元素的行為。對于定位標記，您通過指定HREF屬性定義了在單擊時發生的行為。
可以想象，您可以使用屬性指定元素的外觀，包括字體樣式、字體大小、顏色、邊框等等。
所以，舉例來說，對于我們前面在網頁上定義的<h1>（其內容為“A list of my Favorite Movies”），您可以更改它的字體和顏色如下：
<h1 style="color:blue; font-size:32; font-family:Verdana; text-decoration:underline">A list of my Favorite Movies</h1>
可以看到，<h1>標記的樣式屬性包含該樣式的定義列表。上面的標記將顏色設為藍色，將字體設置為 32，將字體系列設置為Verdana，并將文本裝飾設置為下劃線.
盡管這樣能很好地生效，但它并不是設置網頁樣式的最好方式。想象一下，如果您必須通過這種方式設置每個元素的樣式，將會是什么結果。您的網頁上最終會有很多文本，減緩下載和瀏覽的速度。
幸運的是，還有另一種方式，那就是在網頁上使用樣式表。樣式表使用級聯樣式表概念來定義，其中元素上的樣式集可以由子元素繼承。舉例來說，如果您在<div>上設置了一個樣式，并且<div>具有子元素<ol>和<li>，那么該樣式也將應用于它們，除非開發人員改寫了此樣式。w3cschools是一個了解CSS的好地方：http://w3schools.com/css/default.asp。
我們看一下如何在<h1>標記上定義樣式，而無需在樣式屬性上使用很多內聯代碼。
不用將所有樣式代碼放在<h1>標記本身內，我們只需要指定它的類屬性，如下所示：
<h1 class="Title">A list of my Favorite Movies</h1>
現在標記有了一個類，我們可以告訴瀏覽器為擁有此類的所有內容使用一種特定樣式。這使用CSS代碼語法來完成，類似于：
.Title {
font-size: xx-large;
font-weight: normal;
padding: 0px;
margin: 0px;
}樣式“語言”包括一組以分號分隔并包含在花括號（{..}）中的屬性。如果要將此樣式應用到一個類，該類會使用“點”語法進行定義，也就是在類名稱前添加一個點。
此代碼放在網頁頁眉中的<style>標記內。您的網頁標記應該類似于：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Favorite Movies</title>
<style type="text/css">
.Title {
font-size: xx-large;
font-weight: normal;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<header>
<h1 class="Title">A list of my Favorite Movies</h1>
</header>
<div id="movieslist">
<ol>
<li><a href="#">It's a wonderful life</a></li>
<li><a href="#">Lord of the Rings</a></li>
<li><a href="#">The Fourth World</a></li>
<li><a href="#">The Lion King</a></li>
</ol>
</div>
<footer>
This site was built using Microsoft WebMatrix.
<a href="http://web.ms/webmatrix">Download it now.</a>
</footer>
</html>當運行它時，樣式將生效，您將看到以下界面：
請記住<h1>擁有一個“Title”類，所以通過設置.Title，您可以設置擁有相同類的所有元素的樣式。
當希望設置特定元素時，可以為該元素使用一個類（假設該類只有一個實例），或者可以使用一個id命名該元素，然后設置該id的類。如果看一下您的HTML，您將會注意到電影列表保存在一個id為“moviesList”的<div>中。您可以通過在樣式表定義中在“moviesList”之前添加 # 來設置它的樣式，如下所示：
#movieslist{font-family: Geneva, Tahoma, sans-serif;}這樣就定義了 <div> 的樣式，并且因為樣式表可以級聯（只需為它們提供該名稱），此div中的任何元素都將應用此樣式。所以，即使我沒有專門設置包含這些文本的<li>元素的樣式，仍然會應用該樣式：
請記住，瀏覽器默認會將<ol>列表中的<li>對象呈現為編號項。我們可以設置樣式來刪除編號項。因為這些對象位于我們稱為“movieslist”的div的內部，我們可以輕松訪問它們來更改其樣式。
下面是語法：
#movieslist ol {
list-style: none;
margin: 0;
padding: 0;
border: none;
}該語法表明，對于#movieslist中的每個<ol>，將樣式設置為不是列表（也即沒有項目符號）、沒有外邊距、沒有邊框、沒有內邊距。
下面是設置后的結果：
可以看到，現在沒有編號。
每個列表項的文本保存在一個<a>標記中，所以我們可以使用以下語法，定義#movieslist中的每個<li>標記內的每個<a>標記的外觀：
#movieslist li a {
font-size: large;
color: #000000;
display: block;
padding: 5px;
}這里的設置不言自明，我們現在看一下運行網頁時的外觀。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
