MERI- College of Engineering and Technology

Practical File of

MULTIMEDIA TECHNOLOGIES LAB

(IT- 208-F)

Submitted by: Submitted to:

Name: Dhriti Saluja Mr. Shashi Kumar

Roll No.: 17/CSE/09 (Assistant Professor CSE

Branch: CSE Department)

Semester: 5th

Department of Computer Science & Engineering

Session: 2017-2021

Dhriti Saluja
 INDEX

S.no Title Date Teacher’s

. signature
1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

Dhriti Saluja
 Program 1
AIM: -To study MULTIMEDIA HARDWARE system: -
a) INPUT DEVICES
b) OUTPUT DEVICES
c) COMMUNICATION DEVICES

REQUIREMENTS: - Floppy Disc, Hard Disc, DVD, CD Rom, Input devices like Track Ball, Touch
Screen, Mice, Flat Bed, Digital Camera, Output devices like Amplifier speaker, monitor,
projector, Printer.
THEORY: -
INPUT DEVICES:
A great variety or input devices -from the familiar keyboard and handy mouse to touch
screen and voice recognition setups can be used for development and delivery or a
multimedia project.
1) KEYBOARD:
A keyboard is the most common method of interaction with a Computer. Keyboards provide
various tactile responses and have variously layout depending upon your Computer system
and keyboard -model.
Keyboard is typically rated at least 50 million cycles.
The most common keyboard for PCs is the 1011 style, although many styles are available
with one or more special keys LED’s.
2) MICE:
A mouse is the standard tool for interacting with a graphical user interface (QUI). All
Macintosh computers require a mouse; on PCs, mouse: are not required but recommended.
The buttons on the mouse provide additional user input, such as pointing and double
clicking to open a document.
3) TRACK BALL:
Track ball are similar to mice except that the cursor is moved by using one or more fingers
to roll across the top of the ball. The track ball does not need the flat space required by a
mouse. Track ball have at least two buttons;one for the user to click, and the other to
provide the press and hold condition necessary for selecting & dragging operation.

Dhriti Saluja
4) TOUCHSCREEN:
Touch screens are monitors that usually have a textured coating across the glass face. This
coating is sensitive to pressure and register the location of the user’s finger when it touches
the screen. The touch mate system, which has no coating, actually measures the pitch roll,
and yaw rotation of the monitor when pressed by finger, and determine how much force
exerted and the location where the force was applied.
5) MAGNETIC CARD ENCODERS AND READERS:
Magnetic card setups are useful when you need an interface for a data- base application or
multimedia project that tracks users. You need both card encoder and a card reader for this
type of interface. The encoder connects to the computer at the serial port and transfer
information to magnetic strip of tape on the back of the card.
6) FLAT-BED SCANNERS:
A scanner may be the most useful piece of equipment you will use in the course of
producing a multimedia project. There are flat bed scanner and handheld scanners. Most
commonly available are gray -scale and color flat- bed scanners that provide a resolution of
300 or 600 dots per inch.
Professional graphics houses may use even higher resolution unit.
7) OPTICAL CHARACTER RECOGNITION (OCR) DEVICES:
OCR sofware, such as omni page from cacre or perceive from ocron, to convert printed
matter to ASCII text files in our computer. We can also convert paper document into a word
processing document on our computer without retyping or rekeying.
An OCR terminal can be of use to multimedia developer because it recognizes not only
printed characters but also handwriting.
8) INFRARED REMOTES:
An infrared remote unit Iets a user interact with our project while we are freely moving
about. Remotes work like mice and trackballs, except they use infrared light to direct the
cursor and require no cables to communicate. Remote mice work well for a Iecture or other
presentation in an auditorium or similar environment, when the speaker needs to move
around the room.
9) VOICE RECOGNITION SYSTEM:
Voice recognition system facilitates hands free interaction with your project. These system
usually provide a unidirectional cardiod, noise canceling microphone that automatically
filters out background noise. Most voice recognition system currently available can trigger
common events such as Save, Quit, Open, Print etc.The Macintosh A V and Power
Macintosh computer include voice recognition capability and add on sound board such as
the Sound blaster or Diamond Sonic Sound and other provide this features for PCs.

Dhriti Saluja
10) DIGITAL CAMERA:
Digital Camera use the same technology i.e. CCD as video camera uses. They capture the still
images of a given no. of pixels and the images are stored in camera's memory to be
uploaded later to a computer. The higher the mega pixel rating, the higher the resolution of
camera.Images are uploaded from the camera's memory using a serial, parallel cable.
b) OUTPUT HARDWARE: -
Presentation or the audio and the visual components or our multimedia project requires
hardware that may or may not be included with the computer itself- speakers, amplifiers,
monitor, motion video devices and capable storage devices. There is no greater test of
benefit of good output hardware than to feed the audio output of your computer into an
external amplifier.
1) AUDIO DEVICES:
All Machintosh are equipped with an internal speaker and a dedicated sound chip and they
are capable of audio output without additional hardware and /or software.To take
advantage of built in stereo sound, external speakers are required. Digitizing sound on your
Machintosh requires an external microphone and sound editing/recording software such as
Sound edit 16 from Macromedia, Sound Forge.
2) AMPLIFIERS ANS SPEAKERS:
Often the speakers we use during a project development will not be adequate for
development of multimedia project.Speakers with built in amplifier are important when our
project will be presented to a large audience.
3) MONITORS:
The monitors we need for development of multimedia projects depend on the type of
application we are creating.A wide variety of monitors are available for both Machintosh
and PCs.High-end, large screen graphics monitors and LCD panels are available for both, and
they are expensive.
Serious multimedia developers will often attach more than one monitor to their computers,
using add-on graphics boards.This is because many authoring system allow us to work with
several open windows at a time so we can dedicate one monitor to viewing the work we are
creating or
designing and can perform various editing tasks in windows on other monitor that do not
block the view of work.
4) VIDEO DEVICES:
Message medium has the visual impact of video with a video digitizing board installed in
computer, can display a television picture on monitor. Some boards include frame-grabber
features for capturing the images and turning it into a color bitmap, which can be saved as a
PICT or TIFF file and then used as a part of a graphics or a background project.

