Saturday, July 31, 2010

Converting Tables to Divs

Converting tables to divs is a lot more difficult than I thought. I was trying to convert this page's tables to divs. It took me hours and hours of staring at this stupid table, brainstorming and browsing online tutorials to find the answer. The problem was that there were too many answers and none that were specific to my problem.

So I made up my own way that looks like this. I made one main div that held two alternating divs and then created a class to turn alternating div rows gray. I am not sure if this is in any way correct but it seemed to work for me. The only problem I have with it is that I can't seem to figure out how to make the dark gray date bars go the length of the content. Any help?

Tuesday, July 27, 2010

Measuring with the Box Model

I have been studying the Box Model for calculating the space any box will take up on a site. A box in a website is just a container that holds things like the text or images. This means that if you want to put some text on the page, you will have to calculate the area the text will take up, the padding, the border and the margin space. The total area can be best shown by the illustration below:
For example, If my content is a width of 200px, I put 15px padding, a border of 5px and a margin of 5px, my content box will be a total width of 250px (200px wide + 2(15px padding) + 2(5px border) + 2(5px margin).

Creating Elastic Type

As I mentioned in my previous blog, I have been studying elastic text in designing my new website. This is a sample of what I wanted to accomplish using css to optimize the flexibility of my text:
I accomplished this by creating a page with simple HTML and an attached style sheet.
My style sheet specifies what each element of my text should look like.
To see the sample page click this link.

Converting Pantones to RGB

Hello Blog,
This week I have been working on color schemes, Pantone conversions, the box model and playing with type size. It has been a very busy week for me.

First off, I have chosen a color palate for my website in Pantone colors and found what those colors were in the RGB color mode, which is the view mode used by computers. Below you will find my intended color scheme and it is RGB! I chose this color palate to reflect my new-found passion for web design.

Tuesday, July 20, 2010

Timeline for Website Design Project

This is an eleven week project that I began last week. For Week 1, I began the initial design layout of my new site and did some research on other sites to see what was possible in the world of xHTML and CSS. This is my projected time-line for the following weeks:

Week 2: Create tutorial page and find the answer to the pull-out tabs needed for my site. Create ghost structure for site. Choose colors for design.

Week 3: Begin adding content to site to make separate pages. Test to see all is well and working; links are functional, content viewable.

Week 4: Fine-tune design to meet initial design. Evaluate and revise. Post revisions.

Week 5: Impliment revisions, incorporate any new tools learned in the process and experiment with new ideas.

Week 6: Add portfolio content - Find images. Create thumbnails and optimize. Create large images for viewing and optimize. Use Lightbox to organize images for easy viewing.

Week 7: Continue adding Portfolio content from Week 6 and evaluate to ensure usability.

Week 8: Re evaluate design and functionality. Focus on how to make the site stand out from the crowd. Print pages, make notes, post and work on revisions.

Week 9: Add the finishing touches. Test, revise. Test revise.

Week 10: Make sure all is working and beautiful. If it is not, now is the time to fix it!

Week 11: The Project Is DONE.

Sunday, July 18, 2010

New Rough Designs

I have been working on some designs for my new website. So far, here are two of my rough designs:

Here are some of my inspirations:

http://www.loukotka.com/portfolio/maven.php - I like the tab contact navigation on his site. I want to have all my tabs similar to this one with icons on the left side that pull out to expose text.

http://www.shiftedpixels.com.au/
- I like the way this site handles the content. I want to have my content have tabs and slide like this one.


Wordpress doesn't like me much

So this is my new blog. I attempted to create a blog on wordpress.com but they suspended my account. This is where I will be posting my web design projects and such from now on. I just hope that this time I can avoid suspension.