32
2 What You’ll Do 11 Getting Started with Dreamweaver CS6 Introduction Adobe Dreamweaver CS6 is the industry leading web devel- opment tool for building web sites and applications. It pro- vides a combination of visual layout tools, application development features, and code editing support, enabling developers and designers at every skill level to create visu- ally appealing, standards-based sites and applications quickly and easily. From leading support for Cascading Style Sheet (CSS) design to hand-coding features, Dreamweaver pro- vides the tools professionals need to get the job done. In addition, developers can use Dreamweaver with the server technology of their choice to build powerful Internet applica- tions that connect users to databases, live data feeds, and legacy systems. Dreamweaver is an application that's rooted in the real world. In the real world, new or updated browsers come into the marketplace every year, and this creates problems in compatibility. Dreamweaver solves this problem by giving you powerful error-checking tools, and even gives you the ability to use Live Data View, and see exactly how your pages will perform on virtually any browser. In the real world, server technologies change quickly. Dreamweaver's extensible architecture makes server compat- ibility a snap by giving you the tools to customize for third- party server models. In the real world, computer operating systems change. Dreamweaver's CS6 supports use on Windows and Macintosh systems. Web designers come at all levels of experience. Dreamweaver's user-friendly interface helps you out. If you're relatively new to the application, you can jump right in and begin designing simple web pages. If you are an experienced designer, you will be able to access the power and control that this application offers, and take your web designs where no one has gone before. 2 What You’ll Do Understand System Requirements Install Dreamweaver Get Started Examine the Dreamweaver Window Create a Web Site Open a Web Site Create a Blank Web Page Create Web Pages from Templates Create a Web Page from a Fluid Grid Layout Create a Web Page from a Sample Save a Web Page Open an Existing Web Page or File Work with Views Switch Between Pages and Views Preview a Web Page Get Help While You Work Get Dreamweaver Updates on the Web Close a Web Site or File Finish Up

Getting Started with Dreamweaver CS6webs.columbusstate.edu/docs/tutorial-dreamweaver-cs6.pdfGetting Started with Dreamweaver CS6 Introduction Adobe Dreamweaver CS6 is the industry

  • Upload
    others

  • View
    61

  • Download
    0

Embed Size (px)

Citation preview

2What You’ll Do

11

Getting Started withDreamweaver CS6

Introduction

Adobe Dreamweaver CS6 is the industry leading web devel-opment tool for building web sites and applications. It pro-vides a combination of visual layout tools, applicationdevelopment features, and code editing support, enablingdevelopers and designers at every skill level to create visu-ally appealing, standards-based sites and applications quicklyand easily. From leading support for Cascading Style Sheet(CSS) design to hand-coding features, Dreamweaver pro-vides the tools professionals need to get the job done. Inaddition, developers can use Dreamweaver with the servertechnology of their choice to build powerful Internet applica-tions that connect users to databases, live data feeds, andlegacy systems.

Dreamweaver is an application that's rooted in the realworld. In the real world, new or updated browsers come intothe marketplace every year, and this creates problems incompatibility. Dreamweaver solves this problem by givingyou powerful error-checking tools, and even gives you theability to use Live Data View, and see exactly how your pageswill perform on virtually any browser.

In the real world, server technologies change quickly.Dreamweaver's extensible architecture makes server compat-ibility a snap by giving you the tools to customize for third-party server models. In the real world, computer operatingsystems change. Dreamweaver's CS6 supports use onWindows and Macintosh systems.

Web designers come at all levels of experience.Dreamweaver's user-friendly interface helps you out. If you'rerelatively new to the application, you can jump right in andbegin designing simple web pages. If you are an experienceddesigner, you will be able to access the power and controlthat this application offers, and take your web designs whereno one has gone before.

2What You’ll Do

Understand System Requirements

Install Dreamweaver

Get Started

Examine the Dreamweaver Window

Create a Web Site

Open a Web Site

Create a Blank Web Page

Create Web Pages from Templates

Create a Web Page from a Fluid GridLayout

Create a Web Page from a Sample

Save a Web Page

Open an Existing Web Page or File

Work with Views

Switch Between Pages and Views

Preview a Web Page

Get Help While You Work

Get Dreamweaver Updates on the Web

Close a Web Site or File

Finish Up

12 Chapter 2

System RequirementsBefore you can install Dreamweaver, you willneed to make sure that your computer meetsthe minimum system requirements.Dreamweaver CS6 is supported on bothWindows and Macintosh computers.

While many designers bemoan the factthat their older computer systems will notsupport the newer applications, in the longrun it's all for the best. The original versionsof Dreamweaver (many years ago) were sim-ply non-visual HTML editing applications.Dreamweaver CS6 is not only doing thingsthat were not even dreamed of in years past;it's also faster. As a web designer, time is animportant part of getting the job done, andgetting it done quickly.

If I can accomplish more work in less time,it gives me more time to be creative, and ableto meet my deadlines. And that's a goodthing. So think of system requirements as thepower behind the applications, that's going tohelp you do more, better work, and all in lesstime.

For Windows Computers

You need to have a computer with the follow-ing minimum configuration:

◆ Intel Pentium 4, AMD Athlon 64 (orcompatible) processor.

◆ Microsoft Windows 7, Windows Vistawith Service Pack 1, or Windows XPwith Service Pack 3 or higher.

◆ 512 MB of RAM.

◆ 1 GB of available hard-disk space(additional free space required duringinstallation).

◆ 1280 x 800 monitor resolution with 16-bit video card.

◆ Java Runtime Environment 1.6(included).

◆ DVD-ROM drive.

◆ QuickTime 7.6.6 software required forHTML5 media playback.

◆ Internet connection required foractivation, registration, and someonline services.

For Macintosh Computers

You need to have a computer with the follow-ing minimum configuration:

◆ Multicore Intel processor.

◆ Mac OS X 10.6 or 10.7 or higher.

◆ 512 MB of RAM.

◆ 1.8 GB of available hard-disk space(additional free space required duringinstallation).

◆ 1280 x 800 monitor resolution with 16-bit video card.

◆ Java Runtime Environment 1.6.

◆ DVD-ROM drive.

◆ QuickTime 7.6.6 software required forHTML5 media playback.

◆ Internet connection required foractivation, registration, and someonline services.

Understanding System Requirements

