Diploma in Web Designing (DWD) [6 Months]

Course Code: GLOXINIA/DC-DWD/02

 MODULE1: INTRODUCTION

 Introduction to Computers

CPU, motherboard, hard disk, Floppy drive, CD drive, memory, Monitor display card, Keyboard, mouse cables, connectors – USB, COM Multimedia –  Definition (a) Soundcard, scanner, digital camera. (b) Multimedia files formats for text, audio, picture, video etc.

Introduction to Computer Networks

Basics of computer networks, LAN, WAN, Concepts of Internet, services on Internet, WWW, Browser, URL, What is IP address? TCP/ IP basics.

Principles of Design and Composition

Web pages, Hyperlinks, Web server, Planning a website-How to plan a website- importance of good web content, Structuring & site navigation, browser compatibility issues, domains and hosting.

Web Tools

FrontPage, Photoshop, Macromedia flash, Dream weaver, Comparative study of the tools, Web programming platforms, .NET, Java, Dynamic and static websites.

Trends in Website Design

Server side programming/ Client side programming, Desirable site elements, developing a look, testing the design, knowing your audience.

 MODULE 2: HTML (Hyper Text Markup Language)

Introduction

WEB publishing, HTML tag concept, <head><body>, URL, hyperlinks <link> href,<A> tags, Image basics (<img> alt attribute, Hspace, Vspace, Height, Width, Image as buttons)

Presentation and layout

Text alignment, Center, left, right, Multicol, Color settings, bgcolor, Foreground color, Tables (TD, TR, Rowspan, Colspan, cell padding, Table within table).

Lists

Ordered lists, Types of order list, Unordered lists (Types of unordered list, Nested Lists).

Frames

Frameset (Row, Col, % split up of row, col), Frame targeting, Horizontal splitting, Vertical splitting.

HTML form

Input fields (Text box, Password, Button, Drop down list box, Radio button, Check boxes(Submit /reset button), Methods post/get.

Style sheet 

Setting background, Setting background, Repeating background image, Setting background image, Setting text color, Align the text, Text decoration (Font), Setting the font, Size, boldness of font, Border, Style of four order, Different borders on each side, Width setting, Margin, Padding, List, List-item  marker, Positioning, Vertical alignment of an image, Placing an element behind another

 CSS (Cascading Style Sheets)

Introduction

Content and Style, HTML Structure, CSS Attachment to Pages, CSS Main Facilities, Browser Support,  CSS 1 Specification

 CSS 1 Rules

Introduction, Syntax for CSS Properties

 Length, Percentage, Color and URLs

Introduction, Length Values, Percentage values, Color Values, URLs, CSS 1 Specification

 Font Properties

Font Family (Sets typeface), Font Style (Italicises text), Font Variant (Mostly upper case), Font Weight (Sets thickness of type), Font Size (Sets size of text), Font (Shorthand)

Color and Background Properties

Color, Background Color, Background Image, Background Repeat, Background Attachment, Background Position, Background (Sets background images or color)

 Text Properties

Word Spacing, Letter Spacing, Text Decoration (Underlines or otherwise highlights text), Vertical Alignment, Text Transformation, Text Alignment (Sets justification), Text Indentation (Sets distance from left margin), Line Height

Box Properties

Introduction, Margin Setting, Padding Setting, Border Setting, Border Color, Border Style, Setting All Border Properties Together, Width and Height of Images, Float, Clear

Classification Properties

Display, Whitespace, List Style Type, List Style Image, List Style Position, List Style

Structure and Control

Introduction, Classes, Identifiers, Contextual Selectors, Grouping, Universal Selector, Attribute Selectors, Comments, The elements div and span

Pseudo-classes and Pseudo-elements

Introduction, Anchor Pseudo-class, First Line Pseudo-element, First Letter Pseudo-element, Context Pseudo-elements

Linking Style Sheets to HTML

Linking to an External Style Sheet, Embedding a Style Sheet, Importing a Style Sheet, Inlining Style, Mixing Methods

Cascading Order

Layout and Media

Positioning, Media, Printing, Aural Output

Tables

Two Models

MODULE 3: ADOBE PHOTOSHOP

Introduction

Graphics Basics 

Bitmap vs. vector-based graphics, Color/bit depth and image resolution, Graphic file formats, Optimizing web graphics, Vector graphics vs. bitmap graphics, Regular text vs. anti-aliased text, Pixel resize vs. smart resize, Regular graphics vs. interlaced graphics, Lossy compression vs. lossless compression, Dithered graphics vs. non-dithered graphics, Standard selection vs. floating selection, Tolerance, Opacity

 Introduction to Color 

Color modes- RGB, CMYK, grayscale, LAB, bitmap, Hue, saturation, and brightness, Browser safe colors, Shadows, highlights and midtones of an image

 Photoshop Interface, Tools and Options

 Photoshop Environment 

About Photoshop,  The Photoshop Interface, Setting up a new Photoshop document, Saving a new document, The Default palettes, Working with Photoshop palettes, The Photoshop Toolbox and Options bar, Using Guides and Ruler.

Photoshop Image and Color Basics 

Supported import and export image formats, Opening an Image in Photoshop, Creating images In Photoshop, Saving images In Photoshop, Basic image editing, changing image size, Cropping an image, Changing color/bit depth, Optimizing Images using Save for Web, Working with color in Photoshop.

Photoshop Tools

Parts of the Toolbox, Toolbox shortcuts, Tools options, Marquees, Magic wand, Lassos, Move tool, Crop tool, Slice tools, Pencil,  Paintbrush, Eraser tools, History brushes, Gradient, Paint bucket, Burn-dodge-sponge, Blur-sharpen- smudge, Shapes-line-rectangle-polygon, Path selection tool, Pen tool, Type tools, Notes tool-audio annotation, Eyedropper-color sampler- measure tool, Hand-zoom, Quick mask-Screen modes, Jump to ImageReady, Back ground and foreground.

Transforms

Using free transform, Move, Rotate, Scale, Skew, Distort, Perspective, Flip-vertical, horizontal, Invert, Rotate 180º , Rotate 90º CW, Rotate 90º CCW.

 Layers, Channels and Actions

Photoshop Layers:  About layers-fill and adjustment layers, The layer palette, Naming layers, Creating layers, Deleting layers, Viewing layers, Moving layers, Layer opacity, Locking layers, Merging layers, Layer modes and blending options, Image composting  using layers.

Photoshop Channels: About channels, The channel palette, Creating and viewing channels, Modifying channels, Deleting channels,   Alpha channels and masks.

All about Actions: Using the action palette, Recording action, Playing action, Editing action, Loading a saved action.

 Restoring and enhancing images

Restoration of photos: Restoring damaged photos, Photo retouching, Clone tamp-pattern stamp, Healing brush tool, Retouch tool.

Photo enhancement and Color correction: Changing levels, Changing curves, Color balance, Changing brightness and contrast,  Changing hue saturation and brightness, Histogram, Gradient map, Desatuarate, Invert, Color replace, Selective color, Equalize, Threshold,  Channel mixer, Posterize, Changing background using layer composting,

 Text editing and special effects  

 Text editing in PhotoShop

About the type layer, Creating vertical and horizontal types, Point and paragraph text creation, Using horizontal and vertical type mask tools, Using character palette for text editing, Choosing a font, Changing the type color, Choosing a type size, Specifying kerning and tracking, Using fractional character widths, Specifying baseline shift, Applying underline and strikethrough, Text alignment and justification, Specifying anti-aliasing, Creating text warp, Rasterizing type, Converting type to shapes, Adding effects to text.

 Photoshop Special effects and Filters

About special effects, Using filters, Basic filter examples, Artistic filters, Distorting filters, Filter combinations, Plug-in filters.

Web application  and animation     

Adobe ImageReady

About ImageReady, Opening ImageReady, The ImageReady Interface, Image maps, Image slicing, Basic animation.

Photoshop for building web interface

About the Interface.

MODULE 4: ADOBE FLASH

Flash: Environment And Tools

Fundamentals 

Bitmap Vs vector graphics, Image Vs Movie, Conventional Animation Vs Flash animations, Concepts of Frame Rate and Resolution, PAL, NTSC and Film Standards.

Exploring The Flash Interface 

The Flash stage, Stage Settings, Creating a new Flash file, The various import formats, Timeline- Play head/Frames/Key Frames/ Blank frames, Menus, Toolbox and Properties, Keyboard shortcuts and Preferences, Color Swatches and Color Mixer, Rulers, Guides, Grids and Snappings, Common Libraries, Debugger and Output, Movie Explorer.

Working with images

Discussing bitmap and vector graphics, Importing and manipulating images, Converting bitmaps to vector graphics,

Basic drawing and Selections

Applying the Pencil and Eraser tools, Drawing with the Pen tool, Creating custom line styles, Selection Tools -Arrow Tools, and Lasso Tool, Navigation Tools – Hand and Zoom Tools.

Shapes

Basic shapes, Creating rectangles, ovals, and circles, polystar, Creating freeform shapes, Selecting and editing shapes, Using the Selection and Lasso tools, Transforming shapes, Copying, moving, and deleting a shape, Grouping and aligning objects.

Color

Applying color, Using the Paint Bucket and Ink Bottle tools, Using the Eyedropper and Brush tools, Fill Transform Tool, Custom colors and gradients, Creating a custom color swatch, Applying gradients, Creating a custom gradient.

Text

The Text tool, Creating an extending text block, Creating a fixed text block, Text formatting, Changing font styles, Modifying a text block, Aliasing small text, Adjusting the kerning of text, Setting line spacing/margins//indentation, Converting text into, Text utilities, Using the Find and Replace feature, Using the Spell Checker feature, Using the History panel.

Symbols, Animation And Organizing Projects

Layers

Layer basics, Merging and rearranging layers, Deleting a layer, Modifying layers, Renaming a layer, Layers Folders, Locking and hiding layers, Masking a layer, Creating layer folders, Guide layers, Creating a guide layer, Controlling the speed of a motion tween, Arranging and extending frames.

Scenes and Frame Labels 

Creating a Scenes, Organizing Scenes, Creating Frame Labels.

 Symbols and Instances

About Symbols and Instances, Using and managing the Symbol Library, Graphic Symbols, Movie Clip Symbols, Managing the Timeline of Movie Clip with the main Timeline, Button Symbols, Creating and editing a button symbol, Controlling tints, brightness and transparency of instances.

Animation

Animation basics, Timeline, Frames and Key Frames, Creating a basic text animation, Creating and manipulating animations, Creating a basic frame-by-frame animation, Using Onion Skin to modify an animation, Using shape tweening and hinting, Using motion tweening, Using motion tweening with a guide, Mask Animations.

MODULE 5: ADOBE DREAMWEAVER

Getting Started

Setting up the workspace.

Customizing the Workspace

Working with panels, Switching and splitting views, Adjusting tool bars, personalizing preferences, using the property inspector.

HTML Basics

What is HTML? Writing your own HTML code, Where is HTML going?

CSS Basics

What is CSS?, HTML vs. CSS formatting, CSS box model, HTML defaults, Formatting text, Formatting objects, Multiples, classes, and Ids, oh my!

Quick Start

Defining a Dreamweaver site, Selecting a CSS layout, Saving a page, Modifying the page title, Changing headings, Inserting text, Inserting images, Selecting and modifying CSS styles, Adjusting text fonts, colors, and sizes, Previewing a page in Live view, Previewing a page in a browser.

Creating a Page Layout

Modifying an existing CSS layout, Adding a background image to the head, Inserting new DIV components, Modifying the page width and background color, Modifying existing content and formatting, Inserting placeholders, Modifying the footer, Checking browser compatibility.

Working with Cascading Style Sheets

Working with the CSS styles panel, Creating new CSS rules, Creating an interactive menu, Modifying hyperlink behavior, Moving rules to an external style sheet.

Working with Templates

Creating a template from an existing layouts, Inserting editable regions, Updating a template, Using Library items, Using server-side includes.

Working with Text, Lists and Tables

Importing text, Creating headings, Creating lists, Creating text indents, Creating and styling tables, Spell checking web pages, Finding and replacing text.

Working with Images

Inserting an image, Adjusting image position with CSS, Working with Photoshop Smart Objects, Copying and pasting images from Fireworks and Photoshop, Inserting images via drag and drop, Optimizing images with the property inspector.

Working with Navigation

Hyperlinks, Creating an image-based link, Creating an external link, Setting up e-mail links, Targeting page elements, Checking your page.

MODULE 6:  JAVA SCRIPT

 Introduction to Java Script, Advantage of Java Script, Java Script Syntex, Data type – Variable, Array, Operator and Expression Looping Constructor, Function, Dialog Box, Java Script Document Object Model,  What is JavaScript, Java “vs” JavaScript, The Hierarchy of JavaScript, Objects, Window Object, Document Object, Outputting text with JavaScript, Using Arrays to Refer to Forms, Setting the bgColor & fgColor Properties, Location Object, History & Location Objects Examples, Navigator Properties, Data Types, parseInt() & parseFloat(), Variables, Variable concatenation Examples 1 & 2, Expressions & Operators, Clock Example using the Conditional Operator, JavaScript Objects, String Object, JavaScript String Manipulation Examples, HTML String Methods, Math Object, Using PI & Sqrt, Calculating the Square or Square Root, Date Object, Date Object Example, JavaScript Built-in Functions, Three Types of Dialog Boxes in JavaScript.

 Web Hosting on Live Server with FTP

Project & Portfolio