Specially For Summer Interns

     Effective from: Jan 2012




1   COURSE OUTLINE FOR   |   XPERT INFOTECH | Confidential
       Web Designing
Contents:

    The History of the Web                Image Margins
    The Nuts and Bolts of the Web         Using Images on Your Page
    The Basics of HTTP                    Creating Images
    HTML the Language of the Web          Image Formats
    Basic HTML Tags                       Limiting Image Size
    Basic HTML Body Tags                  Image Maps
    Coding Style                          Defining an Image Map
    Serving Your Web Page                 A Quick Note
    Modifying Text                        Advanced Use of the <BODY> tag
    Sizing Text                           Using BODY Attributes
    Positioning Text                      Coloring Body Content
    Text Styles                           Body Tag Attributes
    Unordered Lists                       Defining Colors
    Ordered Lists                         Browser Safe Colors
    Definition Lists                      Basic Tables
    Special Characters                    Table Attributes
    All about Links                       Table Cell Attributes
    What is a URL?                        Table Row Attributes
    Linking to another Document           Tables Inside of Tables
    Internal Links                        Invisible Spacers
    Email Links                           Frame-Based Pages
    Relative and Absolute Links           Creating Windows
    Images                                Single Window Frames
    Referencing Images                    Creating Column Frames
    Clickable Images                      Creating Row Frames
    Image Placement and Alignment         Creating Complex Frames
    Image Size




2        COURSE OUTLINE FOR         |   XPERT INFOTECH | Confidential
            Web Designing
Adobe Photoshop
    What is Photoshop?                    The Marquee Tool
    What Does Photoshop Do?               The Lasso Tool
    The Photoshop Workspace               The Magic Wand Tool
    The Menu Bar                          The Move Tool
    The Drawing Canvas                    The Crop Tool
    The Tool Box                          Channels
    The Palettes                          Masks
    Drawing Things on the Canvas          Layers
    Choosing a Color                      Fills
    Defining the Brush                    Cloning
    The Pencil Tool                       Filters
    The Paintbrush Tool                   Text Manipulation
    The Line Tool                         Learn by Example
    The Airbrush Tool                     Real World Example
    The Text Tool                         Backboard Under painting
    The Paint Bucket Tool                 Rainbow Facade Preparation
    The Gradient Tool                     Rainbow Facade Creation
    Modifying Things on the Canvas        Logo Text
    The Eraser Tool                       Logo Text in 3D
    The Smudge Tool                       Visual Illusion
    The Focus Tool                        Save as: File Formats
    The Toning Tools                      Buttons
    The Eye Dropper Tool                  Shadows
    The Zoom Tool                         Beveling
    Advanced Tools                        Arrows
    Selecting Things




3        COURSE OUTLINE FOR          |   XPERT INFOTECH | Confidential
            Web Designing
Adobe Dreamweaver
    DESIGNING WEBSITES WITH DREAMWEAVER

      o   Comparing Web Design Options
      o   Appreciating CSS Advantages
      o   Reviewing Old School Designs
      o   Creating Dynamic Sites
      o   Reviewing Site Di_erences


    CREATING A NEW WEBSITE

      o   Creating a New Site
      o   Creating a New Page
      o   Adding Images with Alternate Text
      o   Inserting & Formatting Text
      o   Aligning Images with the Property Inspector
      o   Using the Page Properties Dialog Box
      o   Linking to Pages in a Site
      o   Creating an Email Link
      o   Linking to Other Websites
      o   Testing & Targeting Links
      o   Organizing Files & Folders


    CUSTOMIZING THE INTERFACE

      o   Introducing the Workspace
      o   Opening an Existing Site
      o   Working in Code, Design & Split Views
      o   Customizing the Insert Bar
      o   Use the Properties Inspector & the Tag Selector
      o   Reviewing Menu Options & Preferences
      o   Comparing the Macintosh & PC Interfaces
      o   Previewing in Browsers & Device Central


    CREATING & INSERTING IMAGES

      o   Optimizing Images for the Web
      o   Saving GIFs & PNGs in Photoshop




4         COURSE OUTLINE FOR               |      XPERT INFOTECH | Confidential
             Web Designing
