Web Design (Graphic & HTML)

Course # 1. Web Publishing using Dreamweaver

Setting the scene

  • Web evolution
  • The Internet and intranets
  • Benefits to an organisation

Dreamweaver Editing Environment

  • Dreamweaver work area
  • Defining a local site
  • Creating a page
  • Formatting pages
  • Design, code and split views
  • Panels and floating panels
  • Properties Inspector
  • Context menus

Introduction to HTML

  • What is a web page?
  • Examining HTML (Hypertext Mark-Up Language)
  • A simple web page
  • Tags and Elements
  • Attributes and Values
  • Paragraphs and line breaks
  • Headings
  • Alignment
  • Text formatting

Working with Images

  • Image file formats
  • GIF, JPEG and PNG
  • Adding graphics to a page
  • Image properties
  • Configuring images
  • Background images
  • Page colours
  • HTML for images

Hyperlinks

  • Internal and external hyperlinks
  • E-mail links and named anchors
  • Graphical hyperlinks
  • Image Maps
  • HTML for links

Tables and Layers

  • Creating Tables
  • Table and cell properties
  • Inserting rows and columns
  • Spanning columns and rows
  • Table Layout and Cells
  • HTML for tables
  • Creating layers
  • The layers panel
  • Page design using layers

Frames

  • Frames and framesets
  • Inserting pages into frames
  • Frame properties
  • Frames panel
  • Hyperlinks in Frames and special targets
  • Benefits and drawbacks
  • HTML for frames

Publishing a Web

  • Local and remote sites
  • Setting up remote a site
  • Using FTP
  • Uploading your pages
  • Synchronising local and remote sites
  • Source control

Forms

  • Form creation
  • Form components
  • Form field names and values
  • Processing form results
  • Form properties
  • Confirmation pages
  • HTML for forms

Templates and Libraries

  • Working with templates
  • Creating and applying a template
  • Modifying a template
  • Library items
  • Creating and modifying library items
  • Inserting library items

Site Management

  • Asset management and the assets panel
  • Deleting, moving and renaming pages using the Site Window
  • Removing and renaming sites
  • Checking links
  • Fixing a broken link
  • Using Find and Replace for the entire site

Measuring the Benefits

  • Using Dreamweaver for web authoring vs ASCII editors
  • Open standards and proprietary extensions
  • Advanced authoring features
  • External and internal sites

Planning a Web Site

  • Considerations before starting the design and implementation of a new website

Course # 2. CSS Training Course Contents

Getting Started with CSS

  • Introduction to this CSS course
  • Course Organisation
  • HTML Structure and Content, CSS Presentation
  • Advantages of CSS
  • Creating and Using Style-Sheets
  • CSS Rules: The Basic Syntax
  • Case, Whitespace and Comments in CSS
  • The CSS Standards
  • The Scope Of CSS
  • Browser Support for CSS
  • Hands-on Exercises

CSS Boxes and CSS Selectors

  • The CSS Box Model
  • CSS and Logical HTML Structure
  • Styling Boxes: Borders, Margins and Padding
  • The IE Box Model and Quirks Mode
  • IE Box Model Workarounds
  • Using IE6 Standards Mode
  • Specifying CSS Distances
    • Problems with Absolute Units: pixels and point sizes
    • Using Proportional Units: em, ex and percentages
  • Formatting Box Edges Differently
  • Shorthand Syntax for Sets of Edges
  • Using Margins and Padding Effectively
  • Collapsing Vertical Margins on Paragraphs
  • Using Negative Margins on Boxes
  • Background Images on CSS Boxes
  • Grouping Elements with HTML Classes
  • Styling Multiple Elements Similarly (Selector Grouping)
  • Block Boxes and Inline Boxes
  • Block Box Behaviour
  • Inline Box Behaviour
  • Using the Generic Block Level Element: <div>
  • Hands-on Exercises

Text Formatting in CSS

  • Text Formatting
  • Typefaces, Alternatives and Defaults
  • Text Size — a Serious Usability Issue
  • Font Characteristics
  • Setting and Using Space Within Text
  • Formatting Blocks of Text
  • Using Arbitrary Inline Tags: <span>
  • Hands-on Exercises

More CSS Selectors and Selection

  • Using HTML Element IDs in CSS
  • Using CSS Descendant Selectors
  • Descendant Selector Examples
  • Child, Sibling and Pseudo-Class Selectors
    • Why You Need To Know Them
    • Browser Support and CSS Hacks
  • Distinguishing and Setting Link States
    • Link, Visited, Hover, Active, Focus
  • Modularising CSS Style-Sheets
    • Simpler Management, Less Effort, More Control
  • Embedded CSS Styles in HTML Documents
    • How and When to Use Them (Rarely).
  • Distinguishing Print, Screen and other Output Formats
    • Special Issues in CSS for Print
  • Hands-on Exercises

