Adobe Dreamweaver CS6 Digital Classroom by Osborn, Jeremy -- Read -- Imperial Library of Trantor

Index

Contents Starting up

About Dreamweaver Digital Classroom Prerequisites

System requirements

Starting Adobe Dreamweaver

Windows Mac OS

Resetting the Dreamweaver workspace Loading lesson files

Downloading and copying the lesson files to your hard drive:

Working with the video tutorials Hosting your websites Additional resources

Training from the Authors Book series Seminars and conferences Resources for educators

Lesson 1: Dreamweaver CS6 Jumpstart

Starting up What is Dreamweaver?

Design and layout tools Site management and File Transfer Protocol Coding environment and text editor Mobile design and development features Who uses Dreamweaver?

Dreamweaver’s workspace features Live View and Live Code

CSS Inspection and the Enable/Disable Feature

Related files Code Navigator Photoshop smart objects Support for Content Management Systems HTML5, CSS3, and PHP code hinting HTML and CSS Starter Pages Subversion Business Catalyst integration How websites work

A simple flow chart Domain names and IP addresses Servers and web hosts The role of web browsers

An introduction to HTML

Tag structure and attributes The structure of an HTML document Placing images in HTML Colors in HTML Case sensitivity and whitespace rules Element hierarchy XHTML 1.0 Transitional What’s the difference? Explorations in code

A look at the Welcome Screen Creating, opening, and saving documents

Creating new documents

Self study Review

Lesson 2: Setting Up a New Site

Starting up Creating a new site

Advanced site-creation options

Adding pages

Saving a page to your site

Defining page properties Work views A deeper look into the Files panel

Viewing local files Selecting and editing files

Self study Review

Lesson 3: Adding Text and Images

Starting up Typography and images on the Web Adding text An introduction to styles Previewing pages in a web browser Understanding hyperlinks Creating hyperlinks

Relative versus absolute hyperlinks Linking to an e-mail address

Creating lists Using the Text Insert panel Inserting images

Image resolution Image formats Creating a simple gallery page

Linking images Using image placeholders Editing images

Adjusting brightness and contrast Optimizing images Updating images

Self study Review

Lesson 4: Styling Your Pages with CSS

Starting up What are Cascading Style Sheets?

CSS replaces inefficient HTML styling The benefits of CSS styling How do you create CSS rules in Dreamweaver? Understanding Style Sheets Understanding why they’re called Cascading

Creating and modifying styles

Creating a class style with the Property Inspector Creating and modifying styles in the CSS Styles panel Advanced text formatting with CSS Fine-tuning page appearance with contextual and pseudo-class selectors

Div tags and CSS IDs

Internal versus external style sheets Attaching an external style sheet to your page Modifying attached style sheets Creating a new .css file (external style sheet)

Self study Review

Answers

Lesson 5: Creating Page Layouts with CSS

Starting up The CSS Box model

The basics of CSS margins, padding, and borders Reviewing the <div> element Reviewing the ID selector

Creating a centered container for your page

Making layouts cross-browser compatible Absolute versus relative positioning

Positioning content with AP Divs

Creating a header section with the Draw AP Div Adding an introduction section to your page Adding images to your layout Photoshop integration Adding Main and Sidebar content areas Adding additional content and styles

Setting margins and borders

Overriding default margins in CSS Adding borders to elements Future proofing your layout

The pros and cons of Absolutely Positioned CSS layouts Self study Review

Lesson 6: Advanced Page Layout

Starting up Layout with AP divs versus layout with floats

Creating a floated image

Creating columns with HTML and CSS

Creating the HTML Structure with div elements Setting the width and floating the columns Using the clear property

Creating a list-based navigation bar Changing column layout and size Creating the appearance of equal height columns Browser compatibility

Adding code for IE 6 Applying finishing touches

Creating more sophisticated layouts Dreamweaver Fluid Grid Layout Self study Review

Lesson 7: CSS3 Transitions and Web Fonts

Starting up Understanding the role of CSS3 Adding a CSS Transition Modifying a CSS Transition Adding CSS Transitions to a navigation menu The basics of web fonts Adding web fonts to your site Styling your heading with a web font Self study Review

Lesson 8: Working with Tables

