Organizing your web project properly is very important

The first step before downloading or creating your website should be to set up your folders.



This method will show you how to organize your website projects so that you will be successful in your web endeavors.
You will learn how to create a project folder, which will contain your website folder and additional folders which will hold the original content for your web.
These additional folders will hold raw pix which have not yet been processed for the web; research that provides you with source material for your text; notes which help you to focus your project; original unprocessed (unrendered, unexported, raw) files and more.

You will discover as you progress with your website that a great deal of source material must be transformed or processed before it is put on the web.

Below are screenshots to show you how to do this using a windows machine.

Here is the view of My Computer. We are placing our webs in the E: drive, which is an 8gig flash drive.
We prefer to use a separate drive for our projects but if you don't have one, you can use My Documents

1.
My Computer

We use a separate drive for our web projects



Although we are using the 8g USB Webs Drive (E:),
the pic below shows how one can organize one's webs using the my documents folder.


2.
Begin by right clicking and choosing New, then Folder





3.
Now you have a New Folder




4.
Notice that the name "New Folder" is highlighted.
Rename " New Folder" to "webs"

We use a separate drive for our web projects




In the picture below you will notice the name of the folder is in the upper left corner of the window.
This tells you which folder you are in. Now, inside the "webs" folder you will create your project folder.

Now open the "webs" folder and create your first

5.
Project Folder

by repeating steps 1. & 2.
You now have another "New Folder". Rename it "p_mynewthoughtcenter.org"
Remember to use your domain name in the place of "mynewthoughtcenter.org"






Within your project folder you will create at least three folders.
The first one will be your web folder, name it _mynewthoughtcenter.org
Remember to use your domain name in the place of "mynewthoughtcenter.org"
Then create a "pix" folder and then a "research" folder
This helps us to separate source material from files which will go on the web.
For instance in the pix folder we may put raw photos which will be formatted for the web
before being placed into the images folder in the website folder.
If we put raw (unprocessed) photos into the website folder (_mynewthoughtcenter),
this will slow down our web and be confusing later on.

We only put processed images into the images folder.
In the project folder below, we can see that there are several folders.
The website folder is named _mynewthoughtcenter.org
There are also other folders: pix, and research, but you might also have notes, and scripts

6.
Within your project folder you will create at least three folders.
The first one will be your web folder, name it _mynewthought




Finally, in the picture below, we see the contents of the website folder. It contains an images folder and the htm files.
The images within the images folder are "dependent files"
meaning they depend on the .htm files to display them on the web.

As we develop our website, we will find there are other dependent files
such as the .swf files or "swift" files which are exported or rendered from .fla files or "flash" files.
Swift files are typically about 1/10 the size of the original flash files.

7.
Finally, in the picture on the right, we see the contents of the website folder.

You do not need to create any of these folders or files!




As you develop your website, you will understand why it is important to use this clear and simple method of organizing your files.

This simple and effective way of organizing your website will keep you from losing important documents.
Your source material will be outside of the website folder and available for you to return to should you need to make changes to the rendered/exported files which you will be using in your web.

This is especially important concering working image files with layers.
For instance, an Adobe Photoshop PSD file has layers
PSD files are thus much larger than the exported or rendered jpg or gif files which you will use in your website.
Fireworks PNG files are also normally much larger than the exported or rendered jpg or gif files.

To reveal the source code of this page and the comments.
Right click on the page and select "View source" if you are using Internet Explorer
Right click on the page and select "view page source" if you are using Mozilla's Firefox



Browsers

Home - History - Linking - Organizing - Site Map - Resources on the web