《Web应用基础》结业报告

1 项目简介

本课程的结课网站采用了纯HTML和CSS构建一个静态页面，网页选择的主题是游戏衍生动漫《双城之战》，在该网页中有首页展示、动漫简介、动漫各集介绍、主要角色介绍和动漫评论五个内容模块，且五个内容模块在一个长页面中。

2 开发过程

2.1 首页

2.1.1 首页元素设计

首页元素的设计包含两个部分，分别是顶部导航栏的设计和首页内容的设计。

顶部导航栏：导航栏中又细分为两部分，左边部分为网页的主题（Logo），右边部分为导航栏选项（navLinks），包含首页、简介、动漫、角色、评论和关于六个超链接元素，用于从首页跳转至不同模块

首页内容：首页采用简洁的设计，利用高度概括的文字和动漫人物的经典台词介绍动漫背景，吸引浏览者的兴趣。最后提供一个了解更多的按钮。

<section class="header">
	<nav>
    <h2>Arcane <span>双城之战</span></h2>
    <div id="navLinks">
      <i class="fa-solid fa-xmark" οnclick="hideMenu()"></i>
      <a href="#">首页</a>
      <a href="#introduction">简介</a>
      <a href="#anime">动漫</a>
      <a href="#characters">角色</a>
      <a href="#evaluation">评论</a>
      <a href="#about">关于</a>
    </div>
    <i class="fa-solid fa-bars" οnclick="showMenu()"></i>
  </nav>

  <div class="text-box">
    <h1>皮城祖安&nbsp;<span class="pulser">/ 秩序混乱</span></h1>
    <p>当你有了改变世界的能力，就不用谁批准。<br>
        —— 维克托</p>
    <a href="#introduction" class="to-btn">LEARN MORE</a>
  </div>
</section>

2.1.2 首页CSS交互动画效果设计

首页中设计了两处利用CSS实现的交互动画效果，一处是导航栏的下划线交互效果，另一处是了解更多按钮的交互效果。

导航栏的下划线交互效果的设计：利用CSS中的伪元素::after和伪类:hover实现，首先让::after的线初始宽度为0，鼠标移入就变成100%，就可以实现导航栏的下划线交互效果，同时使用transition实现平滑过渡。

.header nav #navLinks a::after {
  display: block;
  content: '';
  height: 2px;
  width: 0;
  background-color: #f0f5f0;
  margin: auto;
  transition: .5s;
}

.header nav #navLinks a:hover::after {
  width: 100%;
}

了解更多按钮交互效果设计：利用伪类:hover实现，当鼠标移入时，改变其border和background颜色。

.header .text-box .to-btn {
  display: inline-block;
  text-decoration: none;
  color: #ba8964;
  border: 2px solid #f0f5f0;
  padding: 0.7rem 2.2rem;
  border-radius: 2rem;
  font-size: .8rem;
  background: transparent;
  cursor: pointer;
  transition: 0.5s;
}

.header .text-box .to-btn:hover {
  border: 2px solid #ba8964;
  background: #09272e;
}

2.1.3 首页界面图

2.2 简介页面

2.2.1 简介页面元素设计

简介页面用于对《双城之战》动漫的基本信息进行介绍，主要包括三个模块，分别是创作团队、故事背景和作品成就。

<section id="introduction">
  <h1>简介</h1>

  <p style="color: #777;">“不负进步之城的美誉，我们的未来一片光明！”
    <br>——杰斯
  </p>

  <div class="row">
    <div class="col">
      <h3>创作团队</h3>
      <p>双城之战拳头游戏开发和制作，福蒂奇制片公司负责动画制作。
        <br>拳头游戏公司（Riot Games, Inc.）
        <br>是一家总部位于美国加利福尼亚州洛杉矶的电子游戏开发商、发行商和电子竞技赛事组织方。2006年9月，布兰登·贝克Brandon Beck和Marc
        Merrill为开发《英雄联盟》而创立了拳头游戏公司，后继续开发了多款衍生游戏及独立背景的第一人称射击游戏《无畏契约》。
        <br>福蒂奇制片公司（Fortiche Production）
        <br>是一家位于法国巴黎的动画工作室
        <br>他们为《英雄联盟》制作的第一部动画，是金克丝的英雄宣传片《Get Jinxed》
        <br>后来被大众熟知的S4主题曲MV《Warriors》、K/DA女团第一部音乐MV《POP STARS》和S8主题曲MV《RISE/登峰造极境》也均出自他们之手
      </p>
    </div>
    <div class="col">
      <h3>故事背景</h3>
      <p>在三千多年前恕瑞玛帝国统治的时代，祖安这座港口城市就兴起了，成为了瓦洛兰大陆和恕瑞玛大陆之间的通道，也成为了贸易中心。随着恕瑞玛的覆灭，港口城市独立成为祖安，一些商人家族迅速累积了财富，并不断扩大自己的权势。
        <br>大概在两百年前，祖安人决定使用炸药来开辟皮尔特运河，建造日之门，但因为施工事故，使得祖安这座城市一分为二，海水淹没了下城的很多地区。
        <br>在此之后，有钱的贵族和商人不断巩固自己的地位，继续扩大皮城的繁荣。
        <br>皮尔特沃夫成为了祖安的上城，文化、商业和科技高度发展。而祖安则恰恰相反，充斥着贫穷打斗，各种团体的纷争。
        <br>贫富悬殊、地位差距等等，导致双城之间的形势不断恶化，并且愈演愈烈，故事就在这样的背景下开始了
      </p>
    </div>
    <div class="col">
      <h3>作品成就</h3>
      <p>《英雄联盟：双城之战》在安妮奖中电视/流媒体单元斩获了最佳艺术指导奖、最佳角色设计奖、最佳影视角色动画奖、最佳视觉效果奖、最佳动画配音奖、最佳电视动画奖、最佳分镜奖、最佳导演奖、最佳编剧奖九项大奖，所有提名全部获奖，剧集获得了全球专业评委的高度认可。</p>
    </div>
  </div>
