Keeping track of your site files will help you be more
productive in the design process. This is especially true if you have
a big site with several sections. Another good reason to stay organized
is apparent when moving your files to your web host.
Your host server is nothing more than a computer with
a hard drive and as such, the directory structure on a server is the
same as on your computer. A server's hard drive is organized into files
and folders just like yours. The files on the server are called the
remote files and the files on your computer are called
local files.
When you transfer your site for the first time, all
the files and folders in your sites local folder will be sent to the
server. Keeping the same directory structure on both the remote and
local drives makes it easier to update your pages if needed. The example
below shows a sites directory structure.
The files on the left are the remote files sitting
on the server. The files on the right (green) are the local files. Aside
from the webstat folder, both the remote and local directories are the
same. If I decide to update a page in the gallery folder, I'll know
just where to upload it on the remote.
The example above is the site for Vasilis Designs.
There are five sections on this site: downloads, gallery, musings, extras,
and tutorials. Each section has it's own folder with pages and files
related to that section inside. This makes things much easier to keep
track of when updating or adding to the site. Imagine the mess if all
the HTML pages and images were in one folder!
One more thing to remember is when you start to link
pages and images to each other, those links will stay that way on your
page regardless of where you put it in your site structure. A link on
a web page simply tells the browser where to look for the linked page.
If the page you are linking to isn't where it's supposed to be, the
browser won't find it and your visitor will get the dreaded 404 Error-Page
Not Found message. Thus the importance of making sure pages and files
are where they are supposed to be.
All this will make sense as you move forward and begin
to add more pages to your site. Let's create our basic site structure
now.
1. Using Windows Explorer, create a folder on your
drive and call it My Site.
2. Add two folders underneath it and call one gallery
and the other downloads.
3. Inside the gallery folder, create a folder called images.
Do the same for the downloads folder.
This will be the site structure for the web site we'll
be designing throughout these tutorials.
If you are planning on doing these tutorials from start
to finish, create another folder (outside of the above) on your drive
called MY Site Files. We'll be using this folder to
save our projects after each tutorial. Now that we have our site set
up, let's start creating!
Creation and Design:
Opening A New Web Page
