This course take you through a completed design to a constructed fixed width website with the Karma Wizard. Here we introduce more "why" behind what we do. You will learn to do the following:
I've named this design "Parlor" and you can work along with me by downloading the .zip file below that contains the font used, original .psd, and the sliced and prepared images and animations.
I've designed a draft of a website and now it's time to turn it into a website. You'll see what we're shooting for pictured. It's a 2 column fixed width site with vertical links, header, clearing footer, and patterned or tiled background that stretches as far as the browser window allows.
Launch the Karma Wizard by clicking the "Launch The Karma Wizard" graphic on the side with the blue animated swirl. This will cause the control panel to open and the design to wipe clean.
First take a look at the layouts in the Wizard and figure out which is closest to the mock-up or draft you've done in your graphics program. I've chosen B-2 since it looks the closest to what I've done.
To choose a layout in the Wizard:
The draft I've done doesn't have a photo so I should decide where a photo would go if the user chooses to upload one or if I want to disable the uploaded photo all together. In this case I think I'll disable the photo entirely since I don't want a photo in the header and that is the only place it can be if the main links are vertical.
To disable the photo place do the following:
Now click the "apply changes" button to see how the layout effects the content.
When preparing images I always start with what is on the bottom layer. Here we'll begin with the image used for the repeating pattern that looks like wallpaper. Be sure this image is top centered in the design before you begin any other slicing. This means that if the pattern didn't repeat and you only saw one it would be in the very center and aligned to the top. Notice in the .psd file we have a horizontal guide placed in the very center of the canvas so images can be snapped if need be. Save the image to a place you'll remember.
Repeating in both direction is the default so unless you're overriding it you won't need to explicitly set it. You should set the background color to whatever you want the background color for your pop-up pages, splash page, and flash intro to be. For these pages the background image will be disabled unless you explicitly set a background image.
Because we have pages where the background color for the body is shown, we need to be sure that the text color over it contrasts enough to be readable. I'm going to set it to black. Because I want the site's text to appear black on all pages to the reader (not just the pop-up, splash, and flash intro) I won't have to set it again. All other parts of the site will have that colored text unless I set it to something else.
Crop the original .psd to the edge of the drop shadow. Do this by making the tiles background invisible and cropping any transparent pixels. This is found in image/trim... then "trim transparent pixels". Once the file is trimmed, make the pattern background visible again. Make any content except for the white layer entitled "page" visible. Disable the raster mask on the page layer.
Create a slice the width of your file and as high as your pattern background image. In this case it is 248px high. You can find the height and width and change it by double clicking on the slice. Name the slice something you'll be able to identify, and save for web. You do this by clicking file/save for web... I named it pagebg.jpg.
When saving your file experiment with file formats and notice the differences in quality and file size; The two don't necessarily corrolate. You want to get the best looking image at the lowest size and if possible keep background images under 40k.
By default our content is liquid meaning it expands as far as we stretch our browser window, but the background image suggests that we need a fixed width site. Because our page background with the drop shadow extends farther out to either side than the comfort zone for 15" monitors not to trigger a scrollbar, we need to look for a better option than putting the width on the primary wrapper. Placing the width on that same layer (Primary Wrapper) would definitly be the easiest thing to do, but not the most accessible.
I choose to make the site more accessible and place the width on the secondary wrapper. Unfortunately doing so triggers some kind of crazy bug in IE6 when in conjunction with the layout method we've used. Thankfully there is a work around. By placing a pixel width on the content wrapper equal to the width of the secondary wrapper and a negative margin on the content wrapper one pixel less so the footer clears in IE6 will do the trick.
Since we want our width to be 790px wide, here's what we'll need to place in the Custom CSS area directly under our last entry:
Now enable the mask for the page layer and make the elements in the header visible except for the site title since that will change and doesn't need to be in the background images. Make your slice so it covers only the header up to the edges of the graphic. This makes this slice 790px wide and 125px high. Because this slice is the widest point of our content we've chosen to make the site that wide as well.
We have one image to go: the divider between the main links and the content. I'd like to put a little "bling" in the design, so I'm going to animate this small part. It doesn't have to pull content via XML, so we can simply upload it as an auxiliary file and insert it as a hook.
Your new file will be listed below the input fields. Copy the "hook path".
Go to the Custom CSS area, and below your previous entries place the positioning for your image:
div#divider { position: absolute; top: 109px; left: 212px; }
Apply Changes.
Now we'll need to set the graphic fonts for the header, main links, page titles, and teaser titles.
For graphic font header, do the following:
For graphic font main links, do the following:
For graphic page titles, do the following:
For the teaser titles I've decided to leave them as plain text. To acheive the same look, do the following:
Apply Changes.
As you will quickly be able to tell, some adjustments needs to be made. We need to move the left column divs over to the right, and content over to the right while moving the right side of the content in a bit.
The default width for the columns is 200px wide. I want to keep that width, just move them over so I'll need to put a left margin on the two containing divs: main links wrapper, and teaser group 1 wrapper, as well as a left and right margin on the footer, content, and teaser group 2. While I'm at it I'll put a graphic below the menu with some padding so it appears as a divider.
Apply Changes.
Now we'll need to make some content beautifications so everything has a nice finished touch to it.
These are the general style that is applied to the buttons that take you to "archive" or "latest" or something similar.
These are the activated buttons.
These appear as the news entry titles, amoung other things.
This is the style applied to the very top row of the tables.
This is applied to all the table cells where a border is in action. By default Firefox and Safari will render it as the body text color while Internet Explorer will render it white.
Congratulations! We now have a finished and working website. All you need to do now is to save the file. Here's how:
That's it! Have fun :-)
