Week 15 Summary

This week was entirely focused on finishing my website. It was pretty exciting seeing things come together and begin working functionally as I had envisioned weeks ago when I designed the comps. For a while I was having a hard time really grasping compound selectors but they finally started making more sense to me after 3 weeks of experimenting with site building. I think my confusion was worsened by the fact I’ve been using CS4 instead of CS5…it seems to me like the selector names generated by my version of the software are more complicated/wordy than what CS5 is inclined to make…and the extremely long compound selector names definitely were intimidating me.

I also have a better understanding now of how to wrap CSS rules around an element using the DIV and Span tags. At the beginning of the week I struggled a bit with this because I forgot about the DIV tag. I thought that in order to apply a class or id to something it had to be applied with something like a paragraph tag, or another tag which would somehow alter the content I was applying it to. I wanted to build my thumbnail galleries by wrapping padding around each thumbnail and the caption below it, and then floating the combined elements next to each other. I could not remember a way to do this at first so I tried making my galleries with tables. I looked at some other art sites online and tables seemed like a pretty common way to do that, so I decided to follow their example. Watching the Lynda.com tutorials showed that inserting a table was very easy to learn quickly. I did almost every portfolio page with a table, but received feedback that it would be better if I used CSS to build my galleries instead of tables (which did not surprise me) so I started over on the gallery building and tried harder to figure out how to apply a CSS rule to multiple elements. Looking more closely at one of our earlier homework assignments helped me remember how to do it. I was much happier when I got the galleries put together using floats and padding. The tables seemed like they would be a real hassle to update. When I add new art I will want to make the newest item come first in the gallery, and when styled with CSS it will be easy to add a new element anywhere I want. With a table I think it would only be easy if I wanted to add something to the last cell of the table. To move something in front of the other table elements looks like it would take a lot of tedious code shuffling (and seems impossible to do from the designer mode).

I did have one major stumbling block this week which I still have not figured out. There seems to be something in my code somewhere causing something in my sidebar to interfere with the floats I place in the main content area. I built my galleries by putting a ‘float left’ on all the wrapped elements so that they will all float next to each other. I had a clear float at the end of each row. The first clear float seemed to be interacting with the sidebar somehow, because my second row of thumbnails would get pushed down below where the sidebar ends.

At first I thought I had fixed the problem because I noticed that the links in the sidebar had unnecessary extra tags on them (caused because I inserted the rollover images while in design mode, and the software thought I was adding paragraphs). When I deleted these extra tags for some reason the main content area adjusted back to how I wanted it and everything looked fixed. But a short while later the gap between the first and second rows of thumbnails had reappeared. Then I thought that maybe the problem was that the div box making up the sidebar itself is floated left…but adding a clearfloat inside the sidebar or after the sidebar div only caused the entirety of the main content area to get pushed below the end of the sidebar.  Everything I could think of trying only made my format more messed up instead of better. I compared my code to a new unaltered default of the ‘CSS fixed width 2 column with header and footer layout’ and the code for the sidebar was exactly the same as what I had (minus the interior content). I am completely stumped. In the end I just resorted to removing the ‘clear float’ tags at the end of each row, as I intended for my floated thumbnails to fill the entirely of the box I had them in, and the size of the box wrapped around them forced them to line up exactly how I wanted without breaks. (I kept a clear float after the last of the thumbnails in each gallery.) This seems to me like it works fine for my current set up, but I am unhappy I didn’t figure out what was causing that one issue since it means I can’t change the appearance of the rows of thumbnails without changing the size of the container they are in.

Beyond that though I am very happy how everything came together. I really really like the ability to insert image rollovers with javascript. That is extremely cool. I loved how easy updating uniform sections of the site became when I made templates to build the pages. I made an additional graphic for my contact page (an envelope and pen) because that one part of the site looked too empty to me. I think it is awesome that CSS allows you to even adjust the kerning of the font you use…I wasn’t sure that would be possible when I was making my comp. Overall I am really happy how close to my original plan everything turned out. I feel like I learned quite a lot through working on this project. I also found that I was increasingly more comfortable making my changes in code view instead of design view. I had a lot fewer issues when I typed the selectors in myself instead of inserting things through panels. It also caused me to remember how things worked a lot better.

Here are some screenshots of he finished website:

The homepage:

The main portfolio page will feature an image of whatever my newest piece of artwork is, so the graphics will occasionally rotate:

The pen and ink gallery of my portfolio:

The contact page:

I registered a domain name tonight (gnarlycat.com) hopefully by the end of the week I’ll be able to post a link to a live version of my site.

Advertisements
This entry was posted in ART 170: Web Design 1. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s