HTML WEBDESIGN MODULE1: INTRODUCTION

Size: px

Start display at page:

Download "HTML WEBDESIGN MODULE1: INTRODUCTION"

Garey Davidson
6 years ago
Views:

HTML WEBDESIGN MODULE1: INTRODUCTION 1 Introduction to computer networks i. Basics of computer networks, LAN, WAN Concepts of Internet, services on Internet WWW, Browser, URL i What is IP address?

i Structuring & site navigation, browser compatibility issues, domains and hosting 3 Web tools I. FrontPage, Photoshop, Macromedia flash, Dream weaver II. III. IV. Comparative study of the tools.

1 HTML WEBDESIGN MODULE1: INTRODUCTION 1 Introduction to computer networks i. Basics of computer networks, LAN, WAN Concepts of Internet, services on Internet WWW, Browser, URL i What is IP address? TCP/ IP basics 2 Principles of design and composition i. Web pages, Hyperlinks, Web server. Planning a website-how to plan a website- importance of good web content. i Structuring & site navigation, browser compatibility issues, domains and hosting 3 Web tools I. FrontPage, Photoshop, Macromedia flash, Dream weaver II. III. IV. Comparative study of the tools. Web programming platforms,.net, Java Dynamic and static websites 4 Trends in website design i. Server side programming/ Client side programming i iv. Desirable site elements Developing look Testing the design v. Knowing your audience

2 MODULE2: HTML/FRONTPAGE 1 Introduction a. WEB publishing b. HTML tag concept c. <head><body> d. URL, hyperlinks <link> href,<a> tags e. Image basics, i. <img> alt attribute Hspace, Vspace i Height, Width iv. Image as buttons 2 Presentation and layout f. Text alignment i. Center, left, right Multicol g. Color settings i. bgcolor Foreground color h. Tables i.td TR i Rowspan iv. Colspan v. cell padding Table within table 3 Lists a. Ordered lists Types of order list b. Unordered lists i. Types of unordered list c. Nested Lists

3 4 Frames a. Frameset i. Row Col i % split up of row, col b. Frame targeting c. Horizontal splitting d. Vertical splitting 5 HTML form a. Input fields 1 Text box 2 Password 3 Button 4 Drop down list box v. Radio button 5 Check boxes b. Submit /reset button c. Methods post/get 6 Style sheet a. Setting background i. Setting background Repeating background image i Setting background image b. Setting text color c. Font iv. Align the text v. Text decoration v Setting the font v Size, boldness of font d. Border i. Style of four order Different borders on each side i Width setting

4 e. Margin f. Padding g. List h. List-item marker i. Positioning iv. Vertical alignment of an image v. Placing an element behind another Fundamentals 1 Graphics Basics MODULE3: PHOTOSHOP i. Bitmap vs. vector-based graphics i iv. Color/bit depth and image resolution Graphic file formats Optimizing web graphics v. Vector graphics vs. bitmap graphics v vi ix. Regular text vs. anti-aliased text Pixel resize vs. smart resize Regular graphics vs. interlaced graphics Lossy compression vs. lossless compression x. Dithered graphics vs. non-dithered graphics xi. x Standard selection vs. floating selection Tolerance

5 xi Opacity 2 Introduction to Color i. Color modes- RGB, CMYK, grayscale, LAB, bitmap Hue, saturation, and brightness i Browser safe colors Interface, Tools and Options a. Shadows, highlights and midtones of an image PhotoShop 3 Photoshop Environment i. About Photoshop i iv. The Photoshop Interface Setting up a new Photoshop document Saving a new document v. The Default palettes v vi Working with Photoshop palettes The Photoshop Toolbox and Options bar Using Guides and Ruler 4 Photoshop Image and Color Basics i. Supported import and export image formats Opening an Image in Photoshop i Creating images In Photoshop iv. Saving images In Photoshop v. Basic image editing Changing image size v Cropping an image vi Changing color/bit depth ix. Optimizing Images using Save for Web x. Working with color in Photoshop

6 5 Photoshop Tools i. Parts of the Toolbox Toolbox shortcuts i iv. Tools options Marquees v. Magic wand v vi ix. Lassos Move tool Crop tool Slice tools x. Pencil xi. x xi xiv. xv. x xv xvi xix. xx. xxi. xx xxi 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 xxiv. Hand-zoom

