Dreamweaver Tips

Back to Training
Home Page

TIP #1:  Adding Netscape as a Secondary Browser (Versions MX & MX 2004)

TIP #2: Allow Multiple Consecutive Spaces (Versions MX & MX 2004)

When you press the space bar, Dreamweaver will insert a space but if you press the space bar again, Dreamweaver will not insert an additional space. This is because HTML allows for only one space between characters. HTML uses non-breaking-space characters to insert more than one space between characters. To add more than one space between characters, you can press CTRL+Shift+Spacebar or you can insert the "Non-Breaking Space" character by choosing the Insert menu, HTML, Special Characters and then choosing NON-Breaking Space.

Another option is to set a preference to automatically add non-breaking spaces when you press the spacebar. To set this preference, select the Edit menu, choose Preferences and then choose the General category. Check the "Allow Multiple Consecutive Spaces" check box. Click Ok to close the Preferences dialog box.

TIP #3: Inserting Line Breaks (Versions MX & MX 2004)

Just as in MS FrontPage, pressing the enter key will take you down two lines (for a paragraph break) as opposed to just one. If you want to move down to the next line, press Shift+Enter (or you can select the Text category on the Insert bar, click on the Line Break tool and choose Line Break from the drop-down menu that appears, or choose the Insert menu, select HTML, select Special Characters and then choose Line Break).

TIP #4: Quick Spell Check (Versions MX & MX 2004)

To quickly check your spelling, press Shift+F7 (or from the Text menu, choose Check Spelling).

TIP #5: Clean-Up HTML Tool (Versions MX & MX 2004)

You can quickly check the HTML code underlying your web pages. From the Commands menu, choose Clean-up HTML (or Clean-up Word HTML if copying and pasting from MS Word). The HTML code will be checked, errors will be reported to you and you will be given a chance to correct these errors.

TIP #6: GIF, JPG or PNG File Format for Images - Which One Should I Choose? (All Versions)

TIP #7: Creating and Using Templates (Versions MX & MX 2004)

In Dreamweaver, Templates are used for pages that share the same design but contain different content. When pages are applied to a template, changes made to the underlying template file are automatically applied to the pages.

You can create a template page just as you would any other HTML page. When you Save the page, you choose Save as Template from the File menu. A templates folder will be created within your web site and the template file will be saved with the .dwt file extension within this folder.

To create a new page based on a template page, from the File menu select New and then choose the Templates tab from the New File dialog box. Select the template page name that appears in the list and click Create.

TIP #8: BELOW ARE USEFUL SITES FOR PSU Graphics… (All Versions)

You can get logo style pictures at: http://www.psu.edu/ur/webstyleguide/marksnew.html
Scenes from around campus at: http://www.psu.edu/ur/webstyleguide/campus.html
Page banners at: http://www.psu.edu/ur/webstyleguide/marks.html
And if you go to http://www.psu.edu/ur/webstyleguide, you will see an index listing with the above options.

• they are hard to create and manage especially when attempting to create frames for various screen resolution settings
• users have a hard time scrolling through pages with frames because as they scroll, it is sometimes difficult to determine which frame is scrolling
• Back or Forward buttons may behave differently than pages without frames
• Frames do not always resize when the browser window is resized

Tip #10 - Create a Template from an Existing Page

You can create a template from an existing page. Here's how...

1. With the page open, select the File menu and then select Save as Template.
2. If you have more than one site defined in Dreamweaver, select the appropriate site from the drop-down menu next to the Site text box.
3. Type in a name for the template and click Save. The file name will now include the .dwt file extension indicating it is a dynamic web template.

Tip #11 - Tips to Reduce Graphic File Sizes

Here are a few tips you can use to reduce the download time for pages containing graphics:

• If your graphic contains multiple colors, choose a color to be transparent. This will make one less color for the browser.
• Rather than using a graphic, perhaps you can use a background title.
• If a graphic will be repeated on the page or on another page, reuse the same graphic file rather than inserting a new graphic file. This allows the graphic to be cached in memory allowing the browser to retrieve it from memory and therefore, a lot faster than re-downloading the same graphic.

Tip #12 - Create a Copy of Original Graphic Files Before Editing

Before you insert and edit graphic files, it's a good idea to first make a copy of the original file and work with this copy rather than the original. That way, if you make a mistake, you will not have altered the original and you can always start over by opening the original graphic file and saving it as another copy.

Tip #13 - Specifying Fonts for Browsers

You can specify the font and font characteristics (such as bold or color) for your web pages. However, if the visitor of your site's computer does not have the specified font installed, their browser will substitute a font to be used for display. Different browsers interpret fonts differently and therefore, Netscape and Internet Explorer may display the same page differently. Use common fonts for your web pages to increase the chance that your visitors will have this font installed on their machines.

Tip #14 - Using Photos in Web Sites - Do You Have a Right?

When you insert a photo on a web page within your web site, consider whether or not you have a right to use this photo. The publication of the photo may involve others, such as:

