Okay so as I'm wrapping up this project, I have to say that I am very happy with it, but it was also very time consuming. I tried the photoshop approach for the sites logo and background, but that ended up taking alot more time than I had planned. I first tried to upload my custom logo and background and content area background, and realized even this was going to be a pain. Biggest problem with that was a constant issue with the spacing and size of the images. It really kind of ruined all the work that I had done and killed my layout idea. So I went back to the drawing board and am finally happy with how things came out. I set the site template to a blank slate, and in the colors and layouts section, I unchecked all of the "template defaults" and set them all to "none." This left me with absolutely nothing and gave me the range to arrange things the way I wanted. So now again my problem with having the background and content appear the way I wanted them to came back to haunt me. When you upload an image to google sites for a background, the image always appears the same size as it was saved, meaning that the background wouldn't resize accordingly, and therefore would look wayyy too different when the page was view on different monitors. So my solution to that was to create a background image that included the site background, top banner, and content area background all merged together. To avoid the problem of the image repeating or appearing too different on different monitors, I set the base layer (site background) to 1700 pixels wide by 3000 pixels high. Then I left about 30 pixels space between the top of the page and the title banner. This way the "google search" bar would fit nicely in this space on the website. Then I made sure that my content layer would appear as I wanted it too and where the content of the page was going to be. So after carefully mapping out my spacing, I got it just right.
The next thing that I wanted to fix was the navigation menu. Google sites only has the option of the vertical navigation in the left sidebar. But I didn't like the way the side bar appeared with my custom background image, so I deleted it so that the actual content would be centered in the page and fit well in its designated space. So now I had to figure out how to get my navigation to fit into my layout. So I made my own custom widget and added it to the site. I brushed up on my XML scripting, uploaded it, prayed, and thank god it worked. But my only problem with this was that I could only add the widget into the "content" section in google sites. But this would therefore Add the navigation bar into the white content area and screw up all the spacing. So I changed the site layout for the "header" space to be 200 pixels. This way the content (if it had a visible title or background color) would actually be overlapping the title banner. But I accounted for the titlle banner's height, the padding on the top, and where the content was actually going to appear. Then I saved the page and viewed it again (making sure to pay attention to how it looked when I previewed it as a viewer) and it works perfectly. Google search sits on top of the title banner, everything is centered, and the navigation menu appears just above the white background for the content.
Then I decided that I wanted a new little toy for the Homepage of the site, so I decided to create an Image scrolling marquee banner. Then I created individualized title images for each page and fit them into the design. Now all that's left is a few little tweaks to the alignment of the content, and everything looks good to go.
So bottom line with this project for me is that I spent a good amount of my time working in photoshop: 1. because google sites was too limiting, and 2. because I'm a perfectionist and I got a little carried away. But I have to say, I'm very happy with the work that I did in this project, and I think the site looks great.
No comments:
Post a Comment