网络学堂

当前位置:首页 > 网络学堂 > 网站优化

网页设计怎样制作模板

发布时间:2014-07-31         阅览次数:1255 次  
如果想让站点保持统一的风格或者站点中多个文档包含相同的内容。----对其进行编辑,未免过于麻烦,中文版Dreamweaver 8提供的模板功能可以很方便地帮助用户解决这些难题。
模板由两部分组成:锁定区域和可编辑区域。对于刚创建的模板,所有的区域都是锁定的,在定义模板时,可以在模板文件中定义可编辑的区域。套用该模板的页面,只有可编辑区域是可以被改变的区域。
实践证明,用模板对于网页制作者来说省了很多的麻烦,也可以节约很多时间,同时也能减少连接上的错误。
一、新建模板 
在新建模板前,我劝你还是要对你的网站要在纸上画一个草图,再根据你的图纸来定你的模板,我简单画了一个,供参考,样式是你自己设置的,我在这里只是举个例子。如图 14 
 
网站草图 
打开 Dreamweaver 8后,可以通过“窗口”下面的“资源”面板创建新的模板。快捷键是F11。
 
图15 打开资源,新建模板文档 
这时你双击才命名的muban文件,便在DW里显示一个空白的文件。当你新建一个模板文档时,Dreamweaver 8 将会在你的站点根目录下自动生成一个Templates文件夹,该文件夹专门用于放置模板文档。如图 16 
 
模板专用文件夹
下一步就是在这个空白的文档中建模板了。(这个空白文档和你做网页一样的)
当然也可以用别的方法来创建模板,如通过“插入”面板或者菜单选项可以完成模板文档的创建,新建模板与创建模板略有不同。创建模板的操作方法哪下: 
 
(1)选择“窗口”面板|“插入”菜单选项,打开“插入”面板。 
(2)在“插入”面板中选择“模板对象”向右点“创建模板”。
也可以在一般页面中象平时做网页一样,把页面做好,然后点左上“文件”“另存为模板”等。在这里我就 
不一一说了,你肯定能在实践中摸索出来的。
言规正传,下面我们开始在刚才打开的muban文件中建模板啦。 
第一步:设置页面属性
(1)选择菜单“修改”向下单击“页面属性”,如图17。在弹出的对话框里设置字体和边距。 Dreamweaver 
8默认设置网页都留有间隙,不怎么好看,所以要全部设置为“0”再选择“链接”根据自己的喜好设置下划线和链接的颜色。
 
打开页面属性 
 
设置字体和边距
 
设置下划线和链接颜色,然后点“确定”。
(2)选择菜单“编辑”向下单击“首选参数”,如图 20 在弹出的对话框里将“允许多个连续的空格”打上
钩,否则你在Dreamweaver 8按空格键它是不动的,呵呵,没有象在Word里那么顺手。如图 21 
 
选择“首选参数” 
在允许多个连续的空格前打上钩,然后点“确定”。 
第二步:使用表格布局网页。
当然也可以用层。表格是网页布局设计的常用工具,它可以使插入页面中的图像和文本等对象被限定在某一固
定位置。相对于没有使用表格的页面,使用表格的页面显得更加整齐有序。
(1)绘制表格 
将光标置于需要插入表格的位置,然后选择菜单“插入”,向下单击“表格”,如在弹出的对话框里
根据以上草图确定行和列的数字。 
 
选择表格
 
 
设置表格行和列,然后点“确定”,在这里我们都设置为1。
注:宽度通常设置在780以内,这可以在800X600、1024X768两种分辨率情况下使你的的网页不变样,如果过大
超过800,那么使用800X600分辨率的电脑看你的网页就会出现下滑块。
(2)设置表格属性 
在“对齐”处选“居中”,在“填充”、“间距”、“边框”处全部设置为“0”。
 
设置表格属性
(3)拷贝和粘贴单元格 
将鼠标左键对着单元格边框点一下,然后再点右键,选“拷贝”,再将鼠标对着表格下面点右键,选“粘贴”五次。 
  
拷贝和粘贴表格
这样做的目的是为了打散表格,能提高打开网页速度。当然也可以用一个整体的表格。 
(4)设置单元格属性 
表格第一行:我们将用来放置FLASH动画,或者图片。尺寸在780X100,宽度已定下来了,现在确定它的高度 将鼠标对着第一行点一下,然后在下面表格属性里“高”打上“100”按一下回车,要注意所有表格属性栏下面的标题前面有小钩要去掉,如果不去掉,你打出来的字特粗。 
表格第二、第三行,是用来放置栏目的,一般高度设置“20”方法同第一行。
表格第四行是主要编辑区,我们暂时设置高为为“200”。再提醒一句,“标题”前面的小钩一定要去掉哟~~
表格第五行是放页脚的,一般高在60以内。 设置方法同上。 
到此,插入表格和设置表格属性完成了。 
第三步:制作页眉
插入FLASH动画 :鼠标在第一行点一下,然后选择菜单“插入”指向“媒体”向右单击“FLASH”在弹出的对话框里找到你制作的FLASH然后点“确定”。
  • 点击这里给我发消息  网站客服在线   438711198
  • 感谢大家对我们的支持与厚爱,为了能及时的回复,请在9:00-18:00点咨询在线QQ