Dhriti Saluja
5) PROJECTORS:
When we need to show material to more viewers that can huddle around a computer
monitor, we will need to project it onto a large screen or even a white painted wall.
Cathoda-ray tube projectors, liquid crystal display (LCD) panel attached to an overhead
projector, stand alone LCD projectors, and light-valve projectors are available to splash work
onto big screen surfaces.
6) PRINTERS:
With the advent of reasonably priced color printers, hard copy output has entered the
mutimedia scene. From storyboards to presentation to production of collateral marketing
material, color printers have become an important part of the multimedia development
environment.Color helps clarify concept, improve understanding and retention or
information, and organize complex data. Xerox offers both solid ink and laser options.
c) COMMUNICATION DEVICES:
Many multimedia application are developed in workgroups comprising instructional
designers, writers, graphics artists, programmers, and musician located in the same office
space or building. The workgroup member's computers typically arc connected on a local
area network (LAN) the client's computers, however, may he thousand miles distant,
requiring other methods of good communication.
In the work place us quality equipment and software for your communication setup. The
cost in both the time and money of stable and fast networking will be returned to you.
1) MODEMS:
Modems can be connected to your computer externally at the serial port or internally as a
separate board. Internal modems often include fax capability.Be sure that the modem is
Hayes compatible. Hayes AT standard commmand set allows us to work with most software
communication packages.
Modem speed, measured in band, is the most important consideration. Because the
multimedia files that contain the graphics, audio resources, video samples and progressive
version of the project are usually large and in many cases we need to move as much data in
short period of time. Compression saves significant transmission time and money, especially
over long distance.

Dhriti Saluja
2) ISDN:
For higher transmission speed, we will need to use Integrated Service Digital Network
(ISDN), switched -56, TI, T3, DSL, ATM etc. ISDN lines are popular because of their fast 128
kbps data transfer rate- four to
five times faster than the more common 28.8 kbps analog modem. ISDN lines are important
for Internet accessing, Networking and audio and video conferencing. They are more
expensive than the convention analog lines, so analyze your costs and benefits carefully
before upgrading to ISDN. Newer and faster Digital Subscriber Line (DSL) technology using
copper lines and promoted by the telephone companies may overtake ISDN.
3) CABLE MODEM:
Cable modems usually send and receive data symmetrically -they receive more (faster) than
they send. In the downstream direction from provider to user, the data is modulated and
placed on a common 6 Mhz television carrier, somewhere between 42 MHz & 750 MHz. The
upper stream channel, or reverse path, from user to provider is more difficult to engineer
because cable is more noisy environment with interference from HAM radio, CB radio,
home appliances, loose connections etc.

Dhriti Saluja
 Program 2
AIM: To study the Multimedia BASIC SOFTWARE TOOLS.
REQUIREMENTS: Basic software tools.
THEORY:
a) Text editing and Word processing tools: - A word processor is usually the first software
tool computer users learns. From letter invoice and story boards to project content word
processors may also be our most often used tool, as we design or build a multimedia
project. Word processor such as Microsoft Word and Word Perfect are powerful that
includes spell checkers, table formatters, templates for letters, resume purchase orders and
other common documents. In many word processor we can actually embed multimedia
elements such as sound, images and video etc.
b) OCR software network: - With optical character recognition (OCR) software, a flat-bed
scanner and our computer, we can save many hours of rekeying printed words, and get the
job done faster and more accurately than roomful of typists. OCR software turns bitmapped
characters into electronically recognizable ASCII text. A scanner is typically used to create
the bitmap. Then the software breaks the bitmap into chunks according to whether it
contains text or graphics by examining the texture and density of area of the bitmap and by
detecting edges. The text areas are then converted into ASCII character using probability
and expert system algorithms.
c) Painting and Drawing tools: - Painting and drawing tools as well as 3D modelers, are
perhaps the most important items in your toolkit because of all multimedia elements, the
graphical impact of our project will likely have the greatest influence on the end user.
Painting software such as Corel draw, free hand is dedicated to producing vector based line
art easily printed to paper at high resolution.
d) 3D modeling and animation tools: - With 3D modeling software,object rendered in
perspective appear more realistic. We can create stunning scenes and wander through them
by choosing just the right lighting and perspective for our final renedered image. Powerful
modeling packages such as Infini-D, auto desk, strata vision’s, secular logo motion, wave
front, aids soft images. Important for multimedia developers, many 3D modeling
applications also include export features enabling us to save a moving view or journey
through our scenes as a quick time or AVI animation file. Each rendered 3D image takes
from a few seconds to few hours to complete, depending upon the complexity of the
drawing and the number of drawn objects included in it. A good 3D modeling tool should
include the following features:
i. Ability to drag and drop primitive shapes into a scene.
ii. Lathe and extrude features.
iii. Color and texture mapping.
iv. Ability to create and sculpt organic objects from scratch with Bezier spline drawing tools.

