Gallery
Share
Explore

Lab Workbook: European Art History Gallery Webpage

Objective: To create a media gallery webpage showcasing European art from the 1500 Renaissance to the 18th Century using Flexbox and CSS for styling and layout.

Part 1: HTML Structure

File: gallery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>European Art History Gallery</title>
<link rel="stylesheet" href="gallery.css">
</head>
<body>
<header>
<h1>Great European Art: 1500 - 18th Century</h1>
</header>
<main id="art-gallery">
<!-- Sample Artwork Section -->
<section class="art-period" id="renaissance">
<h2>Renaissance Art</h2>
<div class="artworks">
<!-- Artwork items will be added here -->
<!-- Example: -->
<!-- <article class="artwork">
<img src="path-to-renaissance-art.jpg" alt="Renaissance Artwork">
<h3>Artwork Title</h3>
<p>Artist Name</p>
<p>Year</p>
</article> -->
</div>
</section>
<!-- Additional art periods like Baroque, Rococo, etc., will follow -->
</main>
<footer>
<p>Gallery of European Art History</p>
</footer>
</body>
</html>

Part 2: CSS Styling

File: gallery.css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}

header {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}

header h1 {
margin: 0;
}

#art-gallery {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

.art-period {
margin-bottom: 30px;
}

.art-period h2 {
font-size: 24px;
color: #444;
}

.artworks {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.artwork {
border: 1px solid #ddd;
margin: 10px;
padding: 10px;
width: calc(33% - 20px);
text-align: center;
}

.artwork img {
width: 100%;
height: auto;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}

Part 3: Responsive Design

Implement media queries for responsive design.
cssCopy code
@media (max-width: 800px) {
.artwork {
width: calc(50% - 20px);
}
}

@media (max-width: 500px) {
.artwork {
width: 100%;
}
}

Part 4: Conclusion and Exercises

Exercise 1: Add interactivity with JavaScript to filter artworks based on the art period.
Exercise 2: Implement a lightbox feature for viewing artwork images in full size when clicked.
Exercise 3: Create a dynamic timeline slider to navigate through different art periods on the webpage.
This workbook provides a structured approach to building a gallery webpage for European art history. It covers key concepts in HTML and CSS, including Flexbox for layout and responsive design. The exercises encourage students to enhance the webpage with interactive features and dynamic content.

Exercise 1: Add interactivity with JavaScript to filter artworks based on the art period: provide detailed CSS and HTML to deliver Exercise 1: Add interactivity with JavaScript to filter artworks based on the art period.

To implement Exercise 1, where we add interactivity with JavaScript to filter artworks based on the art period, we will need to modify the existing HTML structure and add CSS for styling the filter buttons. We will also write JavaScript to handle the filtering functionality.

Step 1: Update the HTML Structure

Add buttons for each art period at the top of the gallery for filtering:

File: gallery.html

<!-- ... existing content ... -->
<main id="art-gallery">
<div id="filters">
<button class="filter-btn" data-period="all">All Periods</button>
<button class="filter-btn" data-period="renaissance">Renaissance</button>
<!-- Add more buttons for other periods -->
</div>

<!-- Existing art periods sections -->
<section class="art-period" id="renaissance">
<!-- ... -->
</section>
<!-- ... other art periods ... -->
</main>
<!-- ... existing content ... -->

Step 2: Add CSS for Filter Buttons

File: gallery.css
cssCopy code
/* ... existing styles ... */

#filters {
text-align: center;
margin-bottom: 20px;
}

.filter-btn {
padding: 5px 10px;
margin: 0 5px;
border: none;
background-color: #555;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}

.filter-btn:hover {
background-color: #777;
}

.filter-btn.active {
background-color: #f76c6c;
}

/* ... existing styles ... */

Step 3: JavaScript for Filtering Functionality

File: script.js (Link this file in your HTML before the </body> tag.)

document.addEventListener('DOMContentLoaded', function() {
const filterButtons = document.querySelectorAll('.filter-btn');
const artPeriods = document.querySelectorAll('.art-period');

filterButtons.forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all buttons
filterButtons.forEach(btn => btn.classList.remove('active'));
// Add active class to clicked button
this.classList.add('active');

// Filter artworks
const period = this.getAttribute('data-period');
artPeriods.forEach(section => {
if (period === 'all' || section.id === period) {
section.style.display = '';
} else {
section.style.display = 'none';
}
});
});
});
});

To connect the javascript to the html, do as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>European Art History Gallery</title>
<link rel="stylesheet" href="gallery.css">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Great European Art: 1500 - 18th Century</h1>
</header>

<main id="art-gallery">
<div id="filters">
<button class="filter-btn" data-period="all">All Periods</button>
<button class="filter-btn" data-period="renaissance">Renaissance</button>
<!-- Add more buttons for other periods -->
</div>
<!-- Existing art periods sections -->
<section class="art-period" id="renaissance">
<!-- ... -->
</section>
<!-- ... other art periods ... -->
</main>


<footer>
<p>Gallery of European Art History</p>
</footer>
</body>
</html>


This JavaScript code adds an event listener to each filter button.
When a button is clicked, it sets the display of each art period section based on the data attribute of the button. This allows the user to filter the artworks by the selected period.
With these steps, you should have a functional filter for your gallery webpage that allows users to view artworks based on the chosen art period.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.