结对作业第二次——编程实现

222200424 赵伟豪 2024-09-30 23:37:15

结对作业第二次——编程实现

这个作业属于哪个课程FZU_SE_teacherW_4
这个作业要求在哪里结对作业第二次——编程实现
结对学号222200424赵伟豪
这个作业的目标通过编程实现原型设计中所构想的功能
其他参考文献《构建之法》 https://blog.csdn.net/zong596568821xp/article/details/83277729?

目录

  • 结对作业第二次——编程实现
  • 1. git仓库链接和代码规范链接
  • git仓库链接
  • 代码规范
  • 2. PSP表格
  • 3. 成品展示
  • 首页及了解更多
  • 奖牌榜
  • 每日赛程
  • 对阵表
  • 4. 结对讨论过程描述
  • 5. 设计实现过程
  • 设计思路
  • 功能结构图
  • 部署过程
  • 6. 代码说明
  • 7. 心路历程和收获
  • 8. 评价结对队友

1. git仓库链接和代码规范链接

git仓库链接

代码规范

2. PSP表格

PSPPersonal Software Process Stages预估耗时（分钟实际耗时（分钟
Planning计划2025
• Estimate• 估计这个任务需要多少时间6070
Development开发11601480
• Analysis• 需求分析150180
• Learning• 学习新技术200240
• Discussion• 结对讨论3040
• Code Standard• 代码规范6090
• Code• 编码500700
• Code Review• 代码复审6050
• Test and Improvement• 测试与改进120190
Reporting报告110120
• Test Report• 测试报告3035
• Size Measurement• 计算工作量1015
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划6080
合计12801645

3. 成品展示

首页及了解更多

  • 展示巴黎奥运会风采，左上角为各个功能的菜单栏，用户可根据需求选择进入

img

奖牌榜

  • 以金牌数量对各国进行排序

img

img

img

img

img

img

每日赛程

  • 用户可选择日期进入不同比赛日，查看每日比赛安排

img

img

  • 点击可以看到比分

img

对阵表

  • 用户查看详细赛况后，可选择进入查看对阵表：

img

4. 结对讨论过程描述

没有结对，我通过上网学习和请教别人完成了本次作业。

5. 设计实现过程

设计思路

奖牌榜排名:展示各国奖牌排名。

每日赛程：展示每一天的赛事，显示比赛类型(足球、七人制橄榄球、手球等)，比赛时间，比赛项目，参赛国家和比赛比分，且获胜国家加粗显示。

对阵表:比赛晋级图是一种直观的展示比赛进程和结果的工具，它以图表的形式呈现了参赛在各个阶段的表现。

详细赛况:展示比赛的成绩，包含本场比赛参赛国家，初赛名单和比赛详情等.

了解更多:介绍巴黎奥林匹克运动会的举办背景，通过丰富的图文使平台更具吸引力，引起人们对巴黎奥林匹克运动会的兴趣。

功能结构图

以下是本次设计的2024奥运会网站的功能结构图：

部署过程

因为是第一次利用服务器配置一台云电脑并搭建一个网站，之前也没有项目部署的经验，因此完全是根据教学走的，为此还购买了阿里云服务器。

6. 代码说明

页内跳转实现

使用a标签，并将 href 指向目标元素的 id。在点击时，页面会自动滚动到带有该 id 的部分：

<nav>
            <ul>
                <li><a href="#news">最新新闻</a></li>
                <li><a href="#events">活动日程</a></li>
                <li><a href="#athletes">运动员介绍</a></li>
                <li><a href="#tickets">购票信息</a></li>
                <li><a href="index.html">奖牌榜</a></li>
                <li><a href="schedule.html">赛程</a></li>
                <li><a href="details.html">对阵表</a></li>
            </ul>
        </nav>

使用交互

为了提高用户的使用体验，我们为按钮设置了多种的交互，例如选中样式变化和鼠标悬停效果等。

/* 链接悬停时的样式 / a:hover { color: #007BFF; / 悬停时将颜色更改为蓝色 / text-decoration: underline; / 悬停时显示下划线 */ }

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
}


header {
    background-color: #004d99; 
    color: white;
    padding: 10px 20px;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

header .logo {
    height: 80px; 
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}


#hero img {
    width: 100%; 
    height: auto; 
    display: block;
}

#hero {
    text-align: center;
    position: relative;
}

#hero h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(0, 0, 0, 0.5); 
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 2em;
}


section {
    padding: 20px;
    margin-top: 90px; 
}

.news-card, .athlete-profile, .events-table, .tickets-section {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 10px 20px;
    margin-top: 20px;
}





    function switchDate(selectedDate) {
        const containers = document.querySelectorAll('.container');
        containers.forEach(container => {
            if (container.id === selectedDate) {
                container.style.display = 'block'; 
            } else {
                container.style.display = 'none'; // 隐藏其他日期的容器
            }
        });
    }

