• Technical IT

    Solutions delivered throughout the UK
  • Business Applications

    Solutions delivered throughout the UK
  • Professional Best Practice

    Solutions delivered throughout the UK
  • Professional Development

    Solutions delivered throughout the UK

Web Designer Bootcamp

  • Price £995.00
  • Duration 5 day(s)
All major credit cards accepted

Description

The Web Design Bootcamp is a 5 day training course aimed at designers who want to produce web content without the hassle of writing code. The course covers a range of products which allow you to design and output webpages, create animated content, and produce a modern professional looking responsive website design.

Course Content


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


Day Two - Edge Animate


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


Day Three & Four - DreamWeaver


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


Day Five - Responsive Design


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

Make Enquiry

Course Enquiry
  •  
  •  

Book Now

Course Enquiry
  •  
  •