Question

在一个介绍性网络课程中教学生时，我想找到一种最简单的方法来构建一个大约7页的多页静态网站，而不必让它们制作7个不同的页面。

显然，我可以让他们制作一个单独的页眉，页脚和菜单文件，并使用服务器端包含，只需将包含在7个不同的内容页面上 - 但这感觉很脏。

过去我让他们这样做：http://www.tropicalteachers.com/web110/?Ignore_WEB_119_CLEAN:MX_-old_Extra_Credit:Dynamic_PHP - 这是一个使用作为模型的作业的快速实验：http://www.yetirobotics.org/index2.php?pagename=team_yeti

但我觉得应该有一个更清洁/更简单的方法来使用javascript，或者可能在PHP中 - 但我不知道如何。

基本上我想要一个带菜单的主页 - 当点击菜单项时，它会加载不同的内容。我相信最好将内容放在七个不同的文件中，但我可以想象它们都在一页内的同一个JS中 - 记住，这个网站应该非常简单。

我想将它限制为html / css / js / php，最好是js或php而不是两者。

只有索引页面控制（并加载）所有内容。

谢谢！

Answer 1

如果您想创建一个更现代的框架，那么您应该考虑使用javascript动态显示内容（如您在问题中所建议的那样）。为此，我将使用像jQuery这样的框架，因为它使异步请求调用变得更加简单。要执行此操作，您可以编写单个页面，其中包含为动态内容标记的特定区域。

服务器端您可以设置页面或数据库以返回将根据请求更改的主要内容区域。

客户端您可以使用jQuery的load将请求的内容放入内容区域。

$('#contentArea').load('url', function() {
     //callback area in case there is other stuff you want to do with js
     location.hash = 'blah';
});

更改页面的hashmark可能是有意义的，这样页面看起来仍然是静态的，并且随着内容的变化可以链接。

location.hash = 'blah';

此外，您需要通过在单击时返回false来覆盖默认链接行为。

myLink.click = function() { 
     $('#contentArea').load('url', function() {
         //callback area in case there is other stuff you want to do with js
         location.hash = 'blah';
     });
     return false;
}

我认为这对学生来说是一个很好的教训，因为它显示了客户端，服务器端以及如何通过javascript动态连接它们之间的区别。

寻找一个演示网站，尽可能使用最简单的重复使用形式

1 个答案: