网站前端设计课程设计报告书_第1页
网站前端设计课程设计报告书_第2页
网站前端设计课程设计报告书_第3页
网站前端设计课程设计报告书_第4页
网站前端设计课程设计报告书_第5页
免费预览已结束，剩余16页可下载查看

下载本文档

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

文档简介

1、下载可编辑.专业.整理.烟台大皆YANTAI UNIVERSITY前端技术课程设计报告海贼王主题学院：计算机与控制工程学院班级：*学号：指导教师：一、目的与要求参考给出ppt容进行填写，不可以照抄ppt容，做一定的语句上的更改后使用。（200 字）目的：运用本学期所学的 HTML CSS以及JavaScript知识，以海贼王这一作品 为主题，设计并实现一个海贼王主题。以海贼王主题为中心进行介绍、分享、交 流等活动。要求：包含首页，论坛，介绍，分享等五个部分容。用户可以选择注册成为会员， 也可以仅以非会员身份有限制的浏览。论坛需要实现发帖，查看以及回复功能。 网页数不少于8页，结构类似的算一页。

2、整体风格统一，各网页结构完整。二、主要容详细描述结构和各部分的详细容、中各网页结构及各部分详细容。所有结构图需手绘。（5页，500字）功能结构图1 .主页主体框架由头部，section ,页脚和回到顶部连接组成。头部包含导航栏、logo 两部分，导航栏展示主要页面导航和登录功能，若用户已登录，则显示用户名。 页面框架如下。2 .首页首页主要包括海贼王简介和最新动态两个框架。 简介部分包含滚动图片显示和简介容两部分。最新动态以表的形式展示。页面框架如下。标题滚动图 简介片标题最新动态3 .故事介绍故事介绍页面包含标题和容主体两部分。容主体显示创作背景和故事介绍两部分。主体容的两部分都包含标题和主

3、要容两个部分。页面框架如下。标题story标题创作背景标题故事介绍4 .人物介绍人物介绍有两个相同界面。每个人物介绍页面包含标题，人物信息和页码三部分。人物信息包含一个人物信息表格，表格分为两列，一列展示人物简介，另一列展示任务图片。页面框架如下。标题人物信息表*人物简介人物图片页码链接5 .图片分享图片分享包含标题和图片两部分。图片由九个图片3*3排列组成。页面框架如下。标题图片图片图片图片图片图片图片图片图片6 .海贼吧海贼吧包含所有帖子、我的帖子和发帖三个部分。初始状态下显示所有帖子页 面。7 .所有帖子所有帖子页面包含导航和容两部分。 容部分以表格形式展示所有帖子。页面框 架如下。导航

4、内容8 .我的帖子我的帖子页面包含导航栏和容两部分。容部分以表格形式展示当前用户发过的帖子。页面框架同所有帖子部分。9 .发贴发帖页面包含导航栏和容两部分。容包含一个表单。页面框架同所有帖子部分10 . 登录登录页面包含标题和容两部分。容包含一个表单。页面框架如下。标题Form表单11 . 注册注册页面包含标题和容两部分。容包含一个表单。页面框架与登录页面相同。12 . 个人信息个人信息页面由一个表格组成，表格分两列，一列展示信息名称，另一列展示 用户信息。框架如下。表格标题信息名称用户信息三、设备与环境运行环境、编程语言等信息说明。（100字） 运行环境：WebM览器(如谷歌浏览器，Inte

5、rnet Explorer , Firefox , Safari ), phpStudy+mysql 服务器，windows系统。编程语言：前端使用html、css和JavaScript语言，后台使用php+mysql语言。 四、实现过程针对每一页面中你认为比较有亮点的、重要的，可以体现你工作的部分进行实现 过程的详细讲解，包括相对应的主要代码(仅展示这一部分较为重要的代码，剩 余代码在附录中展示)。这一部分是展示个人工作的最主要部分，请务必认真完成，保证数量(5页)和质量。注意：两人一组完成的情况，分工要明确，这一部分仅对自己所承担部分 进行详细描述，因此，同组人员所提交的报告在这一部分是不

6、可以雷同的。1 .主页主体框架由头部，section ,页脚和回到顶部连接组成。头部包含导航栏、logo两部分，导航栏展示主要页面导航和登录功能。页面导航的容显示在section中的iframe联框架中。代码如下。<ul><li><a href="first.php" name="first" target="iframe”> 首页</a></li><li><a href="bbs.php" name="bbs" target=

7、"iframe"> 海贼吧</a></li><ul>登录部分，若用户已登录，则显示用户名；若未登录，则显示“登录 |注册”。实现代码如下：<?phpsession_start();if(!empty($_SESSION'userid')/你已经赋值的 IDecho '<a href="my.php" target="iframe">'.$_SESSION"username".'</a>| <a hr

8、ef="logout.php"> 注销 </a>'/ 登陆后的处理else echo '<a href="login.html" name="login”> 登录 </a>'/ 未登陆的处理 ?>点击回到顶部的图片可使页面直接调回页面顶部。代码如下：<div id="gotop"><a href=""><img src="img/gotop.png" width="50&qu

9、ot; height="50"></a></div>section部分居中显示，宽度1050px,上下外边距10px。section包含一个iframe联框架，用于显示导航栏点击的容，初始状态显示首页first.php的容。联框架大小随着联框架中的容变化。section 块的css代码：#sectionbackground-color: #ffffff;width: 1050px;margin: 10px auto;iframe联框架的代码：<div id="section"><iframe src=&qu

10、ot;first.php" name="iframe" id="iframe" scrolling="no" frameborder="0" ></iframe></div>iframe联框架大小设置代码：js1.js 代码：function IFrameResize()var obj = parent.document.getElementById("iframe"); / 取得父页面 IFrame 对象obj.height = this.documen

11、t.body.scrollHeight+30; /调整父页面中 IFrame的高度为此页面的高度在每个要显示的页面的body中加载js1.js 的函数：<body onload="IFrameResize()”>页脚显示信息。2 .首页首页主要包括海贼王简介和最新动态两个框架。简介部分包含滚动图片显示和简介容两部分。滚动图片部分每三秒换一图片，循环播放，点击下面序号，显示相应的图片。简洁滚动图片代码如下：first.php 部分代码：<script src="js/js2.js" type="text/javascript"&

12、gt;</script> <body onload="show();IFrameResize()”><div id="showimg"><img src="img/1.jpg" width="100%" height="100%" border="0" id""img1"> <img src="img/9.jpg" width="100%" height=&quo

13、t;100%" border="0" id""img4"><div id="showbutton"><p><a href="javascript:show(1)" class="a2">1</a> <a href="javascript:show(4)" class="a1">4</a></p></div></div> &l

14、t;/body>js2.js 代码：var nowimg=1;var maximg=4;function show(d1)if(Number(d1)clearTimeout(timer);nowimg=d1;/当前显示图片for(var i=1;i<(maximg+1);i+)if(i=nowimg)document.getElementById('img'+nowimg).style.display="/显示当前图片document.getElementsByTagName("a")i-1.className='a2'

15、/改变文字样式elsedocument.getElementById('img'+i).style.display='none'隐 藏其它图片document.getElementsByTagName("a")i-1.className='a1'/改变文字样式if(nowimg=maximg)/ 设置下一个显示的图片 nowimg=1;elsenowimg+;timer=setTimeout('show()',3000);/ 设置定时器，显示下一图片 最新动态以表的形式展示，展示数据库中最新的 5条帖子代码如下

16、。<?phpinclude('php/connect.php');$sql = "select * from tiezi ORDER BY date DESC"$res = mysqli_query($conn,$sql);if (mysqli_num_rows($res) > 0) / 输出数据while($row=mysqli_fetch_assoc($res) echo'<tr><tdvalign="top"width="400">'.'<ahre

17、f="tiezi.php?f='.$row"title".'"name="tiezi"target="iframe">'.$row"title".'</a>'.'</td><td valign="top" width="200">'.$row"id".'</td><td valign="top"

18、 width="200">'.$row"date".'</td></tr>' else echo "0 结果"；$conn->close();?>3 .故事介绍故事介绍页面包含标题nav框架和容主体框架story两部分。容主体显示创作背景和故事介绍两部分。主体容的两部分都包含标题43>标记容和主要容<p>标记容<img>标记容两个部分。story框架的css代码如下：#storymargin: 0;padding: 10px 80px;li

19、ne-height: 25px;nav框架的css代码如下：#navmargin: 5Px 40px;padding: 0 10px;border-bottom: 3px;border-bottom-style: dotted;width: 980px; height: 50pximg标记容如下：<img src="img/weitian.jpg" style="float: left; width: 40%;height: 40%; margin:10px;">4 .人物介绍人物介绍有两个相同界面。每个人物介绍页面包含标题，人物信息和页码三

20、部分。人物信息包含一个人物信息表格，表格分为两列，一列展示人物简介， 另一列展示任务图片。表格标记属性代码如下：<table width="729" border="3" bordercolor="white" cellpadding="5"><tr><th> 介绍 </th><th> 图片 </th></tr><tr><td valign="top" width="500"

21、> <td width="220" align="center" valign="middle"><img src="img/lufei.jpg" width="100%”></td></tr></table>5 .图片分享图片分享包含标题和图片两部分。图片由九个图片 3*3排列组成图片展示的css代码如下。#picturemargin: 20px;padding: 0;width: 250px;height: 250px;text-ali

22、gn: center;float: left;6 .海贼吧海贼吧包含所有帖子、我的帖子和发帖三个部分。初始状态下显示所有帖子页面。7 .所有帖子所有帖子页面包含导航和容两部分。 容部分使用php输出表格，展示所有从数据库中查到的帖子，帖子顺序以时间先后排序php代码如下：<?phpinclude('php/connect.php');以date降序获取数据库width="400">'.'<aname="tiezi$sql = "select * from tiezi ORDER BY date DESC&

23、quot;/表中的信息$res = mysqli_query($conn,$sql);if (mysqlinumrows($res) > 0) /while($row=mysqli_fetch_assoc($res) echo'<tr><tdvalign="tophref="tiezi.php?f='.$row"title".'"target="iframe">'.$row"title".'</a>'.'&l

24、t;/td><td valign="top" width="200">'.$row"id".'</td><td valign="top" width="200">'.$row"date".'</td></tr>' else echo "0结果"；$conn->close();?>8 .我的帖子我的帖子页面包含导航栏和容两部分。容部分以表格形

25、式展示从数据库中查到的当前用户发过的帖子。若用户未登录，则页面跳转至bbs.php页面。跳转代码部分如下：<?phpsession_start();if(!empty($_SESSION'userid') 你已经赋值的 ID else header('Refresh:1,Url=bbs.php');/ 未登陆的处理 echo "<script>alert(' 请登录')</script>" ?>9 .发贴发帖页面包含导航栏和容两部分。容包含一个表单。若用户未登录，则页面跳转至bbs.php页

26、面。该页面用户填写表单form,填写完成后系统将表单提交 给post.php ,由post.php处理上传至数据库。其中主题少于20字，帖子容少于200字，主题和容不能为空。部分代码如下。<h3 style="text-align: center;" 发帖 </h3><form method="post" action="php/post.php”>主题:<input type="text" name="title" minlength="1" ma

27、xlength="20" pattern="Aa-zA-Zu4e00-u9fa5+$" placeholder="只能输入字母和汉字"><br><br>容: vtextarea name="neirong" rows="5" cols="40" minlength="1" maxlength="200" placeholder="字数小于 200"></textarea>

28、;<br><br><input type="submit" name="submit" value="提交"></form>php/post.php 代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><?phpsession_start();if ($_P

29、OST"title" != null )&&($_POST"neirong" != null )$title = $_POST"title"$neirong = $_POST"neirong"date_default_timezone_set('Asia/Shanghai');$date = date('y-m-d H:i:s');$id = $_SESSION"userid"require('connect.php');$sql1

30、 = "select * from tiezi where title = '$title'"$sql2="insertintotiezivalues('$title','$id','$neirong','$date','$name')"$res = mysqli_query($conn,$sql1);if (mysqli_fetch_assoc($res) $conn->close();header('Refresh:1,Url=./post.

31、php');echo "<script>alert('该主题已存在')</script>"else if(mysqli_query($conn,$sql2)$conn->close();header('Refresh:1,Url=./bbs.php');echo "<script>alert(' 发布成功')</script>"else$conn->close();header('Refresh:1,Url=./post.php&#

32、39;);echo "<script>alert(' 发布失败')</script>"else$conn->close();header('Refresh:1,Url=./post.php');echo "<script>alert('请填入相关信息)</script>"?></body></html>10 . 回复回复功能与发帖功能类似。用户填写容提交后，tiezi.php 使用php代码将所回复帖子的主题传给php/huifu.

33、php , php/huifu.php 使用过$_GET方式获取所回复帖子的主题，然后将回复容添加至数据库表huifu中。tiezi.php 中的 form 代码：<form method="post" action="<?php echo 'php/huifu.php?t='.$title ?>"><h3 style="text-align: center;"> 回复 </h3><textarea name="neirong" rows=&qu

34、ot;5" cols="40"minlength="1"maxlength="200" placeholder="字数小于 200"></textarea><br><br><input type="submit" name="submit" value=" 提交"></form>huifu.php中的代码与发帖代码相似11 . 登录登录页面包含标题和容两部分。容包含一个表单form。login.html 将form的容传至php/login.php 文件中，php/login.php文件访问数据库判断表单容与数据库中的容是否一致，若一致，则跳转至home.php页面，否则跳转至login.html 页面。12 . 注册注册页面包含标题和容两部分。容包含一个表单form oregister.html 将form 的容传至php/register.php 文件中，php/register.ph

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论