一、品優購項目介紹
1、項目名稱：品優購
2、項目描述：品優購是一個電商網站，我們要完成首頁、列表頁、詳情頁、注冊頁面的制作
二、項目背景
1、現階段電商類網站很流行，很多同學畢業之后會進入電商類企業工作，同時電商類網站需要的技術也是較為復雜的
2、復習、總結、提高前面所學布局技術
三、設計目標
1、保證瀏覽器ie7及以上，火狐，360，Safari，Chrome等；
2、熟悉CSS+DIV布局，頁面的搭建工作；
3、了解常用電商類網站的布局模式；
4、為后期品優購移動端做鋪墊
四、幾點思考
1、開發工具sublime、Photoshop（fw）、主流瀏覽器（以Chrome瀏覽器為主）
2、技術棧
HTML 結構 +CSS 布局
五、代碼規范
參照品優購代碼規范
六、前期准備工作
要實現結構與樣式相分離的設計思想
1、目錄文件夾
| 名稱 | 說明 |
| 項目文件夾 | pinyougou |
| 樣式類圖片文件夾 | img |
| 樣式文件夾 | css |
| 產品類圖片文件夾 | upload |
| 字體類文件夾 | fonts |
| 腳本文件夾 | js |
2、樣式文件的分類
（1）初始化css（css reset）讓瀏覽器風格統一，把常用的初始化語句放入 base.css里面
（2）我們把一些公共的樣式，放入common.css里面
七、網站ico圖標
1、使用ico圖標
（1）首先把favicon.ico 這個圖標放到根目錄下；
（2）在html里面，head 之間引入代碼
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
2、制作ico圖標
我們可以自己做的圖片，轉換為ico圖標，以便於放到我們站點里面。
（1）方法步驟：
①首先把我們想要的切成圖片；
②要把圖片轉換為 ico 圖標，我們借助於第三方轉換網站：http:www.bitbug.net/ 。比特蟲
（2）總結：
代碼：<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
（3）注意：
①它是顯示在瀏覽器中的網頁圖標；
②它是圖標形式，不是一個圖片；
③位置是放到 head 標簽中間；
④后面的type="image/x-icon" 屬性可以省略；
⑤為了兼容性，請將favicon.ico這個圖標放到根目錄下。
八、網站優化三大標簽
（一）網頁title標題
1、title具有不可替代性，是我們內頁第一個重要標簽，是搜索引擎了解網頁的入口，和對網頁主題歸屬的最佳判斷點
2、標題的長度
（1）Google（70KB），35個中文；
（2）Baidu（56KB），28個中文。
3、關鍵字分布：
最先出現的詞語權重越高
4、關鍵字詞頻
（1）主關鍵詞出現3次；
（2）輔關鍵詞出現一次。
5、建議
首頁標題：網站名（產品名）-網站的介紹
例如：
品優購-綜合網購首選-正品低價、品質保障、配送及時、輕松購物！
小米商城-小米5s、紅米Note 4、小米MIX、小米筆記本官方網站
（二）Description 網站說明
1、對於關鍵詞的作用明顯降低，但由於很多搜索引擎，仍然大量采用網頁的MATA標簽中描述部分作為搜索結果的“內容摘要”。就是簡要說明我們網站的主要做什么的。
2、我們提倡，Description作為網站的總體業務和主題概況，多采用“我們是...”“我們提供...”xxx網作為...“”電話：010...”之類語句
3、品優購網：
<meta name="desciption" content="品優購JD.COM-專業的綜合網上購物商城，銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品，便捷、誠信的服務，為您提供愉悅的網上購物體驗!" />
4、注意點：
（1）描述中出現關鍵詞，與正文內容相關，這部分內容是給人看的，所以要寫的很詳細，讓人感興趣，吸引用戶點擊；
（2）同樣遵循簡短原則，字符數含空格在內不要超過120個漢字；
（3）補充在 title 和 keywords 中未能充分表述的說明；
（4）用英文逗號 關鍵詞1,關鍵詞2
<meta name="description" content="小米商城直營小米公司旗下所有產品,囊括小米手機系列小米MIX、小米Note 2,紅米手機系列紅米Note 4、紅米4,智能硬件,配件及小米生活周邊,同時提供小米客戶服務及售后支持。" />
（三）Keywords 關鍵詞
1、Keywords是頁面關鍵詞，是搜索引擎關注點之一。Keywords應該限制在6~8個關鍵詞左右，電商類網站可以多少許。
2、
品優購網：
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,品優購" />
小米網：
<meta name="Keywords" content="小米，小米6，紅米Note4,小米MIX,小米商城" />
（四）總結
1、我們的網頁要做的優秀，符合搜索引擎的要求，才可以讓搜索引擎優先顯示我們的網頁。
所以我們的網站要做很多的優化，其中就有這三大標簽。
2、一般情況下，三大標簽里面的優化詞，都有專門的優化人員寫的，我們大概了解一下規范就可以了。
3、我們的主要任務是，能寫出這三大標簽，然后把優化人員給我們的內容，添加到里面。
九、字體圖標
圖片是有諸多優點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的“http請求”，這都會大大降低網頁的性能的。更重要的是圖片不能很好的進行“縮放”，因為圖片放大和縮小會失真。我們后面會學習移動端響應式，很多情況下希望我們的圖標是可以縮放的。此時，一個非常重要的技術被重新“寵幸”了，這就是字體圖標（iconfont）。
（一）字體圖標優點
1、可以做出跟圖片一樣可以做的事情，改變透明度、旋轉度等.....
2、但是本質其實是文字，可以很隨便的改變顏色、產生陰影、透明效果等等；
3、本身體積更小，但攜帶的信息並沒有削減；
4、幾乎支持所有的瀏覽器；
5、移動端設備必備良葯。
（二）字體圖標使用流程
1、UI人員設計字體圖標效果圖（svg）
2、前端人員上傳生成兼容性字體文件包
3、前端人員下載兼容性字體文件包到本地
4、把字體文件包引入到HTML頁面中
（三）設計字體圖標
假如圖標是我們公司單獨設計，那就需要第一步了，這個屬於UI設計人員的工作，他們在 illustrator 或 Sketch 這類矢量圖形軟件里創建icon圖標，比如下圖：
之后保存為svg格式，然后給我們前端人員就好了
其實第一步，我們不需要關系，只需要給我們這些圖標就可以了，如果圖標是大眾的，網上本來就有的，可以直接跳過第一步，進入第三步。
（四）上傳生成字體包
1、當UI設計人員給我們svg文件的時候，我們需要轉換成我們頁面能使用的字體文件，而且需要生成的是兼容性的適合各個瀏覽器的。
2、推薦網站：http://icomoon.io
icomoon字庫
IcoMoon成立於2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。
3、推薦網站：http://www.iconfont.cn/
阿里icon font 字庫
http://www.iconfont.cn/
這個是阿里巴巴M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里巴巴圖標庫。可以使用AI制作圖標上傳生成。
（五）下載兼容字體包
剛才上傳完畢，網站會給我們把UI做的svg圖片轉換為我們的字體格式，然后下載下來就好了
當然，我們不需要自己專門的圖標，是想網上找幾個圖標使用，以上2步就可以直接省略了，直接到剛才的網站上找喜歡的下載使用吧。
（六）字體引入到HTML
得到壓縮包之后，我們得知字體圖標本質就是字體文件，注意這個壓縮包不要刪掉，我們后面還有用。
最后一步，是最重要的一步，就是字體文件已經有了，我們需要引入到我們頁面中。
1、首先把fonts文件夾放入我們根目錄下
2、html標簽里面添加結構
3、在樣式里面聲明字體：告訴別人我們自己定義的文字（一定要注意字體文件路徑的問題）
4、給盒子使用字體
十、品優購首頁布局
1、命名合集
| 名稱 | 說明 |
| 快捷導航欄 | shortcut |
| 頭部 | header |
| 標志 | logo |
| 購物車 | shopcar |
| 搜索 | search |
| 熱點詞 | hotwords |
| 導航 | nav |
| 導航左側 | dropdown 包含 .dd .dt |
| 導航右側 | navitems |
十一、logo優化
1、logo 里面 首先放一個 h1 標簽，目的是為了提權，告訴搜索引擎，這個地方很重要；
2、h1里面再放一個鏈接，可以返回首頁的，給鏈接一個 大小 和 logo 的背景圖片；
3、鏈接里面要放文字（網站名稱）為了搜索引擎收錄我們，但是文字不要顯示出來：
（1）要用 text-indent 移到盒子外面（text-indent: -9999px;）然后overflow: hidden; 淘寶的做法；
（2）直接給font-size: 0; 就看不到文字了，京東的做法。
4、最后給鏈接一個 title ，這樣鼠標放到logo 上，就可以看到提示文字了。