The Professional Portfolio - Against The ClockThe Professional Portfolio Series, focusing on the Adobe Creative Suite. These books feature step-by-step explanations, detailed foundational

Adobe® Dreamweaver® CS6The Professional Portfolio

2nd Edition

A portion of the images supplied in this book are copyright © PhotoDisc, Inc., 201 Fourth Ave., Seattle, WA 98121, or copyright ©PhotoSpin, 4030 Palos Verdes Dr. N., Suite 200, Rollings Hills Estates, CA. These images are the sole property of PhotoDisc or PhotoSpin and are used by Against The Clock with the permission of the owners. They may not be distributed, copied, transferred, or reproduced by any means whatsoever, other than for the completion of the exercises and projects contained in this Against The Clock training material.

Against The Clock and the Against The Clock logo are trademarks of Against The Clock, Inc., registered in the United States and elsewhere. References to and instructional materials provided for any particular application program, operating system, hardware platform, or other commercially available product or products do not represent an endorsement of such product or products by Against The Clock, Inc.

Photoshop, Acrobat, Illustrator, InDesign, PageMaker, Flash, Dreamweaver, and Premiere are trademarks of Adobe Systems Incorporated. Macintosh is a trademark of Apple Computer, Inc. Word, Excel, Office, Microsoft, and Windows are either registered trademarks or trademarks of Microsoft Corporation.

Other product and company names mentioned herein may be the trademarks of their respective owners.

4710 28th Street North, Saint Petersburg, FL 33714800-256-4ATC • www.againsttheclock.com

10 9 8 7 6 5 4 3 2 1 Print ISBN: 978-1-936201-37-2

Ebook ISBN: 978-1-936201-38-9

Managing Editor: Ellenn BehoriamCover & Interior Design: Erika KendraCopy Editor: Angelina KendraPrinter: Prestige Printers

Copyright © 2014 Against The Clock, Inc. All rights reserved. Printed in the United States of America. This publication is protected by copyright, and permission should be obtained in writing from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise.

iii

AcknowledgementsAbout AgAinst the CloCk

Against The Clock, long recognized as one of the nation’s leaders in courseware development, has been publishing high-quality educational materials for the graphic and computer arts industries since 1990. The company has developed a solid and widely-respected approach to teaching people how to effectively utilize graphics applications, while maintaining a disciplined approach to real-world problems.

Having developed the Against The Clock and the Essentials for Design series with Prentice Hall/Pearson Education, ATC drew from years of professional experience and instructor feedback to develop The Professional Portfolio Series, focusing on the Adobe Creative Suite. These books feature step-by-step explanations, detailed foundational information, and advice and tips from industry professionals that offer practical solutions to technical issues.

Against The Clock works closely with all major software developers to create learning solutions that fulfill both the requirements of instructors and the needs of students. Thousands of graphic arts profes-sionals — designers, illustrators, imaging specialists, prepress experts, and production managers — began their educations with Against The Clock training books. These professionals studied at Baker College, Nossi College of Art, Virginia Tech, Appalachian State University, Keiser College, University of South Carolina, Gress Graphic Arts Institute, Hagerstown Community College, Kean University, Southern Polytechnic State University, Brenau University, and many other educational institutions.

About the Author

Erika Kendra holds a BA in History and a BA in English Literature from the University of Pittsburgh. She began her career in the graphic communications industry as an editor at Graphic Arts Technical Foundation before moving to Los Angeles in 2000. Erika is the author or co-author of more than twenty books about Adobe graphic design software. She has also written several books about graphic design con-cepts such as color reproduction and preflighting, and dozens of articles for online and print journals in the graphics industry. Working with Against The Clock for more than ten years, Erika was a key partner in developing the Portfolio Series of software training books.

Contributing Artists And editors

A big thank you to the people whose artwork, comments, and expertise contributed to the success of these books:

• Kelly McCormack, Adobe Certified Instructor

