Building a Website from Planning to Photoshop Mockup to HTML/CSS
37
Building a Website: From Planning, to Photoshop Mockup to HTML/CSS
Transcript of Building a Website from Planning to Photoshop Mockup to HTML/CSS
Building a Website: From Planning, to Photoshop Mockup to HTML/CSS
Notes from Client Mee/ng
Planning:
Wireframe & Site Planning Phase: Explana/ons of Pages & their Content
Mockup Versions
First Mockup Second Mockup
Mood Board created aBer another client mee/ng:
Start by creating a folder for your images:
It is important to keep your layers organized so when you are ready to slice your site you can isolate each area. Here is just the blank content area and the background.
And here is the background, the <body> of our website:
Start with the bottom layer of your background, and work up. Because the graph paper repeats the entire height and width of the background, we can create a tile, and have this repeat.
Once you select the area you want hit Shift + Command + C This copies the contents of all visible layers into clipboard – that way if your background is made up of more than one layer, or if you aren’t on the right layer in Photoshop, it doesn’t matter.
PC: Control + Shift + C Or Edit > Copy Merged in the Photoshop toolbar
Then create a new Photoshop document, by default it will create a document that is the exact size of the image that is now on your clipboard. Hit ok and then paste the image onto the new document.
Then save your image by going to File > Save for Web & Devices… This image is very simple so GIF is the most appropriate format to save this image as.
Be sure to save the file in the folder you created for your images and name it something that is simple & makes sense. Do not use spaces in your filename. If you must use spaces use the underscore. Example: grid_bkg.gif
I want to save the Post-Its as one image. I turn off the background layers so that I have a transparent background. This is the perfect time to use Shift + Command + C because these Post-It notes and the scribbling on them are all in separate layers. Also Shift + Command + C will keep the transparent background.
By default, Photoshop will give the first layer a white background. Turn off the layer’s visibility if you want to save your image with a transparent background.
Since I want to keep the background transparent, and I also want to keep the dropshadows on the Post-Its to look smooth, PNG-24 is the best format to save this image as.
Once you have all your images together, it’s time to start building the website. When you open Komodo remember to use File > New > File from template… and choose HTML. Remember to save your file to the directory you created for your website.
Site Directory
Remember to keep your image folder inside your site directory!
Don’t forget to link your HTML page to the style sheet!
Then create a style sheet (.css file) by going to File > New > File from template… and selecting CSS from the templates area.
First, I’m going to start with the very bottom of the background, the grid pattern. Notice that I don’t have to specify background-repeat because by default the background image will repeat x & y, starting from the top left corner (0,0).
The background can have multiple images. It works the opposite way you would imagine it would – the first image listed is the topmost image, and the last image listed is the bottommost.
body{ background-image: url('img/postits.png'), url('img/gridbkg.gif'); background-repeat: no-repeat, repeat; }
body{ background-image: url('img/banner.png'), url('img/postits.png'), url('img/gridbkg.gif'); background-repeat: no-repeat, no-repeat, repeat; background-position: 50% 10%, 50% 290px, 0 0; }
body{ background-image: url('img/banner.png'), url('img/postits.png'), url('img/gridbkg.gif'); background-repeat: no-repeat, no-repeat, repeat; background-position: 50% 10%, 50% 290px, 0 0; }
Next I add a #content div to index.html and style my #content div in the CSS file. Once I have my content div styled, I can then make adjustments to the background image to make sure they are behaving correctly.
Added margin:auto; to ensure the content div stays at the very top of the page
But the design calls for a dropshadow on either side of the content div… how do we solve this problem?
A CSS dropshadow isn’t always cross-browser compatible and doesn’t have the nuance in gradation and image has so I’m going to create a background image.
I’ll save the image for web as a PNG-24 to keep the transparency of the dropshadow.
#content{ width: 1014px; background: url('img/contentbkg.png') repeat-y center; height: 1000px; margin: auto; }
#content{ width: 1014px;
The actual content area is 960px but to account for the border (20px each side = 40px) and the dropshadow, the width is expanded to 1014px; background: url('img/contentbkg.png') repeat-y center; Here I am using the background property that is a shorthand property. Because I’m only working with one background, I have my link to the image, repeat-y because the background is only repeating vertically and center so that the background image is centered within the div. height: 1000px; For now this height is an arbitrary height, it is just giving me an idea of how the content div will behave once I fill it with content. Without this height, it would be too small to give a sense of how the page will look. Usually you don’t put a height on your content area because you want the content to fill the area and allow for the flexibility of pages with a lot of content or pages that have little content. margin: auto; This ensures that the content div is in the center of the page. }
Breaking down the code:
Now I’m star/ng to put all the pieces into the website. I always start with the logo aBer I finish the background. Generally you want to start from the boKom up and from the top down. You can add thing as you want, but it does make it easier to keep track of your code and where you are placing things. No/ce I added the “ALT” for the image so that screen readers would read “INI Logo” – it also helps for search op/miza/on that you label all the images with an alt.
<div id="logo"> <a href="index.html"><img src="img/ini_logo.png" alt="INI Logo" border="0"></a> </div>
To make the logo into a link, simply nest the <img> tag in a <a> tag.
Images that have a link around them will some/mes appear with a default blue border there are a few ways to fix this, but I generally use border=“0” in my img tag.
To make the logo appear like it is in the mockup – with it seeming to be up past the edge of the page, I use posi%on: absolute; Remember, in order for it to posi/on rela/ve to the content area, you must add posi%on: rela%ve; to the the #content div. If you didn’t add posi/on:rela/ve; to the content div, the logo would posi/on rela/ve to the <body> and it would appear to “fly off” the content area. Using nega/ve values in your posi/oning helps to get elements past the boundary of the div its within.
I start to add in and style my #nav div – but it looks like a mess! How do I fix this? The answer: MATH
The design has a margin of 20px between the yellow border and the content within the page. So we need to put in some padding on our #content div – but that effects the width of our content div. Time to pull out the calculator…
#content{ width: 924px; background: url('img/contentbkg.png') repeat-y center; height: 1000px; margin: auto; position: relative; padding-left: 45px; padding-right: 45px; }
To account for the dropshadow + the border on the background image of the content div we need a padding of 45px to create the illusion of a 20px padding in the content area. Then to account for the 90px of padding we need to take subtract 90 from the 1014px width. Resul/ng in a new width of 924px.
To get the font that I used for the naviga/on I used hKp://www.fontsquirrel.com
#nav ul { float: right; margin-top: 8px; padding-right: 20px; } #nav li.menu { display: block; float: left; font-family: 'bignoodletitlingregular'; font-weight: 100; font-size: 30px; padding-bottom: 10px; } #nav li.menu a{ text-decoration: none; padding-left: 30px; } #nav li.menu a:link, #nav li.menu a:visited{ color: #fff; } #nav li.menu a:active, #nav li.menu a:hover, #nav li.menu a:hover{ color: #E6D41B; }
To style the naviga/on I used similar to the code I used for our dropsite tutorial.
