Quick and Easy Dreamweaver Tips

Dreamweaver is one of the most established, professional, and efficient HTML editor that is used across the world for coding, designing, and development of websites and web applications. One of the salient features in Dreamweaver is the visual editing feature that will help you to create web pages without you having to even write any codes. Here are some Dreamweaver tips that will help you in designing and development.

Tip#1: Jump Menus in Dreamweaver
The Jump Menus are used most commonly on websites these days because it can help you to manage more links within a limited amount of space. Here’s how you can create a jump menu using Dreamweaver:

1. The first step of the tutorial is to create a Menu/list within a form. Open Dreamweaver and chose HTML. On the top menu click on Insert>Form>List/Menu

2. Now on the top menu, go to Windows>Behaviors

3. In the Behaviors panel on the top right, Click on the '+' symbol and click on Jump Menu

4. Once, the jump menu opens, you need to enter your text as well as the URL for your links. If you want to add a new link then go back to the Behaviors Panel and click on '+' and if you want to delete a link then click on '-'

5. Now click OK.

6. Alternatively, you can enter the following HTML code to get the end result as under:

Tip#2: Creating a CSS
CSS stands for Cascading Style Sheets and are most commonly used with HTML and XHTML. It has been designed primarily to help demarcate the document content from presentation. It is maintained by W3C (World Wide Web Consortium) and most developers use it for changing or defining colors, styles, fonts, and other textual or visual elements in a website. So here’s a Dreamweaver tutorial for creating a Style Sheet.

Open Dreamweaver and click on HTML to open a new document

Click on Windows>CSS styles to open the CSS palette.

Go to the top right menu and click on the '+' icon at the bottom of the menu to create a new CSS rule.

Once you click on the ‘+’ icon, you will get a pop-up box like this:

In the radio button of Selector Type choose you will need to choose the style. You can start by creating style classes, which can be applied to your website content later on. You will be able to apply these styles to any tags.

In the radio button of Selector Type choose Tag to create styles, which can be applied only to a particular tag in your website HTML code.

Finally, there is advanced in the Selector Type. This is a combination of specific set of tags like "h1" "h2" "td" and will be applicable whenever h1/h2 header is mentioned inside a table cell. The pseudo-class selectors mentioned in advanced stand for a:link, a:hover, a:active, and a:visited, and others.

There is a category called “Define in” if you see the image above. This category is used for defining the style. You can embed it in the current page or in an external page. If you opt for an external page then a dialog box will appear and ask you to save your .css file. Once you are ready, click ok and the following window will appear:

In this window, you can find several attributes. You can define different types of style properties like color, font, border style, background color, and others. Once you have defined various attributes, click OK. Now your new CSS Style will show up in the CSS Style menu.

In the Style menu click on Properties to select the content of your website page so that you can apply CSS style to it. After this, select the specific content style.

You can even attach your CSS style file to any particular website page. You will be able to do it by clicking on the attack button given in the CSS Style menu.

You will see a pop-up window. In the pop-up window, you will need to choose if you need to create a link to your CSS file or whether you need to import the content only from the current page.

Easy wasn’t it!!!