1 课程要求
构建静态网站
采用纯 CSS 或你喜欢的任何 CSS 框架如 Bootstrap、MDB、Tailwind 等构建一个主题自选且不少于5个页面（Web Page）的网站，网站都需部署到你喜欢的网站托管服务器上如 Gitpage 等。提交可浏览的网址（URL），该网站需放置你的结业报告。
撰写结业报告，要求如下：
- 题目为《通信软件开发与应用》课程结业报告；
- 报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；
- 该报告以 Web 页面的形式呈现，从你上面开发的网站中可访问到。
2 内容及效果
2.1 内容
此次课程结业任务我主要做了一个“喵咪之家”的喵咪购养网站，叫做“The Home of Cats”。包括“网站首页”、“关于我们”、“我要购猫”、“内容分享”、“联系我们”5个页面，为“喵咪之家”店铺打造的了解、购猫、内容、咨询等功能的官方平台。
具体见效果。
2.2 效果
- 页面一：网站首页
网站首页简单介绍了猫咪之家的店铺信息，以及联系方式、优惠信息等。
首页上面有三个不同的滑动浏览窗口，左侧部件可以更换网页主题皮肤。 - 页面二：关于我们
页面二详细介绍了“猫咪之家”的详细信息，主要是店铺简介，服务内容，及质量。 - 页面三：我要购猫
页面三展示了待售猫咪，左侧是各种品种的猫咪分类，中间内容是正在展示的猫咪，可以选择展示方式及数量。 - 页面四：内容分享
页面四主要展示网站上发表的文章及内容。左侧是按分别发布时间、最新评论排布的文章列表。中间是展示几篇详细文章。 - 页面五：联系我们
页面五展示了“猫咪之家”的详细联系方式、地址、社交平台，下面有店铺的营业时间，其中，含有文字输入窗口，可以给店铺留言。
每张页面的右上角都有结业报告的链接入口。
3 开发过程
3.1 开发前准备
在开发之前，首先确定了此次开发网页的主题，为：“喵咪之家"购猫网站；
其次，规划了五个网页的关系、各自的内容及大致排版，如每个网页都具备可以相互访问的导航条，每个页面的皮肤颜色都可更换等等要求。
结合自己擅长的Web开发方式，最后选择使用CSS及Bootstrap在VS Code上来制作本网页。
3.2 网页本地制作
整个网页制作过程中，主要基于Code软件编写，设计了大概的框架及排版之后，再根据需求，在网上寻找需要的素材，再把素材放到代码里进行灵活修改。包括导航条的跳转、网页主题颜色的更换、横屏滑动窗口的设计等。之后，进行内容填充，再添加一些动态的窗口运动的转换效果，来装饰美化网页。
这里就主要介绍网页制作过程中的几个比较重要的部分。
- 页面导航条设计
5个页面的首部导航条设计一致，均采用<div>标签进行页面排布，通过调用外部样式表进行美化。
其中，在头部引用bootstrap的css类，在需要的位置设置上<a>超链接标签，实现各个页面的定位互动。
具体代码如下：
<header id="header">
<div class="header-top">
<div class="wrapper">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="header-info">
<div class="description-header">
欢迎光临猫咪之家
</div>
<div class="color-primary">
Call me：123 4567 8910
</div>
<div class="color-primary">
哈喽 喵喵
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<a href="." class="btn extra-color text-uppercase pull-right">回到首页</a>
</div>
</div>
</div>
<div class="header-nav">
<div class="wrapper">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
<a href="." class="logo"></a>
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-6 cart-block-r">
<div class="cart-block pull-right">
<i class="flaticon-shopping-bag1"></i>
<a target="_blank" href="https://blog.csdn.net/m0_58892312/article/details/125590771">我的《通信软件开发与应用》课程结业报告（点击查看）</a>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-7 col-xs-12 nav-box">
<span id="toggle-nav" class="ef icon_menu mobile-menu-toggle"></span>
<nav class="nav-container">
<ul>
<li class="search pull-right">
<form class="search-form form-inline" action="#" method="POST">
<div class="form-group">
<label class="sr-only" for="searchQuery">搜索...</label>
<input type="search" class="search-field" id="searchQuery" placeholder="搜索...">
</div>
<button type="submit" class="hidden"><span class="ef icon_search"></span></button>
</form>
<a class="iconSearch" href="#">
<span class="ef icon_search"></span>
</a>
</li>
<li><a class="#" href="index.html">网站首页</a></li>
<li><a class="#" href="about.html">关于我们</a></li>
<li><a class="#" href="shop.html">我要购猫</a></li>
<li><a class="#" href="blog.html">内容分享</a></li>
<li><a class="#" href="contact.html">联系我们</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
网页尺寸变小之后，导航条变为隐藏，点击之后竖列显示：
- 主题颜色更换设计
同时，在每个网页的左侧设计了固定的皮肤更换安按钮，主要是参考了网上的CSS设计，在代码中连接<link>外部样式表，通过<a>对应调用。
具体代码如下：
<!-- SWITCHER -->
<link rel="stylesheet" id="switcher-css" type="text/css" href="plugins/switcher/css/switcher.css" media="all" />
<link rel="alternate stylesheet" type="text/css" href="plugins/switcher/css/color1.css" title="color1" media="all" />
<link rel="alternate stylesheet" type="text/css" href="plugins/switcher/css/color2.css" title="color2" media="all" />
<link rel="alternate stylesheet" type="text/css" href="plugins/switcher/css/color3.css" title="color3" media="all" />
<link rel="alternate stylesheet" type="text/css" href="plugins/switcher/css/color4.css" title="color4" media="all" />
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Start Switcher -->
<div class="switcher-wrapper">
<div class="demo_changer">
<div class="demo-icon customBgColor"><span class="ef icon_cog "></span></div>
<div class="form_holder">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="predefined_styles">
<div class="skin-theme-switcher">
<h4>皮肤</h4>
<a href="#" data-switchcolor="color1" class="styleswitch" style="background-color:#7da500;"> </a>
<a href="#" data-switchcolor="color2" class="styleswitch" style="background-color:#b7ca0d;"> </a>
<a href="#" data-switchcolor="color3" class="styleswitch" style="background-color:#0bdabc;"> </a>
<a href="#" data-switchcolor="color4" class="styleswitch" style="background-color:#01a664;"> </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Switcher -->
- 主页面滑动窗口设计
主页面的网站首页中的横屏滑动展示页面，应用于很多网站的首页设计，如重庆交大网站的首页中就有，因此，也想设计在本网页中，通过寻找资料，采用外部样式实现，设计代码如下：
/* home slider */
.home-slider {
text-align: left;
}
.home-slider .item {
min-height: 600px;
position: relative;
}
.home-slider .item .wrapper {
padding-top: 93px;
}
.home-slider .item .wrapper.s-custom {
padding-top: 136px;
}
.home-slider .item .wrapper.s-custom-2 {
padding-top: 160px;
}
.home-slider .item .wrapper.s-content-center {
text-align: center;
}
.home-slider .item .wrapper.s-content-center .b-s-text {
margin: 0 auto 50px;
line-height: 26px;
}
.home-slider .item .wrapper.s-content-center .input-box .button-border .text-btn {
height: 51px;
line-height: 51px;
padding: 0 35px;
}
.home-slider .item .h-slider-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<div id="owl-home" class="owl-carousel owl-theme home-slider">
<div class="item">
<div class="h-slider-bg">
<img class="slide-bg" src="media/home-slider/slide-1.jpg" alt="slide-1">
</div>
<div class="wrapper s-custom">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="b-s-desc main-slider_fadeInLeft ">创造最佳体验</div>
<h1 class="s-custom-3">纯血统保障<br />我舍种群全部来自国外顶级知名猫舍，血统纯正，真实可查。</h1>
<a class="btn-1 h-slide-btn" href="#">与我们联系</a>
</div>
</div>
</div>
<div class="item">
<div class="h-slider-bg">
<img class="slide-bg" src="media/home-slider/slide-2.jpg" alt="slide-2">
</div>
<div class="wrapper">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1>健康保障<br />疫苗＋定期驱虫+定期体检，确保健康幼宠给您。</h1>
</div>
</div>
</div>
<div class="item">
<div class="h-slider-bg">
<img class="slide-bg" src="media/home-slider/slide-3.jpg" alt="slide-3">
</div>
<div class="wrapper s-custom-2 s-content-center">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="s-border">贴心售后保障</h1>
<div class="b-s-text">30天售后健康保障＋一对一专人服务+终身喂养指导，帮您养好宠。</div>
<div class="input-box in-home-slider">
<button class="button-border text-uppercase">
<span class="text-btn">立即购养</span>
<span class="borfer-btn"></span>
</button>
</div>
</div>
</div>
</div>
</div><section class="tools-bg dash-top-line">
- 待售猫咪列表设计
在“我要购猫”页面中，想要设计一个类似购物网站中可以横排和纵列两种模式进行预览商品的效果，进行查询素材模板，进行替换实现，具体样式不在再展示。
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
<ul id="type-of-display" class="pull-right">
<li>
<button class="toogle-view grid-3 active-view">
<span class="ef icon_grid-2x2"></span>
</button>
</li>
<li>
<button class="toogle-view grid-list">
<span class="ef icon_ul"></span>
</button>
</li>
</ul>
</div>
- 文字输入窗口的设计
文字输入窗口的设计是为实现“联系我们”页面，用户可以直接网页输入反馈及邮箱信息来发送给商家消息。主要借鉴了网上的素材来实现。
具体代码如下：
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 wow fadeInRight">
<h4>哈喽!</h4>
<div class="contact-form-box">
<div id="success"></div>
<form action="#" id="contactForm">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="input-box">
<span class="ef icon_profile"></span>
<input type="text" name="user-name" id="user-name">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="input-box">
<span class="ef icon_mail"></span>
<input type="email" name="user-email" id="user-email">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="input-box">
<span class="ef icon_phone"></span>
<input type="text" name="user-phone" id="user-phone">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="input-box">
<span class="ef icon_comment"></span>
<textarea id="comment" rows="4" cols="30" name="message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="input-box">
<button class="button-border text-uppercase pull-right">
<span class="text-btn">发送消息</span>
<span class="borfer-btn"></span>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
3.3 网站托管
通过查阅网上参考教程及视频，在github上注册账号、建立仓库并使用Git将网站托管到github。
4 遇到的问题及解决方案
-
上传部分图片失败（未解决）
在图片上传过程中，是直接将上传到github的一个new issues上，可以生成一个图片的绝对链接，在html网页中实现引用。由于部分图片采用来网络链接去调用，但是网络托管之后，不知道什么原因会显示不出来。之后只能无奈下载图片改写路径，带在代码文件里。 -
动画效果添加不顺利（已解决）
在设计完网站大致内容后，我想要将网页中的模块添加一些动画，显得灵动美观一些，于是，在网上找好了动画效果需要的样式，但是，在本土化过程中，一直搞不清楚该放在那个位置，经过查询资料最后解决了问题。 -
网页整体字体不合适（已解决）
在设计完成网页之后，在浏览整个网页时才发现有些字体显现大小与预想的不一致，出现了字体过小或过大的不协调现象。之后又重新调整了整个代码中的样式设定，找了半天，有点麻烦，这也对今后的网页设计带来了经验教训。
5 总结
本次结业任务通过使用自己喜欢的方式设计网页，对以后的Web网页设计和学习，都是一次很有意义的经历。在设计一个网页时，首先需要了解目标网页的设计主题和功能，知道自己熟悉的编程方法及网页适合的设计方法，根据类型选择方法。在设计过程中，同样的，遇到问题，根据类型选择方法，及时针对问题查询资料，还要学会如何高效解决问题，找到对应的解决方案。在实际设计之后，要检测网页的功能正确性及完善性，及时发现漏洞并修补。
此外，本次网页设计本身就是对自己的锻炼，人生第一次设计网页，由于能力有限，有一些预期的效果还未能实现，有点遗憾，但是，这此结业作业并不意味着网页设计的结束，而恰恰是我今后Web之路的开端，相信只有一次一次的尝试，积累经验，未来一定会有更深厚的开发能力。
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
