综合实例制作
综合实例制作 制作步骤: --在photoshop中对网页进行网页图片模板排版 --在dreameaver中对发布的网页作整合处理 --在dreamweaver中建立网站,并制作网页模板 --在dreamweaver中利用模板制作网页
1.Photoshop对页面进行排版 注意事项: --要求设计的页面图片与实际在网页中播放的页面同样大小。 --在布局时需要考虑多次切割所带来的问题 --颜色的使用必须满足网页颜色的要求。
分析已经设计好的一个页面
页面分析 该页面属于国字型布局的方法,因此在切割时要求首先将中间显示部分单独切出,这样相当于已经排版好了dreaweaver中的外框架。 再单独对中间切出的内容部分进行二级切割。可以将导航再单独切出,下面作为展示主要内容部分。 最后在针对细节部分进行三级切割。
页面切割方法 通常为了让切割的图片不要太过于松散,可以分几次来切割。也就是分一级切割和二级切割。 一级切割:大的网页布局,主要是针对表格的总体布局。大的统一色块尽量切成一张图片上,同一功能的图片也尽量不要分开。 二级切割:一般是针对导航和内容布局页面来切割。 三级切割:主要是针对细节进行切割(主要为了配合具体素材制作:flash按钮,背景图片等等)
对设计好的页面进行一级切割
对中间内容页面进行二级切割 导 航 条
细节部分的三级切割 导航条切割:主要根据每个导航的具体大小来进行切割。 内容模块切割:根据内容的布局来切割
切割小结 使用这种切割的方法可以避免图片松散,为在dreamweaver中的排版提供比较好的便利。 小技巧:在完成一级切割并排版之后,对于要进行的二级页面切割,为了避免一些大小的不合适,可以首先将二级切割页面宽和高都缩小1个像素。
2.将一级切割后的页面发布成网页,并在dreamweaver中进行整合 其中将外框表格固定好长和宽(以便后面制作中表格排版错开),再将中间的内容部分的图片删除,这样方便将二级切割的表格页面放入。
将二级切割的页面发布成网页,与前一级切割发布成网页的页面进行整合 将二级切割的页面发布成的网页命名为body(与一级切割后的名字不同)。 在将两个页面放在同一个文件夹当中,两边的images文件夹重合(由于两次的命名不同因此不会出现重命名) 在dreamweaver中将两个页面整合到一起(整合前一定要固定表格的长和宽),空出内容表格,设置其背景。
导航条切割后再发布成网页,放入一级切割页面中 导航条翻转图的制作,要求同一个按钮要翻转的图片大小必须是一样的大小。制作时只要使用同一个切割页面发布成网页时,使用不同的名字即可实现。
3.在dreamweaver中制作网页模板 首先在dreamweaver中建立站点。 确定“可选择区”、“可编辑区”、“重复区” 注意:“重复区”的设定需要根据需要而定。如果你在设置之前选中的是行(<tr>),则实现的是竖着添加 。如果在设置之前选中的是列(<td>),则实现的是横着添加 。如果在设置之前选中的是整个表格(<table>),则实现的是竖着添加且间隔比较大.
可编辑区域 可选区域 重复区域
4.运用模板完成其他页面的排版 注意事项: --图片在加载到页面时,需要确认表格空间的大小,以免出现撑开。一般需要留有1-2个像素的空间。 --对于可选区的选择根据页面的具体情况而定。隐藏时的操作:修改->模板属性 --超级链接的设置可以在网页模板中作统一设定。