Dhriti Saluja
v. Unlimited cameras with focal length.
e) Image editing tools: - Image editing applications are specialized and powerful tools for
enhancing and retouching existing bit-mapped images. These applications also provide
many of the features and tools of painting and drawing programs and can be used to create
images from scratch as well as images digitized from scanners, video frame grabbers, digital
camera clip art files or original artwork files created with painting or drawing package.
f) Animation: - Video and digital movie tools : today the most widely used tool for creating
multimedia animations for Macintosh and Windows environment is Macromedia director.
Animations and digitized video movies are sequences of bit-mapped graphics scene, rapidly
played back. Most authoring tools adopt either a frame or object oriented approach to
animation, but rarely both. Moviemaking tools typically take advantage of quick time for
Macintosh and Windows and Microsoft video for Windows technology and let you create,
edit and present digitized motion video segments, usually a small window in your project.
To make a
movie from video, you need special hardware to convert the analog video signal into digital
data movie making tool such as Premier, video shop, media studio pro and let you edit and
assemble video clips captured from camera, tape and other digitized audio or midi files.
g) Sound editing tools: - System sounds are shipped with both Macintosh and window
system, and they are available as soon as we install the operating system. System sounds
and beeps are used to indicate an error, warning or special user activity. Using sound editing
software we can make our own sound effects. We need software for editing digital sounds.
Although we can usually incorporate MIDI sound files in our multimedia project without
learning any special skill, using editing tool to make our own MIDI file requires that we
understand the way music is sequenced, stored and published. We need to know about
tempos, clips, notations and instruments. And we will need a MIDI synthesizer or device
connected to our computer. Many MIDI applications provide both sequencing and notation
capabilities, and some let you edit both digital audio and MIDI within the same application.

Dhriti Saluja
 PROGRAM 3
AIM: Write a program to produce animation effect of triangle transform
into square and then into circle.
ALGORITHM:
1. START
2. INITIALIZE THE GRAPHICS.
3. SET THE COLOUR OF THE TRIANGLE.
4. DRAW THE POLYNOMIAL FROM THE TRIANGLE.
5. SET ITS COLOUR AND THEN TRANSFORM WHOLE INTO A CIRCLE AND FILL IN SOME
COLOURS.
6. STOP.
SOURCE CODE:
#include<stdio.h> #include<conio.h> #include<graphics.h> void main()
{
int gd=DETECT,gm,poly[8],c; initgraph(&gd,&gm,""); poly[0]=250;
poly[1]=200; poly[2]=200; poly[3]=300; poly[4]=300; poly[5]=300; poly[6]=250; poly[7]=200;
setcolor(6);
setfillstyle(SOLID_FILL,11); fillpoly(4,poly);
getch(); for(c=1;c<=50;c++)
{
poly[0]--; poly[6]++;
drawpoly(4,poly); delay(100);
}
getch(); for(c=1;c<=25;c++)
{
setcolor(6);
circle(250,250,75-c); floodfill(1,1,10); delay(9);
}
getch();
}

Dhriti Saluja
Output

Dhriti Saluja
 Program 4

AIM: STUDY ABOUT THE MORPHING.

Morphing is a popular effect in which one image transform into another.In

morphing the warping of one still or moving image into another take place.
This is rather like twinning in that you define the start image and the end
image but the two images are completely different. The software works out a
sequence of steps so that the first image appear to change gradually into the
second object. In morphing setting key point is crucial for smooth transition
between two images.
Morphing automatically animate the change of one image into another as a
special effect. It is the wrapping of one still or moving image into another.
Some products that offer morphing features are black belt’s easy morph and
wini mages. Human software squizz, valis group flo,metaflo and movieflo.
The morphed images were built at a rate of 8 frames per second with each
transition taking a total of 4 second and the number of key points was held to a
minimum to shorten rendering time. The point you set in the start image will
move to the corresponding point in the end image. This is important for things
like eyes and noses which you want to end up in about the same place after
the transition. The more keypoints the smoother the morph.

Dhriti Saluja
MORPHING USING ADOBE PHOTOSHOP :-

Dhriti Saluja
 Program 5
AIM: STUDY ABOUT THE HTML(HYPER TEXT MARKUP LANGUAGE)
Structure
1. Basics of HTML
2. How to create HTML document
3. Steps for creating simple HTML document

1. Basics of HTML
The Web pages or materials in the form of hypermedia documents accessed through the
Internet, cab be located anywhere in the world.
No matter where they are originated, most of the web documents are created using
Hypertext Markup Language (HTML). HTML is powerful authoring language and found in
different versions like HTML 4.2, HTML 4.0, HTML 3.2, HTML 3.0 and HTML 2.
HTML element can be used to define document structure & format, HTML element is the
inclusive region defined by either a single tag or a pair of tags. A tags is a string in the
language surrounded by a less than (<) and a greater than (>) sign. A opening tag does not
begin with a slash (/). An ending or closing tag is a string that begins with a slash (/).
HTML documents format textual information with embedded markup tags that provide style
and structure information. Whole document in HTML is surrounded by <HTML> and
</HTML>.

