What are ways of keeping the data separate from the design of a webpage, so that if you redesign the site, or you want to provide the ability for users to customize the layout, it would be really easy to do so.
有哪些方法可以将数据与网页设计分开，这样，如果您重新设计网站，或者您希望为用户提供自定义布局的能力，那么这样做很容易。
5 个解决方案
#1
7
I think your question is confusing for most of others here. I see a lot of irrelevant answers coming up with "MVC" while you actually mean "separate content from style" instead of "separate data from design" which could be incorrectly interpreted as "separate model from view". The first part of your question indeed gives the impression that you're looking for MVC, but the second part of your question and the tags used made me realize that you actually didn't mean that.
我认为你的问题在这里让大多数人感到困惑。我看到很多不相关的答案提出“MVC”，而你实际上是指“从样式中分离内容”而不是“单独的数据与设计”，这可能被错误地解释为“独立的模型与视图”。问题的第一部分确实给人的印象是你正在寻找MVC，但问题的第二部分和使用的标签让我意识到你实际上并不是那个意思。
The answer is simple: just don't use inline CSS (such as style="color:red") but have it in an entirely separate stylesheet which you include in the HTML head. Give the HTML elements sensible ID's and/or classnames. You can let the CSS hook on that. Also use HTML wisely and semantically. Separate the content in positionable block elements. Don't use tables for layout.
答案很简单：只是不要使用内联CSS（例如style =“color：red”），而是将它放在HTML头中包含的完全独立的样式表中。为HTML元素提供合理的ID和/或类名。你可以让CSS挂钩。也明智地和语义地使用HTML。将可定位块元素中的内容分开。不要使用表格进行布局。
Certainly checkout the CSS Zen Garden as someone already mentioned before me. It uses exactly the same content (HTML code) throughout many different styles which you can select from a menu.
当然，在我面前已经提到的人身上查看CSS Zen Garden。它在许多不同的样式中使用完全相同的内容（HTML代码），您可以从菜单中进行选择。
For more interesting blogs/links you may find those Google searches useful:
对于更有趣的博客/链接，您可能会发现这些Google搜索很有用：
- html semantics
- html语义
- css naming conventions
- css命名约定
The same story also applies on JavaScript by the way. Do not use inline JS code, but just have it in an entirely separate file and make use of unobtrusive Javascript as many as possible. I.e. your website should still be useable without Javascript. The jQuery library is a perfect choice for that. Its selectors are also based on having sensible ID's and/or classnames.
顺便说一句，同样的故事也适用于JavaScript。不要使用内联JS代码，只需将它放在一个完全独立的文件中，并尽可能多地使用不显眼的Javascript。即没有Javascript，您的网站仍然可以使用。 jQuery库是一个完美的选择。它的选择器也基于合理的ID和/或类名。
#2
4
The most common approach these days is to use the Model-View-Controller pattern.
目前最常见的方法是使用模型 - 视图 - 控制器模式。
#3
4
Take a look at CSS Zen Garden and use the View Source feature.
看看CSS Zen Garden并使用View Source功能。
I take this question as "provide the ability for users to customize the layout".
Such is the job of CSS, to provide "style" separate from HTML "markup".
我把这个问题称为“为用户提供定制布局的能力”。这就是CSS的工作，提供与HTML“标记”分开的“风格”。
With careful designs (with the stated goal in mind).
You can craft your markup so it'd can be really easy to style and re-style over and over.
精心设计（牢记既定目标）。你可以制作你的标记，这样就可以很容易地重复风格和重新设计风格。
It's not hard, I've done it a few times on a few redesigns.
You just need to stick to the semantics as much as possible.
这并不难，我已经做了几次重新设计。你只需要尽可能地坚持语义。
On the backend, though, separating the model from the code is pretty much a nailed down science by now depending on what your backend infrastructure looks like and how far you want to go.
然而，在后端，将模型与代码分开几乎是一种固定的科学，现在取决于你的后端基础设施的样子以及你想要走多远。
#4
1
As David said, use the MVC pattern. But the biggest help is design the system early to avoid issues with bind your data (sources) to your interface. Make your interfaces so that you can change them out quickly etc.
正如大卫所说，使用MVC模式。但最大的帮助是尽早设计系统，以避免将数据（源）绑定到接口的问题。制作您的界面，以便您可以快速更改它们等。
#5
1
The answers suggesting the use an MVC pattern are 100% right, and I encourage you to embrace it too.
More specifically, the kind of technology usually employed to obtain what you are seeking is the use of a templating system (such as Smarty if you use php, for example).
A web application framework (such as Cakephp, Rails or Django) can help you get started and achieve proper separation, usally with little effort.
The only drawback is that a change in approach and/or mentality may be required :)
建议使用MVC模式的答案是100％正确的，我鼓励你也接受它。更具体地说，通常用于获得所需内容的技术类型是使用模板系统（例如，如果使用php，则为Smarty）。 Web应用程序框架（例如Cakephp，Rails或Django）可以帮助您开始并实现适当的分离，通常只需要很少的努力。唯一的缺点是可能需要改变方法和/或心态:)
#1
7
I think your question is confusing for most of others here. I see a lot of irrelevant answers coming up with "MVC" while you actually mean "separate content from style" instead of "separate data from design" which could be incorrectly interpreted as "separate model from view". The first part of your question indeed gives the impression that you're looking for MVC, but the second part of your question and the tags used made me realize that you actually didn't mean that.
我认为你的问题在这里让大多数人感到困惑。我看到很多不相关的答案提出“MVC”，而你实际上是指“从样式中分离内容”而不是“单独的数据与设计”，这可能被错误地解释为“独立的模型与视图”。问题的第一部分确实给人的印象是你正在寻找MVC，但问题的第二部分和使用的标签让我意识到你实际上并不是那个意思。
The answer is simple: just don't use inline CSS (such as style="color:red") but have it in an entirely separate stylesheet which you include in the HTML head. Give the HTML elements sensible ID's and/or classnames. You can let the CSS hook on that. Also use HTML wisely and semantically. Separate the content in positionable block elements. Don't use tables for layout.
答案很简单：只是不要使用内联CSS（例如style =“color：red”），而是将它放在HTML头中包含的完全独立的样式表中。为HTML元素提供合理的ID和/或类名。你可以让CSS挂钩。也明智地和语义地使用HTML。将可定位块元素中的内容分开。不要使用表格进行布局。
Certainly checkout the CSS Zen Garden as someone already mentioned before me. It uses exactly the same content (HTML code) throughout many different styles which you can select from a menu.
当然，在我面前已经提到的人身上查看CSS Zen Garden。它在许多不同的样式中使用完全相同的内容（HTML代码），您可以从菜单中进行选择。
For more interesting blogs/links you may find those Google searches useful:
对于更有趣的博客/链接，您可能会发现这些Google搜索很有用：
- html semantics
- html语义
- css naming conventions
- css命名约定
The same story also applies on JavaScript by the way. Do not use inline JS code, but just have it in an entirely separate file and make use of unobtrusive Javascript as many as possible. I.e. your website should still be useable without Javascript. The jQuery library is a perfect choice for that. Its selectors are also based on having sensible ID's and/or classnames.
顺便说一句，同样的故事也适用于JavaScript。不要使用内联JS代码，只需将它放在一个完全独立的文件中，并尽可能多地使用不显眼的Javascript。即没有Javascript，您的网站仍然可以使用。 jQuery库是一个完美的选择。它的选择器也基于合理的ID和/或类名。
#2
4
The most common approach these days is to use the Model-View-Controller pattern.
目前最常见的方法是使用模型 - 视图 - 控制器模式。
#3
4
Take a look at CSS Zen Garden and use the View Source feature.
看看CSS Zen Garden并使用View Source功能。
I take this question as "provide the ability for users to customize the layout".
Such is the job of CSS, to provide "style" separate from HTML "markup".
我把这个问题称为“为用户提供定制布局的能力”。这就是CSS的工作，提供与HTML“标记”分开的“风格”。
With careful designs (with the stated goal in mind).
You can craft your markup so it'd can be really easy to style and re-style over and over.
精心设计（牢记既定目标）。你可以制作你的标记，这样就可以很容易地重复风格和重新设计风格。
It's not hard, I've done it a few times on a few redesigns.
You just need to stick to the semantics as much as possible.
这并不难，我已经做了几次重新设计。你只需要尽可能地坚持语义。
On the backend, though, separating the model from the code is pretty much a nailed down science by now depending on what your backend infrastructure looks like and how far you want to go.
然而，在后端，将模型与代码分开几乎是一种固定的科学，现在取决于你的后端基础设施的样子以及你想要走多远。
#4
1
As David said, use the MVC pattern. But the biggest help is design the system early to avoid issues with bind your data (sources) to your interface. Make your interfaces so that you can change them out quickly etc.
正如大卫所说，使用MVC模式。但最大的帮助是尽早设计系统，以避免将数据（源）绑定到接口的问题。制作您的界面，以便您可以快速更改它们等。
#5
1
The answers suggesting the use an MVC pattern are 100% right, and I encourage you to embrace it too.
More specifically, the kind of technology usually employed to obtain what you are seeking is the use of a templating system (such as Smarty if you use php, for example).
A web application framework (such as Cakephp, Rails or Django) can help you get started and achieve proper separation, usally with little effort.
The only drawback is that a change in approach and/or mentality may be required :)
建议使用MVC模式的答案是100％正确的，我鼓励你也接受它。更具体地说，通常用于获得所需内容的技术类型是使用模板系统（例如，如果使用php，则为Smarty）。 Web应用程序框架（例如Cakephp，Rails或Django）可以帮助您开始并实现适当的分离，通常只需要很少的努力。唯一的缺点是可能需要改变方法和/或心态:)