Chapter 2 Getting Started with Dreamweaver CS6 13

The process of installing the Dreamweaver application is fairly straight-forward; you insert the Dreamweaver CS6 install disc into your DVDdrive or download the software online to your computer, double-clickthe setup program and simply follow the on-screen instructions. Thefirst thing that will happen is that the installer will check to see if youhave the minimum system requirements. If you meet the minimums, theinstaller will guide you through the steps to complete the installation.The whole process takes about ten minutes, and at the end of theprocess you can launch Dreamweaver for the first time. Remember tohave your serial number handy, because you will have to type it in dur-ing the installation process. It's a good idea to have that serial numberin a safe place, just in case you would need to reinstall Dreamweaver.

InstallingDreamweaver

Install Dreamweaver CS6

Insert the Dreamweaver CS6 DVDinto your DVD ROM drive, ordownload the software online toyour hard disk.

If necessary, double-click the DVDicon or open the folder with thedownloaded software, and thendouble-click the setup icon.

Follow the on-screen instructionsto install the product; the installerasks you to read and accept alicensing agreement, enter a serialnumber, indicate the language youwant, enter or create an Adobe IDor skip the step, and specify whereyou want to install the software.

3

2

1

Did You Know?Most Adobe applications can bedownloaded. It's all very simple, yougo to www.adobe.com, click theProducts menu item, and then selectthe application you want to purchase.You will need a credit card (of course),and a lot of bandwidth.

2

3

You can start Dreamweaver in several ways, depending on the platformyou are using. When you start Dreamweaver, the software displays aWelcome screen and then the Dreamweaver window. When you start anew Dreamweaver session or close all documents, a Welcome screenappears in the Dreamweaver window, providing easy access links toopen a file, open a recent file, create a new file, and create a new filefrom a template. You can also use links to access videos, and help infor-mation, including Getting Started, New Features, and online Communityresources, such as the Dreamweaver Exchange web site, where youcan download additional applications and information.

14 Chapter 2

Getting Started

Start Dreamweaver CS6 inWindows

Click Start on the taskbar.

Point to All Programs (whichchanges to Back).

Point to an Adobe Collection CS6menu, if needed.

Click Adobe Dreamweaver CS6.

If you’re starting DreamweaverCS6 for the first time, you might beprompted to specify the following:

◆ Enter or create an Adobe ID toregister the product, clickSubmit, and then click Done.

The Dreamweaver window opens,displaying the Welcome screen.

5

4

3

2

1

1 2 4

Did You Know?You can create and use a shortcuticon on your desktop to startDreamweaver (Win). Click Start on thetaskbar, point to All Programs, right-click Adobe Dreamweaver CS6, pointto Send To, and then click Desktop(Create Shortcut). Double-click theshortcut icon on your desktop to startDreamweaver.

Welcome screen

Chapter 2 Getting Started with Dreamweaver CS6 15

Start Dreamweaver CS6 inMacintosh

Open the Applications folder(located on the main hard drive).

◆ For Lion, you can also click theLaunchpad icon on the Dock,and then click the AdobeDreamweaver CS6 icon.

Double-click the AdobeDreamweaver CS6 folder or anAdobe Collection CS6 folder, ifinstalled.

Double-click the AdobeDreamweaver CS6 program icon.

If you’re starting DreamweaverCS6 for the first time, you might beprompted to specify the following:

◆ Enter or create an Adobe ID toregister the product, clickSubmit, and then click Done.

The Dreamweaver window opens,displaying the Welcome screen.

4

3

2

1

Activating Dreamweaver

In order to curb theft of their products, Adobe requires you to activatethe Dreamweaver application. The first time you open it, you will beprompted to enter your serial number, and then activate Dreamweaver.You will be able to delay the activation process for up to 30 days; how-ever, on day 31 the application will cease to run until activated.Activation can be accomplished by the Internet, or by phone.

You can launch Dreamweaver and open a document at the same time.Simply double-click on the document icon (i.e. index.html). If the docu-ment was originally created within Dreamweaver, the file automaticallyopens in the Dreamweaver application.

For Your InformationDid You Know?

You can create a shortcut on theMacintosh. Drag and drop theDreamweaver application icon to thebottom of the screen, and then add it tothe shortcuts panel.

Shortcut for Adobe Dreamweaver CS6

3

Launchpad icon in Mac OS X Lion

16 Chapter 2

When you start Dreamweaver, the programwindow displays a Graphical User Interface orGUI (pronounced “GOOEY”) with windowsand tools you can use to create and designweb pages. These windows include theProgram window, Document window, variouspanels, and the Properties panel. Dependingon your installation and previous programusage, not all of these windows may appear,or additional ones may be visible.

In Dreamweaver, windows appear in theProgram window. The Program window dis-plays a program icon, Application bar (whichdisplays options for working with and switch-ing between layout displays, web sites, andextension applications), menu bar (dependingon screen size), Workspace menu, Search boxfor product help, resizing buttons, and a Closebutton at the top of the screen.

Examining the Dreamweaver Window

Document WindowDisplays open documents along with theDocument and Related Files toolbars.

PanelsGives youaccess toauthoringtools andattributesettings forelements.

Property Panel/InspectorDisplays information about the properties andattributes of tools and graphic elements.

Applications barDisplays options for working with displays,sites, and extension applications.

Status barDisplays current information about the activedocument and common display tools.

Menu barDisplays a

menu list ofcommandsto execute

specifictasks.

ControlsGives youaccess toWorkspacemenu, helpSearch box,and programbuttons.

Chapter 2 Getting Started with Dreamweaver CS6 17

A menu bar appears on or below theApplications bar with menu names. A menu isa list of commands that you use to execute oraccomplish specific tasks. A command is adirective that accesses a feature of a program.Dreamweaver has its own set of menus,which are located on the menu bar along thetop of the Dreamweaver window. On a menu,a check mark identifies a feature that is cur-rently selected (that is, the feature is enabledor on). To disable (turn off) the feature, youclick the command again to remove the checkmark. A menu can contain several checkmarked features. A bullet (Win) or diamond(Mac) also indicates that an option is enabled,but a menu can contain only one bullet-ordiamond-marked feature per menu section. Todisable a command with a bullet or diamondnext to it, you must select a different option inthe section on the menu.

