adobe dreamweaver cs5 on demand part 14 pot

ptg
Chapter 4 Managing Web Site Files 87
When you’re working in Design or Split view, you can use visual aids in
Dreamweaver to make it easier to work with page elements, such as
borders, backgrounds, and outlines that are normally invisible.
Sometimes it’s hard to adjust elements without being able to see the
edge. For example, the Table Borders and Frame Borders commands on
the Visual Aids submenu on the View menu make it easier to view and
change the borders in tables and frames on a page. You can show or
hide all the visual aids at once or select each item individually. The
Visual Aids submenu highlights the menu icon or displays a checkmark
when a visual aid is turned on.
Using Visual Aids
Show or Hide Visual Aids
◆ All. Click the View menu, point
to Visual Aids, and then click
Hide All.
TIMESAVER
Press Ctrl+Shift+I
to show or hide all visual aids.
◆ Individual. Click the View menu,
point to Visual Aids, and then click
each item you want to show or
hide.
◆ CSS Layout Backgrounds.
◆ CSS Layout Box Model.
◆ CSS Layout Outlines.
◆ AP Element Outlines.
◆ Table Widths.
◆ Table Borders.
◆ Frame Borders.

◆ Image Maps.
◆ Invisible Elements.
Click to hide all visual aids
Click to show or hide
individual visual aids
From the Library of Wow! eBook
ptg
88 Chapter 4
Dreamweaver uses many styles of elements to create a Web page.
Some of the elements are invisible, such as text and images, and some
are not, such as anchors and line breaks. The invisible elements in a
Web page are important to the structure and functionality of a page.
However, they are not always necessary to view and make changes to
a Web page unless you specifically want to work with an invisible ele-
ment. You can use the Preferences dialog box to select the invisible
elements you want to show or hide. After you set your invisible element
preferences, you can use the Visual Aids submenu on the View menu to
show (enable) or hide (disable) the Invisible Elements command.
Showing invisible elements might slightly change the layout of a page,
however, it’s only temporary until you hide them.
Working with
Invisible Elements
Set Invisible Element
Preferences
Click the Dreamweaver (Mac) or
Edit (Win) menu, and then click
Preferences.
Click the Invisible Elements
category.
Select or clear the check box

options you want to show or hide:
◆ Named Anchors. Displays an
icon to mark anchor locations.
◆ Scripts. Displays an icon to
mark JavaScript or VBScript.
◆ Comments. Displays an icon to
mark the location of comments.
◆ Line Breaks. Displays an icon
to mark the location of line
breaks <br>.
◆ Client-Side Image Maps.
Displays an icon to mark the
location of client-side image
maps.
◆ Embedded Styles. Displays an
icon to mark the location of
CSS styles embedded in the
body section of a document.
◆ Hidden Form Fields. Displays
an icon to mark the location of
form fields that are set to
“hidden.”
3
2
1
2
3
From the Library of Wow! eBook
ptg
Chapter 4 Managing Web Site Files 89

◆ Form Delimiter. Displays the
border of a form to make it
easier to insert form fields.
◆ Anchor Points For AP
Elements. Displays an icon to
mark the location of code
defining an AP Element, which
is an element with an absolute
position assigned to it. AP
elements are not invisible, just
the code defining it.
◆ Anchor Points For Aligned
Elements. Displays an icon to
mark the location of HTML
code for elements that work
with the align option, such as
images, tables, ActiveX objects,
plug-ins, and applets.
◆ Visual Server Markup Tags.
Displays the location of visual
server markup tags, such as
Active Server Pages tags and
ColdFusion tags, whose content
cannot be displayed.
◆ Nonvisual Server Markup Tags.
Displays the location of
nonvisual server markup tags,
such as Active Server Pages
tags and ColdFusion tags,
whose content cannot be

displayed.
◆ CSS Display: None. Displays an
icon to mark the location of
hidden content using the
display:none property.
◆ Show Dynamic Text As.
Displays any dynamic text on
your page in the format of
{Recordset:Field} by default.
◆ Server-Side Includes. Displays
the content of each server-side
include file from the Web
server.
Click OK.
4
4
3
From the Library of Wow! eBook
ptg
90 Chapter 4
Before you can work with an element, such as text or an image, you
need to select the element first. If an element is invisible, you need to
make it visible before you can select it. You can select an element in
Design view by simply clicking the element. If you want to select the
complete tag associated with an element, you can use the tag selector.
The tag selector appears at the bottom of the Document window on the
Status bar. The tag selector shows the tags within the current selection
or insertion point. The leftmost tag in the tag selector is the outermost
tag in the selection. Simply select the code or place the insertion point
where you want to select a tag, and click the tag you want to select in

the tag selector.
Selecting Elements
Select Elements
◆ Visible Element. In Design view,
click the element or drag across it.
◆ Invisible Element. Click the View
menu, point to Visual Aids, and
then click Invisible Elements. You
can select the invisible elements
as visible ones.
◆ Tags. Select the code or place the
insertion point where you want to
select a tag, and then click the tag
you want in the tag selector.
Tab le ce ll s el ec te d
Tag s sel ec te d
From the Library of Wow! eBook
ptg
Working with Web Page Text
Introduction
Now that you've created a Web page, it's time to throw in
some text to get the message across. Text comes in many
forms: from headings and paragraphs, bulleted points, and
body text written especially for the Web. Your job as a Web
designer is to make it all flow together in a logical, attractive,
understandable fashion.
Many designers who come from the professional printing
industry are surprised at the lack of typographic control on a
normal Web page. Specific fonts are suggested, not specified,
sizes are relative, and line spacing seems to be imaginary.

