神秘花园个人手机网站规划书
学院：阳江职业技术学院
系别：计算机科学系
班级：2010网络技术1班
学号：201030622155
姓名：郑嘉华
第一章 前言
第二章 需求分析
第三章 Logo和导航栏
第四章 首页和二级页面
第五章 动画效果
第一章 前言
  21世纪，这个时代屏蔽触屏的手机的普及，手机网页也开始了疯狂的策略。做手机网页是很大的前景的。我现在这个项目是一个静态的个人手机网页，几个人的要求做的。应用到的技术有最新的web标记语言html5+css3.0+javascript。这是网页的另一个跨步。
注释：该网站是兼容触屏手机，而不兼容电脑网页的。请以触屏手机来测试。谢谢。
第二章 网页需求分析
这个网站是我自己需要的，当是也要需求分析。个人的喜好，这个网站是介绍一个很久以前的乐队“神秘花园”。因为我个人喜欢神秘花园的歌曲，而且经常使用手机浏览网页，而且神秘花园没有手机版的网页，所以为自己做了一个手机网。
附件：/secretgarden/secretgarden.htm参考网页。
按自己的要求，调都是很原来的一样的。以绿为主。
还加了一个导航。
第三章 Logo和导航栏
1、Logo的设计就是一个英文“Seczet Gazden”神秘花园的英译。没什么特别的地方。如下图1.

图1
2、而导航栏是我个人的设计，以四张神秘花园的专辑做了个导航，是以图片的形式左右切换的。如图2和图3。

图2

图3
第四章 首页和二级页面
1、 首页：我使用了一列布局。如图4，图5.
代码：
<div>
<ul>
<li></li>
</ul>
……..
</div>

图4

图5
2、二级页面：也采用了一列布局：效果如图6和图7
其代码同上。

图6

图7
第五章 动画效果
唯一的动态效果就是导航栏了，他是使用javascript脚本写的。还使用到jq库。简单的图片隐显效果和图片切换效果。
jQuery(function() {
  jQuery('.error').hide();
  jQuery(".contactButton").click(function() {
        // validate and process form
        // first hide any error messages
    jQuery('.error').hide();
       
      var name = jQuery("input#contactName").val();
        if (name == "" || name == "Your Name") {
      jQuery("span#nameError").show();
      jQuery("input#contactName").focus();
      return false;
    }
      var email = jQuery("input#contactEmail").val();
      if (email == "" || email == "Your Email Address") {
手机网站在哪里到      jQuery("span#emailError").show();
      jQuery("input#contactEmail").focus();
      return false;
    }
   
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if(!st(email)) {
    jQuery("span#emailError2").show();
    jQuery("input#contactEmail").focus();
      return false;
    }
   
      var msg = jQuery("textarea#contactMessage").val();
      if (msg == "" || msg =="Your Message Here") {
      jQuery("span#messageError").show();
      jQuery("textarea#contactMessage").focus();
      return false;
    }
       
        var dataString = 'name='+ name + '&email=' + email + '&msg=' + msg;
        //alert (dataString);return false;
       
      jQuery.ajax({
      type: "POST",
      url: "php/mail.php",
      data: dataString,
      success: function() {
        jQuery('#contactForm').html("<div id='contactForm' style='display:none;'></div>");
        jQuery('#contactForm').html("<div id='successMessage'></div>");
        jQuery('#successMessage').html("<strong style='color:#5b5b5b; float:left; margin-top:3px;'>Message Has Been Sent!</strong><br/><br/>")
        .append("<p style='float:left; padding-bottom:30px;'>We'll get back to you shortly! Please be patient!</p>")
        .hide()
        .fadeIn(1500, function() {
          jQuery('#successMessage');
        });
      }
    });
    return false;
    });
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。