London School of International Business.

Overview

Web design is more in demand than ever and many companies now prefer to have in-house team members with web design skills, rather than outsourcing to agencies. This has opened up many doors to jobs in this field, across a wide range of sectors.

Skills in this discipline will continue to be in demand, but it’s crucial to ensure you are up to date with the latest technology developments and best practice. Through training in website design, Dreamweaver, and a range of other industry standard software programme you can be confident you will gain the digital skills required to land your dream job as a web designer.

Description

If you’re a creative person with an eye for design and a passion for technology, Web Design Specialist Diploma is a great choice. This role will allow you to not only express your creative side; but also enable you to gain the technical knowledge that is required to make things happen online. With our Web Specialist Diploma your skills will be increasingly in demand as the world of new technology continues to grow.

Course Specification:

Whether you are designing your personal website or developing a commercial website, our web design course will equip you with the required skills to enable you design the site efficiently.

Our web design course covers all the latest designing softwares and technologies like

Adobe Dreamweaver,

Adobe Photoshop,

HTML5 and XHTML,

JQuery,

Javascript,

CSS2, CCS3 and more.

Job and Career Opportunities:

Seek job as Web Designer, Graphic Designer,Web Developer, UI Designer or be freelancer etc.

Duration

Course Delivery

Entry Requirements

Course Contents (Highlights)

Course Contents (Detailed)

Web Design

Overview of Web Design
Effective Tools and software available
HTML5, XHTML, HTML and CSS in Brief
Supporting HTML5 cross-browser
Web Page Building Blocks
A Basic HTML Page
Semantic HTML: Markup with Meaning
Markup: Elements, Attributes, and Values
A Web Page’s Text Content
Links, Images, and Other Non-Text Content
HTML Page Structure
Creating First Web Page
Creating a Title
Creating Headings
Understanding HTML5’s Document Outline
HTML Validation

Working with Web Page Files

Planning Your Site
Creating a New Web Page
Saving Your Web Page
Specifying a Default Page or Homepage
Editing Web Pages
Organizing Files
Viewing Your Page in a Browser

Basic HTML Structure

Headings
Common Page
Header
Navigation
Defining a Section
Specifying an Aside
Creating a Footer
Creating Containers
Adding the Title Attribute to Elements

Structural building blocks

< div >, < section >, and < article >
Headings:
, , and < h1 >–< h6 >, plus < footer >
HTML5-style heading element levels
Structural elements: < nav >, < aside >, < figure > (and < figcaption >)
Putting it all together
Accessibility and HTML5

Images

About Images for the Web
Getting Images
Inserting Images on a Page
Offering Alternate Text
Specifying Image Size
Scaling Images with the Browser
Adding Icons for Your Web Site

Web Links, Anchor Links, Internal and External Links

The Anatomy of a Link
Creating a Link to Another Web Page
Creating Anchors
Linking to a Specific Anchor
Creating Other Kinds of Links

CSS2 and CSS3 (Cascading Style Sheet)

CSS Building Blocks and Working with Style Sheets
Style Rule
Adding Comments to Style Rules
Creating an External Style Sheet
Linking to External Style Sheets
Creating an Embedded Style Sheet
Applying Inline Styles
The Importance of Location
Using Media-Specific Style Sheets
Offering Alternate Style Sheets
The Inspiration of Others: CSS

Formatting Text with Styles

Choosing a Font Family
Specifying Alternate Fonts
Creating Italics
Applying Bold Formatting
Setting the Font Size
Setting the Line Height
Setting All Font Values at Once
Setting the Color
Changing the Text’s Background
Controlling Spacing
Adding Indents
Setting White Space Properties
Aligning Text
Changing the Text Case
Using Small Caps
Decorating Text

Layout with Styles

Considerations When Beginning a Layout
Structuring Your Pages
Styling HTML5 Elements in Older Browsers
Resetting or Normalizing Default Styles
The Box Model
Changing the Background
Setting the Height or Width for an Element
Setting the Margins around an Element
Adding Padding around an Element
Controlling Where Elements Float
Making Elements Float
Controlling Where Elements Float
Setting the Border
Offsetting Elements in the Natural Flow
Positioning Elements Absolutely
Positioning Elements in 3D
Determining How to Treat Overflow
Aligning Elements Vertically
Changing the Cursor
Displaying and Hiding Elements

Style Sheets for Mobile to Desktop

Mobile Strategies and Considerations
Understanding and Implementing Media Queries
Building a Page that Adapts with Media Queries

Working with Web Fonts

What Is a Web Font?
Where to Find Web Fonts
Downloading Your First Web Font
Working with @font-face
Styling Web Fonts and Managing File Size

Enhancements with CSS3

Understanding Vendor Prefixes
A Quick Look at Browser Compatibility
Using Polyfills for Progressive Enhancement
Rounding the Corners of Elements
Adding Drop Shadows to Text
Adding Drop Shadows to Other Elements
Applying Multiple Backgrounds
Using Gradient Backgrounds
Setting the Opacity of Elements

CSS3 Properties

Color and transparency
Backgrounds
Borders
Drop shadows
text-shadow
Gradients

Lists

Creating Ordered and Unordered Lists
Choosing Your Markers
Choosing Where to Start List Numbering
Using Custom Markers
Controlling Where Markers Hang
Setting All List-Style Properties at Once
Styling Nested Lists
Creating Description Lists

HTML Forms and HTML5 forms

