网页美工实训报告_第1页
网页美工实训报告_第2页
网页美工实训报告_第3页
网页美工实训报告_第4页
网页美工实训报告_第5页
免费预览已结束，剩余12页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

计算机系网络技术专业工程六网站后台治理网页一、工程〔实训〕名称网站后台治理网页。时间：119日二、工程〔实训〕学时数本实训工程估量实训学时数为6课时。三、工程〔实训〕目标1、能够制作框架网页。2JavaScript脚本制作导航菜单。3、能够常见风格的后台治理网页。四、工程〔实训〕中的具体任务1、创立框架网页。2、创立顶部网页。3、创立左边导航网页。4、制作折叠导航效果。五、教师学问和力量要求进展工程设计与创，促进学生精彩地完成实训工程。六、学生学问和力量预备

网页美工-----工程〔实训〕指导书计算机系网络技术专业1、理解框架网页的制作方法。2HTML标签。3JavaScript根底语法。5DIV+CSS网页设计技术。七、工具与设备Internet网络连接。八、关心教学资料2023年。《美工与创意——〔1DV2023年。九、实施步骤与技术要点创立模板images文件夹中，CSS样式表，保存为style.css。CSS式表导入网页中，代码为：<LINKhref=“css/style.css“type=“text/css“rel=“stylesheet“>。Index.html作为后台网站的框架网页，其源代码如下：<FRAMESETborder=0frameSpacing=0rows=“60,*“frameBorder=0><FRAMEname=headersrc=“top.html“frameBorder=0noResizescrolling=no><FRAMESETcols=“170,*“><FRAMEname=menusrc=“left.html“frameBorder=0noResize><FRAMEname=mainsrc=“main.html“frameBorder=0noResizescrolling=yes></FRAMESET></FRAMESET><noframes></noframes>top.html0px100%，

网页美工-----工程〔实训〕指导书计算机系网络技术专业添加修改口令和退出系统的链接，网页布局效果如图6-1所示。6-1顶部网站为退出系统链接添加JS脚本，源代码如下：<Astyle=“COLOR:#ffffff“onclick=“if(confirm(””))returntrue;elsereturnfalse;“href=““target=_top>退出系统</A>left.htmlDIV和列表元素布局，网6-2div中，包括父级标题菜单和子级菜单，父级标题菜单使用<span>标签存放；子级菜单使用另一个div存放，并且设iddivridchild1，闻中心的子级菜divridchild2，以此类推，依次递增。6-2左侧导航在每一个父级菜单的链接上添加JS脚本，例如“关于我们”的源代码为：<Aclass=menuParentonclick=expand(1)href=“javascript:void(0);“>关于我们</A>；“闻中心”的源代码为：<Aclass=menuParentonclick=expand(2)闻中心</A>expand函数的参数依次递增。在left.html网页的<head></head>JS脚本，代码如下所示：<SCRIPTlanguage=javascript>functionexpand(el){

网页美工-----工程〔实训〕指导书计算机系网络技术专业childObj=document.getElementById(“child“+el);if(childObj.style.display==”none”){}else{}

childObj.style.display=”block”;childObj.style.display=”none”;return;}</SCRIPT>IE6-3所示。6-3网站后台治理网页十、考核或评价标准

网页美工-----工程〔实训〕指导书考核工程考核工程学习态度考核方法20任务实施依据实训工程完成状况，效果根本实现，网页能正常显示。好评。网页具有创意，到达肯定的专业水准。合计40工程验收20创意识20100计算机系网络技术专业工程七微博淡入淡出滚动效果一、工程〔实训〕名称微博淡入淡出滚动效果。时间：1121日二、工程〔实训〕学时数本实训工程估量实训学时数为6课时。三、工程〔实训〕目标1JavaScript脚本。2、能够制作常见的网页特效。3、能够敏捷地使用特效美化网页。四、工程〔实训〕中的具体任务1、布局网页。2JavaScript脚本。3、调整网页显示效果。五、教师学问和力量要求进展工程设计与创，促进学生精彩地完成实训工程。六、学生学问和力量预备1JavaScript的语法根底。

