Dreamweaver MX中文版建站攻略

在布局视图中设置对象属性（一）
* Q+ \, @/ `& K: F<BR>在布局视图中可以设置各种对象的属性，本篇的主要内容是了解各种设置的作用。<BR>1　给图像描边<BR>作用：增加图片的美观。<BR>简明步骤：选中一个图像，边框设置为1，就给图像加了一个像素的边框。选中页面中的一个图像。<BR><IMG height=110 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image001.jpg" width=141> <BR>在属性面板"边框"中填1。<BR><IMG height=93 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image002.jpg" width=326> <BR>经过描边后的图像在浏览器中显示如下图。<BR><IMG height=135 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image003.jpg" width=166> <BR>2　设置图文混排<BR>图文混排的作用：当没有设置图文混排，页面看起来很不美观。要使图像和文字在一起美观，必须设置好图文混排。<BR>简明步骤：选中图片，在属性面板中设置对齐方式为左对齐或者右对齐。<BR>采用默认设置时的图片和文字：<BR><IMG height=138 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image004.jpg" width=352><BR>选中图片，在属性面板中选择对齐方式为"左对齐"。<BR><IMG height=154 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image005.jpg" width=300> <BR>图文混排的结果：<BR><IMG height=108 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image006.jpg" width=383> <BR>3　给图片增加提示<BR>作用：使用浏览者知道所选择项目的内容。<BR>简明步骤：选中一个图片，在属性面板的替代下拉栏，输入提示文字。<BR>选中一个图片。<BR><IMG height=87 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image007.jpg" width=122> <BR>在属性面板的替代下拉栏，输入提示文字。 <BR><IMG height=102 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image008.jpg" width=387> <BR>在浏览器中，当指向这个图片时，就会出现文字提示。<BR><IMG height=130 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image009.jpg" width=254> <BR>4　创建图像地图<BR>作用：当点击一个图像的不同部分，可以链接到一个新的网页。也可以在当前窗口打开。<BR>简明步骤：选中目标图片→选择属性面板中的热点工具→用热工具在图片中画出热点区域→在属性面板中输入链接地址，选择目标窗口打开方式。<BR>选中目标图片，选择属性面板中的矩形热点工具。<BR><IMG height=228 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image010.jpg" width=234><BR>用热工具在图片中画出热点区域。<BR><IMG height=192 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image011.jpg" width=270> <BR>在属性面板中输入链接地址，选择目标窗口打开方式。<BR><A href="http://www.5dmedia.com/5dmedia/conimages/web/2003-03/mvyp-10-1-image012.jpg" target="_blank" ><IMG border=0 height=98 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image012.jpg" width=407></A> <BR>5　设置图像边距<BR>作用：设置图像边距，可以使图像和表格边框产生一个边距，也会和相邻的文字或者其它图片产生一个边距。有时候设置边距为一个非0的数值可以起到美观的作用。但是有的时候输入数值为0的边距可以使用页面紧凑。<BR>简明步骤：选中一个图片，在属性面板中，给垂直边距和水平边距输入数值。<BR>没有设置边距的图片：<BR><IMG height=204 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image013.jpg" width=200> <BR>输入了垂直边距和水平边距的效果，明显和表格边框有距离。<BR><IMG height=196 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-10-1-image014.jpg" width=238> <BR><BR>
  h  L4 \& ^4 L5 i! h

1 给单元格设置颜色<BR>简明步骤：选中单元格，在属性面板中，选择一种背景颜色。<BR>把鼠标放在单元格内，出现红色边框时，单击，就可以选中单元格了。<BR><IMG height=170 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-11-1-image001.jpg" width=215> <BR>在属性面板中，选择一种背景颜色。<BR><A href="http://www.5dmedia.com/5dmedia/conimages/web/2003-03/mvyp-11-1-image002.jpg" target="_blank" ><IMG border=0 height=99 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-11-1-image002.jpg" width=537></A><BR>设置了背景颜色的单元格：<BR><A href="http://www.5dmedia.com/5dmedia/conimages/web/2003-03/mvyp-11-1-image003.jpg" target="_blank" ><IMG border=0 height=286 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-11-1-image003.jpg" width=583></A><BR>2 设置单元格的对齐方式<BR>作用：可以使单元格里的内容，从不同的地方开始。在“垂直”下拉栏选择顶端，输入的文字可以从最上面一行开始；选择中间，文字就开始从中间开始。在“水平”下拉栏，选择“左对齐”，文字和单元格左对齐；选择“右对齐”，文字和单元格右对齐。<BR>简明步骤：选中一个单元格，在属性面板中的“水平”，“垂直”下拉栏选择一个参数。<BR>在属性面板中的垂直选项栏选择“中间”，输入的文字从单元格中间开始。<BR><IMG height=289 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-11-1-image004.jpg" width=230><BR>在属性面板中的垂直选项栏选择“顶端”，输入的文字从单元格顶端开始。输入文字常选择这种方式。<BR><IMG height=309 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-11-1-image005.jpg" width=431><BR>在属性面板中选择水平对齐方式为右对齐：<BR><IMG height=240 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-11-1-image006.jpg" width=371><BR>在属性面板中，如果不想文字换行，不要选中“不换行”。这种方式可以保持其它表格不变形。<BR><IMG height=238 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-11-1-image007.jpg" width=401><BR>如果选中“不换行”，文字会沿一行扩张，其它表格也被挤压变形。<BR><IMG height=252 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-11-1-image008.jpg" width=420><BR>设置列为自动伸展的作用：自动伸展列可以随着浏览器调整大小。<BR>选择自动伸展后的效果如下图。<BR><A href="http://www.5dmedia.com/5dmedia/conimages/web/2003-03/mvyp-11-1-image009.jpg" target="_blank" ><IMG border=0 height=368 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-11-1-image009.jpg" width=589></A> <BR>选择固定的宽，输入数值可以改变单元格的高度。<BR><IMG height=289 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-11-1-image010.jpg" width=567>

9 j# h* C4 ]  v
4 _+ o& J/ E, [+ A/ W
+ o8 d8 F% A2 Y5 |# H0 ]       
- Z( X8 e) W2 J
3 m6 E' c. |7 r, k! [7 [

表格的使用<BR><BR><BR>虽然您能够在“布局”视图中调整绝大部分设计元素，但有一些改变却必须在“标准”视图中才能完成。本文主要内容是表格的使用。<BR>主要内容：<BR>（1） 理解单元格，表格，间距，填充，边框。<BR>（2）调整行和列的宽度、高度。<BR>（3）制作一象素表格。<BR>（4）拆分和合并单元格。<BR><b>第一部分：</b><BR>当单元格边距和单元格间距没有指定数值时，Netscape Navigator，Microsoft Internet Explorer和Dreamweaver都将以间距2，填充1的设置显示表格。<BR>填充：单元格内容和单元格边框之间的距离（单位：象素）。<BR>间距：单元格之间的距离（单位：象素）。<BR>插入一个表格，为了便于分析表格，这里单元格间距设置为10。<BR><IMG height=159 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image001.jpg" width=373> <BR>插入一个表格：<BR><IMG height=270 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image002.jpg" width=595><BR>◇单元格：在表格中点击以选定单元格，也可以在标签选择器里点击&lt;td&gt;标签以选择单元格。<BR><IMG height=270 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image003.jpg" width=595><BR>◇表格：在标签选择器里点击&lt;table&gt;标签以选择表格。<BR><IMG height=270 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image004.jpg" width=595><BR>◇一行：在标签选择器里点击&lt;td&gt;标签选择一行。本实例是以一个一行二列的表格为基础的。<BR><IMG height=270 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image005.jpg" width=595> <BR>◇一个“一行一列”的表格，至少有两个边框。设置边框为1边框颜色黑色的表格如下图。<BR><IMG height=367 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image006.jpg" width=594><BR>◇红色为表格边框，绿色为单元格边框。表格边框和单元格边框的颜色可以分别指定。<BR>间距：边框和边框之间的距离就是间距。<BR><IMG height=270 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image007.jpg" width=595><BR>为了便于观看填充的效果，在属性面板中，填充输入为30。<BR><A href="http://www.5dmedia.com/5dmedia/conimages/web/2003-03/mvyp-13-1-image008.jpg" target="_blank" ><IMG border=0 height=80 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image008.jpg" width=595></A> <BR>◇填充：单元格边框和内容之间的距离就是填充。<BR><IMG height=270 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image009.jpg" width=595><BR><b>第二部分：调整行和列的宽度</b><BR>◇鼠标放在一列的上面，出现向下的箭头时，单击，就可以选中一列。在属性面板中可以设置所选列的宽和高。<BR><IMG height=367 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image010.jpg" width=589> <BR>鼠标放在一行的左边，出现横向的箭头时，单击，就可以选中一行。在属性面板中可以设置所选行的宽和高。<BR><IMG height=364 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image011.jpg" width=595><BR><b>第三部分：制作一像素表格</b><BR>◇制作一像素的表格，实质上是设置间距的大小和颜色。实例为便于观看效果，把间距设置为10。单元格填充和边框设置为0。单元格填充和边框不输入数值效果类似。<BR><IMG height=159 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image012.jpg" width=373><BR>在单元格中点击，或者选中标签选择器中的&lt;td&gt;选中单元格。设置单元格的背景颜色为白色。<BR><IMG height=363 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image013.jpg" width=592><BR>选中表格，设置表格的背景颜色为黑色。一个10象素宽的表格就做好了。实际上是把间距的颜色设置成了黑色。<BR><IMG height=367 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image014.jpg" width=592><BR>把间距改成1。<BR><IMG height=365 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image015.jpg" width=592><BR>发布在浏览器中的效果。<BR><IMG height=271 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image016.jpg" width=373><BR><b>第四部分：拆分和合并单元格</b><BR>◇嵌套表是在表格中的一个表格。在一个单元格中，插入一个表格，就是嵌套表。<BR><IMG height=270 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image017.jpg" width=595> <BR>◇合并单元格：按Ctrl，点单元格，选中表格，在属性面板中点“合并所选单元格，使用跨度”。<BR><IMG height=369 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image018.jpg" width=590><BR>合并后的效果：<BR><IMG height=270 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image019.jpg" width=595><BR>拆分单元格：插入一个表格。<BR><IMG height=159 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image012.jpg" width=373> <BR><BR>◇在单元格中单击，选中单元格。点击属性面板中的“拆分单元格为行或列”，设置拆分方式。<BR><IMG height=367 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image020.jpg" width=591> <BR>拆分为二行一列的表格如下图。<BR><IMG height=270 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-13-1-image021.jpg" width=470><BR>

1 f2 g/ T$ }& C/ P% R+ H

       

) E0 T6 u" {" O9 D/ p+ {- h+ V# l

指向文档，图象，多媒体文件或可下载软件的超文本链接称作超级链接, 我们可以为文档内任何地方的任何文本或图象创建链接，包括在标题，列表，表格，层或框架中的任何文本或图象。<BR>超级链接的作用是，可以把一个网站的网页连接起来，点击链接时从一个网页跳转到另一个网页，或者跳转到页面指定的位置。<BR>本文主要内容：各种链接的功能和实现方法。<BR>1 导航链接：实现站点内文档的链接。方法一，使用属性检查器；方法二，指向文件图标链接文档；方法三，使用拖放创建链接。相关内容：在链接时使用的路径；目标文件的打开方式。<BR>2 链接到文档中的指定位置，使用锚；<BR>3 空链接：是一个无指向的链接。使用空链接可以为页面上的对象或文本附加行为。<BR>4 创建javascript脚本链接：用于执行JavaScript代码或者调用JavaScript函数，这样可以让来访者不用离开当前Web页面就可以得到关于一个项目的其他信息。当来访者点击某指定项目时，脚本链接也可以用于执行计算，表单确认和其他处理任务。<BR>5 创建电子邮件链接<BR>6 链接到站点中的文档或者其它站点，可以使用跳转菜单，跳转菜单是文档中的一种来访者可以看见的弹出式菜单，其中列出了链接的文档或文件。<BR>7 给链接增加提示，给链接增加快捷键。<BR><BR><b>第一部分：创建导航链接</b><BR>◇使用指向文件图标链接文档：选中图像，将“属性”检查器的“链接”域右边的“指向文件”图标拖动到站点窗口的文档中。这种方法方便快捷，推荐使用。示例中指向一个文件夹，如果发布到网上后，自动会打开这个文件夹下的默认首页文件index.htm。<BR><A href="http://www.5dmedia.com/5dmedia/conimages/web/2003-03/mvyp-17-2-image001.jpg" target="_blank" ><IMG border=0 height=438 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image001.jpg" width=528></A><BR>◇使用属性检查器：选中示例中的图像，也可以是文字，点击属性面板中的“浏览文件”图标。<BR><A href="http://www.5dmedia.com/5dmedia/conimages/web/2003-03/mvyp-17-2-image001.jpg" target="_blank" ><IMG border=0 height=443 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image002.jpg" width=509></A><BR>◇选中一个文件。会出现一个文件相对于“文档”，“站点根目录的选择”。文档相对路径是最适合用于本地链接的路径类型，适合绝大多数Web站点，推荐使用。<BR><IMG height=373 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image003.jpg" width=446><BR><IMG height=99 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image004.jpg" width=417><BR>◇根相对路径：如果在一个使用多台服务器的大型Web站点或一台服务器上有多个站点的情况下工作，可能需要使用这种类型的路径。很少用到这种路径。如果没有服务器的控制权限，不要使用这种方式！<BR><IMG height=373 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image005.jpg" width=446> <BR>◇绝对路径：完整的URL，称作绝对路径。例如在链接域输入http://vip.5dmedia.com/fuguotao<BR><IMG height=99 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image006.jpg" width=416><BR>◇从打开文档的选取中创建链接：选中文字，按Shift键，拖动出现“指向文件”图标，把“指向文件”图标拖向目标文件，就会建立链接。<BR><A href="http://www.5dmedia.com/5dmedia/conimages/web/2003-03/mvyp-17-2-image007.jpg" target="_blank" ><IMG border=0 height=453 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image007.jpg" width=525></A><BR>◇选择被链接文档要打开的位置：<BR>若要使被链接文档不出现在当前窗口或框架中，从属性面板的“目标”弹出式菜单选取一个选项。<BR>_blank 在新的未命名的浏览器窗口中加载链接文档。 <BR>_parent 在父框架页或包含该链接的框架窗口中加载链接文档。如果包含链接的框架不是嵌套的，则链接文档将加载到整个浏览器窗口中。 <BR>_self 将链接文档加载到与链接相同的框架或窗口中，该目标是默认值，所以通常您不需要指定它。 <BR>_top 将在整个浏览器窗口中加载链接文件，同时移除所有框架。<BR>一个网站中，第一级链接或者导航链接选择_self，第二级链接和友情链接选择_blank。<BR><IMG height=432 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image008.jpg" width=584><BR><BR><b>第二部分：使用锚</b><BR>简明步骤：选中文本→在目标文档中插入锚标记→命名→拖动“指向文件”图标到文本。<BR>◇链接到文档中的指定位置：在需要插入锚的地方，点一下光标，然后单击常用面板上的命名锚记工具。<BR><IMG height=29 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image009.jpg" width=535><BR>键入锚记名称，一个站点中的锚记名称只可以是唯一的，否则会出现错误。<BR><IMG height=119 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image010.jpg" width=341><BR>在文档中选取要创建链接的文本，打开您需要链接的命名锚记所在文档，不一定要是当前文档，可以是站点中的其它文档，点击属性面板中的“指向文件”图标，并将它拖动到您需要链接的锚记处。<BR><IMG height=480 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image011.jpg" width=547><BR><BR><b>第三部分：使用空链接</b><BR>使用空链接可以为页面上的对象或文本附加行为。创建步骤：<BR>1. 在文档窗口中，选中要设置链接的文本、图像或其他对象。<BR>2. 在属性面板的链接框中，只输入一个“#”号。<BR>3. 如果单击这种地址为一个“#”的链接，无论当前你处于文档的什么地方，都会自动跳转到文档的开头位置。很多人非常讨厌这种情况，因此出现很多插件。可以用“###”来代替“#”，单击这样的链接的时候，会保持当前页面的浏览位置。<BR>4. 还可以在属性面板的链接框中输入<b>javascript</b> :;创建空链接。<BR><BR><b>第四部分：创建javascript脚本链接</b><BR>1. 在文档窗口中选取文本，图象或对象<BR>2. 在“属性”检查器的“链接”栏中键入<b>javascript</b> :，其后紧接JavaScript代码或函数调用。<BR>例如在链接栏中键入<b>javascript</b> :alert('哈哈你上当了')创建一个链接，点击链接后就会出现一个警告框<BR><IMG height=119 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image012.jpg" width=197><BR><BR><b>第五部分：创建电子邮件链接</b><BR>方法一：选取需要创建链接的文本或者图像，点击常用面板中的“电子邮件链接”工具，输入邮件地址。<BR>方法二：选取需要创建链接的文本或者图像，在属性面板中的链接栏输入mailto:邮件地址。<BR><A href="http://www.5dmedia.com/5dmedia/conimages/web/2003-03/mvyp-17-2-image013.jpg" target="_blank" ><IMG border=0 height=390 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image013.jpg" width=587></A><BR><BR><b>第六部分：创建跳转菜单，例如制作一个友情链接。</b><BR>首先将插入点放在要插入链接的位置。点击表单面板中的跳转工具<BR><IMG height=308 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image014.jpg" width=552><BR>在插入跳转菜单对话框中，点添加项添加新链接。<BR><IMG height=330 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image015.jpg" width=531> <BR>在属性面板中选择类型为“菜单”。<BR><IMG height=385 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image016.jpg" width=589> <BR>在浏览器中发布如图：<BR><IMG height=110 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image017.jpg" width=268> <BR>在属性面板中选择类型为“列表”高度为3。<BR><IMG height=385 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image018.jpg" width=589> <BR>在浏览器中发布如图： <BR><IMG height=96 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image019.jpg" width=200> <BR>点击属性面板中的列表值，可以修改列表值。<BR><IMG height=189 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image020.jpg" width=405><BR><BR><b>第七部分：给链接增加提示，给链接增加快捷键。</b><BR>首先将插入点放在要插入链接的位置。<BR>点击常用面板上的超级链接工具。<BR><IMG height=52 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image021.jpg" width=571><BR>设置链接参数。<BR><IMG height=192 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image022.jpg" width=413><BR>标题是指当指向链接会出现提示。<BR><IMG height=159 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-17-2-image023.jpg" width=428><BR>访问键是指按键盘上的快捷键会选中链接。例如在实例中按Alt+D键会选中<A href="http://www.5dmedia.com/" target="_blank" >5D多媒体</A>。



. X0 a8 w2 f5 ~2 `; f# `# b/ C! p# g       

