2011-03-31 71 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目錄。我並不是說這是最好的方式,但它是微軟方面的常用方式。