7 xxv. xx xxv Quick mask-screen modes Jump to Image Ready Back ground and foreground. 6 Transforms i. Using free transform i iv. Move Rotate Scale v. Skew v vi ix. Distort Perspective Flip-vertical, horizontal Invert x. Rotate 180º xi. x 7 Photoshop Layers Rotate 90º CW Rotate 90º CCW Layers, Channels and Actions i. About layers-fill and adjustment layers The layer palette i Naming layers iv. Creating layers v. Deleting layers Viewing layers v Moving layers vi Layer opacity ix. Locking layers x. Merging layers xi. Layer modes and blending options x Image composting using layers

8 8 Photoshop Channels 9 All about Actions i. About channels The channel palette i Creating and viewing channels iv. Modifying channels v. Deleting channels Alpha channels and masks i. Using the action palette Recording action i Playing action iv. Editing action v. Loading a saved action Restoring and enhancing images 10 Restoration of photos i. Restoring damaged photos Photo retouching i Clone tamp-pattern stamp iv. Healing brush tool v. Retouch tool 11 Photo enhancement and Color correction i. Changing levels Changing curves i Color balance iv. Changing brightness and contrast v. Changing hue saturation and brightness v vi ix. Histogram Gradient map Desatuarate Invert x. Color replace

9 xi. x xi Selective color Equalize Threshold xiv. Channel mixer xv. Posterize 12 Text editing in Photoshop x Changing background using layer composting Text editing and special effects i. About the type layer i iv. Creating vertical and horizontal types Point and paragraph text creation Using horizontal and vertical type mask tools v. Using character palette for text editing v vi ix. Choosing a font Changing the type color Choosing a type size Specifying kerning and tracking x. Using fractional character widths xi. x xi xiv. Specifying baseline shift Applying underline and strikethrough Text alignment and justification Specifying anti-aliasing xv. Creating text warp x Rasterizing type xv Converting type to shapes xvi Adding effects to text 13 Photoshop Special effects and Filters i ii About special effects Using filters

10 iii iv v vi vii Basic filter examples Artistic filters Distorting filters Filter combinations Plug-in filters Web application and animation 14 Adobe ImageReady i ii iii iv v vi About ImageReady Opening ImageReady The ImageReady Interface Image maps Image slicing Basic animation 15 Photoshop for building web interface i. About the Interface Module 4: Flash 1. Fundamentals i. Bitmap vs vector graphics Image vs movie i Conventional animation Vs Flash animations iv. Concepts of frame rate and resolution v..pal, NTSC and film standards

11 2. Exploring the Flash Interface i. The Flash stage Stage settings i Creating a new Flash file iv. The various import formats v. Timeline- play head/frames/key frames/ blank frames Menus, Toolbox and properties v Keyboard shortcuts and preferences vi Color swatches and color mixer ix. Rulers, guides, grids and snapping x. Common libraries xi. Debugger and output x Movie explorer 2 Working with images a. Discussing bitmap and vector graphics b. Importing and manipulating images c. Converting bitmaps to vector graphics 4 Basic drawing and Selections i. Applying the pencil and eraser tools Drawing with the pen tool i Creating custom line styles iv. Selection tools -arrow tools, and lasso tool v. Navigation tools - hand and zoom tools 5 Shapes i. Basic shapes Creating rectangles, ovals, and circles i Creating freeform shapes iv. Selecting and editing shapes v. Using the Selection and Lasso tools Transforming shapes v Copying, moving, and deleting a shape vi Grouping and aligning objects

12 6 Color 7 Text i.applying color Using the paint bucket and ink bottle tools iusing the eyedropper and brush tools iv.custom colors and gradients v.creating a custom color swatch Applying gradients vcreating a custom gradient [fill transform tool] i.the text tool Creating an extending text block icreating a fixed text block iv.text formatting v. Changing font styles Modifying a text block v Aliasing small text vi Adjusting the kerning of text ix. Setting linspacing/margins//indentation x. Converting text into xi. Text utilities x Using the Find and Replace feature xi Using the Spell Checker feature xiv. Using the History panel Organizing large projects, symbols and animation 8 Introduction to Layers i. Layer basics Merging and rearranging layers i Deleting a layer iv. Modifying layers v. Renaming a layer Layers folders v Locking and hiding layers vi Masking a layer ix. Creating layer folders x. Guide layers xi. Creating a guide layer

13 x tween Controlling the speed of a motion xi Arranging and extending frames 9 Scenes and Frame labels i. Creating a scenes i Organizing scenes Creating frame labels 10 Symbols and instances i. About symbols and Instances Using and managing the symbol library i iv. Graphic symbols Movie clip symbols v. Button symbols Managing the timeline of movie clip with the main timeline v Creating and editing a button symbol vi Controlling tints, brightness and transparency of instances 11 Animation i. Animation basics Timeline, frames and key frames i Creating a basic text animation iv. Creating and manipulating animations

14 guide x. Interactivity v. Creating a basic frame-by-frame animation Using onion skin to modify an animation v Using shape tweening and hinting vi Using motion tweening ix. Using motion tweening with a Mask animations Action Scripting and 12 Introduction to ActionScript i. Understanding object oriented programming When to use ActionScript i Introducing the Actions Panel iv. Working in Normal mode v. Working in Expert mode Using the Reference panel v Understanding ActionScript syntax 13 Creating ActionScript movies i. About Flash symbol types Adding an action to your script i Adding an action to a keyframe iv. Adding an action to an object v. Adding an action to a button Planning your ActionScript movie v Tips for creating code vi Dissecting an ActionScript

15 14 Controlling the timeline with ActionScript i. Starting and stopping the movie Navigating to frames and scenes i Creating an interactive animation iv. URLs Navigating to v. Opening a URL in a different browser window 15 Controlling movie content with ActionScript i. Creating presentations Working with Flash levels i Using the LoadMovie and UnloadMovie action 16 Creating ActionScript loops i. About loops Looping between frames i Creating a for loop iv. Creating a while loop v. Creating a do while loop 17 Working with variables and arrays i. About variables and arrays Understanding variable data types i

16 Variable and array naming conventions iv. Declaring a variable v. Creating an array Working with arrays v Getting data from an array 18 Modifying an object with ActionScript i. Creating a movie clip Creating movie clip instances i property action iv. Changing an Using the set object's properties v. Getting an object's properties 19 Using ActionScript with text i. Creating input text blocks Creating dynamic text blocks i Loading text from an external document iv. Creating rich formatted text 20 Flash UI components

17 i. Macromedia Flash UI components PushButton component i CheckBox component iv. RadioButton component v. MessageBox component ComboBox component v vi ix. ListBox component Linking a ComboBox with a ListBox Creating a master-detail view x. ScrollBar component xi. Changing the look and feel of components Adding Media and publishing a Flash movie 21 Working with sound i.event vs. streaming sounds Importing and placing sounds iputting a sound in the over state of a button 22 Embedding video i.importing video files Modifying and controlling videos 23 Testing and publishing a Flash movie i.selecting your publishing Settings Previewing and publishing files ievaluating download performance iv.optimization factors v.exporting and publishing movies

18 Module 5: Dreamweaver 1 Getting Started i. Introducing Dreamweaver Learning the interface i Defining a local site iv. Creating a website 2 Adding content to a site i. Adding content Controlling document structure i Making lists iv. Adding horizontal rules v. Adding special characters 3 Formatting with cascading style sheets i. Formatting text Introducing cascading style sheets i Creating styles iv. Exporting CSS rule definitions v. Creating class styles Attaching external style sheets v Creating advanced styles vi Creating a new external style sheet ix. Displaying styles x. Understanding cascading order and inheritance of styles xi. Creating internal styles with the property inspector 4 Working with Graphics i. Using graphics on web pages Placing graphics on the page i Modifying image properties iv. Editing images

19 v. Doing roundtrip editing with fireworks Customizing the Insert bar v Adding Flash content vi Adding Flash video 5 Navigating your site i. Understanding site navigation Linking to files in your site i Linking to sites

Table of Contents. Preface...iii. INTRODUCTION 1. Introduction to M ultimedia and Web Design 1. ILLUSTRATOR CS6 1. Introducing Illustrator CS6 17

Table of Contents. Preface...iii. INTRODUCTION 1. Introduction to M ultimedia and Web Design 1. ILLUSTRATOR CS6 1. Introducing Illustrator CS6 17 Table of Contents Preface...........iii INTRODUCTION 1. Introduction to M ultimedia and Web Design 1 Introduction 2 Exploring the Applications of Multimedia 2 Understanding Web Design 3 Exploring the Scope