昨天，我们研究了周期性属性，这是一篇特定的文章。今天，让我们回到实际的网站设计和页面。
我们将创建有机化学页面。我们将从设置基本的 HTML 结构开始，包括交互式元素的占位符。
首先，我在 Chemistry 文件夹中创建了organic.html。这是基本结构：
<!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');
}
});
这是这个 JavaScript 的作用：
实时页面在这里，如果你想看：
有机化学 - NeuronIQ
让我们创建一个无机化学的新页面，其结构与有机化学页面类似。
首先，我在Chemistry文件夹中创建了organic.html，其基本结构如下：
<!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';
}
});
});
我必须调整选择器以匹配此页面中使用的 ID。该脚本现在可以处理基本的汉堡菜单切换和文章搜索过滤。
我们现在有一个基本的无机.html 页面，其结构与有机化学页面类似。我们可以通过以下方式进一步增强它：
由于我们今天的主要重点是设置结构和基本功能，因此我们可以在接下来的步骤中考虑这些增强功能。我们还可以通过添加更多相关内容并提高页面的响应能力来改进这一点。
以上是我从头开始构建了终极教育网站 — 第 5 天的详细内容。更多信息请关注PHP中文网其他相关文章！
