网站PSD模板切图为XHTML+CSS的网页实例插图

网站PSD模板切图为XHTML+CSS的网页实例

之前教了大家做网站PSD模板,那么,做好后怎样在实际中应用呢??怎样把这样做好了的模板切图为XHTML+CSS的网页呢??现在我们就来看一下设计好的模板切图的实例教程

网站PSD模板切图为XHTML+CSS的网页实例(12)插图

网站PSD模板切图为XHTML+CSS的网页实例(12)

之前教了大家做网站PSD模板,那么,做好后怎样在实际中应用呢??怎样把这样做好了的模板切图为XHTML+CSS的网页呢??现在我们就来看一下设计好的模板切图的实例教程 现在我们来看看如何将这个概念设计转化为完整的由XHTM

广告位
网站PSD模板切图为XHTML+CSS的网页实例(2)插图

网站PSD模板切图为XHTML+CSS的网页实例(2)

接下来导出的是主体内容区,画出另一个大的选区,其重要包括整个中部面板当然别忘记那些带有效果的地方比如阴影,半透明的边框等,都要一一包含在内。注意还要考虑到头部复杂的透明度的导航区域,所以选取应该直接

网站PSD模板切图为XHTML+CSS的网页实例(11)插图

网站PSD模板切图为XHTML+CSS的网页实例(11)

订阅的选项似乎总是在IE下面会有问题,这个只需要简单地加上 display: inline在列表中就能解决。 改完这些问题后这个正在做的网站就恢复正常勒,像一个wordpress主题鸟,当然想要更多的东西必须在加入更多的代码,

网站PSD模板切图为XHTML+CSS的网页实例(10)插图

网站PSD模板切图为XHTML+CSS的网页实例(10)

搞定后又可以用浏览器YY下,重复的背景上面是坚实的文本啊! 大体效果就这么搞定了, 设计 稿的内容基本上也都呈现出来了,这时候你可以换着浏览器和分辨率来看看有没有问题以及模拟链接的效果比如鼠标on啊 鼠标点

网站PSD模板切图为XHTML+CSS的网页实例(9)插图

网站PSD模板切图为XHTML+CSS的网页实例(9)

接下来就可以在浏览器里面看到侧边栏鸟~注意别让内容超过了图片的宽度,及时的截断下看看效果就好啦(毕竟只是html的~) 记下来我们快速的搞定继续阅读和评论等这个位置的东东 继续给这些元素添加样式,用一个特

网站PSD模板切图为XHTML+CSS的网页实例(8)插图

网站PSD模板切图为XHTML+CSS的网页实例(8)

然后在浏览器里面测试下啦~如果没写错的话那么就跟 设计 稿上的效果是一样的~这说明 CSS 彪悍的将ps设计稿里面背景颜色和边框的效果给实现了。 然后继续完善html的结构,现在轮到侧边栏了。我们来看看如何在一个

网站PSD模板切图为XHTML+CSS的网页实例(7)插图

网站PSD模板切图为XHTML+CSS的网页实例(7)

到目前来讲就可以在浏览器里面看看啦~基本上的大型已经出来啦~logo啊导航啊内容区啊基本上已经颇具雏形鸟。 接下来是在这个框架上渐渐丰满起来,用一个容器来搞定文章发布区,就像我们前面说的一样,这个地方我们

网站PSD模板切图为XHTML+CSS的网页实例(6)插图

网站PSD模板切图为XHTML+CSS的网页实例(6)

我们将内容和背景放到一个含有ID的div的容器里面。不过要记得我们有一个浅色的背景在最后面需要垂直重复的说,直到 CSS 3才更广泛的支持第二个div在这个图像之上。 网站名字用H1的标签来控制,他也是logo的基础,上

网站PSD模板切图为XHTML+CSS的网页实例(5)插图

网站PSD模板切图为XHTML+CSS的网页实例(5)

小的评论气泡,箭头,rss标志和电子邮箱图标等,都随着logo一起单独的导出即可,最好使用png格式这样适应性更强当然如果你确定放弃给ie6的用户使用或者浏览的话。 现在概念设定已经完整的被分成了独立的图片,五部

正在加载中...

已加载全部内容

已经没有更多文章了

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部