項目十六 項目實踐：正邦網站製作（三）
實踐目標
1、 瞭解網頁設計的流程。
2、 瞭解網頁設計中的注意事項。
3、 熟悉網頁設計和製作。
實訓項目簡介：
正邦網站是一個企業網站製作的綜合實例，通過本項目的學習和鍛鍊可以幫助學員瞭解到公司企業站的特點，也是對前面章節學習到知識點不斷進行鞏固，同時為後續課程打下基礎，幫助學生貫穿大學所有的課程內容。在本項目中，我們不僅要運用到前面所學習的網頁佈局理念，同時也是需要建立在已經掌握了HTML基本標記和CSS基礎以及DIV基礎之上。通過本項目的鍛鍊和學習，學生能夠製作大部分企業網站。
實訓流程：
任務一：分析正邦網站列表頁架構
任務描述：
在第十四、十五章節中，我們對正邦網站的首頁進行了詳細的佈局排版分析，同樣的，列表頁和文章頁我們也來先分析佈局結構及頁面內容，瞭解整體框架，這兩個頁面的頭部、導航、banner和底部與首頁是一樣的，所以對於這兩個頁面我們只詳細講解和首頁不同的部分。
8號框：列表頁的主體部分listmain，分左右兩個小塊。
9號框：列表頁主體部分的左側小塊listpageleft，同級欄目列表。
10號框：列表頁主體部分的右側小塊listright，文章列表。
任務二：製作正邦列表頁主體部分
在list.html頁面的
中頭部和底部之間輸入以下代碼，新建CSS文件名為mystyle.css，用於編寫公眾樣式的CSS代碼，保存到根目錄的images文件夾。中頭部和底部之間輸入以下代碼，新建CSS文件名為mystyle.css，用於編寫公眾樣式的CSS代碼，保存到根目錄的images文件夾。
HTML 源代碼：
(list.html)
代碼解析：
1） 第43-81行：定義主體部分的DIV盒子，id名為"listmain"；
2） 第44-67行：定義主體部分右邊的DIV盒子，id名為"listright"；
3） 第46-51行、第69-74行：插入一個一行兩列的盒子，寬度定義為100%，樣式設定為tableunderline，在第一列中輸入文字，設定樣式為xbt；
4） 第52-63行：採用ul、li的列表添加列表標題，日期添加span標籤；
5） 第68-81行：定義主體部分右邊的DIV盒子，id名為"listpageleft"；
6） 第64行：為頁面添加p標籤，並且定義樣式為pageliststyle；
7） 第66行：清除左右浮動；
8） 第75-79行：為同級欄目添加p標籤，定義樣式為bt；
CSS源代碼：
(mystyle.css)
代碼解析：
1） 第1-7行: 定義listright盒子，最小高度為410像素，高度自動，寬度為720像素，左填充為10像素；
2） 第4-11行：定義logo盒子高70像素，寬960像素，上邊距為零，右邊距自適應，下邊距零，左邊距自適應；
3） 第12-14行：定義logo盒子內的img標記中的元素左浮動；
4） 第15-26行：定義telno盒子右浮動，高20像素，寬200像素，上填充距為30像素，右填充距為40像素，下填充距為20像素，字體黑體14像素，粗體，顏色為#BF0000(紅色)；
5） 第27-34行：定義menu盒子高50像素，寬960像素，上下邊距為零，左右自適應；
6） 第35-45行：定義menuys盒子字號14像素，顏色為#fff(白色)，背景顏色為#D92621(紅色)，左浮動，高20像素，寬120像素，文本居中，上填充距為15像素，下填充距為15像素。
任務三：分析正邦文章頁架構
任務描述：
正邦的文章頁和列表頁一樣，我這裡只詳細講解和首頁不同的部分。
8號框：文章頁的主體部分listmain，分左右兩個小塊。
9號框：文章頁主體部分的左側小塊listpageleft，相關文檔列表。
10號框：文章頁主體部分的右側小塊listright，文章內容。
任務四：製作正邦文章頁主體部分
HTML 源代碼：
(index.html)
代碼解析：
1) 第50-83行：定義主體部分的DIV盒子，id名為"listmain"；
2) 第51-65行：定義主體部分右邊的DIV盒子，id名為"listright"；
3) 第52-63行：定義主體部分右邊的DIV盒子中的listpage1盒子。
4) 第53-57行：插入一個一行一列的盒子，寬度定義為100%，樣式設定為tableunderline，在第一列中輸入文字，設定樣式為xbt；
5) 第58-60行：定義產品標題和內容的DIV盒子，id名為"wzbtdiv"；
6) 第61行：定義DIV盒子，id名為"wzxjie"，在盒子中填寫作者、來源、點擊量等內容；
7) 第62行：在p標籤中插入文章內容；
8) 第66-81行：定義主體部分右邊的DIV盒子，id名為"listpageleft"；
9) 第67-72行：插入一個一行兩列的盒子，寬度定義為100%，樣式設定為tableunderline，在第一列中輸入文字，設定樣式為xbt；
10) 第73-79行：為相關文檔標題添加p標籤，為日期添加span標籤，並且定義樣式為ar_right；
CSS源代碼：
（index.css）
代碼解析：
1） 第1-11行:定義wzbtdiv盒子高20像素，寬960像素，上下邊距為10像素，左右自適應，上下填充距離為10像素，文本位置為居中，顏色設為#D92621；
2） 第12-26行：定義wzxjie盒子高15像素，寬400像素，上下邊框寬度為1像素，虛線，顏色為#F1F1F1，上下填充距離為5像素，左右邊距為自動，文本位置為居中；
