Adobe Dreamweaver is a powerful tool for web designers. Dreamweaver provides a visual design surface and code editor to develop websites. While it has both pros and cons, its wide range of features allows you to build websites effectively.
Here are 10 simple but useful Dreamweaver tips and tricks for beginners.
1. Delete the line breaks:
While copying text from a document, e-mail or Word file to Dreamweaver you end up with line breaks at the end of paragraphs or lines. The link break character <br> signals the end of lines, so any text after it will display on the line below it. These characters are invisible and so it is difficult to remove them. Though Dreamweaver does not typically highlight these characters, you can change the settings in the preference menu to make the program show a small yellow icon which indicates line breaks. Once the line breaks are visible you can easily delete them.
2. Remember to define a site:
People often confuse working on Dreamweaver as working with a word document. However, designing a site isn’t about building one file, it is about building a site with a collection of interrelated files such as images, JavaScript files, Webpages and CSS files. Users who don’t understand this often forget the importance of setting up a site. Dreamweaver provides an easy to setup site process. It provides information about the location of your site’s files and lets you select one of the many Dreamweaver management tools. These tools transfer your file to your Web server, check broken links, and build a site with templates.
3. Increase the font size of your code:
With Dreamweaver’s feature to adjust your font size, you can increase the code size in few easy steps. To increase your font sizes first choose Dreamweaver > Preferences then click the Fonts category after that select the new size and click OK. This will help you make the code easily readable and you can work on developing your website for a long period of time without straining your eyes.
4. Switch off CSS background Shorthand:
One of the features of CSS is background property. This feature allows you to add color or images to your background. Dreamweaver’s background shorthand property shortens the 3 line code to just one line defining an image, color and repeat property. This can certainly make it easier for defining background properties but if you leave one property in the shorthand version, the web browser will treat is as “none”. For example, while changing backgrounds if you specify only image property, the web browser will remove the existing color from the previous background. Hence, it is better to switch off the CSS background shorthand to avoid this problem.
5. Copy styles with CSS Designer:
With CSS Designer you can visually enhance the styles on your web page. If you wish to use more features of CSS designer right-click on any selector to use copy or duplicate operations. These options allow you to copy styles from one selector to another. These styles include background, text, animation or border. If you want to copy an entire selector use the standard duplicate or duplicate into media query command for a targeted approach. These shortcuts will save you a lot of time and also maintain consistent styling.
Adobe Dreamweaver CS5 comes with a browser navigation toolbar. This toolbar is created to be used with Dreamweaver’s live view option. You can find both of these options in the document window. Live view is used to see a preview of your web page. With a live view, you can click on the link and move to a particular page. The navigation toolbar displays the location of the new page and allows you to navigate between pages easily. You can hide this toolbar when not in use by unchecking the Browser navigation option in the View > Toolbars section.
7. Manage your files:
All the files are present in the Files panel when you set up a site with Dreamweaver. You can use this file panel for many functions such as rename, move, and highlight the name of the file. This is probably common and you might know all this but web pages are different from regular files. Web pages have images, links to other Web pages and CSS styles from an external style sheet file. Renaming an image, web page or CSS file normally through Windows explorer can result in broken links. Whereas Dreamweaver allows you to update links automatically if you move or rename a file using the files panel. This way there are no broken links.
8. Opt for Tag selector:
While applying CSS class style, adding or removing the tag with precision can be difficult. For selecting precise lines Dreamweaver’s tag selector is the best. The tag selector is placed in the bottom-left of the document window. This selector shows all the HTML and other tags present around the text. You can select specific tags by clicking a tag available in the tag selector bar. The highlighted tag represents that the tag is selected.
9. Use snippets:
Dreamweaver provides snippets that are core bits of code that can save a lot of time. Snippets are synced via Creative Cloud which makes sure they are available on every system. You can assign the most used ones as a keyboard shortcut. If you want to edit shortcuts, open keyboard shortcuts design and duplicate the standard set. Then, select the snippet category below the commands section to select your favorites. You will then find a list of all available snippets including the ones you create. The most difficult part is to figure out which keyboard combinations are unused. But this can be solved by using a modifier.
10. Connect WordPress and Dreamweaver:
Dreamweaver and WordPress make a great team. You can design and modify WordPress pages with Dreamweaver’s dynamic file toolset. This toolset includes custom filters, dynamically related files, and site-specific code hinting. The difficult part is to figure out how to work with other site pages with Dreamweaver. You should first start with the index.php file present in the WordPress site root and navigate from there. You can add path directly to the web address or use Dreamweaver feature to click a link. After the page is displayed the CSS and other tools in Dreamweaver are in your control.
Adobe Dreamweaver is great for building a website. Along with basic features like code completion, code collapsing and syntax highlighting it comes with some advanced features such as code introspections and real-time syntax checking. These mentioned tips will help you build your website more efficiently. If you are looking for tools to build a website without a lot of coding, check out these website building tools.
