品優購項目
1.1 網站製作流程
客戶溝通制定方案 -> 簽訂合同 -> 預付定金 -> 初稿審覈 -> 前臺頁面設計後臺功能開發 -> 測試驗收 -> 上線培訓 ->後期維護
1.2 開發工具及技術棧
1.開發工具：VScode，Photoshop(fw), 主流瀏覽器
2.技術棧：利用html5+css3手動佈局 可大量使用h5新增標籤和樣式
1.3 項目整體介紹
製作首頁，列表頁，註冊頁三個頁面
1.4 品優購項目搭建工作
1.需要創建如下文件夾：
- 創建好文件夾後，用visual打開，創建首頁index.html
*{margin:0;padding:0;}也可以 寫成
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0;}
- 將css初始化代碼文件複製到css文件下，命名爲base.css
是css初始化樣式文件
將初始化樣式文件引入到首頁index.html中：
<!-- 引入我們初始化樣式文件 link rel=lsheet" href="css/base.css">
- 模塊化開發
在css文件夾中新建一個common.css公共樣式
將css公共樣式文件引入到首頁index.html文件中
-- 引入我們公共樣式文件 -->
<link rel="st
yelsheet" href
- favicon圖標
favicon.ico一般用於作爲縮略的網站標準，它顯示在瀏覽器的地址欄或者標籤上。目前主要的瀏覽器都支持favicon.ico圖標。
- 製作favicon圖標： 將品優購圖標切成 png圖片，把png圖片轉換爲ico圖標 需藉助於第三方轉換網站，比如：比特蟲：http://www.bitbug.net。
- 將favicon圖標放入到網站的根目錄下
- Html頁面引入favicon圖標： 將這段代碼放入title下
<link rel=”shortcut icon” href=“favicon.ico”/>
- 網站TDK三大標籤SEO優化
SEO是搜索引擎 用來深度優化進而在搜索引擎上提升網站排名
- title網站標題
建議：網站名（產品名）-網站的介紹（儘量不超過30個漢字）
- description網站說明
description作爲網站的總體業務和主題概括，多采用“我們是...”，“我們提供...”，“xxx網作爲...”，“電話:10...”之類的語句。
<meta name="description" content="品優購-專業的綜合網上購物商城，銷售家電，數碼通訊，
電腦，家居百
貨，服裝服飾，母嬰，圖書，食品等數萬個品牌優質商品，便捷，c誠信的服務，爲您提供愉悅的網上購物體驗！"/>
<meta name="keyword" content="網上購物,網上商城手機,筆記本,電腦,MP3,CD,VCD,DV,相機，數碼，配件，
- Keywords關鍵字
最好限制爲6-8個關鍵詞，關鍵詞之間用英文逗號隔開，採用關鍵詞1，關鍵詞2的形式。
LOGO SEO優化
- Logo裏面首先放一個h1標籤，目的是爲了提權，告訴搜索引擎，這個地方很重要。
- h1裏面再放一個鏈接，可以返回首頁的，把logo的背景圖片給鏈接即可。
- 爲了搜索引擎收錄我們，我們鏈接裏面要放文字（網站名稱），但是文字不用顯示出來。
方法1：text-indent移到盒子外面（text-indent:-9999px），然後overflow: hidden;淘寶的做法。
方法2：直接給font-size:0; 京東的做法。
- 給鏈接一個title屬性，鼠標放到logo上就可以看到提示文字了。
選項卡叫做Tab欄切換
在這些圖片中先放一個a，再放一個圖片