|
I’m going to show you how to code your very own XHTML / CSS website with dreamweaver from scratch. You will need Dreamweaver ( or notepad ) and some basic knowledge of how the back end of a website works. We will be using one Image for the header to keep it very simple and the rest of the design will be done by coding (I will provide the header image later on). We will be making a XHTML / CSS website with a header a navigation bar, two columns and a footer. If you get stuck here is the finished website with CSS, XHTML and header image included. Click Here Open up dreamweaver (I will be using Dreamweaver CS3, but it shouldn’t matter). In the top menu bar click on >>Site>>New Site. This should bring up a dialog box. Please View the image below. Under the “what would you like to name your site” input box add your site name, we have added “webomagazine”. 
Then click next, It will ask you if you want to work with server technology select the radio button “no I do not want to use server technology”. (follow the image below). 
How do you want to work with your files during development? (Follow the image below) Edit copies locally. 
It will ask how do you connect to your remote server just click “none” 
You will be given a finial dialog box, but everything should be fine and click done. 
Now you should have your site set up in the box on the right of dreamweaver. Right click on the open space in the box on the right and then click on New File, Name it “index.html”. Once again right click on the open space click on Next file, rename this file style.css. So now in your website folder you should have index.html and style.css 
Open up your index.html file and click on the code tab. You should now see <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Untitled Document</title> </head> <body> </body> </html> In the index.html file. We are now going to add our header, nav, columns, and footer DIV tags. Copy the Xhtml that I have written into your file. It is always best to rewrite the code as it help you learn much faster. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Untitled Document</title> </head> <body> <div id=”container”> <div id=”header”> head </div> <div id=”nav”> nav </div> <div id=”content-left”> Content left </div> <div id=”content-right”> Content right </div> <div id=”content-footer”> footer </div> </div> </body> </html> CODE EXPLANATION: <div id=”text”> </div> This div tag will link up with the css on another page. You will notice I have also added a container, this is used to “contain” the site within a box. We must now attach a style sheet to the code under the <title> tags and before the <head> tag add this code <link href=”style.css” rel=”stylesheet” type=”text/css” /> CODE EXPLANATION: This link Href will like a power cord, connect your index.html file to your style.css file. Now that you have made your index page we need to code our style sheet. So open up your style.css file in dreamweaver. Delete this code @charset “utf-8″; /* CSS Document */ you don’t have to but I do (this code comes up in dreamweaver as defult). We need to connect (like a power cord) the div tags on the index page to our style sheet. Type this in your css file. #container { } #header { } #nav { } #content-left { } #content-right { } #content-footer { } CODE EXPLANATION: #content-footer { } : This will connect to the index.html file with the same name. Now we add our code in between the “{ }” area. CSS code is very easy to understand its almost like plain English so if you do this tutorial a few times you will get the hang of it easily. Ok so what I like to do is add, “the page code” just a name I came up with. I will put the explanations next to the code in brackets (–explanation of code–) . I will also give you the code without explanation below. body,td,th { font-family: Arial, Helvetica, sans-serif; (–What font you would like–) font-size: x-small; (–size of your font–) color: #000000; (–color of your font–) } body { background-color: #CCCCCC; (–background color–) margin-left: 0px; (–margin (space) from the left–) margin-top: 5px; (–margin (space) from the top–) margin-right: 0px; (–margin (space) from the right–) margin-bottom: 0px; (–margin (space) from the bottom–) } a:link { color: #0099FF; (–hyperlink text color–) } a:visited { color: #0099FF; (–hyperlink text color if visited–) } a:hover { color: #0099FF; (–hyperlink text color if hover –) } a:active { color: #0099FF; (–hyperlink text color if active–) } So place this code above the rest of your code on the style.css page. Your page should look like this so far. //————– no explanation of code ———-// body,td,th { font-family: Arial, Helvetica, sans-serif; font-size: x-small; color: #000000; } body { background-color: #CCCCCC; margin-left: 0px; margin-top: 5px; margin-right: 0px; margin-bottom: 0px; } a:link { color: #0099FF; } a:visited { color: #0099FF; } a:hover { color: #0099FF; } a:active { color: #0099FF; } #container { } #header { } #nav { } #content-left { } #content-right { } #content-footer { } // ————-// Your index page should now look something like this. Gray with some text in each DIV tag. 
OK so now we want to centre our content and set a max width to our page. So go back to your css page and insert this code into the container. The code below will make your content fit inside a 800 pixel width box. #container { width: 800px; } Ok now we want to centre it in the same “#container” area we need to add “margin: auto” This will centre all the content onto the middle of the page. #container { width: 800px; margin: auto; } 
We want a cool looking header, so we are going to add a header using css! But first we need to ad an “images” folder to our website, it should look something similar to this C:\computer-name\Websites\webomagazine and we need to make a folder and call it images. Copy the image we have below into that folder. 
On the css page look for “#header” and write this code down. #header { background-color: #0099FF; (– if images are turned off this color will show– ) background-image: url(images/header-img.jpg); (– image location –) background-repeat: no-repeat; (– no not repeat the image X or Y (up or down)) height: 100px; (– the height of the image, so we don’t cut it off –) } //————– no explanation of code ———-// #header { background-color: #0099FF; background-image: url('/images/header-img.jpg'); background-repeat: no-repeat; height: 100px; } // ————-// Go back to your index page and you should now see your image on the header with the text “header” written on it, you can delete that text. And you should have something looking like this. 
So you can see the website is starting to come together! Now we are going to color the page white. Add this code to the container on the css page. background-color:#FFFFFF; #container { width: 800px; margin: auto; background-color:#FFFFFF; } Now we want to make our 2 columns real columns by floating them. This mean making them sit side by side instead of on top of each other. Also we are going to put a margin and padding around with a boarder to make it look a bit nicer. Add this code #content-left { float: left width: 500px; #content-left { float: left; ; (– this will push the div left — ) width: 486px; (– this will make the div a max on 486 pixels wide — ) padding: 3px; (– will pad the box 3 pixels –) border: 1px solid #b0b0b0; (– 1 pixel width border, with color–) margin: 3px; (– 3 pixel margin –) } // ————– NO explanation ———————-// #content-left { float: left; width: 486px; padding: 3px; border: 1px solid #b0b0b0; margin: 3px; } #content-right { float: right; width: 286px; padding: 3px; border: 1px solid #b0b0b0; margin: 3px; } // ————————————-fin —————–// I have added some dummy text to show you what it will look like! There is a problem, the floats seem to run over the footer! So what we need to do it add some code to fix that. 
Go to the style.css page and go to the bottom and add this code #content-footer { clear: both; background-color: #999999; } CODE EXPLANATION: Clear: both: This will now make sure that all the content above stays above the footer. Background-color: This will change the background color of the footer. And we are done, I have just added a menu easy to do in dream weaver and some footer text. 
If you get stuck here is the finished website with CSS, XHTML and header image included. Click Here
|
