Typography Assignment
I have documented the different steps needed to fulfill all the requirements for the completion of this assignment. As you review the different web pages you will find that the links in each Step Page do not work correctly. These pages are for display only. They allow you to see the style changes in the web page. To return to this page and follow along, you will need to use the back button on your browser.
In Class Exercise
The entire class worked on an assignment that Professor Petrik gave us. We started with an HTML page and a rudimentary CSS. Professor Petrik had us add background color, an image, put in navigation links and format them with different color bars. We also spent a lot of time trying to understand margins, padding and the layout of type on a page. She then gave us a task to "remove the white space between the header and the content." This seemed like it would be easy but it wasn't. My final solution was to put a margin around the class pixheader of -1em, 0, -1em, -1em. This moves the picture up on the page, effectively sliding the H1 and H2 down in relation to it. It also moved the picture to the left so the left edge of the picture would line up with the left edge of the navigation bars. Finally, it put a negative margin on the bottom which allowed the nav and content to move up on the page. I also put a margin around the ul of .25em. This overrode the default and moved the navigation bars up and alligned them with the header in the content. The final page is shown here. The final CSS is here.
After I was done with that I reviewed my site and decided that I liked the way the headers were offset in the doll assignment and created the same effect in my pages by mucking about with the paragraph margins. One thing I did notice, is that in my CSS assignment page I have two H1's, which Professor Petrik said is a bad thing. I decided to leave that alone but have fixed that problem in this page.
Step 1 - Beginning Template
This step would be a lot easier if I had an idea of what I wanted my final project to be. But in the meantime I decided it was going to be about something in the Victorain era, so I began to look for design elements that would match that era.
Okay, I think what I want my site to be is The Diamond Jubilee. A site about the celebration for Queen Victoria's 60 years on the throne. To make sure I could use some neat fonts I decided to begin with a modification of the doll page Professor Petrik gave us in class. I added a banner with the appropriate fonts and changed the background and tile. This took me about 3 hours. I am not able to make the fonts show up clear. I made the banner in Illustrator and put it out as a jpeg, a gif, pdf and then jpeg, and different combinations of those. Nothing looks good. Then I noticed that the gifs leave a little white line when put on top of the background so I went to try and get rid of that. The white line does not exist in Illustrator, but it definitely is in the gif when it is outputted. Well, I have to put in the quotes, pull quotes, etc., so I have a lot of work left to do. The site as it now stands is here.
Step 2 - Adding some Typography
After playing around with pictures, jpg saving parameters, and sizing the picture by using width and heigth, I got something that looks fairly decent. Important things i learned in this step was that not closing a CSS with the closing bracket will really throw off all of your formatting, browsers really do look very different (still have to review IE6), the use of great looking fonts is extremely difficult on the web. As you can see I gave up on rounded edges. I played with different images and just could not make it work with the diamond background. I added some pictures, and a pull-quote. I like the pull-quote, but I'm not sure if the background color works for the overall theme. The site is still pretty much without content but the look and feel is coming together. I used the purple and light brown for two reasons. The first is that the purple signifies royalty and the diamond background conjurs up an idea of the Victorian age, and the diamond jubilee for me. The second is that Professor Petrik hates purple and yellow with a passion and I wanted to see if this time period and event allows me to get away with it. The work in progress can be seen here.
Step 3 - Adding Footnotes
I had to add some footnotes so, like any good programmer, I stole code that already worked. I went to Professor Petrik's site and used her Super CSS work. Now you can click on the footnote, be taken to the endnote section and if you click on the note there you will be taken back to where you came from. The work in progress can be seen here.
Also, I was able to view my page in IE6 today. What a disaster. Step 4 will be to try and get this thing to display correctly in IE 6.
Step 4 - Making it work in IE6
Another 4 hours of my life dedicated to the Microsoft Corporation. I figured out that some of the errors had to do with the correct handling of margins and paddings and after I determined what was a margin and what was padding, I got those to work, and figured out I had messed up some padding on other areas so I fixed them also. Then I tried to fix my two columns. I have a content column and a Chronology column. Content was 75% of the width, Chronology was 25% of width. Works fine everywhere but IE6. The right column always displayed below the left, content column. So I gave up and made the content 74% of the width and now it works everywhere. The floating columns only add up to 99%. Hopefully someone can give me some pointers. The work in progress can be seen here.
The final page for this assignment is here.
