Lecture 1 - AACC OLA3

jellytrickInternet and Web Development

Nov 10, 2013 (3 years and 9 months ago)

84 views

Tutorial 1


Getting Started with
Adobe Dreamweaver
CS3

XP

XP

Objectives


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

Dreamweaver CS3 Tutorial 1

2

XP

XP

Objectives


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

Dreamweaver CS3 Tutorial 1

3

XP

XP

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

Dreamweaver CS3 Tutorial 1

4

XP

XP

Dreamweaver and the Internet

Dreamweaver CS3 Tutorial 1

5

Illustration of the Internet

XP

XP

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

Dreamweaver CS3 Tutorial 1

6

XP

XP

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

Dreamweaver CS3 Tutorial 1

7

XP

XP

Dreamweaver 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 to another.

Dreamweaver CS3 Tutorial 1

8

XP

XP

Dreamweaver and the Internet

Dreamweaver CS3 Tutorial 1

9

Illustration of the World Wide Web

XP

XP

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

Dreamweaver CS3 Tutorial 1

10

XP

XP

Dreamweaver and the Internet

Dreamweaver CS3 Tutorial 1

11

Parts of a URL

XP

XP

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

Dreamweaver CS3 Tutorial 1

12

XP

XP

Dreamweaver and the Internet

Dreamweaver CS3 Tutorial 1

13

Cosmatic Home Page

XP

XP

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

Dreamweaver CS3 Tutorial 1

14

XP

XP

Evolving Web Design Tools


The original Web pages only consisted of text
written as HTML.


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


Dreamweaver grew out of this need for easy
-
to
-
use, visual tools that enable Web authors to
rapidly develop reliable and well
-
coded Web
pages.

Dreamweaver CS3 Tutorial 1

15

XP

XP

Starting 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 Adobe HomeSite and ColdFusion. The
Document window shows the Code view by default.


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.

Dreamweaver CS3 Tutorial 1

16

XP

XP

Starting Dreamweaver and Selecting a
Workspace Layout Configuration


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


Dreamweaver opens in the same state 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.

Dreamweaver CS3 Tutorial 1

17

XP

XP

Starting Dreamweaver and Selecting a
Workspace Layout Configuration

Dreamweaver CS3 Tutorial 1

18

Dreamweaver in Designer Workspace Environment

XP

XP

Creating a Site Definition


You must set up a site definition for
Dreamweaver, telling it where to locate the local
files (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.

Dreamweaver CS3 Tutorial 1

19

XP

XP

Creating 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 setting up a
site.


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

Dreamweaver CS3 Tutorial 1

20

XP

XP

Creating a Site Definition

Dreamweaver CS3 Tutorial 1

21

Site Definition for
Unnamed Site 1
Dialog Box

XP

XP

Creating 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


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

Dreamweaver CS3 Tutorial 1

22

XP

XP

Creating a Site Definition


Local Site Definition parts continued:


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

Dreamweaver CS3 Tutorial 1

23

XP

XP

Exploring the Dreamweaver
Environment


To manage local and remote site files and
folders, 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


Perform any editing function on the files/folders such
as move, copy, delete, etc.


Transfer files to the remote site


Browse files outside of the site

Dreamweaver CS3 Tutorial 1

24

XP

XP

Exploring the Dreamweaver
Environment

Dreamweaver CS3 Tutorial 1

25

Files Panel with the Site Map

XP

XP

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

Dreamweaver CS3 Tutorial 1

26

XP

XP

Exploring the Dreamweaver
Environment

Dreamweaver CS3 Tutorial 1

27

Files Panel with

Site Map

XP

XP

Exploring the Dreamweaver
Environment

Dreamweaver CS3 Tutorial 1

28

Files Panel with File
List and Site Map

XP

XP

Exploring the Dreamweaver
Environment

Dreamweaver CS3 Tutorial 1

29

Open Web Pages

XP

XP

Exploring 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


Split view

Dreamweaver CS3 Tutorial 1

30

XP

XP

Exploring the Dreamweaver
Environment

Dreamweaver CS3 Tutorial 1

31

Home Page in Design View

XP

XP

Exploring the Dreamweaver
Environment

Dreamweaver CS3 Tutorial 1

32

Home Page in Code View

XP

XP

Exploring the Dreamweaver
Environment

Dreamweaver CS3 Tutorial 1

33

Home Page in Split View

XP

XP

Exploring 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


Document Size/Estimated Download Time

Dreamweaver CS3 Tutorial 1

34

XP

XP

Exploring the Dreamweaver
Environment

Dreamweaver CS3 Tutorial 1

35

Status Bar Items

XP

XP

Exploring the Dreamweaver
Environment


The Property inspector is a toolbar with buttons
that examine or edit 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.

Dreamweaver CS3 Tutorial 1

36

XP

XP

Exploring the Dreamweaver
Environment

Dreamweaver CS3 Tutorial 1

37

Property Inspector with Text Attributes

XP

XP

Exploring the Dreamweaver
Environment

Dreamweaver CS3 Tutorial 1

38

Property Inspector with Text Link Attributes

XP

XP

Exploring the Dreamweaver
Environment

Dreamweaver CS3 Tutorial 1

39

Property Inspector with Image Attributes

XP

XP

Exploring 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 used to create
and insert objects.


The Insert bar is broken down into tabbed
categories.

Dreamweaver CS3 Tutorial 1

40

XP

XP

Exploring the Dreamweaver
Environment

Dreamweaver CS3 Tutorial 1

41

Insert Bar Categories

XP

XP

Exploring the Dreamweaver
Environment

Dreamweaver CS3 Tutorial 1

42

Insert Bar

XP

XP

Getting Help in Dreamweaver


There are several ways to get help when using
Dreamweaver.


The Dreamweaver

Help command opens the Adobe
Help Viewer window.


Links on the Adobe Help Viewer window:


Contents


Index


Search


Adobe provides additional Dreamweaver product
support and Help features on its Web site
(
www.adobe.com).

Dreamweaver CS3 Tutorial 1

43

XP

XP

Getting Help in Dreamweaver

Dreamweaver CS3 Tutorial 1

44

Adobe Dreamweaver Help Contents

XP

XP

Getting Help in Dreamweaver

Dreamweaver CS3 Tutorial 1

45

Adobe Dreamweaver Help Index

XP

XP

Getting Help in Dreamweaver

Dreamweaver CS3 Tutorial 1

46

Adobe Dreamweaver Help Search

XP

XP

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

Dreamweaver CS3 Tutorial 1

47

XP

XP

Tutorial Summary


The Internet and the World Wide Web


Relationship between Web servers and Web
clients


Components of a basic Web page.


Dreamweaver work environment and local site
definition


Dreamweaver tool set, including the Files panel,
the Document window, the Property inspector,
and the Insert bar


Help system

Dreamweaver CS3 Tutorial 1

48