网页设计-体育健康生活

浏览网页时，经常看到网页的导航条是由文字制作的。这是因为文字与图像相比，文字的下载速度更快一些。但加上连接的文字可能会改变它的颜色和样式，和网页整体不协调，所以这次网页设计中利用了CSS样式来定义文字的统一样式，并与网页融为一体，让网页看以来更统一。选择器指向您需要设置样式的 HTML元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。多条 CSS 声明用分号分隔，声明块用花括号括起来。

5 、热点链接

在打开带有图片的网页时，有时看到这样的情况:当鼠标指向图片的不同部位是，可以打开不同的超级链接，这种技术我们称之为网页图片热点链接。热点链接经常出现在一个网站的导航页里，热点链接不仅可以将整张图片作为链接的连载体，还可以将图片的某一部分设为链接，这要通过设置影像地图来实现。热点链接的原理就是利用HTML语言在图片上定义形状的区域，然后给这些区域加上链接，这些区域被称热点。而在本次设计中，通过利用锚点链接，实现跳展到某个网站链接的效果。

6 、框架的使用

在网页设计中，框架可以将窗口分割成几个不同的小窗口，各个窗口包含不同的网页，并且在替换窗口中的网页文件时不会影响到其他窗口中的网页。框架最普通的用处就是将页面划分成为一个导航区和一个内容区。框架集是一个使用框定义网页的文件。框架集中保存了关于页面中的框架尺寸、位置以及每个框架中作为内容载入的所有文件名得信息。用框架制成的网页，如图所示。

第四章、主页说明

结构分析

（1）网站具体页面及栏目设置

根据网站性质以及网站运行总结，结合当前网站信息采集情况制定，网站栏目列为:首页（篮球）、足球、跑步、乒乓球、我要留言、联系我们六个板块。网站首页分外头部、内容部、尾部三大项。

头部内容为网站的常规设置，包括: 第一排是网站栏目导航栏，首页（篮球）、足球、跑步、乒乓球、我要留言、联系我们六个板块，第二排是学会Logo标志，学会标志后面可以划分两个广告栏，学会有重要活动时可以在此显示，吸引客户注意。

内容部包括：最新公告栏、运动展示、关于这个运动、某运动的案例、最新资讯。

样式分析

这个网页作品首页采用了一行四列的内容对齐与分布方式，网站从上至下都遵循这个对齐的原理。如内页列表有类似的布局，也应该按照这个比例来布局分配。

（2）这个网页设计作品的版式设计跟上面介绍的有点类似，也采用了一行四列的排版布局方式。而且都是头部采用灰色压背景图的方式。这在内页一些白色底内容上，需要考虑头部的黑白模式切换的交互设计。

（3）这个网页版式作品跟上面差不多的。有三列也有两列，还有错位。但基本上保持主要内容区域左右两边对齐

动画分析

采流动试用了插画与动画相结合的设计，流畅的动画，鲜艳的配色，使整个网站设计看起来非常精美。

效果及核心代码

（1）代码：

（1）效果图：

（2）代码：

效果图：

第五章、分页说明

1、结构分析

分页具体及栏目设置

根据网站性质以及网站运行总结，结合当前网站信息采集情况制定，分页为: book.html、contact.html、detail.html、football.html、index.html、ping.html、product_xq.html、running.html八个页面。每个页面与个个导航中一一对应，其中分别有两个为补充页面。

2、样式分析

（1）这个分页的版式，采用了多个网页类的模式，且多个模块下还有局部变化，适当增加几何图形把模块内容丰富化，整体风格看起来有创意。

（2）这种布局方式是比较好的（一个页面三个模块更好）。因为文字的信息量很大，而插图配图很少，整体上看起来版式简约，界面清新，十个不可多得的网页设计作品。

3、动画分析

八个网页采流动试用了插画与动画相结合的设计，流畅的动画，鲜艳的配色，使整个网站设计看起来非常精美。

4、效果及核心代码

（1）代码

（1）效果

（2）代码

（2）效果

代码

（3）效果

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/animate.css" />
</head>
<body>
<div class="header">
  <div class="main">
     <a href="index.html"><img src="../tiyu.html/images/logo.jpg" /></a>
  </div>
</div>
<div class="clear"></div>
<div class="nav">
  <ul>
    <li><a href="index.html">篮球</a></li>
    <li><a href="football.html">足球</a></li>
    <li><a href="running.html">跑步</a></li>
    <li><a href="ping.html">乒乓球</a></li>
    <li><a href="book.html">我要留言</a></li>
    <li><a href="contact.html">联系我们</a></li>
  </ul>
</div>
<div class="clear"></div>
<div class="banner">
  <div class="b-img">
    <img src="images/banner.jpg" width="100%"/>
    <img src="images/banner2.jpg" width="100%"/>
  </div>
  <div class="clear"></div>
  <div class="b-list"> </div>
