今日学习内容:
1、图片格式:
jpg 对色彩保留比较完整,产品类一般使用图片
gif:最多存储256色,通常用来展示简单的图形和字体,但是可以保留透明背景和动画效果
png:结合jpg和gif的优点,也可以透明背景,切图时候的优选格式。
psd:是photoshop的专用格式,可以存储图层、通道、遮罩等多种设计稿,前端人员可以直接从上面复制文字、获取图片和测量大小
ctrl+r弹出标尺
ps使用
2、css项目实战
创建文件夹
shopping:项目文件夹
里面css样式文件夹
upload
样式类图片
images
产品类图片
fonts
字体图标
js
脚本文件
3、制作favicon图标
现将所需要的图标截图成png格式
在网页中将图片转化为图标
将我们的图标放在项目根目录下
引入图标在head中
link rel=“short icon” href=“”
seo优化
seo代表搜索引擎优化,是一种利用搜索引擎的规则,提高网站在有关搜索引擎的自然排名方式
seo的三大标签TDK
T:title 尽量不要超过三十个字
D: description 网站描述 多采用“我们是或者我们提供、某某网站作为”
K:keywords 关键字 一般限制为6-8个字关键词之间用英文逗号隔开
head>meta>name=“keywords” content=“关键字用逗号隔开”
4、PS的使用技巧
1)、在文件中可以打开psd文件来进行操作。
2)、ctrl+r可以打开标尺,右键标尺可以选择标尺单位。
3)、ctrl加加号可以放大视图,加加减号可以缩小视图。
4)、按住空格可以拖动视图
5)、选择矩形工作框,可以选择视图的部分区域来查看像素值。
6)、选择切图工具,选择切图区域,点击导出图片并存储图片
7)、选中需要合并的图层,ctrl+e合成,导出
<div class="shortcut">
<div class="w">
<!-- 顶部左半边 -->
<div class="left">
<span>优购商城欢迎您! </span>
<span><a href="">登录</a></span>
<span><a href="">免费注册</a></span>
</div>
<!-- 顶部栏右半边
优购商城欢迎您! 登录 免费注册 | | | | |
-->
<div class="right">
<a href="">我的订单</a><span>|</span>
<a href="">我的优购</a><span>|</span>
<a href="">会员</a><span>|</span>
<a href="">企业采购</a><span>|</span>
<a href="">客户服务</a><span>|</span>
<a href="">网站导航</a>
</div>
</div>
</div>
|