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.

@media (max-width: 800px) {
.artwork {
width: calc(50% - 20px);
}
}

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


To incorporate the responsive design media queries shown in the image into your HTML project, you should place them in your CSS file (in this case, gallery.css), which is linked in the <head> section of your HTML.
Media queries are part of CSS and are not written directly in the HTML file.
⁠

Step 1: Open the gallery.css File

Locate the file gallery.css (referenced in your HTML as <link rel="stylesheet" href="gallery.css">) and open it for editing.
⁠

Step 2: Add the Media Queries

Place the media queries at the end of the gallery.css file (or wherever appropriate within your CSS file).
For example:

/* Default styles for .artwork (applies to larger screens by default) */
.artwork {
width: 25%; /* Example default width */
margin: 10px;
}

/* Media query for screen widths 800px or smaller */
@media (max-width: 800px) {
.artwork {
width: calc(50% - 20px); /* Adjust width for smaller screens */
}
}

/* Media query for screen widths 500px or smaller */
@media (max-width: 500px) {
.artwork {
width: 100%; /* Full width for very small screens */
}
}

⁠

Step 3: Save Changes

Save the updated gallery.css file.
⁠

Step 4: Test in the Browser

Open your HTML file in a browser and resize the browser window. The .artwork elements should adjust their width dynamically based on the specified breakpoints (800px and 500px) in your media queries.
⁠

Explanation

Default Styles: The .artwork element has default styles that apply unless overridden by a media query.
Media Query at 800px: When the screen width is 800px or smaller, .artwork elements adjust their width to calc(50% - 20px), creating a responsive layout.
Media Query at 500px: When the screen width is 500px or smaller, .artwork elements take up the full width of the screen (100%), ideal for mobile devices.
By adding these media queries to gallery.css, your design will adapt gracefully across different screen sizes.


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.


Here's the complete HTML with inline CSS and JavaScript, including 3 representative paintings for each epoch. The layout is designed using flexbox for presenting images, and other CSS concepts like media queries, hover effects, and responsive design are incorporated. Replace the src attributes in the <img> tags with the paths to your downloaded images.
<!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>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}

header {
text-align: center;
background-color: #333;
color: white;
padding: 20px;
}

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

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

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

.art-period {
display: none;
margin: 20px auto;
padding: 20px;
width: 90%;
max-width: 800px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.art-period h2 {
text-align: center;
color: #333;
}

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.