《网页设计综合实训》实训报告
|
姓名： |
学号： |
专业/班级： |
一、实训名称
项目名称: 文库网
网站主题说明: 文库网是一个综合性学习资源网站，提供文学、数学、英语和政治等领域的学习资料和交流平台。网站旨在为用户提供便捷的学习资源和在线阅读体验。
二、实训目的
-
学习和掌握HTML、CSS和JavaScript的基本知识和应用。
-
理解网站设计的基本原则，包括用户体验和界面设计。
-
实践网站的整体规划、设计和发布过程。
-
提高团队协作能力和项目管理能力。
三、实训要求
-
设计并实现一个包含多个页面的网站，页面包括首页、文学、数学、英语、政治和联系我们。
-
网站应具备通栏菜单，标题居中，整体风格以绿色和浅灰为背景，文字为黑色。
-
在首页实现在线阅读人数的统计功能，使用HTML、CSS和JavaScript进行实现。
-
提交完整的项目代码和实训报告。
四、设计思路及内容
-
首页: 显示网站介绍、在线阅读人数统计、各个学科的链接。
-
各学科页面: 提供相关学习资料和资源链接。
-
联系我们: 提供联系方式和反馈表单。
各级网页风格说明
-
整体风格: 采用绿色和浅灰色作为背景色，黑色文字，简洁明了，符合学习网站的主题。
-
通栏菜单: 设计为固定在页面顶部，方便用户快速导航。
典型网页的设计过程与样例
首页设计:
<html>
<head>
<title>文库网</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>文库网</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="literature.html">文学</a></li>
<li><a href="math.html">数学</a></li>
<li><a href="english.html">英语</a></li>
<li><a href="politics.html">政治</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<div class="marquee">
在线阅读人数: <span id="onlineCount">0</span>
</div>
<script src="script.js"></script>
</body>
</html>
CSS样式:
body {
background-color: #f0f0f0; /* 浅灰色背景 */
color: black; /* 黑色文字 */
font-family: Arial, sans-serif;
}
header {
background-color: #4CAF50; /* 绿色背景 */
text-align: center;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
.marquee {
background-color: #4CAF50;
color: white;
padding: 10px;
white-space: nowrap;
overflow: hidden;
position: relative;
}
.marquee span {
display: inline-block;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
JavaScript实现在线人数统计:
function updateOnlineCount() {
const onlineCountElement = document.getElementById('onlineCount');
const randomCount = Math.floor(Math.random() * 100) + 1; // 随机生成 1 到 100 的在线人数
onlineCountElement.textContent = randomCount; // 更新在线人数
}
setInterval(updateOnlineCount, 5000); // 每隔 5 秒更新在线人数
网站发布过程说明
-
完成网站的设计和开发后，使用FTP工具将文件上传到服务器。
-
配置域名和服务器，确保网站可以通过域名访问。
-
进行测试，确保所有链接和功能正常。
五、实训小结
通过本次实训，我深入了解了网站设计和开发的全过程，从需求分析到实际编码，再到网站发布。掌握了HTML、CSS和JavaScript的基本用法，并提高了团队协作能力。实训让我认识到用户体验的重要性，以及在设计中如何平衡美观与功能性。
六、实训中遇到的问题及解决办法
-
问题: 在实现在线人数统计时，初始值未能正确显示。
解决办法: 检查JavaScript代码，确保在页面加载时调用更新函数，并设置初始值。
-
问题: 网站在不同浏览器中的显示效果不一致。
解决办法: 使用CSS重置样式，确保在各大浏览器中有一致的表现，并进行多浏览器测试。
-
问题: 菜单链接未能正确跳转。
解决办法: 检查链接路径，确保所有页面文件名和路径正确无误。
参考答案是一个压缩包：
含实训报告和源码程序见下图