When you perform a command frequently,it's faster, and sometimes more convenient, touse a shortcut key, which is a keyboard alter-native to using the mouse. When a shortcutkey is available, it is listed beside the com-mand on the menu, such as A+F3 (Mac) orCtrl+F3 (Win) for the Properties command onthe Window menu.

Below the menu bar is the Insert toolbar,which appears by default and provides tabswith a variety of different buttons. A Toolbarcontains a set of commonly used buttons youcan quickly access to help you to create webpages. Dreamweaver comes with four differ-ent toolbars (Document, Standard, Coding,and Style Rendering), which you can show orhide to customize the Program window.

The Document window displays openDreamweaver documents. Dreamweaver usestabs to make it easier to switch back and forthbetween documents. Each document tabincludes a Minimize, Maximize, and Close but-

ton at the top, and a Status bar at the bottom,which displays current information about theactive document and common display tools.Below a Document tab is the Related Filesand Document toolbar. The Related Files tool-bar displays tabs to access the source codefor the document file, and related externalfiles. The Document toolbar appears bydefault with Page (Code, Split, and Design)and Live (Live Code, Live View, Inspect, andMultiscreen) View buttons.

A panel is a window you can collapse,expand, and group with other panels, knownas a panel group, to improve accessibility andworkflow. A panel appears with a shadedheader bar, which includes the window titleand additional options, such as the Insertpanel. A panel group consists of either indi-vidual panels stacked one on top of the otheror related panels organized together withtabs, such as the Files panel, to navigate fromone panel to another. Dreamweaver providesa wide variety of panels you can use to workwith different aspects of a web page, includ-ing CSS Styles, Insert, Assets, AP Elements,Databases, Tags, and Frames, which you canopen and close from the Window menu. Asyou open, close, and move around windowsand panels to meet your individual needs,you can save the location of windows andpanels as a custom panel layout set, whichyou can display again later.

The Properties panel, known more com-monly as the Property Inspector, at the bot-tom of the Program window provides aconvenient way to view and change attributesof any selected object or multiple objects—such as text, graphics, media, and shapes—ona web page. After you select an object, rele-vant commands and associated fields for itappear in the Property Inspector.

Before you create a web site, you need to create a local root folderwhere you’ll store all the elements that make up the site. web sites aremore than just a bunch of web pages. All the images, videos, naviga-tional buttons, documents, scripts, etc., are separate files that must beuploaded into those pages. Defining a web site instructs Dreamweaverthat the local root folder is the folder location that contains all the ele-ments of your site. In turn, Dreamweaver will keep track of the fileswithin the folder, automatically update them as needed, and give youaccess to them, while you're working. The Site Setup dialog box doesn’tforce you to complete the site setup unless it’s required. As you work onyour site and a task needs information from the Site Setup dialog box,Dreamweaver opens it and highlights the required setting.

18 Chapter 2

Creating a Web Site

Create a New Web Site

Define a local root folder whereyou’ll store all the elements thatyou will use to build your web site.

Start Dreamweaver.

Click the Site menu, and then clickNew Site.

Dreamweaver gives you severalcategories on the creation of aweb site: Site, Servers, VersionControl, and Advanced Settings.

Click the Site category.

Name your site (Site names arenot file names, so feel free to useany naming convention you wish).

Enter the location of your localroot folder, or click the Browse ForFolder icon, located to the right ofthe input box, navigate to thefolder you want to use as the rootfolder, and then click Select.

Click the Servers category.

To specify the server (optional atthis point; you can do it later) thatwill host your pages on the web,click the Add New Server button,specify the server name, FTPaddress, username and password,and root directory on the Basictab, and then click Save.

8

7

6

5

4

3

2

14 5

6

87

Chapter 2 Getting Started with Dreamweaver CS6 19

Click the Version Control category.

To use version control software(optional at this point; you can do itlater), click the Access list arrow,click Subversion, and then specifythe protocol type, server addressand settings, and username andpassword.

Click the Advanced Settingscategory.

A list of subcategories appears,where you can set advancedsettings. You can set options forthe following categories: LocalInfo, Cloaking, Design Notes, FileView Columns, Contribute,Templates, Spry, and Web Fonts(New!).

We'll deal with Advanced Settingsin Chapter 20.

Click Save to complete theprocess.

Dreamweaver creates a sitedefinition based on your optionsand your choice of the local rootfolder (In our example,youtechtube).

When you define a site inDreamweaver, the Assets andFiles panels will now display a listof all your folders and files.

12

11

10

9

See AlsoSee “Setting Advanced SiteDefinitions” on page 484 for informa-tion on using the Advanced tab in theSite Definition dialog box.

Creating a Local Root Folder

The first step to a successful web site is careful planning, and the cre-ation of a local root folder. Since this is covered in Chapter 1, we'llassume that you've already taken care of this very important part of thedesign process. Remember, the local root folder contains all the ele-ments that you use to build your web site and all the individual pagesand parts that it contains. It's very possible that you've already put in alot of computer time before coming to this very important first step inDreamweaver. For example, you may have created many of the imagesand graphics that you're going to use by working in Adobe Photoshopand Illustrator. You may have designed some Adobe Flash animations,and you might have even used Microsoft Word and Excel to generatesome text documents and spreadsheets. All of these elements wouldbe in the local root folder. In keeping with Chapter 1, we call this localroot folder, youtechtube. Now that you have your local root folder, thenext step is to inform Dreamweaver that this is the folder you'll beusing for the creation of this particular web site.

For Your Information

9 10

1211

Dreamweaver allows you to manage multiple sites. When you openDreamweaver it will load the web site last used. If, however, you need towork on another web site it's a simple matter to redirect Dreamweaverto the needed site using the Manage Sites dialog box (New!), whichyou can also use to create, edit, duplicate, remove, export, and importsites. You can create and import sites from Dreamweaver—using a SiteDefinition File with the STE extension—and Adobe Business CatalystSite (New!), which is a hosted web site solution that allows you to builddynamic, data-driven web sites.

20 Chapter 2

Opening or Importing a Web Site

Open or Import Sites

Click the Site menu, and then clickManage Sites.

Select the site from Your Sites list.

To import a site, do either of thefollowing:

◆ Dreamweaver Site. Click ImportSite, select a Dreamweaversite definition file (.ste), andthen click Open.