</section>

2.2.2 简介CSS交互动画设计

利用伪类:hover添加box-shadow属性，同时使用transition实现平滑过渡。

#introduction .row .col:hover {
  box-shadow: 0 0 30px #f0f5f0;
}

2.2.3 简介界面图

2.3 动漫各集介绍页面

2.3.1 动漫各集介绍元素设计

该页面介绍了《双城之战》动漫1~6集，以官方海报图的为背景图片，利用鼠标在官方海报图上的悬停展示集数详情，进行各集简介。

<section id="anime">
  <h1>动漫</h1>

  <p>“因为我大概也是个异类吧。”
    <br>——凯特琳
  </p>

  <div class="row">
    <div class="col">
      <img src="./images/anime1.webp" alt="london">
      <div class="layer">
        <h3>第一集
          <br>欢迎来到游乐场
        </h3>
      </div>
    </div>
    <div class="col">
      <img src="./images/anime2.webp" alt="london">
      <div class="layer">
        <h3>第二集
          <br>有些谜题还是不解为妙
        </h3>
      </div>
    </div>
    <div class="col">
      <img src="./images/anime3.webp" alt="london">
      <div class="layer">
        <h3>第三集
          <br>改变需要不择手段的暴力
        </h3>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <img src="./images/anime4.webp" alt="london">
      <div class="layer">
        <h3>第四集
          <br>进步日快乐！
        </h3>
      </div>
    </div>
    <div class="col">
      <img src="./images/anime5.webp" alt="london">
      <div class="layer">
        <h3>第五集
          <br>众人都想与我为敌
        </h3>
      </div>
    </div>
    <div class="col">
      <img src="./images/anime6.webp" alt="london">
      <div class="layer">
        <h3>第六集
          <br>当高墙倒下
        </h3>
      </div>
    </div>
  </div>
</section>

2.3.2 动漫介绍CSS设计

首先在CSS中写好悬浮层layer和悬浮字h3并将其设置为透明，利用伪类:hover改变透明度，同时使用transition实现平滑过渡。

#anime .row .col .layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: transparent;
  transition: .5s;
}

#anime .row .col .layer h3 {
  position: absolute;
  bottom: 0;
  opacity: 0;
  width: 100%;
  color: #fff;
  font-size: 0.5rem;
  transition: .5s;
}

#anime .row .col .layer:hover {
  background: rgba(2, 2, 2, 0.5);
}

#anime .row .col .layer:hover h3 {
  bottom: 35%;
  opacity: 1;
  font-size: 1.5rem;
}

2.3.3 动漫界面图

2.4 主要角色介绍页面

2.4.1 主要角色介绍页面元素设计

该界面介绍动漫中的主要角色，共六个，设计六个纵向矩形的人物卡片，卡片中包括官方任务海报图和人物简介，用<div>括住这六张卡片实现多行多列布局。

