WEB AND PRINT// ISTD/ Website Stage 1

 Today I started the construction of the actual website using dreamweaver. I used and refined my scamps during the process, as technical limitations which I did not consider when mocking up the first drafts came to light as the site progressed.

 Firstly I added the container, a box for the title to sit in and 'box1' which would fit within the container and contain one set of two images. This is where I realised that I would not be able to code around 20 boxes to fit in an open box space. I redrew the large red area here into three columns which would order the images on top of each other and also deal with left-right alignment.

 Here you can see the columns have stacked up with the title bar on top. I have also given the website a short term height of 1242px while I work out how many images will be ready to include. This is not a problem at all as the website could theoretically be updated with new content every day; more content, more height needed.

I have also got the website to float in the middle of the browser window by adding a short amount of code. It shouldn't matter how large the users screen is, the website should always float in the centre as long as the screen is equal to or wider than 1024px.

 By adding position:relative and float:left to each section of the website the columns are no longer stacked and sit next to each other within the container. im happy this worked first time...

I've mocked up this blackletter header for the website in Illustrator. It is based on the typeface that a group crit revealed was the most popular. I did change it however because it was likened to something the nazi's would use. This font looks a bit more like something Kiss would use.

Here I have converted the index file into a template file (which is automated when using windows somehow), this has allowed me to add editable regions in the template and in turn add the title.PNG file. As a png file it does have a transparent background so the grey container is visible beneath.

Editing out this problem in CSS is easy by changing the background colour to FFF or white.

So this is my progress so far. I have basically set up the whole site and just need to pour content into it. It really shouldnt be hard to have this finished by tomorrow. The blue boxes are just for my reference by the way. Once the content has been added I can change them back to white.