正在阅读:PS把PSD网站模板切图为XHTML+CSS的网页PS把PSD网站模板切图为XHTML+CSS的网页

2009-03-20 14:20 出处: 作者:网页教学网 责任编辑:zengxiaolan

  文章部分在概念设计稿上是跟侧边栏有一样的边线效果,但是因为他们没有覆盖在其他的图片上并且也没有复杂的透明度等问题,所以我们将会用纯粹的css代码来实现他的效果。

PS把PSD网站模板切图为XHTML CSS的网页 
图11 

  接下来就是使用了蓝色渐变的内容区(也就是放留言数继续阅读等的区域),这个地方也是导出一个瘦长的区域然后横向重复就能达到其效果。

PS把PSD网站模板切图为XHTML CSS的网页 
图12

  小的评论气泡,箭头,rss标志和电子邮箱图标等,都随着logo一起单独的导出即可,最好使用png格式这样适应性更强--当然如果你确定放弃给ie6的用户使用或者浏览的话。

PS把PSD网站模板切图为XHTML CSS的网页 
图13

  现在概念设定已经完整的被分成了独立的图片,五部分的框架被拆分成了13个图片文件。他们一共才95Kb,这么来看即使是拨号网络也能比较流畅的观看网页了。

PS把PSD网站模板切图为XHTML CSS的网页  
图14

  一个html网页设置控制结构的布局是必须的,上面那段话你没必要自己写,随便查看一个网页的源文件都能找到。一个单独的css样式表是将包括视觉规则的设计。然后让html文件链接到这个新建的css样式表文件。

PS把PSD网站模板切图为XHTML CSS的网页 
图15

键盘也能翻页,试试“← →”键

相关文章

关注我们

最新资讯离线随时看 聊天吐槽赢奖品