<section id="characters">
  <h1>主要角色</h1>

  <p>“你宁愿为理想而死，都不愿为理想而战吗？"
    <br>——希尔科
  </p>

  <div class="row">
    <div class="col">
      <img src="./images/role1.jpg" alt="library" οnclick="showFullImage(event)" background="./images/role7.webp">
      <p>金克丝和蔚是一对复杂的恩怨姐妹。她有着天才的头脑和狂躁的性格，由于过去的创伤，金克丝的才华反而让她成为一个难以对付的顽童。</p>
    </div>
    <div class="col">
      <img src="./images/role2.jpg" alt="basketball" οnclick="showFullImage(event)">
      <p>这位粉色头发的斗士童年坎坷，尽管她的作风有那么一点鲁莽——但她的心始终正直。《双城之战》讲述了蔚从祖安街头的混混，一路成长为皮尔特沃夫和平守护者的过往经历。</p>
    </div>
    <div class="col">
      <img src="images/role3.jpg" alt="cafeteria" οnclick="showFullImage(event)">
      <p>杰斯被称为皮尔特沃夫的未来守护者。他原本是个发明家，如今则是一名政治领袖。他在海克斯科技的发明中起到了至关重要的作用——一种使用科学手段对奥术能量加以利用的技术。
      </p>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <img src="images/role4.jpg" alt="cafeteria" οnclick="showFullImage(event)">
      <p>凯特琳个性顽强，意志坚定。家人眼中的她是一个不肖女，而她始终都在努力摆脱家人的掌控。其实她仍然爱着家人，但她憎恨自己与生俱来的特权。她认为财富不过是一个囚笼。</p>
    </div>
    <div class="col">
      <img src="images/role5.jpg" alt="cafeteria" οnclick="showFullImage(event)">
      <p>维克托在祖安出生。凭借敏锐的头脑，他得以进入皮尔特沃夫生活。在海克斯科技的发明中，他是杰斯的搭档。然而，维克托的疾病逼迫着他挑战这项新技术的极限。</p>
    </div>
    <div class="col">
      <img src="images/role6.jpg" alt="cafeteria" οnclick="showFullImage(event)">
      <p>范德尔在地下城区的势力很大，不过他只关心怎么对付皮尔特沃夫那些严厉粗暴的执法者，从他们手中保护祖安居民的安全。</p>
    </div>
  </div>
</section>

2.4.2 角色界面图

2.5 动漫评论页面

2.5.1 动漫评论页面元素设计

该页面展示《双城之战》动漫的豆瓣评价，摘选了四条评论，形成2*2的布局，每条评论单元包括头像、昵称、评论、评分这四个元素。

<section id="evaluation">
  <h1>评论</h1>
  <p style="color: #777;">“正是你的与众不同让你强大。”
    <br> ——蔚
  </p>
  <div class="row">
    <div class="col">
      <img src="images/evaluate1.jpg" alt="">
      <div>
        <p>
          金克丝的意义就是金克丝 一切都回不去了 爆爆变了 所有都变了 薇最终还是有了她的小蛋糕凯特琳 希尔科也成了曾经他最看不起的范德尔的模样 杰斯跟维克托一心想促进的双城和平 也终将在超死神飞弹中
          化为泡影 就连艾克的时光倒流 也难以挽回失去的曾经。
        </p>
        <h3>贝克街的大盗</h3>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
      </div>
    </div>
    <div class="col">
      <img src="images/evaluate2.jpg" alt="">
      <div>
        <p>
          每一帧都是欧卡美术天花板，眼睛都不舍得眨，片头也都不跳。但对金克丝这种疯子爱不起来，“养女儿”真是游戏界拿捏男玩家屡试不爽的题材，我参与的项目也是，但实在厌了。红毛和蓝毛大小姐还挺好磕的，喜欢希尔科手下那个忠诚隐忍的大姐。
        </p>
        <h3>全息玫瑰脆片</h3>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-regular fa-star"></i>
      </div>
    </div>
    <div class="col">
      <img src="images/evaluate3.jpg" alt="">
      <div>
        <p>
          《不错 但是不如早年的魔兽cg… 意外的是黑默丁格也太太太可爱了！！ 毛茸茸又小小 蓝色的大眼睛
        </p>
        <h3>聿泠三 </h3>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-regular fa-star"></i>
      </div>
    </div>
    <div class="col">
      <img src="images/evaluate4.jpg" alt="">
      <div>
        <p>
          每集真人剧时长的40分钟+——虽然许多年前我就觉得这应该是一种开拓成年人动画观众市场的潜在趋势，可惜一直都没啥好的成功范本，这也许可以是个突破口。这确实是个里程碑了。
        </p>
        <h3>恶魔的步调</h3>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
      </div>
    </div>
  </div>
</section>

2.5.2 动漫评论页面CSS设计

每个评论卡片都利用:hover和transform实现鼠标悬停评论卡片缩放功能

#evaluation .row .col:hover {
  transform: scale(1.1);
}

2.5.3 评论界面图

3 开发过程中遇到的问题

3.1 移动端Web设计

在该网页设计之初，并没有设计移动端Web的视图。因此，在对页面进行缩小会导致导航栏变形、整体页面文字交错，无法阅读等问题。在Web应用基础的课程中，老师强调了移动端Web设计的重要性，并讲解了@media的使用方法，最后在根据老师的教学视频（Demo中的navbar样例），对网页进行了移动端Web的设计。

3.1.1 导航栏移动端Web解决

