第章實(shí)戰(zhàn)開發(fā)-電商網(wǎng)站首頁面第章實(shí)戰(zhàn)開發(fā)-電商網(wǎng)站首頁面

第11章實(shí)戰(zhàn)開發(fā)—電商網(wǎng)站首頁面《網(wǎng)頁設(shè)計(jì)與制作（HTML+CSS）（第2版）》學(xué)習(xí)目標(biāo)/Target掌握站點(diǎn)的使用方法，能夠建立規(guī)范的站點(diǎn)并完成初始化設(shè)置。掌握大型網(wǎng)頁項(xiàng)目的制作方法，能夠分步驟完成電商網(wǎng)站首頁面的制作。章節(jié)概述/Summary在學(xué)習(xí)了前面的知識(shí)后，相信讀者已經(jīng)能夠熟練使用HTML結(jié)構(gòu)標(biāo)簽和CSS樣式代碼對(duì)網(wǎng)頁進(jìn)行布局和排版，同時(shí)也可以運(yùn)用CSS3的新特性為網(wǎng)頁添加音頻、視頻以及動(dòng)畫等特效。本章將運(yùn)用前面章節(jié)所學(xué)的知識(shí)開發(fā)一個(gè)網(wǎng)站項(xiàng)目——電商網(wǎng)站首頁。目錄/Contents11.1準(zhǔn)備工作11.2首頁面詳細(xì)制作準(zhǔn)備工作11.111.1 準(zhǔn)備工作作為一個(gè)專業(yè)的網(wǎng)頁制作人員，當(dāng)拿到一個(gè)頁面的效果圖時(shí)，不是直接開始搭建頁面，而是做一些準(zhǔn)備工作。網(wǎng)頁制作的準(zhǔn)備工作包括建立站點(diǎn)、效果圖分析等。接下來，本節(jié)將針對(duì)網(wǎng)頁制作的相關(guān)準(zhǔn)備工作進(jìn)行詳細(xì)講解。11.1 準(zhǔn)備工作掌握建立站點(diǎn)的方法，能夠?yàn)榫W(wǎng)站項(xiàng)目建立站點(diǎn)。學(xué)習(xí)目標(biāo)1.建立站點(diǎn)11.1 準(zhǔn)備工作1.建立站點(diǎn)為什么要建立站點(diǎn)？11.1 準(zhǔn)備工作1.建立站點(diǎn)“站點(diǎn)”系統(tǒng)地管理HTML網(wǎng)頁文件、圖片、CSS樣式表等網(wǎng)站文件。建立站點(diǎn)就是定義一個(gè)存放網(wǎng)站中零散文件的文件夾。站點(diǎn)對(duì)于網(wǎng)站本身的上傳維護(hù)，方便站內(nèi)文件夾及文檔的增刪查改。11.1 準(zhǔn)備工作1.建立站點(diǎn)創(chuàng)建網(wǎng)站根目錄新建站點(diǎn)站點(diǎn)建立完成在根目錄下新建文件step1step2step3step411.1 準(zhǔn)備工作1.建立站點(diǎn)step1

創(chuàng)建網(wǎng)站根目錄在電腦本地磁盤任意盤符下創(chuàng)建網(wǎng)站根目錄。本書在D盤“案例源碼”文件夾下，新建一個(gè)文件夾作為網(wǎng)站根目錄，命名為“chapter11”。11.1 準(zhǔn)備工作1.建立站點(diǎn)step2在根目錄下新建文件打開網(wǎng)站根目錄chapter11，在根目錄下新建“css”文件夾和“images”文件夾，分別用于存放網(wǎng)站所需的CSS樣式文件和圖像文件。11.1 準(zhǔn)備工作1.建立站點(diǎn)step3

新建站點(diǎn)打開Dreamweaver工具，在菜單欄中選擇“站點(diǎn)”→“新建站點(diǎn)”選項(xiàng)，在彈出的窗口中輸入站點(diǎn)名稱。11.1 準(zhǔn)備工作1.建立站點(diǎn)step4

