P.S.V.

COLLEGE OF ENGINEERING AND TECHNOLOGY

(Approved by AICTE, New Delhi and Affiliated to Anna University, Chennai)
Accredited by the NAAC with ‘A’Grade
(Inclusion Under Section 2(f) & 12(B) of the UGC Act,
1956)
(An ISO 9001: 2015 Certified Institution)
Bangalore - Chennai Highway, (NH-46),
Mittapalli, Balinayanapalli Post, Krishnagiri - 635 108

Department of Computer Science & Engineering

CCS352 – Multimedia and Animation Lab Manual

 lOMoARcPSD|28727123

Exercise No. 1
TO DESIGN A LOGO BY USING INKSCAPE SOFTWARE

Aim:
To design a logo by using inkscape software.

Procedure:
Step 1 - open inkscape software and create a new project

Step 2 - select the circle shape tool to design the below element

Prepared by Nandhini N ([email protected])

 lOMoARcPSD|28727123

Step 3 - select the same circle shape tool to design the below element with different sizes

Step 4 - select the below designed element and group that

Prepared by Nandhini N ([email protected])

 lOMoARcPSD|28727123

Step 5 - select the designed element and make a copy or duplicate and paste it.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Step 6 - select the circle shape tool to design a circle.

Prepared by Nandhini N ([email protected])

 lOMoARcPSD|28727123

Step 7 - Change the color for circle shape

Step 8 - place the circle shape in the center of the designed element.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Step 9 - draw the triangle shape using star tool

Step 10 - Change the color of triangle and place it in the center of the circle.

Result:
Thus the given logo design was completed successfully using inkscape software.

Prepared by Nandhini N ([email protected])

 lOMoARcPSD|28727123

Exercise No. 2
WORKING WITH AUDIO EDITING TOOLS(AUDACITY)

Aim:
To Work with audio editing tools like audacity.

Audacity:
Audacity is a free and open-source digital audio editor and recording application
software. Even two decades after its original launch date, Audacity remains one of the most
widely-used open source applications. It’s a free audio editor that works on Windows, Mac, and
Linux systems. It is developed by The Audacity Team. It was initially released on May 28, 2000.
After installing this nifty little package, you’ll find everything you need to record, edit, and
enhance the sound files.

2.1 Audio editing with Audacity:

1. Voice recording in Audacity:
To record our voice go to the home page of Audacity software Navigate to 'Audio Setup.'
From there, move down to 'Recording Device,' where you'll see a list of all installed devices. If
you've plugged in an external device like a Yeti stereo microphone, make sure you select that.

Adjust the recording level to edit the recording volume of audio.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Prepared by Nandhini N
 lOMoARcPSD|28727123

Once you've adjusted your volume, go ahead and hit that big red Record button. As you
start speaking, you'll be able to see the waveform change in real-time. When you're done, just hit
Stop.

If you want to hear how the last few sentences sounded? Just click on that part of the
waveform and click 'Play'.

2. Importing audio tracks:

To import audio tracks click on the project tab in the upper left corner of the screen.Then
click on import audio.Select the file you want to open. And Click open.

Prepared by Nandhini N
 lOMoARcPSD|28727123

3. Selecting audio tracks

To select all of the audio click on the edit tab, then click on select, then click on select all,
or press Ctrl A on the keyboard.
To select some of the audio track make sure the select tool in the upper left corner is
selected.Then click and hold at the beginning of the section you want to select.Then drag the
cursor to the end of the section you want to select.
To select from your cursor to the beginning or end click on the edit tab.Then click on
select.Then click on "cursor to end" or "start to cursor"

4. Splitting audio tracks

To split audio tracks you have to select the second have of what you want to split.Then
you click on the edit tab.Then click on split.(The second half of the split audio will move to a
seprate track)

Prepared by Nandhini N
 lOMoARcPSD|28727123

5. Exporting audio
To export the audio click on the File tab.Then click on "Export as WAV" or "Export as
MP3" (depending on the type of audio file you want).Then name the file and click save. (If the
sound is ever messed up after you export it as WAV or MP3 try exporting it as the other file type
than you used the first time)

Prepared by Nandhini N
 lOMoARcPSD|28727123

6. Sound Mixing in Audacity

To mix two tracks together, you can use the time shift tool to move the tracks up and
down the timeline. You might need to tweak the dB levels to make sure it’s nicely mixed and not
distorting.

7. Adding special effects to our audio

