A

MICROPROJECT
On
“Create a webpage with three frames and include a slideshow with
6 images.”

Submitted By

Name of student: Kadu Akshta Sampat

Enrollment No: 2200300443
Class: CM5I

Under The Guidance

Mr. A. A. Nibe

DEPARTMENT OF COMPUTERTECHNOLOGY
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology and Engineering
(Polytechnic) Pravaranagar-413736.
(2023-2024)
 Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology and Engineering
(Polytechnic) Pravaranagar-413736

CERTIFICATE
This is to certify that
Name of student: Kadu Akshta Sampat
Enrollment No: 2200300443
Class: CM5I

Has successfully submitted the Micro Project on

“Create a webpage with three frames and include a slideshow with

6 images.”

Towards the partial fulfillment of

Diploma in Computer Technology affiliated to Maharashtra State Board of Technical
Education, Mumbai during academic year 2023-2024.

(Mr. A. A. Nibe) (Prof. R. S. Kakade)

Guide HOD

Place: Loni
Date:
 Micro Project Evaluation Sheet (Group)

Academic Year: 2023-24 Name of Faculty: Mr. A. A. Nibe

Course: Computer technology Course: CSS

Code: 22519 Semesters: CM5I

Title of Micro Project: Create a webpage with three frames and include a slideshow with 6
images.

Cos addressed by the Micro Project:

a) Implement arrays and functions in java script.

b) Create event based web forms using java script.
c) Use java script for handling cookies.
d) Create menus and navigations in WebPages.

Major Learning Outcomes achieved by students by doing the project:

a) Practical Outcomes: The outcome of a project involving a webpage with frames and an
image slideshow will be a functional webpage that presents content within separate frames and
includes an automated image slideshow.

b) Outcomes in Cognitive domain: The project enhances knowledge, critical thinking,

problem-solving, and technical skills related to Programming.

c) Outcomes in Affective domain:

i) Enhance Leadership Skills.

ii) Follow naming conventions.

iii) Follow ethical practices.

iv) Improved Communication skills.

Comments /Suggestions about team work / leadership/inter-personal communication:

Roll Full Name of Student Enrollment Marks out Marks out of Total
 of 6 for 4 for
Performanc Performance
out of
No. No. e in group in oral/
10
activity presentation
(D5) (D5)
34 Kadu Akshta Sampat 22003300443
33 Gite Yash Babasaheb 2200300442
35 Bagul Vishal Bhausaheb 2200300444
36 Pawar Komal Babasaheb 2200300445
37 Salve Sakshi Ganesh 2200300445

Name & Sign of Faculty

Micro Project Evaluation Sheet (Individual)
 Micro-Project Proposal
Title of Micro Project: Create a webpage with three frames and include a slideshow with 6
images.

1.0 Aims/Benefits of Micro Project: Creating a webpage with three frames and a slideshow
with six images involves web development skills. Micro projects offer valuable learning and
skill-building experiences, boosting problem-solving abilities and enhancing portfolios while
being low-risk and flexible. The aim is to achieve a functional webpage with frames and an
image slideshow for educational and skill development purposes.

2.0 Course Outcome(s) Addressed:

a) Implement arrays and functions in java script.

b) Create event based web forms using java script.

c) Use java script for handling cookies.

d) Create menus and navigations in WebPages.

3.0 Proposed Methodology: The proposed methodology for creating a webpage with three
frames and a slideshow with six images involves:

1. HTML Structure: Design a webpage with frames using HTML, specifying their layout.

2. Frame Content: Create separate HTML files for each frame with relevant content.

3. Slideshow: Develop a slideshow in one frame using HTML and JavaScript.

4. Image Selection: Choose the six images for the slideshow and include them in the
HTML.

5. JavaScript Logic: Write JavaScript code for the slideshow's automated image transition.

6. Testing: Test the webpage to ensure frames and the slideshow work as intended.

7. Refinement: Make any necessary adjustments or improvements.

4.0 Action Plan

Sr. Planned Planned Name of responsible

Details of Activity
No. start date finish date team members
1 Prepare the Proposal 21/8/2023 26/8/2023 Gite Yash Babasaheb
Pawar Komal
2 Literature Review 28/8/2023 02/9/2023
Babasaheb
Kadu Akshta Sampat
Data Collection and its
3 04/9/2023 23/9/2023 Bagul Vishal
implementation
Bhausaheb
Verification and validation of
4 25/9/2023 30/9/2023 Salve Sakshi Ganesh
work done
5 Report Preparation 03/10/2023 10/10/2023 All members
6 Presentation/Viva 11/11/2023 18/10/2023 All members

5.0 Resources Required

Sr.
Name of resource/material Specifications Qty. Remark
No.
Processor i5
1 Computer System 1 Available
RAM-8GB
2 Notepad - 1 Available
3 Chrome 118.0.5993.111 1 Available

Name of Team Members:

Roll No. Name of Student

34 KaduAkshtaSampat
33 Gite Yash Babasaheb
35 Bagul Vishal Bhausaheb
36 Pawar Komal Babasaheb
37 Salve Sakshi Ganesh

Name & Sign of Faculty

 Micro-Project Report
1.0 Rationale: The rationale for this micro project is to provide a practical learning opportunity
for web development skills, including HTML and JavaScript, while creating a portfolio
piece. It offers a low-risk, time-efficient, and creative way to gain hands-on experience in
web design.

2.0 Aims/Benefits of the Micro Project: Creating a webpage with three frames and a slideshow
with six images involves web development skills. Micro projects offer valuable learning and
skill-building experiences, boosting problem-solving abilities and enhancing portfolios while
being low-risk and flexible. The aim is to achieve a functional webpage with frames and an
image slideshow for educational and skill development purposes.