◆ Business Catalyst Site. ClickImport Business Catalyst Site(New!), sign in and enterrequested information, ifprompted, and then select thesite.

Click Done.

Dreamweaver closes the first siteand loads all the assets for theselected site.

4

3

2

1

3

Did You Know?You can export a site. Click the Sitemenu, click Manage Sites, select thesite, click the Export button, specify aname for the site definition file (.ste),select a location, and then click Save.

2

4Use to delete, edit, duplicateor export a site.

Working with Business Catalyst SitesAdobe Business Catalyst is a hosted web site solution that allowsyou to build dynamic, data-driven web sites with some advancedfeatures, such as search, forums, blogs, password protected areas,web forms, and online stores. You can create a new BusinessCatalyst Site from Dreamweaver by using the New Business CatalystSite command (New!) on the Site menu or the New BusinessCatalyst Site button (New!) in the Manage Sites dialog box. If youalready have a Business Catalyst site, you can import it intoDreamweaver by using the Import Business Catalyst Site button(New!) in the Manage Sites dialog box. Sign in and enter requestedinformation, if prompted.

For Your Information

Chapter 2 Getting Started with Dreamweaver CS6 21

The process of creating a site can become involved; however, it allbegins with the creation of pages. These pages will load static anddynamic content, and be bundled together with a navigational system;finally winding up as a web site. A page is based on a type, such asHTML, and layout (or structure), such as columns and headers, whichincludes HTML5 layouts (New5.5). A new page is a blank slate for youto draw. A new web page can be literally anything from a text page to ahigh-end page dealing with animation, video, audio, CSS, incontext edit-ing or any combination of the above.

Creating a Blank Web Page

Create a Blank Web Page

Click the File menu, and then clickNew.

TIMESAVER Press Ctrl+N(Win) or A+N (Mac).

The New Document dialog boxopens.

TIMESAVER To create a webpage without the dialog box, clickthe file type you want at theWelcome Screen.

Click the Blank Page category.

Select the Page Type you want (inthis example, HTML5 (New5.5)).

Select the Layout you want.

Click the DocType list arrow andselect the option you want.

Click the Layout CSS list arrow, ifavailable, and select the optionyou want.

Click the Link button to attach aCSS file to the current document.

To add an editable region for ablank HTML page, select theEnable InContext Editing checkbox.

Click Create.

Dreamweaver creates the newpage and opens it.

9

8

7

6

5

4

3

2

13 42

5

7

6

9

Create New without a dialog box

8

A Dreamweaver template is a common structure created and used forall or some pages of a web site. Each section of a web site can have itsown template with variations in structure or color from the others.Templates are fantastic timesaving tools because they allow you to cre-ate pages that share the same design but different content, and if youmodify a template document, you immediately update the design of allpages. Dreamweaver templates are special master files that containeditable and locked regions. Pages based on a template enable users toedit parts of a web page within the editable regions without the risk ofaccidentally changing the locked regions. This is useful if you are creat-ing a site that will be maintained by other users. You can specify whichparts of pages editors can and cannot change. A template page is basedon a type, such as HTML template, and layout (or structure), such ascolumns and headers, which includes HTML5 layouts (New5.5).

22 Chapter 2

Creating a Web Page from a BlankTemplate

Create a Blank Template

Click the File menu, and then clickNew.

Click the Blank Template category.

Select the Template Type you want(in this example, HTML Template).

Select the Layout you want (in thisexample, 2 column, elastic, leftsidebar).

In this example leave the Doc Typeand Layout CSS at their defaultvalues of XHTML 1.0 Transitional,and Add to Head, respectively.

Click Create.

Dreamweaver opens the template.

Click the File menu, click Save,click OK if necessary to dismissthe no editable region alert,specify a name, and then clickSave.

6

5

4

3

2

13 42

5

Storing Templates

When you work with templates, Dreamweaver automatically creates afolder called Templates, and all template files are stored in this folder.If you move a template file outside that folder, Dreamweaver will notbe able to create new files based on that template. In addition, it cre-ates problems when you insert paths for hyperlinks. Keep your tem-plates within the Templates folder.

For Your Information

Chapter 2 Getting Started with Dreamweaver CS6 23

The process of creating a site just got easier with fluid grid layouts(New!). Instead of dealing with code, you can create complex webdesigns and layouts for mobile, tablet and desktop devices. Fluid gridlayouts provide an adaptive display on different screen sizes on differenttypes of devices. It contains 3 layouts—Mobile, Tablet, and Desktop—based on a single fluid grid and typography presets, which you canmodify. After you create a new document, you can use the Insert panelto insert Fluid Grid Layout Div tags.

Creating a Web Pagefrom a Fluid GridLayout

Create a Web Page from a FluidGrid Layout

Click the File menu, and then clickNew.

TIMESAVER Click the Filemenu, and then click New FluidGrid Layout or click Fluid GridLayout at the Welcome Screen.

The New Document dialog boxopens.

Click the Fluid Grid Layoutcategory.

Specify the number of columns, apercentage of column width, and apercentage width for the device.

Click the DocType list arrow andselect the option you want.

Click the Layout CSS list arrow, ifavailable, and select the optionyou want.

Click the Link button to attach aCSS file to the current document.

To restore default settings, clickReset To Default.

Click Create.

Dreamweaver creates the newpage and opens it. It also createsa boilerplace.css file, an externalcss file (one that you name), and arespond.min.js (JavaScript) file,which all appear on the RelatedFiles toolbar.

8

7

6

5

4

3

2

1

32

4

6

5

87

24 Chapter 2

Instead of creating a web page from scratch, you can create a newweb page based on the existing template, which can save you a lot oftime and effort. In the New Document dialog box, you can select yourown custom template designs available in the Page From Template cat-egory or click the Get More Content link to open the DreamweaverExchange on the web to download more template page designs.

Creating a Web Pagefrom a Template

Create a Web Page from anExisting Template

Click the File menu, and then clickNew.

TIMESAVER Press Ctrl+N(Win) or A+N (Mac).

The New Document dialog boxopens.

Click the Page From Templatecategory.

Select the site that contains thetemplate you want.

Select the template you want touse.

Select or clear the Update PageWhen Template Changes checkbox.

Click Create.

Click the File menu, click Save,specify a name, and then clickSave.

7

6

5

4

3

2

1

3 42

65

