Sunday , 23 April 2017
Home » WP TUTORIALS » Dreamweaver » Designing Your Own homepage in Dreamweaver CC

Designing Your Own homepage in Dreamweaver CC

Giving the title for your website :

  • The title is a text or keywords which tell search engines about the information contained on that particular page.
  • Tile is given in head section of the webpage.
  • In Dreamweaver you can give the title by simply inserting text in the title box provided in top window.
  • Give a suitable and meaningful title for your homepage.

dreamweaver

Creating layout by using HTML tags :

Now we have almost done all the necessary things . We are heading towards actually designing our webpage as per our layout. You may finding this tutorials broad but I am trying to cover all the points rather than simply giving a code.

  • Open index.html in Dreamweaver.
  • There are files at the left bottom of Dreamweaver. You can locate index.html file there inside your main website folder.
  • Now click on split mode and move the cursor immediately after opening body tag.
  • Go to insert >> layout object >> div tag >> id
  • In place of id write container and click on ok.
  • Inside code view the generated code should be <div id=”container”></div>.
  • The container is outside box inside which we are going to place other boxes such as header,sidebar,footer.
  • Now click on the “+” sign located in right side of Dreamweaver.
  • After that select new style sheet file at the bottom and click okay. Save the style sheet file as layout.css
  • Now we have created a separate file which will contain layout attributes .The file is layout.css.
  • A new window should be opened for css. Fill in the options as below.

#container {
background-color: #FFF;
float: left;
height: auto;
width: 1000px;
margin-top: 10px;
margin-right: 180px;
margin-bottom: 10px;
margin-left: 180px;
}

  • The left and right margins of 180px will keep the equal blank space from both sides.
  • Now you should see a blank page. If you want to see what we have actually done change the background color to #0cf and you should see the change.
  • You can see the layout attributes in layout.css file located beside source files.

Creating the header of our website :

Now you should have understood little bit how Dreamweaver works.For creating a header we need a box of same width as container with less height. We will follow the same method that we used for container. We need to use div id for header which is present inside div id of container. You can change layout properties by clicking on the id located at top left of Dreamweaver.

  • Click on insert >> layout objects >> div tag >> id
  • <div id=”container”><div id=”header”></div></div>
  • Give id name header and click ok. Now click on “+” sign.
  • Now we will give layout attributes to header.
  • The layout file is already selected so no need to create new file.
  • Fill in the layout details as follows. You can directly type them in layout.css file as well. Div id is followed by “#” sign.

#header {
background-color: #0CF;
float: left;
height: 130px;
width: 1000px;
border-radius: 10px;
}

  • Click on file >> save all and press F12. You should see the changes on your web page. Aren’t you excited ?
  • The rounded borders of header are due to border-radius property in css.

In this tutorial you will learn “How to design Website Layout in Dreamweaver CC“.

I hope you have understood the steps. Its lot simple. Create a new div tag then press on “+” sign for new css rule and define the css rules for particular div tag. Now for logo and navigation we need to nest div tags under header div tag.

The float : left property is very important in design of this webpage.Let me explain what it exactly does. Suppose you have a block of 300px and you have another block of 500px. If you don’t use the float left property the 500px box will be somewhere else and 300px box will be somewhere else. What float : left does is if there is a space to the right of 300px box it moves it as much nearer as possible to the 300px box. If we want some space in between them we use margin property.Using float : left property for every div tag will make sure that there is no unwanted space between two boxes or blocks.

In next tutorial we will study how to create slide show and other aspects of our webpage. If you have any doubts ask them in comments section. Share the post with your friends if you find it useful.

From this tutorial you can learn to create a functional website in Dreamweave CC.

Leave a Reply