Dreamweaver MX中文版建站攻略

在布局视图中设置对象属性（一）
<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>

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 O; N$ e4 p9 O4 O& o
% O+ t# F+ }9 e( @. \# Z3 H

) M: Y5 Z  k! I2 w8 w! n       
: e( a2 g, @7 S/ ]

表格的使用<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>


0 L1 x" ]. X4 Z
( N: z- [: d% b, v: d3 n       

9 Y; i7 f; ^/ i2 i, A

指向文档，图象，多媒体文件或可下载软件的超文本链接称作超级链接, 我们可以为文档内任何地方的任何文本或图象创建链接，包括在标题，列表，表格，层或框架中的任何文本或图象。<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>。



       

' H+ k: T7 D8 I) A0 E

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

. Q5 ~% S$ {6 l  g1 S
' b( Y  ?( q) J: f) a<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">本文介绍的是基于一个网页创建模板的方法。</SPAN>


/ K. ]  {, r2 l: {1 L8 o/ s3 c<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">简明步骤：打开一个已经存在的网页→另存为模板→新建可编辑区域→保存。</SPAN>
) k. y# [( q! x0 _$ _  ]6 g
- U( S. ]1 J9 L, u2 z
<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>


<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>

9 ?7 V. H0 B9 L1 N5 I
<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">选择模板存放的站点，在“另存为”中为模板输入一个唯一的名称，单击保存按钮。</SPAN>

0 T) X1 @4 M$ M
) d8 h, d2 G. ~. b' z1 D<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>
/ a7 m4 L# @, Y: ]8 e& k, w
2 T: ~- m" u5 `
% `% Z. B" m6 U" ?! B# |4 W, \8 T" X: E<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">在“插入栏”选择“模板”，然后单击“可编辑区域”。</SPAN>
( ?9 F: v! K; q9 G8 j- c
$ O( L9 A; Z( X/ n
! ?4 X2 ^: ]" [* V. B<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>

6 x: }5 O5 g" |" ?; d/ S
+ M! `* v3 L8 L# B$ G7 s2 R<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">在“名称”文本框中为该区域输入唯一名称。</SPAN>


* ]$ N/ E' c  @; N" w. ~<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>
2 U$ L. l8 k8 t. J. m

<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">建好的模板如下图。</SPAN>
! J# t" D# f4 l, G8 f
$ @% q/ ?0 J# M/ b/ o! w
<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>


8 d$ V2 r5 h1 S7 o<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">重复这个过程。可以再做一些“可编辑区域”。</SPAN>
  {1 Y% U" B% }; R4 @+ O2 S
. }5 b8 F# e" J" }8 I- [
<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>


) ~, z$ L" n* N3 y<SPAN style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt; Times: ">打开“文件”菜单，单击“保存”。一个模板就做好了。</SPAN>
4 J$ E4 w  f8 z7 n) B5 J
+ I2 j; d8 n# Z: J
! Y8 }  Z- d! Z2 A2 ^% b<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# P: H: k$ t( d( W' g
* o- n- B4 R0 e3 T' J5 e& ]
% N# H, Y9 C2 X$ K
8 q- M8 E% K* k9 j+ @& B8 W/ t
, o6 y8 q, p7 ?" ]5 m
. v+ O- j1 N3 u& j       

于模板创建页面<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>
2 _# t+ l2 `. y4 s/ k

<SPAN style="FONT-FAMILY: 宋体; Times: ">为了简化制作过程。常常采用先制作出页面，再应用模板的方法。</SPAN>

" K# h9 m% ?9 @
$ Q3 c) G- s  G: x<SPAN style="FONT-FAMILY: 宋体">简明步骤：打开一个有内容的页面→打开资源面板→点击模板按钮→选择一个模板→点击应用按钮→指定可编辑区域→确定。</SPAN>


<SPAN lang=EN>1.</SPAN><SPAN style="FONT-FAMILY: 宋体; Times: ">打开一个填充了内容的网页。</SPAN>


+ v! b0 s5 Z. f" |+ {2 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>
( b" Y1 x4 U# r9 A( Q" n
/ [; {9 R  C' O" _: ?2 Y; }. P
, Y, k. ]8 Q1 J5 n<SPAN lang=EN>2.</SPAN><SPAN style="FONT-FAMILY: 宋体; Times: ">打开资源面板，点击“模板”按钮，打开模板类别。</SPAN>

& w+ d, l- a  S9 ^* \% y
1 P* B+ a" E4 @  F- Z- i, m9 e<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>

' V( h+ G/ F" H8 n
6 f' z1 S- w2 T2 V. s<SPAN lang=EN>3.</SPAN><SPAN style="FONT-FAMILY: 宋体; Times: ">选择一个模板，点击应用按钮。</SPAN>


5 M0 ?& y9 D4 k2 R, R7 S' `$ f<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>
+ F: {$ ]! s$ E/ M4 H% R/ t
0 B# p/ g/ V4 P" }) ]7 I
1 @; E; ]! D! c0 R<SPAN lang=EN>4.</SPAN><SPAN style="FONT-FAMILY: 宋体; Times: ">将内容移到新区域，按“确定”按钮</SPAN>


2 o& y) }! h+ a( T, Y" x<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>
: Z8 Z4 M) K- o3 r' |

<SPAN lang=EN>5.</SPAN><SPAN style="FONT-FAMILY: 宋体; Times: ">一个应用模板的页面就做好了。</SPAN>


' B7 ~; C8 S4 h( x0 q<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>
- [- V2 `# C- @/ ~: C! b- _


& _* E7 i: Y# ]$ x7 B

4 W6 t- b: ~. [+ W2 N3 c. i0 `7 y       
* x. D0 m2 O) g) _' r
# w3 _$ h3 o0 f/ _; V, S