资源描述
网站前端技术课程设计报告
海贼王主题网站
学院：计算机与控制工程学院
班级：
姓名：
学号：
指引教师：
一、目与规定
参照给出ppt内容进行填写，不可以照抄ppt内容，做一定语句上更改后使用。（200字）
目：运用本学期所学HTML、CSS以及JavaScript知识，以海贼王这一作品为主题，设计并实现一种海贼王主题网站。网站以海贼王主题为中心进行简介、分享、交流等活动。
规定：网站包括首页，论坛，简介，分享等五个某些内容。顾客可以选取注册成为会员，也可以仅以非会员身份有限制浏览网站。论坛需要实现发帖，查看以及回答功能。网页数不少于8页，构造类似算一页。网站整体风格统一，各网页构造完整。
二、重要内容
详细描述网站构造和各某些详细内容、网站中各网页构造及各某些详细内容。所有构造图需手绘。（5页，500字）
功能构造图
1. 主页
网站主体框架由头部，section，页脚和回到顶部连接构成。头部包括导航栏、logo两某些，导航栏展示网站重要页面导航和登录功能，若顾客已登录，则显示顾客名。页面框架如下。
Logo
导航栏
Section和iframe框架
回到顶部
头部内容
页脚版权
2. 首页
首页重要涉及海贼王简介和最新动态两个框架。简介某些包括滚动图片显示和简介内容两某些。最新动态以表形式展示。页面框架如下。
简介
滚动图片
标题
标题
最新动态
3. 故事简介
故事简介页面包括标题和内容主体两某些。内容主体显示创作背景和故事简介两某些。主体内容两某些都包括标题和重要内容两个某些。页面框架如下。
标题
故事简介
标题
创作背景
story
4. 人物简介
人物简介有两个相似界面。每个人物简介页面包括标题，人物信息和页码链接三某些。人物信息包括一种人物信息表格，表格分为两列，一列展示人物简介，另一列展示任务图片。页面框架如下。
页码链接
人物信息表格
人物简介 人物图片
5. 图片分享
图片分享包括标题和图片两某些。图片由九个图片3*3排列构成。页面框架如下。
图片
图片
图片
图片
图片
图片
图片
图片
图片
6. 海贼吧
海贼吧包括所有帖子、我帖子和发帖三个某些。初始状态下显示所有帖子页面。
7. 所有帖子
所有帖子页面包括导航和内容两某些。内容某些以表格形式展示所有帖子。页面框架如下。
内容
导航
8. 我帖子
我帖子页面包括导航栏和内容两某些。内容某些以表格形式展示当前顾客发过帖子。页面框架同所有帖子某些。
9. 发贴
发帖页面包括导航栏和内容两某些。内容包括一种表单。页面框架同所有帖子某些。
10. 登录
登录页面包括标题和内容两某些。内容包括一种表单。页面框架如下。
标题
Form表单
11. 注册
注册页面包括标题和内容两某些。内容包括一种表单。页面框架与登录页面相似。
12. 个人信息
个人信息页面由一种表格构成，表格分两列，一列展示信息名称，另一列展示顾客信息。框架如下。
表格标题
信息名称 顾客信息
三、设备与环境
运营环境、编程语言等信息阐明。（100字）
运营环境：Web浏览器（如google浏览器，Internet Explorer，Firefox，Safari），phpStudy+mysql服务器，windows系统。
编程语言：前端使用html、css和JavaScript语言，后台使用php+mysql语言。
四、实现过程
针对网站每一页面中你以为比较有亮点、重要，可以体现你工作某些进行实现过程详细解说，涉及相相应重要代码（仅展示这一某些较为重要代码，剩余代码在附录中展示）。
这一某些是展示个人工作最重要某些，请务必认真完毕，保证数量（5页）和质量。注意：两人一组完毕状况，分工要明确，这一某些仅对自己所承担某些进行详细描述，因而，同组人员所提交报告在这一某些是不可以雷同。
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="iframe">海贼吧</a></li>
……
<ul>
登录某些，若顾客已登录，则显示顾客名；若未登录，则显示“登录|注册”。实当代码如下：
<?php
session_start();
if(!empty($_SESSION['userid'])){//你已经赋值ID
echo '<a href="my.php" target="iframe">'.$_SESSION["username"].'</a> | <a href="logout.php">注销</a>';//登陆后解决
}
else
echo '<a href="login.html" name="login">登录</a>';//未登陆解决
?>
点击回到顶部图片链接可使页面直接调回页面顶部。代码如下：
<div id="gotop">
<a href=""><img src="img/gotop.png" width="50" height="50"></a>
</div>
section某些居中显示，宽度1050px，上下外边距10px。section包括一种iframe内联框架，用于显示导航栏点击链接内容，初始状态显示首页first.php内容。内联框架大小随着内联框架中内容变化。
section块css代码：
#section{
background-color：#ffffff;
width：1050px;
margin：10px auto;
}
iframe内联框架代码：
<div id="section">
<iframe src="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.document.body.scrollHeight+30； //调节父页面中IFrame高度为此页面高度
}
在每个要显示页面body中加载js1.js函数：
<body onload="IFrameResize()">
页脚显示版权信息。
2. 首页
首页重要涉及海贼王简介和最新动态两个框架。
简介某些包括滚动图片显示和简介内容两某些。滚动图片某些每三秒换一张图片，循环播放，点击下面序号，显示相应图片。
简洁
滚动图片代码如下：
first.php某些代码：
<script src="js/js2.js" type="text/javascript"></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="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>
……
</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';//变化文字样式
}else{
document.getElementById('img'+i).style.display='none';//隐藏其他图片
document.getElementsByTagName("a")[i-1].className='a1';//变化文字样式
}
}
if(nowimg==maximg){//设立下一种显示图片
nowimg=1;
}else{
nowimg++;
}
timer=setTimeout('show()',3000);//设立定期器，显示下一张图片
}
最新动态以表形式展示，展示数据库中最新5条帖子代码如下。
<?php
include('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><td valign="top" width="400">'.'<a href="tiezi.php?f='.$row["title"].'" name="tiezi" target="iframe">'.$row["title"].'</a>'.'</td>
<td valign="top" width="200">'.$row["id"].'</td>
<td valign="top" width="200">'.$row["date"].'</td></tr>';
}
} else {
echo "0 成果";
}
$conn->close();
?>
3. 故事简介
故事简介页面包括标题nav框架和内容主体框架story两某些。内容主体显示创作背景和故事简介两某些。主体内容两某些都包括标题<h3>标记内容和重要内容<p>标记内容<img>标记内容两个某些。
story框架css代码如下：
#story{
margin：0;
padding：10px 80px;
line-height：25px;
}
nav框架css代码如下：
#nav{
margin：5px 40px;
padding：0 10px;
border-bottom：3px;
border-bottom-style：dotted;
width：980px;
height：50px
}
img标记内容如下：
<img src="img/weitian.jpg" style="float：left；width：40%;height：40%；margin：10px;">
4. 人物简介
人物简介有两个相似界面。每个人物简介页面包括标题，人物信息和页码链接三某些。人物信息包括一种人物信息表格，表格分为两列，一列展示人物简介，另一列展示任务图片。
表格标记属性代码如下：
<table width="729" border="3" bordercolor="white" cellpadding="5">
<tr><th>简介</th><th>图片</th></tr>
<tr><td valign="top" width="500">
……
<td width="220" align="center" valign="middle">
<img src="img/lufei.jpg" width="100%">
</td></tr>
……
</table>
5. 图片分享
图片分享包括标题和图片两某些。图片由九个图片3*3排列构成。
图片展示css代码如下。
#picture{
margin：20px;
padding：0;
width：250px;
height：250px;
text-align：center;
float：left;
}
6. 海贼吧
海贼吧包括所有帖子、我帖子和发帖三个某些。初始状态下显示所有帖子页面。
7. 所有帖子
所有帖子页面包括导航和内容两某些。内容某些使用php输出表格，展示所有从数据库中查到帖子，帖子顺序以时间先后排序。
php代码如下：
<?php
include('php/connect.php');
$sql = "select * from tiezi ORDER BY date DESC";//以date降序获取数据库表中信息
$res = mysqli_query($conn,$sql);
if (mysqli_num_rows($res) > 0) {
// 输出数据
while($row=mysqli_fetch_assoc($res)) {
echo '<tr><td valign="top" width="400">'.'<a href="tiezi.php?f='.$row["title"].'" name="tiezi" target="iframe">'.$row["title"].'</a>'.'</td>
<td valign="top" width="200">'.$row["id"].'</td>
<td valign="top" width="200">'.$row["date"].'</td></tr>';
}
} else {
echo "0 成果";
}
$conn->close();
?>
8. 我帖子
我帖子页面包括导航栏和内容两某些。内容某些以表格形式展示从数据库中查到当前顾客发过帖子。若顾客未登录，则页面跳转至bbs.php页面。
跳转代码某些如下：
<?php
session_start();
if(!empty($_SESSION['userid']))//你已经赋值ID
{
……
}
else{
header('Refresh:1,Url=bbs.php');//未登陆解决
echo "<script>alert('请登录')</script>";
}
?>
9. 发贴
发帖页面包括导航栏和内容两某些。内容包括一种表单。若顾客未登录，则页面跳转至bbs.php页面。该页面顾客填写表单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" maxlength="20" pattern="^[a-zA-Z\u4e00-\u9fa5]+$" placeholder="只能输入字母和中文">
<br><br>
内容：<textarea name="neirong" rows="5" cols="40" minlength="1" maxlength="200" placeholder="字数不大于200"></textarea>
<br><br>
<input type="submit" name="submit" value="提交">
</form>
php/post.php代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<?php
session_start();
if (($_POST["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 = "select * from tiezi where title = '$title' ";
$sql2 = "insert into tiezi values('$title','$id','$neirong','$date','$name')";
$res = mysqli_query($conn,$sql1);
if (mysqli_fetch_assoc($res)) {
$conn->close();
header('Refresh:1,Url=../post.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');
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.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="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。register.html将form内容传至php/register.php文献中， php/register.php将form内容上传至数据库。
注册代码与发帖代码相似。
13. 个人信息
个人信息页面my.php由一种表格构成，表格分两列，一列展示信息名称，另一列展示顾客信息。my.php通过获取$_SESSION[‘userid’]查询输出当前与顾客信息。
五、成果与分析
最后运营成果截图与阐明。
1. 主页
顾客进入主页，主页中内联框架展示首页内容。
2. 故事简介
点击顶部导航栏故事简介，内联框架展示故事简介页面。
3. 人物简介
点击顶部导航栏故事简介，内联框架展示故事人物简介页面。
4. 图片分享
点击图片分享，内联框架展示图片分享界面。
5. 海贼吧
点击顶部导航栏故事简介，内联框架展示故事海贼吧。海贼吧展示所有帖子页面。
6. 我帖子
顾客登录状况下点击我帖子，页面展示冲数据库中读取到该顾客发帖子。
7. 发贴
顾客登录状况下点击发帖，内联框架展示发帖页面，顾客填写帖子内容提交。
8. 登录
点击登录进入登录页面，填写账号密码登录。
9. 注册
点击注册进入注册页面，填写顾客信息。
10. 个人信息
顾客登录状况下点击顾客名，页面展示顾客信息表格。
附录
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
