---

Step 17 – Coding Newsletter And Footer

Great, we are pretty far. We will leave a content area for now, because firstly we’ll make a blank (well, not really blank, but without a main part) html document (like we did with psd) and then we will build the content for every page. Our newsletter are will have a fixed size. Start from placing the guides on top and bottom (select newsletter gropu in layer’s window so they will stick) to cut out the backgrounds.

Now cut out the background for wrapper, save it as newsletterbg.jpg.

Check its height (or distance between guides) so you will know how big will be our newsletter area. In fact we could make it elasttic/fluid, but there is no need to do that. Now hide all the layers (with background) so you will have only an upper line (so called separator) and bottom shape. Cut it out as well. Name it newsletter.png.

Also take care about input background and newsletter icon. Here is a html code to apply.

And css for it. To fasten the work we will position everything with absolute values.

#wrap_newsletter{ width:100%; margin:0 auto; height:94px; background: url(graf/newsletterbg.jpg) repeat-x 0 0; } #wrap_newsletter #newsletter{ width:980px; margin:0 auto; height:94px; position:relative; background: url(graf/newsletter.png) no-repeat top center; } #newsletter h1 { position: absolute; top: 21px; left: 20px; } #newsletter p { position: absolute; top: 21px; left: 179px; color: #737372; } #newsletter #newsletterform { position: absolute; left: 335px; top: 17px; width: 196px; height: 36px; background:url(graf/newsletterform.png) top left no-repeat; border:0px; } #newsletter #newsletterform #newsletterinput { color: #686767; padding: 10px 5px 4px 8px; width: 150px; background:none; border:0px; } #newsletter #newsletterform .newsletterbutton { height: 13px; width: 13px; text-indent: -9000px; text-transform: capitalize; background: url(graf/newslettericon.png) no-repeat 0 0; border: none; position: absolute; right: 10px; top:12px; }
And the newsletter is complete. Let’s head to the footer. We will need one image here for background and one for button (with its hover state). I resign at this moment from the contact form in the footer for we will create one in Contact page. However we will cut out the button now. Ok, cut the bottom part of gradient (name it footerbg.jpg) and create a button the same way that we have made call-to-action button (name it darkbutton.png).

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21