2. How to create HTML document

HTML document cab be created using any HTML editor and text editor like notepad etc.

3. Steps for creating simple HTML document

1. Go to Start -> Programs->Accessories->Notepad.
2. Begin with a document type tag and an <HTML> opening tag. Enter the following line in
your doc.
<HTML>
3. Indicate that you are beginning the head element of document by issuing the
<HEAD> opening tag. If a <HEAD> element is included, it must appear within an <HTML>
element. The following line should appear next in your document:

Dhriti Saluja
<HEAD>
4. The <TITLE> element is used to indicate the title of an HTML document.
<TITLE> tags are placed with in the head component of a document and the title is placed
between the opening and closing <TITLE> tags. Add this <TITLE> element to your document.
<TITLE>My First Page</TITLE>
5. To end the head area issue a <HEAD> closing tag.
</HEAD>
Thus the <HEAD> element is nested within the <HTML> element.
6. At this point the body of the document is developed. A <BODY> opening tag indicates that
this point has been reached. Enter the following line.
<BODY>
7. In this case, the body of document contains a simple text statement for now, add the
following statement in your file:
Hello World !
8. A </BODY> closing tag marks the end of the <BODY> element. Similar to the Head
element, the <BODY> element is also completely nested within the
<HTML> element. To end the <BODY> element, issue the closing tag in your document.
</BODY>
9. Finally, terminate the <HTML> tag with </HTML> as shown below:
10. Save your document as mypage.html

11. To view the document open the .html document in the browser.

Dhriti Saluja
Dhriti Saluja
 Program 6
AIM: STUDY ABOUT THE FLASH
Structure
1. How to work in Flash
2. Different Menus
3. Different Tools

1. How to start and work on flash

To open flash
Step 1: Click on Start
Step 2: Click Program
Step 3: Click Macromedia Flash
Step 4: Click on Flash
After doing this you will get the flash screen, which looks like as given below:

Dhriti Saluja
The default file extension for a Flash movie file is .fla. Flash is used for creating Vector
Animation / Movie. We can publish our flash movie file in .htm, .swf, .jpg, .gif, .exe, .mov,
.png or as a projector file.

2. Different Menus
File Menu: Under file menu apart from the regular features, the other options available are
Import, Export Movie, and Export Image. With these options you can import any
image/movie or can export your complete movies or the scene as an image. Publish setting,
Publish preview and Publish options helps you to publish your movie in the desired format,
and before publishing you can preview the movie.
Edit Menu: Apart from the regular features like cut, copy, paste etc. it also provides an
option called Edit Symbol. This option helps us to edit the symbol (Button). The four states
of button are: Over, Down, Hit and
View Menu: Options available are Goto, 100%, Show Frame, Show All. These options helps
to goto a particular frame (first, last, next, previous) or scene, shows the current frame or all
the frames. Also available are Outline, Timeline, Workarea, Rulers, Grid, Snap. With the help
of these options you can the view the frames as outlines, toggles on/off the
timeline/workarea/rulers/grid. Snap helps to snap the object to the grid.
Insert Menu: The options Layer, motion guide, Frame, Key Frame, Blank Key Frame, Scene
etc helps to insert the desired option(s). Convert to Symbol option helps to convert the
editable object to Symbol / Button / Movie clip etc.
Modify Menu: The options under this menu helps to modify the object / layer / movie /
scene etc. Under Transform option you have Scale, Rotate, Rotate Left, Rotate Right, Flip
Horizontal, Flip Vertical; these options help to modify the object / image. Under Arrange
option you have Bring to Front, Send to Back, Move Ahead, Move Behind; these help to
arrange the object in order (in a layer). Other options available are; Group, Ungroup, Align
(for grouping / ungrouping / align objects), Break apart (converting a symbol to editable
object), Frames > Reverse (to reverse the frames of movie) and Instance (used for providing
properties to the symbols. With the help of this option you can attach an Action to the
symbol / button)
Control Menu: The options available under this menu are for controlling the movie i.e. Play,
Forward, Rewind, Test Movie, Test Scene, Play in Loop etc.
Libraries Menu: Under this you will find the Libraries for Buttons, Advance Buttons,
Graphics, Movie Clips and Sound.

Dhriti Saluja
3. Different Tools

Use Arrow Tool: Use the arrow tool to select entire objects by clicking them or by dragging
to enclose them within a rectangular selection marquee.

Lasso tool: Use the lasso tool and its polygon lasso modifier to select objects by drawing
either a freehand or straight-edged selection area. When using the lasso tool, you can
switch between the freeform and straight- edged selection modes.

Text tool (“A” in the toolbar).

Use the text tool to write anything in your scene/movie. The modifiers available are, font
style, font size, color, Bold, italic, alignment, paragraph and text field.

You can use the line, oval, and rectangle tools to easily create these common shapes. The
oval and rectangle tools let you stroke and fill the shape as you draw it. The rectangle tool
lets you draw rectangles with square or rounded corners.

Line tool: Line tool can have only the thickness and the style. You can customize the list
of options available with the line width and line style modifiers.

