2011-03-31 58 views
5

组织网页内容的最常见方式是什么,即HTML,JS和CSS?如何整理我的网页内容?

我通常做这个小项目:

  • 的index.html
  • 的style.css
  • 的script.js

我认为这是相当标准。但是如何为具有多个HTML/JS文件的项目做到这一点?我的做法是:

  • 的index.html
  • foobar.html
  • 的style.css
  • JS
    • core.js
    • foobar.js

这是一种常见的做法它呢?即使只有一个文件,我应该将CSS移动到单独的“css”目录吗?通常如何调用这个中心CSS文件? “style.css”或“base.css”还是别的?将HTML文件移动到单独的目录是否很常见?

回答

2

这几乎是一个品味问题。

但是,将所有js/css和静态图像放置到/ static或/ media等单个文件夹中很常见。因此,例如/media/css/style.css。这里的要点是,您经常会使用应用服务器(Ruby on Rails,Django)开发动态页面,并希望使用像nginx这样的轻量级web服务器来提供静态内容。

您可能想看看http://html5boilerplate.com/其中包含大多数当前的最佳做法。

+0

谢谢,这当然是我一直在寻找的约定! – futlib 2011-03-31 13:58:18

1

我很喜欢Rails的组织。提供给用户的公共静态文件位于/public之下。然后,JavaScript和CSS文件分别存储在public/javascriptspublic/stylesheets下。静态HTML文件存储在/public

至于中央CSS文件名,它确实是你的偏好。你可以在你的网站之后命名它(例如twitter.css),或者你可以把它命名为像base.css,all.css一般的东西。等

我会保持你的html下public文件夹,但你也可以创建一个public/html文件夹以及。

1

我建议你将图片移动到其他目录(当然),如果有多个文件进入其他目录,js如果多个文件进入其他目录。请记住,文件的名称是最重要的事情之一。不要调用style1style2之类的样式(如果多于一个),但它们之间的区别,简短规格如light_gray.cssdark_black.css。如果您使用更大的js脚本将它们添加到单独的目录中,则与脚本相同。

1

我这样做:

index.html 
styles/ 
    main.css # Main CSS 
    i/  # CSS images dir. Its name is short because: background:url(i/my_image.png); 
    f/  # CSS fonts dir. 
scripts/ 
    main.js # Main JS 
images/  # Content images 
+1

我也是这样。不过,这并不重要。只需选择适合您的方案即可。 – 2011-03-31 13:27:15

+0

是的,我完全同意。 – bpierre 2011-03-31 13:30:03

0

最常见的结构,我遇到的是:

  • 的index.html
  • foobar.html
  • 图像0​​
    • some_image.jpg
  • 样式表
    • default.css(application.css或style.css中也是常见的)
  • JS(或Java脚本)
    • 的application.js
    • hello_world.js

这是它是如何通常在轨道和一个其他框架。

随着项目的扩展,您可能会拥有多个样式表/脚本,因此将文件夹放入文件夹中可以节省时间/精力。

0

在大型项目中,您可以区分静态和动态文件,即像PHP和文件一样被解析并执行的文件,这些文件将按照原样发送到客户端。许多PHP框架提出了以下变体:

index.php  # single starting point 
admin.php  # *or* 
admin/index.php # admin area, separated from frontend 
lib/   # contains executables, that are not directly called 
static/   # contains CSS, JS, images and so on, that come from developers 
assets/   # static content, that is uploaded by the user 

这种方法有几个好处。首先,您不要混淆用户上传与样式表。然后,您可以轻松地将您的Web服务器配置为发送适当的过期和缓存标头,其中包含staticassets中的内容。

lib文件夹以某种方式被禁止客户端,因此您不会将代码发送到客户端,即仅用于嵌入。

然而,毕竟这是你喜欢什么和你需要什么的问题。

0

ASP.NET webforms的默认值是index.htmlfoobar.html与根目录中的公共文件一起使用。然后在那里有ScriptsStyles目录。如果您有限制的文件,则进入Account目录。我并不是说这是最好的方式,但它是微软方面的常用方式。