CSS Tutorial: CSS and XHTML Website Programming
CSS & XHTML programming to build your website with Dreamweaver
Once you have set-up your web site using Dreamweaver you are ready to program your website with CSS and XHTML programming. On completing this tutorial series step you will have nearly finished the cool website shown on the left.
As part of our free CSS website design guide this tutorial now continues with the next step in creating the smart website shown on the left. Learn how to CSS and XHTML program your website with Dreamweaver - this is the second step in building your designed and exported website with Dreamweaver.
For this step and the next, you need to have some basic CSS programming knowledge to clearly understand what's being done. At least you need to read our CSS styles tutorial.
Step 5: CSS & XHTML programming your website with Dreamweaver
In the previous tutorial you learnt how to set up your website in Dreamweaver. Now you are going to learn how use the exported images in Step 2 to create your XHTML page with Dreamweaver using CSS and XHTML programming. See the illustration below that will show how your DIVs are arranged for the index.xhtml file in Dreamweaver.
Step 1: Let us first create your XHTML page. In Dreamweaver, the files will be displayed in the Files Panel (Window >> Files or F8) under Local Files. Right click on the first folder visible in the list with the Site Name; now select New File. A new html file will be created in your website folder. Rename the file as index.xhtml. Now double click on it so the document opens up.
Step 2: In the index.xhtml document left top you will find three buttons Code, Split and Design to access different views. Click the Code View button; Select all (Ctrl+A) and delete. Now copy-paste the code shown below into it and save your file:
The code within the body tag contains the various DIV tags required to display the various parts of the design. See in the image above what each DIV tag displays. In novice speak, we have divided the layout into five general sections: header, footer, links, content and the footer picture top, apart from the page's background container.
Notice in the index.xhtml page code how we have linked to an external style sheet called styles.css (which includes style specifications of the DIV tags shown in the screenshot above). The line of code that does this is shown below:
<link rel="stylesheet" type="text/css" href="styles.css">
Let us now create and see how this CSS style sheet works.
Moving on to the CSS programming part:
Step 1: Right click the files panel as before and select New File to create a new document. A new html file will be created in your website folder. Rename the file as styles.css. Now double click on it so the document opens up.
Step 2: A style sheet has only one view, the Code view, and so will have no default code inside it (if it does, once again select all (Ctrl+A) and click delete). Now copy-paste the code shown below into it and save your file:
Most of the style sheet code is self explanatory when you go through it (especially if you know some CSS programming). All the ID attribute styles are for the various DIV tags that make up the design. Compare each ID style specification with the above screenshot to understand the basic logic of the CSS design.
You have now successfully created the XHTML & CSS web page layout using Dreamweaver!
The next step is to Format your web pages using CSS styles in Dreamweaver.
This CSS website design guide teaches layout design with Fireworks and CSS/XHTML website conversion with Dreamweaver. Learn CSS Web Design by following these simple steps:
Compatible Versions of Dreamweaver for this Tutorial
Note: The instructions in this tutorial are same across all Dreamweaver versions listed above; Screenshot images (if any) may differ. Adobe CS4/CS5 users: Read the CS4 & CS5 version of this web design tutorial series - Design a Website. Recommended Version: Dreamweaver CS5.5