Oval tool: Click the oval tool and then draw an oval object. Using the fill color and
stroke color modifier respectively you can fill the oval and also can have a different colored
outline. Also you can define the thickness and the style of the outline of the oval object.

Rectangle tool: Click the rectangle tool and then click the round rectangle radius
modifier to define a 20 point curve. The more you give radius the more it will be of circular.
Here also you can set the outline style and thickness.

Dhriti Saluja
Pencil tool: the pencil tool is unique to Flash. Use it to draw lines, shapes, or freehand
forms. The pencil tool has three modifiers; straighten, smooth and ink. After you draw lines,
Flash straightens or smoothes them. The amount of straightening or smoothing depends on
the selected drawing mode.

Brush tool: The brush tool draws brush-like strokes as if you were painting. The brush
tool lets you create special effects, including calligraphic effects and painting with the image
in an imported bitmap.

The brush tool has these modifiers, Paint options, fill color, gradient, brush size, brush shape
and lock fill. The brush tool has different paint options as shown in the picture next to the
tool bar. Using these options you can draw or fill an object as shown below.

Original image, Paint Normal, Paint Behind, Paint Fills, Paint Selection, and Paint Inside

Dhriti Saluja
  Paint Normal paints over lines and fills on the same layer.
 Paint Behind paints in blank areas of the Stage, leaving lines and fills unaffected.
Paint Fills paints fills and empty areas, leaving lines unaffected.
 Paint Selection paints the selected fill.
 Paint Inside paints the fill in which you start a brush stroke and never paints lines.

Paint bucket tool: Used to change the color of existing paint and fill empty areas
surrounded by lines. You can fill an area with a gradient the same way you can with a solid
color.
With Inkbottle you can stroke lines and shapes with only solid colors you've already
drawn, but not with gradients or bitmaps. Stroke attributes also include line width and
line style .

The Eraser tool erases lines and fills. Customize it to erase only lines, only fills, only selected
fills, or only the fill on which you started erasing. The eraser tool can be either round or
square, and have one of five sizes.

 Erase Normal erases lines and fills on the same layer. Erase Fills erases only fills; lines
are not affected.
 Erase Lines erases only lines; fills are not affected.
 Erase Selected Fills erases only the currently selected fills and does not affect lines,
selected or not.
 Erase Inside erases only the fill on which you begin the eraser stroke. If you begin
erasing from an empty point, nothing will be erased. Lines are unaffected by the
eraser in this mode.
The faucet option under eraser tool erases the fill color. You can also erase lines with the
faucet modifier.

Dhriti Saluja
 Program 7
AIM: STUDY ABOUT THE DREAMWEAVER
Structure
1. How to work in Dreamweaver
2. To save your file
3.Different Menus
4.Adding Layers in Timeline
5.Inserting Scripts
6.Inserting external medias
7.Adding SSI files
8.Adding CSS styles
9.Adding XML files
10. Exporting Dreamweaver file as XML file

1. HOW TO WORK IN DREAMWEAVER

WHERE AND HOW TO OPEN DREAMWEAVER
Step 1: Click on Start Step 2: Select Program
Step 3: Select Macromedia Dreamweaver Step 4: Click on Dreamweaver
You will get the screen as given below:

Dhriti Saluja
On opening Dreamweaver you will get 3 main windows, (1) Object; which contains
Character, Common, Forms, Frames, Head and Invisible. Many options are available under
these, like under common you will get, insertion of image, rollover image, layer, tabular
data, horizontal bar, line break, email link, date, flash movie, fireworks object, shockwave
file, generator, plug-ins, active x controls, SSI etc; under character you will find some special
character/symbols like ©, ®, £, ¥, ™ etc; under frames you will find different type/style of
frames; under forms you will find all the elements of forms, like
text box, password box, radio button, check box, selection box, jump menu, submit & reset
button etc; (2) Properties; which provides the properties of the selected object/item, page
properties etc; (3) Launcher; which contains: Site, Library, HTML Style, CSS Style, Behaviors,
History, HTML Source; On clicking any of the item on the Launcher the subsequent window
opens up.
Before creating your web page you have to create a Root directory in which all of your work
will be saved. Then in dream weaver create a Site and Provide the Root Directory (which you
have created). To do this;
Step 1: Select Site from Launcher window
Step 2: Click on Define Site
Step 3: Click on NEW
Step 4: Give a name under “Site Name”
Step 5: Select the folder by browsing under “Local root folder”
Step 6: Click on OK
Step 7: Click on DONE
Now start working on Dreamweaver.
Write your text, format the text, insert picture through Object window or by INSERT ->
IMAGE. The Insert Menu provides you all the features available under the Object window.
The modify menu provides you to modify the selection properties, page properties, link,
table, frames etc. The Text menu helps to do all the formatting for the text, like selecting
font, font-size, color, alignment etc.

Dhriti Saluja
2. TO SAVE YOUR FILE
Step 1: Click on FILE
Step 2: Click on SAVE
Step 3: Choose the folder in which you want to save
Step 4: Provide a name to the file (with .htm / .html extension)
Step 5: Click on SAVE

