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
In 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.
|