Did You Know?You can create a document from atemplate in the Assets panel. Open theAssets panel using the Windows menu,click the Templates icon to view the listof templates, right-click (Win) orControl-click (Mac) the template youwant, click New From Template, andthen save the document.

Chapter 2 Getting Started with Dreamweaver CS6 25

If you’re not sure where you start, you can use one of Dreamweaver’ssample designs as a starting point for a new page and then make anychanges you want to customize it to suit your specific needs. In theNew Document dialog box, you can preview sample file designs andthen create a new document based on the one you want to use. You canselect from sample pages with CSS (Cascading Style Sheets) andMobile Starters. The Mobile Starter (New5.5) sample pages providejQuery functionality with a HTML5-based interface for mobile devices.When you create a new document, Dreamweaver makes a untitled copyof the sample file, which you can save with a new name.

Creating a Web Pagefrom a Sample

Create a Web Page from aSample

Click the File menu, and then clickNew.

TIMESAVER Press Ctrl+N(Win) or A+N (Mac).

The New Document dialog boxopens.

Click the Page From Samplecategory.

Select the type of sample folderyou want to use: CSS Style Sheetor Mobile Starters (New5.5).

Select the sample page you want(New5.5).

If available, click the DocType listarrow, and then select from theavailable options.

Click Create.

Dreamweaver creates the newpage and opens it.

Click the File menu, click Save,specify a name, and then clickSave.

If the Copy Dependent Files dialogbox appears, set the options youwant, and then click Copy.

8

7

6

5

4

3

2

1

3 42

6

Preview

5

26 Chapter 2

Web pages should be saved as soon as they're opened. Naming con-ventions should be according to a predefined list of names that youcreated during the planning stage of the project. It's important to savepages early, that way if there's any problem such as: the applicationlocking up, you will be able to start again from the last-saved version.Another important reason is error checking and validating. Web pagesmust be in a saved state before performing any validation.

Saving a Web Page

Save a Web Page

Click the File menu, and thenselect from the following options:

◆ Save. If the file is new, you willbe prompted to enter a properfile name and location for thenew page. If the file has beenpreviously saved, Dream-weaver saves the file, using theoriginal file name and location(without prompting).

TIMESAVER Press Ctrl+S(Win) or A+S (Mac).

◆ Save As. Use this option tomake a copy of a file; you willbe prompted to give the file anew name and location.

TIMESAVER Press Ctrl+Shift+S(Win) or A+Shift+S (Mac).

◆ Save All. Use this option if youhave more than one file open,and you want to save all ofthem at the same time. If any ofthe files are new, you will beprompted to enter a file nameand location.

◆ Save All Related Files. Use thisoption to save web site relatedfiles, which includes externalCSS rules, server-side includes,external JavaScript files, parenttemplates files, library files, andiframe source files.

1Local root site

Sitefolders

Naming Conventions for Files and Elements

When you name your files and elements in Dreamweaver, it’s impor-tant to use standard guidelines for naming to make sure your web siteworks properly on different server platforms, such as Windows orUNIX. Keep the following in mind: (1) Use underscores in place ofspaces and avoid special characters (colons, slashes, periods, andapostrophes), and (2) use shorter names; filenames on the Mac can-not be more than 31 characters.

For Your Information

Chapter 2 Getting Started with Dreamweaver CS6 27

◆ Save As Template. Use thisoption to save the opendocument as a template. Atemplate is a reusabledocument that containseditable regions.

Navigate to the drive and folderlocation where you want to savethe file.

Type a name for the file, or use thesuggested name.

When naming files, avoid usingspaces and special characters, orpunctuation.

For this example, leave the otheroptions at their default levels.

Click Save to finalize the process.

Click Copy.5

4

3

2

2

4

3

5

Did You Know?You can revert to the last saved ver-sion of a document. Click the Filemenu, click Revert, and then click Yesto revert to the previous version, orclick No to keep your changes. If yousave a document and then exitDreamweaver, you cannot revert to theprevious version when you restartDreamweaver.

Macintosh and Windows computerssystems are not case sensitive.Therefore when you create a file namefor a web page (or the files loaded onthe page), you won't have a problemvalidating that page on your computer;however, when you move the site tothe server, many servers are case-sen-sitive, and the same pages may notload correctly. For example, if a webpage is named Index.html and you callit using index.html. It validates on yourcomputer, but it might not work on theserver… pay attention to case.

28 Chapter 2

Opening a web page is a simple procedure. You can use the Open sec-tion on the Welcome screen, Open commands on the File menu, orAdobe Bridge CS6 (a stand-alone file management program that comeswith Dreamweaver CS6) to open web related files in several formats.You can open a web page from your local hard drive, a network drive,or a web server using an Uniform Resource Locator (URL). By default,Dreamweaver opens the last web site you worked on every time youopen the program. If you open a new page while another site is stillopen, the new page opens in a new Dreamweaver window. Web pagesusing the HTML—Hypertext Markup Language—are the primary filetypes you open in Dreamweaver, however, you can open other typestoo. As an editor, you can use Dreamweaver to open many types ofweb related files, including style sheets, scripts, text, xml, and libraries.For web pages you recently opened, you can quickly reopen themagain by pointing to Open Recent on the File menu, and then selectingthe web page you want to open.

Opening an ExistingWeb Page or File

Open an Existing Web Page or File

Click the File menu, and then clickOpen.

TIMESAVER Press Ctrl+O(Win) or A+O (Mac).

Navigate to the drive and folderlocation where you want to openthe web page.

Click the Files Of Type list arrow(Win) or popup (Mac), and thenselect the type of file you want toopen.

Select the page you want to openin the working folder, or type theURL of the page you want.

Click Open.

If the file is read-only, click View,Make Writable, or Cancel.

If you click View, a lock iconappears in the Document tab tothe left of the name.

6

5

4

3

2

1

2

4

5

3

Chapter 2 Getting Started with Dreamweaver CS6 29

Open a Recently OpenedDocument◆ File Menu. Click the File menu,

point to Open Recent, and thenclick the file you want to open.

◆ Welcome Screen. At the WelcomeScreen, click the file you want toopen under Open A Recent Item.

Click to open recently opened files

Click to access the Open dialog box

Did You Know?You can open a recent file quicklyfrom the Start menu (Win). Click theStart button, point to Recent Items(Vista) or My Recent Documents (XP),and then click the file name you wantto open.

