MCA       (DISTANCE MODE)           DMC 1623       WEB GRAPHICS       COURSE MATERIALCentre for Distance Education      An...
Author                                            Mr. T. R a ghuv eer a                                            Mr. T. ...
ACKNOWLEDGEMENTS       The author has drawn inputs from several sources for the preparation of this course material, to me...
DMC 1623 WEB GRAPHICS1.   INTRODUCTION     HTML coding - Basic web graphics - Web page design and site building - Image ma...
CONTENTS                                          UNIT - I                      INTRODUCTION TO WEB GRAPHICS1.1   INTRODUC...
2.3    IMAGE BASICS                                     472.4    KNOWING THE PHOTOSHOP INTERFACE                  512.5   ...
UNIT - IV                                       MULTIMEDIA4.1    INTRODUCTION                                             ...
5.3   SYMBOLS AND INSTANCES                                       179      5.3.1 Creating Symbols                         ...
WEB GRAPHICS                                                                                               NOTES          ...
DMC 1623           interpreters for the HTML code. The Internet Explorer 6 has support for HTML 4+extras,  NOTES    XHTML ...
WEB GRAPHICS      For ex: <font color=”red”> hello world</font> Here the font tag has the attribute‘color’ whose value is ...
DMC 1623           Formatting using Lists  NOTES           Lists can be either unoredered ,ordered or defintion.          ...
WEB GRAPHICS1.3.2 Creating Hyperlinks                                                                                     ...
DMC 1623           Sample program below to jump to a section within the same page.  NOTES             Jumpwithin.html     ...
WEB GRAPHICS1.3.3 Html Tables                                                                                             ...
DMC 1623  NOTES           1.3.4 HTML Frames                Frames are used to display more than one web page in the same b...
WEB GRAPHICS                                                                                                      NOTES1.3...
DMC 1623  NOTES           1.3.6 Embedding Images in HTML                As we are dealing with graphics for web it is very...
WEB GRAPHICS   <html>   <body>                                                                                     NOTES  ...
DMC 1623               There are browser safe colors which are 216 standard colors that are displayed  NOTES    exactly as...
WEB GRAPHICSExample of using style sheet is as follows.                                                                   ...
DMC 1623           Class selector: If you wish to apply different styles to the same type of HTML element  NOTES    then c...
WEB GRAPHICS                                                                                             NOTES     The fol...
DMC 1623               attribute              Value                          description  NOTES                       colo...
WEB GRAPHICSgraphics uses mathematical representations of images. Raster graphics is resolutiondependent while vector grap...
DMC 1623           Let us understand the basics through the following topics  NOTES                 >Graphics file formats...
WEB GRAPHICSGIF Animation: The GIF animation format lets you store multiple images and timinginformation about the images ...
DMC 1623           the lower the image quality. The most common filename extensions for files employing  NOTES    JPEG com...
WEB GRAPHICS    •   As a general rule, “simple” content should be saved as GIF files and “photographic”        as JPG file...
DMC 1623                >SVG images can be printed with high quality at any resolution  NOTES         >SVG images are zoom...
WEB GRAPHICS        With an interlaced GIF however, the whole thing loads gradually, a blurry image        that becomes sh...
DMC 1623           •   Edit images and create complete Web pages.  NOTES           •   Full array of imaging and painting ...
WEB GRAPHICSWeb graphics editors                                                                                          ...
DMC 1623                Some of the principles from one school of thought are Proximity, alignment, repetition,  NOTES    ...
WEB GRAPHICS     Some authors prefer to stay on the cutting edge of what is happening in the htmlworld. These designers in...
DMC 1623  NOTES           Bandwidth concerns           A good rule of thumb is to create pages that will never take longer...
WEB GRAPHICSinformation. Break text into reasonable segments that make for easier on-screen reading.Use contrasting colors...
DMC 1623                One design rule to note is that the logo should remain in the same place on all pages  NOTES    fo...
WEB GRAPHICSKeep a flat hierarchy: Don’t make users navigate through endless layers of pages to findthe piece of informati...
DMC 1623           Design for screen  NOTES                A computer screen is landscape oriented. Your page design shoul...
WEB GRAPHICScreating the information structure of your site. This becomes sort of the blue prints for theinformation as op...
DMC 1623  NOTES           • The Hierarchical Structure – This is probably the most common information design.           It...
WEB GRAPHICS• Catalog Structure – The catalog structure accommodates electronic shopping. Theuser can browse or search for...
DMC 1623                 >use hypertext to connect facts, relationships, concepts – provide contextual linking  NOTES    t...
WEB GRAPHICS    This is a very widely used page layout - logo on top, navigation in the left column, andmain content in th...
DMC 1623           Template – 5  NOTES                In this design style, the navigation is placed directly underneath t...
WEB GRAPHICS1.6 IMAGE MAPS                                                                                              NO...
DMC 1623           For a polygon, you map each coordinate separately. The Web browser automatically  NOTES    connects the...
WEB GRAPHICSWhat have you understood?                                                                                     ...
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Dmc 1623 web graphics
Upcoming SlideShare
Loading in …5
×

Dmc 1623 web graphics

5,192 views

Published on