站點(diǎn)建立完成在Dreamweaver工具面板組中可查看到站點(diǎn)信息，表示站點(diǎn)創(chuàng)建成功。11.1 準(zhǔn)備工作2.站點(diǎn)初始化設(shè)置掌握站點(diǎn)初始化設(shè)置的方法，能夠?yàn)榫W(wǎng)站項(xiàng)目建立HTML文件和CSS文件。學(xué)習(xí)目標(biāo)11.1 準(zhǔn)備工作2.站點(diǎn)初始化設(shè)置網(wǎng)站根目錄文件夾下創(chuàng)建HTML文件，命名為index.html。在CSS文件夾內(nèi)創(chuàng)建對(duì)應(yīng)的樣式表文件，命名為index.css。11.1 準(zhǔn)備工作3.效果圖分析了解效果圖分析的過程，能夠拆分項(xiàng)目文件，對(duì)HTML文件和CSS樣式分別進(jìn)行分析。學(xué)習(xí)目標(biāo)11.1 準(zhǔn)備工作3.效果圖分析HTML結(jié)構(gòu)分析CSS樣式分析背景顏色均為通欄顯示，因此各個(gè)模塊的寬度都可設(shè)置為100%。精細(xì)地分析頁面，不難發(fā)現(xiàn)大部分字體大小為14px，樣式為微軟雅黑。頭部和版權(quán)信息部分鏈接文字均顯示為#999，當(dāng)鼠標(biāo)移上時(shí)變?yōu)?fff，頁面中所有input表單和textarea文本域外的藍(lán)邊框均刪除。頭部、導(dǎo)航和視頻內(nèi)容嵌套在一個(gè)大盒子里，內(nèi)容部分可以根據(jù)信息的不同劃分為三部分，通過三個(gè)獨(dú)立的大盒子構(gòu)成，底部和版權(quán)信息為獨(dú)立的兩部分。11.1 準(zhǔn)備工作4.頁面布局掌握頁面布局的方法，能夠運(yùn)用div標(biāo)簽完成頁面的布局。學(xué)習(xí)目標(biāo)11.1 準(zhǔn)備工作4.頁面布局頁面布局對(duì)于改善網(wǎng)站的外觀非常重要，是為了使網(wǎng)站頁面結(jié)構(gòu)更加清晰、有條理，而對(duì)頁面進(jìn)行的“排版”。11.1 準(zhǔn)備工作5.定義公共樣式掌握定義公共樣式的方法，能夠清楚瀏覽器默認(rèn)樣式。學(xué)習(xí)目標(biāo)11.1 準(zhǔn)備工作5.定義公共樣式為了清除各瀏覽器的默認(rèn)樣式，使得網(wǎng)頁在各瀏覽器中顯示的效果一致，在完成頁面布局后，首先要做的就是對(duì)CSS樣式進(jìn)行初始化并聲明一些通用的樣式。首頁面詳細(xì)制作11.211.2 首頁面詳細(xì)制作1.制作頭部、導(dǎo)航及視頻內(nèi)容運(yùn)用HTML標(biāo)簽和CSS樣式，完成頭部、導(dǎo)航及視頻內(nèi)容部分的搭建。學(xué)習(xí)目標(biāo)11.2 首頁面詳細(xì)制作1.制作頭部、導(dǎo)航及視頻內(nèi)容（1）分析效果圖11.2 首頁面詳細(xì)制作1.制作頭部、導(dǎo)航及視頻內(nèi)容（2）準(zhǔn)備圖片及音視頻素材準(zhǔn)備各個(gè)模塊所需的圖片，包括頭部的Logo，導(dǎo)航模塊的小圖標(biāo)，側(cè)邊欄的廣告圖（導(dǎo)航模塊右側(cè)部分的小圖標(biāo)和按鈕上的小箭頭是通過引入字體圖標(biāo)實(shí)現(xiàn)的）和廣告圖片以及按鈕部分大的Logo圖。準(zhǔn)備音頻、視頻素材，本案例提供下載好的音視頻素材文件。在chapter11文件夾內(nèi)新建audio文件夾和video文件夾，分別用于存放音頻和視頻文件。11.2 首頁面詳細(xì)制作1.制作頭部、導(dǎo)航及視頻內(nèi)容（3）搭建結(jié)構(gòu)11.2 首頁面詳細(xì)制作1.制作頭部、導(dǎo)航及視頻內(nèi)容（4）控制樣式11.2 首頁面詳細(xì)制作2.制作內(nèi)容部分（新品）（1）分析效果圖11.2 首頁面詳細(xì)制作2.制作內(nèi)容部分（新品）（2）準(zhǔn)備圖片及音視頻素材準(zhǔn)備各個(gè)模塊所需的圖片，包括標(biāo)題圖片、產(chǎn)品圖片及產(chǎn)品介紹中的相關(guān)小圖標(biāo)。11.2 首頁面詳細(xì)制作2.制作內(nèi)容部分（新品）（3）搭建結(jié)構(gòu)11.2 首頁面詳細(xì)制作2.制作內(nèi)容部分（新品）（4）控制樣式11.2 首頁面詳細(xì)制作3.制作內(nèi)容部分（試裝）（1）分析效果圖11.2 首頁面詳細(xì)制作3.制作內(nèi)容部分（試裝）（2）準(zhǔn)備圖片及音視頻素材準(zhǔn)備各個(gè)模塊所需的圖片，包括標(biāo)題圖片、產(chǎn)品圖片及產(chǎn)品介紹圖。11.2 首頁面詳細(xì)制作3.制作內(nèi)容部分（試裝）（3）搭建結(jié)構(gòu)11.2 首頁面詳細(xì)制作3.制作內(nèi)容部分（試裝）（4）控制樣式11.2 首頁面詳細(xì)制作4.制作內(nèi)容部分（評(píng)測(cè)）（1）分析效果圖11.2 首頁面詳細(xì)制作4.制作內(nèi)容部分（評(píng)測(cè)）（2）準(zhǔn)備圖片及音視頻素材準(zhǔn)備各個(gè)模塊所需的圖片，包括標(biāo)題圖片及評(píng)測(cè)公司Logo圖。11.2 首頁面詳細(xì)制作4.制作內(nèi)容部分（評(píng)測(cè)）（3）搭建結(jié)構(gòu)11.2 首頁面詳細(xì)制作4.制作內(nèi)容部分（評(píng)測(cè)）（4）控制樣式11.2 首頁面詳細(xì)制作5.注冊(cè)信息和版權(quán)信息部分（1）分析效果圖11.2 首頁面詳細(xì)制作5.注冊(cè)信息和版權(quán)信息部分（2）準(zhǔn)備圖片及音視頻素材準(zhǔn)備各個(gè)模塊所需的圖片，包括Logo圖片和注冊(cè)按鈕圖片。11.2 首頁面詳細(xì)制作5.注冊(cè)信息和版權(quán)信息部分（3）搭建結(jié)構(gòu)11.2 首頁面詳細(xì)制作5.注冊(cè)信息和版權(quán)信息部分（4）控制樣