You can browse and open files inAdobe Bridge. Click the File menu,click Browse In Bridge, select a work-space display to view your files theway you want, navigate to the drive orfolder where the file is located. Toopen the file, double-click the file icon.To return back to Dreamweaver, clickthe File menu, and then click Return ToAdobe Dreamweaver.

File Type Description

HTML Hypertext Markup Language (.html or .htm) files display web pages in a browser.

CSS Cascading Style Sheet (.css) files are used to format and position HTML content in a consistent manner.

GIF Graphics Interchange Format (.gif) files are used for graphics, such as logos, containing a max of 256 colors.

JPEG Joint Photographic Expert Group (.jpeg) files are used for graphics, such as photographs, requiring more than 256 colors.

XML Extensible Markup Language (.xml) files contain data in raw form that can be formatted using XSL.

XSL Extensible Stylesheet Language (.xsl or .xslt) files are used to style XML data.

CFML ColdFusion Markup Language (.cfm) files are used to process dynamic web pages.

ASPX ASP.NET files (.aspx) files are used to process dynamic web pages.

PHP Hypertext Preprocessor (.php) files are used to process dynamic web pages.

Common Dreamweaver File Types

30 Chapter 2

When you open a web page, Dreamweaverdisplays three view buttons on the Documenttoolbar and uses View menu commands tohelp you work more efficiently.

Code view displays the HTML and anyembedded code for a page.

Split Code view displays the screen in halfvertically. Both halves display page code.Only available on View or Layout menu.

Code and Design view displays the screen in

half vertically. One half displays the currentpage in Code view and the other half displaysthe current page in Design view.

Design view displays web pages in WYSIWYG(What You See Is What You Get) for editing.

In a split screen display, you can change theplacement of the content. Click the Viewmenu, and then click Split Vertically (horizon-tal when unchecked), or Design View on Leftor Design View on Top.

Working with Views

Code view Split Code view

Design view Code and Design view

Chapter 2 Getting Started with Dreamweaver CS6 31

The tabs across the top of the Document window indicate the currentlyopen web pages. You can click the tab to display the page or site youwant. Below the tab in the Document window, the view buttons—Code,Split, and Design—appear for the current page. Design view displaysthe page or site as it appears on screen, while Code view displays theHTML code that makes up the page or site. Split (Code and Design)view shows you Code view at the top and Design view at the bottom,while Split Code view shows code at the top and bottom.

Switching BetweenPages and Views

Switch Between Web Pages

◆ Web Pages. Click the tab with thename you want to display.

TIMESAVER Press Ctrl+Tab orCtrl+Shift+Tab to cycle thru tabs.

Switch Between Page Views

◆ Switch Views. Click the Code,Split, or Design button below thetab on the Document toolbar in theDocument window, or click theView or Layout menu, and thenclick the view you want: Code,Split Code, Design, and Code andDesign.

◆ The Split Code command (nobutton available) displays codein a split screen.

