综合实例制作.

Presentation on theme: "综合实例制作."— Presentation transcript:

1 综合实例制作

2 综合实例制作 制作步骤： －－在photoshop中对网页进行网页图片模板排版
－－在dreameaver中对发布的网页作整合处理 －－在dreamweaver中建立网站，并制作网页模板 －－在dreamweaver中利用模板制作网页

3 1.Photoshop对页面进行排版 注意事项： －－要求设计的页面图片与实际在网页中播放的页面同样大小。
－－在布局时需要考虑多次切割所带来的问题 －－颜色的使用必须满足网页颜色的要求。

4 分析已经设计好的一个页面

5 页面分析 该页面属于国字型布局的方法，因此在切割时要求首先将中间显示部分单独切出，这样相当于已经排版好了dreaweaver中的外框架。
再单独对中间切出的内容部分进行二级切割。可以将导航再单独切出，下面作为展示主要内容部分。 最后在针对细节部分进行三级切割。

6 页面切割方法 通常为了让切割的图片不要太过于松散，可以分几次来切割。也就是分一级切割和二级切割。
一级切割：大的网页布局，主要是针对表格的总体布局。大的统一色块尽量切成一张图片上，同一功能的图片也尽量不要分开。 二级切割：一般是针对导航和内容布局页面来切割。 三级切割：主要是针对细节进行切割（主要为了配合具体素材制作：flash按钮，背景图片等等）

7 对设计好的页面进行一级切割

8 对中间内容页面进行二级切割 导 航 条

9 细节部分的三级切割 导航条切割:主要根据每个导航的具体大小来进行切割。 内容模块切割：根据内容的布局来切割

10 切割小结 使用这种切割的方法可以避免图片松散，为在dreamweaver中的排版提供比较好的便利。
小技巧：在完成一级切割并排版之后，对于要进行的二级页面切割，为了避免一些大小的不合适，可以首先将二级切割页面宽和高都缩小1个像素。

11 2.将一级切割后的页面发布成网页，并在dreamweaver中进行整合
其中将外框表格固定好长和宽（以便后面制作中表格排版错开），再将中间的内容部分的图片删除，这样方便将二级切割的表格页面放入。

12 将二级切割的页面发布成网页，与前一级切割发布成网页的页面进行整合
将二级切割的页面发布成的网页命名为body（与一级切割后的名字不同）。 在将两个页面放在同一个文件夹当中，两边的images文件夹重合（由于两次的命名不同因此不会出现重命名） 在dreamweaver中将两个页面整合到一起（整合前一定要固定表格的长和宽），空出内容表格，设置其背景。

13

14 导航条切割后再发布成网页，放入一级切割页面中
导航条翻转图的制作，要求同一个按钮要翻转的图片大小必须是一样的大小。制作时只要使用同一个切割页面发布成网页时，使用不同的名字即可实现。

15 3.在dreamweaver中制作网页模板 首先在dreamweaver中建立站点。 确定“可选择区”、“可编辑区”、“重复区”
注意：“重复区”的设定需要根据需要而定。如果你在设置之前选中的是行(<tr>),则实现的是竖着添加 。如果在设置之前选中的是列(<td>),则实现的是横着添加 。如果在设置之前选中的是整个表格(<table>),则实现的是竖着添加且间隔比较大.

16 可编辑区域 可选区域 重复区域

17 4.运用模板完成其他页面的排版 注意事项： －－图片在加载到页面时，需要确认表格空间的大小，以免出现撑开。一般需要留有1-2个像素的空间。
－－对于可选区的选择根据页面的具体情况而定。隐藏时的操作：修改－>模板属性 －－超级链接的设置可以在网页模板中作统一设定。