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
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 '-'
Tip#2: Creating a CSS
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!!!