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

品优购项目规划

网站制作流程

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,相机,数码,配件,手表,存储卡,京东" />

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值