Chapter A - Getting Started with Dreamweaver MX 2004

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

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

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

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

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

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

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

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 8 application Dreamweaver 8 FIGURE 4 Starting Dreamweaver 8 (Macintosh)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 14 Site definition for The Striped Umbrella dialog box

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

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

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

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)

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

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

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

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

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

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

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

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