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

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

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

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

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