1 Comment
4 Likes
Statistics
Notes
  • how can i download this file pls help me
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,192
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
64
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Dmc 1623 web graphics

  1. 1. MCA (DISTANCE MODE) DMC 1623 WEB GRAPHICS COURSE MATERIALCentre for Distance Education Anna University Chennai Chennai – 600 025
  2. 2. Author Mr. T. R a ghuv eer a Mr. T. Ra ghuveer eera Lecturer Department of Computer Science and Engineering Anna University Chennai Chennai - 600 025 Reviewer Mr s. I. Mala Mrs Lecturer Department of Computer Science and Engineering Anna University Chennai Chennai - 600 025 Editorial Board Dr.T.V.Geetha Dr.T.V.Geetha .T.V Dr.H.P eer u Mohamed Dr.H.Peeru .H.Peer Professor Professor Department of Computer Science and Engineering Department of Management Studies Anna University Chennai Anna University Chennai Chennai - 600 025 Chennai - 600 025 Dr.C. Chella ppan Dr.C Chellappan .C. Dr.A.K annan Dr.A.K .A.Kannan Professor Professor Department of Computer Science and Engineering Department of Computer Science and Engineering Anna University Chennai Anna University Chennai Chennai - 600 025 Chennai - 600 025Copyrights Reserved(For Private Circulation only)
  3. 3. ACKNOWLEDGEMENTS The author has drawn inputs from several sources for the preparation of this course material, to meet therequirements of the syllabus. The author gratefully acknowledges the following resources 1. Joel Sklar, “Principles of Web Design”, Course Technology, 1st edition, March 2000. 2. Dietel and Dietel, “Internet and World Wide Web How to Program”, Prentice Hall, 3 edition, 2003. 3. Edie Gose, “Introduction to PhotoShop 6” Springer, 2002. 4. Richard Schrand, “Photoshop 6 Visual Jumpstart”, Adobe Press 2000. 5. James L.Mohles, “Flash 5.0 Graphics, Animation & Interaction”, Macromedia 2000. 6. Ramesh Bangia, “Multimedia and Web Technologies”, FireWall Media Press, 2 edition, 2007. 7. www.w3schools.com Mr.T.Raghuveera Author
  4. 4. DMC 1623 WEB GRAPHICS1. INTRODUCTION HTML coding - Basic web graphics - Web page design and site building - Image maps - Adding multimediato the web.2. PAINT SHOP PRO/PHOTOSHOP Introduction - Image Basics - File Formats - GIF - JPEG - Color Palette - Layers - Creating new Images- Brushes - Grids - Scaling Images - Moving and Merging Layers - Tool Palette - Screen capturing - Grey styling- Using style Palette - Animation.3. IMAGE HANDLING Scanning Images - Adding Text to the images - Designing icons - Creating background images - Colormodels - Color depths - Color calibration - Creating gradients - Oil paint effect.4. MULTIMEDIA Creating clippings - Animations with sound effects - Adding audio or Video - Windows Media PlayerActiveX Control - Agent control - Embedding VRML in a web page - Real Player ActiveX control.5. APPLICATIONS Creating web site with a particular theme using all the utilities - Graphics - Animations and Interaction.TEXT BOOKS1. Richard Schrand, “Photoshop 6 Visual Jumpstrat”, Adobe Press, 2000. (Unit 1,2 & 3)2. James L. Mohles, “Flash 5.0 Graphics, Animation & Interaction”, Macromedia 2000. (Unit 4 & 5)REFERENCES1. Deitel, “Internet and World Wide Web How to program”, Prentice Hall 2003.2. Robert Reinhardt, Jon Warren Lentz , “Flash 5 Bible”, Hungry Minds Inc, 2001.
  5. 5. CONTENTS UNIT - I INTRODUCTION TO WEB GRAPHICS1.1 INTRODUCTION 11.2 LEARNING OBJECTIVES 11.3 HTML CODING 1 1.3.1 Text Formatting Using Html 2 1.3.2 Creating Hyperlinks 5 1.3.3 Html Tables 7 1.3.4 HTML Frames 8 1.3.5 HTML Forms 9 1.3.6 Embedding Images in HTML 10 1.3.7 Cascaded Style Sheets 121.4 BASICS OF WEB GRAPHICS 16 1.4.1 Graphics file formats - GIF, JPEG, PNG, SVG, and CGM 18 1.4.2 Optimizing web graphics 22 1.4.3 Web graphics software 231.5 WEB PAGE DESIGN AND SITE BUILDING 25 1.5.1 Web site design principles 25 1.5.2 Planning the site 32 1.5.3 Planning the site navigation 35 1.5.4 Creating page templates 361.6 IMAGE MAPS 391.7 ADDING MULTIMEDIA TO A WEB SITE 41 1.7.1 Text for the web 41 1.7.2 Images for the Web 42 1.7.3 Sound for the web 42 1.7.4 Animation for the web 43 UNIT – II INTRODUCTION TO PHOTOSHOP2.1 INTRODUCTION 472.2 LEARNING OBJECTIVES 47 i
  6. 6. 2.3 IMAGE BASICS 472.4 KNOWING THE PHOTOSHOP INTERFACE 512.5 COLOR PALETTE 572.6 USING LAYERS 592.7 CREATING NEW IMAGES 672.8 BRUSHES 682.9 GRIDS AND GUIDES 752.10 SCALING OR RESIZING IMAGES 782.11 SCREEN CAPTURING 802.12 STYLES PALETTE 802.13 CREATING ANIMATION USING PHOTOSHOP AND IMAGEREADY 82 UNIT - III IMAGE HANDLIING IN PHOTOSHOP3.1 INTRODUCTION 913.2 LEARNING OBJECTIVES 913.3 GRADIENT TOOL 913.4 ADDING TEXT TO IMAGES 943.5 CREATING BACKGROUND IMAGES 1003.6 COLOR MODELS 1033.7 COLOR CALIBRATION 108 3.7.1 To Display the Histogram for an Image 109 3.7.2. Levels 110 3.7.3 Auto Levels 111 3.7.4 Curves 111 3.7.5 Color Balance 113 3.7.6 Brightness and Contrast 114 3.7.7 Hue and Saturation 114 3.7.8 Desaturate and Replace Color 116 3.7.9 Channel mixer 117 3.7.10 Variations 1183.8 OIL PAINT EFFECT 1193.9 DESIGNING ICONS 122 ii
  7. 7. UNIT - IV MULTIMEDIA4.1 INTRODUCTION 1294.2 LEARNING OBJECTIVES 1294.3 MEDIA EDITING SOFTWARE AND FILE FORMATS 129 4.3.1 Audio Editing 129 4.3.2 Video Editing 130 4.3.3 Sound Formats for Web 130 4.3.4 Video Formats for Web 131 4.3.5 Web Animation Software 132 4.3.6 Web Authoring Tools 133 4.3.7 Windows Media Formats 134 4.3.8 Audio and Video Players 1354.4 CREATING CLIPPINGS 136 4.4.1 Types of Web Animation 136 4.4.2 Flash Work Environment 137 4.4.3 Creating Frame by Frame based Animations 1414.5 ADDING SOUND EFFECTS TO YOUR ANIMATION 1464.6 ADDING AUDIO OR VIDEO TO A WEB PAGE 147 4.6.1 Adding Background Sounds with the ‘Bgsound’ Element 148 4.6.2 Adding Video with the IMG Element’s Dynsrc Property 150 4.6.3 Using Embed Element to Add Audio 151 4.6.4 Using Embed Element to Add Video 1524.7 USING WINDOWS MEDIA PLAYER ACTIVEX CONTROL 1534.8 MICROSOFT AGENT CONTROL 156 4.8.1 Demonstration Of Microsoft Agent And The Lernout And Hauspie Truvoice Text-To-Speech (Tts) Engine 156 4.8.2 Microsoft Voice Recognition Engine and Microsoft Agent 1644.9 EMBEDDING REALPLAYER ACTIVEX CONTROL 1714.10 EMBEDDING VRML INTO A WEB PAGE 173 UNIT - V CREATING A WEBSITE WITH GRAPHICS ANIMATION AND INTERACTIVITY5.1 INTRODUCTION 1795.2 LEARNING OBJECTIVES 179 iii
  8. 8. 5.3 SYMBOLS AND INSTANCES 179 5.3.1 Creating Symbols 180 5.3.2 Converting animation on the Stage into a movie clip 181 5.3.3 To Create a New Instance of a Symbol 181 5.3.4 To Use Buttons in Flash 1825.4 CREATING INTERACTIVE MOVIES 184 5.4.1 Using the Action’s Panel 185 5.4.2 Assigning Actions to Objects 187 5.4.3 Using basic Actions For Navigation and Interaction 188 5.4.4 Basic and Frequently used Action Script Commands 1895.5 CREATING A FLASH BASIC PRELOADER 193 5.5.1 Adding Preloader to an Existing Movie 1965.6 CREATING A SIMPLE FLASH WEB SITE 198 5.6.1 Example - 1 198 5.6.2 Add Sound to Your Button 206 5.6.3 Creating a Simple Flash Web Site – Example 2 2075.7 CREATING SIMPLE ANIMATIONS USING HTML/DHTML/JAVASCRIPT 216 iv
  9. 9. WEB GRAPHICS NOTES UNIT - I INTRODUCTION TO WEB GRAPHICS1.1 INTRODUCTION Web graphics is all about creating graphics for the web. Good web sites require aseamless integration of text, graphics and other media elements. Graphics capabilities of aweb site enhance the look and feel, and also is a visual treat to the user of the web site.There are many standardized graphical formats for use on the web. One just needs aMIME type so that the format is labeled correctly for transfer across the Web, GIF (GraphicsInterchange Format), JPEG (Joint Photographic Experts Group), PNG (Portable NetworkGraphics), SVG (Scalable Vector Graphics) are some of the standards. The graphics areembedded into a HTML page easily using HTML tags thereby creating web sites thatattract user attention. A wide variety of programming/scripting languages and softwaretools are available for creating graphics for web including HTML, CSS, JavaScript,DHTML, Java, Photoshop, PaintshopPro, Flash, Director, QuickTime, Dreamweaver,FrontPage etc.,. These tools aid create, edit, manipulate, and integrate graphics for web.1.2 LEARNING OBJECTIVES • To understand the basics of HTML including HTML tags, tables, frames, forms, CSS positioning. • To study about the basics of web graphics • To know the web page design principles • To learn building a web site • To understand the idea of image maps • To study the means for adding multimedia to a web site1.3 HTML CODING HTML forms the basic work horse for creating all web related documents. HTML isHypertext Markup Language. Its tags provide formatting instructions i.e by marking up thecontent with its elements.HTML elements are defined using tags. The browsers are the 1 ANNA UNIVERSITY CHENNAI
  10. 10. DMC 1623 interpreters for the HTML code. The Internet Explorer 6 has support for HTML 4+extras, NOTES XHTML 1.0, JavaScript1.3+extras, CSS1+extensions, helper applications, ActiveX controls etc., HTML files have extensions .html or .htm and can be created using a text editor like ‘notepad’ or a special editing software. See the first sample program below. Sample.html <html> <head> <title>sample</title> </head> <body> This is a sample HTML page. <b>This text is bold</b> </body> </html> The output of this program Every HTML program should have the <html> as start tag and </html> as end tag. HTML tags are surrounded by the two characters < and >. The surrounding characters are called angle brackets. HTML tags normally come in pairs like <b> and </b>. The first tag in a pair is the start tag, the second tag is the end tag. The text between the start and end tags is the element content. HTML tags are not case sensitive, <b> means the same as <B>.The <head> tag is used to store some meta information about the program. The content of the <title> tag is displayed in the tile bar of the browser window. The purpose of the <body> tag is to define the HTML element that contains the body of the HTML document. The content inside the <body> </body> is what is displayed in the browser. 1.3.1 Text Formatting Using Html There are many tags for formatting text in HTML. Some of the tags have attributes and attributes can assume some values in a predefined format. 2 ANNA UNIVERSITY CHENNAI
  11. 11. WEB GRAPHICS For ex: <font color=”red”> hello world</font> Here the font tag has the attribute‘color’ whose value is ‘red’ given in double quotes. This format is applied to the content of NOTES<font> tag i.e. ‘hello world’which is finally rendered in red color. Some of the most frequentlyused tags are paragraph, font, bold, italic, pre, blockquote, center, underline, subscript,superscript, heading, br(line break), hr(horizontal ruler) etc., Here is a sample program fortext formatting using some of the formatting tags.Formatting using basic tags Textformat.html <br> <html> <i> <body bgcolor="yellow"> This text is italic <b>This text is bold</b> </i> <br> <br> <p align="center"> hi how are you</p> This text contains <br> <sub> <pre> How you write and where are subscript preserved.</pre> </sub> <br> <br> <p> <font face="arial" color="blue"> This text contains helloworld</font></p> <sup> <br> superscript <p><blockquote> Its raining heavily get an </sup> umbrella<blockquote></p></blockquote> </body> <br> </html> <!..this is commented text that will not be displayed..> <h1>This text is big</h1>The output of this program is as shown below. 3 ANNA UNIVERSITY CHENNAI
  12. 12. DMC 1623 Formatting using Lists NOTES Lists can be either unoredered ,ordered or defintion. An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag. Lists.html <html> Output of the program. <body> <h4>An Unordered List:</h4> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <h4>An ordered List:</h4> <ol> <li>one</li> <li>two</li> <li>three</li> </ol> <h4>Definition List:</h4> <dl> <dt>Sunday</dt> <dd>day of sun</dd> <dt>Tuesday</dt> <dd>Day of Mars</dd> </dl> </body> </html> 4 ANNA UNIVERSITY CHENNAI
  13. 13. WEB GRAPHICS1.3.2 Creating Hyperlinks NOTES Text or image or any other graphic can be linked to another resource or web pageusing the anchor tag <a>. The following statement is used to link text ‘clickme’ to the home page of‘www.yahoo.com’<a href=”http:///www.yahoo.com”>clickme</a> The following statement is used to link an image ‘clickme.jpg’ to the home page of‘‘www.yahoo.com <a href=”http:///www.yahoo.com”><img src=”clickme.jpg”</img></a> The following statement is used to see the content of the page at the given URL in anew blank page when the text link ‘clickme’ is clicked. <a href=” http://www.yahoo.com” target=”_blank”>clickme</a> The ‘name’ attribute is used to create a named anchor. When using named anchorswe can create links that can jump directly into a specific section on a page. For ex: <a name=”chapter1"> content of chapter one</a> is a statement in a webpage at a particular URL say at www.chapters.com. From being within another web pageby writing the following statement one can directly jump to the section which is named as“chapter1” as shown below <a href=”http://www.chapters.com#chapter1">click to see chapter 1</a> If you want to jump to subsection within the ‘same’ document then use the followingstatement. <a href=”#chapter1">chapter 1</a> 5 ANNA UNIVERSITY CHENNAI
  14. 14. DMC 1623 Sample program below to jump to a section within the same page. NOTES Jumpwithin.html Output before clicking the link <html> <body> <p> <a href="#C4">See also Chapter 4.</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba After clicking the link bla bla</p> <h2><a name="C4">Chapter Output 4</a></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 10</h2> <p>This chapter explains ba bla bla</p> </body> </html> 6 ANNA UNIVERSITY CHENNAI
  15. 15. WEB GRAPHICS1.3.3 Html Tables NOTES Tables are defined with the <table> tag. A table is divided into rows (with the <tr>tag), and each row is divided into data cells (with the <td> tag). The letters td stands for“table data,” which is the content of a data cell. A data cell can contain text, images, lists,paragraphs, forms, horizontal rules, tables, etc. 7 ANNA UNIVERSITY CHENNAI
  16. 16. DMC 1623 NOTES 1.3.4 HTML Frames Frames are used to display more than one web page in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are > The web developer must keep track of more HTML documents > It is difficult to print the entire page The <frameset> tag defines how to divide the window into frames. Each frameset defines a set of rows or columns. The values of the rows/columns indicate the amount of screen area each row/column will occupy. <frameset> tag must be specified in the <head> section. You cannot use the <body></body> tags together with the <frameset></ frameset> tags. The <frame> tag defines what HTML document to put into each frame. 8 ANNA UNIVERSITY CHENNAI
  17. 17. WEB GRAPHICS NOTES1.3.5 HTML Forms The forms are used obtain user input. The form elements are those with which userinteracts. The elements are ‘textbox’, ‘checkbox’, ‘radio button’, ‘dropdown box’,‘textarea’, ‘password box’, and special buttons like ‘submit’, ‘reset’ etc., The most used form tag is <input>. ‘text’ box is for a single line input. ‘textarea’ is formultiline input, ‘password’ box is for the password field which is displayed in symbols.‘checkbox’ is to choose more than one option. ‘radio’ button is to select only one amongthe given options. ’select’ box is to select an item from a list. ‘submit’ button is special in thesense when it is clicked the form data is submitted to the server side program referred toby the ‘action’ attribute of the <form> tag. ‘reset’ button is to clear the form data for afresh entry. 9 ANNA UNIVERSITY CHENNAI
  18. 18. DMC 1623 NOTES 1.3.6 Embedding Images in HTML As we are dealing with graphics for web it is very important to know how to use and display image data. The tag <img> is used to display images. 10 ANNA UNIVERSITY CHENNAI
  19. 19. WEB GRAPHICS <html> <body> NOTES <p> <img src ="graphics_48x48.png" align ="left" width="48" height="48" alt="model" hspace="10" vspace="10"> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p> <p> <img src ="graphics_48x48.png" align ="right" width="48" height="48" alt="model" hspace="10" vspace="10"> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. </p> </body> </html> Image can also be added as background for the entire web page or for a table or fora cell in a table and so on. The following statement is used to add a background image for a web page.<body background=”tiles.jpg”>HTML colors HTML colors can be defined as a hexadecimal notation for the combination of Red,Green, and Blue color values (RGB). The value of the color attribute can be specified inany one of three ways. The name of the color itself, its rgb equivalent each specified as avalue between 0 to 255 and Hexadecimal value of the color with a # as prefix. The colorattribute can be used for font or text, for background of <body> or <table> or <td> etc.Any one of the following statement can be used to display a web page with yellowbackground.For ex: <body bgcolor=”yellow”> <body bgcolor=”rgb(255,255,0)”> <body bgcolor=”#ffff00"> 11 ANNA UNIVERSITY CHENNAI
  20. 20. DMC 1623 There are browser safe colors which are 216 standard colors that are displayed NOTES exactly as they are created across multiple platforms and browser types and versions. 1.3.7 Cascaded Style Sheets The idea behind style sheets is to separate formatting information from content. Style sheets contain style information that is used for displaying HTML elements. External style sheet are saved with a .css extension. The type of style sheets are Browser default External Internal Inline The advantages are • External style sheets enable you to change the appearance and layout of all the pages in your web site, just by editing one single CSS document. • A single style sheet can be used for formatting an entire web site. • As a web developer you can define a style for each HTML element and apply it to as many web pages as you want thus saving a lot of time. • Provides more consistency to a web site • Cascading order is advantageous as one rule over rides other. All of them cascade into one virtual style sheet which is finally applied to a web page. The syntax of writing a style rule is Selector {property: value} Here ‘selector’ is any HTML element or tag and ‘property’ is the attribute and ‘value’ is the value of the attribute. Property and its value are separated by a colon. If there are more than one property-value pairs they can be separated with a semicolon. Ex: p{color:blue;font-family:verdana;font-size:24} The above example represents the syntax for a style rule that defines the font color, font family and font size attributes for paragraph element. 12 ANNA UNIVERSITY CHENNAI
  21. 21. WEB GRAPHICSExample of using style sheet is as follows. NOTES In the above program there is a <style> tag that is used for enclosing the style rule. An‘Internal style sheet’ is one where the style rules are enclosed inside <head> tag. In theabove example an Internal style sheet is used. If the style is to be applied as ‘Inline’ thenthe style rule must be written inline with the HTML element as below. The Inline stylesheetoverrides all other style sheets i.e the hierarchy is Inline, Internal, and External in that order.<p style=”color:blue; font-family:verdana;font-size:14">blablabla</p> If you want to have an external style sheet, write the style rule separately in a texteditor and save it with the extension .css. To link an external style sheet to a web page,write the following statement in the <head> section of the web page. <link rel=”stylesheet” type=”text/css” href=”one.css”> In the above statement there is a new tag <link> used to link an external style sheet toa web page. The attribute ‘rel’ is the relation and ‘type’ is the MIME type and ‘href’ is thehyperlink reference which is nothing but the URL of the style sheet. The same style rule can be applied to more than one HTML element by grouping theselectors as below.h1,h2,h3,h4{ color:blue;font-family:verdana} As shown above the heading elements h1 to h4 are given the same style rule. 13 ANNA UNIVERSITY CHENNAI
  22. 22. DMC 1623 Class selector: If you wish to apply different styles to the same type of HTML element NOTES then class selector can be used. Ex: p.one{color:blue;font-family:verdana;font-size:24} p.two{color:yellow;font-family:arial;font-size:14} In the above example there are two style rules for the same paragraph element separated using the class names ‘one’ and ‘two’ respectively. The classes can be referred as per the requirement using the following statement. <p class=”one”>blablablablabla</p> <p class=”two”>efghiefghiefghi</p> Class selector can also be used such that one style rule is applicable to all the elements that belong to a particular class i.e. by removing the selector itself as below. one { color:yellow;font-family:arial;font-size:14} The above style will be applied to whichever element that refers this class inside. ID selector You can also define styles for HTML elements with the id selector. The id selector is defined as #. The style rule below will match the element that has an id attribute with a value of “green”: #green {color:green} The style rule below will match the p element that has an id with a value of “para1”: p#para1{text-align: center;color: red} CSS background The css background properties define the background effects of an element. The background can be either transparent, a color or an image. You can also set the position of an image, if and how often the image should be repeated on the screen and whether it should be fixed or scrolled relative to the canvas. The five properties set specific aspects of the background while the sixth the background property, can be used to set all the first five properties in one declaration. 14 ANNA UNIVERSITY CHENNAI
  23. 23. WEB GRAPHICS NOTES The following declaration uses the last property to set all the background propertiesat once for a paragraph element.P{background-color:gray;background-position:50%;background-repeat:repeat;background-attachemnt:scroll}CSS text propertiesThe CSS text properties allow you to control the appearance of text. It is possible tochange the color of a text, increase or decrease the space between characters in a text,align a text, decorate a text, indent the first line in a text, and more. 15 ANNA UNIVERSITY CHENNAI
  24. 24. DMC 1623 attribute Value description NOTES color or hex value Sets the color of a text Color or rgb value normal Sets the distance between lines number line-height length % letter- normal Increases or decreases the spacing spacing length between characters left Aligns the text in an element right text-align center justify none Add decoration to text underline text- overline decoration line-through blink length To set all the above background text-indent % properties at once none Controls the letters in an element text- capitalize transform uppercase lower case word- normal Increases or decreases the space spacing length between words What have you understood? 1. How to use text formatting in HTML? 2. How to embed images in HTML? 3. What are the advantages of CSS over HTML? 4. How do you create frames in HTML? Discuss the advantages and disadvantages of using frames. 5. How do you create forms in HTML? What are the various FORM elements? 6. How do you create hyperlinks in HTML? 7. What is the cascading order of style sheets? Give an example. 8. Discuss about CSS text and background properties. 1.4 BASICS OF WEB GRAPHICS The two variants of graphics are raster graphics and vector graphics. Raster graphics uses pixel information for representing and displaying the images or graphics, while vector 16 ANNA UNIVERSITY CHENNAI
  25. 25. WEB GRAPHICSgraphics uses mathematical representations of images. Raster graphics is resolutiondependent while vector graphics is not. Graphics can be 2D or 3D. NOTES Let us first know some of the very common terms associated with graphical images.Color Depth The amount of color used to create color on display is called the color depth. If yourmonitor can display 8 bits of data in each of the 3 color channels (R,G,B) it has a 24-bitcolor depth (8x3=24). 24 bit images can contain almost 17 million different colors and arecalled true color images. But many monitors cannot display 24-bit images. Some haveonly 16 bit color depth (high color) and some have only 8-bit color depth. If your monitordoes not support the full color depth of an image the browser must resort to mixing colorsthat attempt to match the original colors in the image.Dithering The browsers must mix its own colors when you display a 24-bit image on an 8-bitmonitor, or in a file format that does not support 24-bit color. Since the 8-bit monitor hasfewer colors to work with, the browser must try to approximate the missing colors bycreating colors from the ones the browser already has. This type of color mixing is calleddithering. Dithering occurs when the browser encounters a color that it does not support.Dithered images often appear grainy and pixilated. The dithering will be most apparent ingradations, feathered edges, or shadows. One way to control the dithering process is tocreate images that use non-dithering colors. The 216 non-dithering colors that are sharedby PCs and Mac’s are called the web palette or browser-safe colors. If you are creatinggraphics for web, to avoid trouble use the web palette as your color palette for all flat-color areas of your graphics.Resolution The number of pixels per inch of an image measure in ‘ppi’ (pixels per inch), formonitors it is measure in ‘dpi’ (dots per inch).Antialiasing This effect is only seen in raster based graphics. Because images are created usingpixel, gridded squares, images that aren’t square can appear jagged. The distinct divisionbetween pixels is called “alias,” so many graphics programs use a technique called “anti-aliasing” to create the illusion of smoothness. Curved shapes and text should always beanti-aliased to maintain a clean and presentable look 17 ANNA UNIVERSITY CHENNAI
  26. 26. DMC 1623 Let us understand the basics through the following topics NOTES >Graphics file formats and standards - GIF, JPEG, PNG, SVG, and CGM >Optimizing web graphics >web graphics software 1.4.1 Graphics file formats - GIF, JPEG, PNG, SVG, and CGM The three popular file formats for the web are GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group) and PNG (Portable Network Graphics). Knowing which file format to use for which type of image is important. If you choose the wrong file type, your image will not compress or appear as you expect. Color depth is an important factor in image file formats which describe the number of bits of information used per pixel. The greater the color depth, the greater the number of colors that can be displayed. JPEG supports 24-bit color, GIF supports 8-bit color and PNG supports both 8-bit and 24-bit color. GIF This is designed for online delivery of graphics. GIF uses a lossless compression technique called LZW, meaning that no color information is discarded when the image is compressed. The color depth of GIF is 8-bit allowing a palette of no more than 256 colors. In fact the fewer colors you use, the greater the compression, which results in smaller file size. The GIF file format excels at compressing and displaying flat color areas, making it the logical choice for line art and color graphics. Because of its limited color depth, GIF is not the best file format for photographs or more complex graphics that have gradations of color, such as shadows and feathering. The registered MIME type for GIF is image/gif . GIF Transparency: With GIF files you can choose one color in an image to appear as transparent in the browser. The background color or pattern will show through the areas that you have designated as transparent. Using transparent areas allows you to create graphics that appear to have an irregular outside shape, rather than being bounded by a rectangle. 18 ANNA UNIVERSITY CHENNAI
  27. 27. WEB GRAPHICSGIF Animation: The GIF animation format lets you store multiple images and timinginformation about the images in a single file. This means that you can build animations NOTESconsisting of multiple static images that play continuously, creating the illusion of motion.When you create a GIF animation, you can determine the time between frames and thenumber of times the animation plays. With a little imagination, you can create all types ofeffects including text scrolls, color changes, animated icons, and slide shows. A series ofindividual GIFs can be combined to play as an animated GIF. The final GIF animation fileis a single file with the extension .GIF. GIF animation is somewhat limited to the results of other proprietary animation toolssuch as Macromedia Shockwave or Flash, which can play synchronized sounds and allowweb users to interact with the animation. Creating animations with these applications howeverrequires browser plug-ins, and viewing the animations demands heavy download times.Unlike most proprietary tools, you don’t need any special plug-ins to view animated GIFs,and if you limit color and motion when creating your animations, you can keep your filesizes small for faster downloads. > GIF’s are suitable for sharp-edged line art (such as logos) with a limited number ofcolors.This takes advantage of the format’s lossless compression which preserves verysharp edges. > GIFs can also be used to store low-color sprite data for games. > GIFs are used for small animations and low-resolution film clips. >In view of the general limitation on the GIF image palette to 256 colors, JPEG is a more commonly used format for digital photographs.JPEG Joint Photographic Experts Group format is best for photographs or continuous toneimages. JPEGs are 24-bit images that allow millions of colors. Unlike GIFs, JPEGs do notuse a palette to display color. JPEGs use a lossy compression algorithm. When the imageis compressed, some color information is discarded, resulting in a loss of quality from theoriginal image. Since the display device is the low resolution computer monitor, the loss ofquality usually is not noticeable. Furthermore, the resulting faster download timecompensates for the loss of image quality. JPEG typically achieves 10 to 1 compressionwith little perceivable loss in image quality. JPEG is the most common image format usedby digital cameras and other photographic image capture devices, and is the most commonformat for storing and transmitting photographic images on the World Wide Web. Theregistered MIME type for JPEG is image/jpeg. Using Adobe Photoshop or other imaging software you can translate photographicimages into JPEG format. When you create the JPEG file you can also balance manuallythe amount of compression versus the resulting image quality. The higher the compression, 19 ANNA UNIVERSITY CHENNAI
  28. 28. DMC 1623 the lower the image quality. The most common filename extensions for files employing NOTES JPEG compression are .jpg and .jpeg, though .jpe, .jfif and .jif are also used. It is also possible for JPEG data to be embedded in other file types - TIFF encoded files often embed a JPEG image as a thumbnail of the main image. There is also an interlaced “Progressive JPEG” format, in which data is compressed in multiple passes of progressively higher detail. This is ideal for large images that will be displayed while downloading over a slow connection, allowing a reasonable preview after receiving only a portion of the data. However, progressive JPEGs are not as widely supported. PNG Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. It is specially designed for the web. PNG was created to improve upon and replace the GIF format by making it royalty-free. PNG supports palette-based (palettes of 24-bit RGB colors), greyscale or RGB images. PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK). PNG files nearly always use file-extension “PNG” or “png” and are assigned MIME media type “image/png”. This lossless format compresses 8-bit images to smaller file sizes than GIF. PNG also is intended to work as an image-printing format, so it supports 8-bit indexed-color, 16-bit grayscale, and 24-bit truecolor images. Even though PNG supports 24-bit color, its lossless compression routine does not compress as efficiently as JPEG. PNG supports transparency and interlacing but not animation. One useful feature of PNG is its built-in text capabilities for image indexing, allowing you to store a string of identifying text within the file itself. Interlacing and progressive display: Most web-capable graphic editors let you save images in an interlaced or progressive format. You can choose this display option when creating GIF, PNG, and JPEG files. GIF and PNG files use an interlacing format, while JPEG files use a progressive format. Interlacing and progressive formats generally are the same thing-the gradual display of a graphic in a series of passes as the data arrives in the browser. Each additional pass of data creates a clearer view of the image until the complete image is displayed. The only real advantage to displaying graphics in both methods is that users see a blurred view of the complete image, giving them something to look at while waiting for the entire graphic to download. The disadvantage of choosing this display method is that older browsers may not display the graphic properly and more processing power is needed on the user’s machine to render the image. Tips for choosing the right format • If a graphic has few colors choose GIF • If a graphic has lot of colors choose JPEG as well as most complicated graphics that contain color gradients, shadows and feathering. 20 ANNA UNIVERSITY CHENNAI
  29. 29. WEB GRAPHICS • As a general rule, “simple” content should be saved as GIF files and “photographic” as JPG files. NOTES • When designing for the Web, resolution greater than 72 dpi (dots per inch) is a waste. There is no benefit to higher resolutions as computer monitors are unable to display them any better. Files will be larger and take longer to download, but the image quality on screen will not be better. • Transparency can only replace one color shade. If your GIF has a background that is much different from where it will appear, making the background transparent will leave what is known as a “halo effect” around the object after anti-aliasing: To fix this problem, design your graphic over a background color close to your Web page background, export an anti-aliased version, and then define the background color as transparent. • If the browser has support for PNG use PNG as a substitute for GIF. Because PNG does not compress 24-bit images as well as JPEG, do not use it for photos. • Graphics for the Web should be no larger than approximately 600 pixels wide as most people view the Web at a screen resolution of 640x480. Graphics wider than 640 won’t fully display without the annoying left and right scrolling.SVG (Scalable Vector Graphics) It is a vector graphics file format that enables two-dimensional images to be displayedin XML pages on the Web. Vector images are created through text-based commandsformatted to comply with XML specifications. In contrast to JPEG and GIF images on theWeb, which are bitmapped and always remain a specified size, SVG images are scalableto the size of the viewing window and will adjust in size and resolution according to thewindow in which it is displayed.Benefits of SVG include:>smaller files size than regular bitmapped graphics such as GIF and JPEG files>resolution independence, so that the image can scale down or up to fit proportionally intoany size display on any type of Web device>text labels and descriptions that can be searched by search engines>ability to link to parts of an image>complex animationAdvantages of using SVG over other image formats (like JPEG and GIF) are: >SVG files can be read and modified by a large range of tools (e.g. notepad) >SVG files are smaller and more compressible than JPEG and GIF images >SVG images are scalable 21 ANNA UNIVERSITY CHENNAI
  30. 30. DMC 1623 >SVG images can be printed with high quality at any resolution NOTES >SVG images are zoomable. Any part of the image can be zoomed without degradation >Text in SVG is selectable and searchable (excellent for making maps) >SVG works with Java technology >SVG is an open standard >SVG files are pure XML The main competitor to SVG is Flash. The biggest advantage SVG has over Flash is the compliance with other standards (e.g. XSL and the DOM). Flash relies on proprietary technology that is not open source. A drawback of SVG at the moment is that not all browsers support it. Mozilla browsers, Firefox, and Opera support SVG, and Microsoft plan to support SVG. If your browser does not support SVG files, you will need to download an SVG viewer to view SVG files. WebCGM It is a web-oriented version of the CGM (Computer Graphics Metafile) format. WebCGM is a binary file format. The design criteria for the graphical content of WebCGM aimed at a balance between graphical expressive power on the one hand, and simplicity and implementability on the other. A small but powerful set of metadata elements are standardized in WebCGM, to support the functionalities of: hyperlinking and document navigation; picture structuring and layering; and, search and query on WebCGM picture content. The MIME type for WebCGM is: image/cgm 1.4.2 Optimizing web graphics The load time of your graphics is of critical importance because of the bandwidth concerns. The larger the file, the longer it will take to load, and graphics files can be very large indeed. Huge graphics that take forever to load and thus visitors will be annoyed and will switch to another. Fortunately, there are several things you can do to keep your load times reasonable. The secret of shrinking graphic file size is reduction of bit depth, resolution, and dimension while preserving image quality. This classic size-versus-quality tradeoff is the key to the art and science of graphics compression. Here are some tips for optimizing web graphics. • Consider breaking a large image up into smaller ones, and linking them together with a table. • Graphic files include information about the color palette of the image, which can be superfluous. By discarding information about colors that aren’t used in the image, the file size can sometimes be greatly reduced, with no loss in quality. • Another handy trick is to use the interlaced GIF format. An ordinary GIF (or JPEG) loads in discrete chunks, like a carton being filled up with smaller boxes. 22 ANNA UNIVERSITY CHENNAI
  31. 31. WEB GRAPHICS With an interlaced GIF however, the whole thing loads gradually, a blurry image that becomes sharper and sharper until it’s fully loaded. NOTES • GIFs may also be made transparent. A transparent GIF allows you to designate one color to be transparent, meaning that the background will show through. Usually, the background color of the image is selected as the transparent color, so the image will seem to “float” over a Web page. A non-transparent GIF however, will seem to have a box around it. Most images will look better transparent. One exception is an ad banner. An ad banner should never be transparent, as it may be displayed on various different sites, and you never know what their background color will be. • For palette-based indexed formats, such as GIF and PNG, the lower the bit depth, the smaller the file. Lossy, full color RGB formats like JPEG, do not benefit from bit depth reduction as file size is primarily related to quality. • A CLUT is a digital version of a paint store’s color-mixing chart: it contains 256 entries, each with its own formula for a specific color. Indexed images refer to each color by its position in the palette. Finding the right color palette that provides the best image quality on 8-bit machines is an art form in itself, and can dramatically affect the appearance and size of your graphics. • PNGs compress dithered images better than GIFs, the “dithered” PNG image is much smaller than the dithered GIF. PNGs typically compresses 8-bit files 10- 30% better than GIFs. • For animated GIFs frame optimization technique can be used where in the technique is saving only the pixels that change from frame to frame and thus saving a lot of file size.1.4.3 Web graphics softwareFor editing Raster graphicsAdobe Photoshop This is the mother of all graphics editors. Its power is undisputed. Unfortunately, it’salso rather expensive and tough to learn. Use Photoshop if you’re already familiar with it.Paint Shop Pro This is one of the most popular graphics editors in the world, due in large part to itsmagical combination of low price and powerful features.Ulead Photo Impact This graphics editor is the best balance between depth, ease of use and price.PhotoImpact is an all-in-one solution for Web page design, Web graphics and image editing.It offers the following features 23 ANNA UNIVERSITY CHENNAI
  32. 32. DMC 1623 • Edit images and create complete Web pages. NOTES • Full array of imaging and painting tools. • Vector 2-D and 3-D graphics • Over 60 exclusive special effects and filters. • Visual Web page layout and one-click HTML output. Whether you want to edit photos and put them online or create original Web graphics and animations, this economically priced package offers an appealing mix of power, with an interface that’s truly easy to use. Flex GIF Animator Flex GIF Animator is a complete image-editing suite. It has drawing, cloning, and retouching tools, exciting 2D & 3D text and graphics, add 3D look with drop shadow, glow and other effects and dozens of professional filters. For editing Vector graphics CorelDraw This is one of the oldest vector graphics editors for Windows and Mac, very popular due to its speed and features. It also contains Corel PHOTO-PAINT - a powerful bitmap graphics editor. Adobe Illustrator This graphics editor is the professional solution for designers publishing for print and Web, offering sophisticated illustration tools, time-saving productivity features, and tight integration with other Adobe Web publishing software, including Flash. Adobe Flash (formerly Macromedia Flash) This is the key to designing and delivering low-bandwidth animations, presentations, and Web sites. Integration between Dreamweaver and Flash, enables users to easily integrate vector animations, MP3 audio, and interactivity to produce high-impact, engaging Web pages. XaraXtreme This program comes complete with everything you need to create both print and Web graphics. Xara Xtreme is fast, powerful, and features a clean, simple interface that makes it great for new users, and design power and flexibility that’s great for professionals. 24 ANNA UNIVERSITY CHENNAI
  33. 33. WEB GRAPHICSWeb graphics editors NOTESIf you find creating your own graphics with a universal editor to be too daunting, or if youwant to save time and avoid the technicalities, you can use specialized Web graphics toolsthat make creating professional-looking banners, buttons, fancy text, navigation menus,and logos incredibly fast and easy. Here are some of them...CoffeeCup Button Factory This is the complete and easy to use button maker. It enables you to quickly makebuttons for your site, including graphics and animation effects (Flash and Java). You canuse the included images or your own customized graphics.Buttonz & Tilez This is software package that includes two applications, “Buttonz”, which createsbuttons of various shapes, and “Tilez”, which renders seamless textures. The packagecomes with dozens of preset textures and buttons for you to use and modify.ZPaint This editor lets you easily paint colored and textured 3D objects like buttons, rings,boxes, or add those effects to existing graphics.What have you understood?1. What are the popular image file formats on the web? Discuus in detail2. Suggest tips for optimizing web graphics?3. Write about SVG and CGM standards?4. Write notes on some software tools for editing Vector and raster graphics.5. Write short notes on each of the following image characteristics. a. Dithering b. Antialiasing c. Color depth d. resolution1.5 WEB PAGE DESIGN AND SITE BUILDING1.5.1 Web site design principles The construction of a site and how pages are organized, in themselves can contributegreatly to the success of a website, and sometimes even as much as the content. Thedesign must be based on some simple basic principles. 25 ANNA UNIVERSITY CHENNAI
  34. 34. DMC 1623 Some of the principles from one school of thought are Proximity, alignment, repetition, NOTES contrast. These four principles effect how web pages are perceived. Proximity refers to the distance between elements on a Web page and how the elements relate to one another. These elements include text, navigation, headings, and so on. Generally speaking, elements that are close together appear to have a stronger relationship than elements that farther apart. Alignment: One of the most critical principles of design is alignment. Like proximity, alignment can enhance or detract from the appearance of a Web page. But in addition, it can significantly affect the readability of material on a page. The alignment style for an entire page, not just the text, must be selected. Proper alignment will create strong associations and a pleasing presentation. Repetition is not only saying the same thing several times to get a point across. It is also the use of a consistent theme throughout a Web site. While all the pages on a Web site do not have to be exactly the same, there should be enough similarities to create a consistent look and feel to the site. This consistency is one of the things that help make a site easy to navigate. Contrast works in several different ways. Perhaps the most obvious example of contrast is the color of text against a background. It is much easier to read text that contrasts highly with the background. However, contrast can also include all sorts of differences between elements. Under some circumstances, contrast is used to make something different so that it stands out. This helps to indicate what is important. According to another school of thought a comprehensive discussion on principles of web design is given below. Influence of browsers on the design One of the big challenges facing a web author is designing pages that display properly in multiple browsers. Every browser contains a program called a “parser” that interprets the tags in an HTML file and displays the results in the canvas area of the browser. Because the logic for interpreting the html tags varies from browser to browser, resulting in many, possibly conflicting interpretation of the way the html file is displayed. There are several different ways to approach this dilemma. One option is what is known as Lowest Common Denominator Coding. This option provides the greatest acceptance across browsers because the author chooses to code his html using the next-to-last release of HTML. With each new release of html new features are added which are not supported by older browsers. By sticking with an older release of html, web authors assure themselves of more accessibility by a larger number of surfers. 26 ANNA UNIVERSITY CHENNAI
  35. 35. WEB GRAPHICS Some authors prefer to stay on the cutting edge of what is happening in the htmlworld. These designers insist that their users keep up with them by requiring the latest NOTESbrowser and the latest and greatest plug-ins (little programs that extend the browser’scapabilities such as Flash and Shockwave). The risk in adopting this strategy is that manyusers may not be able to see your content as it was designed. Some authors of websites have decided that they are going to use browser specificcoding, forgoing the challenge and extra work required to code for multiple browsers bychoosing the most popular browser.Coding for multiple screen resolutionsOne of the major challenges is that you can never really know the user’s monitors’ screenresolutions. The resolution of a monitor is the horizontal and vertical height and width of thecomputer screen measured in pixels. Site when viewed at 800x600 Site when viewed at 1024x768 You can decide that your site will be created as a ‘Fixed Resolution Design’. As welook at the sample here, notice that as the resolution increases, the area on the canvas thatis used decreases. Also notice that on the 800 x 600 view, the user will have the use thehorizontal scroll bar to read the page. The other option is to create a Flexible Resolution Design. The examples will showthe same page in two different resolutions. Notice that no matter how large or small theresolution, the information on the page adjusts to the resolution and the reader can still seeall of it, at least on the horizontal plane. 27 ANNA UNIVERSITY CHENNAI
  36. 36. DMC 1623 NOTES Bandwidth concerns A good rule of thumb is to create pages that will never take longer than 20 seconds to download. The biggest single factor that influences the speed at which your pages download is the number and size of the graphics on the page. As a rule, no single image should be larger than 15K. Design for the medium Always keep in mind that you are not creating these pages for a printer, but rather, for a monitor. That will drive many of the decisions that you will make regarding page layout, fonts, and colors. Always remember that this medium is hypertext, not linear text. Always make your users feel comfortable by letting them know where they are and where they can go. >Users use the interface to explore the information design. They read text, make associations with links, view graphics, and depending on the freedom of your design, create their own path through your information. >Give a portable design so that it is accessible across different browsers, operating systems, and platforms. >design for low bandwidth for faster downloads >Plan for clear presentation and easy access to your information. The single most important factor in determining the success of your site is your “information design,” the presentation and organization of your information. Your graphics and navigation options must present a variety of options to the user without detracting from their quest for 28 ANNA UNIVERSITY CHENNAI
  37. 37. WEB GRAPHICSinformation. Break text into reasonable segments that make for easier on-screen reading.Use contrasting colors that are easy to read and easy on the eye. NOTESDesign the whole site Communicate a visual theme to the user that orients them to your sites content. Thetheme should reflect the impression that your or your organization want to convey. >create smooth transitions by legibly choosing the elements and design. The overalldesign of a page at any information level should reflect the identity of the site. >use a grid to provide visual structure. Using HTML tables this can be achieved andborders can be removed. >use of active white space is vital to the success of a page. White space that is useddeliberately is called active white space. Active white space is an integral part of yourdesign that structures and separates content. Passive white spaces are blank area thatborder the screen or are the result of mismatched shapes. > Provide grounding for the user by placing navigation elements in the same positionon each page. Users will orient themselves quickly to your navigation structure. Use thesame navigation graphics throughout the site to provide consistency and reuse graphicsstored in the cache. > The main page and secondary page share a number of characteristics: • Consistent background graphics • Vertical rule that provides structure • Consistent font usage • Logo that brands the site • Generous areas of active white space 29 ANNA UNIVERSITY CHENNAI
  38. 38. DMC 1623 One design rule to note is that the logo should remain in the same place on all pages NOTES for consistency. Design for the user Keep your design efforts centered solely on your users. Knowing your audience answers almost all design questions. If it servers the audience, keep it; if it is potentially distracting or annoying, eliminate it. Find out what users expect from your site. Design for Interaction: Think about how the user wants to interact with the information on your web page. Decide if the user will read or scan your pages and then design your pages to accommodate either reading or scanning. If you want to design a page for scanning, a page of links, for example, you would want to organize your page using meaningful column headings, linked text, and short descriptions. Organize links into related topic groups and separate grouping with white space, graphics, or background color. If, on the other hand, your page is an article that requires large blocks of text, your user should expect and be accustomed to interacting with pages like that by scrolling and clicking hyperlinks. The links might be in the main body of the article or they may be in a side bar. Keep the paragraphs short. Make reading easier by using a text column that is narrower that the width of the screen. Keep you text legible by providing enough contrast between the foreground and the background colors. Provide links that allow users to jump quickly to related content. Design for location: – It is impossible to predict a user’s exact viewing path. There is, however, some general agreement on the relative areas of screen importance (browser canvas), as shown below. This diagram depicts the section of screen real estate ranked in order of importance. During page design, rank the information that you are going to put on the page and then position the most important information in the middle of the window, the next most important across the top and so on, with the least important or static information in the left margin. Guide the user’s eye: Users can and will traverse your pages in a variety of ways. As a function of normal reading habits, the user’s eyes may move from left to right and back again. A paper based reading pattern (similar to that of a raster scan process) may be used for specific purposes. 30 ANNA UNIVERSITY CHENNAI
  39. 39. WEB GRAPHICSKeep a flat hierarchy: Don’t make users navigate through endless layers of pages to findthe piece of information that they are looking for. Structure you site to include sections or NOTEStopic level navigation pages so users quickly find their path. A good rule of thumb to try tofollow is never make users click more than three times to find what they are looking for.Another thing you can do to make you site easy to navigate is provide some kind ofgraphical site map that shows your user the structure of you site and where your content islocated and how it is related to the rest of the site.Use the power of hypertext linking: Unlike paper-based authors, as a hypertext authoryou have the luxury of adding clickable links where necessary to guide users through yourinformation. Readers browsing through magazines can flip to any page in any order theydesire. You can replicate this nonlinear reading method on your web site with links that letusers move from page to page or section to section… and you should!! This is one of thefeatures that make putting information on the web unique. You should really think thisfeature through and utilize its power. Some more ways of using hypertext is for contextuallinks, balloons, changing the color of the link indicating that it is visited etc., 31 ANNA UNIVERSITY CHENNAI
  40. 40. DMC 1623 Design for screen NOTES A computer screen is landscape oriented. Your page design should reflect the space within which it will be displayed and read. While a piece of paper reflects light, a computer screen has light passing through it from behind. This changes the nature of the colors and contrasts you choose to employ and that is why contrast between foreground and background is so vitally important. Computer screens use a much lower resolution than the printed page. Graphics and text that would look fine on a laser printer at 600 dpi are coarse and grainy at 72 dpi, the typical resolution for computer monitor. Because of the screen graininess, italic text is especially hard to read in paragraph format. It is usually not a good idea to take documents that are formatted for print and post them online without considering the destination medium. In most cases, a document that is perfectly legible on paper is hard to negotiate online. The text length, font, and content length will not transfer successfully to the computer screen. 1.5.2 Planning the site Identify the content goal: Examine closely what type of site you want to design. Your objectives and your user’s objectives, what you want the web site to accomplish and what your users want from your site, may differ. The bottom line is that you should adopt your users’ perspective. Think about the type of content that you want to present and then look to the web for examples of how best to present it. Analyze your audience: Analyze your audience and produce an audience definition, a profile of your average user. Contact your typical users or those who work with them and answer the following questions. • What is that users want when they come to your site? • How can you attract them and entice them to return for repeat visit? • What type of computer and connection speed does your typical visitor have? • What level of education do they have and other technical abilities? • Will other sites link to our site or will your site provide links? Build a web site development team: Your team must include server administrators, HTML coders, designers, writers and information designers, software programmers, database administrators, marketing. Diagram the site: Plan your site by creating a flowchart that shows the structure and the logic behind the content presentation and navigation choices you offer. You can sketch out your ideas using a paper and pencil or you can use software. What you are after here is 32 ANNA UNIVERSITY CHENNAI
  41. 41. WEB GRAPHICScreating the information structure of your site. This becomes sort of the blue prints for theinformation as opposed to the blue prints for the layout. Think about the information needs NOTESof your users and how they can best access the content of your site. Below are someexamples of information structures.• Linear Structure – If you want your users to follow a predefined path, this is thetype of structure that you want to consider. Once into the content users can navigatebackward or forwards within the content path. Each page should contain a link back to theprevious page and forward to the next page. If you need to include a subtopic, link to itand only allow users to link back to the page on the main path that they just left.• Tutorial Structure – This type of structure is perfect for the computer-based trainingcontent such as lessons, tutorials, or task-oriented procedures. The uses progress throughthe concept, lesson, and review in a linear manner. Users can choose the order in whichthey take the lessons, but once the decision has been made, they follow your predeterminedpath. It is sort of like a multi-legged linear structure. Concept1 Concept2 Concept3• Web Structure – If you site is going to relatively small, a web structure might be whatyou want. In a web structure every page has links to and from every other page. Thisallows users to jump freely to any page from any other page. If you choose this type ofstructure make sure to include on each page, clear location information and a standardizednavigation bar that not only tells the users where they are, but where they can go. 33 ANNA UNIVERSITY CHENNAI
  42. 42. DMC 1623 NOTES • The Hierarchical Structure – This is probably the most common information design. It lends itself to larger content collections because the section pages break up and organize the content at different levels throughout the site. Navigation is primarily linear within each section. Users can scan the content on the section page and then choose the content page of their choice. • Cluster Structure – This is similar to the hierarchical structure, except that every topic area is an island of information unto itself, with all pages in each cluster linked to each other. This structure encourages exploration within a topic area, allowing the user to navigate freely through the content. All pages contain a navigation bar with links to the section pages, main page, and site map. Section page Section page Content pages 34 ANNA UNIVERSITY CHENNAI
  43. 43. WEB GRAPHICS• Catalog Structure – The catalog structure accommodates electronic shopping. Theuser can browse or search for items and view specific information about each product on NOTESthe item page. Users can add items to the shopping cart as they shop. When they arefinished, they can review the items in their shopping cart, and then proceed to checkout,where they can enter credit card information and finalize the order. Content page Search page Item pages Shopping cart Checkout Exit1.5.3 Planning the site navigation >Provide enough location information to let users answer the following navigationquestions Where am I? Where can I go? How do I get there? How do I get back to where I started?Let the users know their current page and what type of content they are viewingLet users know where they are in relation to the rest of the web siteProvide consistent and easy to understand linksProvide alternatives to the browser’s back button that let users return to their startingpoint. 35 ANNA UNIVERSITY CHENNAI
  44. 44. DMC 1623 >use hypertext to connect facts, relationships, concepts – provide contextual linking NOTES to related concepts, facts, or definitions, letting the users make the choices they want. Know your material and try to anticipate the user’s information needs. >Control page length. >Use a text based navigation bar >When using graphics based navigation make sure that they are self explanatory and also provide alternate text for the graphic. Shown below is a web site which contains some of the standard navigational elements Text based navigation Graphics based navigation Indicating the current location 1.5.4 Creating page templates You can create page templates using HTML tables. Some standard page templates are shown here below. Template - 1 36 ANNA UNIVERSITY CHENNAI
  45. 45. WEB GRAPHICS This is a very widely used page layout - logo on top, navigation in the left column, andmain content in the middle. NOTESTemplate – 2 This layout is different in that instead of the logo being centered and by itself alongthe top of the page, the navigation starts higher up, next to the logo. This can be especiallyuseful when there is a lot of navigation links, or when the logo is not very wide.Template – 3 This is a variation of the first template, with a right column added. Right columns aregreat for miscellaneous information and links that don’t fit elsewhere.Template – 4 This is a variation of template 2, with a right column added. It could be placed eitherup next to the logo, or lower, as pictured to the left. 37 ANNA UNIVERSITY CHENNAI
  46. 46. DMC 1623 Template – 5 NOTES In this design style, the navigation is placed directly underneath the site logo. This tends to work better when there are fewer navigation links. Template – 6 This is a variation of 5, with either a left and / or a right column added. Template – 7 In this example, an image, possibly containing the logo, would be in the middle of the page. Different parts of the image would be the links to other pages of the site. It would be highly recommended with this kind of layout style to have additional text on the page giving a basic introduction to the site. However, the rest of the layout style was like number 6. What have you understood? 1. Discuss the principles of web design in detail. 2. Depict the web information structures and suggest a suitable application for each of them. 3. Write about some standard page templates used for web page design. 4. Discuss the methodology to be adopted while designing for user, designing for screen, design for medium. 5. Write about the navigation strategies to be adopted while designing a web site. 38 ANNA UNIVERSITY CHENNAI
  47. 47. WEB GRAPHICS1.6 IMAGE MAPS NOTES An image map in XHTML or Web Development is an image that has different clickableelements within the same single image. This allows Web developers to define only portionsof the image as clickable while others are not, or to define specific areas of the image topoint to different URLs. To make a client side image you need an image, a list of coordinates designatinghotspots on the image, and the document URL associated with each hotspot. To programthe image map into your HTML document, you use the ‘usemap’ attribute of the <img>tag. A client side image map can be implemented using html as shown below<img src=”image” usemap=”#map” /><map name=”map” id=”map”><area shape=”rect” coords=”0,10,20,40" href=”URL” alt=”click here” /></map>The tags that you need for creating an image map are<map>, <img>, <area>First you create the map on your Web page; all it needs is a name.<map name=”name”>When you create an image map, you are creating an area that is clickable on the image.There are three shapes you can create: • rect - a rectangle or four sided figure • poly - a polygon or multisided figure • circle - a circle To create the areas, you need to know the coordinates you would like to map. For a rectangle, you map the top left and bottom right corners. All coordinates arelisted as x,y. So, for upper left corner 0,0 and lower right corner 10,15 you would type:0,0,10,15. You then include it in the map:<map name=”name”><area shape=”rect” coords=”0,0,10,15" href=”http://abcd.com/”> 39 ANNA UNIVERSITY CHENNAI
  48. 48. DMC 1623 For a polygon, you map each coordinate separately. The Web browser automatically NOTES connects the last set of coordinates with the first. <map name=”name”> <area shape=”rect” coords=”0,0,10,15" href=”http://abcd.com/”> <area shape=”poly” coords=”10,0,14,3,7,10" href=”http://abcd.com/”> Circle shapes only require two coordinates, like the rectangle, but for the second coordinate you specify the radius, or the distance from the center of the circle. So, for a circle with the center at 20,10 and a radius of 5 you would write 20,10,5: <map name=”name”> <area shape=”rect” coords=”0,0,10,15" href=”http://abcd.com/”> <area shape=”poly” coords=”10,0,14,3,7,10" href=”http://webdesign.about.com/”> <area shape=”circle” coords=”20,10,5" href=”http://abcd.com/”> The only thing left for your image map is to close the map and link to it in your image <map name=”name”> <area shape=”rect” coords=”0,0,10,15" href=”http://abcd.com/”> <area shape=”poly” coords=”10,0,14,3,7,10" href=”http://abcd.com/”> <area shape=”circle” coords=”20,10,5" href=”http://abcd.com/”> </map> <img src=”image” usemap=”#name”> In the example below the screen areas numbered as 1,2,3,4,5 are map areas that are designated for linking to another resource or web site etc, 40 ANNA UNIVERSITY CHENNAI
  49. 49. WEB GRAPHICSWhat have you understood? NOTES 1. What are image maps? How will you create client side image maps? 2. What are the HTML tags used for creating Image maps?1.7 ADDING MULTIMEDIA TO A WEB SITE HTML provides tags for inserting media into HTML documents; The <img> tag forinline images; the <embed> and <object> tags for compound document embedding; and<applet> tags for code (the <applet> and <embed tags> have been deprecated in HTML4.0 in favor of the <object> tag. A deprecated tag is not supported by the most recentHTML standard, yet its use remains supported by most browsers). The important <object>is used to insert a “nonstandard” item such as a JAVA applet, QuickTime movie, or Flashanimation into an HTML document. But it is not as simple as it seems. There is a differencebetween the ways the various versions of browsers handle multimedia elements and thePlug-Ins that play them. In playing a QuickTime movie, for example, the <object> tag isused by Internet Explorer on windows platforms and requires the QuickTime activeXcontrol. The <embed> tag is used by older Netscape browsers, Internet Explorer for theMAC, and other browsers that support Netscape-style QuickTime plug-Ins. The result isthat browsers that understand the <object> tag ignore the <embed> tag, and browsersthat cannot read the <object> tag need the <embed>tag so the <object> tag would includean <embed> tag to play a QuickTime movie on all browsers and platforms, as shown<object classid=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B”Width=”150" height = “150” codebase=”http://www.mywebsite.com/oneactiveX”><param name = “src” value=”hi.mov”> The “object” tag is used to embed an object within the document. “Classid” is usedto specify the location of the objects data. Microsoft Internet Explorer versions 3.0 andlater use the “codebase” attribute to detect which version of the Flash Player/ QuickTimeplayer ActiveX Control is installed on a user’s computer. If the user’s version is earlier thanthe version specified by “codebase”, Internet Explorer can automatically download andinstall the newer version of the Flash Player/QuickTime player from the location specifiedin “codebase”.1.7.1 Text for the web Viewers of your web site may not be displaying the same “preferred” font that youused to design your page because user preferences in the browser may alter the way textin your document looks and flows. To make the best of this uncertainty many developersdesign their documents in Times Roman for the proportional font and Courier as the mono-spaced font. These fonts readily move across platforms and are the default fonts users 41 ANNA UNIVERSITY CHENNAI

×