• Richard Schrand, International Academy of Design & Technology, Nashville, TN

• Pam Harris, University of North Texas at Dallas

• Jay Tarby, John Carroll University

• Debbie Davidson, Against The Clock, Inc.

• Charlie Essers, photographer, Lancaster, Calif.

• Samantha Schmitz, Double D Cupcakes, Lancaster, Calif.

Finally, thanks to Angelina Kendra, editor, for making sure that we all said what we meant to say.

1111project

Bistro Web SiteYour client has opened a new

restaurant in a fast-growing

community in Southern California.

He has already designed the pages for

his site, but has hired you to make

sure everything works properly and

then make the site available to the

browsing public.

� is project incorporates the following skills:

� Creating, exporting, and removing site de� nitions in

Dreamweaver

� Moving � les around in a site root folder

� Creating relative links between pages in a site

� De� ning absolute links to external sites and email addresses

� Improving search engine optimization (SEO) with � le names and

titles

� Cloaking site � les from a Web server

� Uploading � les to a Web server

clie

nt c

om

men

ts

art

dire

cto

r co

mm

ents

pro

ject

ob

ject

ives

Project MeetingI already created the pages for our site, but I don’t know what links to use, and I’m not sure how to create them. I’ve also heard that there are certain things you should do to improve a site’s search engine rating — which is obviously important for a small business like mine.

� e more pages you add to a site, the more complex it becomes, until it’s almost impossible to make sense of what you have and where it is located. Web sites — even those with only a few pages — should be designed with a good organizational plan, making it easier to modify pages later.

Once you have a handle on the organization, make sure the pages link to each other properly. Visitors get frustrated very quickly when they’re forced to return to the home page every time they want to jump to a di� erent set of pages.

� e last thing you should do is add page titles and change � le names to give a better indication of what’s on each page. Doing so will make the site more accessible to people with screen-reader software, and it will also improve the site’s ratings on search engines.

To complete this project, you will:

� Create a Dreamweaver site de� nition

� Create new folders within the site root folder

� Use various methods to move � les from one place to another within the site

� Create links between pages using several techniques available in Dreamweaver

� Di� erentiate between relative and absolute links

� Copy and paste uniform links from one page to another

� Improve searchability and usability using page names and titles

� Cloak site � les to hide them from the Web server

� Upload the site � les to a server so they can be viewed online

25Project 1: Bistro Web Site

Stage 1 Exploring Site Structure

When you start a new project that involves updating an existing site, your first task is to assess the file

and folder structure. Doing so gives you a good idea of what the site contains.

A small site with only a few pages requires very little organization; in fact, you can place all of

the files — Web pages and image files — in one folder (although even a small site benefits from a

dedicated folder for images). Larger sites, however, require careful organization of file names, pages,

and image files. A good site design with excellent organization speeds development now, and makes it

much easier to update the site later.

Create a New Site DefiNitioN

Web sites are designed so all of the Web pages, image files, style sheets, and other

resources are stored on your local drive in a base folder called the root folder. Other

folders can be placed inside (below) the root folder to make it easier to manage and

organize files.

1. Download DW6_RF_Project1.zip from the Student Files Web page.

2. Expand the ZIP archive in your WIP folder (Macintosh) or copy the archive

contents into your WIP folder (Windows).

This results in a folder named Kinetic, which contains all the files you need to

complete this project.

If necessary, refer to Page 9 of the Interface chapter for specific instructions on

expanding or accessing the required resource files.

3. In Dreamweaver, set up your workspace so the Files, Insert, and Properties

panels are visible.

It doesn’t matter which saved workspace you start with. The primary tools you need for

this project are the Files, Insert, and Properties panels. We have closed all other panels to

maximize the available space in our screen shots.

4. In the Files panel, click the Manage Sites link or open the Directory menu

and choose Manage Sites from the bottom of the list.

If available, clicking

Manage Sites opens

the Manage Sites

dialog box.

This option performs the

same function as clicking

the blue Manage Sites

link to the right of the

Directory menu.

5. Click the New Site button in the Manage Sites dialog box.

Click here to

create a new site

in Dreamweaver.

When a site is defined

in Dreamweaver, the

Manage Sites link at the

top of the Files panel is

replaced by a menu that

defaults to Local view.

Note:

Ellipses in a menu or

button name indicate

that clicking will open

a dialog box. We do not

include the ellipses in our

instructions.

Note:

119Project 3: Photographer's Web Site

Insert an Image from the fIles Panel

Dreamweaver provides many ways to insert images into Web pages, one of which is using the Images button on the Common Insert panel. Another way is to simply drag a file from the Files panel and place it onto a Web page.

1. Open the blog.html file from the Files panel.

2. In the Design pane, select and delete the words “INSERT LOGO HERE” at the bottom of the page.

3. In the Files panel, expand the images folder (if necessary).

4. From the Files panel, drag crowe-photography-small.jpg to the location of the insertion point (where you deleted the text in Step 2).

Drag the file from the Files panel to the location where

you want to place the image.

5. In the resulting Image Tag Accessibility Attributes dialog box, type Crowe Photography in the Alternate Text field.

Walk-Through

iv

Project GoalsEach project begins with a clear description of the overall concepts that are explained in the project; these goals closely match the different “stages” of the project workflow.

The Project MeetingEach project includes the client’s initial comments, which provide valuable information about the job. The Project Art Director, a vital part of any design workflow, also provides fundamental advice and production requirements.

Project ObjectivesEach Project Meeting includes a summary of the specific skills required to complete the project.

Step-By-Step ExercisesEvery stage of the workflow is broken into multiple hands-on, step-by-step exercises.

Visual ExplanationsWherever possible, screen shots are annotated so you can quickly identify important information.

Real-World Workflow Projects are broken into logical lessons or “stages” of the workflow. Brief introductions at the beginning of each stage provide vital foun-dational material required to complete the task.

v

268

fi ll i

n th

e b

lank

sho

rt a

nsw

er

Project 5: Cupcake Bakery CSS Site

Project Review 1. A(n) _______________ can be used to change

the appearance of multiple elements on a

single page, including elements of different

types, once it is applied to those elements.

2. You can make a(n) _______________ editable in

a template to protect the container’s contents

in pages where that template is applied.

3. The _______________ property can be used to

prevent other fl oating objects from appearing

on the same line as an element.

4. A(n) _______________ is based on an

unordered list with up to three levels of linked

list items.

5. _______________ in the Code pane identifi es a

comment.

6. The _______________ can be used to fi nd CSS

selectors that are related to a specifi c object.

7. A(n) _______________ fi eld presents options

from a defi ned list, where users can choose

only one option.

8. The _______________ tag creates menus and

selection lists.

9. The _______________ tag identifi es form

objects such as text fi elds, where users can

enter text.

10. The _______________ determines the text that

appears on a Submit or Reset button.

1. Briefl y explain the concept of a class in CSS.

2. Briefl y explain the function of the Preview States menu in the Properties panel when a Spry validation

widget is selected.

3. Briefl y explain the signifi cance of the Copy Dependent Files dialog box.

146

art

dire

cto

r co

mm

ents

clie

nt c

om

men

tsp

roje

ct ju

stifi

catio

n

Use what you learned in this project to complete the following freeform exercise. Carefully read the art director and client comments, then create your own design to meet the needs of the project.Use the space below to sketch ideas; when fi nished, write a brief explanation of your reasoning behind your fi nal design.

Portfolio Builder Project

� e page structure has already been de� ned, but the images need to be put into place.

Our logo should appear on every page, at the top of the main content area.

� e header and footer sections need background images placed.

We want pink our icon to appear to the left of each navigation item in the header section. It should change to white when users move the mouse over the links.

On the Sample Designs page, add the Flash-based slideshow. All of the images we want to show are in the images>� owers folder. You will need to modify the size of the placed � ash object on the page to � t the images that we’ve provided.

Everything Green Flowers wants to include a digital portfolio in the company’s new Web site. As part of the team that is building the new site, your job is to create and implement pages for a Flash version and an HTML version of the portfolio.

To complete this project, you should:

� Create a new site in Dreamweaver using the � les that have already been created (in the DW6_PB_Project3.zip archive on the Student Files Web page).

� Place the client’s logo on every page.

� Add background images to the header and footer sections of the page.

� Add a background image to the navigation links in the header section

� Add a photo gallery to the Sample Designs page, using the techniques you used to complete the Crowe Photography site.

Project Summary

147Project 3: Photographer's Web Site

When you prepare the design for a site, you need to determine which images will carry content

(they must be placed in the foreground using the <img> tag), and which images will appear in

the background. Appropriate alt text — which enables visually impaired visitors, users who have

disabled the display of images, and search engines to use the content of your pages — is required for

all foreground images. By editing various CSS properties, you have virtually unlimited options for

controlling the background images in di� erent sections of a page.Dreamweaver also provides image-editing tools that enable you to crop, resize, resample, and

sharpen images. Although these tools do not replace full-featured image-editing applications such as

Photoshop, the Dreamweaver tools enable you to complete simple editing tasks quickly and easily,

without requiring another application.

Resize and resample images to meet layout requirements

Create a photo gallery slideshow

Place a Flash animation into a Web page

Add a favicon to a page

Place a Flash movie into a Web page

Use CSS to define background colors and images for different elements

Use CSS to control the appearance of different “states” for a navigation link

120 Project 3: Photographer's Web Site

A. Edit opens the image file in its native application. GIF

and JPG files open in Photoshop; PNG files open in

Fireworks (assuming you have those applications).

B. Edit Image Settings opens a dialog box where you

can change a variety of options for the selected file

format. You can also use the Format menu to change the

format of the selected image; if you change the format,

you will be asked where you want to save the new file.

C. Update From Original can be used to make sure an

inserted Photoshop image in the HTML file is the most

recently saved version of the image.

If you insert a native Photoshop (PSD) file into a page,

Dreamweaver converts it to a file that is appropriate

for Web browsers. The original link to the PSD file is

maintained; if the PSD file is changed, Dreamweaver

notifies you that the image must be updated to the most

recent version.

When you place a native

Photoshop file, Dreamweaver

stores a link to the original file.

The actual image in the

page is converted to a

Web-friendly format.

This indicator shows that

the image in the HTML file

is the most recent version.

The red indicator arrow tells

you the Photoshop file has

been modified since you

placed it into the HTML file.

Although Dreamweaver is not an image-editing application,

you can use it to perform some basic image-editing

functions. These tools can’t replace Adobe Photoshop, but

they are well suited for making quick adjustments to an

image from directly within the Dreamweaver application.

D. The Crop tool can be used to remove unwanted areas

of an image. When you click the Crop tool, the lighter

area shows the area that will be included in the cropped

image; you can drag any of the eight handles around

the edge of the crop area to change the area. Pressing

Return/Enter finalizes the crop; pressing ESC cancels the

crop and restores the original image.

The lighter area

shows what will

remain after the crop

has been applied.

Drag any of the

handles to change

the area that will

be included in the

cropped version.

E. The Resample tool changes the number of pixels in an

image to exactly match the size of the selected instance

in the page. This has the same effect as clicking the

Commit Image Size button after resizing an image in the

Design pane.

F. Brightness and Contrast can be used to change

those properties in a selected image.

G. The Sharpen option can be useful for restoring some

detail after resizing/resampling (especially upsizing).

Keep in mind, however, that oversharpening can often

produce worse results than what you start with.

Remember: All of the Dreamweaver image-editing tools permanently modify the

edited file. If you use any of the image-editing buttons, you see a warning that the

changes permanently affect the file (unless someone has checked the Don’t Show ...

option in the dialog box). Always keep a backup image so if you over-edit, you can

replace the backup image and start over.

DREA

MW

EAV

ER F

OUN

DATIO

NS

The Image Properties Panel in Depth

A B C D E F G

When an image is selected in the document

window, the Properties panel not only

displays properties (attributes) of the image,

but also provides access to a number of

image-related functions.

114 Project 3: Photographer's Web Site

7. In the Select Image Source dialog box, open the site images folder, select the crowe-photography.png file, and click Open/OK.

If file extensions are hidden on Windows, move your cursor over a file and wait a second to see the fill name and extension in a pop-up window.

8. In the resulting Image Tag Accessibility Attributes dialog box, type Crowe Photography in the Alternate Text field and click OK.

Text you enter in the Alternate Text field of this dialog box becomes the alt attribute of the <img> (image) tag.

The alt attribute provides a text alternative to the image, so visitors who use screen readers (or who have disabled image display in their browsers) will be able to understand the content of the image. The alt text is also indexed by search engines, which allows them to show your site’s images in the search engine image gallery and make a more qualified determination of your site’s rank.

Although most tag attributes are optional, the alt attribute of the <img> tag is required. If an image is simply decorative and does not merit alternate text, you use an empty alt attribute (alt=""), which satisfies the requirement. (Using alt="" is considered better than alt=" " because some screen readers pronounce the space.)

You can choose <empty> in the dialog box menu to add the empty alt attribute. If you simply don’t type in the field, no alt attribute is added to the <img> tag.

Choose <empty> in the menu to add an empty alt attribute to the selected image.

The Long Description field completes the longdesc attribute of an image. Its purpose is to allow the designer to offer a link to a longer description of an image on a separate Web page.

Note:

The alt attribute is commonly misnamed the alt tag; it is not an HTML tag but an attribute of a tag.

Note:

If you replace one image with another, the original alt text still applies to the new image. Basically, you are only changing the src atribute without affecting the alt attribute.

Note:

Dreamweaver FoundationsAdditional functionality, related tools, and underlying graphic design concepts are included throughout the book.

Advice and WarningsWhere appropriate, sidebars provide shortcuts, warnings, or tips about the topic at hand.

Visual SummaryUsing an annotated version of the

finished project, you can quickly identify the skills used to complete

different aspects of the job.

Project ReviewAfter completing each project, you can complete these fill-in-the-blank and short-answer questions to test your under-standing of the concepts in the project.

Portfolio Builder ProjectsEach step-by-step project is accompanied by a freeform project, allowing you to practice skills and creativity, resulting in an extensive and diverse portfolio of work.

the

portfolio series

Photographer’s Web Site

o Working with Static Images

o Controlling Backgrounds with CSS

o Working with Other Image Types

pro

ject

3p

roje

ct 2

Digital Book Chapter

o Preparing the Workspace

o Working with Semantic Markup

o Working with Special Characters

o Creating Lists

o Attaching an External CSS File

pro

ject

1 Bistro Site Organization

o Exploring Site Structure

o Organizing the Site Navigation

o Naming and Titling Documents

o Making Files Public

The Against The Clock Portfolio Series teaches graphic design software tools and techniques entirely within the framework of real-world projects; we introduce and explain skills where they would naturally fall into a real project workflow. For example, rather than including an entire chapter about site management, we teach site management where you naturally need to do so — when you begin building a new site in each project.

The project-based approach in the Portfolio Series allows you to get in depth with the software beginning in Project 1 — you don’t have to read several chapters of introductory material before you can start creating finished artwork.

The Portfolio Series project-based approach also prevents “topic tedium” — in other words, we don’t require you to read pages and pages of information about marking up text (for example); instead, we explain text-related mark-up as part of a larger project (in this case, as part of a digital book chapter).

Clear, easy-to-read, step-by-step instructions walk you through every phase of each job, from creating a new file to saving the finished piece. Wherever logical, we also offer practical advice and tips about underlying concepts and graphic design practices that will be important as you enter the job market.

The projects in this book reflect a range of different types of Dreamweaver jobs, from organizing a client’s site and links to developing a functional site template to building a dynamic site. When you finish the eight projects in this book (and the accompanying Portfolio Builder exercises), you will have a substantial body of work that should impress any potential employer.

The eight Dreamweaver CS6 projects are described briefly here; more detail is provided in the full table of contents (beginning on Page viii).

Projects at a Glance

vii

Our goal in this book is to familiar ize you with the Dreamweaver tool set so you can be more productive and more marketable in your career as a graphic designer.

It is important to keep in mind that Dreamweaver is an extremely versatile and powerful application. The sheer volume of available panels, options, and features can seem intimidating when you first look at the software interface. Most of these tools, however, are fairly simple to use with a bit of background information and a little practice.

Wherever necessary, we explain the underlying concepts and terms that are required for understanding the software. We’re confident that these projects provide the practice you need to be able to create sophisticated artwork by the end of the very first project.

pro

ject

8 Just Posters Dynamic Site

o Preparing to Use PHP and MySQL

o Defining a PHP Site Definition

o Creating Data-Driven Pages

pro

ject

7 BLVD Fluid Grid Site

o Working with Fluid Grids

o Creating CSS3 Transitions

pro

ject

6 Kayaking HTML5 Site

o Working with HTML5 Tags

o Working with CSS3 Selectors

o Working with Web Fonts

o Adding Video in HTML5

o Working with Widgets

pro

ject

5 Cupcake Bakery CSS Site

o Working with Classes

o Creating a Spry Menu Bar

o Creating Online Forms

pro

ject

4 Yosemite CSS Layout

o Creating Layouts with Style Sheets

o Working with a Template

o Using CSS to Control Content

viii

Contents ACknowledgements iii

wAlk-through iv

ProjeCts At A glAnCe vi

getting stArted xiii

the dreAmweAver Cs6 user interfACe 1Explore the Dreamweaver Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Understanding the Application Frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Customizing Dreamweaver Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Create a Saved Workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Explore the Dreamweaver Document Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Preview Files in Dreamweaver Live View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Preview a File in a Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Remove a Site from Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Project1 bistro site orgAnizAtion 23 Stage 1 Exploring Site Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Create a New Site Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Examine the Site Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Plan Folder Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29The Files Panel in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Sort and Move Image Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Changing the Update Preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Understanding a Site Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Stage 2 Organizing the Site Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Create Hyperlinks within the Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35The Common Insert Panel in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Copy and Paste Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Adjust Relative Link Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Accessing Page Content in the Menu Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Create an Email Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Stage 3 Naming and Titling Documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Rename Pages for Search Engine Optimization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Understanding Web File Naming Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Create Document Titles for Individual Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Improving Search Engine Ranking with Metadata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Stage 4 Making Files Public . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52Hide Files from the Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52Define Remote Connection Info for the Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54Upload Files to a Remote Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56Export and Remove the Site Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

ix

Project2 digitAl book ChAPter 63 Stage 1 Preparing the Workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Define the ATC Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65Create a New HTML Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Stage 2 Working with Semantic Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Paste Text Content in Design View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Element Names, Tags, and Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70Format Headings in Design View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72Formatting Text with the Properties Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Format a Block Quote and Citation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Mark up Abbreviations in Code View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77Controlling Code Hints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77Understanding Code View Formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80Format with Strong and Em Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Stage 3 Working with Special Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82Insert Special Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82Create a Table of Quote Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Working with HTML Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87Use the Insert Other Character Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88Insert Special Characters in Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

Stage 4 Creating Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92Create an Ordered List of Web Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92Create an Unordered List of Navigation Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Stage 5 Attaching an External CSS File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Add div Tags and Element IDs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Attach the CSS File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98Identify the List as a Navigation Bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Project3 PhotogrAPher’s web site 105 Stage 1 Working with Static Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Define the Crowe Photography Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Insert an Image onto a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Understanding Accessibility and Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111Resize and Resample an Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112Insert an Image from the Files Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115The Image Properties Panel in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116Insert an Image from the Assets Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117Creating an Image Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Stage 2 Controlling Backgrounds with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120Define a Page Background Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120Hexadecimal Color Codes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124Define a Background Image for the Outer Div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125Define Background Images for Navigation Link States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Creating a Rollover Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

Contents

x

Stage 3 Working with Other Image Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131Insert a Flash Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131Insert and Configure a Flash Slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134Insert a Flash Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137Add a Page Favicon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141


Project4 Yosemite Css lAYout 145 Stage 1 Creating Layouts with Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

Define a Tracing Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147Create an External CSS File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151The CSS Styles Panel in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153Create ID Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154The CSS Rule Definition Dialog Box in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159Create a Layout with Div Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161Understanding the CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163Use the Float Property to Control Nested Divs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165Comparing the <span> and <div> Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168Define Properties for the <body> Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169Edit CSS Rules to Adjust the Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171Understanding AP Divs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

Stage 2 Working with a Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177Create a Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177The Insert>Template Submenu in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179Apply the Template to Existing Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181The Modify>Templates Submenu in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182Creating a New Page from a Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184Edit the Design Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185Understanding Named Anchors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

Stage 3 Using CSS to Control Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188Define HTML Tag Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188Create Descendant Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192Create Pseudo-Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198


Project5 CuPCAke bAkerY Css site 201 Stage 1 Working with Classes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

Review Existing Site Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204Create a Class Selector to Place Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205Manually Edit CSS Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208Make an Editable Attribute in a Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211Control Float and Clear Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214CSS Mode of the Properties Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216Search Page Code to Apply Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

xi

Apply Multiple Classes to Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220Insert one HTML Page into Another . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

Stage 2 Creating a Spry Menu Bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225Create a Spry Menu Bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226Modify Menu Subitems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229Why Multiple Selectors of the Same Name? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232Use the Code Navigator to Review Related Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232Using Inspect Mode in Live View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236Grouping Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237Use Code Hints to Write CSS Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238Other Spry Layout Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

Stage 3 Creating Online Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242Create a Form Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242The Form Properties Panel in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243Create Form Text Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244Create a Menu Field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247Create a Checkbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250Add Submit and Reset Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251HTML Form Fields in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252Apply CSS to the Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260


Project6 kAYAking html5 site 263 Stage 1 Working with HTML5 Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

Create a New HTML5 Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265Add HTML5 Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268Learning about HTML5 Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271Attach a CSS Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

Stage 2 Working with CSS3 Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275Add Rounded Corners to an Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275Define Transparency for a Background Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277Create Multiple Columns of Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279Learning More about CSS3 Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Stage 3 Working with Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281Download a Web Font Package . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281Apply Web Fonts to Page Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283Working with External Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

Stage 4 Adding Video in HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287Place a Video in an HTML5 Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287Video Tag Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

Stage 5 Working with Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291Use the Adobe Widget Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291Add a Widget to an HTML5 Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295Customize the Widget Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301


Contents

xii

Project7 blvd fluid grid site 305 Stage 1 Working with Fluid Grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307

Create a Fluid Grid Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307Work with Fluid Grid Layout Divs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312Adjust Fluid Grid Div Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317Work with Fluid Grid Layout Div Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321Use CSS to Control Fluid Grid Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

Stage 2 Creating CSS3 Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331Restrict Element Height and Overflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331Use the CSS Transitions Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333Define Transition Properties for a Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340


Project8 just Posters dYnAmiC site 343 Stage 1 Preparing to Use PHP and MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

Set up a MySQL Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346Prepare the Site Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

Stage 2 Defining a PHP Site Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352Create the Site Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352Upload Files to a Remote Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355