CSS Positioning

  • Choosing the Right CSS Technique for Positioning Blocks
    • The Position Property, Floats, Margins (inc. Negative and Auto), etc
  • Static Positioning and Normal Flow
  • Absolute Positioning Outside Normal Flow
  • Relative Positioning — Not What You May Expect!
  • Fixed Positioning Outside Normal Flow
  • Relative Absolute Positioning
    • Absolutely Positioned Blocks in Relatively Positioned Containers
  • Floating Boxes with the CSS float property
  • Page Layout Using Absolutely Positioned Blocks
  • Page Layout Using Floated Blocks
  • Hands-on Exercises

More on CSS Page Layout

  • Alternative Methods of CSS Positioning
  • Centring Blocks
  • Styling Lists
  • Redefining the Behaviour of Inline and Block Elements
  • Hiding and Revealing Blocks
  • Table Formatting in CSS
  • Styling Table Cell Borders
  • Page Layout with Table Display Properties
  • Hands-on Exercises

Cascade, Precedence, Specificity and Inheritance in CSS

  • Taking Control: Ensuring that CSS Rules Interact in the Way You Want
  • Combining Styles: Different Types, Origins, Importance, Specificity and Order
  • Examples: Combining Rules
  • Cascading and Cascade Order
  • Resolving Style Conflicts By Origin
  • Resolving Style Conflicts By Importance
  • Resolving Conflict By Selector Specificity
  • Resolving Conflict By Order
  • Non-CSS Presentational Hints
  • Property Inheritance
  • Hands-on Exercises

CSS Layers and Translucency

  • Different Forms of Layered Presentation in CSS
  • Layering with the z-index Property
  • Different Methods for Creating Translucency Effects
  • The CSS3 opacity Property
  • opacity Example
  • Fixed Attachment Backgrounds in Layers
  • background-attachment Example
  • Transparency and Semi-transpaency with Alpha-Blended PNG
  • PNG Translucency Example and Sample Code
  • Pseudo-Transparency with JPG Positioned Backgrounds
  • JPG Pseudo Transparency Example
  • Hands-on Exercises

Using CSS in the Real World

  • Deploying CSS
  • CSS Formatting Versus HTML Formatting
    • Achieving a Balance
  • Standard Tags and Semantic Markup
  • Usability
    • Readable Pages
    • Screen Size and Fluid Design
    • Text Size, Including Internet Explorer Quirks
  • Table Layout and CSS Positioning
    • Table Layout and CSS Positioning as Alternatives
    • Combining Table Layout with CSS Positioning
  • CSS Browser Support
  • Testing Websites
    • Using Test Suites and Multiple Browsers
    • Cross-platform Testing in Single-platform Environments
  • CSS Help and Advice
    • Authorative Sources versus Web Myths and Gossip
  • Free Lifetime Support

Course # 3. Photoshop syllabus contents

- Introduction to the Photoshop programme
- Editing tools
- Working with layers
- Masks and combination of images
- Shapes
- Colours
- Text written on the paths
- Effects
- Filters
- The magic tool including magic wand
- Transparencies
- Blending mode
- Cutting selected elements
- Lasso tool, Polygonal Lasso
- Texts: Texts of shapes and spectacular effects
- Adjustments of images: Image including Adjustments
- Color transfer – Gradient tool
- Masks – Add Layer mask
- Window layers- Add a layer style (effects)
- Different Effects options including Blending options
- Brushes
- Tools to correct colours of the image
- Blur
- Sharpen
- Smudge
- Image cleaning tools
- Dodge tool
- Burn tool
- Sponge tool
- Retouching an image including correction tools and effects
- Patch tool
- Healing
- Filters
- PDF Presentation including Photoshop Presentations.
- Troubleshooting images
- Color patches
- Tips and shortcuts
- Preparation of files for print and the Internet
- Building buttons for the internet.

Course # 4. InDesign course contents

