项目六  网站后台管理网页
一、 项目（实训）名称
网站后台管理网页。时间：11月9日
二、 项目（实训）学时数
本实训项目预计实训学时数为6课时。
三、 项目（实训）目标
1、能够制作框架网页。
2、能够使用JavaScript脚本制作导航菜单。
3、能够常见风格的后台管理网页。注册页面js特效
四、 项目（实训）中的具体任务
1、创建框架网页。
2、创建顶部网页。
3、创建左边导航网页。
4、制作折叠导航效果。
五、 教师知识和能力要求
教师应具备网页美工的项目实践经验，对网页美工有深刻的认识和独特的见解，能够熟练运用各种网页设计技术实现网页的效果。还应该认真准备该实训项目所需要的实训素材，并能够在实训过程中给学生准确的提示和解答，指导学生进行项目设计与创新，促进学生出地完成实训项目。
六、 学生知识和能力准备
1、理解框架网页的制作方法。
2、理解常见的HTML标签。
3、掌握JavaScript基础语法。
4、理解网站后台的设计方法。
5、掌握DIV+CSS网页设计技术。
七、 工具与设备
实训环境要求：安装网页设计三剑客软件，具有Internet网络连接。
八、 辅助教学资料
《网页制作综合技术教程》，温谦，人民邮电出版社，2009年。
《美工与创意——网页设计艺术（1DVD）》，徐延章，科学出版社，2009年。
九、 实施步骤与技术要点
9.1  创建模板
（1）创建站点，把准备好的图像素材放在网站根目录的images文件夹中，新建CSS样式表，保存为style.css。
（2）创建一个网页文件，保存为index.html，把新建的CSS新式表导入网页中，代码为：<LINK href="css/style.css" type="text/css" rel="stylesheet">。Index.html作为后台网站的框架网页，其源代码如下：
<FRAMESET border=0 frameSpacing=0 rows="60, *" frameBorder=0>
<FRAME name=header src="top.html" frameBorder=0 noResize scrolling=no>
<FRAMESET cols="170, *">
<FRAME name=menu src="left.html" frameBorder=0 noResize>
<FRAME name=main src="main.html" frameBorder=0 noResize scrolling=yes>
</FRAMESET>
</FRAMESET>
<noframes>
</noframes>
（2）新建顶部网页，保存为top.html，设置网页边距属性为0px，宽度为100%，添加修改口令和退出系统的链接，网页布局效果如图6-1所示。
图6-1 顶部网站
（3）为退出系统链接添加JS脚本，源代码如下：
<A onclick="if (confirm('确定要退出吗？')) return true; else return false;" href="" target=_top>退出系统</A>
（4）新建左侧导航网页，保存为left.html，采用DIV和列表元素布局，网页如图6-2所示。每一个模块单独放在一个div中，包括父级标题菜单和子级菜单，父级标题菜单使用<span>标签存放；子级菜单使用另一个div存放，并且设置其id值。例如关于我们的子级菜单divr id设置为child1，新闻中心的子级菜单divr的id设置为child2，以此类推，依次递增。
   
图6-2 左侧导航
（5）在每一个父级菜单的链接上添加JS脚本，例如“关于我们”的源代码为：<A class=menuParent onclick=expand(1) href="javascript:void(0);">关于我们</A>；“新闻中心”的源代码为：<A class=menuParent onclick=expand(2) href="javascript:void(0);">新闻中心</A>，以此类推，其他标题菜单调用expand()函数的参数依次递增。
（6）设置子级菜单的链接地址，链接目标全部设置为target=”main”。
（7）在left.html网页的<head></head>之间，编写JS脚本，代码如下所示：
<SCRIPT language=javascript>
    function expand(el)
    {
        childObj = ElementById("child" + el);
        if (childObj.style.display == 'none')
        {
            childObj.style.display = 'block';
        }
        else
        {
            childObj.style.display = 'none';
        }
        return;
    }
