品优购项目（更新中）

品优购项目

1.1 网站制作流程

  客户沟通制定方案 -> 签订合同 -> 预付定金 -> 初稿审核 ->  前台页面设计后台功能开发 -> 测试验收 -> 上线培训 ->后期维护

1.2 开发工具及技术栈

   1.开发工具：VScode，Photoshop(fw), 主流浏览器

   2.技术栈：利用html5+css3手动布局  可大量使用h5新增标签和样式

1.3 项目整体介绍

制作首页，列表页，注册页三个页面

1.4 品优购项目搭建工作

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

 

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;}

1. 将css初始化代码文件复制到css文件下，命名为base.css

是css初始化样式文件

将初始化样式文件引入到首页index.html中：

 <!-- 引入我们初始化样式文件 link rel=lsheet" href="css/base.css">

 

1. 模块化开发

   在css文件夹中新建一个common.css公共样式

将css公共样式文件引入到首页index.html文件中

-- 引入我们公共样式文件 -->

     <link rel="styelsheet" href

 

1. favicon图标

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

1. 制作favicon图标： 将品优购图标切成 png图片，把png图片转换为ico图标 需借助于第三方转换网站，比如：比特虫：http://www.bitbug.net。
2. 将favicon图标放入到网站的根目录下
3. Html页面引入favicon图标： 将这段代码放入title下

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

 

1. 网站TDK三大标签SEO优化

SEO是搜索引擎 用来深度优化进而在搜索引擎上提升网站排名

1. title网站标题

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

1. description网站说明

description作为网站的总体业务和主题概括，多采用“我们是...”，“我们提供...”，“xxx网作为...”，“电话:10...”之类的语句。

   <meta name="description" content="品优购-专业的综合网上购物商城，销售家电，数码通讯，

    电脑，家居百货，服装服饰，母婴，图书，食品等数万个品牌优质商品，便捷，c诚信的服务，为您提供愉悦的网上购物体验！"/>

    <meta name="keyword" content="网上购物,网上商城手机,笔记本,电脑,MP3,CD,VCD,DV,相机，数码，配件，

 

1. Keywords关键字

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

        

LOGO SEO优化

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

方法1：text-indent移到盒子外面（text-indent:-9999px），然后overflow: hidden;淘宝的做法。

方法2：直接给font-size:0; 京东的做法。

1. 给链接一个title属性，鼠标放到logo上就可以看到提示文字了。

选项卡叫做Tab栏切换

在这些图片中先放一个a，再放一个图片