文件结构
html 代码
template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jay Skript and Domsters</title>
<link rel="stylesheet" media="screen" href="styles/basic.css">
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Lorem Ipsum Dolor</h1>
<p>Welcome to the official website of Jay Skript and the Domsters.
Here, you can learn more about the band,
view photos of the band,
find out about tour dates and get in touch with the band.</p>
</article>
<script src="scripts/global.js"></script>
</body>
</html>
index.html
<link rel="stylesheet" href="styles/basic.css">
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Welcome</h1>
<p id="intro">
Welcome to the official website of Jay Skript and the Domsters..Here, you can
<a href="about.html" title="About">learn more about the band</a>,
view
<a href="photos.html" title="Photos">photos of the band</a>,
find out about
<a href="live.html" title="Tour Date">tour dates</a>
and
<a href="contact.html" title="Contact">get in touch with the band</a>.
</p>
</article>
<script src="scripts/global.js"></script>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About</title>
<link rel="stylesheet" href="styles/basic.css">
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>About the band</h1>
<nav>
<ul>
<li><a href="#jay">Jay Skript</a></li>
<li><a href="#domsters">The Domsters</a></li>
</ul>
</nav>
<section id="jay">
<h2>Jay Skript</h2>
<p>Jay Skript is going to rock your world!</p>
<p>Together with his compatriots The Domsters, Jay is set for world domination. Just you wait and see.</p>
<p>Jay Skript has been on the scene since the mid nineties. His talent hasn't always been recognized or fully appreciated. In the early days, he was often unfavorably compared to bigger, similarly-named artists. That's all in the past now.</p>
</section>
<section id="domsters">
<h2>The Domsters</h2>
<p>The Domsters have been around, in one form or another, for almost as long. It's only in the past few years that The Domsters have settled down to their current, stable line-up. Now they're a rock-solid bunch: methodical and dependable.</p>
</section>
</article>
<script src="scripts/global.js"></script>
</body>
</html>
photos.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photos</title>
<link rel="stylesheet" href="styles/basic.css">
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Photos of the band</h1>
<ul id="imagegallery">
<li>
<a href="images/photos/concert.jpg" title="The crowd goes wild">
<img src="images/photos/thumbnail_concert.jpg" alt="the band in concert">
</a>
</li>
<li>
<a href="images/photos/bassist.jpg" title="An atmospheric">
<img src="images/photos/thumbnail_bassist.jpg" alt="the bassist">
</a>
</li>
<li>
<a href="images/photos/guitarist.jpg" title="Rocking out">
<img src="images/photos/thumbnail_guitarist.jpg" alt="the guitarist">
</a>
</li>
<li>
<a href="images/photos/crowd.jpg" title="Encore! Encore!">
<img src="images/photos/thumbnail_crowd.jpg" alt="the audience">
</a>
</li>
</ul>
</article>
<script src="scripts/global.js"></script>
</body>
</html>
live.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live</title>
<link rel="stylesheet" href="styles/basic.css">
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Tour dates</h1>
<table summary="when and where you can see the band">
<thead>
<tr>
<th>Date</th>
<th>City</th>
<th>Venue</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland, <abbr title="Oregon">OR</abbr></td>
<td>Crystal Ballroom</td>
</tr>
</tbody>
<tbody>
<tr>
<td>June 10th</td>
<td>Seattle, <abbr title="Washington">WA</abbr></td>
<td>Crocodile Cafe</td>
</tr>
</tbody>
<tbody>
<tr>
<td>June 12th</td>
<td>Sacramento, <abbr title="California">CA</abbr></td>
<td>Torch Club</td>
</tr>
</tbody>
<tbody>
<tr>
<td>June 17th</td>
<td>Austin, <abbr title="Texas">TX</abbr></td>
<td>Speakeasy</td>
</tr>
</tbody>
</table>
</article>
<script src="scripts/global.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link rel="stylesheet" href="styles/basic.css">
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1></h1>
<form action="submit.html">
<fieldset>
<p>
<label for="name">
Name:
</label>
<input type="text" id="name" name="name" placeholder="Your name" required="required">
</p>
<p>
<label for="email">
Email:
</label>
<input type="email" id="email" name="email" placeholder="Your email address" required="required">
</p>
<p>
<label for="message">
Message:
</label>
<textarea id="message" name="message" cols="45" rows="7" placeholder="write your message here." required="required"></textarea>
</p>
<input type="submit" value="Send"></input>
</fieldset>
</form>
</article>
<script src="scripts/global.js"></script>
</body>
</html>
submit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Submit</title>
<link rel="stylesheet" href="styles/basic.css">
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Thanks!</h1>
<p>Thanks for contacting us.We'll get back to you as soon as we can.</p>
</article>
<script src="scripts/global.js"></script>
</body>
</html>