主页 > 知识库 > 网页基础 > HTML >

如何将PSD模型转化成XHTML和CSS文件(2)

来源:互联网 作者:老鬼 发表于:2009-09-29 10:35  点击:
因为之前的设计,所以这个独立的侧边栏的图形将充分利用两个图片上部是足够长的区域,以便容纳更多的内容防止超出设计的部分,另一个是一个小的底部,底部宽度要与上部一致。这是一个类似用于菜单的滑动门的技术。

因为之前的设计,所以这个独立的侧边栏的图形将充分利用两个图片——上部是足够长的区域,以便容纳更多的内容防止超出设计的部分,另一个是一个小的底部,底部宽度要与上部一致。这是一个类似用于菜单的滑动门的技术。

这个长的可以自动伸缩的部分导出的时候要注意包含边线的透明效果。

下一步是薄的底部部分,这样侧边栏部分就完成鸟。

另一个导出的小的可自动伸缩部分的是导航栏的背景,它可以根据菜单文字的长度来自动伸缩。这里需要使用png的文件因为可以利用其透明度来覆盖住不同颜色的背景,这样看起来会更~和谐~~~~

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

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


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

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

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

我们将内容和背景放到一个含有ID的div的容器里面。不过要记得我们有一个浅色的背景在最后面需要垂直重复的说,直到CSS3才更广泛的支持第二个div在这个图像之上。
网站名字用H1的标签来控制,他也是logo的基础,上部导航和rss /电子邮件订阅选项是作为无序列表。

接下来开始用CSS重新构建页面,清除浏览器的默认设置。背景图像是附属于body和全局字体风格的设置。容器,内容和页脚的div也要使用适当的背景图片和风格设置。

有帮助
(12)
63.2%
没帮助
(7)
36.8%
  • 上一篇:没有了
  • 下一篇:避免表格table被撑开变形的CSS代码实例