TIMESAVER Press Ctrl+`(accent above Tab key) to cycle tothe view you want.

Click tabs to switch between open files

Click to display the Layout menu

Did You Know?You can view multiple documents in asingle Document window (Mac).Control-click the tab, and then clickMove To New Window. To combineseparate documents into tabbed win-dows, click the Window menu, andthen click Combine As Tabs.

Click to switch views

32 Chapter 2

As you work, you’ll probably want to see what pages look like. Insteadof previewing pages in an external browser, you can view pages as theywill appear in a browser using Live view, a non-editable view. Live viewuses Webkit rendering to display pages, including HTML5 (New!), andsupports previews of dynamic apps (New!), including CMSs such asWordPress, Joomla! and Drupal. You switch to Live view from Designview, which becomes frozen. However, you can still use Code view andCSS3 properties (New5.5) to make changes and then refresh it back inLive view. In Live view, you can set options to follow links in pages, typeURLs, and edit browsed pages from your site in a new tab. In addition,you can freeze JavaScript and the page in its current state to stepthrough different states of an interactive element, such as menus, whichyou can’t do in Design view. In Live view, you can view Live Code, whichis a non-editable view of the executed code on the page. When codestates change, Live Code highlights the code in color for easy viewing.

Previewing Pages inLive View

Preview a Web Page in LiveView and Live Code View

Open the web page you want toview.

Switch to Design view or Code andDesign view.

Click the Live View button.

If you want, make changes in Codeview, in the CSS Styles panel, in anexternal CSS style sheet, or inanother related file.

◆ You can open related files byusing the Related Files toolbar.

Click the Refresh button in theDocument toolbar or press F5 toview any changes.

To go to Live Code view, click theLive Code button.

Live code view appears displayingbrowser code. The non-editablecode is highlighted in differentcolors for code state changes.

To return back to Live view, clickthe Live Code button again.

To return back to Design view,click the Live View button again.

8

7

6

5

4

3

2

1

3

8

2

56

1

Chapter 2 Getting Started with Dreamweaver CS6 33

Select Live View Options

Open the web page you want toview.

Switch to Design view or Code andDesign view.

Click the Live View Options buttonon the Document toolbar (in Liveview), or click the View menu, pointto Live View Options, and thenselect any of the following:

◆ Freeze JavaScript. Freezeselements that use JavaScript.

◆ Disable JavaScript. Displays thepage as if the browser doesn’thave JavaScript enabled.

◆ Disable Plug-ins. Displays thepage as if the browser doesn’thave plug-in enabled.

◆ Highlight Changes in Live Code.Highlights code state changes indifferent colors.

◆ Edit the Live View Page in aNew Tab. Opens Live view pagein a new tab for editing; optionavailable on Live View Browsersubmenu on the View menu.

◆ Follow Link or Follow LinksContinuously. Allows you tofollow links in Live view.

◆ Automatically Sync RemoteFiles. Automatically updatesremote files.

◆ Use Testing Server ForDocument Source. Used fordynamic pages. Uses the fileversion on the site’s testingserver as the Live view source.

◆ Use Local Files For DocumentLinks. Used for non-dynamicsites. Uses the local file versionas the Live view source.

◆ HTTP Request Settings. Allowsyou to set advanced settings fordisplaying live data.

3

2

1321

Using Browser Navigation in Live ViewThe Document toolbar allows you to navigate to pages in Live view.The Document toolbar in Live view includes similar options to thosein a web browser. You can enter a URL in the Address bar, and usethe Back, Forward, Refresh, and Home buttons to navigate to pagesin Live view. The Home button displays your original document. Youcan also access these options on the Live View Browser submenuon the View menu. On the right side of the Document toolbar is theLive View Options button, which you can use the display content inLive view or Live Code view. You can also access these options onthe Live View Options submenu on the View menu.

For Your Information

Live View Options button

34 Chapter 2

In addition to creating pages for web sites, you can also create webpages for different devices, such as smart phones and tablets. InDreamweaver, you can preview a web page, including HTML5 (New!)content, in different sizes in the Document window (New5.5) or multi-sizes at once in the Multiscreen Preview panel (New5.5). When youdesign and test for smart phones and tablets that can change orienta-tion, you can use landscape and portrait orientations to preview yourdisplay. You can select pre-defined screen resolution sizes or createyour own custom ones in Window Sizes preferences (New5.5), ordefine resolutions using media queries (New5.5). Media queries allowyou to customize the appearance of a web page for different screenresolutions.

Previewing Pages inMultiscreen View

Select Multiscreen Options

Open the web page you want toview.

Click the Multiscreen button listarrow on the Document toolbar (orclick the View menu, and thenpoint to Window Sizes), and thenselect any of the following:

◆ Multiscreen Preview. Opensthe Multiscreen Preview panel.

◆ Pre-defined Window Sizes.Displays the current page withthe selected size in theDocument window.

◆ Orientation Landscape orPortrait. Displays the currentpage with the orientation in theDocument window.

◆ Edit Sizes. Opens thePreferences dialog box, whereyou can add or remove windowsizes.

◆ Media Queries. Opens theMedia Queries dialog box,where you can target your webpage for multiple devices byspecifying a different CSS filefor each device.

2

121

Chapter 2 Getting Started with Dreamweaver CS6 35

Preview a Web Page inMultiscreen View

Open the web page you want toview.

Click the Multiscreen button onthe Document toolbar.

◆ You can also click the File orWindow menu, and then clickMultiscreen Preview.

The Multiscreen Preview panelopens, displaying the web page inmultiple views for differentdevices. The default views includePhone (320 x 300), Tablet (768 x300), and Desktop (1126).

To change the view points in theMultiscreen panel, click ViewpointSizes, enter width and heightsizes, and then click OK.

◆ You can also click Reset todefaults to restore the defaultsettings for the different views.

To change the specified web page,use the Back, Forward, Refresh,Home, or Address bar.

To create or edit media queries,click Media Queries, specify thesettings you want, and then clickOK.

Click the Close button in theMultiscreen panel.

6

5

4

3

2

1

54 3 6

Viewpoint Sizes

See AlsoSee “Using Media Queries” on page526 for more information on creatingand using media queries.

36 Chapter 2

As you work on the development of your site, you will probably want tooccasionally stop and see what the individual pages look like when pre-viewed within a specific browser. One of the most used features fortesting your site is the Preview in Browser feature. This is one of themost used when working in Dreamweaver. It lets you see what your sitewill look like in a particular Internet browser. When testing a particularweb page, it's a good idea to check it out in more than one browser, andin more than one version of the browser on different operating systems.For example, it may look great in Safari on the Macintosh, and not evenwork in Internet Explorer on Windows. If you don’t have access to otherbrowsers and operating systems, you can use Adobe BrowserLabs, anonline service that you can use from within Dreamweaver, to view yourweb pages.

Previewing Pages in aBrowser

Preview a Web Page

Open the web page you want toview.

Click the File menu, point toPreview in Browser, and thenselect a browser from theavailable options.

◆ Adobe BrowserLab. An onlineservice that allows you to viewusing different browsers andoperating systems.

If the web page needs to be saved,you will be prompted to save thepage before continuing.

The web page opens and displaysin the selected browser. Check thepage display and links.

When you’re done, close thebrowser.

4

3

2

11 2

4

Preview in browserDid You Know?What it means when you get an errorpreviewing a web page. The previewin browser function may return a "pagecannot be found" error if any of thecharacters in the path of the localfolder have a different letter case thanthe path of the testing server folder.

Chapter 2 Getting Started with Dreamweaver CS6 37

Edit the Browser List inPreferences

Click the File menu, point toPreview In Browser, and thenclick Edit Browser List.

Click the Plus (+) button to addanother browser to the list.

Give the new browser a name.

Click Browse, and then locate thebrowser you want to add.

Select the browser, and then clickOpen.

Select the Primary Browser orSecondary Browser check box todecide whether this browser is theprimary or secondary browser.

Click OK to return to thePreferences dialog box.

Click OK to close the dialog boxand save your changes.

Click the File menu, and then pointto Preview In Browser.

Your new browser option is addedto the list.

9

8

7

6

5

4

3

2

1

8

4

7

3

6

Did You Know?You can use keyboard shortcuts topreview pages. The Primary Browserlaunches when you press the F12 key.The Secondary Browser launcheswhen you press Ctrl+F12 (Win) orA+F12 (Mac).

Using Adobe BrowserLabAdobe BrowserLab is an online service that allows you to test pagesof your web site using different browsers and operating systems.You can use it as a standalone service or within Dreamweaver. InDreamweaver, you can preview local web content from your localsite, or from a remote or testing server. To set file location prefer-ences, click the Window menu, point to Extension, click BrowserLabto open the panel, click the Location list arrow, and then click Localor Server. You can preview a page from Design or Live view. To pre-view a page, click the File menu, point to Preview In Browser, andthen click Adobe BrowserLab, or click the Preview button in theAdobe BrowserLab panel.

For Your Information

2

See AlsoSee “Checking for HTML BrowserCompatibility” on page 466 for moreinformation on usability testing.

38 Chapter 2

Getting Help WhileYou Work

Get Dreamweaver Help

Click the Help menu, and thenclick Dreamweaver Help.

TIMESAVER Press F1 (Win) orA+/ (Mac).

◆ To display a search list oftopics, type a keyword in theSearch box, and then pressEnter (Win) or Return (Mac).

Your web browser opens,displaying help topics.

To search only the Help, select theThis reference only check box.

Click Help categories (plus signicons) until you display the topicyou want or type in keywords tosearch in the Search box.

Click the topic you want.

Read the topic, and if you want,click any links to get informationon related topics or definitions.

When you’re done, click the Closebutton in your web browser.

6

5

4

3

2

1

6

When you start Dreamweaver Help, your web browser opens, displayingproduct help categories and topics. You can search product help fromOnline Help, Community Help, or Adobe.com by using keywords orphrases or browsing through a list of categories and topics to locatespecific information. Online Help accesses product help online,Community Help accesses product help online and related communitycontent, and Adobe.com accesses related help information onAdobe.com. When you perform a search using keywords or phrases, alist of possible matches is shown. In addition, comments and ratingsfrom users are available to help guide you to an answer. You can addfeedback and suggestions by signing in to Adobe.com.

1

2

5

Did You Know?You can view a PDF version of help.Click the Help menu, click Dream-weaver Help, and then click the ViewHelp PDF on the Search bar.

3

4

Click to open PDF help

Search box in Dreamweaver

Chapter 2 Getting Started with Dreamweaver CS6 39

Get Additional Help

Click the Help menu, and choosefrom the following options:

◆ Dreamweaver Help. Standardhelp systems for all areas ofDreamweaver.

◆ Business Catalyst Help. Onlinehelp information about AdobeBusiness Catalyst web sitesolution.

◆ Spry Framework Help. Onlinehelp for Spry, an open sourceAjax framework developed byAdobe which is used in theconstruction of Rich InternetApplications.

◆ Get Started with BusinessCatalyst InContext Editing.Online information about AdobeInContext Editing.

◆ Reference. Gives you access tofourteen books and manualswith product information.

◆ Dreamweaver Support Center.Gives you access to Adobeonline support, and allows youto search through an extensiveLiveDocs data base.

◆ Dreamweaver Exchange. Givesyou access to the AdobeMarketplace & Exchange withtools and resources.

◆ Manage Extensions. OpensAdobe Extension Manager CS6.

◆ CSS Advisor. Gives you accessto information about usingCascading Style Sheets (CSS).

◆ Adobe Online Forums. Givesyou access to the Adobe onlineforums, where you can getinformation from contributors.

1 1

Participating in Adobe Product Improvement

You can participate in the Adobe Product Improvement Program. Clickthe Help menu, click Adobe Product Improvement Program, and thenfollow the on-screen instructions. This is an opt-in program that allowsyou to test Adobe products and make suggestions for future products.This program enables Adobe to collect product usage data from cus-tomers while maintaining their privacy.

For Your Information

40 Chapter 2

Getting DreamweaverUpdates on the Web

Get Updates on the Web

Click the Help menu, and thenclick Updates.

Adobe checks your software withthe latest available version.

To manually check, click theCheck For New Updates button.

To change preferences, clickPreferences, select the optionsyou want, and then click OK.

Select the update check boxes,and then click Update.

When you’re done, click the Closebutton.

5

4

3

2

1

As time passes, Dreamweaver—like any other program—will change.There are two types of changes to a program: updates and patches.Updates are improvements to a program such as a new feature, option,or command. Patches are software fixes for problems discovered afterthe public release of the program. The good news is that both updatesand patches are free, and once downloaded, are self-installing. Adobegives you two ways to check for changes. You can check manually bygoing to the Adobe web site, or automatically through the Adobe AdobeApplication Manager. The Adobe Application Manager Preferencesdialog box allows you to set update options for Dreamweaver and otherinstalled Adobe products, such as Bridge. You can also set an option tohave Adobe notify you of updates in the menu bar.

Did You Know?You can deactivate or activateDreamweaver to use on another com-puter. You can use your serial numberon only one computer at a time. Ifyou’re moving from one computer toanother, you can deactivate your serialnumber on one computer and thenactivate it another one. Click the Helpmenu, click Deactivate, click SuspendActivation (saves serial number) orDeactivate Permanently (removesserial number), and then click Done. Toactivate it, click the Help menu, andthen click Activate.

3

4

5

2

Chapter 2 Getting Started with Dreamweaver CS6 41

After you finish working on a web page, you can close it and openanother one, or close it and exit Dreamweaver. Closing a web pagemakes more computer memory available for other processes. Closing aweb page is different from exiting Dreamweaver: after you close a webpage, Dreamweaver is still running until you exit it. You can use the Exit command on the File menu (Win) or Quit Dreamweaver commandon the Dreamweaver menu (Mac) to close a document and exitDreamweaver, or you can use the Close button on the Document tab. Ifyou try to close a document without saving your final changes, a dialogbox opens, asking if you want to do so.

Closing a Web Page or File

Close a Web Page or File

Click the Close button on theDocument tab, or click the Filemenu, and then click Close.

TIMESAVER Click the Closebutton in the Document window orpress Ctrl+W (Win) or A+W(Mac).

Click Yes to save any web pagechanges; click No to close theweb page or file without savingany changes; or click Cancel toreturn to the web page or filewithout closing it.

2

1

Did You Know?You can close all web pages at onetime. Click the File menu, and thenclick Close All Pages or pressCtrl+Shift+W (Win) or A+Shift+W(Mac).

You can cascade or tile Documentwindows. To cascade document win-dows, click the Windows menu, andthen click Cascade. To tile documents,click the Windows menu, and thenclick Tile Horizontally or Tile Vertically(Windows), or Tile (Mac).

1

Click to close file

Click to close all files

42 Chapter 2

Finishing Up

Exit or Quit Dreamweaver

Use any of the following methods:

TIMESAVER Press Ctrl+Q(Win) or A+Q (Mac).

◆ Click the Close button on theDreamweaver program windowtitle bar.

◆ In Macintosh, click theDreamweaver menu, and thenclick Quit Dreamweaver.

◆ In Windows, click the Filemenu, and then click Exit.

Click Yes to save any webchanges, or click No to ignore any changes.

Dreamweaver performs an orderlyshutdown of the program.

2

1

As much as we enjoy working in Dreamweaver, the time will finallycome when you want to shut down for the day. The process of closingout a Dreamweaver web site, is not difficult; as a matter of fact, it's nomore complicated than closing down any application. Dreamweaver issmart, if you attempt to exit or quit before saving that last file you wereworking on, Dreamweaver prompts you to save or ignore any changes.

Click to exit Dreamweaver

1