How to Make a Coloured Box in Dreamweaver CS5

Adobe’s Dreamweaver CS5 Web development software is a great program for novice users to create web pages, as its graphic interface is really intuitive and easy to use. You can create different visual styles for text boxes, and give different colours and shades to them. You can then use them immediately in the context of the webpage that you are creating. If you want to create a colored box in Dreamweaver CS5, then you will have to create an HTML division tag, where you will be able to get your desired results.


  • 1

    Install Adobe's Dreamweaver CS5 Web development software in your computer, and run the program execution file to start building and coloring a box. At the “Create New” section, you will find “HTML”. Click it and you will be able to create a new HTML division tag.

  • 2

    Now, you do not need to work in HTML format. In fact, you will have to design the box and it will automatically be converted into HTML coding. For that purpose, you will have to locate and click the “Design” button. It will switch the program to design view.

  • 3

    From the “Insert” menu, select the "Layout Objects," which will open another submenu. From there, click the “Div Tag”.

  • 4

    To create the box, you will now have to click the "New CSS Rule" button. The program will now ask you to enter an identifying name in the "Selector Name" field. You can write anything in it. Try to write something that complements your project. For instance, you are making a coloured box. Therefore, you can write “colouredbox” in the "Selector Name" field.

  • 5

    In a new window that opens at the left hand side of the screen, click the "Box" button. Enter the dimensions of the box that you want to create, in the “Height” and “Width” fields.

  • 6

    Now, click the “Background” button present at the left side column and click the "Background Colour" box. You will now see a wide range of colours appearing in front of you. You can click on any of the colours that you want to apply to your box.

  • 7

    You can click on different colours one by one, in order to check the visual effects they provide to your box. After you are certain of using a specific colour, click “OK”. You will have to click “OK” once again, when prompted.

Leave a Reply

Your email address will not be published. Required fields are marked *

6 − = one