1. Subjects in the Photograph itself - any recognizable person in the photograph has rights to the use of their image.
2. Photographer - the photographer has rights to the photo.
3. Developer - the developer of the photograph could have rights to the photo.
4. Publisher - the publisher of the photograph has rights to the photo.
5. Viewer - viewers of your photo have protection rights against certain kinds of photos (varies by country, state, or city).

Tip #15 - Three Items Every Web Page Should Contain

When you create a web page (or edit an existing page), you should verify that you have included the following three items:

Page Title - The page title will appear in the upper left hand corner when the page is displayed in the browser. If the visitor bookmarks your page, the page title will be the default bookmark title so it's important that the title describes the contents of the page.

Navigation Links - Include navigation links to other pages within your web site and remember that every page should at least have a link back to your site's home page.

Author and Copyright Information - Include Author and Copyright information on every page within your web site.

Tip #16 - Tips for Creating Great Web Sites

Here's some Web Site Design Tips:

• Always provide a Page Title - make the title brief and descriptive.
• The Home Page - make the site's purpose and navigation clear. The navigation section should include between five to seven links. If more links are necessary, consider organizing your links within five to seven areas.
• Page Length - when possible, keep the page length to one screen length so the user does not have to scroll.
• Buttons - make sure your buttons look and act like buttons.

Tip #17 - Using the Edit Style Sheet Dialog Box

To open the Edit Style Sheet dialog box, you select the Windows menu, and choose CSS Styles. This will open the CSS Styles Panel. You can use the icons appearing in the bottom of this panel to Attach, Create, Edit or Delete a Style Sheet.

If you choose the Edit icon, you can further choose to:

• Click Attach to Attach to an existing style sheet. This would be a separate text file that defines a style and this could be applied to a single page or to all pages within your web site.
• Click New to Create a New style sheet.
• Click Edit to Edit an existing style sheet.
• Click Rename to Rename an existing style sheet.
• Click Duplicate to Duplicate an existing style sheet.
• Click Remove to Remove an existing style sheet.

Tip #18 - Converting Colors to Hexadecimal (All Versions)

A Color's hexadecimal code allows you to specify the amount of red, green and blue (RGB) to display in a web browser. A computer monitor displays colors in RGB and every color can be defined by a hexadecimal code (a mixture of red, green, and blue - RGB).

You have several options for finding out the hexadecimal code for your color of choice:

* On the Web:  Access hexadecimal color charts at: http://www.hypersolutions.org/pages/rgbhex.html

* Using a converter: If you already know the RGB percentages for a particular color, you can plug them into an online converter at: http://www.univox.com/home/support/rgb2hex.html

* Using image-editing software: Many software applications, including Dreamweaver, display the hexadecimal notation for any chosen color.

If you want to know more about the hexadecimal system or find out how to convert numbers from decimal to hexadecimal, visit Dr. Math http://mathforum.org/library/drmath/view/55830.html

Tip #19 - RSS Defined

Really Simple Syndication (RSS) is designed for sharing web content between sites. Specifically, it is an XML file you create that contains information about your site as well as changing information such as news stories, events listings, project updates, etc. If you want other sites to publish some of your content, create an RSS document and register the document with an RSS publisher.

For more information and an Introduction to RSS, visit http://www.webreference.com/authoring/languages/xml/rss/intro/.

Tip #20 - Creating Style Sheets

Here are a couple of tips for creating style sheets:

1. Perform document-wide formatting first such as background color or image, and default font.
2. Apply one new style at a time and test immediately after applying each new style to simplify troubleshooting.

Tip #21 - The Importance of Using Browser Safe Colors

If you use colors on your web pages that are not "browser safe", site visitors may experience dithering. Dithering is the process where a color that can not be shown on a computer is approximated by mixing two other colors. The result may not always be the color you had intended for your page. For this reason, it is important to always use "browser-safe" colors.

Tip #20 - Creating Style Sheets

Tip #19 - RSS Defined

Tip #18 - Converting Colors to Hexadecimal

Tip #17 - Using the Edit Style Sheet Dialog Box

Tip #16 - Tips for Creating Great Web Sites

Tip #15 - Three Items That Every Web Page Should Contain

Tip #14 - Using Photos in Web Sites - Do You Have a Right?

Tip #13 - Specifying Fonts for Browsers

Tip #12 - Create a Copy of Original Graphic Files Before Editing

Tip #11 - Tips to Reduce Graphic File Sizes

Tip #10 - Create a Template from an Existing Page

Tip #9 - Frames: Why or Why Not?

TIP #8 - Good Site for PSU Graphics

TIP #7 - Creating and Using Templates

TIP #6 - GIF, JPG or PNG File Formats for Images - Which One Should I Choose?

TIP #5 - Clean-up HTML Tool

TIP #4 - Quick Spell Check

TIP #3 - Inserting Line Breaks

TIP #2 - Allow Multiple Consecutive Spaces

TIP #1 - Adding Netscape as a Secondary Browser