附加
一、页面布局整体思路
为了提高网页制作的效率,布局时通常有以下整体思路
-
必须确定页面的版心(可视区),我们测量可知
-
页面布局第一准则:分析页面中的行模块,以及每个模块中的列模块。
-
页面布局第二准则:一行中的列模块经常使用浮动布局,先确定每个列的大小,之后确定列的位置。
-
制作HTML结构,遵寻先有结构、后有样式、交互的原则。(结构永远是最重要的)
-
所以,先理清楚布局结构,在写代码尤为重要,多积累。
二、页面布局注意点
一、导航栏
实际开发中,我们不会直接用链接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图标,借助第三方转换网站 如比特虫
-
在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