File structure management, sub-webpages' resources put in subfolder or collect in general folder in root

I've done some Google searches, but I'm still having trouble with my file system managements. Let's say for instance:

root
|- css/
|   `- ...
|- js/
|   `- ...
|- images/
|   `- ...
|- History/
|   `- index.html
|- Foresight/
|   `- index.html
`- index.html

Let's say for simplicity, I have this "history" webpage and a "foresight" webpage. Here are the things these pages are linked to:

History/

• app_form.pdf
• spreadsheet.xls
• letter.doc

Foresight/

• app_form.pdf
• excel.xls
• special.abc

---

You see I've used the css/, js/, images/ root folders to store resources that are styled for the whole website.

• But where should I put these misc. resources? /History/resources/, /resources/ or /spreadsheets/excel.xls?
• What is the best practice to deal with files with same names? They are long standing pages, maybe not folders named by date like resources/20xx/xx/xx/app_form.pdf?

Please help.