品优购案例

品优购项目规划

沟通确定需求——原型图、psd效果图——前端页面开发、后台功能开发——测试验收——上线培训——后期维护

项目模块化开发

所谓模块化：将一个项目按照功能划分，一个功能一个模块，互不影响

模块化开发具有重复利用、更换方便等优点

最典型的就是common.css公共样式，写好一个样式，其余页面都可以用到相同的样式。

common.css公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。

网站favicon图标

favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。

一、制作favicon图标

1. 把品优购图标切成png图片
2. 把png图标转换成ico图标，需要借助第三方转换网站，例如比特虫：http://www.bitbug.net/

二、favicon图标放到网站根目录下面

三、HTML页面引入favicon图标

1. 在html页面里面的元素之间引入代码

link rel="shortcut icon" herf="跟目标下文件名">

网站TDK三大标签SEO优化

SEO，汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

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

1. title 网站标题

title具有不可替代性，是我们业内的第一个重要的标签，是搜索引擎了解网页入口和对网页主体归属的最佳判断点。

建议：网站名（产品名）-网站介绍

2. description网站说明

简要说明我们网站是做什么的

3. keywords关键字

keywords是页面关键词，是搜索引擎的关注点之一。

keywords最好限制为6-8个关键词，关键词之间用英文逗号隔开，采用关键词1，关键词2的形式。

项目整体介绍

完成三个页面学习：首页、列表页、注册页面的制作

开发工具：vscode、ps、浏览器

技术栈：html5+css3；采用结构与样式相分离，模块化开发；良好的代码规范

品优购首页制作

2.1 常用模块类名命名

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwords
导航	nav
导航左侧	dropdown
导航右侧	navitems
页面底部	footer
页面底部服务模块	mod_sevice
页面底部帮助模块	mod_help
页面底部版权模块	mod_copyright

2.2 快捷导航shortcut制作

2.3 header制作

1. header盒子必须要有高度
2. 1号盒子是logo标志定位
3. 2号盒子是search搜索模块定位
4. 3号盒子是hotwords热词模块定位
5. 4号盒子是shopcar购物车模块

• count统计部分用绝对定位做

• count统计部分不要给宽度，因为可能买的件数较多，让件数撑开就好了，给一个高度

• 注意左下角不是圆角，其余三个是圆角

LOGO SEO优化

1. logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
2. h1里面再放一个链接，可以返回首页，把logo的背景图片给链接即可
3. 为了让搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。

• 方法1：text-index移动到盒子外面（text-indent-9999px)，然后overflow:hidden，淘宝
• 方法2：直接给font-size()；就看不到文字了，京东

4. 最后给链接一个title属性，这样鼠标放到logo上面就可以显示文字了。

search搜索模块

1. header盒子必须要有高度
2. 1号盒子是logo标志定位
3. 2号盒子是search搜索模块定位
4. 3号盒子是hotwords热词模块定位
5. 4号盒子是shopcar购物车模块

• count统计部分用绝对定位做
• count统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度
• 注意左下角不是圆角，其余三个是圆角 顺时针 写法：border-radius:7px 7px 7px 0

2.4 nav导航制作

nav盒子通栏有高度，而且有下边框

1号盒子左侧有浮动，dropdown

2号盒子左侧浮动，navitems导航栏侧

1号盒子需要根据相关性包含.dt和.dd两个盒子

2.5 footer底部制作

footer页面底部盒子通栏给一个高度和灰色的背景

footer里面有一个大的版心

版心里面包含1号盒子，mod_service服务模块

版心里面包含2号盒子，mod_help是帮助模块

版心里面包含3号盒子，mod_copyright是版权模块

2.6 main主体模块制作

以前书写的就是模块中的公共部分。

main主体模块是index里面专有的，注意需要新的样式文件index.css。

newsflash新闻快报模块

• 1号盒子为news新闻模块,高度是165px

news新闻模块

分成上下两个模块

1号盒子是news-hd新闻头部模块，给一个高度和下边框

2号盒子new-bd新闻主体部分，里面包含ul和li还有链接

• 2号盒子是lifeservice模块,高度为209px
• 3号盒子为bargain特价商品

直接插入图片

2.7 推荐模块制作

• 大盒子recom推荐模块 recommend
• 里面包含2个盒子，浮动即可
• 1号盒子recom-hd
• 2号盒子recom-bd，注意里面小竖线

2.8 楼层区floor制作

注意这个floor，不要给高度，内容有多少，算多少

第一楼是家用电器模块：里面包含两个盒子

• 1号盒子box_hd，给一个高度，有个下边框，里面分成两个盒子
• 2号盒子box_bd，不要给高度

1.box_hd模块

• 有高度可以不用清除浮动
• 左边h3，盒子左浮动
• 右边tab-list，因为用到tab切换效果，所以里面要用ul和li制作

2.tab栏原理-布局需求

tab_list和tab_content

品优购列表页制作

1.1 准备工作

1. 列表页是新的页面，需要新建页面文件list.html
2. 因为头部和底部基本一致，所以需要把首页中的头部和底部的结构复制过来
3. 头部和底部的样式也需要，因此list.html中还需要引入common.css
4. 需要新的list.css样式文件，这是列表页专门的样式文件

1.2 列表页header和nav修改

• 秒杀盒子sk（second kill）定位即可
• 1号盒子左侧浮动sk-list里面包含ul和li
• 2号盒子左侧浮动sk-con里面包含ul和li

1.3 列表页主体sk_container

• 1号盒子sk_container给宽度1200，不要给高度
• 2号盒子sk_hd，插入图片即可
• 3号盒子sk_bd，里面包含很多ul和li

品优购注册页制作

2.1注册页类名命名

注册页面：regidter.html

注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。

名称	说明
注册专区	registerarea
注册内容	reg-form
错误的	error
成功的	success
默认的	default

l

注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。

名称	说明
注册专区	registerarea
注册内容	reg-form
错误的	error
成功的	success
默认的	default

域名注册与网站上传