<P align=center style="TEXT-ALIGN: center"><SPAN style="FONT-FAMILY: 宋体; Times: ">基于网页创建模板<BR><BR></SPAN><SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">当需要制作大量布局基本一致的网页时，使用模板是最好的方法。</SPAN>


<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">本文介绍的是基于一个网页创建模板的方法。</SPAN>
  i4 s9 T5 p# m: Z7 o
! n( ~. `8 l  s5 i
<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">简明步骤：打开一个已经存在的网页→另存为模板→新建可编辑区域→保存。</SPAN>


<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">打开示例站点中已经建好的</SPAN><SPAN lang=EN style="FONT-SIZE: 9pt">index.htm</SPAN><SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">文件，打开“文件”，点击“另存为模板”。</SPAN>
* A+ K  ~/ s4 I$ y& H$ j
" {. O& `. s! a! H( K  I% n
* v. L, {# O1 J7 V7 t' {% r<SPAN lang=EN-US><A href="http://www.5dmedia.com/5dmedia/conimages/web/2003-03/mvyp-19-1-image002.jpg" target="_blank" ><IMG border=0 height=609 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-19-1-image002.jpg" width=624 v:shapes="_x0000_i1025"></A> </SPAN>
, Y3 ^3 o4 j/ v* ~

1 }" m' I$ _- n<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">选择模板存放的站点，在“另存为”中为模板输入一个唯一的名称，单击保存按钮。</SPAN>

* X" S8 @/ b0 Q/ R
( @! I3 p7 ^# J; V1 a<SPAN lang=EN style="FONT-SIZE: 9pt"><IMG height=165 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-19-1-image004.jpg" width=324 v:shapes="_x0000_i1029"> </SPAN>
% X+ G# X0 g; u1 T3 ^2 n
) T; B5 O; E7 K" F& f3 L
/ s. A7 J9 B2 I7 K/ C<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">在“插入栏”选择“模板”，然后单击“可编辑区域”。</SPAN>
+ U3 a& ]% U( ?

<SPAN lang=EN style="FONT-SIZE: 9pt"><IMG height=95 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-19-1-image006.jpg" width=432 v:shapes="_x0000_i1030"> </SPAN>
* Z! f% X) |. B& ?2 B( _
( ?) D* U$ E5 F  \( C+ f: Q1 _
<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">在“名称”文本框中为该区域输入唯一名称。</SPAN>

. }. a) C. t: f9 y4 v& S: N
<SPAN lang=EN style="FONT-SIZE: 9pt"><IMG height=110 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-19-1-image008.jpg" width=360 v:shapes="_x0000_i1031"> </SPAN>


<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">建好的模板如下图。</SPAN>
4 k/ _2 }4 K# m7 N/ x7 U& V

