Course Description
Jump into the world of Dreamweaver CS6 and web design with this 7+ hour hands-on course hosted by award-winning software trainer and designer, Geoff Blake. First, Geoff will run you through the basics, getting you comfortable in the Dreamweaver interface, working with documents, defining new websites, and customizing the interface. Then, it’s on to building a fully functional web layout from the ground up. You’ll learn how to wireframe a rough design, insert navigation menus, and test your work for usability. Handling text, graphics, and building a well-constructed set of sitewide CSS rules to control it all brings your site together; and Geoff even takes you through Photoshop and Illustrator workflows, showing you how to get the most out of your favourite Creative Suite applications. Then, you’ll see how to roll out your site, and set and test hyperlinks; followed by a look at how to integrate various page elements, including a self-running slideshow, tables, a contact form, and a Google map. Finally, take your site live by uploading it to a live web server, and test it across various browsers on both the Mac and Windows platforms. Roll up your sleeves and delve into this practical, task-oriented look at building contemporary websites in Dreamweaver CS6!
Content
Welcome to Dreamweaver CS6
A Look At What We'll Build
Download Project File
A Look at the Welcome Screen
Creating New Documents
Dreamweaver’s Different Views
Touring the Dreamweaver Interface
Customizing the Interface
Exploring Dreamweaver Workspaces
Creating A Custom Workspace
Using the Tag Selector
Defining a New Site
Getting Organized in the Files Panel
Saving Files Into Your Local Site
Understanding Index Files
Previewing Your Work in A Web Browser
Getting the Layout Started, Part 1
Getting the Layout Started, Part 2
Understanding How the Layout Works
Inserting the Main Menu
Creating the Main Content Area
Hand Coding Layout Containers
A More Economical Approach To Layout
Using Float And Clear
Previewing the Layout And Centering
Nesting Layout Objects
Spacing Apart the Layout
Final Touches
Inserting Text Into the Layout
Adjusting the Layout For Text, Part 1
Adjusting the Layout For Text, Part 2
Inserting Structural Headings
Redefining HTML’s Top-Level Heading with CSS
Touring the CSS Rule Definition Dialog Box
Redefining Headings and Paragraphs
Working More Efficiently with CSS
Creating A CSS Class Rule
Alternative Ways of Working with Class Rules
Inserting and Formatting Lists
Using A List to Build A Menu, Part 1
Using A List to Build A Menu, Part 2
Inserting an Image
Resizing Images with Dreamweaver and Photoshop
Controlling Graphics with CSS
Setting a Graphical Background
Inserting the FeatureBox Images
Setting Up the FeatureBox Titles
Inserting the Layout’s Logo from Illustrator
Understanding Style Sheet Types
Organizing Your Style Sheet
Moving Styles to An External Style Sheet
Working with an External Style Sheet
Creating New Rules Externally
Getting Ready for Site Rollout
Creating Dummy Site Pages
Setting Up the Internal Hyperlink Structure
Creating The Site’s Pages
Previewing And Testing The Site
A Final Thought on Site Rollout
Adjusting the Site’s Hyperlink Formatting
Inserting A Simple Slideshow
Inserting and Formatting Tables
Inserting A Google Map
Formatting A Customer Testimonial Page
Setting Up A Contact Us Page
Finalizing the Site
Setting the Remote Site Info
Uploading the Local Site to the Remote Server
Testing the Live Site
Making Edits and Updating the Live Site
Testing And Debugging For Other Browsers
Welcome to Responsive Design with Dreamweaver CS6
Previewing the Completed LayoutPeview
Download Project File
Dreamweaver Set UpPeview
Creating A New Fluid Grid LayoutPeview
Touring Through the Layouteview
Looking At Other Device ViewsPeview
Building the Fluid Grid Layout's Basic StructurePeview
Adjusting Layout ObjectsPeview
Touring And Understanding The External Style Sheet
Building The Raw Structure For Mobile
Adjusting The Structure For Tablet And Desktop
Inserting Nested Divs In The Layout
Previewing Your Work
Adjusting The External Style Sheet
Building The Header
Inserting The Logo
Inserting And Formatting The Menu Items
Roughing In The Slideshow
Building The Positioning Statement Area
Getting The New Additions Area Built
Constructing The Feature Boxes
Finishing Up The Feature Boxes
Adjusting The Mobile Layout To Scale, Part 1
Adjusting The Mobile Layout To Scale, Part 2
Formatting The Footer
Finishing Up The Mobile Device Layout
Setting Up A Visual Cue For Device Previewing
Adjusting The Tablet Layout's Logo
Configuring Layout Objects To Inherit From The Mobile Style Sheet
Adjusting The Positioning Statement And New Additions Areas
Setting Up The Tablet Device's Feature Boxes, Part 1
Setting Up The Tablet Device's Feature Boxes, Part 2
Let's Cheat! Here's How To Fix Scaling Graphic Margin
Fixing The Mobile View
Finishing Touches For The Tablet Layout
Adjusting To Accomodate A Fixed-Width Desktop Layout
Adjusting The Desktop Layout's Logo
Applying Desktop-Only Formatting To The Menu
Tweaking The Slideshow Positioning
Fixing The Positioning Statement And Feature Boxes
Final Desktop Layout Adjustments
Cleaning Up The Style Sheet
Hiding Layout Content Between Devices