項目十四 項目實踐：正邦網頁製作（一）
實踐目標
1、 瞭解網頁設計的流程。
2、 瞭解網頁設計中的注意事項。
3、 熟悉網頁設計和製作。
實訓項目簡介：
正邦網站是一個企業網站製作的綜合實例，通過本項目的學習和鍛鍊可以幫助學員瞭解到公司企業站的特點，也是對前面章節學習到知識點不斷進行鞏固，同時為後續課程打下基礎，幫助學生貫穿大學所有的課程內容。在本項目中，我們不僅要運用到前面所學習的網頁佈局理念，同時也是需要建立在已經掌握了HTML基本標記和CSS基礎以及DIV基礎之上。通過本項目的鍛鍊和學習，學生能夠製作大部分企業網站。
實訓流程：
任務一：分析正邦網站首頁架構
任務描述：
在進行正式的網頁製作之前我們應該先明確網站的整體色調、風格、佈局結構以及頁面內容，瞭解網站的整體框架，才能為接下來的頁面設計做好充分準備工作。
1號框：網頁的頭部，此處在一對DIV標記裡面插入網站的logo即可。
2號框：網頁的導航部分，用到了ul標記以及li標記，並且要設置li標記左浮動，這樣便於搜索引擎抓取。
3號框：網頁Banner部分。
4號框：產品二級導航，兩面包括五個文本鏈接。
5號框：網頁的主體部分，分左中右三個小塊，左側的DIV塊裡包括一個標題一張圖片以及一條新聞標題及新聞概要，下面是一段新聞列表；中間的DIV塊包括一個標題，，右側的DIV塊包括一個標題，以及幾行文字和兩張圖片。
6號框：產品列表，裡面是用列表標記製作的三張產品圖片及標題。
7號框：底部版權。
任務二：製作正邦首頁頭部以及導航條
在index.html頁面的
中輸入以下代碼，新建CSS文件名為mystyle.css，用於編寫公眾樣式的CSS代碼，保存到根目錄的images文件夾。中輸入以下代碼，新建CSS文件名為mystyle.css，用於編寫公眾樣式的CSS代碼，保存到根目錄的images文件夾。
HTML 源代碼：
(index.html)
代碼解析：
1） 第9-11行:定義一對DIV標記，id名為"logo"，在該塊中插入logo.jgp，並設置圖片款342像素，高70像素。Logo盒子內嵌套一個id名為"telno"的盒子，裡面是一行聯繫電話的文本信息。
2） 第13-25行：定義導航條部分的DIV盒子，id名為"menu"；
CSS源代碼：
(mystyle.css)
代碼解析：
1） 第1-3行:定義所有HTML標記默認外邊距為0；
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像素。
任務三：製作正邦首頁的Banner&產品分類導航
HTML 源代碼：
(index.html)
代碼解析：
1） 第26行:定義一對DIV標記，id名為"jsnews"，裡面插入一張圖片，並設置圖片寬100%，高350像素；
2） 第27行：定義一對DIV標記，id名為"redbg"，內含一段文本內容；
3） 第28行：定義一對段落標記，裡面包含一個空格符；
CSS源代碼：（
index.css）
代碼解析：
1） 第46-53行:定義jsnews盒子高350像素，寬960像素，上下邊距為零，左右自適應；
2） 第54-67行：定義redbg盒子高15像素，寬910像素，上下邊距為0，左右自適應，上填充距為7像素，下填充距為8像素，背景顏色為#D92621(紅色)，字號12像素大小，左填充距為50像素；
