Copyright © 2021 LOOP All Rights Reserved.
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!
Welcome to Building Websites with Dreamweaver CS6!
Welcome to Dreamweaver CS6
A Look At What We'll Build
Let’s Get Started with Dreamweaver!
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
Workin’ with Websites and Browsers!
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
Startin’ with Nothin’: Building A Web Layout From Scratch!
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
Text and CSS and Menus…and More!
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
And Now, Inserting Graphics!
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
Going Further with CSS: Using External Style Sheets!
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
Site Rollout: From A Single Page To A Multi-Page Site!
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
Insertin’ Additional Page Elements!
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
Going Live: Uploading the Completed 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
Now Go Forth And Create!
Where To Go From Here
Responsive Design With Dreamweaver CS6: Intro
Welcome to Responsive Design with Dreamweaver CS6
Previewing the Completed LayoutPeview
Let's Get Started with Fluid Grid Layouts!
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 Mobile Device Layout!
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
Building Out The Tablet Device Design!
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
Building The Desktop 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
Finishing Up with Some Final Adjustments!
Cleaning Up The Style Sheet
Hiding Layout Content Between Devices
Wrapping Up Fluid Grid Layouts
Where To Go From Here