首页代码展示

 <header>
        <img src="img/logo.png" alt="巴黎奥运会标志" class="logo">
        <nav>
            <ul>
                <li><a href="#news">最新新闻</a></li>
                <li><a href="#events">活动日程</a></li>
                <li><a href="#athletes">运动员介绍</a></li>
                <li><a href="#tickets">购票信息</a></li>
                <li><a href="index.html">奖牌榜</a></li>
                <li><a href="schedule.html">赛程</a></li>
                <li><a href="details.html">对阵表</a></li>
            </ul>
        </nav>
    </header>
    
    <section id="hero">
        <img src="img/奥运会1.jpg" alt="巴黎风光">
        <h1>欢迎来到巴黎奥运会</h1>
    </section>
<section id="news">
    <h2>最新新闻</h2>
    <div class="news-card">
        <img src="img/筹备.jpg" alt="新闻图片">
        <div class="news-content">
            <h3>奥运筹备工作全面启动</h3>
            <p>了解巴黎如何准备这次全球盛事。</p>
            <a href="full-news.html">阅读更多</a>
        </div>
    </div>
    <!-- 更多新闻卡片 -->
</section>
<section id="events">
    <h2>赛事安排</h2>
    <table class="events-table">
        <tr>
            <th>日期</th>
            <th>项目</th>
            <th>地点</th>
        </tr>
        <tr>
            <td>2024-07-25</td>
            <td>开幕式</td>
            <td>巴黎国家体育场</td>
        </tr>
    </table>
</section>
<section id="athletes">
    <h2>运动员风采</h2>
    <div class="athlete-profile">
        <img src="img/运动员.jpg" alt="运动员照片">
        <div class="profile-content">
            <h3>李雷 (田径)</h3>
            <p>探索李雷在田径界的辉煌成就。</p>
        </div>
    </div>
</section>
<section id="tickets">
    <h2>门票预订</h2>
    <p>现在就预订门票，确保您的席位！</p>
    <a href="tickets.html" class="btn">购买门票</a>
</section>

    <footer>
        <p>© 2024 巴黎奥运会</p>
    </footer>
    
<script src="script.js"></script>




body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
}


header {
    background-color: #004d99; 
    color: white;
    padding: 10px 20px;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

header .logo {
    height: 80px; 
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}


#hero img {
    width: 100%; 
    height: auto; 
    display: block;
}

#hero {
    text-align: center;
    position: relative;
}

#hero h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(0, 0, 0, 0.5); 
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 2em;
}


section {
    padding: 20px;
    margin-top: 90px; 
}

.news-card, .athlete-profile, .events-table, .tickets-section {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 10px 20px;
    margin-top: 20px;
}

7. 心路历程和收获

222200424赵伟豪：

因为队友和另外一个人组队了，所以我决定单通，拿到这个问题的时候，我还不知道怎么入手，加上又是单通，倍感压力。好在在网上能学习相关知识，经过学习相关知识后，认识到时间紧张，决定采取纯前端的开发方式。编码实现的过程中，也多多少少遇到一些困难，面对这些困难，我会去CSDN社区搜索相关解决方法，如果还是解决不了，就求助其他同学。虽然有一些磕磕绊绊，我还是成功地完成了此次作业，这对我们日后的学习生活乃至工作方面都有了巨大的提升。

总的来说，结对完成此次设计编码对于我来说是一段非常宝贵的经历。在这个过程中，我学到了很多关于html编码的技巧和方法，也学到了前端布局的技巧。这些经验和收获将会对我的未来发展和工作有着很大的帮助。

8. 评价结对队友

222200424赵伟豪：

在此次结对协作中，我合理地给出了实现方案和设计思路，让我对此次作业有了一个目标明确的框架，行之有效。同时，我对方案的实践能力也还可以，能够较好地实现的方案，并且最终完成了作业。

...全文
257 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
助教林泽源 2024-10-15
  • 打赏
  • 举报
 回复

没有讨论过程，结对作业还是得和他人合作

222200424 赵伟豪 2024-10-01
  • 打赏
  • 举报
 回复

img


功能结构图漏掉了

AJAX——新手快车道
编程的体验，如果没有三个人在MSN上无数次的长聊，我想要在短期内建立起： 对于AJAX本质的理解； 对于整个AJAX以及相关技术地图的理解； 对于AJAX编程开发所需要的很多技巧、手段的掌握； 几乎是不可能的。 如果没有...
结对第二次作业——编程实现
结对第二次作业——编程实现
结对作业第二次——原型实现
然后一次设计选手信息，每日赛况、详细赛况、奖牌榜和了解更多的部分，同样是按照之前设计的模板来进行排版设计和功能设计，其中所需要的数据都是从助教给的网站上的数据手打下来的。首先进入网站的首页，页首是导航...
软件工程综合实践专题第二次作业———结对编程心得体会
软件工程综合实践专题第二次作业———结对编程 学习了软件工程综合实践专题这门课程，懂得了结对编程是指两个人一起，用一台电脑，鼠标，键盘的一种编程方式。 王文娟老师在课后留下了一道随机出三百道四则运算的...
潮白、北运、蓟运河水系流经空间范围shp矢量数据.rar
潮白、北运、蓟运河水系流经空间范围shp矢量数据
FZU_SE_teacherW_4

239

社区成员

900

社区内容

发帖
与我相关
我的任务
社区管理员
  • FZU_SE_teacherW
  • 助教赖晋松
  • D's Honey
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章