PC端静态页面项目之品优购商城

PC端静态页面项目之品优购商城

---

---

前言

一、项目搭建

1.1 创建文件夹

名称	备注
项目名字	项目文件夹
images	样式类图片文件夹，图片是基本不变的
css	样式文件夹
upload	产品类图片文件夹，图片要时常更新
fonts	字体类文件夹
js	脚本文件夹

1.2 创建文件

名称	备注
index.html	首页
base.css	css初始化样式文件
common.css	css公共样式文件

1.3 模块化开发

1.3.1 有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用

1.3.2 这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式

1.3.3 模块化开发具有重复使用、修改方便等优点

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

1.4 网站 favicon 图标

1.4.1 把所需要的图标切图切下来

1.4.2 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站。

比特虫http://www.bitbug.net/

1.4.3 favicon图标放到网站根目录下

1.4.4 引入到网页

	<link rel="shortcut icon" href="/favicon.ico" />

1.5 网站TDK三大标签SEO优化

1.5.1 Search Engine Optimization 搜索引擎优化。是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式

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

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

	例：
	京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
	小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

1.5.4 description 网站说明<meta name="description" content="...">

简要说明网站主要是做什么的。description 作为网站的总体业务和主题概括

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

1.5.5 keywords 关键字<meta name= "keywords" content="...">

keywords 是页面关键词，是搜索引擎的关注点之一。最好限制为 6～8 个关键词,采用 关键词1,关键词2 的形式。

<meta name= "keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

二、首页制作

2.1 常用模块类名命名

2.2 快捷导航 shortcut 制作

2.3 首页头部 header 制作

2.4 导航 nav 制作

2.4.1 导航左侧.dropdown

全部商品.dd

详细分类 .dt

2.4.2 导航右侧.navitems

2.5 网页底部 footer 制作

2.5.1 服务模块.mod_service

2.5.2 帮助模块.mod_help

2.5.3 版权模块.mod_copyright

2.6 主体模块 .main 制作

2.6.1 焦点图(轮播图).focus

2.6.2 新闻快报模块.newsflash

（1）新闻模块.news

新闻模块头部.news-hd

新闻模块主体.news-bd

（2）生活服务模块.lifeservice

（3）特价商品模块.bargain

2.7 推荐模块 .recom 制作

2.7.1 推荐模块头部.recom-hd

2.7.2 推荐模块主体.recom-bd

2.8 楼层模块 .floor 制作

2.8.1 楼层模块头部.box-hd

tab栏.tab-list

2.8.2 楼层模块主体.box-bd

tab栏内容.tab-content

	要求选项卡个数要内容个数一致。

三、注册页制作

3.1 常用模块类名命名

3.2 整体结构

3.2.1 头部.header

3.2.2 主体.registerarea

（1）注册标题

（2）注册内容reg-form

3.2.3 尾部footer

---

# 总结