Peachpit macromedia dreamweaver 8 training from the source apr 2006 ISBN 0321336267

The lessons in this book guide you step-by-step through the creation of a project Web site, "Yoga Sangha." With Macromedia's official guide, you'll learn how to use the leading, best-sel

By Khristine Annwn Page

Publisher: Macromedia Press Pub Date: March 28, 2006 Print ISBN-10: 0-321-33626-7 Print ISBN-13: 978-0-321-33626-2 Pages: 608

Table of Contents | Index

Learn by doing! The lessons in this book guide you step-by-step through the creation of a project Web site, "Yoga Sangha." With Macromedia's official guide, you'll learn how to use the leading, best-selling Web editor and gain a thorough understanding of how you can use Dreamweaver 8 to effectively manage and maintain Web sites, develop sites that are accessible to a wide audience, and work in an environment that integrates visual and code editing As you complete the tasks, you'll develop the skills and techniques that you need

to create Web sites on your own In addition to the basics of creating a Web page that incorporates text, graphics and tables, you'll learn about all that's new in Dreamweaver 8: visual authoring with XML data, advanced CSS support including a unified CSS panel and a style rendering toolbar, integration with the latest Web technologies and standards, and more The companion CD-ROM contains all of the lesson files as well as a free trial version

of Dreamweaver 8.

By Khristine Annwn Page

Publisher: Macromedia Press Pub Date: March 28, 2006 Print ISBN-10: 0-321-33626-7 Print ISBN-13: 978-0-321-33626-2 Pages: 608

Index

permissions@peachpit.com

Flash, Dreamweaver and Macromedia are registered trademarks

of Adobe Systems, Inc

Throughout this book, trademarked names are used Ratherthan put a trademark symbol in every occurrence of a

trademarked name, we state that we are using the names in aneditorial fashion only and to the benefit of the trademark ownerwith no intention of infringement of the trademark

Notice of Liability

The information in this book is distributed on an "As Is" basis,without warranty While every precaution has been taken in thepreparation of the book, neither the author, Macromedia, Inc.,Adobe Systems, Inc nor the publisher, shall have any liability toany person or entity with respect to any loss or damage caused

or alleged to be caused directly or indirectly by the instructionscontained in this book or by the computer software and

Julie Bess, JBIndexing Inc

George Mattingly, GMD

Gauld, Russell Reza-Khaliq Gonzaga, Carol Coughlin, Paul andBritta from Avalon Art and Yoga, Katarina, Bhaktisukhini andeveryone from DoK, and the rest of my friends and family for allthe support, love and encouragement.

Dreamweaver 8 combines powerful visual layout tools with

robust text-based HTML editing features for the creation,

management, and maintenance of Web sites It gives beginnersimmediate access to the tools need for creating Web pages

while allowing experienced developers who are familiar withhand-coding to work directly with the code when needed Thisflexible program makes advanced techniques accessible andeasy to use The integration of powerful design, code, and

interactive features provides a wealth of benefits to both

beginners and advanced users

Prerequisites

This book is intended to familiarize you with the Dreamweaverdevelopment environment and focuses on equipping you withthe skills needed to lay out and design Web pages Because it isgeared toward beginner and intermediate users who may havelittle or no previous experience with Dreamweaver, coverage ofadvanced application building and dynamic Web site creationwith the use of databases, server behaviors and Web

applications is outside the scope of this book Those featuresrequire knowledge and understanding of dynamic design

concepts and of the languages used to create these sites-including ASP, JSP, ColdFusion and more For those who are

started in the coding environment, demonstrating how to workwith Dreamweaver's coding tools and pointing you to resourceswithin the program that will enable you to learn more

The instructions in this book are designed for Web designers,Web developers, and others interested in creating Web pages.This book assumes that you are a beginner with Dreamweaver,but are familiar with the basic methods of giving commands on

To get the most out of this book, it is recommended that youhave basic familiarity with the Web A general understanding ofstandard word processing programs, such as Microsoft Word, isalso helpful, although not required

Finally, the instructions in this book assume that you alreadyhave Dreamweaver 8 installed on a Macintosh or Windows

computer, and that your computer meets the system

requirements listed on page 5 This minimum configuration

allows you to run Dreamweaver 8; a demo version is includedfor your use on the CD You can complete the lessons with thetrial version of the software, but the demo version functions foronly 30 days, after which the program will no longer launchwithout a serial number

Outline

This book steps you through the projects in each lesson,

presents the major features and tools in Dreamweaver 8, andguides you toward developing the skills you need to create Websites All lessons should take approximately 2428 hours in

by-step explanations In addition, each lesson includes the

and ways you can use the skills you're learning to solvecommon problems

of Dreamweaver

The accompanying CD contains all the files necessary to

complete each lesson Files for each lesson appear in a foldertitled with the lesson number It is strongly suggested that youcreate a folder on your hard drive and transfer all lesson files tothat folder prior to beginning the course