o   Inserting GIFs in Dreamweaver
      o   Adjusting Transparency Settings
      o   Saving JPGs for the Web
      o   Edit Images in Dreamweaver & Photoshop
      o   Changing Editor Preferences



    CREATING CSS LAYOUTS

      o   Getting Started with Styles
      o   Creating Tag & Class Styles
      o   Creating Styles to Format Images
      o   Reviewing CSS Code
      o   Previewing Page Styles
      o   Understanding Page Properties
      o   Creating Divs with ID Styles
      o   Adding Images & Lists to Divs
      o   Creating a Series of Divs
      o   Aligning Divs Side by Side
      o   Using the Clear Option in CSS
      o   Adding Borders with CSS
      o   Creating an Image Border
      o   Using Margins for Positioning
      o   Creating Navigation Links
      o   Styling a List for Navigation
      o   Creating a Rollover E_ect in CSS
      o   Duplicating Existing Styles
      o   Changing Page Properties Styles
      o   Reviewing Style Selectors



    DESIGNING WITH CSS

      o   Understanding the Box Model
      o   Comparing Margins & Padding
      o   Viewing CSS in Various Browsers
      o   Creating a Page from a Template
      o   Using Paste Special
      o   Using Styles to Align Images
      o   Creating a Two Column Layout
      o   Calculating CSS Spacing
      o   Styling Headlines




5         COURSE OUTLINE FOR                 |   XPERT INFOTECH | Confidential
             Web Designing
o   Understanding Font Sizes
      o   Using External Style Sheets
      o   Viewing Styles
      o   Reviewing CSS Options



    CREATING LAYOUTS WITH ABSOLUTE POSITIONING

      o   Explaining Absolute Positioning
      o   Comparing Absolute & Centered Positioning
      o   Warnings about Using AP Divs
      o   Using a Tracing Image
      o   Creating a Layout with AP Divs
      o   Naming AP Divs
      o   Nesting AP Divs
      o   Aligning AP Divs
      o   Inserting Images into Divs
      o   Calculating Page Layouts
      o   Re_ning an AP Layout
      o   Setting the Z-Index


    DESIGNING ACCESSIBLE TABLES

      o   Understanding Tables & Accessibility
      o   Using Tables for Tabular Data
      o   Styling a Table
      o   Editing Table Layouts
      o   Adding Style to a Table Using CSS



    CREATING WEBSITES WITH FRAMES

      o   Introducing Frames
      o   Creating a Frameset
      o   Opening Pages into Frames
      o   Controlling Scrollbars & Borders
      o   Targeting Links in Frames




6         COURSE OUTLINE FOR                 |   XPERT INFOTECH | Confidential
             Web Designing
USING BEHAVIORS TO ADD INTERACTIVITY

      o   Viewing Behaviors in a Browser
      o   Introducing the Behaviors Panel
      o   Inserting Rollover Images
      o   Using the Swap Image Behavior
      o   Altering Swap Image Options
      o   Using the Show-Hide Elements Behavior
      o   Using the Open Browser Behavior
      o   Downloading More Behaviors



    SURVIVAL HTML & CSS

      o   Writing HTML: The Fundamentals
      o   Understanding Doctypes
      o   Recognizing HTML Tags
      o   Understanding Links
      o   Working in Split View



    USING & CREATING TEMPLATES

      o   Using CSS Layouts
      o   Editing CSS Layouts
      o   Altering CSS Styles
      o   Creating a Dynamic Web Template
      o   Editing Dynamic Web Templates



    CREATING WEB FORMS

      o   Creating & Inserting a Form
      o   Inserting Text Fields
      o   Adding Drop-Down Lists
      o   Inserting Radio Buttons
      o   Inserting Check Boxes & a Submit Button
      o   Connecting a Form to a Script




7         COURSE OUTLINE FOR             |        XPERT INFOTECH | Confidential
             Web Designing
ADDING FLASH TO YOUR PAGES

            o   Working with Flash
            o   Inserting Flash Video
            o   Creating Flash Buttons & Text
            o   Troubleshooting the Flash Options

          TESTING & PUBLISHING A WEBSITE

            o   Using the Check Page Feature
            o   Testing & Fixing Links
            o   Running Site Reports
            o   Con_guring FTP Settings
            o   Publishing a Site to a Server



          DREAMWEAVER TIPS & TRICKS

            o   Registering a Domain Name
            o   Finding Fonts & Photos
            o   Learning More Online
            o   Final Comments & Credits