We can apply effects to either the entire audio file, or selectively to tracks and portions of
audio. Both are easily achieved with Audacity. To apply an effect, first select the track by
dragging over the portion of audio. Then, navigate to the "Effect" tab in the menu bar and choose
the effect you want to apply.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Fading In and Out in

Audacity Fading In
"Fading in" in Audacity refers to the audio editing process of gradually increasing the
volume at the beginning of an audio clip or track.
To apply this effect select a section in the audio and Click on Effects >> Fade In.Over the
selected length, the audio will now gradually fade in.

Fading Out
"Fading out" in Audacity is the opposite of fading in. It refers to the audio editing process
of gradually reducing the volume at the end of an audio clip or track.
Go to Effects and select Fade Out. Over the selected length, the audio will now gradually
fade out to silence over.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Perform audio compression by choosing a proper codec:

Audio Compression:
Audio compression is the process of reducing the size of audio files while maintaining
acceptable sound quality. It involves using algorithms to remove redundant or less perceptible
audio data. Compressed audio files are easier to store, transmit, and stream, making them ideal
for various applications, from music streaming to voice calls. Popular audio compression codecs,
like MP3, AAC, and OGG, are commonly used for achieving this balance between file size and
sound fidelity.

Codec :
Codecs (short for compressor-decompressor) are algorithms or software tools that encode
audio data in a way that reduces its file size. The choice of codec can significantly impact the
resulting audio quality and file size. By selecting the right codec, you can strike a balance
between file size and audio quality based on your specific needs, such as for streaming, storage,
or distribution purposes.

Types of Codec
There are various types of audio codecs used for compressing and encoding audio data.
Some of the commonly used audio codecs include:
MP3 (MPEG-1 Audio Layer 3): MP3 is one of the most popular and widely supported audio
codecs. It offers good compression while maintaining reasonable audio quality. It's often used
for music streaming and portable audio players.
AAC (Advanced Audio Coding): AAC is known for its superior audio quality compared to MP3
at similar bitrates. It's commonly used in applications like iTunes and various streaming
platforms.
FLAC (Free Lossless Audio Codec): Unlike the previous codecs, FLAC is a lossless codec,
which means it compresses audio without any loss of quality. It's popular for archiving high-
quality audio and is used by audiophiles.
OGG Vorbis: OGG is an open-source and patent-free codec known for its high-quality
compression. It's often used for streaming and gaming applications.
WAV (Waveform Audio File Format): WAV is an uncompressed audio format, so it doesn't use
traditional codecs for compression. It maintains the highest audio quality but results in large file
sizes.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Audio compression using the MP3 (MPEG-1 Audio Layer 3) codec on Audacity:
You can compress an audio file into MP3 in Audacity by simply exporting it as an MP3
format
Steps:
1. In Audacity, click "File" at the top of the screen.
2. In the drop-down menu, click "Export" and then choose "Export as MP3."
3. At the bottom of the dialog box in the Format Options section, choose your MP3 settings.
As a general rule, you'll get the best results by choosing "Constant" for the "Bit Rate
Mode" rather than one of the variable bitrate options. Choose the bitrate from the
"Quality" drop- down menu (if in doubt, choose 192 kbps or higher) and then save your
file.

In similar way you can compress your audio files into other codec forms such as
OGG,AAC,WAV.

Result:
Thus working with audio editing tools like audacity is done successfully.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Exercise No. 3
WORKING WITH VIDEO EDITING AND CONVERSION TOOLS

Aim:
Install OpenShot to Edit and mix video content, create special effects, add captions. Then
Compress and convert video file format to other popular formats.

Procedure:
Download and Install OpenShot:
• Go to the OpenShot website (https://www.openshot.org/).

• Download and install OpenShot for your operating system (Windows, macOS, or Linux).

Prepared by Nandhini N
 lOMoARcPSD|28727123

Import Your Video Clips:

• Open OpenShot.

• Click on "File" > "Import Files" and select the video clips you want to work with.
You can also drag and drop them into the project files area.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Arrange Your Clips:

• Drag and drop your video clips onto the timeline at the bottom of the OpenShot window.
You can arrange them in the order you want them to appear in your final video.

Editing and Trimming:

• To trim a video clip, select it on the timeline.

• Use the handles at the beginning and end of the clip to cut or trim as needed.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Create Special Effects:

• Select a clip on the timeline.

• Go to the "Effects" tab and choose from various options, such as adding text,
adjusting speed, or applying video transitions.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Add Captions:
• To add captions or text to your video, go to the "Title" tab. Choose from the title
templates or create your own. Drag and drop the title template onto the timeline above
the video clip where you want the caption to appear.

Export Your Video:

• Once you've edited and added all the elements you want, click the "Export" button.

Prepared by Nandhini N
 lOMoARcPSD|28727123

• Choose the export settings, including video format, quality, and destination folder.

• You can click the "Advanced" button to further customize the export settings, such as the
video and audio codec, resolution, frame rate, and bitrate. These settings allow you to
control the video quality and file size.

Prepared by Nandhini N
 lOMoARcPSD|28727123

• . Click "Export Video" and wait for the process to finish.

Result:
Thus the Installation of OpenShot video editor to Edit and mix video content and working
with its Features is done Successfully.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Exercise No. 4a
WORKING WITH WEB / MOBILE AUTHORING TOOLS

AIM:
To design simple Homepage and banners, logos, tables quick links etc using BlueGriffon.
ALGORITHM:
1. Start the program.
2. The code provided is HTML and CSS template for webpage.
3. To add the functionality, Add a ‘<script>’ tag within the ‘<head>’ or ‘<body>’ section of
your HTML to include JavaScript code.
4. Write a JavaScript functions to handle any interactive or dynamic behavior you want
to add.
5. For example, you can create functions to handle form submissions, perform client-
side validation, or update element on the page dynamically.
6. Use event listeners to trigger JavaScript functions when specific event occurs.
7. Common event include clicks, form submissions, and page load.
8. Stop the program.
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Computer Science Department</title>
<style>
/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

Prepared by Nandhini N
 lOMoARcPSD|28727123

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Banner styles */
.banner {
display: flex;
justify-content: space-between;

Prepared by Nandhini N
 lOMoARcPSD|28727123

align-items: center;
padding: 5px;
background-color: #f7f7f7;
}

.banner img {
max-width: 75%;
height: 5%;
}

/* Quick links styles */

.quick-links {
margin-top: 20px;
text-align: center;
}

.quick-links a {
display: inline-block;
text-decoration: none;
color: #333;
margin: 10px;
padding: 10px 20px;
border: 1px solid #333;
border-radius: 5px;
}

/* Table styles */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

table, th, td {
border: 1px solid #ccc;
}

th, td {
padding: 10px;
text-align: left;
}
</style>
</head>

Prepared by Nandhini N
 lOMoARcPSD|28727123

<body>
<header>
<h1></h1>
<h1></h1>
<h1></h1>
<h1 style="text-align: left;"></h1>
<h1 style="text-align: left;"></h1>
<h1 style="text-align: left;"><br>
</h1>
<h1 style="text-align: center;"><img
src="file:///C:/Users/gnana/OneDrive/Desktop/logo.jpg"

alt="" style="width: 151px; height: 137px;"></h1>

<h1>Computer Science Department</h1>
<h1></h1>
<h1 style="text-align: left;"></h1>
<p>Welcome to the Computer Science Department at TPGIT</p>
<h1 style="text-align: left;"></h1>
</header>
<nav>
<h1></h1>
<a href="#">Home</a> <a href="#">About Us</a> <a href="#">Courses</a> <a

href="#">Faculty</a> <a href="#">Contact</a> </nav>

<div class="container">
<div class="quick-links">
<h1 style="text-align: left;"></h1>
<a href="#">Explore</a> <a href="#">Learn More</a> <a href="#">Get
Started</a> </div>
<h2>Courses Offered</h2>
<table>
<tbody>
<tr>
<th>Course Name</th>
<th>Course Code</th>
<th>Instructor</th>
</tr>
<tr>
<td>Multimedia and Animation</td>
<td>CS5101</td>
<td>Prof. Smith</td>
</tr>
<tr>

Prepared by Nandhini N
 lOMoARcPSD|28727123

<td>Web Development</td>
<td>CSCI202</td>
<td>Prof. Johnson</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

OUTPUT:

RESULT:
Thus, the program to design simple Homepage with Banners, logos, tables quick links, etc is
created and the output is verified successfully.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Exercise No. 4b
SEARCH INTERFACE AND SIMPLE NAVIGATION USING BLUEGRIFFON

AIM:
To provide a search interface and simple navigation from the home page to the inside pages of
the website using BlueGriffon.
ALGORITHM:
a) Start the program.
b) Create HTML files for each webpage (index.html, about.html, courses.html,
faculty.html, contact.html).
c) Define the HTML structure :
a) In each HTML file, define the basic structure with ‘<html>’, ‘<head>’
and ‘<body>’ tags.
b) Include the necessary metadata within the ‘<head>’ section, such as charset and title.
c) Add internal CSS styles within ‘<style>’ tag for consistent styling across pages.
d) Create the header:
a) Inside the ‘<body>’ of each HTML file, create a ‘<header>’ element to display
the page title and brief description.
e) Create the navigation menu:
a) Below the header, include a `<nav>` element to create a navigation menu with
links to other pages.
b) Use `<a>` tags for each menu item and set the `href` attribute to link to the
respective HTML files.
f) Create the main content container:
a) Add a `<div>` element with the class "container" to hold the main content of
the page.
b) Apply styling to this container for a consistent layout.
g) Populate the content:
a) Within the container, create a `<div>` with class "content" to hold the
specific content of each page.
b) Add appropriate headings and paragraphs to convey information about the
Computer Science Department.

