品优购---品优购项目规划---8.3

网站制作流程、品优购项目搭建工作、网站favicon图标、网站TDK三大标签SEO优化

i33.

1390人浏览 · 2022-08-04 11:59:02

i33. · 2022-08-04 11:59:02 发布

品优购项目规划

网站制作流程

1.客户沟通，制定方案---2.签订合同---3.预付定金---4.初稿审核（网页美工会制作原型图和PSD效果图）---5.前台页面设计，后台功能开发---6.测试验收---7.上线培训---8.后期维护

1.品优购项目整体介绍

项目名称：品优购
项目描述：品优购是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作

2.品优购项目学习目的

电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。
品优购项目能复习、总结、提高基础班所学布局技术。
写完品优购项目，能对实际开发中制作PC端页面流程有一个整体的感知。
为后期学习移动端项目做铺垫。

3.开发工具以及技术栈

开发工具：VScode、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）
技术栈：利用HTML5+CSS3手动布局，可以大量使用H5新增标签和样式。采取结构与样式相分离，模块化开发。良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。（详情见素材文件夹-品优购代码规范.md)

品优购项目搭建工作

1.需要创建如下文件夹：

名称	说明
项目文件夹	shoping
样式类图片文件夹	images
样式文件夹	css
产品类图片文件夹	upload
字体类文件夹	fonts
脚本文件夹	js

2.需要创建如下文件：

名称	说明
首页	index.html
CSS初始化样式文件	base.css
CSS公共样式文件	common.css

3.模块化开发

所谓的模块化：将一个项目按照功能战划分，一个功能一个模块，互不影响。模块化开发具有重复使用、更换方便等优点。

有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用
最典型的应用就是common.css公共样式。写好一个样式，其余的页面用到这些相同的样式
模块化开发具有重复使用、修改方便等优点

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

网站favicon图标

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

1.制作favicon图标：把品优购图标切成png图片，把png图片转换为ico图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/
2.favicon标放到网站根目录下

3.HTML页面引入favicon图标：在页面源文件的<head></head>标签之间插入
<link rel="shortcut icon" href="shopping/bitbug_favicon.ico" />

网站TDK三大标签SEO优化

SEO(Search Engine Optimization)汉译为搜索引攀优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

页面必须有三个标签用来符合SEO优化：title、description、keyword。

1.title网站标题：具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议：网站名（产品名）-- 网站的介绍（尽量不要超过30个汉字）
例如：京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！

2.description网站说明：简要说明我们网站主要是做什么的。
我们提倡，description作为网站的总体业务和主题概括，多采用“我们是”、“我们提供”、“×××网
作为.…”、“电话：010....”之类语句。
例如：<meta name="description" content:="京东JD.COM-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供愉悦的网上购物体验！"/>

3.keywords关键字：keywords是页面关键词，是搜索引擎的关注点之一。
keywords最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1，关键词2的形式
例如：<meta name="keywords" content="网上购物,网上商城手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />