WEB PAGE DESIGN	您的位置：网站建设联盟-网页设计-网页模板设计

网页模板设计

网站框架页设计原则

1、结构的一致性：我们知道，网站的统一性在网站营销中占重要地位，而网站结构是网站风格统一的重要手段，包括网站布局、文字排版、装饰性元素出现的位置、导航的统一、图片的位置等等，到国外著名的电子商务网站浏览，你会发现这些网站结构惊奇的一致性，所不同的是色彩或内容，在结构的一致性中，我们要强调网站标志性元素的一致性，即网站或公司名称、网站或企业标志、导航及辅助导航的形式及位置、公司联系信息等，这种方式是目前网站普遍采用的结构，一方面减少设计、开发的工作量，同时更有利于以后的网站维护与更新。

2、色彩的一致性：方式是保持站点主体色彩的一致，只改变局部色块，优点是一个独特色彩的网站会给人留下很深刻的印象，因为人的视觉对色彩要比布局更敏感，更容易在大脑中形成记忆符号。在色彩的一致性中，我们强调的是如果企业有自身的CI形象，最好在互联网中沿袭这个形象，给观众网上网下一致的感觉，更有利于企业形象的树立。一个建议是选取一两种主要色彩，几种辅助色彩。

3、利用导航取得统一：导航是网站的一项重要组成部分，一个出色的富有企业特性的导航将会给人留下深刻的印象，比如将标志的形态寓于导航之中，或将导航设计在整个网站布局之中等等不一而足，花点力气在导航上，也会设计出一个出色的站点。

4、特别元素的一致性：在网站设计中，个别具有特色的元素（如标志、象征图形、局部设计等）重复出现，也会给访问者留下深刻印象。比如网站结构在某一点上的变化，由直线变为圆弧、暗色点缀的亮色、色彩中的补色等等。

5、利用图像取得统一： 网页中的图像在使用上一定要甚之又甚，尤其是一些动画，网页中充斥着各种可有可无的动画，而这些动画根本与本企业内容无关！认真检查网页中的动画，将没用的删掉！这里我们所说的利用图像取得统一，决不是在每页中放置几个动画！而是作为网站结构一部分的局部图像，根据网页内容的不同，配以相应的图像或动画，从而给浏览者形成页面的连续性。

6、利用背景取得统一：从技术上而言，网页背景包括背景色和背景图像两种，一般来说，我们并不提倡使用背景图像，而使用背景色或色块。原因很明显，第一，下载速度，背景色的下载速度忽略不计，而背景图像就得根据图像字节大小下载了，这里需要说明的是，如果你的背景图像比较深，那么最好将背景色置为深色调（默认的背景色是白色），这样在等待浏览器下载背景图片的时候前面的浅色文字可以很容易阅读，因为如果有背景色，浏览器先将其下载，然后下载背景图片；第二，显示效果，经常看到国内一些网站设有背景图像，或者是公司的厂房、办公大楼，或者是产品图片，甚至是某某人物的照片，使得前面的文字很难辨认！给人一种很不舒服的感觉，让人无法停留。在此，提醒您注意：有效利用背景取得网站统一和专业化的方法有以下几种：
第一，认识到并不是所有的图片都可以作为背景，在考虑设置网站背景图像的时请您注意；
第二，加强与前景的明暗对比，即要么淡化背景，隐隐约约可以看到即可，要么加深背景，而将前面的文字亮化。

    那么什么适合网页背景呢？一个好的建议是将公司的标志、象征性的简单图片作为背景，并将其淡化，使浏览者在阅读网站内容的同时不经意记下公司的标志。曾经一个网站的背景设计给我留下深刻的印象：单色背景中一个网站标志的居中放大淡化，前面元素中也不断重复这个标志：如提交按纽形状刻意设计成标志的形式等等，在整个页面中形成特有元素在大小、明暗及位置的呼应，很好地塑造了网站的特有形象。

利用Dreamweaver制作模板页

　　一、制作模板

　　制作模板和制作一个普通的页面完全相同，只是不需要把页面的所有部分都制作完成，仅仅需要制作出导航条、标题栏等各个页面的公有部分，而把中间区域用页面的具体内容来填充。