Prepared by Nandhini N
 lOMoARcPSD|28727123

c) For the "Courses" and "Faculty" pages, create tables to list course details and
faculty members.
8. Style the content:
a) Define CSS styles for various elements to achieve a consistent and
visually appealing design.
b) Customize styles for headers, links, navigation menu, tables, and other page elements.
c) Use CSS classes and IDs to target specific elements for styling.
9. Add images:
a) Include `<img>` tags to display images, such as the department logo and
faculty photos.
b) Set appropriate attributes for image sources, alt text, and dimensions.
10. Include contact information:
a) On the "Contact" page, list the department's address, email, and phone number in a
structured format.
11. Testing:
a) Ensure that all links within the navigation menu correctly point to the
corresponding HTML files.
b) Verify that the website's layout and styling are consistent and visually appealing.
c) Test the website on different browsers and devices to ensure compatibility.
12. Additional features (not present in the provided code):
a) Implement interactive features such as forms for user input or
JavaScript functionality.
b) Add more pages and content as needed for the website's specific requirements.
c) Consider optimizing the website for search engines (SEO) and
improving accessibility.

PROGRAM:
Main code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Computer Science Department</title>
<style>

Prepared by Nandhini N
 lOMoARcPSD|28727123

/* Reset some default styles for consistency */

body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-
serif; background-color:
#f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

Prepared by Nandhini N
 lOMoARcPSD|28727123

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Banner styles */
.banner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
background-color: #f7f7f7;
}

.banner img {
max-width: 75%;
height: 5%;
}

/* Quick links styles */

.quick-links {
margin-top: 20px;
text-align: center;
}

.quick-links a {
display: inline-block;
text-decoration: none;
color: #333;
margin: 10px;
padding: 10px 20px;
border: 1px solid #333;
border-radius: 5px;
}

/* Table styles */
table {
width: 100%;
border-collapse: collapse;

Prepared by Nandhini N
 lOMoARcPSD|28727123

margin-top: 20px;
}

table, th, td {
border: 1px solid #ccc;
}

th, td {
padding: 10px;
text-align: left;
}

/* Search bar styles */

.search-container {
text-align: center;
margin-top: 20px;
}

.search-box {
padding: 10px;
border: 1px solid
#ccc; border-radius:
5px;
}

.search-button {
padding: 10px 20px;
background-color: #444;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<header> <img src="file:///C:/Users/gnana/OneDrive/Desktop/logo.jpg" alt="Department
Logo"

style="width: 151px; height: 137px;">

<h1>Computer Science Department</h1>
<p>Welcome to the Computer Science Department at TPGIT</p>
</header>

Prepared by Nandhini N
 lOMoARcPSD|28727123

<nav> <a href="index.html">Home</a> <a href="C:%5CUsers%5Cgnana%5COneDrive

%5CDesktop%5Cmma%20lab%5CAbout.html">A bout
Us</a> <a href="C:%5CUsers%5Cgnana%5COneDrive%5CDesktop%5Cmma%20lab
%5CCourses.html"> Courses</a>
<a href="C:\Users\gnana\OneDrive\Desktop\mma lab\faculty.html">Faculty</a> <a href="C:\Users\
gnana\OneDrive\Desktop\mma lab\Contact.html">Contact</a> </nav>
<div class="container">
<div class="quick-links"> <a href="#">Explore</a> <a href="#">Learn More</a>
<a href="#">Get Started</a> </div>
<h2>Courses Offered</h2>
<table>
<tbody>
<tr>
<th>Course Name</th>
<th>Course Code</th>
<th>Instructor</th>
</tr>
<tr>
<td>Multimedia and Animation</td>
<td>CS5101</td>
<td>Prof. Smith</td>
</tr>
<tr>
<td>Web Development</td>
<td>CSCI202</td>
<td>Prof. Johnson</td>
</tr>
</tbody>
</table>
</div>
<!-- Search Interface -->
<div class="search-container"> <input class="search-box" placeholder="Search..."

type="text"> <button class="search-button">Search</button> </div>

</body>
</html>

Prepared by Nandhini N
 lOMoARcPSD|28727123

INDEX.HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Computer Science Department</title>
<style>
/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-
serif; background-color:
#f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

Prepared by Nandhini N
 lOMoARcPSD|28727123

nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Banner styles */
.banner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
background-color: #f7f7f7;
}

