Diploma in Web Design for Mobile and Desktop Devices

Diploma in WebPage Design in Mobile and Desktop Devices Training Course

This web design course will teach students how to create their webpages from the ground up. The finished pages can be displayed on desktop computers or mobile devices such as tablets or smartphones. The ability of web pages respond to different devices will become the default with the growth of mobile users.

The course will go through several web design core technologies which include the HTML and HTML5, CSS3 and JavaScript. They lay the foundation for every website. A good looking website normally is started with a good design. Photoshop is the indispensable tool in that context. The tight integration between the Dreamweaver and Photoshop enable users to extract formats from Photoshop and convert it into CSS codes without user’s hassle.

When it comes to one website for all devices, responsive web design is the mainstream in the arena. It enables website displayed beautifully regardless of the devices’ screen size. Students will learn responsive web design principle and develop websites for different devices.

Building website is just one part of your digital marketing work, going to the top of search engine pages will be the next step. Successful implementing SEO is the key ingredient to get your site on the top. SEO, stands for Search Engine Optimization, it is about tactics and technologies enable your sites ranked top in search result pages. It should be planned and implemented when you start building a website. Students will understand the factors affecting the ranking and know how to improve ranking using the tactics taught in the class.

Diploma in WebPage Design in Mobile and Desktop Devices Training Course

What you’ll learn

Dreamweaver Module

Getting started

  • Getting started overview
  • Setting preferences

Creating documents

  • Creating new HTML documents
  • Setting up documents
  • Changing the title of a page
  • Defining a background image or page color
  • Viewing and editing HEAD content

Formatting text

  • Formatting text with HTML tags
  • Changing font characteristics
  • Modifying font combinations
  • Changing the color of text
  • Aligning text and elements
  • Creating bullet or number lists

Inserting Images

  • Inserting an image
  • Creating a rollover
  • Image properties
  • Resizing images and other elements
  • Creating image maps

Creating tables

  • Creating tables
  • Nesting tables
  • Filling a table with content
  • Selecting table elements
  • Formatting tables
  • Setting table properties
  • Setting row and cell properties
  • Resizing tables and cells
  • Adding and removing and columns
  • Splitting and merging cells

RELATING COURSES
  Diploma course in 3d Modelling and Animation
  Diploma Course in Computer Graphic Design
  Dreamweaver
  Flash
  HTML & Javascript
  HTML5
  Javascript
  Mobile Web Design using jQuery Mobile
  Photoshop in Web Production

Using Frames

  • Creating frames
  • Creating a nested frameset
  • Saving files in frames and framesets
  • Selecting a frame or frameset
  • About Frame and Frameset properties
  • Specifying frame sizes
  • Setting frame and frameset borders
  • Controlling frame content with links

Creating Forms

  • Creating a form
  • Adding an object to a form
  • Text field properties
  • Button properties
  • Image field properties
  • Checkbox / radio button properties
  • List / menu properties
  • Processing forms

AP elements

  • Creating an AP element
  • Using the AP palette
  • Moving AP elements
  • Changing the stacking order of Aps
  • Working with Timeline to make an animation banner etc

Site planning

  • Creating a local site
  • Creating a romote site
  • Working with pages in the site map
  • Upload files to romote site by FTP or local network
  • Viewing files in the Site window
  • Working with site files

Using the behavior

  • Go to URL
  • Open browser window
  • Popup message
  • Preload images
  • Show-hide layers
  • Swap image/swap image restore
  • Validate form
  • Play timeline and stop timeline
  • Go to timeline frame

Insert media clips

  • Inserting Animate media
  • Inserting QuickTime / AVI movies
  • Inserting music files (mp3, midi, etc)

Using CSS style

  • Creating an external style sheet
  • Defining a custom style
  • Applying a custom style

HTML5, CSS3 and Javascript

HTML Basics

  • Create an HTML Web Page
  • Learning the core HTML Tags
  • Styling Web Pages with Font Tag
  • Working with Images
  • Presenting and Formatting Data using Table Tags
  • Creating Data Input Form

Introducing HTML5

  • Introducing HTML5
  • Understanding HTML5 Web Browsers
  • Backward Compatibility Issues

Learning Page Layout Elements

  • Understanding the Semantic Layout
  • Using Header, Footer Elements
  • Using a Navigation Element
  • Using Section and Article Elements
  • Using Heading and Paragraph Elements
  • Using Figure and Aside Elements

Designing HTML5 Form

  • Using Number, Telephone Input Type
  • Using Email, URL Input Type
  • Using URL, Search Input Type
  • Using Date, Range Input Type
  • Using Color Input Type
  • Require a Value in an Input Field

Adding HTML5 Multimedia

  • Understanding Audio and Video Formats
  • Play Movies with the HTML5 video Element
  • Play Sound with the HTML5 audio Element

CSS Basics

  • Benefits of Cascading Style Sheets
  • CSS Rules, Selectors
  • Precedence of Selectors
  • The Cascade
  • Creating an Embedded Style Sheet
  • Creating an External Style Sheet
  • Adding Inline Styles
  • Media Types
  • Divs and Spans
  • Units of Measurement

