tutorial 1 introducing macromedia dreamweaver 8

49
Dreamweaver 8.0 Tutorial 1 1 XP Tutorial 1 Introducing Macromedia Dreamweaver 8

Upload: jerod

Post on 25-Feb-2016

58 views

Category:

Documents


0 download

DESCRIPTION

Tutorial 1 Introducing Macromedia Dreamweaver 8. Introducing Macromedia Dreamweaver 8. In this tutorial, you will: Explore the structure and history of the Internet and the World Wide Web Become familiar with the roles of Web servers and Web clients Learn the basic components of a Web page - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

1

XP

Tutorial 1

Introducing Macromedia

Dreamweaver 8

Page 2: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

2

XPIntroducing Macromedia Dreamweaver 8

• In this tutorial, you will:– Explore the structure and history of the Internet and the

World Wide Web– Become familiar with the roles of Web servers and

Web clients– Learn the basic components of a Web page– Open a Web page in a browser– Use hyperlinks

Page 3: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

3

XPIntroducing Macromedia Dreamweaver 8

• In this tutorial, you will (cont’d):– Review the history of Web design software– Start Dreamweaver and select a workspace layout– Create a local site definition– Explore the Dreamweaver tool set– Investigate the Dreamweaver Help features– Exit Dreamweaver

Page 4: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

4

XPDreamweaver and the Internet

• The Dreamweaver software allows you to create and manage Web sites.

• A network:– Is a series of computers connected together to share

information and resources– Allows information to be exchanged between

computers– Has a server that controls the information sharing

• The Internet is a global network containing many smaller interconnected computer networks.

Page 5: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

5

XPDreamweaver and the Internet

Illustration of the Internet

Page 6: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

6

XPDreamweaver and the Internet

• When connecting to the Internet, information is shared using a set of technical specifications that define a format for sharing information called a protocol.

• Simple Mail Transfer Protocol (SMTP) is the standard format for most e-mail software, which allows people with different e-mail services to communicate.

• The World Wide Web (WWW or Web) is a portion of the Internet with its own protocol.

Page 7: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

7

XPDreamweaver and the Internet

• The Web uses HTTP protocol and an HTML document structure.

• The Hypertext Transfer Protocol (HTTP) controls the transfer of Web pages over the Internet.

• The Hypertext Markup Language (HTML) defines how to format Web pages for display.

Page 8: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

8

XPDreamweaver and the Internet

• Web pages are the electronic documents of information on the Web.

• A group of related and interconnected Web pages is a Web site.

• Hyperlinks provide the connections enabling the user to move from one Web page or Web site to another.

Page 9: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

9

XPDreamweaver and the Internet

Illustration of the World Wide Web

Page 10: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

10

XPDreamweaver and the Internet

• Web servers store and distribute information to computers that are connected to the Internet.

• Web clients are the computers used to access the information.

• One common option for accessing the Internet and viewing Web sites is through an Internet Service Provider (ISP).

• A Web browser is the software that interprets and displays Web pages.

• Every Web page has unique address called a URL.

Page 11: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

11

XPDreamweaver and the Internet

Parts of a URL

Page 12: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

12

XPDreamweaver and the Internet

• You may also want to view local Web pages not posted to the Web by typing the file path name instead of the URL.

• The home page is the main page of a Web site.• Information branches out from the home page to many

different sites through hyperlinks.• The left side of the status bar displays the URL of the

hyperlink.• You can move between two or more open Web pages

by using buttons on the browser toolbar.

Page 13: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

13

XPDreamweaver and the Internet

Cosmatic Home Page

Page 14: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

14

XPDreamweaver and the Internet

• The main purpose of most Web sites is to provide information, which is conveyed through the content.

• A Web page usually contains a combination of:– Text– Graphics– Multimedia elements (i.e., video, animation, or

interactive content)

Page 15: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

15

XPEvolving Web Design Tools

• The original Web pages only consisted of text written directly into HTML code.

• The complexity and syntax of HTML eventually led to software packages that created HTML for non-programmers.

• Dreamweaver was designed as an easy-to-use site development and management tool for non-programmers to design Web pages.

Page 16: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

16

XPStarting Dreamweaver and Selecting a Workspace Layout Configuration

• Dreamweaver has three preset workspace environments:– Designer – Recommended for most users, it is an

integrated workspace that uses multiple document interface (MDI). In this environment, the Document window shows Design view by default.

– Coder (HomeSite) – This environment uses the same integrated workspace as the Designer workspace layout, but the panels are arranged similarly to Macromedia HomeSite. The Document window shows the Code view by default.

Page 17: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

17

XPStarting Dreamweaver and Selecting a Workspace Layout Configuration

– Dual – If you are working with two monitors, you can display the Document window in your primary monitor and display all the panels on your secondary monitor.

• Once a work environment is selected, you can move windows and adjust the workspace.

Page 18: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

18

XPStarting Dreamweaver and Selecting a Workspace Layout Configuration

• Dreamweaver opens in the same environment it was in when it was last closed.

• In the Designer environment, the menu bar is at the top of the work area and each panel group is on the right side of the screen.

• A panel contains related commands, controls, and information about different aspects of Dreamweaver.

Page 19: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

19

XPStarting Dreamweaver and Selecting a Workspace Layout Configuration

Dreamweaver in Designer Workspace Environment

Page 20: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

20

XPCreating a Site Definition

• You must set up a site definition for Dreamweaver, telling it where to locate the local copy (where changes and corrections are made) and the remote files for the Web site (where others can view the Web site).

• The site definition also defines parameters on how the site is set up.

• Dreamweaver stores a local Web site in the same format as it will be posted on the Web.