.banner img {
max-width: 75%;
height: 5%;
}

/* Quick links styles */

.quick-links {
margin-top: 20px;
text-align: center;
}

.quick-links a {
display: inline-block;
text-decoration: none;
color: #333;
margin: 10px;
padding: 10px 20px;
border: 1px solid #333;

Prepared by Nandhini N
 lOMoARcPSD|28727123

border-radius: 5px;
}

/* Table styles */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

table, th, td {
border: 1px solid #ccc;
}

th, td {
padding: 10px;
text-align: left;
}

/* Search bar styles */

.search-container {
text-align: center;
margin-top: 20px;
}

.search-box {
padding: 10px;
border: 1px solid
#ccc; border-radius:
5px;
}

.search-button {
padding: 10px 20px;
background-color: #444;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>

Prepared by Nandhini N
 lOMoARcPSD|28727123

<header> <img src="file:///C:/Users/gnana/OneDrive/Desktop/logo.jpg" alt="Department

Logo"

style="width: 151px; height: 137px;">

<h1>Computer Science Department</h1>
<p>Welcome to the Computer Science Department at TPGIT</p>
</header>
<nav> <a href="C:%5CUsers%5Cgnana%5COneDrive%5CDesktop%5Cmma%20lab
%5Cindex.html">H ome</a>
<a href="about.html">About Us</a> <a href="courses.html">Courses</a> <a

href="faculty.html">Faculty</a> <a href="contact.html">Contact</a> </nav>

<div class="container">
<div class="quick-links"> <a href="#">Explore</a> <a href="#">Learn More</a>
<a href="#">Get Started</a> </div>
<h2>Courses Offered</h2>
<table>
<tbody>
<tr>
<th>Course Name</th>
<th>Course Code</th>
<th>Instructor</th>
</tr>
<tr>
<td>Multimedia and Animation</td>
<td>CS5101</td>
<td>Prof. Smith</td>
</tr>
<tr>
<td>Web Development</td>
<td>CSCI202</td>
<td>Prof. Johnson</td>
</tr>
</tbody>
</table>
</div>
<!-- Search Interface -->
<div class="search-container"> <input class="search-box" placeholder="Search..."
type="text"> <button class="search-button">Search</button> </div>
</body>
</html>

Prepared by Nandhini N
 lOMoARcPSD|28727123

ABOUT.HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Us - Computer Science Department</title>
<style>
/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-
serif; background-color:
#f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

Prepared by Nandhini N
 lOMoARcPSD|28727123

nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Content styles */
.content {
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>About Us</h1>
</header>
<nav> <a href="index.html">Home</a> <a href="about.html">About Us</a> <a

href="courses.html">Courses</a> <a href="faculty.html">Faculty</a> <a

href="contact.html">Contact</a> </nav>
<div class="container">
<div class="content">
<h2>Welcome to the Computer Science Department</h2>
<p> The Computer Science Department at TPGIT is committed to
providing high-quality education and research opportunities in the field of
computer science. Our dedicated faculty members and cutting-edge
curriculum ensure that students receive a well-rounded education
in computer science. </p>
<p> We offer a wide range of courses, including multimedia and
animation, web development, and more. Our experienced instructors are
passionate about teaching and mentoring students to help them succeed
in their academic and professional careers. </p>

Prepared by Nandhini N
 lOMoARcPSD|28727123

</div>
</div>

</body>
</html>

COURSES.HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Computer Science Department</title>
<style>
/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-
serif; background-color:
#f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

Prepared by Nandhini N
 lOMoARcPSD|28727123

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Banner styles */
.banner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
background-color: #f7f7f7;
}

.banner img {
max-width: 75%;
height: 5%;
}

/* Quick links styles */

.quick-links {
margin-top: 20px;
text-align: center;
}

Prepared by Nandhini N
 lOMoARcPSD|28727123

.quick-links a {
display: inline-block;
text-decoration: none;
color: #333;
margin: 10px;
padding: 10px 20px;
border: 1px solid #333;
border-radius: 5px;
}

/* Table styles */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

table, th, td {
border: 1px solid #ccc;
}

th, td {
padding: 10px;
text-align: left;
}

/* Search bar styles */

.search-container {
text-align: center;
margin-top: 20px;
}

.search-box {
padding: 10px;
border: 1px solid
#ccc; border-radius:
5px;
}

.search-button {
padding: 10px 20px;
background-color: #444;
color: #fff;
border: none;

Prepared by Nandhini N
 lOMoARcPSD|28727123

border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<header> <img src="file:///C:/Users/gnana/OneDrive/Desktop/logo.jpg" alt="Department
Logo"

style="width: 151px; height: 137px;">

<h1>Computer Science Department</h1>
<p>Welcome to the Computer Science Department at TPGIT</p>
</header>
<nav> <a href="C:%5CUsers%5Cgnana%5COneDrive%5CDesktop%5Cmma%20lab
%5Cindex.html">H ome</a>
<a href="about.html">About Us</a> <a href="courses.html">Courses</a> <a

href="faculty.html">Faculty</a> <a href="contact.html">Contact</a> </nav>

<div class="container">
<div class="quick-links"> <a href="#">Explore</a> <a href="#">Learn More</a>
<a href="#">Get Started</a> </div>
<h2>Courses Offered</h2>
<table>
<tbody>
<tr>
<th>Course Name</th>
<th>Course Code</th>
<th>Instructor</th>
</tr>
<tr>
<td>Multimedia and Animation</td>
<td>CS5101</td>
<td>Prof. Smith</td>
</tr>
<tr>
<td>Web Development</td>
<td>CSCI202</td>
<td>Prof. Johnson</td>
</tr>
</tbody>
</table>
</div>

Prepared by Nandhini N
 lOMoARcPSD|28727123

<!-- Search Interface -->

<div class="search-container"> <input class="search-box" placeholder="Search..."

type="text"> <button class="search-button">Search</button> </div>

</body>
</html>

FACULTY.HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Faculty - Computer Science Department</title>
<style>
/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-
serif; background-color:
#f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {

Prepared by Nandhini N
 lOMoARcPSD|28727123

font-size: 18px;
}

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Content styles */
.content {
padding: 20px;
}

/* Faculty list styles */

.faculty-list {
list-style-type: none;
margin: 0;
padding: 0;
}

.faculty-item {
margin-bottom: 20px;
padding: 10px;
border: 1px solid
#ccc; border-radius:
5px;
}

Prepared by Nandhini N
 lOMoARcPSD|28727123

/* Faculty image styles */

.faculty-image {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<h1>Faculty</h1>
</header>
<nav> <a href="index.html">Home</a> <a href="about.html">About Us</a> <a

href="courses.html">Courses</a> <a href="faculty.html">Faculty</a> <a

href="contact.html">Contact</a> </nav>
<div class="container">
<div class="content">
<h2>Our Faculty</h2>
<ul class="faculty-list">
<li class="faculty-item"> <img class="faculty-image"
src="file:///C:/Users/gnana/Downloads/male.jpg"

alt="Prof. John Doe" style="width: 114px; height: 89px;">

<h3>Prof. John Doe</h3>
<p>Teaches Computer Science</p>
</li>
<li class="faculty-item"> <img class="faculty-image"
src="file:///C:/Users/gnana/Downloads/male.jpg"

alt="Prof. Jane Smith" style="width: 113px; height: 102px;">

<h3>Prof. Jane Smith</h3>
<p>Teaches Web Development</p>
</li>
<!-- Add more faculty members as needed -->
</ul>
</div>
</div>
</body>
</html>

Prepared by Nandhini N
 lOMoARcPSD|28727123

CONTACT.HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact - Computer Science Department</title>
<style>
/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-
serif; background-color:
#f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */
header {
background-color: #17252A;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

/* Navigation styles */
nav {
background-color: #3AAFA9;
color: #fff;
text-align: center;
}

Prepared by Nandhini N
 lOMoARcPSD|28727123

nav a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Content styles */
.content {
padding: 20px;
}

/* Contact information styles */

.contact-info {
margin-top: 20px;
}

.contact-info h3 {
font-size: 24px;
margin-bottom: 10px;
}

.contact-info p {
font-size: 18px;
}
</style>
</head>
<body>
<header>
<h1>Contact</h1>
</header>
<nav> <a href="index.html">Home</a> <a href="about.html">About Us</a> <a

href="courses.html">Courses</a> <a href="faculty.html">Faculty</a> <a

Prepared by Nandhini N
 lOMoARcPSD|28727123

href="contact.html">Contact</a> </nav>
<div class="container">
<div class="content">
<h2>Contact Information</h2>
<div class="contact-info">
<h3>Department Address:</h3>
<p>Thanthai Periyar govt institute of technology,</p>
<p>Bagayam,</p>
<p>Vellore-02.</p>
</div>
<div class="contact-info">
<h3>Email:</h3>
<p>[email protected]</p>
</div>
<div class="contact-info">
<h3>Phone:</h3>
<p>+1 (123) 456-7890</p>
</div>
</div>
</div>
</body>
</html>

OUTPUT:

Prepared by Nandhini N
 lOMoARcPSD|28727123

Prepared by Nandhini N
 lOMoARcPSD|28727123

RESULT:
Thus, the program to provide a search interface and simple navigation from the home page to the
inside pages of the website using BlueGriffon was created and the output was verified
successfully.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Exercise No. 5a
WORKING WITH ANIMATION TOOLS

Aim:

To perform a simple 2D animation with sprites using Wick Editor.

Procedure:

1. Open Wick Editor: Start by opening Wick Editor in your web browser orafter
downloading and installing it.

2. Create a New Project: Click on "New Project" to start a new project.

3. Import Sprites: You'll need sprites for your animation. To import them:
• Click on the "Library" tab.

• Click "Import" and select the image file(s) for your sprite(s).
Commonimage formats like PNG or JPEG are supported.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Prepared by Nandhini N
 lOMoARcPSD|28727123

4. Add a New Scene: Scenes are like different sections of your animation. Toadd a scene:
• Click on the "Scenes" tab.

• Click the "+" button to create a new scene. Give it a name if you like.

5. Create a Sprite Layer: A sprite layer is where you'll place your sprites. Toadd a
sprite layer:

• Click on the "Layers" tab.

• Click the "+" button to create a new layer and select "Sprite."

Prepared by Nandhini N
 lOMoARcPSD|28727123

6. Place Sprites on the Stage: Go to your new sprite layer and drag your imported
sprites onto the canvas (stage). You can resize and reposition themas needed.

7. Set Keyframes: Keyframes represent different points in your animation.

Toset keyframes:

• Go to the timeline at the bottom.

• Move the playhead to the frame where you want to create a “Addframe."

8. Animate the Sprites: For each keyframe, move the sprites to their new positions
or make other changes. Wick Editor will automatically interpolatebetween
keyframes.

Prepared by Nandhini N
 lOMoARcPSD|28727123

9. Preview Your Animation: Click the "Play" button to preview youranimation.

Prepared by Nandhini N
 lOMoARcPSD|28727123

10. Adjust Timing: In the timeline, you can adjust the duration betweenkeyframes
by stretching or compressing the frames.

11. Export Your Animation: Once you're satisfied with your animation, go to"File"
> "Export" to save your animation in the desired format.

Prepared by Nandhini N
 lOMoARcPSD|28727123

12. Save Your Project: Don't forget to save your project for future editing.

Result:

Thus,we have performed simple 2D animation with sprites using Wick editor.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Exercise No. 5b
SIMPLE 3D ANIMATION WITH KEYFRAMES AND KINEMATICS

Aim:

To perform 3D animation with keyframes and kinematics using Blender.

Procedure:

Creating a 3D animation with keyframes and kinematics in Blender is a multi-stepprocess that

involves setting up your 3D scene, adding objects, setting keyframes, and using armatures
and constraints for kinematics. Here's a general guide to get you started:

1. Install Blender: If you haven't already, download and install Blender fromthe
official website (https://www.blender.org/download/).

2. Open Blender: Launch Blender and start with a new project.

Prepared by Nandhini N
 lOMoARcPSD|28727123

3. Set up Your Scene: Create or import the 3D objects you want to animate.You
can add objects, lights, cameras, etc., to your scene.

4. Timeline and Keyframes:

• Ensure the timeline is visible in your workspace. You can usually findit at
the bottom of the interface.

• Select the object you want to animate by right-clicking on it in the 3Dview.

• Go to the frame where you want to set the first keyframe. You can
usethe timeline to move to a specific frame.

• Change the object's properties you want to animate (e.g.,

location,rotation, scale) in the Properties panel.

• Right-click on the property and choose "Insert Keyframe" (or press Ion the
keyboard). Select the property you want to keyframe (e.g., Location,
Rotation, or Scale).

Prepared by Nandhini N
 lOMoARcPSD|28727123

5. Create the Animation:

• Move to different frames and make changes to the object's properties.

• Insert keyframes at each new frame by right-clicking on the

propertyand selecting "Insert Keyframe" or pressing I.

Prepared by Nandhini N
 lOMoARcPSD|28727123

6. Adjust Timing and Easing:

• In the Graph Editor, you can adjust the interpolation and easing
foryour keyframes to control how the animation flows.

• Select keyframes and press T to bring up the Interpolation menu.

7. Kinematics and Armatures:

• If you want to create more complex animations, especially for characters or

objects with multiple parts, you can use armatures andconstraints.

• Add an armature object (a skeleton) to your scene.

Prepared by Nandhini N
 lOMoARcPSD|28727123

• Parent your 3D object to the armature. Select the 3D object, then Shift-select the
armature, and press Ctrl+P. Choose "With AutomaticWeights" if you're
working with a character.

Prepared by Nandhini N
 lOMoARcPSD|28727123

8. Rendering:

• Set up your camera and lighting for the scene.

• Configure rendering settings in the Render tab.

• Choose an output format and render the animation by

clicking the"Render Animation" button.

9. Save and Export:

• Save your project using File > Save or Save As.

• Export the animation in the desired format (e.g., video or

imagesequence) using File > Export.

Prepared by Nandhini N
 lOMoARcPSD|28727123

10. Preview Your Animation:

• Use the Play button in the timeline to preview your animation.

• You can also scrub through the timeline to view individual frames.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Prepared by Nandhini N
 lOMoARcPSD|28727123

Result:

Thus we have performed simple 3D animation with keyframes and kinematicsusing Blender.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Exercise No. 6a
WORKING WITH E-LEARNING AUTHORING TOOLS

AIM:
Demonstrating screen recording and further editing for e-learning content using moovly
tool.

PROCEDURE:
Step1: Open your web browser.visit the official moovly website at "https://www.moovly.com"
for installation.

Step 2: After opening the moovly website,look for and click in the “login”button,typically
located at the top right corner of the webpage.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Step3: Once you’re on the login page,enter your email and password.Then,click the “log in”
button to access your account.

Step 4:Click the “get started for free” button to initiate the account creation process. fill in all the
requires details and then click the “create account” button .

Prepared by Nandhini N
 lOMoARcPSD|28727123

Step 5:Once you’re created the account, it will open the dashboard and click “Generative AI”.

Step 6:Select “video generation”.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Step 7:Enter the topic of your video. Example :E-Learning and click “Generate script”.

Step 8:In the video generation, select how the text appear in the video (i.e. no text ,on screen text
and subtitles)and select visuals of your own.once you’re select click “select clip style”.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Step 9: Next, select your “onscreen text style”.And click “create video”.

Step 10:Now your video is ready.click “Have a look” and it will created a video about e-learing.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Step 11:For the screen recording,select Record and choose “Record”.

Step 12:Next,select “Screen” for start recording.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Step 13:Choose E-Learning to share with dashboard.moovly.com and click “share”button.

Step 14:Select audio also for the recording and click “Start Recording”

Prepared by Nandhini N
 lOMoARcPSD|28727123

Step 15:It will start recording and if you finish your recording click “stop recording” or if
you’re pause the record click “pause recording”.

RESULT:
Thus the screen recording for E-Learning content has been done.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Exercise No. 6b
CREATE A SIMPLE E-LEARNING MODULE FOR A TOPIC OF YOUR CHOICE

AIM:
Creating a simple e-learning module for add multimedia elements to a presentation using
PowerPoint using EdApp.

PROCEDURE:
Step1: Go to the EdApp website

Step2: click “log in” button.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Prepared by Nandhini N
 lOMoARcPSD|28727123

Step3: Enter all the required details and click on the "Get started for FREE" button.

Step4: Once you have logged in to your account, click on the "Course" button.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Step5: Click on the “create a course”.

Step6:Enter a topic name ,some key words or even a course summary and click on the “Generate
Course”.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Step7: Adding a content related for the course name and click on the “publish” button. Once
you have added content to your course, you can preview it to see how it will look to your
learners.
Once you are satisfied with the course, you can publish it.

Step8:Select your lessons and click on the “Next”button.

Prepared by Nandhini N
 lOMoARcPSD|28727123

Step9: Click on the “Publish course”

Step10: The publishing process may take some time, depending on the size and complexity of
your course.once its finished ,it shows “published”. The course is released and available to
learners.

RESULT:
Thus the Creating a simple e-learning module for add multimedia elements to a presentation
using PowerPoint using EdApp has been done. .

Prepared by Nandhini N