@JRuiCoder 2015-12-10T01:53:50.000000Z 字数 12721 阅读 1613

实验教学中心首页重构教程

重构

一.前言和声明

期末网站作业已经开始了，接下来同学们就要踏上充（ku ）实（bi）的网站之旅。为了能够让你们能够更好地完成作业，立足于期末网站的要求，写出来这篇实验教学中心网站的首页重构教程。

针对期末网站的要求，对于实验教学中心网站进行一些简化，没有响应式设计，搜索也去掉（没有必要，就那几个页面），去掉SEO方面的meta关键字和描述。
关于Dreamweaver建站和使用的一些小技巧，请参考《Dreamweaver建站技巧和使用技巧》。本文主要讲解代码的组织和管理。

二.建站的流程

建站的基本流程
切片和建站的顺序也可以相反，要对整个项目的流程有一定的了解，合理分配时间。
几个需要注意的地方：需求分析首先要通读几遍老大的《化学多媒体软件设计”期末网站作品规范2015级》，把一些重要的方面分条列出，按照这些要求作为前提进行设计。

三.设计

请参考《网页设计基础教程实验教学中心首页设计篇》

四.重构

1. 前期准备工作

接下来开始是我们的重头戏，HTML结构根据设计稿可划分为6个部分，如图所示
准备工作

先把整个网页结构先搭好，保持整体架构保持不变，这样的话，相当于把一个目标分解为各个小目标，而这些小目标内的出现的错误，也只是在它里面进行修改，不会影响外面的因素，而且也方便定位错误发生的地方。

2.切片

网站完成的效果图

在动手切图之前我们要先分析一下要切哪里，要怎么切。
对于化学实验教学中心这个网站首页而言，我们需要切图的一般有：

图片
小图标
有渐变的部分（虽然可以使用CSS3实现，但是不要求）
比较特殊的字体，比如书法字体等（常用的中文字体为宋体、微软雅黑）

对于一些比较复杂的图片，比如Slider部分的图片当然是全切，但是对于顶部功能导航条和头部的导航条的背景，由于只是在竖直方向上渐变，我们只需要切宽度为几像素的切片。
切图区域
我们也可以使用辅助工具来帮忙切图，比如Assistor PS，具体的使用方法请查看教程《切图标记利器——Assistor》。
ps：切图的时候要小心别切到手。

3.尺寸标注

上面的Assistor PS不仅可以实现切图，也可以实现颜色和尺寸标注，如果我们觉得这个软件要依托Photoshop太麻烦，我们也可以使用像素大厨这款软件,可以实现尺寸快速标注、局域标注、颜色标记的功能。
切图区域

切图区域

4.代码之路

1)概述

一个基本的网页文件结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        ···
</head>
<body>
    <!--Content-->
</body>
</html>

我们现在要做的是在这个基本结构上开始重现我们的设计稿，本网站首页的基本结构为。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        ···
</head>
<body>
    <!--Content-->
</body>
</html>

接下来就是分各个部分讲解，到时再进行汇总。

2)头部文件引入

这部分的主要功能是引入文件：包括css文件和icon，还有一些初始化操作，js文件不建议直接放在头部，因为这样可能会由于js文件执行引起的阻塞使网页没有办法渲染加载网页结构，导致页面显示的是一片空白，用户体验不好。

 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link rel="shortcut icon" href="http://ce.sysu.edu.cn/ChemExperiment/images/favicon.png" type="image/x-icon">
    <link rel="icon" href="http://ce.sysu.edu.cn/ChemExperiment/images/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="http://ce.sysu.edu.cn/Skin/ChemExperiment.css" />
  /**************说明文字*******************
      设置浏览器标题栏的小图片
    ******************说明文字*******************/
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="../css/chem-ie8.min.css"/>
    <![endif]-->
     /**************说明文字*******************
    上面的意思是假如你的浏览器是IE，且版本小于9，就引入这个css文件，下面的也一样，主要是为了兼容性。不过根据期末网站的要求我建议你们要把这些兼容性css文件与主css文件合并到一起。
    ******************说明文字*******************/
    <!--[if lt IE 8]>
    <link rel="stylesheet" href="../css/chem-ie7.min.css"/>
    <![endif]-->
    <!--[if lt IE 7]>
    <link rel="stylesheet" href="../css/chem-ie6.min.css"/>
    <![endif]-->
    <title>中山大学化学与化学工程学院 >>  化学实验教学中心</title>
  </head>

