Now we have the elements in place (Dream Weaver (officially Dreamweaver) Tutorial Part 1 HTML) we are ready to style them. You can see the completed design here: We Love Dream Weaver
Nice Body!
We will start off by creating a new CSS document by going to File > New > CSS.
When writing CSS I highly advise opening and closing the rule as you write. So first choose the selected, in this code it is the body tag, then open and close the braces. The reason is so you don`t forget like I often did.
body{
background-color:#ccc;
}
Now the reason I am doing this first is just so we can save the CSS file and then attach it. By changing the background colour we will instantly know if it has worked.
Save your new CSS document as style.css in the same folder as index.html.
Attaching a Style Sheet the Hard Way and Easy Way
As with everything in Dreamweaver there is a hard away (the pure coding way) or there is the helpful hand of Adobe guiding us to getting our code done sooner.
Now writing that out is the hard way. The easy way is using the attach stylesheet button on the CSS pannel to your right.
Click the link icon, locate your style.css file and click okay (or choose).
Editing CSS is a Dream
Now this is where I start to enjoy working with Dream weaver just that little bit more. With the split view selected I can now see the styl.css shown on the tab bar. I Clicking that now lets me edit the CSS whist seeing the changes instantly within the design view on the right.
Important! – Do not trust Dreamweavers design view unless you are in Live View or in the actual browser. For example any CSS3 syles will now show up in the standard design view, you need to check in your browser after each line of CSS.
Lets Get Styling
Background and Fonts
We start off by adding our notepaper background with a nice grey background. Followed by declaring the global font. I always put this in the body tag to save me declaring the font for each element. This way I can change the entire websites font with just one line change.
We found the code from Google Fonts using Droid Sans, so we also added some code to the HTML.
Copy the code from the Google Fonts page into the head of your HTML page
<link href=’http://fonts.googleapis.com/css?family=Droid+Sans’ rel=’stylesheet’ type=’text/css’>
HTML Calling The CSS Style from Google
Dreamweaver Tutorial - by Web Courses Bangkok
CSS Calling The Font
@charset "utf-8";
/* CSS Document */
body{
background:url(images/bg-repeat.gif) #CCC;
font-family: 'Droid Sans', sans-serif;
}
Genertic Styles
Some styles are used time and time again e.g. a shadow or clearfix. I put my generic styles right at the top as they are often referenced again when creating regular content on a site.
The shadow is added directly to the headings using a class. By using a class means we can add the shadow to other elments as the content of a website grows.
Remember this? “<h1 class=”shadow”>We Love<br /> Dreamweaver</h1>”
/* Generic Styles */
.shadow{
text-shadow: 5px 5px 0px #575757;
filter: dropshadow(color=#575757, offx=5, offy=5);
}
.padding-top-bottom{
padding:30px 0px;
}
Structure and Old Browser Compatibility
We start with the container which allows us to fix the pages width and center align it. Next we apply a display:block to the HTML5 elements. We do this so older browsers don`t freak out when they see these new tags.
/* Structural Styles */
div#container{
width:600px;
margin:30px auto;
}
/* Browser Compatibility */
header, section, footer{
display:block;
}
On Mi’ead Son!
For the header we start by aligning everything in the centre and getting the fonts the right size and spacing.
/* Header */
header{
text-align:center;
}
header p{
font-size:48px;
color:#81a18a;
font-weight:bold;
margin:13px 0px 30px 0px;
line-height:48px;
}
Main Section
Again we start by center aligning everthing in the main section. The rest of the CSS is just getting everything spaced out aligned and the right size.
/* Main Content Section */
section{
text-align:center;
}
section h1{
font-size:72px;
color:#81a18a;
margin:10px 0px 30px 0px;
}
section h2{
font-size:48px;
color:#81a18a;
}
section p, li, a{
color:#575757;
line-height:24px;
}
section a{
color:#be6079;
}
section a:hover{
text-decoration:none;
}
Finish With A Footer
Now one change we did was to move the footer outside of the container div, that was so we can span right accross the page.
With the footer we have a nice background repeat and then within that we still need the icons to line up with the rest of the page, thats why we use a footer div. Having the div inside the footer allows us to center align it and make it the same width as the main site.
We finishoff by pushing the two icons the the left and right of the HTML5 logo and we are done!
/* Footer */
footer{
margin-top:30px;
padding:30px 0px;
text-align:center;
background:url(images/bg-footer-repeat.gif) #8daa96;
}
footer div{
width:600px;
margin:0 auto;
}
footer img.spacing{
margin:0px 115px;
}
1 Month Dream Weaver Course
The courses lasts over 4 lessons, 1 lesson per week and a total of 16 hours.
In our Web Design Beginners course you will use Dream Weaver to create a professional site from scratch using Web Standards.
Click here for full details on our Dream Weaver Course
