項目十五 項目實踐：正邦網頁製作（二）
實踐目標
1、 瞭解網頁設計的流程。
2、 瞭解網頁設計中的注意事項。
3、 熟悉網頁設計和製作。
實訓項目簡介：
正邦網站是一個企業網站製作的綜合實例，通過本項目的學習和鍛鍊可以幫助學員瞭解到公司企業站的特點，也是對前面章節學習到知識點不斷進行鞏固，同時為後續課程打下基礎，幫助學生貫穿大學所有的課程內容。在本項目中，我們不僅要運用到前面所學習的網頁佈局理念，同時也是需要建立在已經掌握了HTML基本標記和CSS基礎以及DIV基礎之上。通過本項目的鍛鍊和學習，學生能夠製作大部分企業網站。
實訓流程：
任務一：製作正邦首頁主體部分
在前面已經分析過，主體框架部分分為左中右三部分，因此我們先搭建主體的DIV框架，再從左至右製作各個小塊。主體DIV框架如下所示：
HTML 源代碼：
(index.html)
代碼解析：
1） 第29-39行:定義主體框架id名為main的盒子；
2） 第30-32行：定義主體內左側盒子id名為"mainleft"；
3） 第33-35行：定義主體內的中間盒子，id名為"mainmid"；
4） 第36-38行：定義主體內的右側盒子，id名為"mainright"
對應主體部分的CSS樣式如下：
CSS源代碼：
(mystyle.css)
代碼解析：
1） 第68-76行:定義main盒子最小高度為300像素，高度自適應，寬960像素，上下邊距為零，左右自適應；
接下來分別製作左中右三個模塊。
1、左側頭條新聞模塊製作
HTML 源代碼：
(index.html)
代碼解析：
1） 第31-40行:定義的mainleft盒子內嵌套一個id名為xwbt的盒子，盒子內使用一個一行兩列的表格來製作模塊標題，一個單元格放"頭條新聞"，並且調用"xbt"的CSS樣式，一個單元格放"更多"，調用"more"的CSS樣式；
2） 第38行：定義一對段落標記，裡面插入一張圖片，設置圖片寬154像素，高83像素；
3） 第39行：定義一對段落標記，裡面是新聞標題，調用"bt"的CSS樣式；
4） 第41-48行：使用ul標記以及li標記製作新聞列表；
CSS源代碼：
(mystyle.css)
代碼解析：
1） 第77-82行:定義的mainleft盒子左浮動，高300像素，寬320像素，右填充距為10像素；
2） 第83-86行：定義xwbt盒子高150像素，寬310像素；
3） 第87-98行：定義所有調用類名為xbt的盒子樣式為，寬140像素，字體為粗體，顏色為黑色，下邊框寬1像素，紅色實線，寬40%，高10像素，上下填充距為6像素；
4） 第99-105行：定義xwbt盒子內的img標記樣式為左浮動，上邊距10像素，右邊距10像素，高100像素，寬100像素；
5） 第106-109行：定義所有的div標記內的字號12像素，字體顏色為#333（深灰色）；
6） 第110-115行：定義所有條用類名為bt的盒子的樣式為，字體粗體，字體顏色為#F30(紅色)，上邊距為5像素，下邊距為5像素；
7） 第116-119行：定義mainleft盒子內的ul標記的列表符號無，上下左右的填充距均為零；
8） 第120-129行：定義mainleft盒子內的li標記樣式為高20像素，下邊框寬1像素，白色點線，上邊距3像素；
9） 第130-135行：定義調用類名為tableunderline的盒子的樣式為，有一像素#F60(橙色)實線；
10） 第136-141行：定義調用類名為more的盒子的樣式為字號12像素，字體顏色為#030（深灰色），文本右對齊，右填充距為20像素；
2、中間關於我們模塊製作
HTML 源代碼：
(index.html)
代碼解析：
1） 第50-61行:定義中間盒子，id名為"mainmid"；
2） 第51-60行：在mainmid盒子內嵌套一個盒子，id名為gywm；
3） 第52-57行：在gywm盒子內定義一個一行兩列的表格，一個單元格為"關於我們"並且調用類選擇符xbt的樣式，一個單元格為"更多"，調用類選擇符more的樣式；
4） 第58-59行：插入一張寬690像素，高306像素的圖片，以及一段文字；
CSS源代碼：
(mystyle.css)
代碼解析：
1) 第142-148行: 定義id為gywm的盒子中img的樣式為：左浮動，高100像素，寬200像素，右邊距為10像素，上邊距為10像素；
2) 第150-153行：定義id為gywm的盒子中p的樣式為：行高為180%，上邊距為10像素；
3) 第154-166行：定義id為mainmid的盒子中樣式為：左浮動，寬408像素，高為300像素，右填充為10像素，左填充也為10像素，右邊框寬為1像素、灰色，點線，左邊框寬為1像素、灰色、點線；
3、右側聯繫我們模塊製作
HTML 源代碼：
(index.html)
代碼解析：
1) 第62-81行:定義中間盒子，id名為"mainright"；
2) 第64-69行:定義一個寬度為100%的一行兩列的表格，樣式定義為tableunderline；一個單元格為"關於我們"並且調用類選擇符xbt的樣式，一個單元格為"更多"，調用類選擇符more的樣式；
3) 第71行：在p標籤中插入文字，調用類選擇符bt的樣式；
4) 第72-77行：在p標籤中插入文字；
5) 第78行：在p標籤中插入文字，調用類選擇符bt的樣式；
6) 第79-80行：在p標籤中插兩張圖片，設定寬度高度；
CSS源代碼：
(mystyle.css)
代碼解析：
1） 第167-172行: 定義id為mainright的盒子樣式為：右浮動，高300像素，寬190像素，左填充為10像素；
2） 第173-175行：定義id為mainright的盒子中p標籤樣式為：行高為140%；
3） 第176-180行：定義id為mainright的盒子中img標籤樣式為：寬度為50像素，左邊距為25像素；
任務二：製作正邦首頁的產品列表
HTML 源代碼：
(index.html)
代碼解析：
1） 第85-91行:定義產品列表盒子，id選擇符為piclist；
2） 第86-90行：插入ul、li列表標籤，在每個li標籤中插入一張圖片，定義寬度為283，高度為159，換行符之後，在span標籤中插入文字；
3） 第92行:在p標籤中加入空格符；
CSS源代碼：
（mystyle.css）
代碼解析：
1） 第240-247行: 定義id為piclist的盒子樣式為：高220像素，寬960像素，上下邊距為0，左右為居中；
2） 第248-252行：定義id為piclist的盒子中ul樣式，邊距為0，填充為0，設置列表項符號為none；
3） 第253-255行：定義id為piclist的盒子中span樣式：文本方向為居中；
4） 第257-261行：定義id為piclist的盒子中ul li樣式：浮動居左，文本居中，高為190像素；
5） 第262-265行：定義id為piclist的盒子中ul li中類選擇符mid的樣式：左右邊距為25像素；
6） 第267-272行：定義id為piclist的盒子中ul li中標籤選擇符img的樣式：寬為300像素，高為150像素，上下邊距為10像素；
