實(shí)踐目標(biāo)

1、了解網(wǎng)頁(yè)設(shè)計(jì)的流程。

2、了解網(wǎng)頁(yè)設(shè)計(jì)中的注意事項(xiàng)。

3、熟悉網(wǎng)頁(yè)設(shè)計(jì)和制作。

實(shí)訓(xùn)項(xiàng)目簡(jiǎn)介正邦網(wǎng)站是一個(gè)企業(yè)網(wǎng)站制作的綜合實(shí)例，通過本項(xiàng)目的學(xué)習(xí)和鍛煉可以幫助學(xué)員了解到公司企業(yè)站的特點(diǎn)，也是對(duì)前面章節(jié)學(xué)習(xí)到知識(shí)點(diǎn)不斷進(jìn)行鞏固，同時(shí)為后續(xù)課程打下基礎(chǔ)，幫助學(xué)生貫穿大學(xué)所有的課程內(nèi)容。在本項(xiàng)目中，我們不僅要運(yùn)用到前面所學(xué)習(xí)的網(wǎng)頁(yè)布局理念，同時(shí)也是需要建立在已經(jīng)掌握了HTML基本標(biāo)記和CSS基礎(chǔ)以及DIV基礎(chǔ)之上。通過本項(xiàng)目的鍛煉和學(xué)習(xí)，學(xué)生能夠制作大部分企業(yè)網(wǎng)站。實(shí)訓(xùn)流程任務(wù)一分析正邦網(wǎng)站列表頁(yè)架構(gòu)任務(wù)描述在第十四、十五章節(jié)中，我們對(duì)正邦網(wǎng)站的首頁(yè)進(jìn)行了詳細(xì)的布局排版分析，同樣的，列表頁(yè)和文章頁(yè)我們也來先分析布局結(jié)構(gòu)及頁(yè)面內(nèi)容，了解整體框架，這兩個(gè)頁(yè)面的頭部、導(dǎo)航、banner和底部與首頁(yè)是一樣的，所以對(duì)于這兩個(gè)頁(yè)面我們只詳細(xì)講解和首頁(yè)不同的部分。

8號(hào)框列表頁(yè)的主體部分listmain，分左右兩個(gè)小塊。

9號(hào)框列表頁(yè)主體部分的左側(cè)小塊listpageleft，同級(jí)欄目列表。

10號(hào)框列表頁(yè)主體部分的右側(cè)小塊listright，文章列表。任務(wù)二制作正邦列表頁(yè)主體部分在list.html頁(yè)面的body/body中頭部和底部之間輸入以下代碼，新建CSS文件名為mystyle.css，用于編寫公眾樣式的CSS代碼，保存到根目錄的images文件夾。HTML源代碼(list.html)代碼解析1）第81行定義主體部分的DIV盒子，id名為"listmain"；

2）第67行定義主體部分右邊的DIV盒子，id名為"listright"；

3）第51行、第74行插入一個(gè)一行兩列的盒子，寬度定義為100%，樣式設(shè)定為tableunderline，在第一列中輸入文字，設(shè)定樣式為xbt；

4）第63行采用ul、li的列表添加列表標(biāo)題，日期添加span標(biāo)簽；

5）第81行定義主體部分右邊的DIV盒子，id名為"listpageleft"；

6）第64行為頁(yè)面添加p標(biāo)簽，并且定義樣式為pageliststyle；7）第66行清除左右浮動(dòng)；

8）第79行為同級(jí)欄目添加p標(biāo)簽，定義樣式為bt；CSS源代碼(mystyle.css)代碼解析

1）第7行定義listright盒子，最小高度為410像素，高度自動(dòng)，寬度為720像素，左填充為10像素；

2）第11行定義logo盒子高70像素，寬960像素，上邊距為零，右邊距自適應(yīng)，下邊距零，左邊距自適應(yīng)；3）第14行定義logo盒子內(nèi)的img標(biāo)記中的元素左浮動(dòng)；

4）第26行定義telno盒子右浮動(dòng)，高20像素，寬200像素，上填充距為30像素，右填充距為40像素，下填充距為20像素，字體黑體14像素，粗體，顏色為#BF0000(紅色)；

5）第34行定義menu盒子高50像素，寬960像素，上下邊距為零，左右自適應(yīng)；

6）第45行定義menuys盒子字號(hào)14像素，顏色為#fff(白色)，背景顏色為#D(紅色)，左浮動(dòng)，高20像素，寬120像素，文本居中，上填充距為15像素，下填充距為15像素。任務(wù)三分析正邦文章頁(yè)架構(gòu)任務(wù)描述正邦的文章頁(yè)和列表頁(yè)一樣，我這里只詳細(xì)講解和首頁(yè)不同的部分。8號(hào)框文章頁(yè)的主體部分listmain，分左右兩個(gè)小塊。9號(hào)框文章頁(yè)主體部分的左側(cè)小塊listpageleft，相關(guān)文檔列表。10號(hào)框文章頁(yè)主體部分的右側(cè)小塊listright，文章內(nèi)容。

任務(wù)四制作正邦文章頁(yè)主體部分HTML源代碼(index.html)代碼解析

1)第83行定義主體部分的DIV盒子，id名為"listmain"；

2)第65行定義主體部分右邊的DIV盒子，id名為"listright"；

3)第63行定義主體部分右邊的DIV盒子中的listpage1盒子。

4)第57行插入一個(gè)一行一列的盒子，寬度定義為100%，樣式設(shè)定為tableunderline，在第一列中輸入文字，設(shè)定樣式為xbt；

5)第60行定義產(chǎn)品標(biāo)題和內(nèi)容的DIV盒子，id名為"wzbtdiv"；

6)第61行定義DIV盒子，id名為"wzxjie"，在盒子中填寫作者、來源、點(diǎn)擊量等內(nèi)容；

7)第62行在p標(biāo)簽中插入文章內(nèi)容；8)第81行定義主體部分右邊的DIV盒子，id名為"listpageleft"；

9)第72行插入一個(gè)一行兩列的盒子，寬度定義為100%，樣式設(shè)定為tableunderline，在第一列中輸入文字，設(shè)定樣式為xbt；

10)第79行為相關(guān)文檔標(biāo)題添加p標(biāo)簽，為日期添加span標(biāo)簽，并且定義樣式為arright；CSS源代碼（index.css）代碼解析

1）第11行定義wzbtdiv盒子高20像素，寬960像素，上下邊距為10像素，左右自適應(yīng)，上下填充距離為10像素，文本位置為居中，顏色設(shè)為#D；

2）第26行定義wzxjie盒子高15像素，寬400像素，上下邊框?qū)挾葹?像素，虛線，顏色為#F1F1F1，上下填充距離為5像素，左右邊距為自動(dòng)，文本位置為居中；