September 26, 2008 by Alexei M
Following on from last week, where I briefly outlined some of the ways one could plan and organize a CSS (cascading style sheet) for web design – from comments to structure; rules to declarations, this week I briefly outline how I work and the various methods I have for sorting the files and folders used in the web project I am working on..
Set-up
I usually create a number of folders prior to even starting on a web design concept… this is great practice if you can get into the habit of doing this, so that every website project you start, you know what folders you are working with and the general files associated with those folders. Here are some Examples:-
buttons (containing any buttons used for navigation elements)
css (containing the CSS files used for styling the site)
flash (containing flash docs (.fla) and .swf (published files) that are to be used on the project)
images (containing working files that are usually .jpg or .gif extensions)
js (contains any scripts needed – such as for flash elements or for form validation on the website)
psd (usually contains psd files that I am using or will need as templates later on in the design stage of the website project)
ref (usually contains FTP login details, hosting, resources, image links, notes etc)
On top of creating systematically named folders for each website, I tend to save my file names as relevant extensions of the related project;
For Example:
bg_header-fade.jpg
bg_wrapper-image.jpg
bg_enquiry-form.jpg
home_online-courses.jpg
home_course-dates.jpg
link_ceFA-course.jpg
link_interactive-course.jpg
by using the same prefix, I have essentially created a ‘grouping system’ for the files I am working with, and if I need to reference a background image quickly, I know that I can search for bg_(…..) and I am sure to find what I need very easily.
Organization, is an important part (or definitely should be!) of your web design project. By ensuring small things like the above examples are used as best practice, you will find that a lot of time can be saved.
This method of organization should really flow right through your working documents; from your folders and file names right through to actual css files, and the declarations, IDs and Classes contained within them (such as naming common ‘DIV’ elements consistently throughout your projects – #header, #wrapper, #content, #footer etc..
Related posts:
