|
|
1.psd文件分层， 背景的和前景图分开，前景的隐藏，先切背景，然后那些位置的背景是平铺的，那些需要做圆角，先考虑清楚，
比如，一个长条的渐变背景，切个条，然后以后在css里平铺就行了。
同理，圆角有3种方案，最复杂的是css做圆角，还有图片做一边的圆角，比如左边，或者上面，剩下2角用2个position为 relative的制作就行了。
主要前期要考虑好，那些为背景可以平铺，那些需要固定大小的背景， 能用css样式实现的就用css实现，除非设计稿需要，否则不要一大张图做背景。
2. 用ps的切片工具把每个需要的背景双击，起个名字。把不需要的图片双击取消生成切片图，用笔（或者其他东西）记下你切的这些大的分块的像素高宽（对用div做页面布局很重要）。
3. 导出保存在一个文件夹下。。
4.恢复切片前的psd,然后背景图隐藏，把一些前景图，切好保存。
5.用dreamweaver做整体页面布局，按照记下的布局像素大小，用div做页面的大体布局设计，给每个div起一个id,然后用css文件设置float,margin,padding(这些可以统一设置 div的css). 然后设置这些布局div的高宽，利用div的浮动属性来进行整体布局，然后在这些布局好的div块里，利用css把之前切好的背景图填入。 然后在大的布局块里嵌入div进行内部布局（当然可以用别的标签，我个人喜欢用 h1-h3,dl dt 等进行细分，当然display一定要设置为block,而且margin padding overflow,float等一定要设置好），注意，因为ie的高度计算问题，嵌入在div里的浮动布局div，后要加入个<div style="clear:both"></div> 的来让外围div重新计算高度)，然后在再这些内部布局块中用css填入切好的背景图。
5. 做好大体布局后，进行一些细节调整， 利用css 的position: absolute 或者 postion:relative 方式，把自己想要的一些内容布局在页面上。
6. 把前景用得一些图放入页面，比如logo什么的，还有一些文章内容用的图片，可以用img标签放入。。。
7. 这个切好的网页可以给技术人员了。。。。
【原创。。转载注明 author by wxysky】 |
评分
-
查看全部评分
|
发表于 2009-12-11 19:35:31
软。。。。。。软。。。。。。文 - -！