Styling

CSS Zen Garden

The CSS Zen Garden experiment — changing only the CSS file and not the HTML — came out better than I expected.

I did change one item in the HTML file: the name of the external style sheet referenced, to make sure it was using my customized external style sheet.

To get my bearings, in the CSS file I replaced the background images of each main section and div with a different background color so I could visualize their positions on the screen.

The resulting page looks like this

I adjusted the sizes and positions of two boxes (divs) by changing the margin-top, height, and width. I changed H1 and H2 spans from display:none to using a color attribute, and noticed that the text displayed where it did not before. I finally “got” how to put an image in the Container div and make that the background image of the page. I found that I had to declare a width for the main text divisions, to keep them within a reasonable width and not be covered up by the links bar on the right side.

Just by doing those simple things, I got a result that actually looks close to some published commercial websites I’ve seen. After seeing how it looks with color blocks for main areas, I like the color-block design look. I’ve seen other websites that did this with tables, but css is more flexible.

Although the result so far is a “masterpiece in progress” rather than a finished masterpiece, it is going to be useful. I will use it as one of the mock-ups for my final project website, as I get feedback from the client group on various designs and color scheme possibilities prior to actual development.

The experiment is located at:

http://senna.sjsu.edu/kneufeld/mason/zengarden/zengarden-sample[1].htm

Mini Web Site

I’m pleased with how the mini website with its liquid design has turned out. This one is overall more successful than the CSS Zen Garden experiment described above, I think because I started the html and css from scratch rather than modifying someone else’s. It is a three-column layout, and I learned that I had to make all three column divisions float:left in order to get them lined up. I also learned that I needed to keep careful track of my images. I wanted to not repeat any images, and when I was almost done I realized I had used the same image in two places. This was only a problem because it did not meet my own “style guide” for the site.

At one point I could not get the positioning as I wanted it. The Learn CSS Positioning in Ten Steps tutorial was a great help and cleared up my misunderstanding by going step-by-step. Creating the sub-pages gave me an opportunity to design another template based on the home page but distinct, so users will differentiate the sub-pages from the home. One feature of the sub-pages is a logo at the top left which is clickable to return to the home page.

The mini web site home page looks like this

I used the information in Castro chapter 12 as a basis for creating the navigation buttons. Can’t wait to learn how to create dropdowns or flyouts for sub-topics. On the Admissions page there is a table. I used the CSS Table Gallery for ideas, but simplified the design and added my own colors. It was useful to see how to create ids for odd and even rows of the table, to apply different styles to them.

For the visual design, I was aiming for a “natural, homespun” look to contrast with the look of the CSS Zen Garden page shown above. I used GIMP to create the canvas-like background image. This mini web site will also be one of the mock-ups for my final project.

The mini web site home page is located at:

http://senna.sjsu.edu/kneufeld/mason/personal_page6.html