使用 JavaScript 创建模板
3.22/5 (16投票s)
2000年10月19日
133651
创建网页模板有很多种方法。使用 JavaScript 是最简单的方法之一。
引言
如果你了解一些 JavaScript，你可能记得可以使用 document.write 将文本写入 HTML 文件，包括任何 HTML 标签。
document.write("Hello World This is a text")
因此，我们可以使用 JavaScript 来编写 HTML 文件。
document.write("<html><head><title>Create Templets by Using JavaScript</title></head>")
document.write("<body>")
document.write("<h3 align='center'>This is a html file created by using JavaScript</h3>")
document.write("</body></html>")
想象一下，你需要编写许多网页，并且希望它们保持相同的颜色、相同的字体样式和大小、相同的导航菜单、相同的横幅和相同的联系信息。你可能会想是否应该创建一个模板来保持页面样式一致并减少你的输入。如果有一天你需要更改页面的外观，你只需要更改模板页面即可。
创建模板有很多种方法。使用 JavaScript 是最简单的方法之一。让我向你展示如何操作。为了简单起见，让我们使用上面的示例代码。
首先，我们将代码分成三个部分。
标题
document.write("<html><head></head>")
document.write("<body bgcolor='#ffffff'>")
Content
document.write("<h3 align='center'>This is a html file created by using JavaScript</h3>")
页脚
document.write("</body></html>")
让我们复制第一部分并将其保存为 .js 文件 "header.js"。然后，我们复制第三部分并将其保存为 "footer.js"。最后，我们创建一个 HTML 文件 "test.htm" 并进行如下编码：
<script language="JavaScript" src="header.js"></script>
<h3 align="center">This is a html file created by using JavaScript</h3>
<script language="JavaScript" src="footer.js"></script>
现在完成了。打开浏览器并测试。你可以看到输出与纯 HTML 文件相同。这只是一个非常简单的示例。
你可以在 "header.js" 和 "footer.js" 中编写更多内容，包括导航菜单、公司横幅、联系信息、属性和 CSS 类。以下是一个示例：
header.js
document.write("<head>")
document.write("<title>3A Web Design</title>")
document.write("<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>")
document.write("<meta name='author' content='Nongjian Zhou'>")
document.write("<style type='text/css'>")
document.write("<!--")
document.write("h1 {color:#ee9933; font-size:24px; font-family: Verdana, Arial, Helvetica, sans-serif}")
document.write("h2 {color:#ee9933; font-size:18px; font-family: Verdana, Arial, Helvetica, sans-serif}")
document.write("h3 {font-size:16px; font-family: Verdana, Arial, Helvetica, sans-serif}")
document.write("h4 {font-size:14px; font-family: 'New Times Roman'}")
document.write("p {font-size:12px; font-family: Verdana, Arial, Helvetica, sans-serif}")
document.write("pre {color:#994400; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif}")
document.write("a:link {text-decoration: none}")
document.write("a:hover {text-decoration: underline; color: #FF0000}")
document.write("-->")
document.write("</style>")
document.write("</head>")
document.write("")
document.write("<table width='100%' height='100%' border='0' cellspacing='0' cellpadding='0'>")
document.write("<tr><td colspan='2' height='120' align='center' bgcolor='#eeeeee'>")
document.write("<h1>3A Web Design</h1>")
document.write("<pre><div align='right'>Updated:" +document.lastModified+" </div></pre>")
document.write("</td></tr>")
document.write("<tr><td rowspan='2' align='center' valign='top' width='180' bgcolor='#eeeeee'><br>")
document.write("<table width='140' align='center' valign='top' cellspacing='2' cellpadding='5'>")
document.write("<tr><td bgcolor='#dddddd'>")
document.write("<p> <a href='aboutUs.htm'><b>About Us</b></a></p>")
document.write("</td></tr>")
document.write("<tr><td bgcolor='#dddddd'>")
document.write("<p> <a href='services.htm'><b>Our Services</b></a></p>")
document.write("</td></tr>")
document.write("<tr><td bgcolor='#dddddd'>")
document.write("<p> <a href='works.htm'><b>Our Works</b></a></p>")
document.write("</td></tr>")
document.write("<tr> <td bgcolor='#dddddd'>")
document.write("<p> <a href='clients.htm'><b>Our Clients</b></a></p>")
document.write("</td></tr>")
document.write("<tr><td bgcolor='#dddddd'>")
document.write("<p> <a href='contactUs.htm'><b>Contact Us</b></a></p>")
document.write("</td></tr>")
document.write("</table>")
document.write("</td>")
document.write("<td align='center'><table width='95%' height='100%'><tr><td>")
footer.js
document.write("</pre></table></td></tr><tr><td valign='bottom' height='50'>")
document.write("<hr><pre>3A Web Design @ 2000, All Rights Reserved</pre>")
document.write("</td></tr></table>")
document.write("")
document.write("")
test.htm
<script language="JavaScript" src="header.js"></script>
<h3 align="center">This is a html file created by using JavaScript</h3>
<script language="JavaScript" src="footer.js"></script>
你可以将模板分成任意多的部分。例如，你可以将其分成：“header”、“footer”、“content”和“main”，并创建四个 .js 文件：header.js、footer.js、content.js 和 main.js。