Twitter Facebook RSS Logo Logo

Video Tutorial on how to create a simple responsive website using Dreamweaver

In this video tutorial, you will learn how to use div tags and css to create a simple responsive website using Dreamweaver.

For this illustration, I have used Adobe Dreamweaver CS6 as my html editor, you can use any editor you have.

There are three parts to this tutorial:
a) Create a website layout using div tags and css.
b) How to make the website layout responsive.
c) How to create a custom css menus (navigation bar).

Step – 1: Open Adobe Dreamweaver CS6, go to your file panel, right click and say new file, I am going to call this index.html, you can call it what ever you want.

pic1

Step – 2 : Right click on your files panel and create a new folder and name it CSS.

pic2

What we are going to be doing is creating external stylesheets, the reason we do this is, it comes in handy further down the line and also when creating websites having extensive number of pages, we can update a single stylesheet and changes will take effect side wide rather than having all of our css within a single document and having to update them all individually, it is also benificiary because it makes our code all the more clean.

Step – 3: Right click on the CSS folder and say new file and call it MainBody.css

Your file structure finally will look like this below:
pic3

Step – 4: Open the index.html and give it a title it, I am calling it Layout Tutorial, you can name it whatever you want. when you look at the design view, you will see that the cursor is in the middle of nowhere, actually when it comes to writing css and creating div tags and elements, this is going to effect positionally. So to fix this, we  will set a margin to this, I am going to the page properties found at the bottom of dreamweaver and set all the left, right, top and bottom margin to “0” and then save it, you will see that dreamweaver has already written the css codes for us, you will also see that the cursor is now to aligned to the left.

pic4

Step – 5: We will first call in our external stylesheet that we created in step #3, ie: MainBody.css, so just below the head tag we write:

<link href=”CSS/Mainbody.css” rel=”stylesheet” type=”text/css” />

pic5

Step – 6: To begin, I am going to create html codes for our div tags, in the <body>  let us create a new div called container and now between the container div I am going to put in all the other codes, ie: header, menu, sidebar, mainbody and footer and the codes will be pretty much like this below:

div id=”Container”>
<div id=”Header</div>
<div id=”Menu”></div>
<div id=”SideBar”></div>
<div id=”MainBody”></div>
<div id=”Footer”></div>
</div>

pic6

If you go to the design view, what you can see is just a container, because there are no css written at this point of time, we see this blank box, because there is no css there is no rules to tell the webpage how to display the div tags hence the requirement to use css to mould and design our page.

Step – 7: We will be targetting all of our divs in our style sheet MainBody.css so the codes are as below:

#Container {
width:800px;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:11px;
margin-bottom:21px;
}
#Header {
height:150px;
background-color:#000;
}
#Menu {
height:60px;
background-color:#666;
}
#SideBar {
width:150px;
height:400px;
background-color:#C00;
float:left;
}
#MainBody {
width:650px;
height:400px;
background-color:#99F;
float:right;
}
#Footer {
height:100px;
background-color:#CCC;
clear:both;
}

You can also go to our URL here: http://entheosweb.com/Video_Tutorials/Testing_Site/CSS/Mainbody.css
and copy the codes from there.

It will look like this below:

pic7

At this point of time, I would want to bring in my logo on the header section. When you go to the design view you will see that you have created a website layout using divs and css with dreamweaver.

pic8

b) How to make this whole webpage responsive, that means make it look different on different screens/ gadgets etc., we use different style sheets to define the width and also by using media queries.

Step – 8:  Right click on the CSS folder and create new file and call it Mobile.css

pic9

Step – 9: Open the index.html and tag in this style sheet, we do that by writing the below codes, just below the link where we have called for MainBody.css
<link href=”CSS/Mobile.css” rel=”stylesheet” type=”text/css” media=”screen and (max-width: 800px) “/>

pic10

We will be calling in this style sheet based on a condition, and the condition is that if the webpage is being viewed in a device that is less than 800 pixels width, in other words, anything that is viewed more than 800 pixels this stylesheet will not be used and anything less than 800 pixels, this Mobile.css stylesheet will be used.

We have not actually set a width for the header, menu and footer, but we have set a width for the  SideBar and the MainBody because we are floating them, now all we need to target initially is the Container div and the SideBar and MainBody divs. We are going to be coding the Mobile.css with the below codes:

#Container {
width:300px;
}
#SideBar {
width:100px;
}
#MainBody {
width:200px;
}
You can also go to our URL here: http://entheosweb.com/Video_Tutorials/Testing_Site/CSS/Mobile.css
and copy the codes from there.

pic11

You can now launch the index.html on a web browser and see that this layout with reduced to a mobile size the layout also changes, so now we also know how to make a webpage layout responsive.

pic12

c)  Moving to the final stage of this tutorial, we are going to learn how to create a custom css menus.

Right click on the CSS folder and create a new folder and name it Menu.css, go ahead and tag this style sheet into the index.html file, so we use the below codes to bring this stylesheet in:

<link href=”CSS/Menu.css” rel=”stylesheet” type=”text/css” />

pic14

When you save the index.html, you will now see that the Menu.css is tagged along with the Mobile.css and the MainBody.css

Step – 10: We will be creating all our menu divs within our menu divs, so for this we will be using an unordered list and a list item, the codes for the same are as below:

<div id=”Menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

pic15

As you can see above, I have created 4 main navigation menus ie: Home, Services, About and Contact. If you see the design view, it has all come in, we just need to style this and target these menus so we will be creating all our codes for the menus in our Menu.css stylesheet, before that is written, I am going to bring in my menu style from the MainBody.css and put in here, so I cut it from there and bring it into Menu.css stylesheet, it is just going to work just the same and the codes for the same is as below:

#Menu {
height:60px;
background-color:#666;
}
#Menu ul {
margin:0;
padding:0;
}
#Menu li {
list-style-type:none;
float:left;
display:block;
width:150px;
height:60px;
text-align:center;
line-height:55px;
font-family:Tahoma, Geneva, sans-serif;
font-size:17px;
}
#Menu li a {
text-decoration:none;
color:#FFF;
}
#Menu li:Hover {
background-color:#CCC;
}

You can also go to our URL here: http://entheosweb.com/Video_Tutorials/Testing_Site/CSS/Menu.css
and copy the codes from there.

pic13

Now if you save this css and then launch the index.html on a web browser, you will see that the website layout is now ready with a custom css menu and we did this by creating divs and css, this is also responsive.

pic16

You now know how to use div tags and css to create a responsive website layout and custom css menus using dreamweaver.