Dreamweaver Tutorials – How to Design A Website in Dreamweaver : Tutorial 4

In previous tutorials, we have done basic foundation for creating a website. We have studied –

  1. Understanding of Dreamweaver 
  2. How to Design Website Layout
  3. Connecting Dreamweaver to FTP, Local Server etc.

Using FTP, we can send and download the files from web-server. So considering, we have done all the basic things I am showing you how to code the website. We are going to use very clean and valid code.

Content-How to Design A Website in Dreamweaver:

Difficulty: Moderate

Time Required: 3 hours

Follow the following steps to go further.

  • Choose classic work space from top window.

Dreamweaver classic  workspace

  • Create a folder for your website files on your local computer.
  • Connect Dreamweaver to web-server (optional) you can skip this step right now.
  • Go to File >> New
  • Select Blank Page >>  Page type – HTML >> layout –  none >> DocType – XHTML 1.0 Transitional >> Layout CSS – create new file >> create

new file in dreamweaver

  • Refer following image to cross check your selection.
  • Go to File >> save as >> index.html
  • Index.html is the home-page of our website.
  • Click on split. Using this view you can see both the code and design at same time.
  • Place your cursor between title tag and give the title for your website. You can also add title directly in the box to the right side of multi screen. [check the figure]

Code & design view in Dreamweaver CC| brainytuts.com

Giving the title tag:

Code For title tag:

<title> Brainytuts.com | web design tips and tutorials </title>

The text between two tags is the title of your website. Title of website is seen in top window of browser.

title in browser

Creating a CSS Style sheet:

  • CSS is known as cascaded style sheet.
  • In this file we are going to save layout attributes of the website we are going to create. Go to your website folder you created and create a new file called layout.css .You can give any name as you want but I prefer layout.css as its meaningful.
  • Once you create layout.css file add the following code before the closing head tag. <link href=”layout.css” rel=”stylesheet” type=”text/css”/>
  • This will link your website with the css file.

Creating Container of website:

  • Place your cursor after tag.
  • Insert new div id tag and name it as container.
  • The code must now look like
<div id="container>Content for  id "container" Goes Here</div>

div tag in Dreamweaver CC

  • In container we are going to include other parts such as header, content, sidebar and footer.
  • Click on + sign that is present above files.  Then you will see the following window.

Dreamweaver CC div tag

  • You need to adjust three things:
    • Select ID(Id applies to only one HTML element)
    • #container
    • New style sheet file
  • Now click on ok and replace the file with layout.css the one you create earlier.

new div id

  • Go to Background and chose your favourite color and then go to box and select width 100%.
  • 100% means the whole screen. Using % instead of pixels solves the problems of different screen sizes. Whatever may be the screen size be it just fits 100% accordingly.
  • Now your CSS file must have the following code.

Giving Layout attributes for Container:

@charset "utf-8";

/* CSS Document */

#container {

background-color: #FFF;

width: 100%;

}
 

Creating Header of website:

  • Header is present under container. Insert a new div id before end of container id and name it as header.
  • The code is as follows:
<body>

<div id="container">

<div id="header">Content of header</div><!--end of header -->

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

</body>
  • Click on + sign and give layout attributes like what type of fonts you want:

#header {

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

background-color: #AF4FE3;

height: 180px;

width: 100%;

margin-bottom: 5px;

font-size: 90px;

font-weight: bold;

color: #FFF;

text-align: center;

padding-top: 25px;

}

  • You must have this code into your css file.
  • Press F12 and check how your header looks.

header

Creating Navigation for website:

Navigation is a great way for users to navigate through your website easily. Every page in your website should have links to your home page and other important pages such as contact etc. In simple words menu is known as navigation. Manu can be multiple drop down but considering you are beginners in this tutorial I have shown single layered menu.

If you want to create multi layered navigation check out following article. Creating Multi-layered Drop down Menu using HTML AND CSS

 

  • Insert a new div id navigation in which we will place our menu.
  • Insert new ul id in navigation and name it as menu.
<div id=”navigation”>

<ul id=”menu”></ul>
</div>
  • Here ul id is used for unordered list.
  • The code for navigation is little bit complicated. Just copy it and paste it into your css file. I will explain every part of it.

HTML code for Navigation:

  • Insert this code after  end of header tag.
  • In place of # just give the link you want to show in the menu section.
  • Li is for list and ul is for unordered list.

<div id="container">

<div id="header">This is Header</div><!--end of header -->

<div id=”navigation”>

<ul id="menu">

<li><a href="#">Home</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">News</a></li>

<li><a href="#">Freebies</a></li>

<li><a href="#">Technology</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Tutorials</a></li>

</ul>

</div>

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

  • Now press F12 and checkout your navigation in browser.The menu looks broken. That is where css comes into play. Let’s make your menu super stylish using CSS.

menus

CSS code for Navigation:

Now let’s create the design for your navigation which you have already created above. Paste the below code in layout.css file. Above the code give the comment so it will not confuse later on.

If you want to learn more about creation of multilayered drop down menu check next article.

Create Multi-layered Drop down Menu using HTML and CSS

Navigation code starts here:
We are using Navigation div tag to hold our menu.Width 100% means the whole screen.Float left means if there is any space to left side the newly created id or class moves towards left.

#navigation {

background-color: #000000;

float: left;

width: 100%;

margin-bottom: 10px;

}
Menu is our actual menu layout block. ul is for unordered list which we use for menu items.list-style-type: none removes the bullets which we seen without adding css.
#menu, #menu ul{

margin: 0px;

padding: 0px;

list-style-type: none;

}
Menu a means the menu links.Display: block displays the menu items in blocks.

#menu a {

display: block;

}
li is for list and float: left property ensures that there is no blank space towards left side beside any menu item.
#menu li {

float: left;

}
Link means a link and a:visited means a visited link. In this we are giving styles for visited and present links. Styles such as change of color for visited link etc.
#menu li a:link,a:visited {

display: block;

color: #FFF;

width: 100px;

background-color:#000;

padding: 7px;

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

text-decoration:none;

text-align:center;

}
a:hover means when the mouse pointer is on the link while a:active means the active link or the page
#menu li a:hover,a:active {

display: block;

color: #FFF;

width: 100px;

background-color:#F9F;

padding: 7px;

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

text-decoration:none;

text-align:center;

}
  • After this cross-check your website with following one. Watch this image by opening in new window.If you got different output check the code once again.

website header with navigation in Dreamweaver CC

  • Let’s take a small coffee break. Aren’t you feeling good? If yes just drop a comment. Let us know your feedback to improve our quality.
  • If you have any questions feel free to ask. Shot me an email from contact us form.

Next Tutorial : Creating a website in Dreamweaver cc : tutorial 5

7 comments

  1. really helpful article ..thank u 🙂

  2. Hi.
    Your article is really helpful. But I am having trouble with the Menu bar
    this is the screenshot.
    http://www.4shared.com/download/mq-eDg9R/Untitled.bmp?tsid=20131013-205843-39c35b55
    Can you help me with this?

  3. Keep the good work 🙂

  4. Hello,

    Very well explained an documented tutorial! But is it possible to tell me how to center the menu items in the nav bar ?

    TXH

Leave a Reply