一、主体搭建
1.建立站点文件夹
1.1、在项目的根目录下建立如下文件夹:
注意:
1.文件夹名称不能是中文
2.里面至少应该包含css/js/images三个子文件夹
3.里面至少应该包含index.html文件/
- 项目根目录
- css(文件夹)
- base.css(放css的工具类)
- index.css
- normalize.css(或者cssreset-min.css,用于清除默认样式)
- font(文件夹,字体图标等)
- images(文件夹,资源图片)
- js(文件夹)
- favicon.ico(选项卡标题旁边的小图标)
- index.html(首页)
- css(文件夹)
1.2、设置favorites icon网页图标
显示在网页选项卡和收藏夹中的图标,我们称之为favicon。
一般获取网址为http://www.官网域名.com/favicon.ico
(a)、生成网页图标,放在站点根目录下
(b)、在head标签中添加:
2.添加网站优化的三大标签
2.1、网页title标题
- title是网页中第一个重要的标签,是搜索引擎了解网页的入口,和对网页主题归属的最佳判断点。
- 标题长度:Google 35个中文,baidu 28个中文。
- 格式:网站名(产品名)——网站的介绍。
- 特点:越先出现的词语,权重越高。
<title>淘宝网 - 淘!我喜欢</title>
<title>京东(JD.COM)- 正品低价、品质保障、配送及时、轻松购物!</title>
<title>苏宁易购(Suning.com)(JD.COM)- 送货更准时、价格更超值、上新货更快</title>
2.2、Keywodrs 关键字
Keywodrs是页面关键词,是搜索引擎重点关注点之一。
- Keywodrs应该限制在6~8个关键词左右,电商类网站可以多几个。企业中一般有专业的分析人员分析高频关键词,提供给开发人员。
- 具体在浏览器中的显示优先级别同站点的优化,和是否付费有关。
<meta name="keywords" content="苏宁易购网上商城,苏宁电器,Suning,手机,电脑,冰箱,洗衣机,相机,数码,家居用品,鞋帽,化妆品,母婴用品,图书,食品,正品行货">
2.3、Description 网站说明
对于关键词的作用明显降低,很多搜索引擎,仍然大量采用网页的meta标签中描述部分作为搜索结果的“内容摘要”,就是简要说明我们网站主要是做什么的。
- 补充在title和Keywodrs中未能充分表述的说明
- 字符数含空格在内不要超过120个汉字
- 描述中出现关键词,与正文内容相关,这部分内容是给人看的,所以要写的很详细,让人感兴趣,吸引用户点击
<meta name="description" content="苏宁易购-综合网上购物平台,商品涵盖家电、手机、电脑、超市、母婴、服装、百货、海外购等品类。送货更准时、价格更超值、上新货更快,正品行货、全国联保、可门店自提,全网更低价,让您放心去喜欢!">
3.导入CSS
Rest类库,将所有的浏览器的自带样式重置掉,保持各浏览器渲染的一致性
3.1、reset.css
- 无论是否有用,一律清零
3.2、normalize.css
- 一般化的样式:为大部分HTML元素提供
- 修复浏览器自身的bug并保证各浏览器的一致性
- 优化CSS可用性:用一些小技巧
- 解释代码:用注释和详细的文档
4.设置全局通用字体行高
一般设计师提供设计图片的时候都会说明,整体网页中用的字体等信息。
body{
/*
字体大小:12像素,
行高:1.5em
*/
font: 12px/1.5em "Microsoft YaHei UI", Tahoma, Arial,"Hiragino Sans GB";
color: #999;
background: #f2f2f2;
}
5.思考:优雅降级和渐进增强(兼容性处理)
5.1、渐进增强
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果,交互等改进和追加功能,以达到更好的用户体验。(低版本看基础功能,高版本看完整功能)
5.2、优雅降级
开始就在高级浏览器上构建完整的功能,然后再针对低版本浏览器进行兼容。
建议:现在微软都抛弃了ie浏览器转而支持edge,所以大多数情况下没有必要再时刻想着低版本浏览器。可以一开始就构建完整的效果,根据实际情况向下兼容低版本浏览器的问题。
- 修补时最常见的做法就是为低版本浏览器,单独制作一个跳转页,告诉用户升级浏览器。