[原创]如何用DW和FW制作网页(初步入门)教程
时间:2005-04-12
来源:互联网
//BK设计 blue1000 原创
//http://www.blue1000.com/ 转载请注明出处,谢谢~
1.用fw做一个页面的蓝图,大小尺寸及颜色都按照未来页面实际情况来。这样做的好处就是可以加强页面的整体感。
2.用fw的切片工具切图。
注意:1>切图前先大致构思好未来网页的布局、表格、框架等。
2>图片尽可能的小,对于大面积且有重叠规律的图片,只取其重叠方向的一个像素宽的图片,用来做页面局部背景的图片,这样利用背景的重叠性就可以实现蓝图中的效果并且很大程度上减小了页面的体积。
3>诸多切片的边界尽可能多的处于同一横坐标或纵坐标上。
3.导出切片(鼠标放在切片上右键“导出所选切片”),并命名(简单易记易懂的名字可以使你后来的工作事半功倍)。
图片的格式在文件>>>导出预览面板里设置,按照 gif(128),gif(256),jpg的先后顺序,导出格式首先考虑前面的,在满足不了颜色质量要求的情况下再考虑后面的导出格式。
4.用dw创建新页面。页面的顶间距(top margin)和左间距(left-margin)一般都设为0,但顶间距(top margin)也可以不是0,视你的设计要求而定.
5.按照页面整体的布局,用DW插入表格
居中,一般宽度为775(考虑到800*600像素显示器下无横向滚动条),但也没有定论。这里我选择了230,因为我要做的是BK设计的QQ迷你门户。只考虑宽度,先不用考虑表格高度,因为以后插入的图片和表格会将高度撑起来
6.按照布局的需要可以在整体表格里嵌套表格以达到精确布局。插入图片及背景图片。
插入背景图片的时候要注意控制好背景所属单元格的高度和宽度,因为背景撑不起表格所以需要手工设置td的宽度width和高度height的值
另外两个小技巧:
1〉设置高度小于5像素的单元格td时,DW无法从设计模式下实现。实现的方法:先在属性面板里将高度height的值设置为你要的高度值,接着用鼠标单击该单元格内部,然后将界面切换到代码模式下,此时在闪动的光标附近你将会看到" "的代码,
删掉它,最后切换回设计模式下你发现了什么呢?呵呵~
2〉DW创建的表格如果设置边框bordor的值为1的话,你会发现它并不美观。如何实现美观纤细的细线表格?这个问题是个老问题了,请参考:http://www.blue1000.com/n4783c2.shtml
7.这样的话,网页就基本作成了,然后添加进去文字内容及你需要的特效,字体的大小和样式可以在选择上文字之后属性面板里修改
8.大功告成,文件保存为.htm或者其他格式的网页。
//http://www.blue1000.com/ 转载请注明出处,谢谢~
1.用fw做一个页面的蓝图,大小尺寸及颜色都按照未来页面实际情况来。这样做的好处就是可以加强页面的整体感。
2.用fw的切片工具切图。
注意:1>切图前先大致构思好未来网页的布局、表格、框架等。
2>图片尽可能的小,对于大面积且有重叠规律的图片,只取其重叠方向的一个像素宽的图片,用来做页面局部背景的图片,这样利用背景的重叠性就可以实现蓝图中的效果并且很大程度上减小了页面的体积。
3>诸多切片的边界尽可能多的处于同一横坐标或纵坐标上。
3.导出切片(鼠标放在切片上右键“导出所选切片”),并命名(简单易记易懂的名字可以使你后来的工作事半功倍)。
图片的格式在文件>>>导出预览面板里设置,按照 gif(128),gif(256),jpg的先后顺序,导出格式首先考虑前面的,在满足不了颜色质量要求的情况下再考虑后面的导出格式。
4.用dw创建新页面。页面的顶间距(top margin)和左间距(left-margin)一般都设为0,但顶间距(top margin)也可以不是0,视你的设计要求而定.
5.按照页面整体的布局,用DW插入表格
居中,一般宽度为775(考虑到800*600像素显示器下无横向滚动条),但也没有定论。这里我选择了230,因为我要做的是BK设计的QQ迷你门户。只考虑宽度,先不用考虑表格高度,因为以后插入的图片和表格会将高度撑起来
6.按照布局的需要可以在整体表格里嵌套表格以达到精确布局。插入图片及背景图片。
插入背景图片的时候要注意控制好背景所属单元格的高度和宽度,因为背景撑不起表格所以需要手工设置td的宽度width和高度height的值
另外两个小技巧:
1〉设置高度小于5像素的单元格td时,DW无法从设计模式下实现。实现的方法:先在属性面板里将高度height的值设置为你要的高度值,接着用鼠标单击该单元格内部,然后将界面切换到代码模式下,此时在闪动的光标附近你将会看到" "的代码,
删掉它,最后切换回设计模式下你发现了什么呢?呵呵~
2〉DW创建的表格如果设置边框bordor的值为1的话,你会发现它并不美观。如何实现美观纤细的细线表格?这个问题是个老问题了,请参考:http://www.blue1000.com/n4783c2.shtml
7.这样的话,网页就基本作成了,然后添加进去文字内容及你需要的特效,字体的大小和样式可以在选择上文字之后属性面板里修改
8.大功告成,文件保存为.htm或者其他格式的网页。
作者: BKDesigner 发布时间: 2005-04-12
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28