* Introduction and explanations on the software’s commands.
* Basic Commands
* Lasso tool, black arrow, white arrow, line tool, magic wand.
* Editing tools, building elements, construction and restoration of logos.
* Arrangement of objects and graphics in correct composition.
* Align elements relating to the graphic design.
* Change the graphical elements, small / growing and maintaining symmetry
transform in correct proportions.
* Texts, import text from other programs, preparing ads, text on the form .
* Tabs
* Color libraries, screen colors (RGB), print colors (CMYK).
* Color Libraries according to different catalogs- correct graphical work.
* Document view, methods of efficient and easy work.
* Rulers for precise graphic composition maintaining proper graphic design.
* Transparency of different effects, making the past work we did in Photoshop
with InDesign.
* work correctly with layers while creating graphic projects and receiving
layers from Photoshop (connection between softwares).
* Crossings colors network.
* Printing productions, export for printing house and web programmers.
* Construction of objects and handling objects.
* Construction of lines and vector objects.
* Writing on graphic objects and distortion
* Transformation, changes of graphic elements.
* Pen tool- basic graphic illustration
* Path construction- lines and unique graphics
* Construction of buttons and objects for the Internet
* Home pages.
* Create tables.
* Writing on paths.
* Create advanced effects on images .
* Create advanced effects on graphic objects
* Files in different formats
* Colors
* Advanced gradient colors.
* Libraries
* Styles.
* Correct working files to connect with other graphical programs that need InDesign
* Tips and shortcuts to work more effectively and efficiently in order to save time.

Course # 5. Illustrator syllabus contents

-Introduction and explanations on the Illustrator software commands,
explanation step by step
- Basic Commands
- The Lasso Tool, black arrow, white arrow, line tool, magic wand.
- Illustrator blend.
- Editing tools, creating graphical textures, building elements, construction and restoration of logos.
- Arrangement of objects and correct composition of graphics.
- Align elements relating to the graphic design.
- Change the graphical elements, small growing and maintaining symmetry transform correct proportions.
- Texts, import text from other programs, preparing ads, commercials
submission pattern, text on a form.
- Tabs
- Colour libraries, screen colours (RGB), print colours (CMYK).
- Colour libraries according to different catalogues for a correct graphical work
- Views of the document, methods of efficient and easy graphical work.
- Rulers for a precise graphic composition maintaining proper design.
- Transparency of different effects, making the past work we did in Photoshop in Illustrator.
- Filters and effects on images and vector elements
- Working correctly with layers in graphic projects
- Export layers to Photoshop software and the connection between the software.
- Use of symbols, making unique icons, textures, tool icons.
- Make photo into a vector illustration, effects and correct uses of live trace.
- Crossings colours network, mesh.
- Printing Production from Illustrator, exporting for printing house
and web programmers for web design.
- Construction of graphic objects and handling graphic objects.
- Construction of lines and vector objects.
- General filters and differences to work properly in exporting printing files.
- General effects and differences to work properly in exporting printing files.
- Writing on graphic objects and distortion
- Creating logos with the envelope command.
- Use different symbols to create design templates.
- Coup of pixel-based graphics, image to illustration.
- Transformation of graphic elements.
- The pen tool for basic and advanced graphics, drafting on the basis of an image.
- Brushes and create brushes
- Distortions of objects and images
- path construction and unique graphic lines.
- Advanced gradient colours.
- Construction of buttons and objects for the Internet
- 3D objects.
- Preparing files for print and the Internet
- Correct working files to connect with other graphical programs that need Illustrator.
- Tips and shortcuts to work correctly and more effectively with the graphic work we perform in order to save time.

Design Training Course Fees

  • Rs. 5,000 per course (inc-all) Indian Students
  • $ 200 per course (inc-all) International Students

Local Mode Of Payment: Cash, Cheque, Demand Draft, Money Order, Please make Cheque/ DD/ Money Order in the name of Webcare Technologies payable at Faridabad only.

International mode Of Payment: Credit card (All), PayPal

Design Training Course Duration, Batches & Timings:

Duration: Webcare’s each course in Design has two options for its professional Design training.

  • Normal Track: 2 hours each day (excluding practice) – 15 Sessions
  • Design Crash Course: 4 hours each day (excluding practice) – 8 Sessions

Please Note:

  • The Design normal track training course syllabus and the Design crash course syllabus remains the same
  • The Design training module is a dedicated in-house Design training programme, conducted by expert trainers into the field of Web Design.

Batch Info:

  • Timings: Convenient from morning 09 AM to evening 09 PM (in 2 / 4 hour slots)
  • Batch size: maximum 8

Mode of Delivery: Classroom based & Online Training Course Classes (By Goto Meeting)

Placements:

In-house: We provide In-house placements to all our candidates who qualify our final exam and interview.

Placement Assistance: All the remaining candidates get placed within a month or two with our channel partners.