Notes from the Help Desk…

If you are a full-time web developer, you probably already use CSS (Cascading Style Sheets) to format and layout web pages. However, if your only design experience is creating and maintaining your company’s web site, you are probably still working with HTML. It’s time to think about changing.

CSS works with HTML to improve the appearance of your web pages. Styles can be applied to headings, images, tables, text, or any other object on a web page. If you work with styles in Microsoft Word, the concept is basically the same.

Do you remember what the Web was like back in 1994 when we were all amazed by the Louvre web site? (Remember the Mosaic browser?) Wow, we could actually see pictures on our computer that were in France! This was HTML 1.0 with no support for tables, so all Web pages were one column. Boring! Then tables came along, and all of a sudden, web pages could have more than one column, paving the way for more complicated layouts. A revolution! CSS represents another sea change in web design.

A snippet is a chunk of code that you can store in Dreamweaver to reuse later. Snippets can include HTML, JavaScript, ASP, JSP, etc. For example, let’s say you need to add several graphics to your Web site, and each graphic is in a two-cell table with the graphic in the upper cell and the caption in the lower cell. Since you will use the same table (with different content) several places on the site, there is no need to create the table each time. Simply create it once, save it as a snippet, and reuse it whenever you need to.

Dreamweaver also contains some predefined snippets that you can use as a starting point. For example, one snippet of JavaScript lets you add a Close button to any Pop-up windows you include on your Web site. This snippet obviates the need to create the code for each window.

Dreamweaver also includes snippets of code that lets you add a Browse for File… button, a variety of formatted tables, drop-down menus, a Print button, navigation aids such as breadcrumb links, and many more options.

Not everyone who visits your Web site can see the page. Some people with visual disabilities use screen readers to have the page read to them. For this reason, it’s important that you include alternate text with each of your images.

To add alternate text to your images:

1. Select the image.
2. Click into the Alt Text field in the Property Inspector and type a phrase that identifies or describes the image.

If you are sufficiently compulsive, you will remember to do this every time you add an image to a page.

If you tend to slack off when it comes to details like this, you can set a preference in Dreamweaver that forces you to add alternate text every time you add an image to a page.

To turn on the Image Accessibility prompt:

1. Select Edit | Preferences.
2. Select Accessibility from the Category List.
3. Add a check to the Images checkbox in the Show attributes when inserting list.
4. Click OK.
5. When you add an image to a page, Dreamweaver will display the following prompt:



The screen reader reads the information you enter in the Alternate text field. You should limit your entry to around 50 characters. For longer descriptions, consider providing a link, in the Long description field, to a file that gives more information about the image.

Linking to a named anchor lets you link to a specific place on a page.

Linking to a named anchor requires two steps: (1) Create the anchor. (2) Link to it.

To create an anchor on a page:

1. Click into the page where you want the anchor to appear.
2. From the Common category on the Insert bar, click the Named Anchor button (or select Insert | Named Anchor from the menus):



3. Dreamweaver will place an anchor icon in the document. (The icon will not be visible when the page is viewed in a browser.)

To link to a named anchor on the same page:

1. Select text or an image.
2. Click into the Link field in the Property Inspector and type the name of the anchor, preceded by the pound sign (#). The sample below links to the heading3 anchor on the same page:

To link to a named anchor on a different page:

1. Select text or an image.
2. Click into the Link field in the Property Inspector and type the name of the file followed by a pound sign (#) and the named anchor. The sample below links to the heading3 anchor on the products1.htm page:

If you like to edit images on your Web site with Photoshop, it’s easy to make Dreamweaver use it as the default image editor.

First, you have to select Photoshop as your primary image editor for jpgs (and gifs, etc.). To do so:

1. Select Edit | Preferences.



2. From the Category list, select File Types/Editors.
3. Select the file extensions you want to associate with PhotoShop.
4. In the Editors section , click the button with the Plus sign (+).
5. Dreamweaver will open the Program Files folder.
6. Double-click the Adobe folder.
7. Double-click the Photoshop folder.
8. Select the Photoshop executable (Photshop.exe).
9. Click the Open button.
10. Dreamweaver will add Photoshop to the list of editors.
11. Select Photoshop in the list and click the Make Primary button.

When you want to edit an image in Photoshop from a document in Dreamweaver:

1. Select the image.
2. Click the Edit Images button in the Property Inspector.

Instead of sending users away from your Web site when they click on an external link, you can force a new browser window to open. When the size of the new window doesn’t matter, simply select the _blank option in the Target field of the Property Inspector.

This options adds target="_blank" to the link in the source code.

If you want to control the size of the browser window that opens, add the Open Browser Window behavior in the Behaviors panel.

The Open Browser Window dialog will appear:

With this option, you can control the width and height of the window, as well as which toolbars appear in the new window, such as the Navigation Toolbar, the Location toolbar, or Menu Toolbar. You can also control whether scrollbars and resize handles are available to the user.

When you’re sizing tables or images, it’s helpful to have the horizontal and vertical pixel rulers showing.

To turn on the pixel ruler, select View | Rulers | Show. Be sure Pixels is selected on the Rulers submenu.

Dreamweaver’s interface can feel claustrophobic at times, esp. if you are working on a small monitor. With the Insert Panel and the Document Toolbar at the top, the Property Inspector at the bottom, and multiple panels on the right, sometimes it’s hard to find enough space to work on your page!

To hide all the toolbars and panels, press the F4 function key on the top row of the keyboard. To bring all the panels back, press F4 again.

This is one shortcut you’ll want to remember!