Starting up Using tables in web design Importing table data Selecting table elements Modifying table size Modifying table structure Creating a table Formatting and styling tables in HTML Formatting and styling tables with CSS Advanced CSS styling of tables Controlling cell alignment, padding, and borders with CSS Creating alternate row styling with CSS Reusing CSS for other tables Data sorting tables Self study Review

Lesson 9: Fine-Tuning Your Workflow

Starting up Customizing panels and panel groups Using the Favorites tab on the Insert bar Resizing the document window Changing the Zoom level Using guides Using grids The tag selector Tiling documents Self study Review

Lesson 10: Adding Flash, Video, and Sound Content

Starting up Making web content interesting Inserting Flash movies Adding video

Flash Video

QuickTime video and Windows Media Inserting sound Self study Review

Lesson 11: Maximizing Site Design

Starting up Creating modular page elements Introducing snippets

The Snippets panel Creating new snippets

Introducing library items

Modifying and updating library items

Introducing templates

Creating a new template Working with editable regions Creating new pages from templates

Modifying templates Repeating regions

Putting repeating regions into action Detach from Template command

Self study Review

Lesson 12: Working with Code-editing Features

Starting up Working with code

Accessing code with the Quick Tag editor Inserting tags with the Tag Chooser Inserting and editing comments

Using HTML5 Code-hinting Working in the Code view

Modifying the Code view workspace The Coding toolbar Collapsing and expanding tags and code blocks

Validating your code

Highlighting and correcting invalid code Running a Report

Formatting code

Indenting

Self study Review

Lesson 13: Building Web Forms

Starting up The basics of HTML forms

How forms work

Building a contact form

Inserting the <form> tag Setting form properties

Adding form elements

Adding text fields Adding checkboxes Adding radio buttons Adding radio groups Adding lists and menus Adding a text area Adding a File Upload field Creating Submit and Reset buttons

Styling forms with CSS

Attaching external styles Setting a background color Styling form elements

Form processing and validation Adding form validation

A look at the Behaviors panel Setting an event or trigger

Validating form fields

Changing a form field’s behavior order Verifying field contents

Self study Review

Lesson 14: Adding Interactivity with the Spry Framework

Starting up Introducing the Spry Widgets

The Spry framework for AJAX What is AJAX?

A look at the project The Spry Menu bar Customizing Spry Widgets with CSS The Spry Tabbed panel The Spry Accordion panel The Spry Collapsible panel Working with Spry Data Widgets

What is XML? Creating a Spry XML data set Adding a Spry Data Widget: The Spry Repeat List

Styling and fine-tuning data widgets Self study Review

Lesson 15: Mobile Design and Layout

Starting up The rise of the mobile web

Dreamweaver tools for mobile layout Mobile website features in Dreamweaver Viewing your web page with the Multiscreen feature Media Queries defined Creating a site-wide media query file Organizing your style sheets Creating a layout optimized for mobile Creating styles for navigation and a single-column layout The basics of Fluid Grid Layout Creating your mobile layout Creating a tablet layout Creating a three-column fluid layout for the desktop Styling elements in your fluid grid layout

Self study Review

Lesson 16: Managing your Website: Reports, Optimization, and Maintenance

Starting up Working with the Files panel

Creating a remote connection Viewing files on a remote web server Transferring files to and from a remote server with Get and Put

Using Check In/Check Out and Design Notes

Check In and Check Out Checking files in and out Using Design Notes Sharing Design Notes Displaying Design Notes in the Files panel

Testing site integrity

Using Check Links Checking links sitewide

Generating site reports

Understanding report results Addressing a listed item The Browser Compatibility Check

Optimizing pages for launch

Search engine visibility and Search Engine Optimization Titling your documents with the <title> tag Adding meta keywords and descriptions

Launching your site

Site Launch Checklist Uploading your site

Getting help and using the reference guides

The Reference panel Suggested next steps Website design resources

Self study Review

Lesson 17: Dreamweaver CS6 New Features

What’s new in Dreamweaver CS6?

Fluid Grid Layout CSS transitions Web fonts

jQuery Mobile Swatches PhoneGap Build Service New Features in Dreamweaver CS5.5

CSS3 and HTML5 authoring support jQuery Mobile integration Support for building native mobile apps for iOS and Android with PhoneGap W3C Validation

About the Authors Credits Adobe® Dreamweaver® CS6 Digital Classroom

← Prev
Back
Next →

← Prev
Back
Next →