The lessons in this book assume that the following statementsare true:

Dreamweaver 8 is already installed on your machine

Your computer meets the system requirements listed in thefollowing section

completed projects for comparison, and more

Macromedia Authorized Training and

Certification

This book is designed to enable you to study at your own pacewith content from the source Other training options exist

through the Macromedia Authorized Training Partner program.Get up to speed in a matter of days with task-oriented coursestaught by Macromedia Certified Instructors Or learn on yourown with interactive online training from Macromedia University.All these sources of training will prepare you to become a

Macromedia Certified Developer

For more information about authorized training and certification,

As you work through these lessons, you will develop the skillsyou need to create and maintain your own Web sites

By the end of this course, you will be able to do all of the

following:

Open Dreamweaver, create pages, and preview them inbrowsers

Format text in different sizes, colors and styles using

integrated styles

Import text from a variety of sources, including text files,Word documents, and spreadsheets

Insert graphics and control their appearance

Create and manage email and internal and external inksthroughout your site

Learn how to make changes directly within the HTML code

Place text and graphics within tables to achiever more

control over the layout

Make use of image rollovers and other interactive elementsUse the site window to manage your files and folders

Develop library items to use the same elements quickly andrepeatedly

Make your pages accessible and redirect visitors according

to the browser version they are using

Insert a background graphics or change the backgroundcolors of your pages

Specify text attributes using cascading style sheets to gainmore control over the appearance of text

Customize and extend Dreamweaver's capabilities to suityour needs

Minimum System Requirements

Windows

800 MHz Intel Pentium III processor (or equivalent) andlater

Microsoft Windows 2000, or Windows XP

256 MB RAM (1 GB recommended to run more than oneStudio 8 product simultaneously)

1024 x 768, 16-bit display (32-bit recommended)

650 MB available disk space

Macintosh

600 MHz PowerPC G3 and later

256 MB RAM (1 GB recommended to run more than oneStudio 8 product simultaneously)

1024 x 768, thousands of colors display (millions of colorsrecommended)

300 MB available disk space

Macromedia Dreamweaver 8 is the tool of choice for many Webdevelopersit provides the means for both visual design and codeediting, combined in an environment that enables you to workwith a wide variety of current and evolving technology solutionswhile addressing the need for accessible and standards-

compliant sites Dreamweaver helps speed production time andprovides tools for site management and maintenance As theindustry leader in Web development software, Dreamweavergives you the tools you need to meet the challenges of creatingand maintaining Websites, including constantly changing

standards, new technologies, and the ability to meet user

needs

In this lesson, you'll get started by learning the basics of siteplanning and preparationvital steps in the development of anyWebsite, whether it is a completely new Web presence or a

redesign of an existing site In the process, you'll become

familiar with the site that is used throughout the lessons in thisbook The project is a real-world example: a redesign of theWebsite for Yoga Sanghaa yoga studio located in San Francisco

You'll then move on to learning the basics of Dreamweaver 8and become familiar with the program's interface and tools.You'll start to use the basic site-management features

In this lesson, you learn about the Dreamweaver 8 interface while setting up and preparing to develop the site you will use throughout this book.

[View full size image]

This lesson teaches you how to work with document settings tocreate a simple Web page and to open an existing page, as well

as how to test your work in different browsersan essential part

of creating functional, accessible Websites You'll also begin tolearn how to customize Dreamweaver to your own workflow anddiscover how to extend Dreamweaver's functionality

In the final exercise of this lesson, you'll begin the process ofapplying the skills and techniques that you learn in this lesson

to your own Web projects

ROM

In this lesson, you will:

Become familiar with the Dreamweaver interfaceCustomize the Dreamweaver environment

This lesson should take approximately one hour to complete

To get started using Dreamweaver, you need to become familiarwith the interface and the initial options that are available foryour workspace Windows and Macintosh versions differ slightly

Windows Users: If this is your first time opening

Dreamweaver 8 on a Windows computer, you will be presentedwith the option to select one of two workspaces: Designer orCoder For this exercise, you should select the Designer

workspace because it will be used throughout this book TheDesigner workspace integrates all Dreamweaver-related

windows and panels into an environment that is optimized forvisually based Website creationthis option is ideal for designers.The Coder workspace is tailored for programmersthose whowant to work primarily with HTML and other Web and

described previously are not available on the Macintosh TheMacintosh uses a floating panel system that you can arrange toachieve the same optimized environment as needed

You'll learn more about customizing the Dreamweaver

workspace later in this lesson and throughout the book

Start Page

Upon opening Dreamweaver 8, you should see the Start pagethat provides the following:

Quick links to recent documents

Options to create a new document from a variety of filetypes

Page design samples that can give you a starting point fordeveloping your own sites

Dreamweaver Preferences To do so, choose Dreamweaver > Preferences (Macintosh) or Edit > Preferences (Windows),

