《
PSD模板切用photo切图为XHTML+CSS的网页》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335c2013.htm
小的评论气泡，箭头，rss标记和电子邮箱图标等，都跟着logo一起独自的导出即可，最好使用png格局这样适应性更强——当然如果你断定废弃给ie6的用户使用或者浏览的话。
其实网页设计这玩意搞起来了就停不下来了。你必须在FF，opera，safari下面看看有不问题，你看这不在IE下面就出问题了么？（好厌恶IE6…&hellip,PR取消后友情链接交换需要注意的四项原则;如果机器装了更高版本的ie的话，你可以尝尝ietester）
然后继续完美html的结构，现在轮到侧边栏了。我们来看看如何在一个容器里面用两个背景图片实现滑动门效果来让侧边栏的大小随内容来控制。
接下来是在这个框架上匆匆饱满起来，用一个容器来搞定文章宣布区，就像我们前面说的一样，这个地方我们不必图片只需要用代码就能搞定。
文章部分在概念设计稿上是跟侧边栏有一样的边线效果，但是因为他们没有覆盖在其他的图片上并且也没有复杂的透明度等问题，所以我们将会用纯洁的css代码来实现他的效果。
当然如果每行代码都具体地说明得话，我估量我没写完各位看官就已经困倒了，所以施展触类旁通地精力就看上面得源文件吧！
这个长的可以主动伸缩的部分导出的时候要留神包括边线的透明效果。
网站名字用H1的标签来节制，他也是logo的基本，上部导航和rss /电子邮件订阅选项是作为无序列表。
--> [
网站建设之]PSD模板切用photo切图为XHTML+CSS的网页
Tag：CSS XHTML CSS ,
photoshop转手绘头发教程; XHTML
咱们将内容和背景放到一个含有ID的div的容器里面。不外要记得我们有一个浅色的背景在最后面须要垂直重复的说，直到CSS3才更普遍的支撑第二个div在这个图像之上。
下面我们先看看本来模版是什么样子,Perl、PHP、ASP、JSP技术比较，如下图：
大体效果就这么搞定了，设计稿的内容基本上也都浮现出来了，这时候你可以换着浏览器和辨别率来看看有没有问题以及模仿链接的效果比如鼠标on啊 鼠标点击过啊等等效果。
个别来讲容许网页垂直重复的话，只有抉择中部区域一小列内容导出就可以，我们后面可以让他垂直重复来到达设计稿上面的效果而不增添文件体积。
首先被导出的元素是大的背景图。暗藏掉其余所有页面的图层，然后取舍大的背景图导出为web使用格式。
下图为背景图片
文章发布区的边线和颜色以及文章题目和段落文字都继续用CSS的样式表写好（切实不行就照抄吧，?rz）。对网站开发来讲，大部分用 firefox的友人有福了，这象征着我们可以用moz-border-radius这句话来让我们的页面有一个很美丽的圆角就跟我们当初的设计稿一样。不过对于其他浏览器来讲我们只能降级让其实现为一个直角鸟。（不过貌似我记得IE下面也可以用css写出来圆角的说，就是比较麻烦，这里给一个参考来）
接下来就可以在浏览器里面看到侧边栏鸟～注意别让内容超过了图片的宽度，及时的截断下看看效果就好啦（究竟只是html的～）
记下来我们疾速的搞定继续阅读和评论等这个地位的东东
到目前来讲就能够在阅读器里面看看啦～基础上的大型已经出来啦～logo啊导航啊内容区啊根本上已经颇具雏形鸟。
而后在浏览器里面测试下啦～假如没写错的话那么就跟设计稿上的后果是一样的～这阐明CSS彪悍的将ps设计稿里面背景色彩跟边框的效果给实现了。
接下来导出的是主体内容区，画出另一个大的选区,padding和margin到底要用哪一个？，其主要包括全部中部面板——当然别忘却那些带有效果的地方好比暗影，半透明的边框等，都要逐一包含在内。注意还要斟酌到头部庞杂的透明度的导航区域，所以选取应当直接延长到顶部。
一个html网页设置掌握构造的布局是必需的，上面那段话你没必要本人写，随意查看一个网页的源文件都能找到。一个单独的css样式表是将包含视觉规矩的设计。然后让html文件链接到这个新建的css样式表文件。
改完这些问题后这个正在做的网站就恢复畸形勒，像一个wordpress主题鸟,overflow解决float浮动后高度自适应问题，当然想要更多的货色必须在参加更多的代码，比如内页区域和评论区域等～
接下来开端用CSS从新构建页面，肃清浏览器的默认设置。背景图像是从属于body和全局字体风格的设置。容器，内容和页脚的div也要使用恰当的背景图片和作风设置。
下面来实现页脚部分,net页面之间传递值的方法，挑选同样的宽度，然后高度要包含灰色渐变的图形。
订阅的选项仿佛老是在IE下面会有问题，这个只要要简略地加上 display: inline在列表中就能解决。
为了导出侧边栏，主体区域现在临时的使用垂直拉伸。
从第一印象上来讲，这个大图片很轻易让人感到他很大，所以体积会变的很大,MUX的设计师项目分享 百度搜索客户端。然而事实上用jpg格式调剂好质量质量之后这个文件仅仅才30K罢了，这里需要你来拿捏文件的品质和整体的体积的均衡。（译者注：图片如果太大可以适当用高斯含混来减少细节这样图片体积就会缩小点，普通来讲背景图不用使用特殊清楚的底图,min-height和height，增长体积却又吸引眼球影响阅读。）
搞定后又可以用浏览器YY下，反复的背景上面是坚实的文本啊！
由于之前的设计，所以这个独立的侧边栏的图形将充足应用两个图片——上部是足够长的区域，以便包容更多的内容避免超越设计的部门，另一个是一个小的底部，底部宽度要与上部一致。这是一个相似用于菜单的滑动门的技巧。
接下来就是应用了蓝色渐变的内容区（也就是放留言数继续阅读等的区域）,Loading反馈在实际设计中不容忽视，这个处所也是导出一个瘦长的区域然后横向重复就能达到其效果,lighttpd配置HTTPS(SSL)。
持续增加更多的CSS款式来把持html里面的元素（可怜的html沦落为css的傀儡…………我翻译累了纯属发泄这个……）比方字体的大小，颜色，品种等等（实在CSS也就这么些个本领了……）
当初概念设定已经完全的被分成了独破的图片，五局部的框架被拆分成了13个图片文件。他们一共才95Kb，这么来看即便是拨号网络也能比拟流利的观看网页了。
继续给这些元素增添样式，用一个特别的class来给这个段落添加用继承浏览的肩头和评论气泡作为背景图
另一个导出的小的可自动伸缩部分的是导航栏的背景，它可以依据菜单文字的长度来自动伸缩。这里需要使用png的文件因为可以利用其透明度来笼罩住不同颜色的背景，这样看起来会更~协调~~~~
修正一些CSS样式表很快就能搞定这个问题，详细的参见上图。
继续写CSS样式表，接下来的一些元素用代码写出来缓缓加上，树立一个无序列表然后加上适合的图片和颜色。
下一步是薄的底部部分，这样侧边栏部分就完成鸟。
(责任编辑：网站建设)
PSD模板切用photo切图为XHTML+CSS的网页相关文章