Tech Informer
DreamWeaver can be a dream to use
by Michelle Oleson
Member Services Assistant
With all the tools and options that are available, web design can be an overwhelming project. Programs such as DreamWeaver can provide a friendly environment for designing and updating web pages. A powerful program like DreamWeaver can also seem staggering with all of its functions and foreign tools. This article will break down for you some of the best things about using DreamWeaver to edit your website.
What can DreamWeaver do for you?
Are you looking to redesign your website? DreamWeaver offers ready-built templates. Under “Create from Sample,” choose “Starter Page (Theme)” or “Starter Page (Basic)” to see snapshots of all the templates available to you. Once you’ve selected a new page design, save it with a custom name like MyLibraryTemplate.html. Reuse this template for every page of your website.
These templates are built using Cascading Style Sheets (CSS). CSS controls which fonts, colors and other design issues are used consistently throughout your webpage. DreamWeaver automatically builds a CSS page separately from your main HTML page. The CSS page is linked to your template HTML page.
If you’re a more savvy web builder, DreamWeaver offers ready-built CSS style sheets you can choose and link to your completed HTML page, which would assign the fonts, colors, etc., from that CSS page to your HTML page. You’ll need to have some knowledge of HTML coding to link the pages, or use DreamWeaver’s CSS Styles Panel on the right-hand side of the screen to link to your style sheet.
|
Quick Tips for Everyone! |
![]() |
![]() |
DreamWeaver also makes rollover images and creating hotspots easy. Simply click “Insert,” then “Image,” then “Rollover Image.” The program will now walk you through finding the original image, and then how you want the image to change once a patron hovers over that image. A hotspot is a defined area within an image that you choose for a hyperlink. From the "Image" dropdown menu, select what kind of hotspot you want to draw: rectangular, circular, or polygonal. Click on an image in your HTML document to begin drawing your hotspot. In the "Properties" menu at the bottom of the screen, input the URL to which you would like your users to be taken when they click on that part of the image. |
|
You can also easily insert Meta tags, keywords and descriptions into the "Header" section of your website using DreamWeaver. From the "Head" dropdown menu, select which of the tags, keywords, or description for your website you’d like to define. You may already have these elements on your website, but have been unaware of them. Meta tags and keywords help search engines find your page easier. Descriptions help users with disabilities process your page through their computers. |
![]() |
![]() |
Another fancy tool DreamWeaver gives you is the ability to swap easily back and forth between the code side and the display side of your webpage while you're designing. You can also view both at once. Clicking an object in your display view will highlight the code that applies to that object in the code view. This is particularly useful if you just needed to paste the code for a link or image onto your blog or other externally hosted webpage. For example, you could design a table of images in DreamWeaver, and then paste the code into other online applications that accept HTML coding. You now know enough to be dangerous, so have fun! Be sure to test your pages first before copying over your existing webpage. For more information on the web about web design, contact Michelle Oleson at olesonm@tblc.org or check out the following links. |
Advanced Web Design: A Primer (article)
Jimworld (free website templates)
Spider Wizard
Spider Pro 100 Dos and Don’ts
Open Source Web Design (2,000+ free design downloads including blog templates)
Free Layouts (over 500 free downloads including MySpace and blog templates)
MeeboMe (embed an IM chat widget)
Slideshare (display your PowerPoint presentations on your website by embedding them with the Slideshare widget)