</SCRIPT>
（8）制作网页主休部分的默认网页，当点击左侧的菜单，链接的网页将在网页的主体位置显示，使用IE浏览网页效果，如图6-3所示。
图6-3 网站后台管理网页
一十、 考核或评价标准
考核项目
考核方法
分值（分）
学习态度
根据课堂考勤、课堂表现，由教师综合评定。
20
任务实施
根据实训项目完成情况，效果基本实现，网页能正常显示。
40
项目验收
网页美工较好，网页源码优化，得到教师和学生的好评。
20
创新意识
网页具有创意，达到一定的专业水准。
20
合计
100
项目七  微博淡入淡出滚动效果
一、 项目（实训）名称
微博淡入淡出滚动效果。时间：11月21日
二、 项目（实训）学时数
本实训项目预计实训学时数为6课时。
三、 项目（实训）目标
1、能够编辑JavaScript脚本。
2、能够制作常见的网页特效。
3、能够灵活地使用特效美化网页。
四、 项目（实训）中的具体任务
1、布局网页。
2、编写JavaScript脚本。
3、调整网页显示效果。
五、 教师知识和能力要求
教师应具备网页美工的项目实践经验，对网页美工有深刻的认识和独特的见解，能够熟练运用各种网页设计技术实现网页的效果。还应该认真准备该实训项目所需要的实训素材，并能够在实训过程中给学生准确的提示和解答，指导学生进行项目设计与创新，促进学生出地完成实训项目。
六、 学生知识和能力准备
1、掌握JavaScript的语法基础。
2、理解网页特效的制作方法。
3、能够编写常见的网页特效脚本。
4、学会查阅JavaScript帮助手册，掌握脚本库中函数的用法。
5、理解JS美化网页的基本思路。
七、 工具与设备
实训环境要求：安装网页设计三剑客软件，具有Internet网络连接。
八、 辅助教学资料
《网页制作综合技术教程》，温谦，人民邮电出版社，2009年。
《美工与创意——网页设计艺术（1DVD）》，徐延章，科学出版社，2009年。
九、 实施步骤与技术要点
（1）新建网页，在网页中添加一张图片和一个列表元素，源代码为：<img src=”say.jpg” /><ul id="uls"></ul>。
（2）定义网页元素的CSS样式，样式代码如下：
#uls {background:white; margin:0px; padding:0px; width:500px; height:300px; border:1px solid black; overflow:hidden;}
Li {border-bottom:1px dashed #CCC000; padding:15px 10px 3px 10px; margin:0px; list-style:none;}
（3）这时网页中只看见一个宽500px，高300px，具有黑边框的的空矩形，最终网页的淡入淡出滚动效果的内容将在这个容器中显示，接下来就使用JS数组的方法定义网页内容。
（4）在网页的<head></head>之间编写JS脚本，脚本代码如下：
<script type="text/javascript">
var arr=['<img src="aa.png" width="100px" height="100px"/>洗脸也能抽筋？？', '好冷啊', '一如既往地喜欢特务男，哈哈，有脑有身手', '我靠近你，不是因为你什么都好，不是因为你能给我一个安心而不错的未来，不是因为你是我的老公，不是因为我觉得我们肯定这一辈子会这样好好走下去，不是因为再一段感情代价太大，而是因为，我爱你，我觉得看到你，就会心动。', '我承认我是个没有鼓励就没有动力的人，缺乏太多毅力。等过了这个冬天。也许我真的能把自己的心收拾干净。空出心里最重要的位置。给自己未来的新娘。剩下的空间，全是梦想，家庭和朋友。'];
var t=setInterval(function(){
var sTxt=arr.shift();
createDom(sTxt);
arr.push(sTxt);
},2000)
var bPause=false;
function startMove(obj,attr,iTarget,fnMoveEnd)
{
if(obj.timer)
{
  clearInterval(obj.timer);
}
obj.timer=setInterval(function(){
  if(bPause)
  {
  return;
  }
  doMove(obj,attr,iTarget,fnMoveEnd);
},30)
};
function getAttr(obj,attr)
{
if(obj.currentStyle)
{
  return obj.currentStyle[attr];
}
else
{
  return ComputedStyle(obj,false)[attr];
}
}
function doMove(obj,attr,iTarget,fnMoveEnd)
{
var iSpeed=0;
var weizhi=0;
if(attr=="opacity")
{
  weizhi=parseFloat(getAttr(obj,"opacity"));
}
else
{
  weizhi=parseFloat(getAttr(obj,attr))
}
if(Math.abs(iTarget-weizhi)<1/100)
{
  clearInterval(obj.timer);
  obj.timer=null;
  if(fnMoveEnd)
  {
  fnMoveEnd();
  }
}
else
{
  iSpeed=(iTarget-weizhi)/8;

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