网页美工-----工程〔实训〕指导书计算机系网络技术专业2、理解网页特效的制作方法。3、能够编写常见的网页特效脚本。4JavaScript帮助手册，把握脚本库中函数的用法。5JS美化网页的根本思路。七、工具与设备Internet网络连接。八、关心教学资料2023年。《美工与创意——〔1DV2023年。九、实施步骤与技术要点建网页，在网页中添加一张图片和一个列表元素，源代码为：<imgsrc=”say.jpg/><ulid=“uls“></ul>。定义网页元素的CSS样式，样式代码如下：#uls{background:white;margin:0px;padding:0px;width:500px;height:300px;border:1pxsolidblack;overflow:hidden;}Li {border-bottom:1pxdashed #CCC000; padding:15px 10px 3px 10px; margin:0px;list-style:none;}JS数组的方法定义网页内容。<head></head>JS脚本，脚本代码如下：<scripttype=“text/javascript“>vararr=[”<imgsrc=“aa.png“width=“100px“height=“100px“/>洗脸也能抽筋？？”,”好冷啊”,””,”会这样好好走下去，不是由于再找一段感情代价太大，而是由于，我爱你，我觉得看到你，就会心动。”,”我成认我是个没有鼓舞就没有动力的人，缺乏太多毅力。等过了这个冬天。或许全是梦想，家庭和朋友。”];vart=setInterval(function{

网页美工-----工程〔实训〕指导书计算机系网络技术专业varsTxt=arr.shift;createDom(sTxt);arr.push(sTxt);},2023)varbPause=false;functionstartMove(obj,attr,iTarget,fnMoveEnd){if(obj.timer){clearInterval(obj.timer);}obj.timer=setInterval(function{if(bPause){return;

网页美工-----}doMove(obj,attr,iTarget,fnMoveEnd); 项},30) 目〔}; 实functiongetAttr(obj,attr) 训{ 〕if(obj.currentStyle) 指{ 导returnobj.currentStyle[attr]; 书}else{returndocument.defaultView.getComputedStyle(obj,false)[attr];}}functiondoMove(obj,attr,iTarget,fnMoveEnd){variSpeed=0;varweizhi=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;if(attr==“opacity“){obj.style.filter=“alpha(opacity:“+(weizhi+iSpeed)*100+“)“;obj.style.opacity=weizhi+iSpeed;}else{iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);obj.style[attr]=weizhi+iSpeed+“px“;}}};functionleaveMessage{varoText=document.getElementById(“txt1“);createDom(oText.value);oText.value=““;};functioncreateDom(sTxt){

网页美工-----工程〔实训〕指导书varoUl=document.getElementById(“uls“);varaLi=oUl.getElementsByTagName(“li“);varoLi=document.createElement(“li“);variHeight=0;oLi.innerHTML=sTxt;oLi.style.filter=“alpha(opacity:0)“;oLi.style.opacity=0;if(aLi.length){oUl.insertBefore(oLi,aLi[0])}else{oUl.appendChild(oLi)计算机系网络技术专业}//开头运动iHeight=oLi.offsetHeight;oLi.style.height=“0px“;oLi.style.overflow=”hidden”;startMove(oLi,“height“,iHeight,function{startMove(oLi,“opacity“,1)})oUl.onmouseover=function{bPause=true;};oUl.onmouseout=function{bPause=false;}};</script>定义数组的语法，在这里就是把将要在网页中显示的内,”隔开，脚本被扫瞄器解释后每一个元素的内容将放在网页中的<li></li>Html标签，因此，这里可以像布局一般网页一样自由地添加网页内容。7-1所示。

网页美工-----工程〔实训〕指导书计算机系网络技术专业7-1淡入淡出滚动效果JSarr.push(sTxt);},2023)的时间间隔秒显示一组数据，数字越小滚动越快。UL放在网页中指定位置，就可以便利地制作这种网页特效。考核工程学习态度考核方法考核工程学习态度考核方法20任务实施依据实训工程完成状况，效果根本实现，网页能正常显示。好评。网页具有创意，到达肯定的专业水准。合计40工程验收20创意识20100

