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

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

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

新建站點打開Dreamweaver工具，在菜單欄中選擇“站點”→“新建站點”選項，在彈出的窗口中輸入站點名稱。11.1 準備工作1.建立站點step4

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