Typography

  • Font-family, Font-size, Font-style
  • Font Style, Font Variant and Font Weight
  • Letter and Word Spacing
  • Line-height
  • Text-align, decoration, indent
  • Text-transform, Vertical-align

Working with Objects and Boxes

  • About Color Values
  • Color, Background-color
  • Background-image
  • Colors and Backgrounds
  • Borders, Margin and Padding

Custom Cursors

  • Cursor Styles
  • Custom Cursors
  • Using Custom Cursors

Working with Navigation Menu

  • Pseudo-classes
  • CSS Button Links
  • Modifying Links
  • Using list properties
  • Block display
  • In-line display

Getting Started with JavaScript

  • JavaScript Programming Overview
  • JavaScript and HTML: Using the SCRIPT Tag
  • Hiding Scripts from Non-JavaScript Browsers

Variables and Operators

  • Variables and Data Types Overview
  • Using Data Types, Variables, and Operators
  • Using Comments in JavaScript
  • Defining Arrays

Functions and Objects

  • Using Built-in Functions
  • Creating Custom Functions
  • Using Methods

Control Statements

  • Controlling the flow - JavaScript Control Statements
  • Using Control Statements and Loops
  • Using Loops
  • Conditional Statements: If...Else
  • Using the For...In Loop
  • Using the Break Statement
  • Using the Continue Statement

The Window Object

  • The Window Object
  • Dialog Boxes
  • Window Manipulations

The Document Object

  • The Document Object
  • Writing to Documents
  • Dynamic Documents

Events Handling

  • Using JavaScript Events
  • OnMouseOver, OnMouseOut
  • OnLoad, OnUnLoad
  • OnSubmit, OnClick

Working with Forms

  • The Form Object
  • Reading Data from Form Elements
  • Validating Data with Event Handlers
  • String Methods Used in Input Validation
  • Form-Level Validation

Validating Form Data

  • A General Approach
  • Testing for Required Fields
  • Validating Numeric Data

Responsive Web Design

Responsive Workflow

  • Planning and Strategy
  • Content Before Layout
  • Layout Consideration
  • Prototypes
  • Visual Design
  • Responsive Design Tools

Mobile Pages Issues

  • Mobile First
  • Understanding Screen Size and resolution
  • Deciding Which Devices to Support
  • Testing your site on real devices

HTML for Responsive Sites

  • Working with HTML
  • Basic Page Structure
  • Viewport
  • Structural Elements
  • Creating a Page
  • Clean and Semantic HTML

Essential CSS for Responsive Sites

  • The Cascade
  • Using the Cascade
  • Organizing Your Stylesheet
  • The Box Model
  • Display
  • Positioning
  • Float and Clear

Fluid Grids

  • The Role of Fluid Grids
  • Creating Your Own Response
  • Fluid Solutions

Understanding Media Queries

  • What’s a Media Query?
  • Media Query Structure
  • Using Media Queries in Stylesheet Links
  • Browser Consideration
  • Designing Responsively
  • Using Media Queries
  • Two-Column Layout
  • Setting a Maximum Width

Navigation and Header Layout

  • Responsive Navigation
  • Navigation Links
  • Navigation Patterns
  • Header

Adaptive Images

  • Adaptive CSS
  • Scripted Adaptive Images
  • HTML5 Adaptive Solution
  • Ways to Display Images
  • Responsive Images

Typography

  • Typefaces
  • Using Fonts
  • Sizing Text
  • Line Length
  • Whitespace
  • Margins and Padding
  • Changing Typeface for Screen Size

Photoshop

Working with selection tools

  • Using different marquees tools
  • Using lasso tools
  • Using quick selection tool

Type tool

  • Using horizontal type tool
  • Applying different font styles
  • Setting line spacing and letter spacing

Layers

  • Creating and deleting layers
  • Managing layout with layers
  • Grouping and merging layers

History Panel

  • Restoring original image
  • Undoing steps with history panel
  • Using the snapshot

File Format

  • Discussion on web image formats
  • GIF, JPEG and PNG
  • Optimizing images

Animation

  • Frame by Frame Animation
  • Tweening animation
  • Output to animated GIF

Animate CC

Using imported artwork

  • Placing artwork into Animate CC
  • Imported bitmaps

Drawing

  • About drawing tools
  • Drawing modes and graphic objects
  • Creating objects by pen tool

Symbols, instances, and library assets

  • Working with symbols
  • Working with symbol instances
  • Working with the library

Timelines and animation

  • Frames and keyframes
  • Motion tween and shape tween
  • Applying a motion onto a guide line
  • Apply custom ease in/ease out to classic tweens

Publishing and Exporting

  • Publish settings
  • Specify publish settings for SWF files
  • Specify publish settings for HTML documents

SEO

Search Engine Optimization

  • Understanding ranking factors
  • Assessing your own website
  • Knowing what ranking elements you control
  • Importance of Website structure and indexing
  • Researching keywords
  • Design you site for optimal SEO
  • Create SEO friendly images