3)CSS初始化

对于CSS初始化，初始化一些标签的默认样式，便于使其在不同浏览器中有一个相同的标准，这样比较容易保持网页在不同浏览器中看到的样式统一。

/* css reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
img{border:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
input,button,textarea,select{*font-size:100%;}
input{background:transparent;border:none;}
input[type=submit]{cursor:pointer;}
body{font:14px/1.5 Helvetica,Arial,sans-serif;}
ol,ul,li{list-style:none;}
button{border:none;}
table{border-collapse:collapse;border-spacing:0;}
:link,:visited{text-decoration:none;}
:focus{outline:0;}
pre{font-family:"Lucida Console",Consolas,"Courier New",Tahoma;color:#666;text-indent:0;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}
/* for HTML5 */
article,aside,figure,figcaption,footer,header,hgroup,nav,section,summary{display:block;}
figure{margin:0;}

对于上面这段初始化代码，二话不说，直接复制粘贴在你的css文件最前面（可根据情况删减一些代码）

4)Header部分

Header又分为顶部功能导航条、banner和网站导航条，框架如下。

<div class="headerWrap">
       <div class="header_top">
            <!--header_top Content-->
        </div>
       <div class="header_banner">
            <!--header_banner Content-->
        </div>
       <div class="header_nav">
            <!--header_nav Content-->
        </div>
</div>

到时再把相应组件的代码复制粘贴进相应的位置（复制的时候注意要把闭合标签也要复制进去），下面我们分步讲解一下Header的各个部分。

a.顶部功能导航条

HTML：

 <div class="header_top">
        <div class="container header_top_container">
          <div class="header_top_left">
            <a href="http://www.sysu.edu.cn/2012/cn/index.htm" class="header_top_left_link01">
              中大首页
            </a>
            <a href="http://ce.sysu.edu.cn/">
              化院首页
            </a>
          </div>
        </div>
  </div>

相应控制的css：

