Web Designer Bootcamp

The Muse Workspace

• Planning your site
• Touring the workspace
• Understanding modes
• Working Design Mode
• The toolbox
• Muse panels
• Zooming and panning
• Preview mode

Creating your site

• Creating a new site
• Editing site properties
• Creating a sitemap
• Adding and deleting pages
• Arranging pages
• Page Properties

Master pages

• Web deign versus Print design
• Resolutions
• Web navigation
• Building a master page
• Adding a logo to the header
• Adding a navigation menu
• Adding content to the footer
• Creating new master pages
• Applying master pages

Adding and styling text

• Inserting text
• Formatting text
• Selecting a font
• Changing the color of text
• Adjusting font size
• Creating type styles

Working with shapes and color

• The rectangle tool
• Creating 100% width content
• Applying a background image
• Creating a line
• Working with colour
• Save and edit a swatch
• Working with gradients

Adding images to your site

• Web image basics
• Resolution
• Colour
• Image formats
• Importing images
• Placing an image
• Moving cropping and resizing
• The selection tool
• Wrapping text around content
• The assets panel
• Relinking images
• Fixing broken links

Working with links and buttons

• Creating links
• Email links
• Styling your links
• Working with anchors
• Working with Buttons

Effects, graphic styles & HTML

• Working with rounded corners, effects and opacity
• Shadow effects
• Bevel effects
• Glow effects
• Graphic styles
• Embedding HTML
• Adding a Google map

Working with widgets

• Inserting a composition widget
• Adding or deleting a trigger
• Editing a trigger
• Working with slideshows
• Adding a blank slideshow widget

Publishing and exporting your site

• Understanding Muse publishing
• Publising your page
• Making and uploading edits
• Exporting your site as HTML

Edge Animate

• Animation on the web - the role of JavaScript and CSS
• What is Adobe Edge Animate
• Why use Adobe Edge Animate

The Adobe Edge Animate Interface

• Tools
• Shapes
• Text
• The Stage
• The Elements panel
• The Properties panel
• The Timeline panel
• Workspaces

Creating animations with Adobe Edge Animate

• The basics of animation
• Animation concepts
• Frame-based animation
• Auto-generation

Animating your Adobe Edge Animate objects

• Creating a project
• Setting up your project
• Creating objects
• Object properties
• Using the timeline

The Adobe Edge Animate Timeline

• Adding movement
• Reversing movement
• Transitions
• Keyframes
• Playing your animations

Text

• Text and the web
• Adding text
• Text properties
• Animating text
• Rotating text

Importing graphics into Adobe Edge Animate

• Graphic file types
• Using svg files
• Using gifs
• Using jpgs
• Using pngs
• Animating your imports

More animation with Adobe Edge Animate

• Creating realistic motion
• Easing
• Targeted transitions

Using your animation within your web page

• Preview your animation 
• Looking at the source files created
• Inserting your animation into an already existing web page
• Looping
• Animating web pages
• Repeating actions
• Creating HTML menus

Introduction to DreamWeaver

• Exploring Dreamweaver
• The Menus
• Shortcuts
• Files Panel
• Assets Panel
• Properties Panel
• CSS Styles Panel
• Insert panel

Site management and setup

• Understanding site structure
• File naming conventions
• File and folder structure
• Defining a new site
• Previewing in browsers
• Managing multiple sites

Views

• Code view
• Design view
• Split view

Basic page markup

• What is HTML
• The Insert Panel
• Creating HTML tags
• Common HTML tags
• Code Comments

Styling with CSS

• What is CSS and why use it
• External or internal CSS
• Linking to external styles
• The properties panel
• Creating new CSS rules
• The CSS styles panel
• Editing CSS rules
• Compound rules

Links

• Hyperlinks
• email Links
• Using named anchors
• Creating css rollover effects for links

Images

• Web images overview
• Inserting images
• Image attributes
• Positioning images
• Using background images
• Image rollovers

Simple tables

• Inserting tables
• Tag editor
• Merge cells
• Col spans and Row spans
• Styling your table with CSS

Lists

• Creating a list
• Ordered or unordered
• Styling lists

Working with Video and Audio

• Embedding video in your page
• HTML5 video in DreamWeaver
• HTML5 audio in DreamWeaver

Forms

• Understanding forms
• Form properties
• Text fields
• Checkboxes
• Radio buttons
• Submit buttons
• Form styling
• Emerging form features

Lab - Create your own web site

What is responsive web design

• Getting started with html5 and css3
• Examples of responsive design
• Viewport testing
• More html5 and css3 in your design

How to use responsive web design

• How to create your first responsive design
• Testing your design
• Editing your design

Navigation

• Progressive navigation
• Responsive navigation

Using media queries

• What are media queries
• How to use media queries
• How to load your media queries
• Viewport widths
• Content clipping
• Gracefully degrading media queries

Layouts

• Fixed layouts
• Fluid layouts
• Proportional layouts 
• Changing your layout
• ems vs pixels

CSS  grids

• creating your grid
• grid systems
• building your pages with your grid design
• grids snd media queries

Images

• fluid images
• image scaling
• specific rules for specific images
• max-width
• different images for different screen resolutions

Audio and video

• inserting audio
• inserting video
• responsive audio and video