3. DIFFERENT MENUS
File Menu: Under it we have New, Save, Save as, Save as template, Import, Export, Preview
in browser etc. options.
Edit Menu: In this menu we Cut, Copy, Paste, Undo, Redo, Select all, Find, Replace,
Preference etc. options which helps us in editing the document.
View Menu: Rulers, Grids, Plugins etc. are available under it.
Insert Menu: It contains almost all the things which are there in the Object tool bar.
Modify Menu: Under this we have Page properties, selection properties, Make link, remove
link, link target, table, layer, frameset, library, template, timeline, translate etc. This menu
helps to modify the page by choosing the option as per requirement.
Text Menu: It helps to format the text written in the page by providing details, such as
indent, outdent, list (ol, ul, dl), alignment, font, style, size, size increase, size decrease, HTML
style, CSS style, color etc. It also provides to check the spellings in the page.
Site Menu: This menu contains site files, site map, new site, open site, define site options.
Window Menu: It contains all the different windows, like, object, properties, launcher, site
file, site map, CSS, timeline, history, behavior, layer, frame, library, template etc.

4. ADDING A LAYER TO THE TIMELINE AND GIVING MOTION TO THE LAYER.

Step 1: Choose Layer from Common toolbar and draw a layer. Step 2: Write the text inside
the Layer.
Step 3: Click on Modify (when the layer is selected) Step 4: Click on Timeline
Step 5: Click on Add layer to timeline.
Step 6: Modify -> Timeline -> Select Record path to Layer Step 7: Drag the layer as per your
wish to define a path.
Step 8: Tick on Auto Play & Loop (if required) Step 9: Open it in the Browser to see the
effect.

Dhriti Saluja
5. INSERTING SCRIPTS TO YOUR PAGE
Step 1: Click on Insert
Step 2: Click on Script
Step 3: Choose the type of Script
Step 4: Write the code in “Content”
Step 5: To finish click on OK

6. INSERTING EXTERNAL MEDIA IN THE WEB PAGE

Step 1: Click on the icon in the object tool bar
Or
Insert -> Media -> Choose the media type to be inserted
Step 2: Find and select the file required (browse)
Step 3: Click on OK

7. ADDING SSI (SERVER-SIDE INCLUDE) TO THE PAGE

Step 1: Click on the icon in the object tool bar
Or
Insert -> SSI
Step 2: Select the file Step 3: Add the file
Step 4: Provide the URL (where to be attached)
Step 5: Provide information on Relative to the document or to the “Site Root”
Step 6: Click on OK

TO SHOW/HIDE THE SSI DOCUMENT IN THE PAGE

Step 1: Click on Edit
Step 2: Select reference
Step 3: Select Translation
Step 4: Click on SSI

Dhriti Saluja
Step 5: For showing the SSI file; choose one from the following option:
a) a) in all files
b) b) in no files
c) c) in files with extension (stm, htm, html, shtm, shtml)
d) d) in files matching one of these expressions “<!-- #include”
Example: <!--#include virtual="/virtual campus/bitmain/result.html" -->
Step 6: Click on OK

8. ADDING CSS STYLE TO YOUR PAGE

Step 1: Click on Window Menu
Step 2: Select CSS Styles
Or Click on CSS Styles in the “Launcher”
Step 3: Click on New to create a new CSS style
Step 4: Choose the Type
a) a) Make custom style
b) b) Redefine HTML
c) c) Use CSS Selection
Step 5: Give a name
Step6: Click OK
On choosing (a) of step 4 you will get a new screen in which you have to provide the
following details in Category:
i. Type: Provide the Font, Size, Style, Weight, Decoration, then click OK
ii. Background: provide a Color or insert an image, then click OK
iii. Block: Give the alignment style, then click OK
iv. Box: Provide the margin setup of Top, Left, Right & Bottom, then click OK
v. Border: Provide the width & color, then click OK
vi. List: Select the list type (OL, UL, DL), then click OK
vii. Positioning: Provide the style, Visibility, Z-index, Placement (Top, Left, Right &
Bottom), click OK
After providing the details, select the style from the CSS style window. Choose where to
apply this style (body, p, layer etc), by clicking on Apply button in the CSS style window.

Dhriti Saluja
9. ADDING A XML FILE TO YOUR PAGE
Step 1: Choose File -> Import XML into Template
Step 2: Select the XML file & click Open
When an XML file is imported, Dreamweaver merges the XML content into the template,
which is being specified in the XML file and shows the result in the document window of
Dreamweaver. If that specified template is not found then Dreamweaver prompts to select
another template for use.
The XML file should contain the name of the template and editable region as XML tags.
EXAMPLE:
<doctitle>
<![CDATA[<title>newtemplate</title>]]>
</doctitle>
<Edit-Region>
<![CDATA[{Edit-Region}]]>
</Edit-Region>
Here doctitle identifies the title of the template and edit-region identifies the editable
region.
But in a standard Dreamweaver file XML tags use the “item name”. The above example
(XML tags) is given below in standard Dreamweaver file:
<item name="doctitle">
<![CDATA[ <title>newtemplate</title>]]>
</item>
<item name="Edit-Region">
<![CDATA[{Edit-Region}]]></item>
</item>
Here “item name=doctitle” identifies the title of the template and “item name=edit region”
identifies the editable region.

