• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 505
  • Last Modified:

What is the Proper way to save your files for a Website So they talk to each other?

Im a beginner web designer and I am trying to figure out how to properly save your files in a folder to make them all talk to each other. Im not sure if im explaining this correctly so Ill just explain what im doing now and maybe someone can tell me what I am doing wrong. As of right now i am saving my html document in the first layer of a folder on my desktop. so within the folder on my desktop I have the html document and then I have 3 other folders. These folders are named Css, Java Script, and Images. I have my css document in the css folder and my java script document in my java script folder. In my Images folder I have another folder called slideshow, and then within slideshow I have my images. So basically what Im asking here is am I saving everything corectly for it to all talk to each other? And also given the info I just gave on how my folders are set up, how would I link my images the right way in my html document. Thank you very much!
1 Solution
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I would name your folders

javascript (or just js)

to link an image you would use the code

<img src="/images/myimage.jpg" alt="description">

Open in new window

All together like this
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="/css/sytle.css" rel="stylesheet" type="text/css">
<script src="/js/myJavascriptFile.js"></script>

<img src="/images/myImage.jpg" alt="description">

Open in new window

EirmanChief Operations ManagerCommented:
If you are using a program such as dreamweaver to create, modify and upload a website, all you need to do is nominate a folder (eg. website3) as the website (called a site definition) and everything in that folder including sub-folders becomes part of the website.....

               RAW FILES *
               TEMPLATES *


In the above example. folders are bold. I have only shown folders for website3. Folders marked with * are masked (cloaked in dreamweaver), which means they are not published to the web and are just convenient local folders.

index.html is the only file in the root of website3.

This way. it's easy to switch between websites 1,2 & 3 without getting files mixed up. All files whether published or not are within the same folder structure, for that website.

Once you add a folder/sub-folder or files, they automatically becomes part of the website .... ditto if you rename, delete or move files and folders

I'm pretty sure that other webdesign programs will do the same/similar.
You can even use the same type of grouping of folders, if you are purely hand-coding and ftp uploading with for example, Filezilla.

If you can't lay your hands on dreamweaver (which ain't cheap), I suggest that you ask another question here, looking for a free/cheap alternative, that organises websites like dreamweaver.
There is no hard and fast "standard" about how and where to save your files, however there are some general expectations about folder names as given by padas.  Notice that he used lowercase folder names and removed the space from the "Java Script" folder name making it "js".  The shorter the folder and file names the shorter the resultant URL (web address) for links and to pages.

A space in a file name or folder name is replaced by   %20   and this leaves you with some very hard to read URLs.  If you really must have a break of some kind between words in a folder or file name, then preferably use an underscore or (a personal dislike) a hyphen.

Some other things to try and avoid or observe.

Try to split the content into separate and logically named folders.  This is really dictated by the nature of your site, how many pages are involved, and so on.  When you do a File > Save As from a browser and choose "Web Page Complete", it creates a folder for the files with the same name as you saved the HTM/HTML file and appends "_files" to the name.

That same logic should persist when you are creating your own web pages, but the naming convention is up to you and you may instead choose to have all your images for all pages in one "img" or "images" folder.  What you DON'T want to do is create separate css and js sub-folders for each page.  That defeats the purpose.  They should all be in folders right off the root of your site (or project folder while working on it), and if you use a different css or js file for just one page for a particular reason, try to name them in such a way that you would know what they are for just by looking at their names in those folders.

Consistency in file naming helps to keep things manageable.  While you want to keep file names short, they should have some logic to them.  If you have a web page that shows thumbnail images and they load a larger image when clicked on, then you could name the thumbnails "th_ImageName.jpg" and the full sized images "img_ImageName.jpg".  Some people use "small" and "large" in the file names, and others actually add the pixel dimensions (width x height) like this "ImageName400x300_001.jpg" and "ImageName1600x1200_001.jpg".  Whatever way you start out, try to be consistent as it will help you to stay organised.

If you are creating single web pages in a simple editor or hand coding in a text editor, then start out by creating all your basic folders with the essential css, js, common image files (eg. banner), etc before you even start typing the first word.  For each new page you are about to start, try and decide what folders you need for the files before you start, and create them.

What you want to avoid is a folder hierarchy that goes too deep, and then have linked files about 6 folder back towards the root.  That creates long URLs with too many ../../../../   for each folder level that it has to go back up for the file.  For static files that are loaded at the start (css, js, common images), it doesn't matter, but if you were trying to read the URLs for images used in a slideshow gallery or something, it would be hard going.

Hyperlink URLs can be "absolute" or "relative".  You will only really see absolute URLs for files outside the web.  View the source code for any Experts-Exchange page and you will see all of these up near the start in the   <link rel="stylesheet"   tags.  Absolute means that the entire web address, including the  http://www  is given.  A relative URL is the path forwards or backwards (down or up) the page has to go to get the file.  Forwards is as padas showed earlier.  Backwards (back up towards the root) uses a ../ for each folder that it has to climb through, and if it then stops and goes forwards/down into sub-folders, you would then start getting folder names before the file name.  Experiment with this and you'll get the idea of what to try and avoid.

Good luck.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now