前端学习第八周（2）

1.切图工作利用PS
（1）.文件—>打开：打开我们要测量的图片。
（2）.Ctrl+R：打开标尺，或者视图->标尺
（3）.右击标尺，将单位改为像素。
（4）.Ctrl+加号（+）：放大视图，Ctrl+减号：缩小视图
（5）.按住空格键，鼠标可以变成小手，拖动PS视图
（6）.用选区拖动，可以测量大小。
（7）.Ctrl+D可以取消选区，或者在旁边空白处点击一下也可以取消选区。
2.常见的图片格式
（1.jpg:JPG对色彩的信息保留较好，高清，颜色较多。用来做产品图片。
（2.gif:GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果。
（3.png:具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，请选择png
(4.PSD图像格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿，可以直接从上面复制文字，获得图片，还可以测量大小和距离。
3.切图方式：图层切图、切片切图、PS插件切图
3.1图层切图
最简单的方式是：右击图层-->快速导出为PNG
在许多情况，需要合并图层再导出：
（1.选中需要的图层：图层菜单—>合并图层（CTRL+E）。
（2.右击—>快速导出为PNG。
3.2切片切图
1.利用切片选中图片：利用切片工具手动划出。
2.导出选中的图片：文件菜单-->导出-->存储web设备所用格式-->选择我们要的图片格式-->存储。
3.3PS插件切图：Cutterman
http://www.cutterman.cn/zh/cutterman
点击web-->选择图片格式-->选择切片导出的位置-->进行切图-->点击导出选中的图层
像素大厨：https://www.fancynode.com.cn/
4.学成在线案例
4.1css书写顺序
（1.布局定位属性：display/position/float/clear/visiblityy/overflow
（2.自身属性：width/height/margin/border/background
（3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
 (4.其他属性（css3）:content/cursor/border-radius/text-shadow/background:linear-gradient
4.2页面布局整体思路
（1.必须确定页面的版心（可视区），测量可得知。
（2.分析页面中的行模块，以及每个行模块中的列模块，其实页面布局第一准则。
（3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则。
（4.制作html结构。遵循先结构后样式的原则，结构永远最重要。
（5.先清除布局结构，在写代码。
4.3头部制作
导航栏注意点：实际开发中，我们不会直接用链接a而是li包含链接（li+a）的做法。
（1.li+a语义更清晰
（2.若直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。
注意：
1.让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示。
2.这个nav导航栏可以不给宽度，将来可以继续添加文字
3.因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度。