　　第一步:先在Dreamweaver中运行“File→New”命令，接着从图1所示的窗口中依次选定“Template page→HTML template”选项，点击“Create”按钮之后即可创建一个模板文件。

　　第二步:在页面设计视图下插入网页框架、导航条、Flash标题等所有页面公有的元素(图2)，然后运行“File→Save”命令将这个模板保存下来。

　　小提示:可以先下载一个中意的网页，然后在Dreamweaver中打开它，仅仅保留框架等元素之后通过“File→Save as Template”命令将其保存为模板，这样能够省去很多制作模板的时间。

　　为了避免编辑时候误操作而导致模板中的元素变化，模板中的内容默认为不可编辑，只有把某个区域或者某段文本设置为可编辑状态之后，在由该模板创建的文档中才可以改变这个区域。先用鼠标选取某个区域(也就是每个页面不同内容的区域)，接着运行“Modify→Templates→New Editable Region”命令，并且在弹出的对话框中为这个区域设定一个名称，这样就完成了编辑区域的设置。

　　小提示:设定好编辑区域之后需要运行“File→Save”命令保存所做的修改。

　　二、使用模板

　　有了模板之后，接下来就要在编辑网页时候使用它们了。只要在Dreamweaver主窗口中运行“File→New”命令即可看见图1所示的新建窗口，接着进入“Templates”标签即可查看到已经保存的模板，从中选取一种还可以在右部的预览区进行预览(图3)，最后挑选一款中意的模板并点击下部“Create”按钮打开这个模板。

　　在打开的模板中，无法编辑的区域将呈高亮状态显示，但是有些位置是锁定区域，却不是高亮显示，这主要是因为图片正好盖住了背景的颜色。对于这种情况，可以运行“Edit→Preferences”命令，在弹出窗口的“Category”列表中选取“Highlighting”一项，接着在右部区域中选取“Locked regions”旁边的“Show”选项(图4)，并且设定高亮显示色为蓝色，这样就可以很清楚地分辨出模板中的锁定区域了。

　　小提示:如果仍然看不见高亮显示效果，还可以依次选中“View→Visual Aids→Invisible Elements”命令。

　　最后，我们只要在可编辑区域添加网页的内容就可以了，比如添加一些文字说明或者是插入相应的图片，最后通过“File→Save”命令保存页面即可。

　　三、修改和更换模板

　　在通过模板创建了若干个页面之后，如果需要更改页面或者增加栏目，再对所有的页面手工修改则非常麻烦，因此我们可以通过Dreamweaver的模板修改功能来解决这个问题。比如我们对模板进行了修改之后，运行“File→Save”命令来保存模板，这时候会弹出提示框询问是否更新所有使用了该模板的页面(图5)，确认之后就会显示出更新的页面总数以及更新的时间等信息。

　　另外，Dreamweaver MX 2004还提供了一个为网页更换模板的功能，这样更换模板有点像给人换衣服，只要把各种模板制作好，然后想穿哪件就穿哪件。不过模板也不是随便可以更换的，可以更换模板的条件是被更换的页面必须是通过模板创建的，而且页面中的可编辑区域个数和名称必须与要更换模板的可编辑区域个数和名称相一致。比如一个网页中有3个可编辑区域，名称分别为t1、t2、t3。另外还有一个模板，无论这个模板什么结构，只要它也有3个可编辑区域，并且名称也是t1、t2和t3，那么就可以用它来为原先的网页更换新模板，而页面中3个可编辑区域的内容则相应保持不变。具体的更换模板方法也很简单，只要运行“Windows→Templates”命令打开模板面板，此时可以从上部区域挑选合适的模板，然后点击“Apply To Page”按钮，这样就可以很快完成模板更换操作了。

　　小提示:利用这个功能可以为网站首页分别制作夏天和冬天两个版本，这样可以非常方便地更换模板。

　　其实模板的相关内容还很多，不过限于篇幅只能选取部分介绍，希望大家能够举一反三，彻底领会到模板的精妙所在