CSS Layouts using Dreamweaver
-
Create a CSS layouts using Adobe Dreamweaver. The float technique is one way to create a two column CSS Layout. Visit the Max Design website to see the more tutorials and more information on the float layout technique. http://css.maxdesign.com.au/floatutorial/
-
Setting up a site in Dreamweaver is one of the first things that should be done when working in Adobe Dreamwaver. In order to create a new web site in Dreamweaver you will have to set up the site definition for the site. The site definition contains two sections: Local Info and Remote Info.
-
Dreamweaver's workspace consists of four basic elements. These elements are the Document Window, Insert Bar, Properties Inspector, and Panel Group. Let us take a look at each of these elements more in depth.
-
Creating new documents is simple in Dreamweaver, and before you continue, it is very important that you save your file first! You don't want to unexpectedly lose your work. In this lesson save the file as berlin_wall.htm.
-
The CSS styles you've created so far have only applied to this document. Internal style sheets apply only to the document in which they are created. Now, you'll learn how to create an external style sheet which contains the styles you define in this document and then how to attach it to another html file.
-
Some definitions to consider for layout out a page before we get started with some code or in Dreamweaver. These screenshots and definitions along with more examples of these concepts can be found on the Max Design website http://css.maxdesign.com.au/floatutorial/definitions.htm.
-
When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. Learning how float reacts to various situations will help in creating a sound layout for your webpage. These screenshots and definitions along with more examples of these concepts can be found on the Max Design website - http://css.maxdesign.com.au/floatutorial/introduction.htm
-
Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the "clear" property to these following elements. The four options are "clear: left", "clear: right", "clear: both" or "clear: none". These screenshots and definitions along with more examples of these concepts can be found on the Max Design website - http://css.maxdesign.com.au/floatutorial/clear.htm
-
This tutorial is based on Tutorial 8 on the Max Design Website - http://css.maxdesign.com.au/floatutorial/tutorial0816.htm. Visit the website to see the whole tutorial and to view other tutorials using the float layout technique.
-
Once you are done editing the files on your local computer, you will have to upload your files before being able to see them live on the web from any computer. Dreamweaver has a built in FTP client setup that makes this process really simple.
-
After building a page we can make sure it is up to standards by validating it with an HTML validator.