Beruflich Dokumente
Kultur Dokumente
Now goto edit > define pattern label your pattern lines or anything you see fit. close that document
and revert back to your first document that you made. Create a new layer above your background layer
and label it background lines select the paint bucket tool at the top under the menu change forground
to pattern. Select your pattern from the list and fill your background with the line pattern, set layer
opacity to 10%. Now im going to start designing the general layout of our site starting from the bottom
and working my way up. Create a new layer labelled footer. Select the rounded rectangle tool with a
radius of 20px draw out your footer, select the rectangle tool and cut off the top.
Create a new layer above your content layer labelled sidebar select the color #e2e2e2 and create a
rectangle like the image below.
Now create yet another layer labelled navigation, select the rectangle tool and create a rectangle above
your sidebar and content area, have the bottom of the navigation touch the top of our grey sidebar.
The layer styles for the navigation are.
Create a new layer above your navigation labelled navigation shine. On this layer create a rectangle the
same width as our navigation but half the size of the width, fill with white and set opacity to 10% this
will give the navigation a shiney effect.
Now create another layer labelled header, create the header the same way as we did the footer but make
it a little bit bigger, head also uses the same layer styles.
Now select the type tool and add your website title, navigation text and footer text, ive also labelled the
grey sidebar box saying links here, you can leave that blank if you wish as the links will be added using
html & css.
Now add your website logo, i just created a quick one using adobes custom shapes, obvisouly you can
take more time to develop your own logo.
Now add some example content so we no what our layout will sort of look like, but most of it will be
done using css and html which you will see in a moment.
SLICING AND PREPING IMAGES:
Now our website is created we need to slice and prep our images ready to be used in our website, now
your going to have to bare with it as your site may be a few pixels wider or higher than mine unless you
have downloaded the PSD.
Firstly wel start with the header, hide ALL layers in your psd file except the header layer(s) create a
new blank layer above your header then goto layer > merge visable this will then merge our layers
corrosponding to our header but keep all the layer styles intact, eles everything goes abit mental. Copy
and paste your header, logo etc which should now be all on one layer to a new document. Under the
header layer on your new document add your white background and your stripes, simply by filling with
the bucket tool and creating a new layer and filling with your pattern, remember you pattern layer
should have a opacity of 10% just like in the psd. Now i want to add a drop shadow to the header so the
layout doesnt look flat onto the background when its viewed on the internet. So add this drop shadow
to your header.
Your header in your new document should look like this.
Now goto your desktop create a folder called website open the folder website and create another
folder called images save the header as header.jpg within the website images folder by going to
file > save as in adobe photoshop. Thats our header done now for our navigation. Our header was
790pixels wide which also included the space around the header for the drop shadow, so our naviagtion
should be the same, but without the space at the top and bottom as we only want the drop shadow
around the outside of our layout. Following the steps above copy and paste your navigation to a new
document, add your stipey background and drop shadow like we did with the header. Heres my
navigation.
The content will be done in the same way but we dont need all of it, just a section of it as we can repeat
it over and over using CSS. Make a selection like this.
Copy and paste to a new document also note that the selection is also 790pixels wide. Once pasted to a
new document we need to add our white 7 stripey background again plus the drop shadow. Heres how
mine looks.
Notice how small my snippet is, mine is only actually 20pixel high as it will be repeated anyway. Now
do the same with the footer.
One last thing, as we want the stripey background we also need to create our background to do this
make a screen shot of your psd layout and make a selection 21x21pixels of the background save it as
gif in your images folder, or save the small image below.
Thats all the images we need. You should have something like this in your images folder.
CODING OUR LAYOUT:
Goto your website folder then open notepad, once you have opened notepad just goto file > save as
then save as a blank css document (see image below).
Now open dreamweaver and create a blank HTML page. Click the code button to see the source code
of our blank html. Save your html file as index.html in the same directory as your css file.
Firstly lets add all our information which will include our doctype, author details, meta tags and linking
of our css file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
2 <head>
3
4 <meta name="Description" content="Hawk studios, print web
5 &amp;amp; media" />
6
<meta name="Keywords" content="your, keywords" />
7
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8
8859-1" />
9
<meta name="Distribution" content="Global" />
10
<meta name="Author" content="richard carpenter - webmaster@hv-
11
designs.co.uk" />
12
13 <meta name="Robots" content="index,follow" />
14
15 <link rel="stylesheet" href="css_styles.css"
16 mce_href="css_styles.css" type="text/css" />
17
<title>HAWK STUDIOS | Print . Web . Media</title>
</head>
You can pretty much see what some of the things mean, the main two id like to point out you are the
stylesheet link and the title, the title being whats displayed in the browser window and the without the
stylesheet the layout will look abit of a mess. Now the lets get on with marking up our divs for our
layout, wel have 5 main divs header, naviagtion, content, sidebar and footer. We mark these out like
so.
1 <body>
2 <!-- wrap starts here -->
3 <div id="wrap">
4 <div id="header">
5 <!--HEADER INFO WILL GO HERE -->
6 </div>
7 <div id="menu">
8 <!--NAVIAGTION HERE -->
9 </div>
10
11 <!-- content-wrap starts here -->
12 <div id="content-wrap">
13 <div id="main">
14 <!--MAIN CONTENT HERE -->
15 </div>
16 <div id="sidebar">
17 <!--SIDE BAR LINKS HERE -->
18 </div>
19
20 <!-- content-wrap ends here -->
21 </div>
22 <div id="footer">
23 <!--FOOTER HERE -->
24 </div>
25
26 <!-- wrap ends here -->
27 </div>
28
29 </body>
30 </html>
The arrows are comment codes i cant stress enough how important it is to have these as it will tell us
where everything goes. A comment code is basically a snippet of text that can be added to a html
document but the browser doesnt render it, there for being invisable when viewed in a browser, youl
only see it when you view the source code. Theres 1 or 2 divs i havent mentioned yet that you might
see and thats the wrap and content-wrap divs, these will be styles to keep the layout in the middle of
our browser which well get too in a moment. If you view your website now in the browser you wont
see nothing even thou youve added buckets of code already not untill youve added the styles in the
css style sheet. Goto file > open and open your blank style sheet, the first things we will style will be
our websites background image, set the font type and size.
/********************************************
HTML ELEMENTS
********************************************/
1 /* top elements */
2 * { margin: 0; padding: 0; outline: 0; } /*sets no padding or
3 margin around the body of our document*/
4
5
body {
6
background-color: #fff; /*website background color (white)*/
7
background-image: url(images/bg.gif); /*sets the background image,
8
in our case the stripey background*/
9
background-repeat: repeat; /*repeats our background over and over*/
10
color: #333333; /*sets our text color for our website*/
11
margin: 15px 0; /*sets no padding and a 15px margin around the body
12
of our document*/
13
font-family: Verdana, Tahoma, arial, sans-serif; /*sets the font
14
15 family for our website*/
16 font-size: 70%; /*sets the font size in %, you can also use 12px or
14px etc... px stands for pixels*/
line-height: 1.5em; /*sets the height between each line of text.*/
}
The first thing that most people style is the body. The body is the element that defines the documents
body. It contains all the contents of the document (like text, images, colors, graphics, etc.). Next lets
style our website layout starting with the header and our wrap which looks like this.
1 /********************************************
2 WEBSITE LAYOUT
3 ********************************************/
4 #wrap {
5 width: 790px; /*width of our wrap*/
6 background: #CCC url(images/content.jpg) repeat-y center top; /*sets
7 our background color to white and uses our content.jpg as a
8 background, the background is also repeated along the Y axis*/
9 margin: 0 auto; /*center our margin to auto will center our
10 website*/
11 text-align: left; /*aligns our text to the left*/
12 }
13 #content-wrap {
14 clear: both; /*The clear property sets the sides of an element
15 where other floating elements are not allowed.*/
16 width: 760px; /*width of our wrap*/
17 margin: 5px auto; /*sets our top margin at 5 pixels and the rest to
18 auto*/
19 padding: 0; /*sets 0 padding*/
20 }
21 #header {
position: relative; /*An element with position: relative moves an
element relative to its normal position, so "left:20" adds 20
pixels to the element's LEFT position*/
height: 131px; /*sets our header height, this should be the same as
our header image*/
background: #caced1 url(images/header.jpg) no-repeat center top;
/*sets a background behind our header and sets our header image
onto the page*/
padding: 0; /*no padding is needed*/
}
If you view your website now it should look like this.
Now we need to add our content, so save your CSS file and goto the code veiw for your HTML file
find the lines naviagtion
1 <!-- navigation -->
2 <div id="menu">
3 <ul>
4 <li><a href="index.html">Home</a></li>
5 <li><a href="index.html">Archives</a></li>
6 <li><a href="index.html">Downloads</a></li>
7 <li><a href="index.html">Services</a></li>
8 <li><a href="index.html">Support</a></li>
9 <li><a href="index.html">About</a></li>
10 </ul>
11 </div>
This bit of code will add the text links home, archives, downloads, services, support and about to our
navigation. All links point to index.html, this can be changed to what ever address you need to point
them to E.G. http://www.hv-designs.co.uk. Your website when viewed in the browser should look like
this.