天给大家讲解一下,如何把一个设计好的页面切割成一个可以在IE中浏览的页面。我为为大家介绍如何用Fireworks(以后简称FW)去切图,因为我习惯用FW切图。我们就用上次那个译文中的设计稿做例子讲解吧。
第一步:用FW打开上次设计好的网站设计稿。
注:一般没有特殊效果的PS设计稿,都可以用FW打开,而且在效果上不会有差异。
如果FW和PS有字体不相认的情况出现的时候,FW会提问是否替换字体,我们选择维持外观,不要替换字体。
第二步:再切图之前我们要看下这个设计稿哪些部分要切成图片。如下图是我所解析出的哪些要切成图片的内容。
1.header部分
2.Nav部分
Nav部分还有一个色块,这个色块我们不用切成图片,完全可以用背景色彩代替。此项将在网页生成篇讲到。
3.main部分
这就是页面的正文部分
上图所说的渐变条这我在补充一下,如果每个栏目中的渐变条是一样的,我们切出一个渐变条即可,如果渐变的高度不同,那么我们要切出多个渐变条。这个例子我们采用一个渐变就可以。
在这个页面中还有一个虚线, 我没有采用图片,在生成网页时我会用CSS定义成虚线。
下图为此虚线。
所绘切片图如下:
第三步:下面我们开始用FW将切片导出为图片了。
1.选中第一个Logo部分所绘的渐变切片。
2.按Ctrl+Shift+X,打开导出预览对话框。如果默认的格式为GIF,我们就要和下面操作一样转换成jpeg的。有多色彩和多渐变的图像都要导出为jpeg的格式。只有单色的可以导出为gif格式的。
用以上这几步操作把其它几个切片导出为图片。
注:还有一种方法就是为各个切片命名,命名后只要格式相同可以一起导出。比如:选中第一个按钮的切片,在属性下面的切片,案例网站风格那里将名称换成button01
朱丹丹
IE浏览器下,a标签会出现的虚线边框问题:
上图中,红线包裹的就是一个翻页的按钮,按钮实际是html的a标签做的,鼠标点击翻页按钮会加了一个虚线的边框
去掉虚线边框方法:
可以这样写,但是这样写还不是很完美,在页面中调用JS 动作比较频繁的话,页面会变得卡顿;
解决方法可以写成下面这样:
写在A里,不管是鼠标放上,鼠标点击,还是默认,都会执行 star:expression(this.onFocus=this.blur());, 这个代码相对于IE来说就是一个CSS的动作调用,和JS原理一样,页面资源耗不起,也算是IE的BUG吧~~~我们实现的效果是要点击的时候没有虚 线,所以就写在a:active里就可以了,意思就是点击时才执行,才去掉虚线框。这样鼠标在放上A和默认的情况下就不会卡。
要同时兼容IE和火狐浏览器,样式直接写成以下就可以:
ss的标签有很多,本篇文章为大家总结以下常用的一些标签以及简单说明这些标签的作用。
文字颜色: color: #ffffff;
文字样式: font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
字体大小:font-size:16px;
文字行高: line-height: 30px;
文字粗细: font-weight: bold;(粗体) lighter;(细体) normal;(正常)
文字修饰: text-decoration:line-through; (加删除线)overline;(加顶线)underline;(加下划线)none;(无修饰线)
对齐方式: text-align:right; (文字右对齐)left;(文字左对齐)center;(内部元素居中)justify;(文字分散对齐)
使用练习:我们随机书写一段文字,设置文字的颜色为红色,字体样式为斜体,字体大小为20px,行高为35px,字体加粗,加下划线,并是文字居中对齐;那么我们的代码就如下所示:
在网页中的显示效果就如下图所示:
背景样式:background:#f00; (红色背景)background-image : url(/image/bg.gif); (背景图片)background-repeat : repeat;(重复排列-网页默认)background-repeat : no-repeat;(不重复排列)background-repeat : repeat-x; (在x轴重复排列)background-repeat : repeat-y; (在y轴重复排列)
边框样式:border-top : 1px solid #f00; (上框线)border-bottom : 1px solid #f00; (下框线)border-left : 1px solid #f00; (左框线)border-right : 1px solid #f00; (右框线)border:1px solid #f00;(上下左右边框)
其他框线样式:solid(实线框)dotted(虚线框)double(双线框)groove(立体内凸框)ridge(立体浮雕框)inset(凹框)outset(凸框)
内边距样式:padding-top:10px; (上边框留空白)padding-right:10px;(右边框留空白)padding-bottom:10px; (下边框留空白)padding-left:10px;(左边框留空白)
也可以简写成padding:10px 10px 10px 10px;(分别对应上右下左)padding:10px 10px;(上下、左右)padding:10px 10px 10px;(上、左右、下)
外边距样式:margin-top:10px; (上边界留空白)margin-right:10px;(右边界留空白)margin-bottom:10px; (下边界留空白)margin-left:10px;(左边界留空白)
也可以简写成margin:10px 10px 10px 10px;(分别对应上右下左)margin:10px 10px;(上下、左右)margin:10px 10px 10px;(上、左右、下)
使用练习:我们随机书写一段文字,设置文字的背景为灰色,边框为红色 2px 实线框,内边距为10px,外边距为10px;那么我们的代码就如下所示:
在网页中的显示效果就如下图所示:
对于css的常用标签今天就先介绍到这里,大家在平时可以自己多加练习练习,熟练一下各个标签的作用。
每日金句:有时候死扛下去总是会有机会的。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。
*请认真填写需求信息,我们会在24小时内与您取得联系。