FTP

FTP stands for File Transfer Protocol, which is a network protocol used to transfer data from
one computer to another through a network.

FTP is the simplest and secure way to transfer files. The most common use for FTP is to
download files from the Internet to a local computer, or upload files from a local computer to
a remote server.

            o   FTP Introduction
            o   FTP Commands Viewing Files and Directories
            o   FTP Commands Transfer and Rename files
            o   FTP with WS FTP Windows




      8         COURSE OUTLINE FOR              |       XPERT INFOTECH | Confidential
                   Web Designing
Jquery
       What Are Javascript And Jquery
       Document Object Model (DOM) And Jquery
       Programming/Coding Principles
       Separation Of Structure (HTML), Style (CSS) And
       Behaviors (Javscript/Jquery)
       Jquery Wrapper – DOM Elements As Array - $( )
       Selecting And Manipulating Elements
       Jquery API
       Element Properties And Attributes
       Browser Event Model
       Jquery Event Model
       Putting Events To Work
       Animation And Effects Overview
       Show/Hide Elements
       Animate The Display State
       Animation And Queuing
       More On Jquery Utilities
       Extending Jquery, Plugins
       Dynamic Website Design With Jquery
       Design And (3) Plans For Implementing Jquery Functionality
       Drag And Drop Features
       Sorting Elements
       Changing The Size Of Elements
       Making Elements Selectable
       Buttons And Buttonsets
       Sliders, Tabs, Accordians
       Progress Bars
       Forms/Auto Completers
       Date Pickers
       Dialog Boxes

Notes:
       Recommend Practical hours for student except class hours is 90 Hrs.
       We also provide weekend classes for all courses.
       After completion of 75% of course, student will go through Live Project
       Training, Interview Preparation and Recruitment process in Software
       Industry.




   9        COURSE OUTLINE FOR              |       XPERT INFOTECH | Confidential
               Web Designing
Our Technology Specialization and Certification Courses:




10    COURSE OUTLINE FOR     |    XPERT INFOTECH | Confidential
         Web Designing
KEY FEATURES OF XPERT INFOTECH:
         KEY FEATURES OF XPERT INFOTECH:

     Training by Certified and Experienced Trainers.

     Industrial and Corporate Tie-ups for Live projects for student.

     Well equipped Computer Lab, Internet and Book Bank facility.

     Live project based Summer Trainings, Summer Internships and

     summer programs.

     100% placement assistance on every course.

     Interview Preparation and Technical Events.

     On Campus Interviews in every month for the placement of students.

     WI-FI enabled classrooms.              100% Placement
                                               Assistance



                                                             On Campus
                                                             Interviews




           58-61 (Basement), Vashist Park, Pankha Road,
                          New Delhi-46
             Ph.: 011-28526572, 65833100, 9990345891
                      www.xpert-infotech.com
                        Email: info@xpert-infotech.com




11        COURSE OUTLINE FOR          |      XPERT INFOTECH | Confidential
             Web Designing

