网站前端设计课程设计.doc

网站前端技术课程设计报告
海贼王主题网站

学院：计算机与控制工程学院
班级：
姓名：
学号：
指导教师：

一、目的与规定
参考给出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浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari），phpStudy+mysql服务器，windows系统。
编程语言：前端使用html、css和JavaScript语言，后台使用php+mysql语言。
四、实现过程
针对网站每一页面中你认为比较有亮点的、重要的，可以体现你工作的部分进行实现过程的具体讲解，涉及相相应的重要代码（仅展示这一部分较为重要的代码，剩余代码在附录中展示）。
这一部分是展示个人工作的最重要部分，请务必认真完毕，保证数量（5页）和质量。注意：两人一组完毕的情况，分工要明确，这一部分仅对自己所承担部分进行具体描述，因此，同组人员所提交的报告在这一部分是不可以雷同的。
1. 主页
网站主体框架由头部，section，页脚和回到顶部连接组成。
头部包含导航栏、logo两部分，导航栏展示网站重要页面导航和登录功能。
页面导航的链接内容显示在section中的iframe内联框架中。代码如下。
target="iframe">海贼吧 echo '登录';//未登陆的解决
?>
点击回到顶部的图片链接可使页面直接调回页面顶部。代码如下：

section块的css代码：
#section{
background-color: #ffffff;
width: 1050px;
margin: 10px auto;
}
iframe内联框架的代码：

var obj = parent.document.getElementById("iframe"); //取得父页面IFrame对象
obj.height = this.document.body.scrollHeight+30; //调整父页面中IFrame的高度为此页面的高度
}
在每个要显示的页面的body中加载js1.js的函数：

页脚显示版权信息。
2. 首页
首页重要涉及海贼王简介和最新动态两个框架。
简介部分包含滚动图片显示和简介内容两部分。滚动图片部分每三秒换一张图片，循环播放，点击下面序号，显示相应的图片。
简洁
滚动图片代码如下：
first.php部分代码：

……

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条帖子代码如下。
0) {
// 输出数据
while($row=mysqli_fetch_assoc($res)) {
echo ''.''.$row["title"].''.'
'.$row["id"].'
'.$row["date"].'';
}
} else {
echo "0 结果";
}
$conn->close();
?>
3. 故事介绍
故事介绍页面包含标题nav框架和内容主体框架story两部分。内容主体显示创作背景和故事介绍两部分。主体内容的两部分都包含标题980px;
height: 50px
}
img标记内容如下：

4. 人物介绍
人物介绍有两个相同界面。每个人物介绍页面包含标题，人物信息和页码链接三部分。人物信息包含一个人物信息表格，表格分为两列，一列展示人物简介，另一列展示任务图片。
表格标记属性代码如下：
>
px;
padding: 0;
width: 250px;
height: 250px;
text-align: center;
float: left;
}
6. 海贼吧
海贼吧包含所有帖子、我的帖子和发帖三个部分。初始状态下显示所有帖子页面。
7. 所有帖子
所有帖子页面包含导航和内容两部分。内容部分使用php输出表格，展示所有从数据库中查到的帖子，帖子顺序以时间先后排序。
php代码如下：
R BY date DESC";//以date降序获取数据库表中的信息
$res = mysqli_query($conn,$sql);
if (mysqli_num_rows($res) > 0) {
// 输出数据
while($row=mysqli_fetch_assoc($res)) {
echo ''.''.$row["title"].''.'
'.$row["id"].'
'.$row["date"].'';
}
} else {
echo "0 结果";
}
$conn->close();
?>

8. 我的帖子
我的帖子页面包含导航栏和内容两部分。内容部分以表格形式展示从数据库中查到的当前用户发过的帖子。若用户未登录，则页面跳转至bbs.php页面。
跳转代码部分如下：

session_start();
if(!empty($_SESSION['userid']))//你已经赋值的ID
{
……
}
else{
header('Refresh:1,Url=bbs.php');//未登陆的解决
echo "alert('请登录')";
}
?>
9. 发贴
发帖页面包含导航栏和内容两部分。内容包含一个表单。若用户未登录，则页面跳转至bbs.php页面。该页面用户填写表单form，填写完毕后系统将表单提交给post.php，由post.php解决上传至数据库。其中主题少于20字，帖子内容少于200字，主题和内容不能为空。部分代码如下。
rt();
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 "alert('该主题已存在')";
}
else if(mysqli_query($conn,$sql2)){
$conn->close();
header('Refresh:1,Url=../bbs.php');
echo "alert('发布成功')";
}
else{
$conn->close();
header('Refresh:1,Url=../post.php');
echo "alert('发布失败</p><p style='height:0px;padding:0;overflow:hidden'>30、')";
}
}
else{
$conn->close();
header('Refresh:1,Url=../post.php');
echo "alert('请填入相关信息')";
}
?>

10. 回复
回复功能与发帖功能类似。用户填写内容提交后，tiezi.php使用php代码将所回复帖子的主题传给php/huifu.php，php/huifu.php使用过$_GET[]方式获取所回复帖子的主题，然后将回复内容添加至数据库表huifu中。
tiezi.php中的form代码：
e="submit" value="提交">
ister.php将form内容上传至数据库。
注册代码与发帖代码相似。
13. 个人信息
个人信息页面my.php由一个表格组成，表格分两列，一列展示信息名称，另一列展示用户信息。my.php通过获取$_SESSION[‘userid’]查询输出当前与用户信息。
五、结果与分析
最终运营结果截图与说明。

1. 主页

用户进入主页，主页中内联框架展示首页内容。
2. 故事介绍

点击顶部导航栏故事介绍，内联框架展示故事介绍页面。
3. 人物介绍

点击顶部导航栏故事介绍，内联框架展示故事人物介绍页面。
4. 图片分享

点击图片分享，内联框架展示图片分享界面。
5. 海贼吧

点击顶部导航栏故事介绍，内联框架展示故事海贼吧。海贼吧展示所有帖子页面。
6. 我的帖子

用户登录的情况下点击我的帖子，页面展示冲数据库中读取到的该用户发的帖子。
7. 发贴

用户登录的情况下点击发帖，内联框架展示发帖页面，用户填写帖子内容提交。
8. 登录

点击登录进入登录页面，填写账号密码登录。
9. 注册

点击注册进入注册页面，填写用户信息。
10. 个人信息

用户登录的情况下点击用户名，页面展示用户信息表格。
附录