</div>
<div class="clear"></div>
<div class="wow fadeInUp noticeBox">
  <div class="main">
    <img src="images/notice.png" />
    <div class="tit">最新公告：</div>
    <div class="gg">
      <marquee><p>因为运动 所以快乐 因为运动 所以快乐 因为运动 所以快乐 因为运动 所以快乐 因为运动 所以快乐 因为运动 所以快乐  </p></marquee>
    </div>
  </div>
</div>
<div class="clear"></div>
<div class="wow fadeInRight part1" data-wow-offset="10">
  <ul>
    <li>
      <a href="running_xq.html"><img src="images/2.jpg" /></a>
      <p>运动展示</p>
    </li>
    <li>
      <a href="running_xq.html"><img src="images/5.jpg" /></a>
      <p>运动展示</p>
    </li>
    <li>
      <a href="running_xq.html"><img src="images/6.jpg" /></a>
      <p>运动展示</p>
    </li>
    <li>
      <a href="running_xq.html"><img src="images/7.jpg" /></a>
      <p>运动展示</p>
    </li>
    <li>
      <a href="running_xq.html"><img src="images/8.jpg" /></a>
      <p>运动展示</p>
    </li>
  </ul>
</div>
<div class="clear"></div>
<div class="wow fadeInLeft part2">
  <div class="contitbox">
    <label>关于篮球</label>
    <a href="football.html">更多</a>
  </div>
  <div class="footballBox">
    <div class="L"><img src="images/1.jpg" /></div>
    <div class="R">体育运动、体育习惯对人们健康生活方式的形成具有积极的促进作用。首先, 体育运动有利于人类身体素质的健康发展。体育锻炼可以促进内脏器官机能的增强;可以提高大脑皮层的综合分析能力, 增强机体对外界环境的适应能力;可以增大肺活量、提高呼吸效能;可以增强人体免疫力、减少疾病发生, 改善神经系统灵活性和均衡性。</div>
  </div>
</div>
<div class="clear"></div>
<div class="wow fadeInUp part3">
  <div class="contitbox">
    <label>篮球案例</label>
    <a href="running.html">更多</a>
  </div>
  <ul>
    <li>
      <div class="pro">
        <a href="running_xq.html"><img src="images/2.jpg" /></a>
      </div>
      <a href="running_xq.html"><p class="ccsl">篮球案例</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="running_xq.html"><img src="images/3.jpg" /></a>
      </div>
      <a href="running_xq.html"><p class="ccsl">篮球案例</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="running_xq.html"><img src="images/4.jpg" /></a>
      </div>
      <a href="running_xq.html"><p class="ccsl">篮球案例</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="running_xq.html"><img src="images/9.jpg" /></a>
      </div>
      <a href="running_xq.html"><p class="ccsl">篮球案例</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="running_xq.html"><img src="images/10.jpg" /></a>
      </div>
      <a href="running_xq.html"><p class="ccsl">篮球案例</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="running_xq.html"><img src="images/11.jpg" /></a>
      </div>
      <a href="running_xq.html"><p class="ccsl">篮球案例</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="running_xq.html"><img src="images/12.jpg" /></a>
      </div>
      <a href="running_xq.html"><p class="ccsl">篮球案例</p></a>
    </li>
    <li>
      <div class="pro">
        <a href="running_xq.html"><img src="images/13.jpg" /></a>
      </div>
      <a href="running_xq.html"><p class="ccsl">篮球案例</p></a>
    </li>
  </ul>
</div>
<div class="clear"></div>
<div class="main">
  <div class="wow fadeInLeft part4 bg">
    <div class="contitbox">
      <label>最新资讯</label>
      <a href="news.html">更多</a>
    </div>
    <ul>
      <li><a href="detail.html" class="ccsl"> > 运动需要注意什么细节问题?</a></li>
      <li><a href="detail.html" class="ccsl"> > 运动如何更好锻炼心肺?</a></li>
      <li><a href="detail.html" class="ccsl"> > 运动的选择需要注意那几点呢？</a></li>
      <li><a href="detail.html" class="ccsl"> > 运动更要谨慎?</a></li>
      <li><a href="detail.html" class="ccsl"> > 运动时要倍加注意?</a></li>
    </ul>
  </div>
  <div class="wow fadeInRight part4">
    <div class="contitbox">
      <label>运动动态</label>
      <a href="news.html">更多</a>
    </div>
    <ul>
      <li><a href="detail.html" class="ccsl"> > 运动需要注意什么细节问题?</a></li>
      <li><a href="detail.html" class="ccsl"> > 运动如何更好锻炼心肺?</a></li>
      <li><a href="detail.html" class="ccsl"> > 运动的选择需要注意那几点呢？</a></li>
      <li><a href="detail.html" class="ccsl"> > 运动更要谨慎?</a></li>
      <li><a href="detail.html" class="ccsl"> > 运动时要倍加注意?</a></li>
    </ul>
  </div>
