Gestern haben wir an Periodic Properties gearbeitet, einem speziellen Artikel. Konzentrieren wir uns heute wieder auf das eigentliche Website-Design und die Seiten.
Wir erstellen die Seite zur organischen Chemie. Wir beginnen mit der Einrichtung der grundlegenden HTML-Struktur, einschließlich Platzhaltern für die interaktiven Elemente.
Zuerst habe ich „organic.html“ im Ordner „Chemistry“ erstellt. Dies ist die Grundstruktur:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Organic Chemistry</title>
<meta name="description" content="Explore the fascinating world of organic chemistry with interactive articles, quizzes, and 3D molecule visualizations.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Stylesheets (Consider using a CSS preprocessor like Sass for better organization) -->
<link rel="stylesheet" href="css/style-main.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/specific-chemistry.css">
</head>
<body>
<header>
<nav>
<div>
<p>I've added basic structure, links to the main stylesheets, and CDN link to a 3D molecule viewer library molGL. I've also added a basic header and footer, consistent with our previous pages, and a button for hamburger menu.</p>
<p>Now, I'll add the main content area, divided into sections for articles, key topics, and an interactive molecule viewer.<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>This code adds a three-column layout. The left column will house the article list with a search bar. The middle column will have a hero section with a call-to-action button and a grid of topic cards with images. Finally, the right column will feature the interactive 3D molecule viewer.</p>
<p>I've also added placeholders for images within the topic cards (images/hydrocarbons.jpg, etc.). We'll need to replace these with actual images later.</p>
<h2>
Hour 24: Adding JavaScript for Interactivity
</h2>
<p>Now, let's add some basic JavaScript to handle the hamburger menu, the article search functionality, and the 3D molecule viewer. I'll add the following inside the <script> tag at the end of the body:<br>
<pre class="brush:php;toolbar:false"> // Hamburger Menu Toggle
const hamburgerBtn = document.getElementById('hamburger-btn');
const navMenu = document.getElementById('nav-menu');
hamburgerBtn.addEventListener('click', () => {
navMenu.classList.toggle('show');
});
// Article Search Functionality (Basic Example)
const articleSearch = document.getElementById('article-search');
const articleLinks = document.getElementById('article-links').querySelectorAll('a');
articleSearch.addEventListener('input', () => {
const searchTerm = articleSearch.value.toLowerCase();
articleLinks.forEach(link => {
const linkText = link.textContent.toLowerCase();
if (linkText.includes(searchTerm)) {
link.style.display = 'block';
} else {
link.style.display = 'none';
}
});
});
// 3D Molecule Viewer (MolGL Example)
const molContainer = document.getElementById('mol-container');
const moleculeSelect = document.getElementById('molecule-select');
// Initialize MolGL viewer
let viewer = new MolGL({
container: molContainer,
style: {
stick: {},
sphere: { scale: 0.3 }
}
});
// Load a default molecule
viewer.load('pdb:1crn'); // Example: Load a PDB structure
// Change molecule on selection
moleculeSelect.addEventListener('change', () => {
const selectedMolecule = moleculeSelect.value;
// We'll need to map molecule names to appropriate data sources (e.g., PDB IDs, SDF files)
if (selectedMolecule === 'methane') {
viewer.load('sdf:./molecules/methane.sdf'); // Example: Load from an SDF file
} else if (selectedMolecule === 'ethanol') {
viewer.load('pdb:1etn');
} else if (selectedMolecule === 'benzene') {
viewer.load('sdf:./molecules/benzene.sdf');
}
});
Das macht dieses JavaScript:
Die Live-Seite finden Sie hier, falls Sie Folgendes sehen möchten:
Organische Chemie - NeuronIQ
Lassen Sie uns eine neue Seite für anorganische Chemie erstellen, deren Struktur der Seite für organische Chemie ähnelt.
Zuerst habe ich im Ordner „Chemistry“ anorganische.html mit der folgenden Grundstruktur erstellt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Inorganic Chemistry</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style-main.css">
<link rel="stylesheet" href="specific-chemistry.css">
</head>
<body>
<header>
<nav>
<div>
<p>This code sets up the HTML for the page with:</p>
<ul>
<li> A basic header with navigation links.</li>
<li> An aside element for the article list.</li>
<li> A main content area with a heading, introductory text, and a grid for key topics.</li>
<li> Placeholder links for articles and topics.</li>
<li> A footer.</li>
</ul>
<p>We are using style.css, style-main.css and specific-chemistry.css for the styling.</p>
<p>Next, I added some content to the page:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>I also added a search bar and some links, that we will add later.</p>
<h2>
Hour 26: Adding JavaScript for Search Functionality
</h2>
<p>Since we used a similar structure to the organic chemistry page, I copied over the JavaScript code for the hamburger menu and the article search functionality from organic.html to this inorganic chemistry page, removing the 3D molecule viewer part.<br>
</p>
<pre class="brush:php;toolbar:false">// Hamburger Menu Toggle
const hamburgerBtn = document.getElementById('hamburger-btn');
const navMenu = document.getElementById('nav-menu');
hamburgerBtn.addEventListener('click', () => {
navMenu.classList.toggle('show');
});
// Article Search Functionality (Basic Example)
const articleSearch = document.getElementById('article-search');
const articleLinks = document.getElementById('article-links').querySelectorAll('a');
articleSearch.addEventListener('input', () => {
const searchTerm = articleSearch.value.toLowerCase();
articleLinks.forEach(link => {
const linkText = link.textContent.toLowerCase();
if (linkText.includes(searchTerm)) {
link.style.display = 'block';
} else {
link.style.display = 'none';
}
});
});
Ich musste die Selektoren anpassen, um sie an die auf dieser Seite verwendeten IDs anzupassen. Dieses Skript übernimmt nun das grundlegende Umschalten des Hamburger-Menüs und die Filterung der Artikelsuche.
Wir haben jetzt eine einfache anorganische.html-Seite mit einer ähnlichen Struktur wie die Seite für organische Chemie. Wir können es weiter verbessern durch:
Da unser Hauptaugenmerk heute auf der Einrichtung der Struktur und der Grundfunktionalität lag, können wir diese Erweiterungen in den nächsten Schritten berücksichtigen. Wir können dies auch verbessern, indem wir relevantere Inhalte hinzufügen und an der Reaktionsfähigkeit der Seite arbeiten.
Das obige ist der detaillierte Inhalt vonIch habe die ULTIMATIVE Bildungswebsite von Grund auf erstellt – Tag 5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Python-Crawler-Methode zum Abrufen von Daten
Sequenznummer der zusammengeführten Zellenfüllung
Die Beziehung zwischen Bandbreite und Netzwerkgeschwindigkeit
Welche Rolle spielt der SIP-Server?
Projektor-Handy
Welche Datei ist eine Ressource?
So beheben Sie einen DNS-Auflösungsfehler
Was ist ein Bitcoin-Futures-ETF?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
