Question

出于教育原因，我试图创建自己的网站。我试图用最好的意图从头开始做这件事，并试图遵循网页设计的最新理论，但是单独吸收一个人太过分了。

我得到了一些有用的提示，但是他们离开了我的网站，然后又回到了绘图板上，找出了如何更好地使用已经存在的系统，该系统致力于最新的网页设计最佳实践思考和深入研究使用脚本系统管理封装的价值。关于结论，请参阅我的答案，对于那些像我一样正在建立自己的网站的人。

Answer 1

我认为你的问题是关于丑陋的单杠。因为我不喜欢那种类型的包含。我会解决开始使用像mustache这样的模板引擎，它可以在Javascript中运行，所以你不需要服务器端脚本语言。

例如，您可以在script tags ::

中放置模板

<script type="text/x-mustache" id="template">
    <p>Hello, {{name}}</p>
</script>

并使用jQuery访问该脚本标记的内容：

var temp = $("#template").html();
Mustache.render(temp { name: "Jack" });
// returns: <p>Hello, Jack</p>

在此之后，请查看responsive Web design。

希望有所帮助。

Answer 2

避免网页设计的复杂性：（1）使用像Bootstrap这样的现有系统 - 不要重新发明轮子。您可以通过您使用它的方式添加自己的原创性，并通过一些最终的css触摸为网站提供您自己的签名。 Bootsrap由专门的开发团队构建，内置了所有最新的设计原则。（2）使用某种脚本语言支持的某种服务器端包含系统。我个人建议使用javascript对象数据结构来包含每页唯一的详细信息。每个页面都是唯一且可收藏的，因此无需单独存储其唯一数据。我使用的设计旨在消除尽可能多的重复和javascript数据结构的美妙之处在于它们的表单可能因页面而异，但只需要一个函数来处理它们。因此，对于每个页面，您只需要输入页面所需的数据。

结论：这个问题可能会增长，直到一个并发症导致另一个并发症变得笨拙。我遇到的主要问题是尝试从头开始设计我的网站。我认为通过尝试吸收当前关于网页设计的全球思维来做正确的事情，但是对于一个人来说，从一开始就试图开始这种情况变得太复杂了。

我的结构问题的答案在评论中被暗示，但我不得不在下面挖掘才能找到它。现在已经发现了Bootstrap系统，我强烈推荐它。它使我能够立即重建我的整个网站，并自动整合我需要的所有响应能力。我的封装问题的答案是通过javascript建议的，虽然我不喜欢胡子的想法，所以我被推到更深入地调查javascript。我现在使用的解决方案是SSI和灵活的javascript对象类型数据结构的组合，以处理各个页面的独特细节。

我的新网站是here。它在台式电脑和iPhone上都能很好地工作。我已经在下面的一个页面中包含了一个代码的副本，该代码显示整个页面是通过模板文件中的SSI加载的，并且使用在页面加载时激活的javascript函数填充其详细信息。现在，当我添加新页面时，我所要做的就是创建新内容，然后填写其数据结构。

<!DOCTYPE html>
<html lang="en">
  <head>

    <!--#include virtual="/main_head.htm" -->

    <script>
      var detail = {
        type: 'book', brand: 'Maths', title: 'Pythagorean Triples 1&amp;2',
        article: {subject: 'maths', topic: 'number_theory',
          title: 'pythag_paper', page: 'pythag_paper_a.shtml'},
        read: { state: 'active', link: ''},
        list: { state: '', link: ''},
        fill: {left: 'images/pythag_paper_01.png', right: 'images/pythag_paper_02.png'},
        step: [
             {state: 'disabled', link: ''},
             {state: 'disabled', link: ''},
             {state: 'active', link: 'pythag_paper_b.shtml'},
             {state: 'active', link: 'pythag_paper_d.shtml'}
             ]
      }
    </script>

  </head>

  <body onload="setBookDetail()">

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Fixed navbar -->
      <!--#include virtual="/main_navbar.htm" -->

      <!-- Begin page content -->
      <div class="container">
        <!--#include virtual="/main_title.htm" -->
        <!--#include virtual="/main_page.htm" -->
      </div>

    </div>

    <!-- Sticky footer -->
    <!--#include virtual="/main_footer.htm" -->

  </body>
</html>

从头开始设计一个新网站的复杂性

2 个答案: