html5 an easy approach, Essays (university) of Computer Science

Download html5 an easy approach and more Essays (university) Computer Science in PDF only on Docsity!

Adobe ®^ Dreamweaver ®^ CS

classroom in a book

The official training workbook from Adobe Systems

A bonus 2-hour set of Adobe Dreamweaver CS6: Learn by Video tutorials are included, from video2brain and Adobe Press. Learn by Video is one of the most critically acclaimed training products on Adobe software and is the only Adobe-approved video courseware for the Adobe Certified Associate Level certification.

Learn by Video bonus tutorials

Lesson files

Links to Adobe Community Help, product Help and Support pages, Adobe Press, Adobe certification programs, Adobe TV, and other useful online resources can be found inside a handy HTML file. Just open it in your Web browser and click on the links, including a special link to this book’s product page where you can access updates and bonus material.

Adobe,theAdobelog

o,Classroom

inaBook

andDream

weaver

aretrad

emarks

ofAdob

eSyste

msInco

rpotera

d.Mac

oshint

adatris

oarkme leppfA

estgie,r

ehtinder

todna..SU

iertnuocreh

iteisswodniW.s rpoCfiosorciMforkamedatrarokramedartderetisgerareh htninotiaro /dna..SUe rhetoro ietrnouc s.

©All rights reserved. Made in the U SA.ISBN -13: 9 7 8 -0 -321-82245-12012 Adobe Systems I ncorporated ISBN -10: 0 -321-82245-5 06 / 12

Adobe®^ Dreamweaver ®^ CS CLASSROOM IN A BOOK WINDOWS ® (^) /MAC OS ® ®

Peachpit Universal Mask 116 mm print area, 23 mm center hole; fits these manufacturers’ specs: updated 3/11/

• CDI • JVC • and all previous vendors

Color Instructions 2-color: Pantone 375 C (green)Pantone 485 C (red) White flood: Yes

0321822455_ADreamweaverCS6CIB_Disc.indd 1 3/30/12 10:47 AM

Online resources

Throughout this title you will see references to lesson or resource files on a disc. Please note that these files are available to eBook readers via high-speed download. Please click here to go to the last page in this eBook for the download location and instructions. Adobe Dreamweaver CS6 Classroom in a Book includes the lesson files that you’ll need to complete the exercises in this book, as well as other content to help you learn more about Adobe Dreamweaver CS6 and use it with greater efficiency and ease. The diagram below represents the contents of the lesson files directory, which should help you locate the files you need.

EBOOK READERS: FIND YOUR LESSON FILES

Each lesson has its own folder inside the Lessons folder. You will need to download these lesson folders to your hard drive before you can begin each lesson.

AVAILABLE VIA DOWNLOAD

iv Contents

GettInG starteD ix About Classroom in a Book.................................. ix TinyURLs................................................... ix Prerequisites............................................... x Installing the program...................................... x Copying the Classroom in a Book files........................ x Recommended lesson order............................... .xi Jumpstart................................................. .xi Setting up the workspace................................. .xiii Windows vs. Macintosh instructions....................... .xiii Finding Dreamweaver information........................ .xiii Checking for updates..................................... .xiv Additional resources...................................... .xiv Adobe certification........................................ xv

(^1) CustomIzInG Your WorkspaCe 2 Lesson overview............................................ 2 Touring the workspace...................................... 4 Switching and splitting views............................... 5 Working with panels........................................ 7 Selecting a workspace layout............................... 11 Adjusting toolbars......................................... 13 Personalizing preferences.................................. 13 Creating custom keyboard shortcuts....................... 14 Using the Property inspector............................... 15

2 htmL BasICs 18 Lesson overview........................................... 18 What is HTML?............................................. 20 Where did HTML begin?................................... 20

Contents

Adobe dreAmweAver Cs6 ClAssroom in A book vii

Adobe dreAmweAver Cs6 ClAssroom in A book ix

Adobe® Dreamweaver® CS6 is the industry-leading web authoring program. Whether you create websites for a living or plan to create one for your own business, Dreamweaver offers all the tools you need to get professional-quality results.

about Classroom in a Book

Adobe Dreamweaver CS6 Classroom in a Book® is part of the official train- ing series for graphics and publishing software developed with the support of Adobe product experts.

The lessons are designed so that you can learn at your own pace. If you’re new to Dreamweaver, you’ll learn the fundamentals of putting the program to work. If you are an experienced user, you’ll find that Classroom in a Book teaches many advanced features, including tips and techniques for using the latest ver- sion of Dreamweaver.

Although each lesson includes step-by-step instructions for creating a specific project, you’ll have room for exploration and experimentation. You can follow the book from start to finish, or complete only those lessons that correspond to your interests and needs. Each lesson concludes with a Review section con- taining questions and answers on the subjects you’ve covered.

tinyurLs

In several points in the book, we reference external information available on the Internet. The uniform resource locators (URLs) for this information are often long and unwieldy, so we have provided custom TinyURLs in their place for your convenience. Unfortunately, the TinyURLs sometimes expire over time and no longer function. If you find that a TinyURL doesn’t work, look up the actual URL provided in the Appendix.

GettInG starteD

x GettinG stArted

prerequisites

Before using Adobe Dreamweaver CS6 Classroom in a Book, you should have a working knowledge of your computer and its operating system. Be sure you know how to use the mouse, standard menus and commands, and also how to open, save, and close files. If you need to review these techniques, see the printed or online documentation that was included with your Microsoft Windows or Apple Macintosh operating system.

Installing the program

Before you perform any exercises in this book, verify that your computer system meets the hardware requirements for Dreamweaver CS6, that it’s correctly config- ured, and that all required software is installed. Adobe Dreamweaver CS6 software must be purchased separately; it is not included with the lesson files that accompany this book. For system requirements, go to www.adobe.com/products/dreamweaver/tech-specs.html. Install Dreamweaver CS6 onto your hard drive from the Adobe Dreamweaver CS application DVD (you cannot run the program from the disc) or from the installa- tion files you downloaded from Adobe. For complete instructions on installing the software, see the Adobe Dreamweaver CS6 Read Me file on the application DVD or on the web at www.adobe.com/support. Make sure your serial number is accessible before installing the application.

Copying the Classroom in a Book files

The Adobe Dreamweaver CS6 Classroom in a Book DVD includes folders contain- ing all the electronic files for the lessons in the book. Each lesson has its own folder; you must copy the folders to your hard drive to complete the lessons. It is recom- mended that you copy all lesson folders to your hard drive at once, but to conserve space on your hard disk, you can install individual folders for each lesson as you need them. It is vitally important that you store all lesson folders within a single folder on your hard drive. If you follow the recommended lesson order, this master folder will serve as the local site root folder, as described more fully in Lesson 4, “Creating a Page Layout.” To install the Classroom in a Book files: 1 Insert the Adobe Dreamweaver CS6 Classroom in a Book DVD into your computer’s optical disc drive.

xii GettinG stArted

Each lesson folder includes all the files and assets needed to complete the exercises contained within that lesson. Each folder contains finished files, staged files, and customized Template and Library files, but not always a complete set of files that may have been used or completed in other lessons. You may think these folders contain seemingly duplicative materials. But these duplicate files and assets, in most cases, cannot be used interchangeably in other lessons and exercises. Doing so will probably cause you to fail to achieve the goal of the exercise. The jumpstart method for completing individual lessons treats each folder as a stand-alone website. To jumpstart a lesson, copy the lesson folder to your hard drive and create a new site for that lesson using the Site Setup dialog box. Do not define sites using subfolders of existing sites. Keep your jumpstart sites and assets in their original folders to avoid conflicts. One suggestion is to organize the lesson folders, as well as your own site folders, in a single web or sites master folder near the root of your hard drive. But avoid using the Dreamweaver application folder or any folders that contain a web server, like Apache, ColdFusion, or Internet Information Services (IIS) (which are described more fully in Lessons 13 and 14). Feel free to use the jumpstart method for all lessons, if you prefer. To set up a jumpstart site, do the following: 1 Choose Site > New Site. The Site Setup dialog box appears. 2 In the Site Name field, enter the name of the lesson, such as lesson. 3 Click the Browse ( ) icon next to the Local Site Folder field. Navigate to the desired lesson folder you copied from the Adobe Dreamweaver CS6 Classroom in a Book DVD and click Select/Choose. 4 Click the arrow ( ) next to the Advanced Settings category to reveal the tabs listed there. Select the Local Info category. 5 Click the Browse icon next to the Default Images Folder field. When the dialog box opens, navigate to the Images folder contained within the lesson folder and click Select/Choose. 6 In the Site Setup dialog box, click Save. 7 The name of the currently active website will appear in the Files panel’s site pop-up menu. If necessary, press F8/Cmd-Shift-F to display the Files panel, and select the desired website you wish to work on from the Show menu. These steps will have to be repeated for each lesson you wish to jumpstart. For a more complete description of how to set up a site in Dreamweaver, see Lesson 4. Remember, if you use the jumpstart method for all lessons, you may not end up with a complete set of site files in any individual folder when you are finished.

Adobe dreAmweAver Cs6 ClAssroom in A book xiii

setting up the workspace

Dreamweaver includes a number of workspaces to accommodate various computer configurations and individual workflows. For this book the Designer workspace is recommended.

1 In Dreamweaver CS6, locate the Application bar. If necessary, choose Window > Application Bar to display it.

2 The default workspace is called Designer. If it is not displayed, use the pop-up menu in the Application bar to choose it.

3 If the default workspace has been modified and certain toolbars and panels are not visible (as they appear in the figures in the book), you can select Window > Workspace > Reset Designer to restore the default configuration.

Most of the figures in this book show the Designer workspace. When you finish the lessons in this book, experiment with various workspaces to find the one that you prefer.

For a more complete description of the Dreamweaver workspaces, see Lesson 1, “Customizing Your Workspace.”

Windows vs. macintosh instructions

In most cases, Dreamweaver performs identically in both Windows and Mac OS X. Minor differences exist between the two versions, mostly due to platform-specific issues out of the control of the program. Most of these are simply differences in keyboard shortcuts, how dialog boxes are displayed, and how buttons are named. Screen shots may alternate between platforms throughout the book. Where specific commands differ, they are noted within the text. Windows commands are listed first, followed by the Macintosh equivalent, such as Ctrl-C/Cmd-C. Common abbreviations are used for all commands whenever possible, as follows:

W I n D o W s m aC I n to s h

Control = Ctrl Command = Cmd

Alternate = Alt Option = Opt

Finding Dreamweaver information

For complete, up-to-date information about Dreamweaver panels, tools, and other application features, visit the Adobe website. Choose Help > Dreamweaver Help. The Adobe Help application opens and downloads the latest Help files from the

Adobe dreAmweAver Cs6 ClAssroom in A book xv

Adobe Dreamweaver CS6 Help and Support: www.adobe.com/support/ dreamweaver is where you can find and browse Help and Support content on adobe.com.

Adobe Forums: forums.adobe.com lets you tap into peer-to-peer discussions, questions, and answers on Adobe products.

Adobe TV: tv.adobe.com is an online video resource for expert instruction and inspiration about Adobe products, including a How To channel to get you started with your product.

Adobe Design Center: www.adobe.com/designcenter offers thoughtful articles on design and design issues, a gallery showcasing the work of top-notch designers, tutorials, and more.

Adobe Developer Connection: www.adobe.com/devnet is your source for techni- cal articles, code samples, and how-to videos that cover Adobe developer products and technologies.

Resources for educators: www.adobe.com/education offers a treasure trove of information for instructors who teach classes on Adobe software. Find solutions for education at all levels, including free curricula that use an integrated approach to teaching Adobe software and can be used to prepare for the Adobe Certified Associate exams.

Also check out these useful links:

Adobe Marketplace & Exchange: www.adobe.com/cfusion/exchange is a central resource for finding tools, services, extensions, code samples, and more to supple- ment and extend your Adobe products.

Adobe Dreamweaver CS6 product home page: www.adobe.com/products/ dreamweaver

Adobe Labs: labs.adobe.com gives you access to early builds of cutting-edge technology, as well as forums where you can interact both with the Adobe develop- ment teams building that technology and with other like-minded members of the community.

adobe certification

The Adobe training and certification programs are designed to help Adobe custom- ers improve and promote their product-proficiency skills. There are four levels of certification:

- Adobe Certified Associate (ACA) - Adobe Certified Expert (ACE)

xvi GettinG stArted

- Adobe Certified Instructor (ACI) - Adobe Authorized Training Center (AATC) The Adobe Certified Associate (ACA) credential certifies that individuals have the entry-level skills to plan, design, build, and maintain effective communications using different forms of digital media. The Adobe Certified Expert program is a way for expert users to upgrade their credentials. You can use Adobe certification as a catalyst for getting a raise, finding a job, or promoting your expertise. If you are an ACE-level instructor, the Adobe Certified Instructor program takes your skills to the next level and gives you access to a wide range of Adobe resources. Adobe Authorized Training Centers offer instructor-led courses and training on Adobe products, employing only Adobe Certified Instructors. A directory of AATCs is available at partners.adobe.com. For information on the Adobe Certified programs, visit www.adobe.com/support/ certification/index.html.

CreatInG a paGe LaYout

Lesson overview In this lesson, you’ll learn the following:

- The basics of webpage design - How to create design thumbnails and wireframes - How to insert and format new components into a predefined CSS layout - How to use the Code Navigator to identify CSS formatting - How to check for browser compatibility

This lesson should take 1 hour to complete. Before beginning, make sure you have copied the files for Lesson 4 to your hard drive as described in the “Getting Started” section at the beginning of the book. If you are starting from scratch in this lesson, use the method described in the “Jumpstart” section of “Getting Started.”

Whether you use thumbnails and wireframes or just a vivid imagination, Dreamweaver can quickly turn design concepts into complete, standards-based CSS layouts.