模板.

Presentation on theme: "模板."— Presentation transcript:

1 模板

2 模板 模板是将网页布局和内容分离，在布局好之后将其存储为模板，这样相同布局的页面可以通过模板创建。使用模板的优点主要有：
1. 通常在一个网站中会有大量风格和内容基本相似的页面，使用模板快速生成这些页面是很好的选择，并且整个网站中的页面能够轻易做到统一的外观及结构。 2. 使用模板对维护网站更容易，可以在短时间内对大量的网页做出修改。

3 模板的三大区域 可编辑区域：用于放置各个页面之间的相异的内容区域。 可选区域：用于控制区域在基于模板所创建的页面中是否可见。
重复区域：根据需要该区域在基于模板的页面中复制任意次数。

4 利用模板生成网页的制作步骤 第一步：从photoshop中导出网页，如test.html；
第二步：在Dreamweaver中将test.html制作成模板test.dwt； 第三步：以test.dwt为基础创建网页。

5 前一实例模版制作 将上次课的实例用模版来生成 制作步骤： －－建立网站 －－将new.html另存为模版
－－运用模版生成其他页面如product.html

6 模版简单综合实例 在photoshop中切割并生成网页 该图片模板为典型的水平布局，因此切割可以分两级进行。
－－一级切割为整体框架切割，将要放入内容的部分切割成一块，其中导航条部分为单独的一个图片块。 －－二级切割，主要是针对导航条进行的切割。为翻转图做好准备。

7 将两极切割发布的网页整合 使用不同的命名发布之后，生成的图片将不会出现重复命名，方便图片整合。
将导航表格在插入到main.html页面中，之后进行表格宽和高的固定。最后将导航条制作成翻转图的形式。 建立网站并另存为模板，设定可编辑区。

8 在模板网页 可编辑区域 可编辑区域

9 运用网页模板生成其他页面 图片插入前一定要确认大小，以便有足够的空间放入。

10 附加要点：“重复区”设立 在实现重复区的设置时,如果你在设置之前选中的是行(<tr>),则实现的是竖着添加

11 如果在设置之前选中的是列(<td>),则实现的是横着添加.

12 如果在设置之前选中的是整个表格(<table>),则实现的是竖着添加且间隔比较大 。

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

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

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

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

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

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

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

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

21 切割小结 使用这种切割的方法可以避免图片松散，为在dreamweaver中的排版提供比较好的便利。