</div>
<div class="clear"></div>
<div class="wow fadeInUp part5" data-wow-offset="10">
  <div class="contitbox">
    <label>篮球案例</label>
    <a href="running.html">更多</a>
  </div>
  <ul>
    <li>
      <a href="running_xq.html">
      <img src="images/14.jpg" />
      <p>篮球案例</p>
      </a>
    </li>
    <li>
      <a href="running_xq.html">
      <img src="images/15.jpg" />
      <p>篮球案例</p>
      </a>
    </li>
    <li>
      <a href="running_xq.html">
      <img src="images/10.jpg" />
      <p>篮球案例</p>
      </a>
    </li>
    <li>
      <a href="running_xq.html">
      <img src="images/11.jpg" />
      <p>篮球案例</p>
      </a>
    </li>
  </ul>
</div>
<div class="clear"></div>
<div class="clear"></div>
<div class="footerBox">
  <div class="main">
    <div class="footL">
      <div class="tit">联系我们</div>
      <ul>
        <li class="f1">手 机：12345678910</li>
        <li class="f2">电 话：77000000</li>
        <li class="f3">邮箱：123***@qq.com</li>
        <li class="f4">地 址：XXX</li>
      </ul>
    </div>
    <div class="footR">
      <div class="telbox">
        <div class="tel">
          <span>12345678910</span>
          <b><p>欢迎来电咨询</p></b>
        </div>
      </div>
      <div class="footer">
        <div>***体育健康生活<br />联系方式：12345678910<br />地 址：XXX </div>
        <div>
          <p>©2021 班正玲版权所有 </p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="clear"></div>
<div class="fnav">
  <div class="main">
    <a href="index.html">篮球</a>
    <a href="football.html">足球</a>
    <a href="running.html">跑步</a>
    <a href="news.html">乒乓球</a>
    <a href="book.html">我要留言</a>
    <a href="contact.html">联系我们</a>
  </div>
</div>
</body>
</html>

第六章、版权说明

所有素材图片均为以我的摄影，体育健康生活网站所有，收集整理而来，素材图片的版权归―网络19-2班作者:班正玲所有，本站仅做个人收藏展示，不提供高分辨率商业图片。本网站图片素材只供大家欣赏和个人作品制作使用，严禁用作商业用途! 侵犯你的版权，请来信告知，我将立即撤消!

所有提供下载的软件和资源均为软件或程序作者提供和网友推荐收集整理而来，仅供学习和研究使用。如有侵犯你的版权，请联系我，本站将立即改正。

不保证提供的下载资源的准确性、安全性和完整性:下载后请自行检查是否带有病毒，同时百度也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。

本网站所有页面的版式、程序、内容版权均以体育健康生活的本站所有，未经授权，不得用于任何站点。未经以体育健康生活为主题的网站许可，任何个人、商业网站不得复制或仿造本网站内容，凡未经许可擅自转载均会被视为侵权行为。

第七章、课程设计的心得与体会

这次网页设计实战篇——以体育健康生活为主题的个人网站设计完成后，我收获了很多，感触也很深。我最大的感受就是理论不用于实践终究是理论，说得难听点那根本就是纸上谈兵，止于理论的学习，将来是没多少成绩的，有前途发展的话也必将是少了更为之，锦上添花的一笔。当然深刻认识了一点。那就是我们所学的知识虽说是基础很根本，但没有根基怎么能建好别墅呢?所以说基础知识是很重要的，我们在学习过程中不能小看而去忽略它，它是一笔财富，能引导我们看得更远飞得更高。通过这次设计，我发现一个很普遍的问题:我们往往是眼高手低，学习这些知识时觉得它就是小菜一桩，但现在真的验证了“看花容易绣花难”这句话，当我们着手实践时就不像我们想象中的那么简单了，每一个细节都需要注意，稍有不慎页面就在预览中变了样,因此更需要我们细心和耐心地去完成，也就两个字概括——认真对待才会从骨子里学到东西，才学到心里去了。

我觉得这次确实是很有意义的一次检测，本来自我感觉良好的，结果实战时还是存在很多问题的，平时学起来觉得很轻松就以为掌握了所学知识，但现在都念记很多细书是怎么样的了，因此开始着手时有些障碍，但我下定决心把以前的实验内容都温习一遍，遇到不懂的就及时查资料，比如翻阅资料书，百度，也可以请教同学，一起讨论，相互学习，于是最后也如鱼得水，水到渠成，因此得到一个非常重要的结论——只要自己想学，只要自己有那份执着与毅力，虚心的请教，勤于查阅相关资料就一定会有收获的，真的当今没有什么知识是前不着的，在哪，哪里都是知识，只要自己持有高度的爱习热忱，当然印我们在学习过程中一定要及时巩固、练习，掌握了也不一定熟悉，熟能生巧啊!我们应该吸取这个教训。否则即使我们最终达到了目的。