<SPAN lang=EN-US><A href="http://www.5dmedia.com/5dmedia/conimages/web/2003-03/mvyp-19-1-image010.jpg" target="_blank" ><IMG border=0 height=554 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-19-1-image010.jpg" width=557 v:shapes="_x0000_i1032"></A> </SPAN>
* j+ X0 X! p3 D4 W* V( r$ |) |% O
! y6 Y+ l# j3 V  ~$ ?% O% ?# R0 H
<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">重复这个过程。可以再做一些“可编辑区域”。</SPAN>
" r. o+ R0 ~  Y' \. h
  ~, s1 n+ N1 D* C6 I) `
- r* ?% ]: N3 J" B+ |1 b# s# J- V<SPAN lang=EN-US><A href="http://www.5dmedia.com/5dmedia/conimages/web/2003-03/mvyp-19-1-image012.jpg" target="_blank" ><IMG border=0 height=566 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-19-1-image012.jpg" width=559 v:shapes="_x0000_i1034"></A> </SPAN>
6 d+ [4 B4 u, y7 [* o  ]

- |# v/ N- m$ U! Y3 h7 F<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">打开“文件”菜单，单击“保存”。一个模板就做好了。</SPAN>
+ p# t1 x) M' s- b1 i

<SPAN lang=EN-US><IMG height=344 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-19-1-image014.jpg" width=230 v:shapes="_x0000_i1035"> </SPAN>
! M% R0 e" m2 ~: l5 f6 }' C/ [

3 ]% e# g9 V6 w2 w
8 m- f* o, ~# v8 o1 G0 ]- e

       
' T, h8 a/ G( G% A3 E+ W" o2 H8 q

于模板创建页面<BR><BR><BR>在制作了模板之后，可以基于这个模板创建网页。<BR>简明步骤：文件→新建→打开“模板”选项卡→选择模板→删除模板里多余的文字→输入网页内容→保存→选择保存路径。<BR>1.打开“文件”菜单，点击“新建”。<BR><IMG height=428 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-20-1-image001.jpg" width=218> <BR>2.打开“模板”选项卡，选择模板文件，单击“创建”按钮。<BR><IMG height=386 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-20-1-image002.jpg" width=594><BR>3.选中可编辑区域<BR><IMG height=183 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-20-1-image003.jpg" width=351><BR>4.删除其中多余的文字。<BR><IMG height=136 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-20-1-image004.jpg" width=202><BR>5.在里面输入网页的内容。<BR><IMG height=161 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-20-1-image005.jpg" width=281><BR>6.输入内容后，点击“文件”菜单中的“保存”，选择保存路径，一个页面就做好了。<BR>

<P align=center style="TEXT-ALIGN: center"><SPAN style="FONT-FAMILY: 宋体; Times: ">将模板应用到页面<BR><BR>作者:痴心不改</SPAN>

4 N6 b/ A8 q/ i! j+ t8 Z
( z! Z  H6 d3 }& R8 k<SPAN style="FONT-FAMILY: 宋体; Times: ">为了简化制作过程。常常采用先制作出页面，再应用模板的方法。</SPAN>
5 Y; S$ {& Q; b9 q8 P$ J

6 o) Z3 v/ l  G* U' A<SPAN style="FONT-FAMILY: 宋体">简明步骤：打开一个有内容的页面→打开资源面板→点击模板按钮→选择一个模板→点击应用按钮→指定可编辑区域→确定。</SPAN>


: ]% N% {! o* q9 \<SPAN lang=EN>1.</SPAN><SPAN style="FONT-FAMILY: 宋体; Times: ">打开一个填充了内容的网页。</SPAN>
; y' e$ e( T1 I: p  ?8 a6 ^
' M7 t0 B6 U7 y2 f3 D
' W6 U+ O5 C  Q; Z/ O, f1 A  L" `<SPAN lang=EN><IMG height=325 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-21-1-image002.jpg" width=345 v:shapes="_x0000_i1025"> </SPAN>
4 d/ h7 X6 @+ _4 G
, J+ w$ Q7 ]- ^& {1 {' w6 o4 }
# b1 d& v+ s% P; d! ^) v' `<SPAN lang=EN>2.</SPAN><SPAN style="FONT-FAMILY: 宋体; Times: ">打开资源面板，点击“模板”按钮，打开模板类别。</SPAN>


4 L! A. \/ g6 p9 i<SPAN lang=EN><IMG height=332 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-21-1-image004.jpg" width=336 v:shapes="_x0000_i1026"> </SPAN>

, U" l$ f% c" G) A# u/ b4 K. S5 a
+ t) R4 p; {+ e0 ~<SPAN lang=EN>3.</SPAN><SPAN style="FONT-FAMILY: 宋体; Times: ">选择一个模板，点击应用按钮。</SPAN>
7 A9 W7 G# w7 G$ O+ n7 F

' B5 p1 |' c/ q# p<SPAN lang=EN><IMG height=294 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-21-1-image006.jpg" width=300 v:shapes="_x0000_i1027"> </SPAN>

7 z  H: N8 J2 e
$ n+ T4 f7 X1 _. L9 ?<SPAN lang=EN>4.</SPAN><SPAN style="FONT-FAMILY: 宋体; Times: ">将内容移到新区域，按“确定”按钮</SPAN>
& U1 r% R+ k' v. h9 ~# ?
* ]9 I! M" }$ `: H) U8 M
& ]3 q. G2 Z, k$ v" z# t<SPAN lang=EN><IMG height=277 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-21-1-image008.jpg" width=324 v:shapes="_x0000_i1028"> </SPAN>

- x% \: [2 v7 A  T7 Y( c5 X' ~0 o
<SPAN lang=EN>5.</SPAN><SPAN style="FONT-FAMILY: 宋体; Times: ">一个应用模板的页面就做好了。</SPAN>
8 _; P6 t+ G% |

<SPAN lang=EN><IMG height=287 src="http://www.5d.cn/5dmedia/conimages/web/2003-03/mvyp-21-1-image010.jpg" width=324 v:shapes="_x0000_i1029"> </SPAN>

6 Q0 h7 f7 ~  p  f8 C& {: @
  Z/ `1 ?3 A) N5 O9 ^
& E% O7 X* K# v* ?& Z
1 N: z0 _2 D1 k  f
* ^1 T! U# I! N  ?6 V6 v, T- t: i       
- Q" g5 n  M3 b+ g