首先在CSS中写好页面宽度小于768px时的nav样式，但其属性right为-30%，利用@media对网页宽度进行监听，当页面宽度小于768px时，导航栏样式改变，同时原本属性display为none的图标fa-bars和fa-xmark变为block显示。通过点击事件onclick收起和展开nav

@media (max-width: 768px) {
  .header nav #navLinks a {
    text-align: center;
  }
  .header nav #navLinks a:hover {
    color: #09272e;
    background-color: #ba8964;
  }
}

@media (max-width: 768px) {
  .header nav #navLinks {
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -30%;
    height: 100%;
    width: 30%;
    background-color: #f0f5f0;
    transition: .7s;
  }
}

.header nav .fa-xmark,
.header nav .fa-bars {
  color: #ba8964;
  padding: 0.5rem 0.75rem;
  font-size: 1.5rem;
  cursor: pointer;
  display: none;
}

@media (max-width: 768px) {
  .header nav .fa-xmark,
  .header nav .fa-bars {
    display: block;
  }
}

function showMenu() {
  navLinks.style.right = '0';
  navLinks.addEventListener('click', function () {
    hideMenu();
  })
}

function hideMenu() {
  navLinks.style.right = '-30%';
}

3.1.2 各模块移动端Web解决

利用@media对网页宽度进行监听，当页面宽度小于768px时，改变flex-direction属性为column，使内容垂直排放，解决排版问题。

@media (max-width: 768px) {
  #introduction .row {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  #anime .row {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  #characters .row {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  #evaluation .row {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  #back h1 {
    font-size: 1rem;
  }
}

3.2 查看角色图的实现

按照常规的网页设计，主要角色的海报图要允许浏览者可以点开进行查看，但是本人没有实现过相关操作，因此在网上进行搜索和浏览，找到了相应的实现方式。

首先设计图片点击函数showFullImage(event)，在函数中将图片src赋给fullImage的src，再通过设置body.style.marginRight禁止滚动，同时将popup的属性display设置为flex显示。最后在CSS中利用@keyframes增加一些动画使其显示过程平滑。

function showFullImage(event) {
  // 设置要全屏显示的图片src
  document.getElementById('fullImage').src = event.target.src;
  // 得到Y滚动条宽度
  // innerWidth是以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度
  // offsetWidth 是一个只读属性，返回一个元素的布局宽度
  var scrollbarWidth = window.innerWidth - document.body.offsetWidth;
  // body不能滚动      
  document.body.style.overflowY = 'hidden';
  // 防止页面在隐藏滚动条时闪动      
  document.body.style.marginRight = scrollbarWidth + 'px';
  var popup = document.getElementById('popup');
  popup.style.display = 'flex';
  popup.style.animation = 'fadein 0.5s';
  popup.onclick = function () {
  popup.style.animation = 'fadeout 0.6s';
  // 延时将display置为none，以让有时间动画。注意设置隐退的时间多一点会更平滑。
  setTimeout(() => {
    document.body.style.overflowY = 'auto';// body恢复滚动
    document.body.style.marginRight = 0;
    popup.style.display = 'none';
  	}, 500);
	}
}

#popup {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  display: none;
  justify-content: center;
  align-items: center;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes zoomin {
  0% {
    height: 0%;
  }
  100% {
    height: 90%;
  }
}

#popup img {
  border-radius: 1rem;
  height: 90%;
  animation: zoomin 0.5s;
}

4 总结

在本次的《Web应用基础》课程中，我学习了HTML、CSS、JavaScript、TypeScript，且初步接触前端框架Angular。在最后利用所学习到HTML和CSS，进行Web静态页面开发。HTML作为构建网页结构的标记语言，CSS则用于设计和样式化页面，因此，掌握一定量的HTML和CSS知识才能设计出有良好结构和吸引力的页面。

在进行Web静态页面的开发过程中，我对课上学习的HTML和CSS知识进行了复习，同时也积累的许多知识和宝贵的经验。HTML作为一个页面的结构基础，是开发静态网页的基础，上手并没有难度，在了解了块级元素、内联元素和内联块级元素以及常用标签后就可以进行使用了。本次Web静态页面的开发难点在于CSS，该页面主要采用的网页布局是课堂上学习的flex弹性布局，灵活运用弹性布局可以实现灵活的自适应页面布局

除此之外，跨设备的设计也是非常重要的，不同设备对网页的显示可能会产生差异。因此课程和开发过程中，我学会了使用浏览器开发工具和响应式技术，确保页面在各种环境下都能正确展示和运行。

总而言之，本次Web静态页面的开发是一项有趣而具有挑战性的任务。通过掌握HTML、CSS以及相关技术，我能够创建出我自己的静态网页，并在用户体验方面做出优化。我期待继续深入学习和探索Web开发的更多领域，不断提升自己的技能水平。