Presentation is loading. Please wait.

Presentation is loading. Please wait.

Chapter A - Getting Started with Dreamweaver MX 2004

Similar presentations


Presentation on theme: "Chapter A - Getting Started with Dreamweaver MX 2004"— Presentation transcript:

1 Chapter A - Getting Started with Dreamweaver MX 2004

2 Chapter A - Getting Started with Dreamweaver MX 2004
OVERVIEW Chapter Lessons Explore the Dreamweaver workspace View a Web page and use Help Plan and define a Web site Add a folder and pages, and set the home page Create and view a site map

3 Getting Started with Dreamweaver
Chapter A - Getting Started with Dreamweaver MX 2004 INTRODUCTION Getting Started with Dreamweaver What is Dreamweaver? Web design software for creating a Web page or a complex Web site What is a Web site? A group of related Web pages that are linked together and share a common interface and design

4 Using Dreamweaver Tools
Chapter A - Getting Started with Dreamweaver MX 2004 INTRODUCTION Using Dreamweaver Tools What does Dreamweaver offer? Design tools that can create dynamic and interactive web page without writing HTML code Organizational tools Site management tools Graphic site maps

5 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1 FIGURE 1 Dreamweaver 8 workspace Select tool Hand tool Title bar Menu bar Insert bar Zoom tool Document window Status bar Property inspector

6 Working with Dreamweaver Views
Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Working with Dreamweaver Views Design view Code view Code and Design view

7 Starting Dreamweaver (Windows)
Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Starting Dreamweaver (Windows) Click the Start button on the taskbar Click (All) Programs  Macromedia  Macromedia Dreamweaver 8

8 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1 Dreamweaver 8 FIGURE 3 Starting Dreamweaver 8 (Windows)

9 Starting Dreamweaver (Macintosh)
Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 1 Starting Dreamweaver (Macintosh) Click Finder in the Dock, then click Applications Click the Macromedia Dreamweaver 8 folder, then double-click the Dreamweaver application Dreamweaver 8 FIGURE 4 Starting Dreamweaver 8 (Macintosh)

10 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1 Changing Views Click the Show Code View button Click the Show Code and Design Views button Click the Show Design View button

11 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1 FIGURE 5 Code view for new document Show Code View button Show Code and Design View button Show Design View button Coding toolbar

12 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1 Viewing Panels Expand the Application panel Click each panel tab Collapse the Application panel Study the CSS and Files panel groups Collapse the CSS panel group

13 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2 Opening a Web Page Create new or open existing Web site Web page Homepage First Web page that appears when viewers go to a Web site Sets the look and feel of the Web site and directs viewers to the rest of the pages in the Web site

14 Basic Web Page Elements
Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 2 Basic Web Page Elements Text Hyperlinks (links) Graphics Banners Navigation bars Image map Flash button objects

15 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2 FIGURE 7 Common Web page elements Navigation bar Graphic Form

16 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2 FIGURE 8 Striped Umbrella Web page elements Text Graphic Banner Table Flash button object Text links

17 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2 Getting Help Keywords … … in results Contents Index Search Favorites Topics found FIGURE Dreamweaver 8 Help window

18 Web Site Creation Process
Chapter A - Getting Started with Dreamweaver MX 2004 LESSON 3 Web Site Creation Process FIGURE Phases of a Web site development project

19 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3 Planning a Web Site Audience needs Site goals Gathering content Budget Schedule Team Updates

20 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3 Creating Storyboards FIGURE The Striped Umbrella Web site storyboard

21 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3 Testing the Pages Browsers and browser versions Screen sizes Speed on different connections Testing is a continuous process

22 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3 Modifying the Pages Changes are constantly needed Test page after each change Modifying and testing is an ongoing process

23 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3 Publishing the Site Transfer all the files to a Web server Web server: a computer that is connected to the Internet with an IP address A Web site must be published to the Web server before it can be viewed by others

24 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3 Publishing the Site IP: Internet Protocol IP address Example: ISP: Internet Service Provider Hosts Web site FTP: File Transfer Protocol Host, host directory, login, password

25 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3 Publishing the Site Create a root folder Define the Web site Set up Web server access

26 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3 Root folder FIGURE Creating a root folder using Windows Explorer

27 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3 FIGURE Creating a root folder using a Macintosh

28 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3 Web site name Links relative to options Local root folder Enable cache Refresh local file list automatically FIGURE Site definition for The Striped Umbrella dialog box

29 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3 Remote info category Access list arrow FIGURE Setting the remote access for The Striped Umbrella Web site

30 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4 The Assets Folder Stores all non-HTML (media) files: Image files Sound files Video files Set it as the default location to store the Web site images You might want to create subfolders for each type of file

31 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4 Setting the Home Page Usually index.html (.htm), or default.html (.htm) Starting point for a site map Tell Dreamweaver which page you have designated to be your home page Add folders to the Web site Set the default images folder

32 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4 FIGURES 16 and 17 The Striped Umbrella site in Files panel with assets folder created Windows (left) and Macintosh (right)

33 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4 Browse for file icon Default images folder FIGURE Site definition for The Striped Umbrella Web site with assets folder set as the default images folder

34 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4 Page title and path Index.html FIGURE index.html placed in the striped_umbrella root folder

35 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5 The Site Map Graphical representation of pages Displays folder structure Page link type/status Checked out pages Map view in the Files panel Tree structure

36 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5 Verifying Page Titles Search engine keywords Title in browser window Bookmark in browser

37 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5 Uses of a Site Map In the Web site as an informational tool PNG or JPEG Print for report or meeting BMP or PICT

38 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5 Site Map Layout category Path for home page Page titles option button FIGURE Options for the site map layout

39 Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5 Site list arrow View list arrow Click to hide all panels FIGURE Expanding the site map

40 Chapter A - Getting Started with Dreamweaver MX 2004
SUMMARY Chapter 1 Tasks Explore the Dreamweaver workspace View a Web page and use Help Plan and define a Web site Add a Folder and Pages, and set the home page Create and view a Site Map


Download ppt "Chapter A - Getting Started with Dreamweaver MX 2004"

Similar presentations


Ads by Google