Let’s start by making sure we have all the files needed and have our documents ready. If you don’t already have a folder setup to store all the websites you will be creating, create a new folder called ‘websites’. Then inside this you will have a folder for each website you make.
If you don’t have the files for the Ubuntu page we will be making, you can download them here:
http://jeffkilroy.com/_hosted/Class/AdvancedWeb/Ubuntu/download.zip
Create a folder named Ubuntu in your websites folder then extract this zip file to that location. Inside your websites/Ubuntu folder you should now have a folder called “images” and “files”. The files folder will contain any Photoshop documents, logos, or flash items that will not be used on the website. The images folder will contain all images used in throughout the website. When we work with external styles and JavaScript you may also want to create a “styles” and “scripts” folder.
Examine the Photoshop document in the “files” folder to see what our final page will look like. The images folder already contains the only 3 images we will need to put the website together, the remaining colors, borders, and structure will be managed with CSS.
Let’s open up Dreamweaver and setup our website. We want to do this for every site we work on to make managing files associated with our website much simpler. At the top of the file menu select Site>Manage Sites. Then click the “New” button to create a new site.
Change the tab from Basic to Advanced. For now we will only need to work with the first screen labeled “Local Info”. Fill in a name for your website (we can call this “Ubuntu”). Next to the field for Local root folder click the folder icon and browse to your Ubuntu folder. Make sure you are inside the folder looking at the images and files folder then click “select”. That is all we need! Leave the remaining fields alone and click the “ok” button.
(Note: If you are using Windows 7, there is a bug in Dreamweaver that selects the folder you were in previously instead of the current folder. To fix this, just click inside your files or images folder then click select)
Now in your Files pane you should see “Ubuntu” as the selected site (If not select it). And your “files” and “images” folder should be shown. We need to create a new HTML document to be our page so go to File>New>Page Type “HTML” (Layout: <none>) and click “Create”. Save this file as “index.html”
Make sure you are in “Split view” mode so we can see both our code and design at the same time. This will allow us to code by hand while making sure our code is correct.
We want to start by creating the structure of the site and completing as much of the HTML as possible before we add any styles. Looking at the design again to see what parts make up the structure, we can see we have a header, content area, and footer. So let’s create div elements for each of those. However first we want to make sure we have a way to control the entire main area, in other words we want a div element we can tell to be in the center of the screen and 980px wide so let’s create that div first to be the container div. We are going to give this div an attribute of “id” with the value of “page”. Place this div after the start body tag before the end body tag
<div id="page"></div>
“page” is simply the name of the div we are giving this section since it will be a container for all items on our page. Now do the same for the header, content, and footer. Giving each their respective id, place them all inside the “page” div so that your code should now look something like this:
<body>
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer”></div>
</div>
</body>
When your code is indented like so it is easy to see all the elements inside another element. Dreamweaver has the ability to do this automatically by going to Commands>Apply Source Formatting
Now we can begin adding some elements to the page. First let’s take care of the title. This is what shows up in the title bar on the top of your web browser, currently it should say “Untitled Document”, let’s change this to “Ubuntu 10.04 LTS”.
Next we can add the following in between the footer tags “© 2010 Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.”
For our page content, let’s grab a few paragraphs from the website lipsum.com, this offers us the ability to generate fake text that we can replace later. Place this text inside your content div.
Now what we want to do is make sure each paragraph of text is wrapped within a paragraph (<p>) tag. This way we can use CSS to control the spacing and fonts of each paragraph. Finally, just before your first paragraph inside the content div, lets create a header (<h1></h1>) and in between those tags write “Learn about Ubuntu 10.04 LTS”.
Our content is just about filled in. The last thing we want to do in our content div is add an image that will be to the right of our text. We will create a self-closing html tag <img /> in between the end of our header tag and before our first paragraph tag. We need to include attributes to give the source of the image (src=” images/img_teaser.png”) and finally a class attribute named “rpic”. It should look something like this:
<img src="images/img_teaser.png" />
The class attribute will allow us to apply styles to go to the right of our content for anything with the class of “rpic”, so if we wanted we could have multiple pictures to the right of our text
Your content div should now look something like this (Removing some content to save space):
<div id="content">
<h1>Learn about Ubuntu 10.04 LTS</h1>
<img src="images/img_teaser.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut magna leo, molestie adipiscing hendrerit quis, semper a odio. Pellentesque ornare auctor lobortis. Nulla pellentesque auctor elit id lobortis. Pellentesque elementum vehicula aliquam. Integer ut erat et neque tempor ultrices suscipit euismod augue. </p>
<p> Fusce sit amet eleifend sapien. Pellentesque vitae risus erat. Donec dui metus, rutrum ut interdum eget, elementum sed ligula. Pellentesque egestas aliquam ultricies. Vivamus viverra lobortis ligula et ornare. </p>
</div>
Almost done our website structure. Even though we only have the logo in our header, it is possible that in the future we may want a message, navigation, or some other element in the header as well. In that case instead of just placing the logo in the header let’s create a new <div> with the id of “logo” inside the header and place the logo image inside that.
Because search engines and screen readers are unable to see images, it is good practice to describe your images in alt attributes in the image tag. This way if the image cannot be seen, text is there to back it up. We can add it to our previous image in the content:
<img src="images/img_teaser.png" alt="Ubuntu 10.04 LTS Beta 2!" />
And adding it to our header logo will give us the following:
<div id="header">
<div id="logo"><img src="images/logo.png" alt="Ubuntu" /></div>
</div>
And that’s it! Look how nice our code looks. Now let’s apply some styles
You will usually be creating styles in an external stylesheet, but before we get to that, let’s take a look at adding styles within an HTML document. We want to start by creating opening and closing <style> tags within the <head> of the HTML file. This is where our CSS code will go.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ubuntu 10.04 LTS</title>
<style type="text/css">
</style>
</head>
You will notice that we added a “type” attribute to the tag. That just verifies that the browser will properly view the information as CSS.
Within CSS we are able to reference any HTML tag, ID, or class. The syntax we would use goes as follows:
element {
attribute1: value;
attribute2: value;
}
Where “element” would represent what we want to modify. So let’s see an example and modify the body tag of our HTML document.
body {
background-color: #230416;
}
Here we are changing the value of background-color for the body to the hexadecimal color #230416. When you test your html file in a browser you should see the background color change. You can view a full list of CSS properties you can modify here: http://www.siliconbaytraining.com/pages/csspv.html
What you may also notice is that the body by default adds a padding to the document, we want to remove this so we can control the position of the elements ourselves. So we can add the following two lines inside the body CSS
margin: 0px; padding: 0px;
You should now see all our content is butt up against the browser. What we want to do next is give our body a background image that will repeat at the top from left to right. For this we use the property “background-image” and for the value “url(images/bg_body.jpg);”.
Test out your file and what you should see is the background repeating up and down, left and right. We need to use css to tell the body element to only repeat left to right starting at the top, so we use “background-repeat: repeat-x” and “background-position: top;” to do just that. The result so far should be something close to this:
body {
background-color: #230416;
margin: 0px;
padding: 0px;
background-image: url(images/bg_body.jpg);
background-repeat: repeat-x;
background-position: top;
}
When you view your file we should now have a nice looking background. Now we want to tell our page div (that contains everything else) how to look. Let’s start by setting up styles for the page div. Right after the end bracket for body add the following:
#page{
}
You will notice that because I added a “#” before the name, the browser knows I am referencing an Id name and not an html tag. When using CSS, a “#” symbol before the name references an Id, a “.” Before the name references a class, and if there is no symbol before the name it is referencing an html tag.
So let’s give this item a width by adding “width: 980px;” within the brackets. Always remember to add “px” after your number so the browser knows the correct measurement to use. Then let’s center this div. The way we center a div is by giving the properties margin-left and margin-right both the values of “auto”. So add the following to the #page css:
padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;
You will notice that I also gave the padding, margin-top, and margin-bottom 0px. It is a good idea to always set your margins and padding manually even if they seem correct. This way you always know what elements have what value.
We need to do one more fix to make sure older versions of Internet Explorer see the page centered correctly. We will add “text-align: center;” to the body CSS. This will center the #page div but then you will notice all the text on the page will be in the center. No problem, we will reset it inside the styles for #all: “text-align: left;”.
So now our page is centered. Let’s attach some styles to the content div:
#content {
margin: 0px;
padding: 15px;
background-color: #FFFFFF;
border: 1px solid #000000;
}
What we did here was set our margin and padding. I added 15px of padding so there is space between the side of the page and the text. You will notice I also gave our #content div a background color of white. Lastly, I added a border to the entire content div. This is a shorthand way of creating a border, instead of modifying the properties for border size, type, and color, I can use the border property to control all three at once.
Currently, our Logo is butt up against the content box. Let’s give it some padding to push it away:
#logo {
margin: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
Now that most of our positioning is set, we want to format our text. Let’s start with the header. Since we can create a style that will apply to all h1 tags, we don’t need to add a number sign in front of this one. Let’s define a margin and padding for the header, as well as set our font information:
h1 {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
font-family: Arial, Helvetica, sans-serif;
color: #3b1029;
font-size: 24px;
font-weight: normal;
}
You will see here we added a few new properties. The font-family property allows us to choose a font for our text. Note that these fonts must be installed on the user’s computer in order for them to see the text correctly. By separating multiple fonts out by comma, we can select backup fonts. If the user does not have Arial, then Helvetica will be used. If Helvetica is not found, it will use the computers default sans-serif font. The color property changes the color of the text, then we modify the font-size to be 24px. The font-weight property gives us the ability to make something bold or un-bold. By default most heading tags will be bold. If you do not want them to be, make sure to set this value to normal.
Looking great so far, we are almost done! Let’s do the same thing for the paragraph (p) tag. Set up the styles so that the padding is 0px, margin-bottom is 10px and the remaining margin is 0px; Use the same font family as <h1> but make the font-size 12px;
Next we want to setup how the text inside the footer will look. Normally you would want to wrap the text in <p> tags however we can just apply the text styles to the footer div for now:
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #98778a;
text-align: right;
margin: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
Nothing new at all here. We set the margin, padding, font, color, and text-align.
Now the last thing we need to do is have our image on the right side. Remember when we gave our image the class of “rpic”? Now it’s time to give that image the ability to move to the right side. Let’s give a style for the .rpic class. We will be modifying the property “float” by setting the value to “right”:
.rpic {
float: right;
}
The “float” property sends an image to the right or left, letting the following content wrap around. You should see the content against the image so to give the image some room we will just set the margin and padding
.rpic {
float: right;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 10px;
}
And that does it! Your file should look similar to the Photoshop doc. If not take a look at the completed html file here:
