搜索
网站前端技术上机1网站前端技术课程设计报告海贼王主题网站学院：计算机与控制工程学院班级：姓名：学号：指导教师：网站前端技术上机2一、目的与要求参考给出ppt内容进行填写，不可以照抄ppt内容，做一定的语句上的更改后使用。（200字）目的：运用本学期所学的HTML、CSS以及JavaScript知识，以海贼王这一作品为主题，设计并实现一个海贼王主题网站。网站以海贼王主题为中心进行介绍、分享、交流等活动。要求：网站包含首页，论坛，介绍，分享等五个部分内容。用户可以选择注册成为会员，也可以仅以非会员身份有限制的浏览网站。论坛需要实现发帖，查看以及回复功能。网页数不少于8页，结构类似的算一页。网站整体风格统一，各网页结构完整。二、主要内容详细描述网站结构和各部分的详细内容、网站中各网页结构及各部分详细内容。所有结构图需手绘。（5页，500字）功能结构图1.主页网站主体框架由头部，section，页脚和回到顶部连接组成。头部包含导航栏、logo两部分，导航栏展示网站主要页面导航和登录功能，若用户已登录，则显示用户名。页面框架如下。网站前端技术上机32.首页首页主要包括海贼王简介和最新动态两个框架。简介部分包含滚动图片显示和简介内容两部分。最新动态以表的形式展示。页面框架如下。3.故事介绍故事介绍页面包含标题和内容主体两部分。内容主体显示创作背景和故事介绍两部分。主体内容的两部分都包含标题和主要内容两个部分。页面框架如下。头部内容页脚版权最新动态滚动图片简介导航栏回到顶部Section和iframe框架标题标题Logo网站前端技术上机44.人物介绍人物介绍有两个相同界面。每个人物介绍页面包含标题，人物信息和页码链接三部分。人物信息包含一个人物信息表格，表格分为两列，一列展示人物简介，另一列展示任务图片。页面框架如下。标题标题story创作背景故事介绍标题标题人物信息表格人物简介人物图片页码链接网站前端技术上机55.图片分享图片分享包含标题和图片两部分。图片由九个图片3*3排列组成。页面框架如下。6.海贼吧海贼吧包含所有帖子、我的帖子和发帖三个部分。初始状态下显示所有帖子页面。7.所有帖子所有帖子页面包含导航和内容两部分。内容部分以表格形式展示所有帖子。页面框架如下。8.我的帖子我的帖子页面包含导航栏和内容两部分。内容部分以表格形式展示当前用户发标题图片图片图片图片图片图片图片图片图片导航内容网站前端技术上机6过的帖子。页面框架同所有帖子部分。9.发贴发帖页面包含导航栏和内容两部分。内容包含一个表单。页面框架同所有帖子部分。10.登录登录页面包含标题和内容两部分。内容包含一个表单。页面框架如下。11.注册注册页面包含标题和内容两部分。内容包含一个表单。页面框架与登录页面相同。12.个人信息个人信息页面由一个表格组成，表格分两列，一列展示信息名称，另一列展示用户信息。框架如下。Form表单标题表格标题信息名称用户信息网站前端技术上机7三、设备与环境运行环境、编程语言等信息说明。（100字）运行环境：Web浏览器（如谷歌浏览器，InternetExplorer，Firefox，Safari），phpStudy+mysql服务器，windows系统。编程语言：前端使用html、css和JavaScript语言，后台使用php+mysql语言。四、实现过程针对网站每一页面中你认为比较有亮点的、重要的，可以体现你工作的部分进行实现过程的详细讲解，包括相对应的主要代码（仅展示这一部分较为重要的代码，剩余代码在附录中展示）。这一部分是展示个人工作的最主要部分，请务必认真完成，保证数量（5页）和质量。注意：两人一组完成的情况，分工要明确，这一部分仅对自己所承担部分进行详细描述，因此，同组人员所提交的报告在这一部分是不可以雷同的。1.主页网站主体框架由头部，section，页脚和回到顶部连接组成。头部包含导航栏、logo两部分，导航栏展示网站主要页面导航和登录功能。页面导航的链接内容显示在section中的iframe内联框架中。代码如下。ulliahref=first.phpname=firsttarget=iframe首页/a/li……liahref=bbs.phpname=bbstarget=iframe海贼吧/a/li……ul登录部分，若用户已登录，则显示用户名；若未登录，则显示“登录|注册”。实现代码如下：?phpsession_start();网站前端技术上机8if(!empty($_SESSION['userid'])){//你已经赋值的IDecho'ahref=my.phptarget=iframe'.$_SESSION[username].'/a|ahref=logout.php注销/a';//登陆后的处理}elseecho'ahref=login.htmlname=login登录/a';//未登陆的处理?点击回到顶部的图片链接可使页面直接调回页面顶部。代码如下：divid=gotopahref=imgsrc=img/gotop.pngwidth=50height=50/a/divsection部分居中显示，宽度1050px，上下外边距10px。section包含一个iframe内联框架，用于显示导航栏点击的链接内容，初始状态显示首页first.php的内容。内联框架大小随着内联框架中的内容变化。section块的css代码：#section{background-color:#ffffff;width:1050px;margin:10pxauto;}iframe内联框架的代码：divid=sectioniframesrc=first.phpname=iframeid=iframescrolling=noframeborder=0/iframe/diviframe内联框架大小设置代码：js1.js代码：functionIFrameResize(){varobj=parent.document.getElementById(iframe);//取得父页面IFrame对象obj.height=this.document.body.scrollHeight+30;//调整父页面中IFrame的高度为此页面的高度}在每个要显示的页面的body中加载js1.js的函数：bodyonload=IFrameResize()页脚显示版权信息。2.首页首页主要包括海贼王简介和最新动态两个框架。网站前端技术上机9简介部分包含滚动图片显示和简介内容两部分。滚动图片部分每三秒换一张图片，循环播放，点击下面序号，显示相应的图片。简洁滚动图片代码如下：first.php部分代码：scriptsrc=js/js2.jstype=text/javascript/script……bodyonload=show();IFrameResize()divid=showimgimgsrc=img/1.jpgwidth=100%height=100%border=0id=img1……imgsrc=img/9.jpgwidth=100%height=100%border=0id=img4divid=showbuttonpahref=javascript:show(1)class=a2[1]/a……ahref=javascript:show(4)class=a1[4]/a/p/div/div……/bodyjs2.js代码：varnowimg=1;varmaximg=4;functionshow(d1){if(Number(d1)){clearTimeout(timer);nowimg=d1;//当前显示图片}for(vari=1;i(maximg+1);i++){if(i==nowimg){document.getElementById('img'+nowimg).style.display='';//显示当前图片document.getElementsByTagName(a)[i-1].className='a2';//改变文字样式}else{document.getElementById('img'+i).style.display='none';//隐藏其它图片document.getElementsByTagName(a)[i-1].className='a1';//改变文字样式}}if(nowimg==maximg){//设置下一个显示的图片nowimg=1;网站前端技术上机10}else{nowimg++;}timer=setTimeout('show()',3000);//设置定时器，显示下一张图片}最新动态以表的形式展示，展示数据库中最新的5条帖子代码如下。?phpinclude('php/connect.php');$sql=select*fromtieziORDERBYdateDESC;$res=mysqli_query($conn,$sql);if(mysqli_num_rows($res)0){//输出数据while($row=mysqli_fetch_assoc($res)){echo'trtdvalign=topwidth=400'.'ahref=tiezi.php?f='.$row[title].'name=tiezitarget=iframe'.$row[title].'/a'.'/tdtdvalign=topwidth=200'.$row[id].'/tdtdvalign=topwidth=200'.$row[date].'/td/tr';}}else{echo0结果;}$conn-close();?3.故事介绍故事介绍页面包含标题nav框架和内容主体框架story两部分。内容主体显示创作背景和故事介绍两部分。主体内容的两部分都包含标题h3标记内容和主要内容p标记内容img标记内容两个部分。story框架的css代码如下：#story{margin:0;padding:10px80px;line-height:25px;}nav框架的css代码如下：#nav{margin:5px40px;padding:010px;border-bottom:3px;border-bottom-style:dotted;网站前端技术上机11width:980px;height:50px}img标记内容如下：imgsrc=img/weitian.jpgstyle=float:left;width:40%;height:40%;margin:10px;4.人物介绍人物介绍有两个相同界面。每个人物介绍页面包含标题，人物信息和页码链接三部分。人物信息包含一个人物信息表格，表格分为两列，一列展示人物简介，另一列展示任务图片。表格标记属性代码如下：tablewidth=729border=3bordercolor=whitecellpadding=5trth介绍/thth图片/th/trtrtdvalign=topwidth=500……tdwidth=220align=centervalign=middleimgsrc=img/lufei.jpgwidth=100%/td/tr……/table5.图片分享图片分享包含标题和图片两部分。图片由九个图片3*3排列组成。图片展示的css代码如下。#picture{margin:20px;padding:0;width:250px;height:250px;text-align:center;float:left;}6.海贼吧海贼吧包含所有帖子、我的帖子和发帖三个部分。初始状态下显示所有帖子页面。7.所有帖子网站前端技术上机12所有帖