Learning the Basics

1
Learning the Basics

• Lesson 1

2
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)

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

4
The Dreamweaver interface

• The major components of the Dreamweaver user
  interface are (shown on next slide)
• 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.

5
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 Toolbar Document window Property
inspector
Panels
6
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 computers
  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.
  (We will NOT be creating a Remote Site)

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

8
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)

9
Create a new site

• To create a new site (continued)
• Indicate if you do or do not want to use a server
  technology. (Choose NONE)
• Select the Edit local copies on my machine option
  and then locate the folder to store your local
  site.
• (If you dont already have a folder, you should
  create one)
• 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.

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

11
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.
• Dont 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 browsers 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.

12
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
13
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.

14
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.
Unordered list Ordered list
15
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.

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

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

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

19
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.
20
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.