day26 教学项目一 品优购

目标：

     独立完成品优购首页，列表页，注册页的制作，并能够把品优购网站部署上线。

 一：整体规划

1.1网站制作流程

1. 客户沟通，制定方案
2. 签订合同
3. 预付定金（总额的30%，打死不能退的）
4. 初稿审核（网页美工制作原型图）（拿原型图与客户沟通，沟通好后网页美工制作PSD效果图）
5. 前台页面设计和后台功能开发
6. 测试验收
7. 上线培训
8. 后期维护（半年到一年）

1.2 品优购项目整体介绍

PC端首页，列表页，注册页的制作与上线

1.3 学习目的

1. 电扇类网站比较综合，需要大量的布局技术，包括布局方式，常见效果以及周边技术
2. 能复习提高前面所学
3. 写完后能对实际开发中的制作PC端页面流程有一个整体感知
4. 为学移动端项目做铺垫

1.4 开发工具以及技术栈

1. 开发工具（vs ps 主流浏览器以Chrome为主）

2. 技术栈（利用HTML5和css3手动布局，可大量使用h5新增标签和样式）

3. 采取结构和样式相分离，模块化开发

4. 要有良好的代码规范，便于团队协作

1.5 创建文件：

有些网站初试化不太提倡 *｛margin 0；padding 0；｝

有些网站会把所有需要清除内外边距的标签都选出来，不使用通配符选择器。

1.6网站 favicon图标

1.  制作favicon图标（首先把品优购图标切成png图片，再把png图片转换为ico图标，要借助第三方转换网站，如比特虫：http://www.bitbug.net/）
2. favicon图标放到网站根目录下
3. HTML页面引入favicon图标

1.7 网站TDK三大标签SEO优化

SEO（search engine optimization）汉译为搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式

SEO的目的是对网站进行深度优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站排名，提高网站的知名度。

title  网站名（产品名）-网站的介绍（尽量不要超过30个汉字）

description 网站说明，简要说明网站主要是做什么的。

提倡，description作为网站的总体业务和主题概括，多采用“我们是。。”“我们提供。。”“xxx网作为。。”“电话：010...0"

例如：

＜meta name ＝“description”content = "京东JD.COM-专业的综合网上购物商城，销售家电，数码通讯，电脑，家居百货，服饰服装，母婴，图书，食品等数万个品牌优质商品，便捷，诚信的服务，为您提供愉悦的网上购物体验！”/＞

keyword  关键字

 二：首页制作

1.命名规范

1，快捷导航shortcut制作

通栏的盒子命名为shortcut，是快捷导航的意思。注意里面的行高，可以继承给里面的子盒子

里面包含版心的盒子，版心的盒子里面包含1号盒子左浮动，2号盒子右浮动

2，header头部区域制作

LOGO SEO优化

1. logo里首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
2. h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可
3. 为了让搜索引擎收录，要在链接里面放文字（网站名称），但是文字不要显示出来（法一：text-indent移到盒子外边（text-indent：-9999px），然后overflow：hidden，淘宝的做法；法二：直接给font-size：0；就看不到文字了，京东的做法。
4. 最后给链接添加title属性，这样放到logo上就可以看到提示文字了。