select General from the Category list, and click the Show Start Page checkbox in the Document options section A checkmark indicates that the Start page will be displayed when the

program is opened; no checkmark indicates that the Start page will not appear.

When you begin to create new pages or explore other options

on the Start page, it will close on its own Macintosh users canalso close this window using the Close button in the upper-leftcorner of the window

[View full size image]

Spending the time to thoroughly address the research and

planning stages that are necessary for the creation of a Website

is essential Developing a strategic method with which you canapproach development will help you be more efficient, betterand more thoroughly develop your ideas, obtain a more

comprehensive understanding of the scope of your project, andsave time and resources down the road A good Website should

be intuitive and create a positive, unique user experience Thecreation of an effective Website starts with tasks that includedefining and summarizing the reason and need for the site andanalyzing the competition, creating an outline or flowchart,

documenting how site features will function and designing thelook and feel In larger companies, these tasks can be

delegated to multiple people or departments and the

timeframes in which they are completed can overlap

significantly The specific breakdown of this process can varywidelythe core components of Website creation are presented inthis book as stages that occur through five phases of

development For the most effective site, all these componentsshould be coveredregardless of whether you are creating yourown site, working for a client, or working as part of a team Asyou'll learn while working through the lessons, Dreamweavercan help you with many of these tasksnot just those in the

production and post-production stages

Phase 1: Research

Before you start work on any pages, ask yourself or your clientquestions like the ones presented here A full version of theClient Questionnaire that was used in the development of theWebsite you'll be working on, Yoga Sangha, is included on theCD-ROM in the Lesson_01_Basics/resources folder Throughout

questions from the questionnaire Exploring these responsescan give you insight into how the Yoga Sangha site was

developed and help you to understand how the process

described here was the backbone of the site's development.Understanding how this entire process works will help you whencreating your own Websites

Who is the audience, why is the site needed, and

what do you want the visitors of your site to come away with? Knowing your audience is vital Defining a

general user profile helps you to effectively reach your

target audience You may have multiple kinds of users; if

so, develop a profile for each of them

After you know who your audience is, you need to considerwhich technologies those users are likely to have Whatkinds of plug-ins, browsers, and operating systems do themajority of your visitors use? The type of equipment used

by your visitors is important to consider when you create aWebsite that is accessible to your intended audience Forexample, you wouldn't want to create a site that uses

elements supported by only the most recent and up-to-datebrowsers if most of your audience uses older machines thatcan't even run those browsers

Consider the purpose your site will serve and how each

potential user will make use of the site What does the siteneed to contain to serve its purpose? Use the visitor

profile(s) you created to determine possible scenarios forwhat visitors would do at your site

multimedia elements that will be used on the site

Organizing these assets enables you to create a completeand thorough Website You can then determine which types

of content need to be developed

maintaining an effective site.

Q1: What are the primary objectives for your site?

A1:

"Our studio is very community-oriented, ecologically minded, and personal We would love to more fully convey the Anusara Yoga philosophy, the community focus, and the personal feel and experience of our studio on our Website We are also part of a new program in which we expect to be a fully Green studio by next year; that is, fully ecologically responsible and sustainable We want to show how yoga relates with day-to-day life through guest lectures by prominent people in activism, ecological awareness, nutrition, community relations, philosophy, and meditation."

The final part of researching a new Website is to check outthe competition This step is critical, even if the Website youare developing isn't going to be for the public Because theWeb is such a large place, almost any conceivable type ofWebsite has already been created Understanding who yourcompetition is and how they built their Websites can makeall the difference in the world You may find that your

competition's Website is poorly designed, or lacking in

features This can offer you the ability to design a site thatstands out, giving you the edge Or you may discover thatthe competition's Website is well designed, giving you theincentive to create a better site Whichever the case,

ignoring your competition puts you and the Website you aredesigning at a disadvantage

Phase 2: Planning and Structure

dependent in part upon the structure of your site Clarity andease-of-use are vital components of a good Website This

important phase of development is the one you'll begin with inthis book

Creating the site structure: Websites rely on structure A

Website with a poor structure can be confusing to navigate,hard to use, and difficult to maintain To create a site that isclear, communicative, and easy for visitors to use, you need

to plan out the structure of the site as well as the hierarchy

of files and folders within the site completelybefore you

begin to build any HTML documents

Creating a thorough outline of the site as well as a detailedflowchart or storyboard is an important step of the planningprocess

images folder, a Cascading Style Sheets (CSS) folder and amultimedia folder Using a folder called html_docs to

contain only HTML or XHTML files, for instance, will helpkeep those files organized and easy to find If the site isvery large, you might want to break it down into more

manageable portions with a folder for each section and

possibly subsectionsin which case, there may be folders forthe same file types in each section and subsection folder Ifyou have elements such as graphics that are used site-