book

Dreamweaver CC: The Missing Manual, 2nd Edition

by Chris Grover, David Sawyer McFarland

November 2014

Beginner to intermediate

1026 pages

33h 9m

English

O'Reilly Media, Inc.

Read now

Unlock full access

A Note Regarding Supplemental Files
The Missing Credits
About the AuthorsAbout the Creative TeamAcknowledgementsThe Missing Manual Series
Preface
What Dreamweaver Is All AboutWhy Dreamweaver?What’s New in Dreamweaver CC 2014Life in the CloudWhat’s Gone in Dreamweaver CC 2014HTML BasicsDocument TypesOf Tags and PropertiesXHTML in DreamweaverHTML5, the New Markup StandardAdd Style with Cascading Style SheetsAdd Interactivity with JavaScriptMobile Web DesignHow This Book Is OrganizedAbout This BookWindows and Macintosh CommandsThe Very Basics of Reading This BookAbout→These→ArrowsOnline ResourcesThe Missing CDRegistering Your BookReporting ErrataUsing Code ExamplesSafari® Books Online
I. Building a Web Page
1. Dreamweaver CC Guided Tour
Setting Up Creative CloudDownloading Dreamweaver CCGetting Around the Dreamweaver WindowChoosing a Dreamweaver WorkspaceThe Document WindowThe Insert PanelThe Files PanelThe Properties PanelThe Application BarOrganizing Your WorkspaceFloating PanelsIconic panesWorkspace layoutsSetting Up a SiteCreating a Web PageManaging Files and Folders with the Files PanelAdding FilesAdding FoldersMoving Files and FoldersRenaming Files and FoldersDeleting Files and FoldersTutorial: The Dreamweaver Test DrivePhase 1: Getting Dreamweaver in ShapePhase 2: Creating a WebsitePhase 3: Creating and Saving a Web PagePhase 4: Adding Images and TextPhase 5: Preview Your WorkPhase 6: Finishing the Page
2. Working with Text
Adding Text to Pages in Design ViewSimple Copy and PastePaste SpecialChanging the Paste Command’s Standard BehaviorPasting Text from Microsoft Word: The Basic MethodPasting Text with Word FormattingPasting Excel Spreadsheet InformationImporting Word and Excel Documents from WindowsAdding Special Characters to PagesLine BreaksNonbreaking SpacesMultiple SpacesAdding a Date to Your PageSelecting TextApplying HTML Tags to TextStructuring Paragraphs with HTMLParagraphsHeadlinesPreformatted TextIndented ParagraphsFormatting ListsBulleted and Numbered ListsCreating a bulleted or numbered listFormatting existing text as a listReformatting Bulleted and Numbered ListsAdding new items to a listFormatting bullets and numbersNested listsDefinition ListsRemoving and Deleting List ItemsRemoving list formattingDeleting list itemsUsing HTML Text StylesEditing in Live ViewAdding Text in Live ViewMoving and Removing Text in Live viewEditing Pages with Element Quick ViewChecking SpellingAbout DictionariesPerforming a Spell Check
3. Introducing Cascading Style Sheets
Cascading Style Sheet BasicsWhy Use CSS?Internal vs. External Style SheetsTypes of StylesCreating StylesCreating New Styles with CSS DesignerChoose a Style SourceChoose a SelectorTag hintsSet Properties for the SelectorCreating Styles Using the Properties PanelCreating styles for non-text elementsApplying StylesApplying a Class Style to TextApplying a class style in Live viewApplying a class style to objectsOther class styling optionsApplying Multiple ClassesRemoving a Class StyleApplying IDs to a TagLinking to an External Style SheetWorking with StylesEditing StylesDeleting a StyleRenaming a Class StyleDuplicating a StyleFormatting Text with CSSChoosing a FontSpecifying fontsUsing Adobe Edge Web FontsManaging Adobe Edge web fontsCreating a custom font stackUsing Adobe Edge web fontsChanging the Font SizePicking a Font ColorAdding Bold and Italic FormattingAligning TextText Properties in CSS DesignerList PropertiesTutorial: Creating Cascading Style SheetsSetting Up a SiteAdding Web FontsCreating an External Style SheetEditing a StyleAdding Another StyleCreating a Class StyleAttaching an External Style Sheet
4. Links
Understanding LinksAbsolute LinksDocument-Relative LinksRoot-Relative LinksLink Types in ActionLinking from the home page to the Contact Us page (contact.html)Linking from the Horoscopes page to the Pisces pageLinking from the Scorpio page to the Horoscopes pageAdding Links to a PageBrowsing for a FileUsing the “Point to File” ToolTyping or Pasting a Web AddressUsing the Hyperlink ObjectAdding Email LinksLinking Within a Web PageAdding an ID to a Target PageLinking to an IDModifying LinksChanging a Link’s DestinationRemoving a LinkStyling LinksCSS and LinksCreating a Navigation MenuGetting a CSS Menu System from Adobe Add-OnsAdding a Menu with SubmenusAdding, Editing, and Removing Menu LinksChanging the Look of the Navigation MenuFormatting Top Menu itemsSize & PositionColorsImagesTextFormatting rollover menu buttonsFormatting submenu buttonsTutorial: Adding Links to PagesLinking to Other Pages and WebsitesFormatting LinksAdding an Email LinkAdding a Navigation BarStyling the Menu BarAdding the CSS Menu to Other Pages
5. Working with Images
Adding ImagesAdding a Placeholder ImageInserting Images from PhotoshopAdding Photoshop ImagesJPEG optimization optionsGIF and PNG8 optimization optionsPNG optimization optionsModifying an ImageAdding an ID to an ImageAdding a Text Description to an ImageChanging an Image’s SizeControlling Images with CSSWrapping Text Around an ImageAdding BordersBackground ImagesBackground-imageBackground-repeatBackground-attachmentPositioning a background imageEditing ImagesDreamweaver’s Built-In Editing ToolsCropping an imageResampling an imageBrightness and contrastSharpening imagesSetting Up an External EditorEditing Smart ObjectsSmart Object warningsOptimizing an ImageUsing Image MapsEditing a Hotspot’s PropertiesCreating Rollover ImagesTutorial: Inserting and Formatting GraphicsSetting UpAdding an ImageInserting a Photoshop FileUsing Background Images and Custom Bullets for Lists
6. Working with Tables
Table BasicsInserting a TableEditing a TableSelecting a TableSelecting Rows or ColumnsSelecting CellsExpanded Tables ModeModifying Table PropertiesAligning TablesClearing Width and Height ValuesResizing a TableModifying Cell and Row PropertiesAlignment PropertiesHeaderA Property to ForgetCell BackgroundsCell BordersSetting Cell DimensionsTips for Surviving Table-MakingThe contents take prioritySetting column widthsDo the mathAdding and Removing CellsAdding One Row or ColumnAdding Multiple Rows or ColumnsDeleting Rows and ColumnsMerging and Splitting CellsWorking with Tabular DataImporting Data into a TableSorting Data in a TableExporting Table DataTutorial: Creating TablesAdding a TableImporting Tabular DataFormatting the TableFinal Improvements

