前端切图过程中需要与后台程序员沟通的注意事项

在与客户沟通及合作时,时常出现一些不该出现的问题;之所以说不该出现,因为并不是什么技术难题,只要提前沟通清楚,本可以避免的;

为了整个项目更加流畅、提高效率,也方便后台程序员做程序,请需要前端切图的客户在发送psd的同时,附带上这些说明;

一、编码:

常用的“utf-8”和“gb2312”,如果前后端编码不同,可能会出现乱码或js不执行等问题;

二、大图片用img还是背景:

大图片,指超过1024宽的图片,在做浏览器兼容时需要特别处理,此处用背景还是img差距甚大;如果后台对接CMS需要用img,而我们却用了背景,后台就会增加本可避免的巨大的工程量;

 

面向wordpress的前端切图注意事项

从毕业就开始做前端切图,一年后开始做wordpress后台,到现在为止也算把这两块融会贯通了;

时常接到已经做好前端切图、让我做wordpress后台的订单,每次看到这些前端切图,都头疼不已;很多地方我都得重新切图;倒不是说客户的前端工程师div能力不行,而是他们不懂wordpress,不知道劲往何处使;以下是从业三年来一些浅见:

一、文件夹路径:

css全放在一个文件中,命名为style.css,

所有图片全放入images文件夹,images文件夹下不要再分文件夹,

所有js全放入js文件夹,

文件夹并列:images文件夹、style.css、js文件夹、index.html

path

二、导航菜单:

导航中只能出现 ul , li , a 这三个html标签,

二(多)级导航为ul加上  class="sub-menu"

如需加当前导航效果,为li加上class="s"

三、搜索:

提交按钮必须为input type="submit"

下面是用来调整css兼容的建议:

.sub{
border:none;
display:inline-block;
font-size:0;
line-height:0;
*font-size:0;
*line-height:normal;
*padding-left:999px;
*overflow:hidden;
cursor:pointer;
}

四、牵涉到评论的地方可咨询后再切:

有80%以上的站长都愿意使用社会化评论系统(多说、有言)

可和后台及站长沟通之后,如果站长确实不愿意使用,再切

五、尽量不要用table布局,不要用内置css(就是把css写到html标签上)

明显是超过三行三列的表格,可以用table,

除此之外不要用table

大图片在小屏幕居中(兼容ie678)

随着宽带网速的提升,越来越多网站开始用大图片(指超过1024宽),这些大图片在小屏幕中要想居中,最便捷的方法是用background;但是有些地方必须要用img;下面是兼容代码:

html:

<div><img alt="" src="1.jpg" /></div>

css:

div{
width=100%;
position:relative;
left:auto;
top:auto;
}
img{
display:block;
width:1920px;
height:800px;
position:absolute;
left:50%;
top:0;
margin-left:-960px;
}

拓展:img可换为div或别的块状元素,但必须有固定的宽高;

拒绝仿站,坚持原创,维护版权

总有客户要求仿站,常会出现一些很纠结的问题:

一、程序混乱:有些代码是后台生成的,有些是浏览器附加的,所以从浏览器获得的代码对于前端js及后台php人员来说,绝对是噩梦;

二、客户不承认:很多客户会认为,只是把网上的网页拿下来,有些仿站软件一下就做到了,怎么还收那么多钱呢?(客户不会知道这些仿站软件弄下来的代码有多乱);

三、版权隐患:作为一个希望能长期发展的工作室,不想动辄被人告上法庭;也不想落得一个抄袭的罪名;

四、消保要求:崇远工作室已加入猪八戒消保,同时是猪八戒金牌服务商,所以会遵守消保中的“原创”要求;

鉴于以上几点,以后仿站的订单,崇远不会再接;

如有客户需要做网站,请直接提出重新设计效果图、切图、后台;

纯CSS实现网页内容悬浮

近来,有很多朋友和客户问到网页内容悬浮的问题,有时是QQ客服(如本站左侧),有时是广告图片;下面我总结两种最常用的方式实现网页内容悬浮(可直接复制使用):

第一种、使用expression(推荐)

.qq {
	top: 200px;
	position: fixed;
	left: 0px;
	_position: absolute;
	_top:expression(eval(document.documentElement.scrollTop + 200));
	z-index: 10000;
}

使用方法:top:200px,意思是离顶部200px,可修改;left:0px,意思是离左边0px,可修改像素值,如果是挨着右边,改为 right:0px;

第二种:html和body(不推荐,容易和别的地方冲突)

.qq{
top:200px;
position:fixed;
left:0px;
z-index:10000;
_position:absolute;
}
html{
height:100%;
overflow:hidden;
}
body{
height:100%;
overflow:auto;
}