网页美工-----工程〔实训〕指导书计算机系网络技术专业工程八综合网站模板一、工程〔实训〕名称综合网站模板。时间：1214日二、工程〔实训〕学时数本实训工程估量实训学时数为6课时。三、工程〔实训〕目标1WEB标准布局技术。2CSS样式应用。3JS和Jquery特效应用。4、能够制作丰富多样的网页。4、能够设计综合网页模板。四、工程〔实训〕中的具体任务1、规划网站构造。2、预备网站素材。3、设计网站首页。4、设计网站子级页面。5JS和Jquery特效。五、教师学问和力量要求进展工程设计与创，促进学生精彩地完成实训工程。

网页美工-----工程〔实训〕指导书计算机系网络技术专业六、学生学问和力量预备1Html语言。3JavaScript根底语法。4Jquery的使用方法。5、能够设计形式多样网页。七、工具与设备Internet网络连接。八、关心教学资料2023年。《美工与创意——〔1DV2023年。九、实施步骤与技术要点技术产品、通讯录、闻动态、留言板和帮助信息等；子页用于显示具体内容。制作网页的顶部，通过分析觉察本网站的每一级页面顶部内容都是相方法制作。源代码如下：<divclass=“top“><divclass=“top_bar“><divclass=“logo“></div><divclass=“at1“>WAP.INBAI</div><divclass=“clear“></div></div><divclass=“nav“><ul><li><ahref=“index.html“>亿贝首页</a></li><li><ahref=“call.html“>CALl</a></li><li><ahref=“tongxun.html“>亿贝通讯录</a></li>

网页美工-----工程〔实训〕指导书计算机系网络技术专业<li><ahref=“dongtai.html“>最动态</a></li><li><ahref=“liuyang.html“>留言板</a></li><liclass=“hover“><ahref=“help.html“>帮助中心</a></li></ul></div></div>在CSS文件中分别定义各个DIV果8-1所示。8-1网站顶部DIV8张图片，JavaScriptJqueryJSJquery库文件。在<head></head>之间添加导入语句：<scripttype=“text/javascript“src=“js/tab.js“></script><scriptsrc=“js/jquery.min.js“type=text/javascript></script>Jquery方法，脚本如下：<scripttype=text/javascript>var_c=_h=0;$(document).ready(function{$(”#play li”).click(function{vari=$(this).attr(”alt”)-1;clearInterval(_h);_c=i;//play;change(i);

网页美工-----工程〔实训〕指导书})$(“#picimg“).hover(function{clearInterval(_h)},function{play});play;})functionplay{_h=setInterval(“auto“,8000);}functionchange(i){$(”#playli”).css(”background-color”,”#000000”).eq(i).css(”background-color”,”#FF3000”).blur;$(“#picimg“).fadeOut(”slow”).eq(i).fadeIn(”slow”);}计算机系网络技术专业functionauto{_c=_c>6?0:_c+1;change(_c);}</script>制作登录界面，在焦点图片区域设置登录界面DIV的属性，使其定位position:absolute;left:590px;top:18px;z-index:1000;overflow:hidden;tab.js中的函数实现交替显示效果，登录标题网页源代码：class=“hover“>CALL</li><liid=“one2“onmouseover=“setTab(”one”,2,2)“>亿贝通讯录</li>使用DIV+CSS制作首页的其他模块，首页的效果如图7-2所示。8-2网站首页DIVDIV8-3所示。

网页美工-----工程〔实训〕指导书计算机系网络技术专业8-3技术产品网页制作闻动态和留言板和制作技术产品网页的方法根本一样，顶部和DIV+CSShtml8-48-5CSS样式，完成栏目页面的制作。8-4闻动态网页

网页美工-----工程〔实训〕指导书计算机系网络技术专业8-5留言板网页制作帮助信息网页，网页顶部和尾部制作和以上步骤一样，中间主体8-6所示，右侧内容的源代码如下：<dl><dtclass=“original“>如何使用亿贝</dt><dd><ahref=“#“>马上查看</a></dd><dtclass=“original“>我收到了手机短信，应当怎么使用？</dt><dd>凭手机短信中的拉手券密码就可直接到店消费！</dd><dtclass=“original“>拉手券可以给朋友吗？</dt><dd><p><strong>方法一、</strong>在我的拉手券页面中,点“赠送”按钮,输入好友在拉

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论