17-附加

附加

一、页面布局整体思路

为了提高网页制作的效率，布局时通常有以下整体思路

1. 必须确定页面的版心（可视区），我们测量可知

2. 页面布局第一准则：分析页面中的行模块，以及每个模块中的列模块。

3. 页面布局第二准则：一行中的列模块经常使用浮动布局，先确定每个列的大小，之后确定列的位置。

4. 制作HTML结构，遵寻先有结构、后有样式、交互的原则。（结构永远是最重要的）

5. 所以，先理清楚布局结构，在写代码尤为重要，多积累。

二、页面布局注意点

一、导航栏

实际开发中，我们不会直接用链接a而是用li包含链接（li+a)的做法。

• li+a语义更清晰，一看就有条理的列表型内容

• 因为导航栏里的文字不一样多，最好直接给a左右的padding值而不是直接给宽度

• 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。

二、图片

• 因为页面的图片有很多，所以不要直接给图片设置样式，最好套上一个盒子，对盒子进行设置

• 为了照顾低版本浏览器，如果图片外面包含了链接会有边框问题，所以、

img {
    border:0;
}

背景图片

• 背景图片实际开发中常用于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制，（精灵图也是一种运用场景）

• 不需要经常换的用背景图，经常更新换的用图片

三、背景图片

背景：

• 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁的接受和发送请求图片，会造成服务器请求压力过大，这将大大降低页面的加载速度。

• 因此，为了有效的减少服务器接受和发送请求的次数，提高网页加载速度，出现了css精灵图技术（也称css、sprites、css雪碧图）

• 用于缓解服务器压力

（1）、精灵图（sprites）的使用

• 精灵技术主要针对背景图片使用，就是把很多个小背景图片整合到一张大图片中。

• 通过移动背景图片位置（background-position），来设置x和y,注意往左和上是负值。

• 使用精灵图需要精确测量每个小背景图片的大小和位置。

精灵图是有很多的有点，但是也有很多缺点

• 图片文件还是比较大的。图片本身放大和缩小都会失真

• 一旦图片制作完毕想要更换非常复杂

• 此时可使用字体图标iconfont可解决以上问题

（2）、字体图标的产生（font-icon）

• 使用场景：主要用于显示网页中通用、常用的一些小图标。

• 字体图标可以为前端工程师提供一种放方便高效的图标使用方式，虽然展示的是图层，但本质是字体

• 不会失真，样式可修改

字体图标的优点

• 轻量级：一个图标字体要比一系列的图像要小的多，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

• 灵活性：本质是文字，可以很随意的改变颜色，产生阴影，透明效果和旋转等

• 兼容性：几乎支持所有的浏览器，可放心使用

• 注意：字体图标不能代替精灵图，只是对工作中图标部分技术的提升和优化

字体图标的使用

• 字体图标是一些网页常见的小图标，直接网上下载即可

• 字体图标的下载：下载网址

  • 阿里巴巴矢量图库：http://www.iconfont.cn

  • 下载图标直接使用

  • icomoon字库：http://iconmoon.io/#home

    • 下载文件，以下

• 字体图标的引入（引入到我们的HTML页面）

  • 下载完毕之后，注意原先的文件不要删，后面会用

  • 把下载包里面的fonts文件夹放入页面根目录（复制与html文件同一级）

    • 字体文件格式：不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

    • 在css样式中全局声明字体：简单理解就是把这些字体文件通过css引入到页面中，一定注意字体文件路径的问题

  • html标签内添加小图标《span》图标复制粘贴过来《/span》

  //去下载的style.css样式里面复制，放到我们自己的css里面
  @font-face {
      ……………………font-family一大坨东西；
  }
  //在我们需要加入字体图标的标签里面加上属性
  //去上面复制即可
  font-family:icommon;
  ​
  ​

• 字体图标的追加（以后添加新的小图标）

  • 如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

  • 把压缩包里面拿到selectionn-json从新上传，然后选中自己想要的图标，重新下载压缩包，并且替换原来的文件即可。

  • 

（3）、总结

• 如果遇到一些结构和样式比较简单小图标，就用字体图标。

• 如果遇到一些结构和样式复杂一点的小图标，就用精灵图。

三、网站favicon图标

favio.icon一般作为省略的网站标志，它显示在浏览器的地址栏或者标签/窗口栏上

（1）、制作favicon图标图片

• 把图片切成png图片

• 把png图片转换为icon图标，借助第三方转换网站 如比特虫

• /http://www.bitbug.net

• 在HTML页面中引入favicon图标

• //在HTML页面的head元素之间出入代码
  <link rel="icon"  href="#"  type="image/x-icon">

（2）、favicon图标放到根目录下，方便查找

（3）、HTML页面引入favicon图标，借助第三方转换网站：如比特虫

四、网站SEO优化

一、TDK ，SEO优化

• 网站TDK三大标签优化（title、description、keyWord)

• 三大标签：标题、描述、优化

SEO（search English optimization)汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名

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

• 页面中的三大标签用来符合SEO优化

1、title网站标题

• title具有不可替代性，是我们页面内的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点

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

2、description网站说明

• 简要说明我们是做什么的

• 我们提倡，description作为网站的总体业务和主题概述，多采用我们是……，我们提供……，xxx网站作为……，电话……，之类的语句

3、keywords关键字

• keyword是页面关键字，是搜索引擎的关注点之一

• keyword最好限制在6----8个关键词，关键词之间用逗号隔开，采用关键字1，关键字2，关键字3的形式

二、LOGO ,SED优化

• logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要

• h1里面放一个链接，可以返回首页，把logo的背景图片给链接即可

• 为了搜索引擎收录我们，我们链接里面放文字（网站名称），但文字不现实出来

  • 方法一：text-indent移到盒子外面（text-indent:-9999px),然后overflow:hidden;【淘宝做法】

  • 方法二：font-size:0;【京东做法】

• 最后给链接一个title属性，这样鼠标放到logo上就可以看到提示信息了

五、浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新的浏览器无需添加

私有前缀

• -moz-:代表火狐（firefox)浏览器私有属性，gecko内核

• -ms-:代表ie浏览器私有前缀，trident

• -webkit-:代表safair.chrome私有属性前缀，webkit

• -O-:代表欧朋浏览器私有前缀，blink

提供写法

-moz-border-radius:50%;

-ms-border-radius:50%;

-webkit-border-radius:50%;

-o-border-radius:50%;

border-radius:50%;

六、文档名字

项目文件夹：

• 新建首页文件index.html（以后我们的网页首页统一规定为index.html)

• CSS初始化：base.css

  • 不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对html文本呈现的差异，照顾浏览器的兼容，需要对css进行初始化

  • 初始化样式写在base.css文件里

• CSS公共样式：common,css

  • 公共样式写在common.css文件里

• 产品图片文件夹：images/upload（用于经常更换的图片）

• 样式图片文件夹：icons/logos（用于样式修饰，不经常更换的）

• 字体类文件夹：fonts

• 脚本语言文件夹：js

• 样式文件夹：CSS

• 页面文件夹：html/page