Lesson 8 - Putting it All Together
Step one: Organization
Before we can start creating anything, we have to figure out what we are creating and why. The first thing you must consider is what's going on your site (content). Will you be including a bio page? How many galleries with how many images each? You will want to create a definitive list of all content and images that will be going on your site.
Once you have your list of content, it is important to arrange all your content into catergories. This also includes catergorizing the HTML files you will create. Keep in mind that each image will be on its own unique HTML. The catergories will translate directly into your file structure. For instance, all your main catergories and galleries should get their own folders so they you can easily access and organize all the files that will fall under that catergory. "gal1" can be a catergory (folder) that contains all the html documents for the images for your first gallery. As always, make a folder for your images and one for your stylesheets.
Remember: never put spaces or capital letters in any of your folder or file names!
Well now we have a perfect file structure ready for filling. But first we have to figure out what the filling is going to look like. I always like to visualize the look and feel of my sites on paper first. If you come from a drawing background, this is the easiest way to let your natural instict assist your design sensibility. The main point here is to divide up your design on paper in a way that allows you flexibility in the styling later. This means setting up all your Divs, Lists, and Headings. It is important to visualize the design now so we can write the HTML in a way that can be styled flexibly for that design. There are many things to consider, but the most important thing is how large your images will be (including any image replacements you might be considering).
When we visualize the page, we have to consider who is going to look at it. The standard monitor size is 1024px X 768px so we have to make images that can fit into this screen size (including the heights and widths of any Divs sharing screen space). Knowing this we can create a space for our image that will be the maximum width and height that the image can be to fit within the design. We will call this our content area. If we are using thumbnails we also have to consider how they will fit into the scope of the page and make a standard size for these.
Step two: Setup
At this point we know what we are going to create. Since we just determined our content area and thumbnail size we can edit the images to fit this size. At this point we can also find the right hexidecimal colors to use, make our image replacements, background images and anything appropriate for the design.
Step three: Making your master template
Now we our file structure set up, all of our content in in prepped form. We are ready to start making the pages. Making a template will make the rest of the pages a breeze. We already have a layout of the divs and structure from step one, so we can start coding the page with empty divs. For the elements that will appear on everypage, such as the title of the page, the main navigation bar, maybe a footer, we can code those into the template as well. For the elements that will change content from page to page, we can put in dummy text. Now, in the <head> element of your code, remember to put in a title and a link to the stylesheet. All these pages are going to point to one stylesheet, so it is important write that in the template. It is also important to include your Div IDs and whatever classes you want to use (certain pages can have unique IDs if you know you want to style those differently). It is also important to create links for your navigation anchors.
So now you should have a semantically written template for your page. Save it as template.html in your root folder. If you want to draw up a stylesheet now to work within the look of the page, that can useful too, just note that you have the power to change it at any time.
Step four: Making your sub-templates
Now that we have the basic structure of the page down we can start making our sub-templates. These are the templates for each catergory. If your catergory only has one page in it (like a contact page), then you can just make the page. In alot of cases, multiple catergories can use the same template! So for your catergories with one page, just fill in your missing content and, if you have to, update your links (hrefs and sources) to make correct paths from the folder in which you will be saving this HTML. Once your page is looking hot, save it in the right folder by the name your links point to. Remember that we can make links to places that don't exist yet, but will.
For catergories that have more than one page (like a gallery), we have to set up the content that will appear on all pages in that catergory, like the thumbnails with all the proper links. Once we set that up, we can save it as the template.html in the catergory folder. Now that we have our template for the catergory we can start making the individual pages for the images. This usually means adding an image tag in our content area Div. Each time you change the image, just resave it under a new name (the same one you linked to earlier). Bingo, you should have all your pages in no time.
Step five: Filling in the blanks
So you should all your pages complete. Test them out in a browser and make sure they all link to each other. Good. Now you have a perfectly semanitic site of mark up. Now is time to make (or refine) the stylesheet you already linked to. ALWAYS REMEMBER TO UPDATE YOUR LINKS WHEN YOU SAVE TO A DIFFERENT FOLDER.
Step six: Going live
Now is time to upload it. You have to have the same file structure on the other side so it will work in the same way. So if you can, drag all your relevant folders over and all the files contained within. If you can't do that, just create the same folders and populate them with the right files. Awesome, you've just gone live.