.header_top { height: 35px; line-height: 35px; background: url(../ChemExperiment/images/header/topLineBg.gif) repeat-x; background-size: 100% 100%; }
.header_top a { color: #525252; }
.header_top_container { height: 40px; }
.header_top_left { float: left; width: auto; }
.header_top_left_link01{ margin-right: 20px; }

为什么要使用三个盒子呢，首先最大的那个盒子，就是类名为“header_top”的盒子是用来保证它的内容区域是占满整个页面的，第二个盒子是用来保证中间主体的显示内容，网页主要的内容都在这一部分，第三个盒子是为了把两个元素给包裹起来，偏于控制位置。这只是一种做法，还有一些其它的方法。这里就用到我之前讲的只切几像素宽的图片，然后通过repeat-x，一直复制，能够加快网页的访问速度。

b.Banner部分

 <div class="header_banner">
        <div class="container header_banner_container">
          <div class="header_banner_logo">
            <a href="http://ce.sysu.edu.cn/ChemExperiment/Index.aspx">
              <img src="http://ce.sysu.edu.cn/ChemExperiment/images/header/headerLogo.png">
            </a>
          </div>
        </div>
      </div>

相应控制的css：

.header_banner { background-color: #f5f5f5; }
.header_banner_logo { float: left; }
.header_banner_container { padding-top: 10px; padding-bottom: 10px; }

跟顶部导航条很类似。

C.栏目导航条Nav

HTML:

 <div class="header_nav">
        <div class="border_mask_top">
        </div>
        <div class="container header_nav_container">
          <ul class="l1nav floatfix">
            <li class="l1item">
              <a href="http://ce.sysu.edu.cn/introduction/Index.aspx" title="中心概况">中心概况</a>
            </li>
            <li class="l1item">
              <a href="http://ce.sysu.edu.cn/organStructure/Index.aspx" title="组织架构">组织架构</a>
            </li>
            <li class="l1item">
              <a href="http://ce.sysu.edu.cn/expTeaching/Index.aspx" title="实验教学">实验教学</a>
            </li>
            <li class="l1item">
              <a href="http://ce.sysu.edu.cn/deviceEnviron/Index.aspx" title="设备环境">设备环境</a>
            </li>
            <li class="l1item">
              <a href="http://ce.sysu.edu.cn/labManagement/Index.aspx" title="管理制度">管理制度</a>
            </li>
            <li class="l1item">
              <a href="http://ce.sysu.edu.cn/openExp/Index.aspx" title="开放实验">开放实验</a>
            </li>
            <li class="l1item">
              <a href="http://ce.sysu.edu.cn/inovateFund/Index.aspx" title="创新基金">创新基金</a>
            </li>
            <li class="l1item">
              <a href="http://ce.sysu.edu.cn/studentFeel/Index.aspx" title="学生感言">学生感言</a>
            </li>
            <li class="l1item">
              <a href="http://ce.sysu.edu.cn/teachAchievement/Index.aspx" title="教学成果">教学成果</a>
            </li>
            <li class="l1item end">
              <a href="http://ce.sysu.edu.cn/teachCharacteristic/Index.aspx" title="教学特色">教学特色</a>
            </li>
          </ul>
        </div>
      </div>

相应控制的css：

.header_nav { position: relative; background: url(../ChemExperiment/images/header/navBg.gif); border-bottom: 1px solid #fff; }
.border_mask_top { width: 100%; height: 1px; background-color: #fff; position: absolute; top: 1px; }
.header_nav_container { font-size: 16px; height: 46px; }
.l1nav { position: relative; } .l1item { float: left; width: 10%; height: 46px; margin: 0 -1px; text-align: center; background: url(../ChemExperiment/images/header/navLine.png) no-repeat right center; }
.l1item a { display: block; width: 100%; color: #fff; line-height: 46px; }
.l1item:hover { background: url(../ChemExperiment/images/header/navHoverBg05.png) no-repeat; background-size: 100% 100%; background-origin: border-box; }
.l1item:hover .dmenu-box { display: block; }
.end { background-image: none; }

border_mask_top的盒子是一条线，如图所示，能够使导航条的层次感更加明显，采用的是绝对定位的方法position:absolute。绝对定位定位的标准是：如果父级元素有position:relative;属性的话，则根据父元素进行定位。如果父级元素没有的话，定位的依据直接是body标签
绝对定位有top、right、bottom、left四个属性，可以根据情况进行设置，不要求全部都要写。
以上就是Header部分的代码和相应的CSS。

5)Slider部分

slider作为一个滑动展示信息的部分，记住选的图片一定要很精细。
HTML：

 <div class="slider js_slider" id="js_slider">
      <div class="slider_pre" id="js_slider_pre"></div>
      <ul class="slider_list">
        <li class="slider_list_item slider_list_item_1 js_slider_now" style="opacity:1"></li>
        <li class="slider_list_item slider_list_item_2" style="opacity:0"></li>
        <li class="slider_list_item slider_list_item_3" style="opacity:0"></li>
        <li class="slider_list_item slider_list_item_4" style="opacity:0"></li>
      </ul>
      <div class="slider_next" id="js_slider_next"></div>
    </div>

相应控制的css：

/*S slider*/
.slider { position: relative; width: 100%; height: 420px; overflow: hidden; }
.slider img { display: table; margin: 0 auto; }
.slider_list { position: absolute; top: 0; bottom: 0; width: 100%; left: 0; overflow: hidden; }
.slider_list_item { position: absolute; width: 100%; height: 100%; background-size: auto 100%; background-position: 50% 50%; background-repeat: no-repeat; overflow: hidden; }
.slider_list_item_1 { background-image: url("../ChemExperiment/images/slider/slider01.jpg"); }
.slider_list_item_2 { background-image: url("../ChemExperiment/images/slider/slider02.jpg"); }
.slider_list_item_3 { background-image: url("../ChemExperiment/images/slider/slider03.jpg"); }
.slider_list_item_4 { background-image: url("../ChemExperiment/images/slider/slider04.jpg"); }
.slider_pre, .slider_next { position: absolute; width: 20%; max-width: 175px; height: 100%; cursor: pointer; z-index: 5; top: 0; }
.slider_pre { left: 0; }
.slider_pre:hover { background: url("../ChemExperiment/images/slider/arl.png") center center no-repeat; }
.slider_next { right: 0; }
.slider_next:hover { background: url("../ChemExperiment/images/slider/arr.png") center center no-repeat; }
.slider:after { position: absolute; display: block; content: ""; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 4px solid #00702a; z-index: 1000; border-bottom: 4px solid #077430; }
/*E slider*/

更加详细的过程请参考《网页设计基础教程_slider的实现》

6)Content部分

HTML:

<!-- S Content -->
<div class="outerMain">
  <div class="midMain">
    <div class="rightSide">
      <!-- S rightSide -->
    </div>
    <div class="leftSide">
      <!-- S leftSide -->
    </div>
    <div class="friendLinks">
      <!-- S friendLinks -->
    </div>
  </div>
</div>
<!-- E Content-->

Content部分主要分为三个部分，左边栏和右边栏，还有一个友情链接。

a.左边栏和右边栏

左边栏和右边栏之所以要放在一起讲，以为它们之前相互影响，这种两栏布局有几种可以实现的布局，有兴趣深入研究的同学可以参考[《基于浮动的几种布局》][http://ce.sysu.edu.cn/hope/Item/150559.aspx]

b.友情链接

HTML：

 <div class="friendLinks">
          <ul class="friendLinks_list">
            <li class="friendLinks_list_item"><a href="http://172.22.83.58/gducec/"> 省化学实验竞赛</a></li>
            <li class="friendLinks_list_item"><a href="http://172.22.83.58/Competition/">中大化学实验竞赛</a></li>
            <li class="friendLinks_list_item"><a href="http://172.22.83.58/boya/">博雅教育</a></li>
            <li class="friendLinks_list_item"><a href="http://172.22.83.58/ChemExperiment/EHSgltx/">EHS管理体系</a></li>
            <li class="friendLinks_list_item"><a href="http://172.22.83.58/ChemExperiment/introduction/1899.html"> 化学实验教学案例</a></li>
            <li class="friendLinks_list_item"><a href="http://172.22.83.58/ChemExperiment/chemelab.html"> 化学实验课程网站</a></li>
            <li class="friendLinks_list_item"><a href="http://172.22.83.58/centerlab2006/">仪器预约</a></li>
            <li class="friendLinks_list_item"><a href="http://172.22.83.58/ChemExperiment/labvideo.html"> 化学实验教学视频</a></li>
          </ul>
        </div>

相应控制的css：

.friendLinks { overflow: hidden; border-bottom: solid 1px #dedede; border-top: solid 1px #dedede; max-width: 1200px; margin: 25px auto 20px; }
.friendLinks_list { overflow: hidden; height: 30px; background: #f5f5f5; display: inline; }
.friendLinks_list li:hover { background: #eaeaea; }
.friendLinks_list_item { float: left; width: 12.5%; min-width: 50px; height: 30px; line-height: 30px; text-align: center; }
.friendLinks_list_item a { width: 10%; height: 30px; }

有同学可能会感到疑惑，为什么宽度要采用百分比呢？这是设计响应式流体布局时需要一个弹性布局，百分比宽度会随着父元素的宽度大小而发生相应的变化，也就是我们所说的响应式流体布局。但是如果你不做响应式的话，你可以直接量定尺寸，这两种做法都是可以的。

7)Footer部分

HTML:

<div class="footer">
      <div class="footer_container">
        <div class="footer_copyright">
          <div>
            <a href="http://www.sysu.edu.cn/">©中山大学</a>
            <a href="http://ce.sysu.edu.cn/">化学与化学工程学院</a>
          </div>
          <div class="footer_copyright_bottom">
            <a href="http://ce.sysu.edu.cn/FriendlyLinks/Index.aspx">友情链接</a>
            <a href="http://ce.sysu.edu.cn/ContactUs/Index.aspx">联系我们</a>
            <a href="http://ce.sysu.edu.cn/SiteMap/Index.aspx">网站地图</a>
            <a href="http://172.22.83.58/ChemExperiment/">旧版</a>
          </p>
        </div>
      </div>
      <div class="footer_siteInfo">
        <div class="pageView">
          总访问量：<span>6649013</span>人次
        </div>
        <div>
          <a href="http://ce.sysu.edu.cn/user/login.aspx" target="blank" style="font-family: sans-serif;">◇</a>
          <a href="http://ce.sysu.edu.cn/hope/">厚朴〖HOPE〗工作室</a>
          <a href="http://ce.sysu.edu.cn/admin/login.aspx" target="blank" style="font-family: sans-serif;">◇</a>&nbsp;设计</span>
        </div>
      </div>
    </div>

8)Script文件引入

 <script type="text/javascript" src="http://ce.sysu.edu.cn/ChemExperiment/scripts/jquery.min.js"></script>
  <script type="text/javascript" src="http://ce.sysu.edu.cn/ChemExperiment/scripts/chemNew.min.js"></script>
  <script type="text/javascript">
  var slider;
  slider = jQuery.slider("js_slider", "js_slider_pre", "js_slider_next", 3000);
  jQuery.sliderHeightCtrl(1200, 556, "js_slider");
  jQuery(window).resize(function() {
  jQuery.sliderHeightCtrl(1200, 556, "js_slider");
  })
  // tag change
  jQuery(document).ready(function() {
  var menuID;
  var subID;
  var current = 1;
  for (i = 1; i <= 3; i++) {
  jQuery("#subMenu" + current).show();
  jQuery("#menu" + current).addClass("mouseover").addClass("icon1");
  jQuery("#menu" + i).mousemove(function() {
  menuID = this.id;
  delete current;
  subID = menuID.charAt(4);
  current = subID;
  for (i = 1; i <= 3; i++) {
  jQuery("#subMenu" + i).hide();
  jQuery("#menu" + i).removeClass("mouseover").removeClass("icon" + i);
  }
  jQuery("#subMenu" + current).show();
  jQuery("#menu" + current).addClass("mouseover").addClass("icon" + current);
  })
  };
  })
  //change picture
  jQuery(document).ready(function() {
  jQuery("#menu4").mouseover(function() {
  jQuery("#menu4 a").css("color", "#077430");
  jQuery("#menu5 a").css("color", "#000");
  jQuery("#subMenu4").css("display", "block");
  jQuery("#subMenu5").css("display", "none");
  });
  jQuery("#menu5").mouseover(function() {
  jQuery("#menu5 a").css("color", "#077430");
  jQuery("#menu4 a").css("color", "#000");
  jQuery("#subMenu5").css("display", "block");
  jQuery("#subMenu4").css("display", "none");
  });
  });
  </script>

对于JavaScript的直接引入。

实验教学中心首页重构教程

一.前言和声明

二.建站的流程

三.设计

四.重构

1. 前期准备工作

2.切片

3.尺寸标注

4.代码之路

1)概述

2)头部文件引入

3)CSS初始化

4)Header部分

a.顶部功能导航条

b.Banner部分

C.栏目导航条Nav

5)Slider部分

6)Content部分

a.左边栏和右边栏

b.友情链接

7)Footer部分

8)Script文件引入

内容目录