Designers of print-to-paper are used to exacting standards
and control. For example, tell a print designer that although
he specified the
Benguiat
font to be used in his brochure
design, the readers might wind up with
Times New Roman
,
or
Garamond
. That designer would be out the door and look-
ing for a new print shop. Yet, that's what sometimes happens
on the Internet.
Some Web designers, to achieve the desired look,
respond by converting their text into graphics, but don't. For
one reason, text converted into graphics bloats the size of the
page and increases download times; another reason is that
text converted to graphics is not searchable.
Cascading Style Sheets (CSS) are more and more becom-
ing a real option and give the Web designer almost as much
control as the print designer.
In this chapter we're going to talk about text as it relates
to standard Web page construction: adding text to a page,
modifying text, using text to attract attention, formatting text,
checking text… text, text, text.
5
5
What You’ll Do
Add Text to Web Pages
Import Tabular Data

Import Content from Microsoft
Documents
Insert Special Characters and
the Date
Select Text
Copy and Paste Text
Set Copy/Paste Preferences
Modify Font Combinations
Format Characters and Paragraph Text
Control Line Spacing
Insert Horizontal Rules
Create Ordered and Unordered Lists
Create Definition Lists
Modify Lists
Apply and Create Text Styles
Find and Replace Text or Code
Check Spelling
Use Undo and Redo
Set Font Preferences
91
From the Library of Wow! eBook
From the Library of Michele Renth
ptg
92 Chapter 5
Working with text is not just about placing letters on a page; it's about
using text as a page design element and it's also about readability.
What's the use of adding text to a Web page if it's too small to read, or
the font is not one that renders well on a pixel-based monitor?
Remember, there are fonts that look good on paper, and fonts that look
good on a computer monitor. Dreamweaver is going to help us out with

the formatting part of the equation; it's up to you to make the words
sound good. The cool thing about working with text in Dreamweaver is
the choices you have; for example, you can choose to type text directly
into a page, or copy and paste the text from a word processing docu-
ment. Text is added to the Web page in several ways: you can open up
a blank Web page and just start typing; however, you have very little
control over text formatting. Another way is to create a table, and insert
the text into the individual table cells. This gives you the ability to con-
trol your margins and paragraph formatting. The newest way is through
the use of individual layers. Layers not only give you the ability to con-
trol your paragraph formatting; in addition, they give you the ability to
move the layers, even stacking one layer on another.
Adding Text to Web
Pages
Add Text to a Web Page
Open the Web page you want to
add text.
In this example we use a Web
page with an inserted table.
Click with your mouse in the table
cell that you want to add text.
Begin typing the text that you want
to add.
Press the Enter (Win) or Return
(Mac) key to start a new
paragraph.
Dreamweaver adds text based on
its default formatting parameters,
and automatically wraps the text
when it comes to the end of the

table cell.
4
3
2
1
2
3
From the Library of Wow! eBook
ptg
Chapter 5 Working with Web Page Text 93
If you have data in tabular form, such as a database or spreadsheet,
you can import the data as delimited text files. Before you can import
the data, you need to export or save the data in the database or
spreadsheet as a delimited text file, which is a file format with the data
separated by tabs, commas, colons, or semicolons. From here, you can
import the data file to your page in Dreamweaver and format it as a
data table. When you import the data, you can specify the table layout
and formatting options you want.
Importing Tabular
Data
Import Tabular Data
Open the Web page you want to
import content.
Click in the location where you
want to insert content.
Click the File menu, point to
Import, and then click Tabular
Data.
Click Browse, navigate to the
location with the file you want to

import, select the delimited file,
and then click Open.
Click the Delimiter list arrow, and
then select the delimiter type you
used when you exported or saved
the file.
Click the Fit To Data or Set To
option. If you selected the Set to
option, enter a specific width or a
percentage of the browsers
window width you want (in pixels).
Enter the cell padding and cell
spacing you want (in pixels).
Click the Format Top Row list
arrow, select the formatting option
you want, and then enter the table
border width you want (in pixels).
Click OK.
9
8
7
6
5
4
3
2
1
7
4
5

6
8
9
From the Library of Wow! eBook
ptg
94 Chapter 5
If you're a Windows user you can import Microsoft documents directly
onto your Web pages. You can use the Import submenu on the File
menu to import content from Microsoft Word or Microsoft Excel docu-
ments into your Web pages. If you want to create a link to a Microsoft
Word or Excel document, you can simply drag the document file to
where you want the link in your page. If the document file is not located
inside the local root folder, Dreamweaver prompts you to copy the file
to the root to maintain proper site organization. In addition, when you
upload your page to your Web server, you need to make sure you also
upload the Microsoft Word or Excel document, so the link works
properly.
Importing Content
from Microsoft
Documents
Import Content from Microsoft
Word or Excel
Open the Web page you want to
import Microsoft content.
Click in the location where you
want to insert content.
Click the File menu, point to
Import, and then click Word
Document or Excel Document.
Navigate to the location with the

Microsoft document you want to
import.
Select the document.
Click Open.
6
5
4
3
2
1
4
5
6
See Also
See “Cleaning Up Word HTML” on
page 464 for information on cleaning
HTML in a Word document.
From the Library of Wow! eBook