Transcript dreamweaver basics-text - South Portland School Department Staff

Learning the Basics
Lesson 1
Learning the Basics – Lesson 1
1
Objectives




Understand the Dreamweaver graphical
user interface.
Recognize how Flash text differs from
regular text.
Define a new site.
Name, title, and save your documents.
(continued)
Learning the Basics – Lesson 1
2
Objectives
(continued)




Specify preview browsers.
Specify background, text, and link
colors.
Put text on a page and format it.
Use the Assets panel to select and
apply color to text.
Learning the Basics – Lesson 1
3
The Dreamweaver interface

The major components of the Dreamweaver user
interface are:




The Document window, where you create and work on your
document.
The Insert bar, located above the Document window, and
the toolbar which contain buttons for common tools and
commands.
The Property inspector, located across the bottom of the
Document window. Its contents change depending on the
object that is selected.
Various panels located on the right side of the Document
window that are used to manipulate different aspects of
your page as you build it.
Learning the Basics – Lesson 1
4
An example of the
Dreamweaver interface
This figure shows the Dreamweaver user interface. Your interface may look
different depending on which panels are turned on or off in your document.
Insert bar
Panels
Toolbar
Document window
Property inspector
Learning the Basics – Lesson 1
5
Define a new site


Before you can begin creating Web pages, you must
define a site to hold those pages.
You will create a ‘local’ site on your computer’s hard
drive to contain the local copies of the Web pages.


You begin by creating a main folder for the local site, called the
“root” folder. All files and subfolders for the site are contained
within the root.
You can also create a ‘remote’ site on an Internet
server to hold the Web pages published to the Internet.

The remote site will contain a ‘mirror copy’ of your local site,
including all folders and files.
Learning the Basics – Lesson 1
6
Choose your path reference
preference

There are three ways you can reference paths
in your Web site in Dreamweaver. They are:



Site-root-relative – Provides the path from the root
folder to a document. This is a good choice for a
large Web site that may span multiple servers.
Absolute – Provides the full URL of the document
path, including the protocol, such as http://.
Document-relative – Provides a path for the file in
relation to the current folder. This is a good choice
for local links in most Web sites.
Learning the Basics – Lesson 1
7
Create a new site

To create a new site:

Click the Site menu, then click Manage Sites.



If this is your first Dreamweaver site, you will see
the Site Definition wizard appear.
If you have existing sites, the Manage Sites dialog
box will appear. If so, click the New button, then
click Site.
Assign a name to the site to help you identify
the purpose or content of the site.
(continued)
Learning the Basics – Lesson 1
8
Create a new site

To create a new site:




(continued)
Indicate if you do or do not want to use a server
technology.
Select the Edit local copies on my machine option
and then locate the folder to store your local site.
Respond to the remaining options and click OK to
create the site.
Click Done to close the Site Definition dialog box if
open, then click Done to close the Manage Sites
box.
Learning the Basics – Lesson 1
9
Specify preview browsers

You can specify one or more Web browsers to use to
preview your pages as you work on them. To do so:




Click the Edit menu, then click Preferences (Windows), or
click the Dreamweaver menu (Macintosh) and then click
Preferences.
Click on a browser name in the window on the right and
indicate if it is a primary or secondary browser.
Add any other browsers that you want to use that are not in
the list. Ask your instructor for help if you are unable to add
a new browser.
Click OK to close the dialog box. Your preview browsers are
defined and ready for use.
Learning the Basics – Lesson 1
10
Save, name, and add a title to
your documents


Any time you create a new document, you should save
it immediately, using options on the File menu.
When naming an HTML file, keep these things in mind:



Use lowercase letters so the names will work on all servers.
Don’t use spaces or special characters in your name. Numbers
are OK, but do not start a name with a number.
You can title each page, and the title will be shown in
the Web browser’s title bar. To title a page:


Click the View menu, point to Toolbars, then click Document.
Enter a descriptive title in the Title text box and then press
the Enter or Return key.
Learning the Basics – Lesson 1
11
Specify color for background,
text, and links
This is the Page Properties box where you can set a background color or image for
your page. You can set a color to be used for text and for hyperlinks (Links, Visited
and Active). To open this box, click the Modify menu, then click Page Properties.
Set color for hyperlinks by
selecting Links in the
Category window
Set color for text
Set background color
Select background image
Learning the Basics – Lesson 1
12
Add text to your Web pages



You can add text to your pages by typing it in or by
copying and pasting from some other document.
You can use the Property inspector to set the font (type
face style), the size of the text, and other style options
such as bold and italic.
The Property inspector has a drop-down menu of HTML
text formats, such as for paragraphs and headings.

HTML has six levels of headings. Heading 1 is the largest font
size and is used for titles. Heading 6 is the smallest font size.
The others decrease in size from Heading 2 to Heading 5.
Learning the Basics – Lesson 1
13
Add other text formatting
using the Property inspector
The Property inspector can be used to apply different formatting options to your
text. You can indent and outdent using the buttons indicated below.
You can also format text into lists. You
can create an ordered (numbered) list
or unordered (bulleted) list. You can
also create a definition list by clicking
the Text menu, pointing to List, and
then clicking Definition List.
Learning the Basics – Lesson 1
Unordered list
Ordered list
14
Use the Assets panel to save
and access color


Every color used in your
site is listed in the
Assets panel.
You can save commonly
used colors as a
Favorite to use in other
parts of your site, and
you can create custom
colors.
Learning the Basics – Lesson 1
15
Change font color using the
Assets panel


Select the text in your
page that you want to
change.
Select the color from
the Assets panel color
list and click the Apply
button.
Learning the Basics – Lesson 1
16
Add Macromedia Flash text to
your page

When you add a heading to your page, you can
add it as text and format it as a heading, or you
can insert it as a graphic.



Text formatted as a heading loads quickly, but your
formatting options are limited.
A graphic takes longer to load, but requires access to
a graphics program and time to create the graphic.
Flash text can be created using any font you
wish and saved as a Flash SWF file.

Flash text can be resized directly in the Document
window.
Learning the Basics – Lesson 1
17
Adding Flash text to your page




Position the insertion point in the Document window.
Set any alignment option (such as center) in the
Property inspector.
Click the Media button on the Common category of
the Insert bar and then click the Flash Text button to
open the Insert Flash Text dialog box.
Choose your font style plus other formatting and
color options.
Enter the text to display in the Text text box, and
save the file by giving it a name in the Save As text
box.
Learning the Basics – Lesson 1
18
The Insert Flash Text dialog
box
This figure shows the Insert
Flash Text dialog box. Note that
you can set a Rollover color for
the text here, as well as create
the Flash text as a hyperlink
with a target URL.
Learning the Basics – Lesson 1
19
Summary
In this lesson, you learned:

About the Dreamweaver graphical user interface.

To recognize how Flash text differs from regular text.

To define a new site.

How to name, title, and save your documents.
 To specify preview browsers.

To specify background, text, and link colors.

How to put text on a page and format it.

How to use the Assets panel to select and apply color to text.
Learning the Basics – Lesson 1
20