Dhriti Saluja
10. TO EXPORT A DREAMWEAVER DOCUMENT AS XML FILE
Step 1: Choose File -> Open,
Step 2: Select the document that uses a template (and has editable regions)
Step 3: Click Open
Step 4: Choose File -> Export -> Export Editable Regions as XML.
Step 5: In the XML dialog box, choose a tag notation
Step 6: Click OK.
Step 7: Enter a name for the XML file
Step 8: Click Save.
When the document is exported, the generated XML file contains the name of the template
the document is using and all editable region names.

Dhriti Saluja
 Program 8
AIM: STUDY ABOUT THE PHOTOSHOP
Structure
1. About Photoshop
2. Saving your work
3. Tools available in photoshop
4. Different Menus
5. Different windows
6. Different menu

1. ABOUT PHOTOSHOP
Adobe Photoshop – the imaging software application - has become more than an integral
part of graphic designers’ working tools. Photoshop has earned the reputation of being a
mysterious, magical environment where reality is twisted and reshaped, where
disintegrating family photos are returned to perfect condition, and where the line between
illustration and photography is freely crossed.
Photoshop provides you some special features like, Image retouching, Advanced Imaging,
Special effect using filters, creating stunning backgrounds, images, texts and buttons for
your web pages. This is best software application available in the market for Image
Manipulation.

HOW TO WORK IN PHOTOSHOP

How to open Photoshop
Step 1: Click on START Step 2: Select Programs
Step 3: Select Adobe
Step 4: Select PhotoShop 5.x Step 5: Click on Photoshop 5.x

Dhriti Saluja
After finishing doing this you will get a screen like this (below):

The above screen provides you the tool bar and few other windows, but not the work area.
For work area;
Step 1: Click on FILE
Step 2: Click on NEW
The next screen will appear, which will require few inputs from you, like
i. The height and width of the work area in pixel / inches / cm / points / picas / columns,
ii. The resolution for the file
iii. The image color mode Bitmap / Grayscale / RGB / CMYK / lab color
iv. The last option for the type of background required white / background color /
transparent.
v. Give a file name under “Name”
vi. Click on OK

Dhriti Saluja
The Screen looks like as given below.

The normal size for work area is 640 pixels (width) x 480 pixels (height) with the resolution
72 pixels/inch.
Now as you have got the work area, you can start working on it.
With the help of the Photoshop tool bar you can create, edit, retouch, manipulate your
drawing or imported image.

2. TO SAVE YOUR WORK

Step 1: Click on File
Step 2: Click on Save / Save as
Step 3: Select the directory under which the file you want to save
Step 4: Provide a name (if not provided at the time of creating a new file)
Step 5: Click on Save
Note: Photoshop saves the file in .psd file format
For saving your work either in .jpg or in .gif for your webpage do the following;
For JPEG file format:
Step 1: Click on File
Step 2: Click on Save a copy…
Step 3: Select the directory under which the file you want to save and Provide a name
Step 4: Select JPEG from under the “Save as” option.
Step 5: Click on Save

Dhriti Saluja
For GIF file format:
Step 1: Click on File Step 2: Click on Export
Step 3: Click on GIF89a export
You will get the following screen

Step 4: without changing anything (as above) Click on OK

Step 5: Select the directory under which the file you want to save

Dhriti Saluja
For a new page (work area)
Click File > New (the screen look like as given below)

In the Document Setup window do the following:

Step 1: Select the page size (letter, Legal, Tabloid, A3, A4 etc.)
Step 2: Select the orientation {Tall (same as portrait) / Wide (same as landscape)}
Step 3: Check the options for double sided and facing pages or only double sided pages, if
you want the pages to be in mirror of one another, or else don’t check the double-sided
option this will give a normal page. When Double-sided is selected, side margins are labeled
Inside and Outside. Otherwise, side margins become Left and Right.
Step 4: Insert the number of pages you require.
Step 5: Provide the starting page number.
Step 6: Click on Numbers to select the type of page number (Numeric / Roman / Alphabets).
Step 7: Set the output resolution (dots per inch).
Step 8: Select the Printer.

Dhriti Saluja
Step 9: After providing the details click on OK Now your environment looks like

3. TOOL BOX
Choose Window > Show Tools or Window > Hide Tools to display or hide the toolbox.

Dhriti Saluja
Pointer tool: Used to select, move, and resize text blocks and graphics.
Text tool: Used to type, select, and edit text.
Rotating tool: Used to select and rotate objects.
Cropping tool: Used to trim imported graphics.
Line tool: Used to draw straight lines in any direction.
Constrained line tool: Used to draw vertical or horizontal lines.
Rectangle tool: Used to draw rectangles and squares.
Rectangle frame tool: Used to create a rectangular placeholder for text and graphics or you
can define an area for the text / graphics.
Ellipse tool: Used to draw ellipses and circles.
Ellipse frame tool: Used to create a circular or oval placeholder for text and graphics or you
can define an area for the text / graphics.
Polygon tool: Used to draw basic polygons.
Polygon frame tool: Used to create a polygonal placeholder for text and graphics or you can
define an area for the text / graphics.
Hand tool: Used to scroll the page or to preview and test hyperlinks.
Zoom tool: Used to magnify or reduce an area of the page.
When you select any of these tools, you get the properties for that tool in the property bar.
With the help of the property bar you can rotate, skew the shape and format the text.

4. DIFFERENT MENUS

