昨天，我們研究了週期性屬性，這是一篇特定的文章。今天，讓我們回到實際的網站設計和頁面。
我們將創建有機化學頁面。我們將從設定基本的 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中文網其他相關文章！