Stage 3 Creating Data-Driven Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357Create the MySQL Connection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357Display Records from the Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359Server Behaviors in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361Add Data Placeholders in a PHP Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362Displaying Images from a MySQL Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364Use a Binding to Dynamically Define Alt Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364Repeat a Recordset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366Add Recordset Navigation to the Gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368Create a Dynamic Page Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369Create the Poster Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371Troubleshoot Dynamic Pages for Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375Add a Search Feature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377Show and Hide Regions Based on Recordset Contents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380Display Records with Advanced Filter Criteria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383Copy and Paste Recordsets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387Synchronize the Local and Remote Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388

Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390


Getting Started

xiii

Prerequisites

The Professional Portfolio Series is based on the assumption that you have a basic understanding of how to use your computer. You should know how to use your mouse to point and click, as well as how to drag items around the screen. You should be able to resize and arrange win-dows on your desktop to maximize your available space. You should know how to access drop-down menus, and understand how check boxes and radio buttons work. It also doesn’t hurt to have a good understanding of how your operating system organizes files and folders, and how to navigate your way around them. If you’re familiar with these fundamental skills, then you know all that’s necessary to use the Portfolio Series.

resource Files

All of the files you need to complete the projects in this book — except, of course, the Dreamweaver application files — are on the Student Files Web page at againsttheclock.com. See the inside back cover of this book for access information.

Each archive (ZIP) file is named according to the related project (e.g., ATC_RF_DW6-2e.zip for the files in Project 2, in which a company named ATC has hired you to create an online version of one of its book chapters). At the beginning of each project, you must download the ar-chive file for that project and expand that archive to access the resource files that you need to complete the exercises. Detailed instructions for this process are included in the Interface chapter.

Files required for the related Portfolio Builder exercises at the end of each project are also available on the Student Files page; these archives are also named by project (e.g., Companions_PB_DW6-2e.zip).

Web Hosting

To make Web files accessible to the browsing public, you need to have access to some type of server. On the inside back cover of this book, you have a code that you need to gain access to the required resource files. The same code also provides access to a six-month, free trial Web hosting account at Pair Networks (www.pair.com).

If you don’t already have access to an online server, go to www.pair.com/atc/ to sign up for your hosting account. You must enter your contact information, and the code from the inside back cover of your book.

(Further details are provided on Page 52.)

soFtWare Versions

This book was written and tested using the version of Adobe Dreamweaver CS6 available in January 2014 (v12.2). You can find the version number in the Splash Screen that appears while your application is launching.

Because Adobe has announced periodic, continuous upgrades, some functionality might have changed since publication. Please check the Updates and Errata section of the Against The Clock Web site for any significant issues that might have arisen from these periodic upgrades.

system requirements

The Professional Portfolio Series was designed to work on both Macintosh or Windows computers; where differences exist from one platform to another, we include specific instructions relative to each platform. One issue that remains different from Macintosh to Windows is the use of different modifier keys (Control, Shift, etc.) to accomplish a task. When we present key commands, we always follow the same Macintosh/Windows format — Macintosh keys are listed first, then a slash, followed by the Windows keys.

Minimum System Requirements for Adobe Dreamweaver CS6:Windows• Intel® Pentium® 4 or AMD Athlon® 64 processor• Microsoft® Windows® XP with Service Pack 3 or Win-

dows 7 with Service Pack 1. Adobe CS6 applications also support Windows 8 and Windows 8.1.

• 512 MB of RAM• 1 GB available hard-disk space for installation; addi-

tional free space required during installation• 1280 800 display with 16-bit graphics adapter• Java™ Runtime Environment 1.6 (included)• QuickTime 7.6.6 software for HTML5 media playback

Mac OS• Multicore Intel processor• Mac OS X v10.6.8 or v10.7. Adobe CS6 applications

support Mac OS X v10.8 and v10.9 when installed on Intel-based systems.

• 512 MB of RAM• 1.8 GB of available hard-disk space for installation;

additional free space required during installation• 1280 800 display with 16-bit graphics adapter• Java Runtime Environment 1.6• QuickTime 7.6.6 software for HTML5 media playback

Broadband Internet connection and registration are re-quired for software activation.