Presenter manual web designing (specially for summer interns)

  • 1.
    Specially For SummerInterns Effective from: Jan 2012 1 COURSE OUTLINE FOR | XPERT INFOTECH | Confidential Web Designing
  • 2.
    Contents: The History of the Web Image Margins The Nuts and Bolts of the Web Using Images on Your Page The Basics of HTTP Creating Images HTML the Language of the Web Image Formats Basic HTML Tags Limiting Image Size Basic HTML Body Tags Image Maps Coding Style Defining an Image Map Serving Your Web Page A Quick Note Modifying Text Advanced Use of the <BODY> tag Sizing Text Using BODY Attributes Positioning Text Coloring Body Content Text Styles Body Tag Attributes Unordered Lists Defining Colors Ordered Lists Browser Safe Colors Definition Lists Basic Tables Special Characters Table Attributes All about Links Table Cell Attributes What is a URL? Table Row Attributes Linking to another Document Tables Inside of Tables Internal Links Invisible Spacers Email Links Frame-Based Pages Relative and Absolute Links Creating Windows Images Single Window Frames Referencing Images Creating Column Frames Clickable Images Creating Row Frames Image Placement and Alignment Creating Complex Frames Image Size 2 COURSE OUTLINE FOR | XPERT INFOTECH | Confidential Web Designing
  • 3.
    Adobe Photoshop What is Photoshop? The Marquee Tool What Does Photoshop Do? The Lasso Tool The Photoshop Workspace The Magic Wand Tool The Menu Bar The Move Tool The Drawing Canvas The Crop Tool The Tool Box Channels The Palettes Masks Drawing Things on the Canvas Layers Choosing a Color Fills Defining the Brush Cloning The Pencil Tool Filters The Paintbrush Tool Text Manipulation The Line Tool Learn by Example The Airbrush Tool Real World Example The Text Tool Backboard Under painting The Paint Bucket Tool Rainbow Facade Preparation The Gradient Tool Rainbow Facade Creation Modifying Things on the Canvas Logo Text The Eraser Tool Logo Text in 3D The Smudge Tool Visual Illusion The Focus Tool Save as: File Formats The Toning Tools Buttons The Eye Dropper Tool Shadows The Zoom Tool Beveling Advanced Tools Arrows Selecting Things 3 COURSE OUTLINE FOR | XPERT INFOTECH | Confidential Web Designing
  • 4.
    Adobe Dreamweaver DESIGNING WEBSITES WITH DREAMWEAVER o Comparing Web Design Options o Appreciating CSS Advantages o Reviewing Old School Designs o Creating Dynamic Sites o Reviewing Site Di_erences CREATING A NEW WEBSITE o Creating a New Site o Creating a New Page o Adding Images with Alternate Text o Inserting & Formatting Text o Aligning Images with the Property Inspector o Using the Page Properties Dialog Box o Linking to Pages in a Site o Creating an Email Link o Linking to Other Websites o Testing & Targeting Links o Organizing Files & Folders CUSTOMIZING THE INTERFACE o Introducing the Workspace o Opening an Existing Site o Working in Code, Design & Split Views o Customizing the Insert Bar o Use the Properties Inspector & the Tag Selector o Reviewing Menu Options & Preferences o Comparing the Macintosh & PC Interfaces o Previewing in Browsers & Device Central CREATING & INSERTING IMAGES o Optimizing Images for the Web o Saving GIFs & PNGs in Photoshop 4 COURSE OUTLINE FOR | XPERT INFOTECH | Confidential Web Designing
  • 5.
    o Inserting GIFs in Dreamweaver o Adjusting Transparency Settings o Saving JPGs for the Web o Edit Images in Dreamweaver & Photoshop o Changing Editor Preferences CREATING CSS LAYOUTS o Getting Started with Styles o Creating Tag & Class Styles o Creating Styles to Format Images o Reviewing CSS Code o Previewing Page Styles o Understanding Page Properties o Creating Divs with ID Styles o Adding Images & Lists to Divs o Creating a Series of Divs o Aligning Divs Side by Side o Using the Clear Option in CSS o Adding Borders with CSS o Creating an Image Border o Using Margins for Positioning o Creating Navigation Links o Styling a List for Navigation o Creating a Rollover E_ect in CSS o Duplicating Existing Styles o Changing Page Properties Styles o Reviewing Style Selectors DESIGNING WITH CSS o Understanding the Box Model o Comparing Margins & Padding o Viewing CSS in Various Browsers o Creating a Page from a Template o Using Paste Special o Using Styles to Align Images o Creating a Two Column Layout o Calculating CSS Spacing o Styling Headlines 5 COURSE OUTLINE FOR | XPERT INFOTECH | Confidential Web Designing
  • 6.
    o Understanding Font Sizes o Using External Style Sheets o Viewing Styles o Reviewing CSS Options CREATING LAYOUTS WITH ABSOLUTE POSITIONING o Explaining Absolute Positioning o Comparing Absolute & Centered Positioning o Warnings about Using AP Divs o Using a Tracing Image o Creating a Layout with AP Divs o Naming AP Divs o Nesting AP Divs o Aligning AP Divs o Inserting Images into Divs o Calculating Page Layouts o Re_ning an AP Layout o Setting the Z-Index DESIGNING ACCESSIBLE TABLES o Understanding Tables & Accessibility o Using Tables for Tabular Data o Styling a Table o Editing Table Layouts o Adding Style to a Table Using CSS CREATING WEBSITES WITH FRAMES o Introducing Frames o Creating a Frameset o Opening Pages into Frames o Controlling Scrollbars & Borders o Targeting Links in Frames 6 COURSE OUTLINE FOR | XPERT INFOTECH | Confidential Web Designing
  • 7.
    USING BEHAVIORS TOADD INTERACTIVITY o Viewing Behaviors in a Browser o Introducing the Behaviors Panel o Inserting Rollover Images o Using the Swap Image Behavior o Altering Swap Image Options o Using the Show-Hide Elements Behavior o Using the Open Browser Behavior o Downloading More Behaviors SURVIVAL HTML & CSS o Writing HTML: The Fundamentals o Understanding Doctypes o Recognizing HTML Tags o Understanding Links o Working in Split View USING & CREATING TEMPLATES o Using CSS Layouts o Editing CSS Layouts o Altering CSS Styles o Creating a Dynamic Web Template o Editing Dynamic Web Templates CREATING WEB FORMS o Creating & Inserting a Form o Inserting Text Fields o Adding Drop-Down Lists o Inserting Radio Buttons o Inserting Check Boxes & a Submit Button o Connecting a Form to a Script 7 COURSE OUTLINE FOR | XPERT INFOTECH | Confidential Web Designing
  • 8.
    ADDING FLASH TOYOUR PAGES o Working with Flash o Inserting Flash Video o Creating Flash Buttons & Text o Troubleshooting the Flash Options TESTING & PUBLISHING A WEBSITE o Using the Check Page Feature o Testing & Fixing Links o Running Site Reports o Con_guring FTP Settings o Publishing a Site to a Server DREAMWEAVER TIPS & TRICKS o Registering a Domain Name o Finding Fonts & Photos o Learning More Online o Final Comments & Credits FTP FTP stands for File Transfer Protocol, which is a network protocol used to transfer data from one computer to another through a network. FTP is the simplest and secure way to transfer files. The most common use for FTP is to download files from the Internet to a local computer, or upload files from a local computer to a remote server. o FTP Introduction o FTP Commands Viewing Files and Directories o FTP Commands Transfer and Rename files o FTP with WS FTP Windows 8 COURSE OUTLINE FOR | XPERT INFOTECH | Confidential Web Designing
  • 9.
    Jquery What Are Javascript And Jquery Document Object Model (DOM) And Jquery Programming/Coding Principles Separation Of Structure (HTML), Style (CSS) And Behaviors (Javscript/Jquery) Jquery Wrapper – DOM Elements As Array - $( ) Selecting And Manipulating Elements Jquery API Element Properties And Attributes Browser Event Model Jquery Event Model Putting Events To Work Animation And Effects Overview Show/Hide Elements Animate The Display State Animation And Queuing More On Jquery Utilities Extending Jquery, Plugins Dynamic Website Design With Jquery Design And (3) Plans For Implementing Jquery Functionality Drag And Drop Features Sorting Elements Changing The Size Of Elements Making Elements Selectable Buttons And Buttonsets Sliders, Tabs, Accordians Progress Bars Forms/Auto Completers Date Pickers Dialog Boxes Notes: Recommend Practical hours for student except class hours is 90 Hrs. We also provide weekend classes for all courses. After completion of 75% of course, student will go through Live Project Training, Interview Preparation and Recruitment process in Software Industry. 9 COURSE OUTLINE FOR | XPERT INFOTECH | Confidential Web Designing
  • 10.
    Our Technology Specializationand Certification Courses: 10 COURSE OUTLINE FOR | XPERT INFOTECH | Confidential Web Designing
  • 11.
    KEY FEATURES OFXPERT INFOTECH: KEY FEATURES OF XPERT INFOTECH: Training by Certified and Experienced Trainers. Industrial and Corporate Tie-ups for Live projects for student. Well equipped Computer Lab, Internet and Book Bank facility. Live project based Summer Trainings, Summer Internships and summer programs. 100% placement assistance on every course. Interview Preparation and Technical Events. On Campus Interviews in every month for the placement of students. WI-FI enabled classrooms. 100% Placement Assistance On Campus Interviews 58-61 (Basement), Vashist Park, Pankha Road, New Delhi-46 Ph.: 011-28526572, 65833100, 9990345891 www.xpert-infotech.com Email: info@xpert-infotech.com 11 COURSE OUTLINE FOR | XPERT INFOTECH | Confidential Web Designing