項目十五 項目實踐：正邦網頁制作(二)
實踐目标
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像素；