Dreamweaver Tips


Copy all of the content in the selection across all visible layers.

"I've inherited a Web site that uses nine exactly sized and positioned
navigation buttons. The client has requested text changes to all of
these buttons. So, I duplicated the buttons in layers and added the
text with text layers in Adobe Photoshop. However, when I select a
button and copy and paste the button into a new image, Photoshop
pastes only the text. What am I doing wrong?"

You're not doing anything wrong--Photoshop just doesn't realize you
want it to copy all of the content in the selection. If you have
multiple layers and you copy the content of a selection, Photoshop
will copy the content in the active layer only. A quick solution is to
copy all of the content in the selection across all visible layers. To
do so in Windows, press Shift-Ctrl-C. On the Macintosh, press
Shift-Command-C. Then, you can paste into a new image as you normally
would

CREATING AN INTERSTITIAL
A popular method to grab attention is to pop up a small window over the main browser window as an HTML page loads. This pop-up window is often referred to as an interstitial. Using Dreamweaver, creating an interstitial window is quite simple. Simply open the HTML that will call the interstitial and select the Body tag from the status bar in the lower-left corner. Now choose Window, Behaviors to display the Behaviors palette. Next, choose Open Browser Window from the Behaviors list box. In the resulting dialog box, enter the path and name of the HTML page you want to display in the new window, and the other window width, height, and attributes. Then close the window and review your page in a browser. As you can see, as the page loads, the browser opens a new, smaller window displaying new content.

IN PREPARATION OF CSS

I
n our previous tip, we advised you to remove all local formatting from your site HTML pages before you begin to use CSS (Cascading Style Sheets). As you can imagine, removing all the Font tags alone could be a Herculean task. Fortunately, Dreamweaver has several features you can take advantage of to make the transition from local formatting to CSS easier. For example, to remove all Font tags and attributes from an HTML page, open the HTML in Dreamweaver. Then choose Edit, Replace. In the resulting dialog box, choose Tag from the Find What list box. Then choose Font from the Tag list box and click the minus button to remove any attributes. Next choose Strip Tag from the Action list box. Finally, click Replace All. Dreamweaver parses through your HTML file and removes all the Font tags, leaving your document pristine and ready to accept the CSS.

VIEW SOURCE
If you're reading this tip, then you have a strong desire to learn about the Web. And, as you may know, one of the best ways to learn is to teach. Therefore, if you've done something especially cool with Dreamweaver, HTML, or JavaScript, let us and your peers know about it. In fact, you can make it really easy for your Web guests to see the cool HTML and JavaScript things you've implemented in your Dreamweaver pages. To do so, create a link to open the source code for your page. For example, to create a link to view the source of the opening page of www.topica.com, first insert an image or place text on your page. Then insert view-source:http://www.topica.com/ into the Link text field of the Properties palette. When the guest clicks the link, the View Source window of the opening page of Topica will appear.

Editing META Tags
Right after you hit F10, hit Ctrl-Home. It will definitely take you to the top of your HTML source which is where the head sections will be. Another shortcut, define your external editor to your homesite, then anytime you need to to something to your HTML source you can hit Ctrl-E and you can see your source in your external editor (Homesite) and you will see the top of your source.

ADDING SHADE TO A PARAGRAPH

Looking for a way to make that passage of Web text pop? Why not try the old yellow highlighter effect? Using CSS Styles in Dreamweaver, you can quickly create and assign your own yellow highlight tag. To do
so, first choose Text, CSS Styles, Edit StyleSheet. In the resulting dialog box, choose New. Name your style

.Highlight

and click OK.
Next, in the Style Definition dialog box, select Background from the Category list box. Select a light yellow color from the Background Color Swatch selector. Then, save and close the Style Sheet editor. To apply your highlight style to text, simply select a string of text and first choose Text, CSS Styles, Highlight. As you can see, the selected text now has a light yellow background.


INVERTING TABLES
If you apply a border to a table in Dreamweaver, the table takes on a three-dimensional "pop" due to the default light and dark edges that cause the table to seemingly rise off the Web page. To change the
standard three-dimensional embossed table look to an inset table, simply switch the direction of light striking the table. To do so, reverse the colors of the light and dark edges.

This is easy to accomplish in Dreamweaver. First, choose Window, Properties to display the Properties palette. Then select the table and click the color tab next to the Light Brdr text field. Choose a dark color from the Color palette. Then click the color tab next to the Dark Brdr text field and choose a light color. Preview your HTML document to see the effects of your subtle change.

"http://www.macromedia.com/support/dreamweaver"


LETTING THE BROWSER PICK THE SIZE OF A TABLE
In most cases, our advice is to always specify the attributes of an HTML tag. However, you don't have to specify a width for a table tag. If a browser begins to render a table tag without a width, it draws the table as small as possible and expands it as the objects (text or images) within the table require.

<UL TYPE=CIRCLE>

-----------------------------------------------------

OPENING A LINK IN A NEW WINDOW
The last thing you want to do is send someone away from your site. Therefore, when you place a link to another Web site in one of your Web pages, be certain the link opens a new page. This leaves your site
running in the background. When the Web user finishes browsing the other site, they close the window and return to your site.

To specify a link to open in a new browser window, highlight the link text in the Dreamweaver document window. Then, display the Property Inspector and choose Blank from the Target list box.

"<a href="http://www.cbsc.org/ontario/texport.htm" target="_blank">"

Loads the linked document in a new, unnamed browser window thereby eleminating frames in the new window.

