模板
模板 模板是将网页布局和内容分离,在布局好之后将其存储为模板,这样相同布局的页面可以通过模板创建。使用模板的优点主要有: 1. 通常在一个网站中会有大量风格和内容基本相似的页面,使用模板快速生成这些页面是很好的选择,并且整个网站中的页面能够轻易做到统一的外观及结构。 2. 使用模板对维护网站更容易,可以在短时间内对大量的网页做出修改。
模板的三大区域 可编辑区域:用于放置各个页面之间的相异的内容区域。 可选区域:用于控制区域在基于模板所创建的页面中是否可见。 重复区域:根据需要该区域在基于模板的页面中复制任意次数。
利用模板生成网页的制作步骤 第一步:从photoshop中导出网页,如test.html; 第二步:在Dreamweaver中将test.html制作成模板test.dwt; 第三步:以test.dwt为基础创建网页。
前一实例模版制作 将上次课的实例用模版来生成 制作步骤: --建立网站 --将new.html另存为模版 --运用模版生成其他页面如product.html
模版简单综合实例 在photoshop中切割并生成网页 该图片模板为典型的水平布局,因此切割可以分两级进行。 --一级切割为整体框架切割,将要放入内容的部分切割成一块,其中导航条部分为单独的一个图片块。 --二级切割,主要是针对导航条进行的切割。为翻转图做好准备。
将两极切割发布的网页整合 使用不同的命名发布之后,生成的图片将不会出现重复命名,方便图片整合。 将导航表格在插入到main.html页面中,之后进行表格宽和高的固定。最后将导航条制作成翻转图的形式。 建立网站并另存为模板,设定可编辑区。
在模板网页 可编辑区域 可编辑区域
运用网页模板生成其他页面 图片插入前一定要确认大小,以便有足够的空间放入。
附加要点:“重复区”设立 在实现重复区的设置时,如果你在设置之前选中的是行(<tr>),则实现的是竖着添加
如果在设置之前选中的是列(<td>),则实现的是横着添加.
如果在设置之前选中的是整个表格(<table>),则实现的是竖着添加且间隔比较大 。
综合实例练习制作 制作步骤: --在photoshop中对网页进行网页图片模板排版 --在dreameaver中对发布的网页作整合处理 --在dreamweaver中建立网站,并制作网页模板 --在dreamweaver中利用模板制作网页
Photoshop对页面进行排版 注意事项: --要求设计的页面图片与实际在网页中播放的页面同样大小。 --在布局时需要考虑多次切割所带来的问题 --颜色的使用必须满足网页颜色的要求。
分析已经设计好的一个页面
页面分析 该页面属于国字型布局的方法,因此在切割时要求首先将中间显示部分单独切出,这样相当于已经排版好了dreaweaver中的外框架。 再单独对中间切出的内容部分进行二级切割。可以将导航再单独切出,下面作为展示主要内容部分。 最后在针对细节部分进行三级切割。
页面切割方法 通常为了让切割的图片不要太过于松散,可以分几次来切割。也就是分一级切割和二级切割。 一级切割:大的网页布局,主要是针对表格的总体布局。大的统一色块尽量切成一张图片上,同一功能的图片也尽量不要分开。 二级切割:一般是针对导航和内容布局页面来切割。 三级切割:主要是针对细节进行切割(主要为了配合具体素材制作:flash按钮,背景图片等等)
对设计好的页面进行一级切割
对中间内容页面进行二级切割 导 航 条
细节部分的三级切割 导航条切割:主要根据每个导航的具体大小来进行切割。 内容模块切割:根据内容的布局来切割
切割小结 使用这种切割的方法可以避免图片松散,为在dreamweaver中的排版提供比较好的便利。