7. Working with HTML
Controlling How Dreamweaver Handles HTMLAuto-Fixing Your CodeServer-Side Web PagesSpecial Characters and EncodingViewing HTML Markup in Code ViewThe Coding ToolbarCode HintsJavaScript code hintsjQuery code hintsPHP code hintsCode CollapseSetting Code FormatsIndentsLine breaksCharacter case for tags and attributesThe <TD> tagAdvanced Formatting optionsRelated FilesFinding nested PHP filesDesigning Pages in Live ViewInserting HTML Structural Elements in Live ViewEditing Pages in Live ViewChanging Tag Attributes, Classes, and IDs in Live ViewExamining Page ElementsTroubleshooting Interactive PagesAdding Tags with the Quick Tag EditorUsing the Quick Tag EditorComparing Versions of a Web PageDownloading and Setting Up Diff ToolsComparing Files from the Files PanelComparing Files with WinMergeComparing Files with TextWranglerFinding References on Site-BuildingTutorial: Building Pages in Live ViewEditing Pages in Live ViewInserting Images in Live ViewApplying CSS to Your Web PageApplying Classes to Page Elements in Live View
8. Finding and Replacing Text, Tags, and Code
“Find and Replace” BasicsSearching Text and HTML MarkupPhase 1: Set the Scope of Your SearchPhase 2: Specify What to Search ForPhase 3: Provide Replacement TextPhase 4: Choose the Search SettingsPhase 5: Take ActionCreating Advanced Text SearchesLimiting a Search by TagLimiting a Search by AttributeCreating Advanced Tag SearchesTutorial: Adding Alt Text Fast
II. Building a Better Web Page
9. Learning Advanced CSS Techniques
Fine-Tuning Page Design with Advanced SelectorsDescendent SelectorsDescendent selectors with class and ID stylesStyling Groups of ElementsEditing Styles with the Properties PaneMoving and Managing StylesResolving CSS ConflictsInheritanceThe CascadeCSS Sleuthing with Computed PropertiesCSS Sleuthing with Inspect ViewAnalyzing the CascadeUsing the Code Navigator to Identify StylesStyling Pages for PrintPreviewing Media Styles in DreamweaverTips for Printer Style SheetsAnimating Style TransitionsUnderstanding the CSS Transitions PanelDeleting a TransitionUsing CSS3Code-HintingCommon CSS3 PropertiesTutorial: Using Advanced StylesCreating a Descendent SelectorAdding a CSS TransitionAdding CSS3 PropertiesAdding One Last Transition
10. Choosing a Page Layout
Types of Web Page LayoutsFloat Layout BasicsThe Mighty <div> TagThe Insert→Div CommandA Simple ExampleUnderstanding the Box ModelDreamweaver’s HTML TemplatesThe Structure of Dreamweaver’s HTML LayoutsModifying Dreamweaver’s HTML LayoutsEditing HTML LayoutsModifying Fixed LayoutsCreating and Modifying Liquid LayoutsOther Styles to ChangeUsing Absolute PositioningThe CSS Positioning PropertiesPositioning typeWidth and heightVisibilityZ-IndexOverflowPositionClipAdding an AP Element to Your PageModifying AP ElementsResizing Absolutely Positioned ElementsMoving AP ElementsPlacing AP ElementsAligning AP ElementsBackground Image and ColorTutorial: Building a CSS-Based LayoutAdding CSS3 PropertiesCreating a Fixed-Width DesignAdding Styles and Using Absolute Positioning
11. Troubleshooting CSS
Analyzing CSS with DreamweaverUsing the Computed View to Identify StylesEditing CSS PropertiesAnalyzing CSS in JavaScript and Server-Side PagesFollowing links in server-side pagesOvercoming Common CSS ProblemsClearing and Containing FloatsAvoiding Float Drops
III. Building Websites for Mobile Devices
12. Designing Websites for Mobile Devices
Previewing Pages at Different ResolutionsPreviewing Different Screen Sizes in DreamweaverPreviewing Your Layout with Edge InspectThird-Party Help for Window Size DilemmasMedia QueriesTwo Approaches to Media QueriesCreating Media Queries with CSS DesignerMedia queries for desktop and tablet browsersUsing a Site-Wide Media Queries FileUsing @media to Add Queries to Internal Style SheetsUsing Media Queries and Global CSS StylesStrategies for Using Media QueriesOrganizing Your Style Sheets for Media QueriesAdding Styles to Media Query Style Sheets
13. Building Fluid Grid Websites
Understanding Fluid Grid LayoutsGetting Started with Fluid Grid LayoutsBuilding Fluid Grid Layout PagesLaying Out Fluid Grid PagesStyling Fluid Grid Layout PagesUsing Responsive Starter TemplatesTutorial: Building a Fluid Grid LayoutAdding New Elements to a Fluid Grid LayoutAdding Text to Fluid Grid Layout PagesLaying Out Tablet and Desktop ViewsAdding Images to Fluid Grid LayoutsNesting HTML ElementsStyling Your Fluid Grid Web PageAdjusting the Layout for Different Views
14. Creating Pages for jQuery Mobile Sites
jQuery MobileCreating Mobile PagesTouring a Mobile PageAdding Content to a jQuery Mobile PageAdding listsAdding a layout gridAdding a collapsible blockAdding buttonsAdding new “pages”Formatting a jQuery Mobile PageLaunching Your jQuery Mobile Site
IV. Bringing Your Pages to Life
15. Building Interactive Pages
The Roles of JavaScript, jQuery, and jQuery UIAdding Collapsible ContentAdding Content to an AccordionChanging an Accordion’s PropertiesChanging the Look of an AccordionChoosing a themeDownload jQuery UI themesSwapping themesCustom-Formatting Widgets with CSS DesignerMore formatting inside jQuery UI widgetsAdding Tabbed ContentSetting Properties for TabsAdding a Date PickerAdding Pop-Up MessagesjQuery UI Widgets for ProgrammersProgressbarAutocompleteSliderjQuery Buttons and More ButtonsWorking with Dreamweaver BehaviorsBehavior BasicsApplying BehaviorsThe Behaviors PanelApplying Behaviors, Step by StepEditing BehaviorsA Quick ExampleSpecifying BehaviorsA Sampler of Behaviors, One by OneEffectsFadeBlindHighlightShakeSlideOpen Browser WindowImage ActionsPreload ImagesSwap ImageSwap Image RestorePopup Message
16. Adding Forms to Pages
Form BasicsProcessing Form InformationCreating a FormAdding Form ElementsSetting Form Element PropertiesThe Datalist Form ElementThe Text Form ElementThe Label Form ElementThe Password Form ElementThe Text Area Form ElementThe Email, Number, Date, and Other Special Form ElementsThe Checkboxes and Checkbox Group Form ElementsCheckbox groupsThe Radio Buttons and Radio Group Form ElementsRadio GroupThe Select Menus and List Form ElementsThe File Form ElementThe Hidden Form ElementThe Button ElementThe Reset buttonThe Button buttonThe Fieldset Form ElementTutorial: Adding Forms to PagesInsert a FormAdd a Text and Email Form ElementAdding (and Removing) a Number Form ElementAdding a Select Menu Form ElementAdding Date and Time Form ElementsAdding Radio Button Form ElementsAdding Text Area and Submit Button Form ElementsStyling Labels
17. Adding Sound, Video, and Animation
Adding Sound to a PageProducing Audio Files in Browser-Friendly FormatsAdding Audio to Web PagesUsing HTML5 VideoConverting Video Files to Browser-Friendly FormatsAdding Video to Your PageEmbedding YouTube VideosAdding Adobe Edge Animate AnimationsFlash: An IntroductionInserting a Flash AnimationChange Animation PropertiesPlay Your AnimationRename Your AnimationReplace Your AnimationSet the Src propertyChange your animation’s sizeSet Playback OptionsLeave Margins UnspecifiedSelect a Quality SettingAdjust Your Animation’s ScaleAlign Your AnimationBackground ColorWmodeAutomating the Flash DownloadAdding Flash VideosTutorial: Embedding Sound, Video, and Animation in PagesAdding a Sound Clip to a PageAdding Video to a PageAdding Adobe Edge Animate Compositions to a Page
V. Managing a Website
18. Introducing Site Management
Structuring a WebsiteSetting Up a SiteSite NameLocal Site FolderDefault Images FolderLinks Relative ToWeb URLCase-Sensitive LinksCacheManaging Dreamweaver SitesEditing or Removing SitesExporting and Importing SitesViewing Files in the Files PanelModifying the Files Panel ViewEditing Page Elements from the Assets PanelViewing the Assets PanelInserting AssetsAdding color and link assetsFavorite AssetsIdentifying favoritesUsing favoritesRemoving favoritesOrganizing favorite assets
19. Testing Your Site
Site Launch ChecklistTesting Web Pages with BrowserStackPreviewing Pages with BrowserStackChanging Settings in BrowserStackFinding and Fixing Broken LinksFinding Broken LinksChecking an open pageChecking specific pagesChecking an entire websiteFixing Broken LinksListing External LinksOrphaned FilesChanging a Link Site-WideValidating Web PagesSteps for Validating Web PagesCleaning Up HTML (and XHTML)Fixing Page Problems with Site Reports
20. Moving Your Site to the Internet
Adding a Remote ServerSetting Up a Remote Server with FTP or SFTPMore Remote Server Options for FTPSetting Up a Remote Server Using FTP over SSL/TLSSetting Up a Remote Server over a Local NetworkSetting Up a Remote Server with WebDAVSetting Up a Remote Server with RDSAdvanced Remote Server SettingsTransferring FilesMoving Files to Your Web ServerOther ways to move files to your serverGetting Files from Your Web ServerCloaking FilesCheck In and Check OutChecking Out FilesChecking In FilesSynchronizing Site FilesCommunicating with Design NotesSetting Up Design NotesViewing Design NotesOrganizing the Columns in the Files PanelCreating Custom ColumnsPhase 1: Defining new columnsPhase 2: Adding the column to the Files panel
VI. Dreamweaver Power
21. Creating Reusable Page Elements
Snippets BasicsUsing SnippetsCreating SnippetsOrganizing SnippetsUsing Built-In SnippetsLibrary BasicsCreating and Using Library ItemsAdding Library Items to a PageEditing Library ItemsRenaming Library ItemsDeleting Library ItemsTutorial: Using Snippets and Library ItemsCreating a SnippetCreating a Library Item
22. Templates
Template BasicsCreating a TemplateTurning a Web Page into a TemplateBuilding a Template from ScratchDefining Editable RegionsBuilding Pages Based on a TemplateApplying Templates to Existing PagesUpdating a TemplateUnlinking a Page from a TemplateUsing Repeating RegionsAdding a Repeating RegionAdding a Repeating TableWorking with Repeating RegionsUsing Editable Tag AttributesMaking an Attribute EditableChanging Properties of Editable Tag AttributesUsing Optional RegionsAdding an Optional RegionLocking Optional RegionsRepeating Optional RegionsOptional Editable RegionsAdvanced Optional RegionsEditing and Removing Optional RegionsHiding and Showing Optional RegionsExporting a Template-Based SiteTutorial: Building TemplatesCreating a TemplateCreating a Page Based on a TemplateCreating and Using Optional RegionsUpdating a Template
23. Customizing Dreamweaver
Keyboard ShortcutsDreamweaver’s Stock ShortcutsMake Your Own Set of ShortcutsChanging Keyboard ShortcutsCreate a Shortcut Cheat SheetDreamweaver Add-OnsBrowsing for and Installing Add-OnsBuilding and Selling Your Own Add-OnsDownloading and Installing ExtensionsExtension SourcesThe Extension Manager
24. Working with Server-Side Programming
Dynamic Website BasicsSetting Up a Dynamic WebsiteSetting Up a Testing ServerWindowsMacsLocalhost and the Local Site Root FolderSetting Up a Dynamic Site in DreamweaverCreating a Dynamic PageUsing Server-Side IncludesCreating a Server-Side IncludeAdding a Server-Side Include to a Web PageWorking with Related PHP FilesPHP Code Hints
VII. Appendixes
A. Getting Help
Getting Online HelpDreamweaver Online HelpDreamweaver Support CenterAdobe TVGetting Help from Other Dreamweaver Fans
B. Dreamweaver CC 2014, Menu by Menu
File MenuEdit MenuView MenuInsert MenuModify MenuFormat MenuCommands MenuSite MenuWindow MenuHelp Menu
C. Dreamweaver CC
D. Answers found here!
Index
About the Authors
Copyright

