CSS Template Tutorial. Please take your time to visit FreeCSS.info …… Next save the file as style.css and in your tutorial folder. … Basic CSS Flow Tutorial with Box model using Dreamweaver CS3\CS4 tutorial modified from Sullivan and Rewis Mastering CSS with Dreamweaver CS3 2008. …

Set up the index file The main files which will hold the code for the template are going to be index.html and style.css. I start of my templates with just index.html and will split the CSS into an external file later. So to end the setting up process. click file, new and HTML. Save the file as index and in your folder which you set up. For example purposes I will refer to it as tutorial folder… Step 2 – Coding the Basics The part of the tutorial will code the very basic things. It will use CSS to define the main holding div and style the text and links for the template. CSS code must be added between < style > and in head section of webpage. Setting up page properties For the I use the dreamweaver input fields. For the rest of the coding process I usually type myself. To set up the properties open up your index.html file and click page properties button under the properties area at the bottom…. Setting up the centered content wrapper div
This is a div which will hold the site contents and will be in the center of the page. To do this go to code mode in dreamweaver and change your body coding (pink is the css) to: body { background-color: #26221B; text-align:center; margin:0; } For the css coding for the wrapper div put the following: .wrapper { background-color: #F4EDDF;
margin:0 auto;

Download CSS Template Tutorial.Pdf