3.0 Course Outcome(s) Achieved:

a) Implement arrays and functions in java script.

b) Create event based web forms using java script.

c) Use java script for handling cookies.

d) Create menus and navigations in WebPages.

4.0 Literature Review: A literature review for creating a webpage with three frames and a
slideshow with 6 images should encompass the following key areas:

1. HTML Frames: Examine literature on HTML frames, their structure, and their role in
web layout, understanding their advantages and disadvantages.

2. Image Slideshows: Review resources on creating image slideshows with HTML, CSS,
and JavaScript, focusing on best practices, transitions, and user interaction.

3. Web Design Principles: Explore web design principles, including usability, accessibility,
and responsive design, to ensure the project adheres to industry standards.

4. JavaScript for Slideshows: Investigate JavaScript coding techniques for building

interactive slideshows, considering libraries or frameworks that may simplify the process.

5. Portfolio Development: Learn about the significance of portfolio development in web

design and its role in showcasing skills to potential employers or clients.
 6. User Experience: Research user experience (UX) design to understand how to create an
engaging and user-friendly slideshow within the frames.

7. Web Development Trends: Stay updated on current web development trends, ensuring
the project aligns with modern practices and technologies.

By incorporating insights from the literature review, the project can be well-informed and
designed to meet the latest web design standards while providing an engaging user experience..

5.0 Actual Methodology Followed:

The actual methodology involved analyzing project requirements, creating the webpage
structure with HTML frames, developing frame content, implementing the image slideshow
using HTML and JavaScript, selecting and optimizing images, testing for compatibility,
refining the project, documenting the work, and presenting the final product. This process
aimed to achieve the project's objectives efficiently.
1. Main Frame:

<html>

<head>

<title>Frame-based Slideshow</title>

</head>

<frameset cols="40%, 60%">

<frame name="topFrame" src="top.html" scrolling="no">

<frame name="mainFrame" src="slideshow.html">

</frameset>

</html>

2. Slideshow Frame:
<html>
<head>
<title>Image Slideshow</title>
<script>
var images = ["images1.jpeg", "images2.jpeg", "images3.jpeg", "images4.jpeg",
"images5.jpeg", "images6.jpeg"];
var current = 0;

function changeImage() {
 var imageElement = document.getElementById("slideshow");
imageElement.src = images[current];
current = (current + 1) % images.length;
setTimeout(changeImage, 3000);
}
</script>
</head>
<body>
<h1> Frame3 !</h1>
<img id="slideshow" src="images1.jpeg" alt="Slideshow">
<script>
changeImage();
</script>
</body>
</html>
3. Top Frame:
<html>
<head>
</head>
<frameset rows="50%, 50%">
<frame name="f0" src="f0.html" scrolling="no">
<frame name="f1" src="f1.html" >
</frameset>
<html>
4. F0 Frame:
<html>
<head>
<title>Image Slideshow</title>
<script>
var images = ["images1.jpeg", "images2.jpeg", "images3.jpeg", "images4.jpeg",
"images5.jpeg", "images6.jpeg"];
var current = 0;
function changeImage() {
var imageElement = document.getElementById("slideshow");
imageElement.src = images[current];
current = (current + 1) % images.length;
setTimeout(changeImage, 3000);
}
</script>
</head>
<body>
 <h1> Frame1 !</h1>
<img id="slideshow" src="images1.jpeg" alt="Slideshow">
<script>
changeImage();
</script>
</body>
</html>
5. F1 Frame:
<html>
<head>
<title>Image Slideshow</title>
<script>
var images = ["images1.jpeg", "images2.jpeg", "images3.jpeg", "images4.jpeg",
"images5.jpeg", "images6.jpeg"];
var current = 0;
function changeImage() {
var imageElement = document.getElementById("slideshow");
imageElement.src = images[current];
current = (current + 1) % images.length;
setTimeout(changeImage, 3000);
}
</script>
</head>
<body>
<h1> Frame2 !</h1>
<img id="slideshow" src="images1.jpeg" alt="Slideshow">
<script>
changeImage();
</script>
</body>
</html>

6.0 Actual Resources Used:

Sr.
Name of resource/material Specifications Qty. Remark
No.

Processor i5
1 Computer System 1 Available
RAM-8GB
2 Notepad - 1 Available
 3 Chrome 118.0.5993.111 1 Available

7.0 Output(s) of the Micro project:

8.0 Skill(s) developed / Learning outcome of this Micro Project:

This micro project fosters the development of web development skills, encompassing HTML and
JavaScript, while providing a unique understanding of frame-based layouts. Participants learn to
handle and display images effectively, create dynamic image slideshows with JavaScript, and
enhance problem-solving and project management abilities. Emphasizing usability and user
experience, it hones creative expression and time management skills. Moreover, the project
contributes to portfolio enrichment, showcasing practical web development skills. Staying
attuned to evolving web trends ensures adaptability in a dynamic field, rendering this micro
project a valuable learning experience.

9.0 Application(s) of this Micro project: The skills and knowledge acquired from this micro
project, which involves creating a webpage with frames and a slideshow, can be applied in
various ways, including:

1. Web Development: The project provides a foundation for building more complex
websites and web applications.

2. Portfolio Development: The resulting work can be included in a web developer's or

designer's portfolio, enhancing their professional image.
3. Educational Materials: The project can be used as a teaching tool for web development
and design courses.

4. Personal Websites: The skills can be applied to create personal websites or blogs with
interactive features.

5. E-commerce: Understanding image slideshows is crucial for creating product displays in

online stores.

6. Company Websites: The knowledge can be used to improve the design and functionality
of a company's website.