Content preview from Dreamweaver CC: The Missing Manual, 2nd Edition

Appendix D. Answers found here!

O’REILLY^®

Dreamweaver CC is a powerful tool for designing all kinds of websites, from those with simple, static pages to interactive, media-driven sites for desktop, laptop, and mobile devices. But the program still doesn’t include a printed guide to its amazing capabilities. That’s where this Missing Manual comes in. With hands-on tutorials and coverage of every feature, you’ll learn to build, deploy, and manage sites whether you’re an experienced designer or just getting started.

Dive into page design. Quickly learn the basics of working with text, images, links, and tables.
Edit pages in Live view. Dynamically add elements to live pages and immediately see the results.
Design once, and for all. Build fluid-grid sites that adapt themselves to desktop, tablet, and mobile devices.
Troubleshoot your HTML. Use the new Element Quick View to reveal the hierarchy of page elements.
Style with ease. Tap Dreamweaver’s enhanced CSS Designer to copy and paste styles.
Enhance Dreamweaver. Get new program features with add-ons that integrate directly with Dreamweaver.
Bring your pages to life. Use jQuery UI to add interactive page elements like tabbed content panels.
Create universal pages. Avoid browser incompatibility with workarounds.

Website Design/Dreamweaver

David Sawyer McFarland, president of Sawyer McFarland Media, has been using ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781491948637Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Dreamweaver CC: The Missing Manual, 2nd Edition

by Chris Grover, David Sawyer McFarland

Appendix D. Answers found here!

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.