dreamweaver :
extra features
how to eliminate them
Typically, browsers impose a margin of roughly 10 pixels on the left and top of your page. For example, this pop-up page has a duck image on top of a blue background, and you can see the margin. In the version 4.0 browsers, it is possible to eliminate the margins by placing attributes in the <body> tag, as you can see in this pop-up window, where the duck image is flush against the edge of the browser window.
Unfortunately, Netscape (marginwidth, marginheight) and Explorer (topmargin, leftmargin) use different attributes, so you have to put both sets of attributes in the body tag.
<body TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
Dreamweaver also provides a menu driven way to do this. Select MODIFY>PAGE PROPERTIES and put zeros in the four areas that correspond to the above attributes.
You've probably discovered that cells within a table are often difficult to arrange in a satisfactory way. Dreamweaver offers an alternate method for creating cells in exactly the position you want. This method uses the layers feature of Dynamic HTML (we'll learn more about this in week 11) to allow the user to place content exactly on the page, and then convert these layers into cells within a table.
The approach is to create your layout, using layers to exactly place the different sets of content (the layers cannot overlap when using this methodology). Once the layout is set, you convert the layers into a table.
Why not just use layers? Layers add an additional level of complexity to a web page, and it is always best to use the simplest technology that solves the problem. In addition:
- Layers are not compatible with Browsers before 4.0 versions
- Layers have some problems with display because of bugs in the Explorer and Netscape. The display of tables is more reliable than layers.
Converting layers to tables
- Select MODIFY>ARRANGE>PREVENT LAYER OVERLAPS (or check the PREVENT OVERLAPS box in the layers window)
- Create layers on your page, put your content in the layers, and set the position of the layers on the page
- When you've completed your page layout, select MODIFY>CONVERT>LAYERS TO TABLE
- For the options in the conversion dialog, in general it is best to
select
- Smallest: Collapse Empty Cells, which will make less complicated tables by eliminating very small cells.
- Use Transparent GIFs, which uses small GIF images to keep the table cells the correct size
It's possible to place a tracing image in the background of the Document window. You can use this to layout your HTML elements over a comp image you've made. Keep in mind, the tracing image will not show up in the real web page when it's displayed in a browser. It is only used inside Dreamweaver to help with the layout of a web page.
To show a tracing image in the Dreamweaver Document window, select Modify>Page Properties and add the comp_image to the Tracing Image section. Adjust the transparency of the tracing image with the transparency bar. Then create your layout with tables or the above layers-to-tables technique, inserting sliced images into the cells.
Dreamweaver offers several ways of modifying text in a web page. Many of these capabilities are duplicates of what's available in the text Properties Inspector. But there are additional features:
TEXT>STYLE - This sub-menu make available several additional
text styles including strikethrough, and underline.
TEXT>CHECK SPELLING - This feature will check the spelling of the current selection, or the entire document. Shift F7 also starts the spell checker.
CHARACTERS INSERT menu - Some characters need special coding to make them appear in a web page. You can insert the more common special characters using the characters sub-palette, selected using the CHARACTERS tab at the top of the INSERT palette. The icon at the far right opens up a palette for Other Characters, which provides a grid of all the available special characters.
INSERT>SPECIAL CHARACTERS - This menu serves the same function as the
above menu.
You can also insert the characters by using HTML. Some of these have special abbreviations such as © that you put in the page HTML. A few are listed below:
© = ©
® = ®
µ = µ
¢ = ¢
&euro = &euro
Other characters can only be entered with a number. For example, the Yen symbol is shown by placing the following text in your HTML:
¥ = ¥
For a complete list of special characters, see pages 85-89 of "Web Design in a Nutshell". A complete list of these special characters is also available at the following URL:
http://www.w3.org/MarkUp/html-spec/html-spec_13.html
essential for good search engine placement
Meta tags are used to add elements to an HTML document that are not part of the standard definition of HTML. The most common use of these tags are to add a description and keywords to a page in a form that can be used by search engines. META tags are placed directly after the <HEAD> tag in the HTML.
In Dreamweaver you can add META tags using the INSERT>HEAD TAGS command.
You can also display the contents of the <head> section; select VIEW>HEAD Content.
for generating similar pages
You can create a template page that holds common elements that are used in a series of pages. In the template, you specify which parts of the page are editable in the template based pages. In this way, parts of these pages are set on each page, other parts come directly from the base template and are not editable.
If you need to make changes to the standard layout of your pages, make the change once to the template, and with one command all the template based pages will be updated to reflect the new layout. See the Dreamweaver Help for more information.
Dreamweaver includes a reference guide from O'Reilly for HTML, Cascading Style Sheets (CSS), and JavaScript. Select WINDOW>REFERENCE to access this comprehensive guide.
pull-down menu used for navigation
You can create a pull-down menu that will automatically send the browser to a new web page selected by the menu. Dreamweaver calls this a jump-menu. See the example above to see how it works.
To create a jump menu:
- Select the Forms tab in the Insert palette
- Place the cursor where you want the jump menu to appear
- Select the Jump Menu icon
- Set the Text and URL for each item in the menu
- Use the "+" icon to add additional items, "-" icon to delete them
- Use the up and down arrows to change the position of an item