"<a href="http://www.cbsc.org/ontario/texport.htm" target="_top">"

Loads the linked document in the full browser window, thereby removing all frames

<BASE TARGET=_blank">
or
<BASE TARGET=_top">

Just after the <BODY> tag in HTML does the same thing but targets in individual links overrides the BASE TARGET tag.


ACTIVATING THE EDIT STYLE SHEET DIALOG BOX

In our previous tip, we introduced you to cascading style sheets through the Dreamweaver Edit Style Sheet dialog box. As you may recall, to open the Edit Sheet dialog box, you have to navigate through several menus. As you can imagine, this quickly becomes tedious while you develop your own style sheet. Fortunately, there is a quicker way to activate the Edit Style Sheet dialog box. Simply press Ctrl-Alt-E in Windows or Command-Option-E on the Macintosh.


PARAGRAPH INDENTATION

In the past, you've had two methods of indenting text: using the <BLOCKQUOTE> tag or placing text in the second cell of a two-column table. Using cascading style sheets, you now have a better alternative.

Cascading style sheets allow you to specify the exact indentation for your text. For example, to indent all text using the <P> tag, choose Text, Custom Style, Edit Style Sheet. In the resulting dialog box, choose New. Then, select Redefine HTML Tag, choose P from the list box, and click OK.

In the Style Definition dialog box, choose Box and enter the desired Indent span (in pixels) in the Left text field of the Margin section. Finally, click OK and then Done to return to your HTML document. As
you'll see, any text wrapped in the paragraph tag (<p>) is now set to an indent. The definition of the new Paragraph style will look like

<STYLE TYPE="TEXT/CSS">
<!--
p { margin-left: 25px}
-->

</STYLE>


REMOVING A TAG
To remove a tag in Dreamweaver 2, you had to open the HTML editor, select the opening and closing tag,
and delete them from the Web page. Not a very elegant solution for a WYSIWYG (What You See Is What You Get) application.

Luckily, Dreamweaver 3 makes it much easier to delete a tag. Simply select the text or object in question and right-click to display the
context menu. Look for the Delete Tag command. Notice that Dreamweaver displays the selected tag that will be deleted alongside the Delete Tag command. Choose Delete Tag to remove the tag. Voila--it's gone!



IMPORTING WORD HTML
Although Microsoft Word can save its documents as HTML pages, it isn't pretty. Word adds all types of custom tags that aren't necessary in an HTML document. In fact, most of these tags are used only to display the document in Word.

You should clean up the extra HTML tags in a Word HTML file. Manually, this task could take hours. Luckily, Dreamweaver has a
special command to programmatically remove the extra tags Word adds.

To clean up the extra tags in a Word HTML document, choose File, Import Word HTML. Then, select your file in the File Open dialog box and click OK. There may be a momentary delay as Dreamweaver attempts to discern which version of Word created the HTML file. Next, choose which options the Clean Up Word HTML feature should use and click OK.


AVOIDING BREAKS IN TABLES
. If you are placing text in a table cell, an alternative to the nonbreaking space is to set the
table cell to No Wrap. To do so, place your cursor in the table cell. Then, select <TD> at the bottom of the Dreamweaver document window to select the table cell. Finally, choose Window, Properties to display the Properties palette and select the No Wrap check box.


SETTING TWO WORDS NOT TO BREAK

Usually you want to leave the text-wrapping decisions up to the browser. In most cases, any specific formatting you assign to text will appear differently on another computer. However, there are
instances where it is beneficial to locally format text. For example, the table column header "Part #" will look sloppy if a foreign browser displays it like

Part
#

To prevent odd breaks like this, replace the space between the words
with a nonbreaking space. To create a nonbreaking space in Dreamweaver, place the cursor in the text and press Ctrl-Spacebar in Windows or Command-Spacebar on the Macintosh. The HTML for a nonbreaking space is &NBSP:


EXACT SPACING

Exact spacing in HTML is a difficult task. To create precise layout, leading, and spacing, use a 1x1-pixel, transparent GIF as a spacer. Because you're using a transparent GIF, you can shape and mold the GIFto any dimension you require to position text, images, form objects, and tables. To do so, insert the transparent GIF into your Dreamweaver document. Then, set the width and height through the Propertiespalette until you achieve the desired amount of white space.


CREATING A PROPORTIONAL SCALING IMAGE

You can set an image to proportionally scale to the width or height of
the browser window.

To do so, insert an image into your Dreamweaver document. Then, choose Window, Properties to display the Properties palette. Select the image and specify 100% in the Width field in the Properties palette. Now,preview the Dreamweaver document in a Web browser. Notice the image is proportionally scaled to the width of the browser window.


CREATING A SCALING IMAGE

Have you ever wanted to give your Web visitor the ability to scale an image for a better look? You can use a percentage for the height or width parameters in the IMG SRC tag, and an image automatically scalesitself according to the size of the browser window.

For example, insert an image into a Dreamweaver document. Then, choose Window, Properties to display the Properties palette. Next, select the image and specify 100% in both the Width and Height Properties palette fields. Now, preview the page in a Web browser. Notice the image fills the browser window. Resize the window. Voila! The image automatically scales to the width and height of the browser window.


WHEN DREAMWEAVER COPS AN ATTITUDE

If you find that Dreamweaver stops responding or beeps at you, it may be due to an open dialog box or hidden message box. To escape the demands of the culprit and return focus to the Dreamweaver document window, select each open Dreamweaver document and press Esc. That should cancel or dismiss the dialog box or message box and return focus to the Dreamweaver document.