In PageMaker you will find these menus; File, Edit, Layout, Type, Element, Utilities, View,
Window and Help. The options available under these menus are given below.
File Menu: The options available under file menu are; New, Open, Recent Publication, Close,
Save, Save as, Revert, Place, Acquire, Export, Document setup, Printer style, Print,
Preferences, Send Mail and Exit.
You can Acquire either a source by selecting Select source or an image by selecting Acquire
Image (only .tif file). You can export your file as Adobe PDF / HTML / Graphic
/ Text. You can set your preferences by selecting any of these options under Preferences
General / Online / Layout adjustment / Trapping.
To change the rulers from Inches to Millimeter or any other measuring format do the
following:
Click on File > Preferences > General

Dhriti Saluja
On doing this, you will get the following screen;

In this select the type for “Measurement in”, select the type for “Vertical ruler”. On
selecting this two the horizontal and vertical nudge under control pallet will change to the
same automatically. Horizontal nudge is dependent on “Measurements in” and vertical
nudge is dependent on “Vertical ruler”. The different measuring formats are; inches, inches
decimal, millimeters, picas and ciceros for “Measurement in” and for “Vertical ruler” you
will find all these plus custom. For setting the font style, size, graphics size etc. click on the
“More” button for more preference. The screen looks like as given below:

Dhriti Saluja
Edit Manu: The options available under edit menu are; Undo/Redo, Cut, Copy, Paste,
Clear/Delete, Select all, Deselect all, Paste special, Paste Multiple, Insert object, Edit Story,
Edit Original. You can insert any object (format) with the help of Insert Object. With the help
of Paste multiple you can paste as many number of copies of an object at a single go. By
selecting paste multiple you will get the following screen, all you have to do is to provide the
number of copies you require and the Horizontal and Vertical offset (position) from the
original object.

Paste Special will paste the object as Bitmap image.

Layout Menu: The options available under Layout menu are; Goto Page, Insert pages,
Remove Pages, Sort Pages, Go Back, Go Forward, Column Guides, Copy Master Guides, Auto
flow. These options helps to insert, remove pages, goto a particular page, either go forward
or backward (pages), Inserting columns, interchange the pages (sort).

Type Menu: The options available under type menu are; Font (for different fonts), Size (font
size), Leading (line spacing), Type Style (bold / italic / underline etc), Expert Kerning, Expert
Tracking and horizontal scale (these 3 options are used for character spacing), Character (for
formatting of the text) (screen given below),

Dhriti Saluja
Paragraphs (used for paragraph alignment, spacing, indentation etc) (screen given below),

Indents / Tabs (used for specifying tabs) (screen given below),

Hyphenation (used for defining the style and type hyphen) (screen given below),

Alignment (left, center, right, justify or force justify; force justify will force the line to align
justify), Style (used for defining the style of your text; body text, caption, hanging indent,
headline or subheads), Define styles (same as style) (screen given below)

Dhriti Saluja
Element Menu: The options available under Element menu are; Fill, Stroke, Fill & Stroke,
Frame (attach content / Frame option / change to frame / next frame / previous frame /
remove from threads / delete content), Arrange (bring to front / bring forward / send
backward / send to back), Align objects, Text wrap, Group, Ungroup, Lock position, Unlock,
Mask, Unmask, Image (image control / CMS(Color Management system) source
/ Photoshop effect). Polygon settings, Rounded corners, link into, Link options, Non-
printing, Remove transformation. Some of these options defined below.

Fill: Used for filling an object created in PageMaker. Fill option provides different types of
fills as shown below:

Dhriti Saluja
Stroke: It is used for providing an outline to the object created by using the PageMaker tool.
The different types of stroke options are as shown below:

Fill & Stroke: It is a combination of fill and stroke options. You can fill and stroke the object
at the same time. The options available under this are same as that of fill option and stroke
option. You can provide a color to your fill and stroke, adjust the color tint, also can make it
in reverse. Screen as shown below:

Dhriti Saluja
 Program 9
AIM: PROGRAM TO DRAW A LINE USING C OR C++ LANGUAGE.
ALGORITHM
1 START
2 DETECT THE GRAPHS AND ALSO INITIALIZE THE GRAPHICS.
3 TAKE THE POINTS BY WHICH YOU CAN DRAW A LINE
4 TAKE THE DIFFRENCE BETWEEN POINTS
5 FINALLY TAKE THE POINTS AND DRAW THE LINE
6 STOP.
SOURCE CODE
#include<stdio.h>
#include<conio.h>
#include<graphics.h>
#include<math.h>
#include<stdlib.h>
void main()
{
int gd=DETECT, gm;
initgraph(&gd,&gm,"");
float k=0;
float x1,y1,x2,y2,steps,xi,yi,dx,dy;
printf("enter the end points of a line");
scanf("%f,%f,%f,%f",&x1,&y1,&x2,&y2);
dx=x2-x1;
dy=y2-y1;
if(abs(dx)>abs(dy))
steps=abs(dx);
else
steps=abs(dy);

Dhriti Saluja
xi=dx/steps;
yi=dy/steps;
putpixel(x1,y1,20);
do
{
x1=x1+xi;
y1=y1+yi;
k=k+1;
putpixel(x1,y1,20);
}
while(k!=steps);
getch();

Dhriti Saluja
OUTPUT:

Dhriti Saluja