Dreamweaver: Basic page editing
This page focuses on introducing you to the very basic things you
will need to know to use Dreamweaver. We'll cover:
- Add text
- In many ways, Dreamweaver works very much like a text editor. To
add text to your document, simply click in the main body of your web
page to get a cursor and then begin typing. You may want to check to
see if the page is in design
view, but if you've just opened a new document, it probably is
already.
- Style text
- Dreamweaver allows you to add basic styling to text in several
ways. The primary method for styling text involves the properties window, which changes as
different parts of the page are selected. Remember that stylistic
choices do not always display the same way on different web browsers.
Check your web page from multiple browsers and multiple platforms to
be sure it looks good to multiple people.
- Boldface -- To put text in boldface, select it using
the mouse and click the "B" button in the properties
window.
- Italics -- To italicize text, select it using the
mouse and click the "I" button in the properties
window.
- Font Face -- To choose a specific font for your text,
select it using the mouse and click the dropdown window labeled
"Default Font"
- Font Size -- To select an alternate font size, select
the text using the mouse and click the dropdown window labeled
"Size".
- Align text
Dreamweaver allows to you align blocks of text on the page using
three different basic alignments: left, center, and right. To align
text, select it using the mouse and click the appropriate alignment
button in the properties window.
- Add spacing
- There are three different basic types of spacing you can add to
your documents:
- Line Break -- breaks the current line and moves the
cursor down one line to start anew.
To make a line break, press
SHIFT + Enter.
- Paragraph break -- breaks the current line and moves
the cursor down two lines to begin anew.
To make a paragraph break,
press Enter.
- Horizontal rule -- makes a horizontal line across the
text area.
To make a horizontal rule, click the "horizontal rule"
button in the toolbar (right).
- Add images
- Adding images to Dreamweaver documents is pretty easy. First, you
should format your image for the Web. The best way to do this is to
use Fireworks to resize and perhaps
compress your image so it takes up the least bandwidth possible. Once
you've done that, adding your image to Dreamweaver is as easy as can
be.
To add an image to your document:
- Place your cursor in the spot you want your image to be.
- Click the "Insert Image" button on the toolbar (right) or choose
Insert --> Image from the "Insert" menu.
- Choose your image using the dialog window.
- Enjoy your image!
- Align images
- One of the easiest ways to make your web page look great is to
have images and text side by side. To put an image next to a block of
text, you need to align that image.
Page with image not aligned. |
Page with image aligned |
| Click either image to enlarge it. |
|---|
To align an image:
- Place your cursor above the text you want the image to
appear next to. Insert the image.
- Select the image using your mouse.
- Using the "Align" pulldown menu in the properties window, align
the image "right" or "left." The text that was below the image will
fill in next to it.
- Add links
- Adding links to your document is a pretty simple operation. The
process you will use to create a link depends on what kind of link it
is.
Absolute Link -- an absolute link is a fully-resolved URL, or
web address. The link will contain the full data for the site you
want to link to, such as http://www.ufl.edu/.
- Using the mouse, select the text (or image) that you want to make
into a link.
- In the properties window, type the URL (web address) for the
website you want to link to in the text area labeled "Link" and press
Enter. (Be sure you include the full URL, starting
with http://)
Relative Link -- a relative link is a shortened link that points to
another document in the same location as the current document. For
instance, a link to the "adding images" page in this directory might
say this: adding_images.shtml
- Using the mouse, select the text (or image) that you want to make
into a link.
- In the properties window, click on the "Folder" icon (right) next
to the "Link" text area.
- Browse for the document you're linking to and select it.
- Making Words Wrap in Code View
-
To make words wrap while in code view, while in code view go to the view menu at the top. Select Code View Options and select word wrap.
Back
