格式化Web内容。

时间:2014-02-08 17:22:11

标签: html css

我开发了一个15-20页的小型网站。

该网站由 -

组成
  1. 标题菜单。
  2. 内容(每页不同)。
  3. 页脚。
  4. 我无法消化这样一个事实:我必须在所有页面上编写标题菜单和页脚的代码。

    有人可以帮助我了解我如何设法在一个地方编写重复的代码并将其导入或包含在所有页面中。

    另外,如果你能提一下如何使用javascript代码,图片和css处理相同的情况,这将是一个奖励?

2 个答案:

答案 0 :(得分:1)

如果您的服务器支持服务器端包含(SSI),则可以使用它(http://en.wikipedia.org/wiki/Server_Side_Includes)。

至于css和javascript - 将代码和声明移到单独的文件中并在页面上包含指向它们的链接(通常在head元素中),如下所示:<script type="text/javascript" src="javascript-file.js"></script><link rel="stylesheet" type="text/css" href="css-file.css" />(有关详细信息,请参阅http://www.w3schools.com/tags/att_script_src.asphttp://www.w3schools.com/css/css_howto.asp。)

答案 1 :(得分:1)

您的问题非常广泛且通用且非常正确。看起来好像是在非常静态的角度接近这个站点构建项目,而实际上你需要动态地接近它。

您可以做的最低限度是按照此处的建议使用SSI: http://en.wikipedia.org/wiki/Server_Side_Includes

现在,根据您的知识水平和学习意愿,如果您使用像php这样的脚本语言,您将能够更加优雅地完成这项任务。

http://www.w3schools.com/php/

脚本语言允许您创建一次内容,然后将包含该内容的文件与一行代码一起包含到另一个文件中。如果你的网站需要增长,PLUS会做更多的事情。

例如,您可以创建header.php和footer.php并将它们包含在您的页面中,这些页面也必须是php文件。这样你只需创建一次页眉和页脚并重新使用它们。

如果您创建header.php并将标题代码放入该文件中......然后您创建somepage.php这是您的内容页面。为了包含标题代码,您必须将其写入某个页面。 php你想要标题的地方

<?Php include('header.php'); ?>

尊重包含html的元素结构非常重要。 SSI方法按字面意思注入包含文件中的确切内容。

你可以将一个文件分成多个部分,将它们保存为php并将它们包含在第三个文件中,并获得与原始文件相同的结果。

您必须确保您的托管服务器支持您要使用的动态脚本语言。大多数主机都支持PHP。

此外,包括JavaScript在内。如果您正确编写JavaScript,那么您可以在.js文件中编写所有JavaScript代码,然后在需要时将这些文件包含到php或html文件中。 CSS文件也是如此。您将CSS代码放入style.css文件并将文件链接到您的something.php

这是您包含JavaScript文件的方式.. http://www.w3schools.com/tags/att_script_src.asp 您通常将其放入页面元素

<script type="text/javascript" src="jsfile.js"></script>

这是将css文件与其他文件链接的方法。 http://www.w3schools.com/css/css_howto.asp 你把它放到页面的元素中。

<link rel="stylesheet" type="text/css" href="style.css" /> 

然而,,,

所有这些仍然非常简陋。也许你应该考虑使用托管的WordPress或类似的内容管理系统来帮助你建立一个漂亮的动态网站。

或者,如果您有实际学习的愿望,一个好的开始方式是从www.w3schools.com学习基础知识

您需要完成

HTML和HTML5, CSS2和CSS3, PHP(这是允许动态的东西 - 你可以尝试学习python ...我更喜欢php自己), JavaScript中, JSON

然后当你学习JavaScript时,你会想要进入JavaScript库,比如jQuery和最终的Angularjs(这是一个更高级的库,但非常有用)

此外,您还需要了解如何使用数据库存储数据,这样您就不必每次都创建新页面。你应该考虑使用MySQL和PHP。你也可以选择Postgress,liteSQL和其他选项。

除了Angularjs之外,所有这些都可以在w3schools网站上免费学习。你可以谷歌吧。

还有一件事......

这可能看起来令人生畏,但如果你一开始就暂停这种感觉并坚持最初的范例挑战,你会发现它根本不复杂。

祝你好运!

P.S。

我的网络编程生涯始于15年前,当时我尝试建立一个小型网站,并对您现在遇到的完全相同的问题感到沮丧:)