網頁設計CSS教程：第1部分
現在我們已經開始了幾個課程，我們將通過這個三部分的第一課來創建一個純粹的CSS網頁，從而邁向完全的書呆子榮耀的下一步。
不僅僅是CSS樣式，還有CSS定位，這意味著不需要任何表格！
一旦完成，您將以復雜的方式創建頁面，使您的網站能夠在所有類型的設備上看到，包括普通電腦，手機，iPhone，PSP ...真的是任何設備！
...這也意味著你將能夠把更少的工作放在你的網頁加載速度更快，并且易于更新和打印的網站上！
CSS模板布局 - 3的第1部分
在這個容易理解（我希望！）關于用CSS創建網頁的教程中，我將專注于CSS的關鍵組件，在那里（在教程的最后），您將能夠創建漂亮的基于CSS的網頁。
完成本教程后，您應該有足夠的信息來探索CSS和網頁設計，甚至進一步...到我不在這里覆蓋的領域。
讓我們開始吧：
您可以下載我們在本教程中構建的CSS和HTML文件：CSS文件
你可以看看這個頁面應該是這樣的：CSS示例頁面
在這個基于CSS的布局中使用的標簽：
由于CSS的強大功能，我們可以大大減少我們在一個頁面中使用的HTML標簽的數量，同時仍然可以使用僅僅6種類型的布局（缺乏更好的單詞）的HTML標簽。
我們將用來布置內容的標簽：
1. <h。>從'<h1> </ h1>'到'<h6> </ h6>'的標題標記將用于在我們的頁面中標記/標記標題。所以最重要的標題將被包裹在<h1>標簽中，而在<h6>標簽中則是最不重要的。本文標題的一個例子：
CSS模板布局
這也告訴瀏覽器和搜索引擎，這個頁面主要是關于：'CSS Template Layout'
所有的瀏覽器都有一個默認大小（對于每個<h。>標簽），它們如何呈現放置在這些標簽之間的文本。許多這些默認設置可能無法使用（特別是<h1>），因為它們太大了。但是不要害怕，CSS就在這里，我們將使用CSS來使文本的大小更符合我們的喜好。
2. <p>段落標記用于將部分頁面標記為“段落”，很簡單。段落標簽是所謂的“塊元素”。這意味著它就像一個塊，在每個<p>標簽對之前和之后自動插入一個空格。你會看到它的例子來工作。
3. <ul>和<ol>列表標簽將被用來創建我們的菜單。標簽<ul>是“無序列表標簽”，用于創建帶有項目符號或其他未指定或表示順序的圖像/圖標的列表; 因此術語“無序”。所提到的另一個列表標簽（<ol>）是“有序列表標簽”，它創建一個列表，而不是使用項目符號，用數字或字母標記列表項目。代碼示例要遵循。
4. <div>和</ div>：Div標簽允許您對頁面的一部分進行標記，以便您可以對其進行操作。另一種說法是“裝入容器”。一旦你的網頁的一部分在這個<div>容器中，你可以做所有類型的東西，比如樣式，動畫，使其可見或不可見，等等。Div代表了下一代格式化HTML頁面，在許多方面，它們都優于表格。
我們將使用div為我們頁面的一部分創建容器。一個div將被用來“保留”我們的導航菜單，另一個div用于“保留”主頁面。
5. <a href> HTML中最重要的標簽：“鏈接標簽”或“超鏈接標簽”。這使得文本“超”，所以當我們點擊它，我們可以加載另一個頁面或激活/調用一些JavaScript（也稱為ECMA腳本）。
6. <img>這是'圖像標簽'，它允許您鏈接到圖像，以便它們顯示在我們的頁面中。在HTML中，圖像并不嵌入到實際的頁面中，而是圖像標簽（<img>）僅指向圖像的位置，瀏覽器在加載HTML頁面時將嘗試加載該圖像。
這涵蓋了我們將在我們的布局中使用的HTML標簽！不需要表格標簽，<br>標簽和討厭（和DEPRICIATED）<font>標簽。
創建基本頁面模板
通過這些例子，我們將需要一個練習HTML頁面。
要創建練習HTML頁面，請執行以下操作：
1.轉到桌面并創建一個簡單的文本文檔。在Windows上，您只需右鍵單擊并選擇：新建 - >文本文檔。
這將在您的桌面上創建一個簡單的空白文本文檔。命名文件：practiceHTML.htm。Windows會向您顯示一個警告，詢問您是否要更改文件擴展名。答應我'。現在右鍵單擊文件并選擇：'打開'并選擇'記事本'。一旦進入記事本，粘貼在下面的灰色框中找到的模板代碼：
（在Windows中剪切/粘貼文本的簡單方法是按住Ctrl鍵，'c'用于復制，'v'用于粘貼。）
My Practice HTML Page < meta http-equiv = “Content-Type” content = “text / html; charset = iso-8859-1” / >
這段代碼構成了所有HTML頁面的基本結構。現在可以在這些標簽之間剪切和粘貼代碼示例：
<！ - 在這里插入代碼！ - >
最后一個注釋：在<body> </ body>之間找到所謂的注釋。評論是放置在瀏覽器中看不到的筆記的一種方式。以下字符之間的任何內容都將成為HTML注釋：
<！ - 和 - >
評論內的任何內容都將在瀏覽器中隱藏。所以在上面的例子中，'and'這個詞在瀏覽器中是不可見的。留下關于你在頁面中做什么的信息是一個好方法。當其他人在網頁上工作或者甚至在你工作的時候，它可以派上用場，因為你可能會忘記你為什么以某種方式做事。
構建CSS
一旦創建了模板頁面，創建一個文件夾并將其命名為“myCSSwebsite”，然后將HTML頁面放入其中。在同一個文件夾中，創建一個新的文本文件并將其命名為：'myCSS.css'。一旦創建打開該文件并粘貼到此模板的CSS代碼，然后保存：
/ * Generic Selectors * /
body {
font-family ： Georgia ， “Times New Roman” ， Times ， serif ;
font-size ： 14px ;
顏色： ＃333333 ;
背景顏色： ＃F9F9F9 ;
}
p （
寬度： 80％;
}
li {
list-style-type ： none ;
行高： 150％;
list-style-image ： url （../images/arrowSmall.gif ）;
}
h1 {
font-family ：格魯吉亞， “Times New Roman” ， Times ， serif ;
font-size ： 18px ;
font-weight ： bold ;
顏色： ＃000000 ;
}
h2 {
font-family ：格魯吉亞， “Times New Roman” ， Times ， serif ;
font-size ： 16px ;
font-weight ： bold ;
顏色： ＃000000 ;
border-bottom ： 1px solid ＃C6EC8C ;
}
/ ****************偽類**************** /
a ：link {
color ： ＃00CC00 ;
文字裝飾： 下劃線;
font-weight ： bold ;
}
li a ：link {
color ： ＃00CC00 ;
文字修飾： 無;
font-weight ： bold ;
}
a ：visited {
color ： ＃00CC00 ;
文字裝飾： 下劃線;
font-weight ： bold ;
}
li a ：visited {
color ： ＃00CC00 ;
文字修飾： 無;
font-weight ： bold ;
}
一個：懸停{
顏色： RGB （0 ， 96 ， 255 ）;
padding-bottom ： 5px ;
font-weight ： bold ;
文字裝飾： 下劃線;
}
li a ：hover {
display ： block ;
顏色： RGB （0 ， 96 ， 255 ）;
padding-bottom ： 5px ;
font-weight ： bold ;
border-bottom-width ： 1px ;
border-bottom-style ： solid ;
border-bottom-color ： ＃C6EC8C ;
}
一個：活性{
顏色： RGB （255 ， 0 ， 102 ）;
font-weight ： bold ;
}
/ ************************* ID的*********************** ** /
#navigation {
position ： absolute ;
z-index ： 10 ;
width ： 210px ;
height ： 600px ;
保證金： 0 ;
border-right ： 1px solid ＃C6EC8C ;
font-weight ： 正常;
}
#centerDoc {
position ： absolute ;
z-index ： 15 ;
padding ： 0 0 20px 20px ; / *右上方左下角* /
margin-top ： 50px ;
margin-left ： 235px ;
}
不要讓CSS嚇到你了，我會解釋一下重要的細節，你很快就會看到它是多么容易。在完成本教程的這一部分之前，您最后要做的事情是，我們需要在HTML頁面中添加一些代碼。
在<body> </ body>標簽之間，您需要插入以下代碼：
< DIV ID = “導航” >
< H2 >主導航< / H2 >
< / DIV >
< DIV ID = “centerDoc” >
< H1 >主標題< / H1 >
< p >
去網頁設計師的殺手手冊主頁，并采取行動
我們將用作本教程的起始模板的HTML頁面。
你可以在標題下找到它：'創建HTML頁面的做法
以下：'。按照說明那里創建您的基本的HTML頁面 -
現在就做！
< / p >
< / div >
而在<head> </ head>標簽之間，您需要插入以下內容：
< 標題 >首先CSS教程< / 標題 >
< 元 HTTP的當量= “內容類型” 內容= “text / html的;字符集= ISO-8859-1” / >
< 鏈路 HREF = “myCSS.css” 相對= “ stylesheet“ type = ”text / css“ / >
有了這個，我們將能夠開始設計我們的頁面。如果你現在看一下HTML頁面，你可能會驚訝地發現我們已經開始了！