Dreamweaver is one of the most well-known and powerful IDE (Integrated Development Environment) in today’s market. As an advanced web editor and unless you want to code by hand, it is a great choice for building multiplatform websites. As a beginner, you may find the interface difficult to navigate as although they have tried to make it more simplified, it still lacks intuition.
Here are top five tips for beginners using Dreamweaver – they are functions that are not obviously present but when you know of their existence, they can make using Dreamweaver a lot easier!
Cascading Style Sheets are a useful and prominent feature in Dreamweaver that enables you to quickly and easily maintain a consistent format throughout your website. They are essentially a collection of formatting rules that you create that can be reused and applied. Other bonus features are that they can be used to enhance your websites look and feel and, reduce its file size.
There are four types of CSS Styles namely:
Compound which is a combination of the above three types.
CSS styles are defined with the <style> tags which are embedded into the code.
To create a new CSS Style click on Windows > CSS Styles and click the ‘+’ icon to select the New CSS Style button. You will see a New CSS Rule dialog box in which you should select the type of style you wish to create. The most common one to choose is ‘Class…’ from the Selector Type drop down list. Now you must give it a name and save it under your site root. Click OK. In the CSS Rule definition dialog box you can set all the formatting options for this style sheet.
To apply the new style simply select it from the list.
Dreamweaver offers the option to view your web page in different formats. A useful one is to press F10 on your keyboard to switch to Code View where you can see all the code associated with your selected page. The other options are ‘Split’, ‘Design’ and ‘Live’. Split view splits the window in half so that you can see the code view and Design view at the same time. Design view enables you to revert to the editor’s default visual representation and Live view allows you to see it in your selected web browser.
When you press Enter on your keyboard, the line height is by default wider than what some peple may like – particularly when creating something like a list. You can change the space of this line break by simply pressing Shift+Enter on your keyboard.
Using templates when creating a website in Dreamweaver is considered good practice as like style sheets, it enables a consistent format across all web pages. However, a considerable benefit of using templates is that if you want to make a change to say, where you place the navigation bar, instead of manually changing it across multiple pages one at a time, you can change it in the template and use that, to automatically update all the pages that use the template.
When creating a template you can have things like headers and navigation bars that will be fixed and non-editable on the pages that use the template as well as, ‘Editable Regions’ which allow you to make changes in that preset area.
Dreamweaver makes the creation of rollover images very easy this is, where an image changes when the mouse cursor is placed over it. All you have to do is select the Insert menu and click Image Objects Rollover Image. In the dialog box that appears, you simply browse and select the image you want as the original display, and browse and select the image you want to appear when the mouse cursor is over the original image. If you are using it as say, part of your navigation bar, you can also insert the URL or page you want it to link to if a user clicks on it.
Bio - Hollie Miller
Hollie provides Dreamweaver Training for Acuity Training. In her spare time she loves to go to the gym and dress making.
Here are top five tips for beginners using Dreamweaver – they are functions that are not obviously present but when you know of their existence, they can make using Dreamweaver a lot easier!
- Using CSS Styles
Cascading Style Sheets are a useful and prominent feature in Dreamweaver that enables you to quickly and easily maintain a consistent format throughout your website. They are essentially a collection of formatting rules that you create that can be reused and applied. Other bonus features are that they can be used to enhance your websites look and feel and, reduce its file size.
There are four types of CSS Styles namely:
- Class – Custom CSS Style which enables you to set the attributes to apply anywhere in your website.
- ID – Single Element CSS Style which enables you to redefine the formatting of preset tags such as ‘<h1>.
- Tag – HTML Tag CSS Style which assigns a specific ID to the style which can be embedded into specific tags in the code.
Compound which is a combination of the above three types.
CSS styles are defined with the <style> tags which are embedded into the code.
To create a new CSS Style click on Windows > CSS Styles and click the ‘+’ icon to select the New CSS Style button. You will see a New CSS Rule dialog box in which you should select the type of style you wish to create. The most common one to choose is ‘Class…’ from the Selector Type drop down list. Now you must give it a name and save it under your site root. Click OK. In the CSS Rule definition dialog box you can set all the formatting options for this style sheet.
To apply the new style simply select it from the list.
- Different Views
Dreamweaver offers the option to view your web page in different formats. A useful one is to press F10 on your keyboard to switch to Code View where you can see all the code associated with your selected page. The other options are ‘Split’, ‘Design’ and ‘Live’. Split view splits the window in half so that you can see the code view and Design view at the same time. Design view enables you to revert to the editor’s default visual representation and Live view allows you to see it in your selected web browser.
- Line Breaks
When you press Enter on your keyboard, the line height is by default wider than what some peple may like – particularly when creating something like a list. You can change the space of this line break by simply pressing Shift+Enter on your keyboard.
- Templates
Using templates when creating a website in Dreamweaver is considered good practice as like style sheets, it enables a consistent format across all web pages. However, a considerable benefit of using templates is that if you want to make a change to say, where you place the navigation bar, instead of manually changing it across multiple pages one at a time, you can change it in the template and use that, to automatically update all the pages that use the template.
When creating a template you can have things like headers and navigation bars that will be fixed and non-editable on the pages that use the template as well as, ‘Editable Regions’ which allow you to make changes in that preset area.
- Creating rollover images
Dreamweaver makes the creation of rollover images very easy this is, where an image changes when the mouse cursor is placed over it. All you have to do is select the Insert menu and click Image Objects Rollover Image. In the dialog box that appears, you simply browse and select the image you want as the original display, and browse and select the image you want to appear when the mouse cursor is over the original image. If you are using it as say, part of your navigation bar, you can also insert the URL or page you want it to link to if a user clicks on it.
Bio - Hollie Miller
Hollie provides Dreamweaver Training for Acuity Training. In her spare time she loves to go to the gym and dress making.
No comments:
Post a Comment