Creating Forms
Processing Forms
Sending Form Data via Email
Organizing the Form Elements
Creating Text Boxes
Creating Password Boxes
Creating Email, Telephone, and URL Boxes
Labeling Form Parts
Creating Radio Buttons
Creating Select Boxes
Creating Checkboxes
Creating Text Areas
Allowing Visitors to Upload Files
Creating Hidden Fields
Creating a Submit Button
Using an Image to Submit a Form
Disabling Form Elements
New HTML5 Features and Browser Support

Video, Audio, and Other Multimedia

Third-Party Plugins and Going Native
Video File Formats
Adding a Single Video to Your Web Page
Exploring Video Attributes
Adding Controls and Autoplay to Your Video
Looping a Video and Specifying a Poster Image
Preventing a Video from Preloading
Using Video with Multiple Sources
Multiple Media Sources and the Source Element
Adding Video with Hyperlink Fallbacks
Adding Video with Flash Fallbacks
Providing Accessibility
Adding Audio File Formats
Adding a Single Audio File to Your Web Page
Adding a Single Audio File with Controls to Your Web Page
Exploring Audio Attributes
Adding Controls and Autoplay to Audio in a Loop
Preloading an Audio File
Providing Multiple Audio Sources
Adding Audio with Hyperlink Fallbacks
Adding Audio with Flash Fallbacks
Adding Audio with Flash and a Hyperlink Fallback
Multimedia Files
Considering Digital Rights Management (DRM)
Embedding Flash Animation
Embedding YouTube Video
Using Video with Canvas

HTML Tables and CSS

Structuring Tables
Spanning Columns and Rows

jQuery, JavaScript internal and external

Integrating jQuery Menu
Integrating jQuery Tabs
Working with Scripts
Loading an External Script
Adding an Embedded Script
JavaScript form validation

Testing & Debugging Web Pages

Trying Some Debugging Techniques
Checking the Easy Stuff: General
Checking the Easy Stuff: HTML
Checking the Easy Stuff: CSS
Validating Your Code
Testing Your Page
Troubleshooting when Images Don’t Appear

CSS Properties and Values

CSS Properties and Values
CSS Selectors
CSS Color Values
Gradients
Media Queries
CSS Font Embedding

Making your website live

Use FTP to load your website
Choosing your domain name
Configuring your domain with domain registrar

Adobe Dreamweaver

Navigating the Workspace in Dreamweaver
Working with the Document window
Managing files in the Files panel
Updating properties in the Property inspector
Configure workspace layout

Defining a Site

Creating local root folder
Setting server information with hosting account details
Connecting via FTP

Creating Web Pages

Using the New Document dialog box
Creating and managing files with the FIles panel
Previewing pages in a browser

Laying out Web Pages

Using the Layout section of the Insert panel
Creating fluid grid layouts

Formatting Text

Inserting special characters
Using Find and Replace
Using Spellcheck
Understanding paragraph and header tags
Inserting line breaks
Creating lists

Cascading Style Sheets (CSS)

Understanding basic CSS syntax
Creating and managing CSS styles in the CSS Styles panel
Applying styles using the Property inspector

Managing Links

Understanding basic link types
Creating links using the Property inspector
Creating content navigation

Images and Rich Media

Inserting images
Using the Property inspector to update and edit images
Inserting Flash content

Writing HTML Code

Using the Code view of the Document window
Making changes to code using Design view of the Document window
Selecting specific code
Understanding related files

Adobe Photoshop

Managing Assets Using Adobe Bridge
Navigating between Adobe Bridge and your computer
Working with metadata
Organizing collections
Outputting projects to PDF and for the web
Automating multiple images in Bridge

Using Camera Raw

Basic single image adjustment
Selective image corrections
Batch processing and editing
Understanding Process Version and workflow options
Automating multiple images

Understanding Photoshop Fundamentals

Navigating the Photoshop workspace
Importing and exporting presets
Resetting sliders and options
Using tool groups and options

Understanding Selections

Creating selections using appropriate tools
Adding and subtracting from selections
Quick Mask usage
Using Refined Edge

Understanding Layers

Creating and organizing layers
Understanding the differences between raster and vector layers
Understanding layer masks
Searching for layers
Understanding layer groups
Understanding layer blend modes

Understanding Adjustments

Differentiating between adjustment types
Using TAT, clipping, and visibility
Refining masks on adjustments

Editing Images

Working with the retouching tools
Working with Liquify
Using the transform controls
Using the Puppet Warp
Using the Clone Source tool
Creating panoramas
Using HDR Pro
Creating speciality images (black and white and duotone)
Selecting color

Working with Design and Print Production

Using character and paragraph styles
Using vector shapes
Working with layer comps
Creating frame based animations
Working with layer styles

Outputting for Web, Print, and Mobile

Differentiating between file types
Using Save For Web
Using the Print dialog

Adobe Flash: Computer Animations

Introduction to Adobe and Flash
Flash Animations
Flash Professional File Menu Commands
Flash Tools, Selection, Subselection, Free Transform
Gradient Transform, 3D Rotation, Lasso
Pen, Text, Line, Pencil, Rectangle, Oval
Deco, Brush, Spray Bruch
Bind, Paint Bucket, Ink Bottle
Eyedropper, Hand, Eraser, Zoom
Black and White, Stroke Color, Fill Color, Swap Color
Object Drawing Model, Lock Fill, Brush Mode, Brush Size, Brush Shape, Use Pressure, Use Tilt
Tools available in Flash
Creating Graphics images and animation
Using Text Effectively
Creating Animation and Publishing
Building a Navigational System for Website
Using MovieClips for Interactive Rich Media
Adding Sound and Video

Fee Structure

Apply Now