Page 21: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

21

XPCreating a Site Definition

• The Local site definition tells Dreamweaver where the local root folder is located.

• Dreamweaver has a Site Definition Wizard on the Basic tab in the Site Definition dialog box that will walk you through the process of creating the local site definition.

• You can also use the Advanced tab and input the information manually.

Page 22: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

22

XPCreating a Site Definition

Site Definition for Unnamed Site 1 Dialog Box

Page 23: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

23

XPCreating a Site Definition

• The parts of a Local Site Definition that must be entered are:– Site Name – an internal name– Local Root Folder – the location of all the files to

create the local version of the Web site– Refresh Local File List Automatically – if checked,

Dreamweaver automatically updates the file list when necessary

– Default Images Folder – it is a good practice to create a graphics folder within the local root folder to store all the graphics files that are used in the site

Page 24: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

24

XPCreating a Site Definition

– Links Relative To – types of relative hyperlinks: Document Relative links and Site Root Relative links

– HTTP Address – the Web site URL– Case-sensitive Links – checking the check box can

help you to avoid problems with case when you upload your site to the Web

– Cache: Enable Cache – if checked, allows Dreamweaver to update links when necessary

Page 25: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

25

XPExploring the Dreamweaver Environment

• To manage local and remote site files, you will use the Files panel.

• Once you open the root folder for the Web site you can:– Find a list of the folders and files in the local site – an

internal name– Perform any editing function on the files/folders such

as move, copy, delete, etc.– Transfer files to the remote site– Browse files outside of your site

Page 26: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

26

XPExploring the Dreamweaver Environment

File Panel with Site File List

Page 27: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

27

XPExploring the Dreamweaver Environment

• You can view your Web site using the site map.• The site map is a visual representation of how the

pages in a Web site are interrelated.• The site map can be viewed in the Files panel by

selecting Map view from the View list.• You can open any page in the Web site by double-

clicking its filename in the file list or the site map.• You can open multiple pages at one time, moving

between them by clicking the page name.

Page 28: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

28

XPExploring the Dreamweaver Environment

Files Panel with Site Map

Page 29: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

29

XPExploring the Dreamweaver Environment

Files Panel with File List and Site Map

Page 30: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

30

XPExploring the Dreamweaver Environment

Open Web Pages

Page 31: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

31

XPExploring the Dreamweaver Environment

• The Document window is the main workspace where you can create and edit Web pages.

• The Web page can be manipulated using the Document toolbar.

• The title bar information includes the page title and the filename of the selected Web page.

• There are three different ways to display the information in the Document window: Design view, Code view, and Split view.

Page 32: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

32

XPExploring the Dreamweaver Environment

Home Page in Design View

Page 33: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

33

XPExploring the Dreamweaver Environment

Home Page in Code View

Page 34: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

34

XPExploring the Dreamweaver Environment

Home Page in Split View

Page 35: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

35

XPExploring the Dreamweaver Environment

• The status bar is located at the bottom of the Document window showing:• Tag selector• Select Tool• Hand Tool• Zoom Tool• Set Magnification• Window Size menu• Document Size/Estimated Download Time

Page 36: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

36

XPExploring the Dreamweaver Environment

Status Bar Items

Page 37: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

37

XPExploring the Dreamweaver Environment

• The Property inspector is a toolbar with buttons that for examining or editing the attributes of any selected element.

• A page element is either an object or text.• The Property inspector buttons and options change

to reflect the attributes of the selected element.

Page 38: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

38

XPExploring the Dreamweaver Environment

Property Inspector with Text Attributes

Page 39: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

39

XPExploring the Dreamweaver Environment

Property Inspector with Text Link Attributes

Page 40: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

40

XPExploring the Dreamweaver Environment

Property Inspector with Image Attributes

Page 41: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

41

XPExploring the Dreamweaver Environment

• In Dreamweaver, anything created or inserted into a page is an object (i.e., tables, images, and links).

• The Insert bar contains buttons that are used to create and insert objects.

• The Insert bar is broken down into buttons reflecting categories of objects.

Page 42: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

42

XPExploring the Dreamweaver Environment

Insert Bar Categories

Page 43: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

43

XPExploring the Dreamweaver Environment

Insert Bar

Page 44: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

44

XPGetting Help in Dreamweaver

• There are several ways to get help when using Dreamweaver.

• The Using Dreamweaver Help command includes information about all of the features available.

• Tabs on the Dreamweaver 8 Help window: Contents, Index, Search, and Favorites.

• Dreamweaver also provides information about the program with a quick tour and Tutorials.

• Further support can be accessed from the Dreamweaver Support Center on the Web.

Page 45: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

45

XPGetting Help in Dreamweaver

Dreamweaver 8 Help Contents

Page 46: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

46

XPGetting Help in Dreamweaver

Dreamweaver 8 Help Index

Page 47: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

47

XPGetting Help in Dreamweaver

Dreamweaver 8 Help Search

Page 48: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

48

XPExiting Dreamweaver

• To Exit the program:– Use the Exit command on the File menu – Use the Close command or Close button on any open

windows– Dreamweaver will prompt you to save any Web

pages that you haven’t yet saved.

Page 49: Tutorial 1 Introducing Macromedia Dreamweaver 8

Dreamweaver 8.0Tutorial 1

49

XPTutorial Summary

• You should now be able to:– Understand the basic parts of Web sites on the Internet

and how to get to them– Know the basics about browsers and opening Web

pages– Open Dreamweaver – Understand the basics about Dreamweaver layout and

tools– Define, view, and edit a Web page– Get help in Dreamweaver