在当今信息化迅速发展的时代，网页设计成为了许多计算机专业及相关领域学生的重要课程之一。随着互联网的普及，能够设计出一个美观而且实用的网页是一项非常有价值的技能。本次期末大作业，我将以HTML、CSS和JavaScript为基础，设计一个简单的个人作品展示页面，并附上相关代码示例。
一、项目背景
我选择设计一个个人作品展示页面，主要目的是希望能向他人展示我的个人简历、项目经验以及一些编程技能和兴趣爱好。这个页面将包含几个主要部分：个人信息、项目展示、技能树和联系我。
二、页面结构
网页的基本结构通常由HTML定义，以下是我所设计的网页的基本HTML代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>我的个人作品展示</title>
</head>
<body>
<header>
<h1>欢迎来到我的个人主页</h1>
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#projects">项目展示</a></li>
<li><a href="#skills">技能树</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>关于我</h2>
<p>我是一个热爱编程的学生，目前正在学习前端开发技术，包括HTML、CSS和JavaScript。</p>
</section>
<section id="projects">
<h2>项目展示</h2>
<div class="project">
<h3>项目名称1</h3>
<p>项目描述1...</p>
</div>
<div class="project">
<h3>项目名称2</h3>
<p>项目描述2...</p>
</div>
</section>
<section id="skills">
<h2>技能树</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<section id="contact">
<h2>联系我</h2>
<p>Email: example@example.com</p>
</section>
<footer>
<p>© 2023 我的个人作品展示. 版权所有.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
三、样式设计
为了使网页更具吸引力，我使用CSS进行美化，以下是样式表styles.css的部分代码：
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #35424a;
color: #ffffff;
padding: 20px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
}
section {
padding: 20px;
margin: 10px;
background: #ffffff;
border-radius: 5px;
}
.project {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
}
四、交互设计
为了增强用户体验，我通过JavaScript来增加一些交互功能，例如在页面加载时显示欢迎信息，代码如下：
window.onload = function() {
alert("欢迎访问我的个人主页！");
}
五、总结
通过本次期末大作业，我深入学习了网页设计的基础知识，掌握了HTML、CSS和JavaScript的基本用法。希望通过这次实践，能够帮助我在未来的学习和工作中更好地设计和构建网页。此外，继续探索网页交互与用户体验设计也是我接下来的目标。希望大家能给予我更多的建议和反馈！
