Presenter manual web designing (specially for summer interns)

Page 1

Specially For Summer Interns

Effective from: Jan 2012

1 COURSE OUTLINE FOR Web Designing

|

XPERT INFOTECH | Confidential


Contents:

• • • • • • • • • • • • • • • • • • • • • • • • • • • •

The History of the Web The Nuts and Bolts of the Web The Basics of HTTP HTML the Language of the Web Basic HTML Tags Basic HTML Body Tags Coding Style Serving Your Web Page Modifying Text Sizing Text Positioning Text Text Styles Unordered Lists Ordered Lists Definition Lists Special Characters All about Links What is a URL? Linking to another Document Internal Links Email Links Relative and Absolute Links Images Referencing Images Clickable Images Image Placement and Alignment Image Size Image Margins

• • • • • • • • • • • • • • • • • • • • • • • • •

Using Images on Your Page Creating Images Image Formats Limiting Image Size Image Maps Defining an Image Map A Quick Note Advanced Use of the <BODY> tag Using BODY Attributes Coloring Body Content Body Tag Attributes Defining Colors Browser Safe Colors Basic Tables Table Attributes Table Cell Attributes Table Row Attributes Tables Inside of Tables Invisible Spacers Frame-Based Pages Creating Windows Single Window Frames Creating Column Frames Creating Row Frames Creating Complex Frames

2 COURSE OUTLINE FOR Web Designing

|

XPERT INFOTECH | Confidential


Adobe Photoshop • • • • • • • • • • • • • • • • • • • • • • • • • • • •

What is Photoshop? What Does Photoshop Do? The Photoshop Workspace The Menu Bar The Drawing Canvas The Tool Box The Palettes Drawing Things on the Canvas Choosing a Color Defining the Brush The Pencil Tool The Paintbrush Tool The Line Tool The Airbrush Tool The Text Tool The Paint Bucket Tool The Gradient Tool Modifying Things on the Canvas The Eraser Tool The Smudge Tool The Focus Tool The Toning Tools The Eye Dropper Tool The Zoom Tool Advanced Tools Selecting Things The Marquee Tool

• • • • • • • • • • • • • • • • • • • • • • • •

The Lasso Tool The Magic Wand Tool The Move Tool The Crop Tool Channels Masks Layers Fills Cloning Filters Text Manipulation Learn by Example Real World Example Backboard Under painting Rainbow Facade Preparation Rainbow Facade Creation Logo Text Logo Text in 3D Visual Illusion Save as: File Formats Buttons Shadows Beveling Arrows

3 COURSE OUTLINE FOR Web Designing

|

XPERT INFOTECH | Confidential


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

4 COURSE OUTLINE FOR Web Designing

|

XPERT INFOTECH | Confidential


o o o

Reviewing Menu Options & Preferences Comparing the Macintosh & PC Interfaces Previewing in Browsers & Device Central

CREATING & INSERTING IMAGES o Optimizing Images for the Web o Saving GIFs & PNGs in Photoshop 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

5 COURSE OUTLINE FOR Web Designing

|

XPERT INFOTECH | Confidential


o o o o o o o o o o o o

Comparing Margins & Padding Viewing CSS in Various Browsers Creating a Page from a Template Using Paste Special Using Styles to Align Images Creating a Two Column Layout Calculating CSS Spacing Styling Headlines Understanding Font Sizes Using External Style Sheets Viewing Styles 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

6 COURSE OUTLINE FOR Web Designing

|

XPERT INFOTECH | Confidential


o o

Controlling Scrollbars & Borders Targeting Links in Frames

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 Web Designing

|

XPERT INFOTECH | Confidential


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

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)

8 COURSE OUTLINE FOR Web Designing

|

XPERT INFOTECH | Confidential


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.

Our Technology Specialization and Certification Courses:

9 COURSE OUTLINE FOR Web Designing

|

XPERT INFOTECH | Confidential


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.

10 COURSE OUTLINE FOR Web Designing

|

XPERT INFOTECH | Confidential


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

11 COURSE OUTLINE FOR Web Designing

|

XPERT INFOTECH | Confidential


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.