1 Basic CSS Flow Tutorial with Box model using Dreamweaver CS3\CS4 … in your web site you won’t run into problems with your CSS. If you don’t intend to use more then one template … 1. Start Dreamweaver CS3\CS4 and open the page called start.html - it should look the page below it has only several paragraphs of text and some headers. If you don’t have this page create something that looks similar. 2. If you would like to see how we are going to format this page using CSS open the finished_template.html page and then close it.

1 Basic CSS Flow Tutorial with Box model using Dreamweaver CS3\CS4 tutorial modified from Sullivan and Rewis Mastering CSS with Dreamweaver CS3 2008. 1. Start Dreamweaver CS3\CS4 and open the page called start.html - it should look the page below it has only several paragraphs of text and some headers. If you don’t have this page create something that looks similar. 2. If you would like to see how we are going to format this page using CSS open the finished_template.html page and then close it. First we will add an image placeholder in front of the fist paragraph. Place your cursor under Main Content, in front of Lorem ipsum text and select from the top of Dreamweaver Insert>Image Objects>Image placeholder and in the pop up box type the information as shown below and click OK…. 3 4. In the pop up box, make sure the Selector type is set to class and in the input box below type in .fltlft - don’t forget the period before the name, the text is an abbreviation for .floatleft - you could type .floatleft , but dreamweaver uses the former abbreviation in its CSS templates so I am going to use it as well so you are familiar with what it does. Then click on the OK…. 15 At this point your template layout is elastic - the mainContent area will stretch to fit whatever size th view pulls their browser window open to. Often we want to restrict the browser window to fit within 800 or 1024 pixels so they look good on the majority of computer screens and we want to float the design in the centre of the browser window. Centering a CSS Layout 18. Click anywhere in the page, then click the < body > tag selector at the bottom of the document window. This will select everything on the page. Click on the insert bar and select insert Div in the popup box select ID and type container

Download Basic CSS Flow Tutorial with Box model using Dreamweaver CS3/ CS4.Pdf