How to Create A Website with Dreamweaver : Tutorial 5

Let’s summarize what we have learnt so far:

Content For How to Create A Website with Dreamweaver:

Time Required: 2 hours

Complexity: Moderate

In previous tutorial we created container, header and navigation. As we have seen container wraps other components of website such as header, content, sidebar, footer etc. In this article we are going to create content, sidebar and footer for your website.

  • Container is of 100% width same as the header and navigation.
  • Now content and sidebar are together of 80% width with 10% margin on left and right each.
  • After excluding margins on both sides we have 80% space remaining
  • Now this 80% is divided as follows:
    • 70% for content and 30% for sidebar.
    •  Carefully watch the image below to get clear understanding of width distribution as we are going to create a website with same layout.

Creating content wrapper:

  • Content wrapper holds the content and sidebar together.
    • Container= content-wrapper + margins
    • Content-wrapper= content + sidebar
    • Insert new div id after end of navigation tag and name it as content wrapper.
    • Click on + sign >> less specific
    • Give the css attributes.

HTML Code for content-wrapper:


<div id=”content-wrapper”> Content for  id "content-wrapper" Goes Here

</div>

CSS code for content-wrapper:

  • Width 80% and margin 20% makes 100% width.
  • Now press f12 and check in browser how your website looks.new layout

Here we can see the container .Here we need add content and sidebar in the content-wrapper. So we will need to add two div id’s in content-wrapper. One for content  and other for sidebar. You can give the background-color and other properties as per your convenience.


#content-wrapper {

background-color: #FFFFFF;

float: left;

width: 80%;

margin-right: 10%;

margin-left: 10%;

}

Adding Content block to website:

Content block is a block in which our content is going to be present. It’s easy to create if you have been following this tutorial from start. We just need to create a div id inside the content-wrapper. To show it on left side we need to use the float: left css property.

Adding Sidebar to website:

Sidebar is preset in the right side of our website. Sidebar is useful to add recent articles, advertising banners, social media like banners, subscribe us widget. For better understanding just have a look to the sidebar of the page you are currently reading.

So how do we add the sidebar? Answer is simpleJ

Just add a new div id after end of content tag and name it as sidebar .

Note: It’s not mandatory to use the name sidebar or content. You can name anything meaningful and comfortable for you. 

HTML code block for content and sidebar:


<div id="content-wrapper">

<div id="content">Content for  id "content" Goes Here</div>

<div id="sidebar">Content for  id "sidebar" Goes Here</div>

</div><!--end of content wrapper -->

As you can see in above code, we have placed content and sidebar inside the content-wrapper.

[well] NOTE: Advantage of using sidebar after end of content. [/well] 

Using sidebar after end of content has a seo advantage. Doing this you allow search engines like Google to first read the whole content and then go to sidebar. Reading whole content in single time search engine finds relevant data which helps your site to rank.

CSS code for content and sidebar:

  • Copy and paste this code into your css file.
  • You can add other properties as well.
  • Now add an article in content area. Add images and headings in article.
  • In sidebar add the advertising banners. You can also get them in source file we provided at the end of this article.

#content{

ont-family: Arial, Helvetica, sans-serif;

float: left;

height: auto;

width: 66%;

padding-right: 1%;

border-right-width: medium;

border-right-style: solid;

border-right-color: #F66;

background-color: #FFFFFF;

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

color: #000;

border-left-width: medium;

border-left-style: solid;

border-left-color: #F66;

padding-left: 1%;

}

&nbsp;

#sidebar {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

float: left;

height: auto;

width: 30%;

color: #306;

background-color: #FFFFFF;

padding-left: 1%;

} 

Adding Footer to your website:

At last we have reached to the end of the homepage. After the content area that is after content and sidebar we are going to create footer. As this is your first website we are creating a simple footer with just one line of copyright info. You can add more information in footer if you want. Once you create this website we can move forward with more complex and functional websites.

HTML code for footer:

  • Add a new div tag after content-wrapper and name it as footer as shown in below code.
  • Inside the footer tag add the information you want to display in footer section.

<div id="footer">Copyright@brainytuts.com</div>

</div><!--end of container -->

&nbsp;

</body>

</html> 

CSS code for creating Footer in Dreamweaver cc:

As usual click on + sign >> less specific >> ok give the layout attributes for the footer. You can also copy and paste the below code.


#footer {

font-family: Arial, Helvetica, sans-serif;

color: #FFF;

background-color: #903;

height: 30px;

width: 100%;

float: left;

margin-top: 10px;

margin-left: 10px;

padding-right: 10px;

text-align: center;

}

Overall HTML structure: bringing everything at one place


<html>

<head>

<title>Title of website</title>

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

//linking our style sheet file

</head>

<body>

<div id=”container”>

<div id="header">

<div id="naviagtion">

<ul id="menu">

</ul><!--end of menu-->

</div><!--end of navigation-->

</div><!--end of header-->

<div id=”content-wrapper”>

<div id="content"></div>

<div id="sidebar"></div>

</div><!--end of content-wrapper-->

<div id="footer"></div><!--end of footer-->

<!--end of <span class="hiddenSpellError" pre="of ">continer</span>-->

</body><!--end of body tag-->

</html>

Finally! Finally we have done with our homepage. If you have implemented everything correctly your website must look as shown below. Open the image in new window and verify it.

2

 

Leave a Reply