網(wǎng)站前端設(shè)計(jì)課程設(shè)計(jì)

1、網(wǎng)站前端技術(shù)課程設(shè)計(jì)報(bào)告海賊王主題網(wǎng)站學(xué)院：計(jì)算機(jī)與控制工程學(xué)院班級(jí)： 姓名： 學(xué)號(hào)： 指導(dǎo)教師： 一、目的與要求參考給出ppt內(nèi)容進(jìn)行填寫(xiě)，不可以照抄ppt內(nèi)容，做一定的語(yǔ)句上的更改后使用。（200字）目的：運(yùn)用本學(xué)期所學(xué)的HTML、CSS以及JavaScript知識(shí)，以海賊王這一作品為主題，設(shè)計(jì)并實(shí)現(xiàn)一個(gè)海賊王主題網(wǎng)站。網(wǎng)站以海賊王主題為中心進(jìn)行介紹、分享、交流等活動(dòng)。要求：網(wǎng)站包含首頁(yè)，論壇，介紹，分享等五個(gè)部分內(nèi)容。用戶可以選擇注冊(cè)成為會(huì)員，也可以僅以非會(huì)員身份有限制的瀏覽網(wǎng)站。論壇需要實(shí)現(xiàn)發(fā)帖，查看以及回復(fù)功能。網(wǎng)頁(yè)數(shù)不少于8頁(yè)，結(jié)構(gòu)類(lèi)似的算一頁(yè)。網(wǎng)站整體風(fēng)格統(tǒng)一，各網(wǎng)頁(yè)結(jié)構(gòu)完整。二

2、、主要內(nèi)容詳細(xì)描述網(wǎng)站結(jié)構(gòu)和各部分的詳細(xì)內(nèi)容、網(wǎng)站中各網(wǎng)頁(yè)結(jié)構(gòu)及各部分詳細(xì)內(nèi)容。所有結(jié)構(gòu)圖需手繪。（5頁(yè)，500字）功能結(jié)構(gòu)圖1. 主頁(yè)網(wǎng)站主體框架由頭部，section，頁(yè)腳和回到頂部連接組成。頭部包含導(dǎo)航欄、logo兩部分，導(dǎo)航欄展示網(wǎng)站主要頁(yè)面導(dǎo)航和登錄功能，若用戶已登錄，則顯示用戶名。頁(yè)面框架如下。Logo導(dǎo)航欄Section和iframe框架回到頂部頭部?jī)?nèi)容頁(yè)腳版權(quán)2. 首頁(yè)首頁(yè)主要包括海賊王簡(jiǎn)介和最新動(dòng)態(tài)兩個(gè)框架。簡(jiǎn)介部分包含滾動(dòng)圖片顯示和簡(jiǎn)介內(nèi)容兩部分。最新動(dòng)態(tài)以表的形式展示。頁(yè)面框架如下。簡(jiǎn)介滾動(dòng)圖片標(biāo)題標(biāo)題最新動(dòng)態(tài)3. 故事介紹故事介紹頁(yè)面包含標(biāo)題和內(nèi)容主體兩部分。內(nèi)容主體顯

3、示創(chuàng)作背景和故事介紹兩部分。主體內(nèi)容的兩部分都包含標(biāo)題和主要內(nèi)容兩個(gè)部分。頁(yè)面框架如下。標(biāo)題故事介紹標(biāo)題創(chuàng)作背景story4. 人物介紹人物介紹有兩個(gè)相同界面。每個(gè)人物介紹頁(yè)面包含標(biāo)題，人物信息和頁(yè)碼鏈接三部分。人物信息包含一個(gè)人物信息表格，表格分為兩列，一列展示人物簡(jiǎn)介，另一列展示任務(wù)圖片。頁(yè)面框架如下。頁(yè)碼鏈接 人物信息表格人物簡(jiǎn)介 人物圖片5. 圖片分享圖片分享包含標(biāo)題和圖片兩部分。圖片由九個(gè)圖片3*3排列組成。頁(yè)面框架如下。圖片圖片圖片圖片圖片圖片圖片圖片圖片6. 海賊吧海賊吧包含所有帖子、我的帖子和發(fā)帖三個(gè)部分。初始狀態(tài)下顯示所有帖子頁(yè)面。7. 所有帖子所有帖子頁(yè)面包含導(dǎo)航和內(nèi)容兩部

4、分。內(nèi)容部分以表格形式展示所有帖子。頁(yè)面框架如下。內(nèi)容導(dǎo)航8. 我的帖子我的帖子頁(yè)面包含導(dǎo)航欄和內(nèi)容兩部分。內(nèi)容部分以表格形式展示當(dāng)前用戶發(fā)過(guò)的帖子。頁(yè)面框架同所有帖子部分。9. 發(fā)貼發(fā)帖頁(yè)面包含導(dǎo)航欄和內(nèi)容兩部分。內(nèi)容包含一個(gè)表單。頁(yè)面框架同所有帖子部分。10. 登錄登錄頁(yè)面包含標(biāo)題和內(nèi)容兩部分。內(nèi)容包含一個(gè)表單。頁(yè)面框架如下。標(biāo)題Form表單11. 注冊(cè)注冊(cè)頁(yè)面包含標(biāo)題和內(nèi)容兩部分。內(nèi)容包含一個(gè)表單。頁(yè)面框架與登錄頁(yè)面相同。12. 個(gè)人信息個(gè)人信息頁(yè)面由一個(gè)表格組成，表格分兩列，一列展示信息名稱(chēng)，另一列展示用戶信息。框架如下。表格標(biāo)題信息名稱(chēng) 用戶信息三、設(shè)備與環(huán)境運(yùn)行環(huán)境、編程語(yǔ)言等信息

5、說(shuō)明。（100字）運(yùn)行環(huán)境：Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari），phpStudy+mysql服務(wù)器，windows系統(tǒng)。編程語(yǔ)言：前端使用html、css和JavaScript語(yǔ)言，后臺(tái)使用php+mysql語(yǔ)言。四、實(shí)現(xiàn)過(guò)程針對(duì)網(wǎng)站每一頁(yè)面中你認(rèn)為比較有亮點(diǎn)的、重要的，可以體現(xiàn)你工作的部分進(jìn)行實(shí)現(xiàn)過(guò)程的詳細(xì)講解，包括相對(duì)應(yīng)的主要代碼（僅展示這一部分較為重要的代碼，剩余代碼在附錄中展示）。這一部分是展示個(gè)人工作的最主要部分，請(qǐng)務(wù)必認(rèn)真完成，保證數(shù)量（5頁(yè)）和質(zhì)量。注意：兩人一組完成的情況，分工要明確，這一部分僅對(duì)自己所承擔(dān)部分進(jìn)行詳細(xì)

6、描述，因此，同組人員所提交的報(bào)告在這一部分是不可以雷同的。1. 主頁(yè)網(wǎng)站主體框架由頭部，section，頁(yè)腳和回到頂部連接組成。頭部包含導(dǎo)航欄、logo兩部分，導(dǎo)航欄展示網(wǎng)站主要頁(yè)面導(dǎo)航和登錄功能。頁(yè)面導(dǎo)航的鏈接內(nèi)容顯示在section中的iframe內(nèi)聯(lián)框架中。代碼如下。<ul><li><a href="first.php" name="first" target="iframe">首頁(yè)</a></li><li><a href="bbs.php&

7、quot; name="bbs" target="iframe">海賊吧</a></li><ul>登錄部分，若用戶已登錄，則顯示用戶名；若未登錄，則顯示“登錄|注冊(cè)”。實(shí)現(xiàn)代碼如下：<?phpsession_start();if(!empty($_SESSION'userid')/你已經(jīng)賦值的ID echo '<a href="my.php" target="iframe">'.$_SESSION"username

8、".'</a> | <a href="logout.php">注銷(xiāo)</a>'/登陸后的處理else echo '<a href="login.html" name="login">登錄</a>'/未登陸的處理 ?>點(diǎn)擊回到頂部的圖片鏈接可使頁(yè)面直接調(diào)回頁(yè)面頂部。代碼如下：<div id="gotop"><a href=""><img src="img

9、/gotop.png" width="50" height="50"></a></div>section部分居中顯示，寬度1050px，上下外邊距10px。section包含一個(gè)iframe內(nèi)聯(lián)框架，用于顯示導(dǎo)航欄點(diǎn)擊的鏈接內(nèi)容，初始狀態(tài)顯示首頁(yè)first.php的內(nèi)容。內(nèi)聯(lián)框架大小隨著內(nèi)聯(lián)框架中的內(nèi)容變化。section塊的css代碼：#sectionbackground-color: #ffffff;width: 1050px;margin: 10px auto;iframe內(nèi)聯(lián)框架的代碼：<div id

10、="section"><iframe src="first.php" name="iframe" id="iframe" scrolling="no" frameborder="0" ></iframe></div>iframe內(nèi)聯(lián)框架大小設(shè)置代碼：js1.js代碼：function IFrameResize() var obj = parent.document.getElementById("iframe");

11、 /取得父頁(yè)面IFrame對(duì)象 obj.height = this.document.body.scrollHeight+30; /調(diào)整父頁(yè)面中IFrame的高度為此頁(yè)面的高度 在每個(gè)要顯示的頁(yè)面的body中加載js1.js的函數(shù)：<body onload="IFrameResize()">頁(yè)腳顯示版權(quán)信息。2. 首頁(yè)首頁(yè)主要包括海賊王簡(jiǎn)介和最新動(dòng)態(tài)兩個(gè)框架。簡(jiǎn)介部分包含滾動(dòng)圖片顯示和簡(jiǎn)介內(nèi)容兩部分。滾動(dòng)圖片部分每三秒換一張圖片，循環(huán)播放，點(diǎn)擊下面序號(hào)，顯示相應(yīng)的圖片。簡(jiǎn)潔滾動(dòng)圖片代碼如下：first.php部分代碼：<script src="j

12、s/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/

13、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&

14、gt;</p></div></div></body>js2.js代碼：var nowimg=1;var maximg=4;function show(d1)if(Number(d1)clearTimeout(timer);nowimg=d1;/當(dāng)前顯示圖片for(var i=1;i<(maximg+1);i+)if(i=nowimg)document.getElementById('img'+nowimg).style.display=''/顯示當(dāng)前圖片document.getElementsByTagNam

15、e("a")i-1.className='a2'/改變文字樣式elsedocument.getElementById('img'+i).style.display='none'/隱藏其它圖片document.getElementsByTagName("a")i-1.className='a1'/改變文字樣式if(nowimg=maximg)/設(shè)置下一個(gè)顯示的圖片nowimg=1;elsenowimg+;timer=setTimeout('show()',3000);/設(shè)置定時(shí)

16、器，顯示下一張圖片最新動(dòng)態(tài)以表的形式展示，展示數(shù)據(jù)庫(kù)中最新的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) / 輸出數(shù)據(jù) while($row=mysqli_fetch_assoc($res) echo '<tr><td valign="top" w

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

18、.'</td><td valign="top" width="200">'.$row"date".'</td></tr>' else echo "0 結(jié)果"$conn->close(); ?>3. 故事介紹故事介紹頁(yè)面包含標(biāo)題nav框架和內(nèi)容主體框架story兩部分。內(nèi)容主體顯示創(chuàng)作背景和故事介紹兩部分。主體內(nèi)容的兩部分都包含標(biāo)題<h3>標(biāo)記內(nèi)容和主要內(nèi)容<p>標(biāo)記內(nèi)容<img>標(biāo)記內(nèi)容兩

19、個(gè)部分。story框架的css代碼如下：#storymargin: 0;padding: 10px 80px;line-height: 25px;nav框架的css代碼如下：#navmargin: 5px 40px;padding: 0 10px;border-bottom: 3px;border-bottom-style: dotted;width: 980px;height: 50pximg標(biāo)記內(nèi)容如下：<img src="img/weitian.jpg" style="float: left; width: 40%;height: 40%; margi

20、n: 10px;">4. 人物介紹人物介紹有兩個(gè)相同界面。每個(gè)人物介紹頁(yè)面包含標(biāo)題，人物信息和頁(yè)碼鏈接三部分。人物信息包含一個(gè)人物信息表格，表格分為兩列，一列展示人物簡(jiǎn)介，另一列展示任務(wù)圖片。表格標(biāo)記屬性代碼如下：<table width="729" border="3" bordercolor="white" cellpadding="5"><tr><th>介紹</th><th>圖片</th></tr><tr

21、><td valign="top" width="500"><td width="220" align="center" valign="middle"><img src="img/lufei.jpg" width="100%"></td></tr></table>5. 圖片分享圖片分享包含標(biāo)題和圖片兩部分。圖片由九個(gè)圖片3*3排列組成。圖片展示的css代碼如下。#picture

22、margin: 20px;padding: 0;width: 250px;height: 250px;text-align: center;float: left;6. 海賊吧海賊吧包含所有帖子、我的帖子和發(fā)帖三個(gè)部分。初始狀態(tài)下顯示所有帖子頁(yè)面。7. 所有帖子所有帖子頁(yè)面包含導(dǎo)航和內(nèi)容兩部分。內(nèi)容部分使用php輸出表格，展示所有從數(shù)據(jù)庫(kù)中查到的帖子，帖子順序以時(shí)間先后排序。php代碼如下：<?php include('php/connect.php');$sql = "select * from tiezi ORDER BY date DESC"/以

23、date降序獲取數(shù)據(jù)庫(kù)表中的信息$res = mysqli_query($conn,$sql);if (mysqli_num_rows($res) > 0) / 輸出數(shù)據(jù) while($row=mysqli_fetch_assoc($res) echo '<tr><td valign="top" width="400">'.'<a href="tiezi.php?f='.$row"title".'" name="tiezi&quo

24、t; target="iframe">'.$row"title".'</a>'.'</td><td valign="top" width="200">'.$row"id".'</td><td valign="top" width="200">'.$row"date".'</td></tr&g

25、t;' else echo "0 結(jié)果"$conn->close(); ?> 8. 我的帖子我的帖子頁(yè)面包含導(dǎo)航欄和內(nèi)容兩部分。內(nèi)容部分以表格形式展示從數(shù)據(jù)庫(kù)中查到的當(dāng)前用戶發(fā)過(guò)的帖子。若用戶未登錄，則頁(yè)面跳轉(zhuǎn)至bbs.php頁(yè)面。跳轉(zhuǎn)代碼部分如下：<?phpsession_start();if(!empty($_SESSION'userid')/你已經(jīng)賦值的IDelseheader('Refresh:1,Url=bbs.php');/未登陸的處理 echo "<script>alert(

26、9;請(qǐng)登錄')</script>"?>9. 發(fā)貼發(fā)帖頁(yè)面包含導(dǎo)航欄和內(nèi)容兩部分。內(nèi)容包含一個(gè)表單。若用戶未登錄，則頁(yè)面跳轉(zhuǎn)至bbs.php頁(yè)面。該頁(yè)面用戶填寫(xiě)表單form，填寫(xiě)完成后系統(tǒng)將表單提交給post.php，由post.php處理上傳至數(shù)據(jù)庫(kù)。其中主題少于20字，帖子內(nèi)容少于200字，主題和內(nèi)容不能為空。部分代碼如下。<h3 style="text-align: center;">發(fā)帖</h3><form method="post" action="php/post.ph

27、p"> 主題: <input type="text" name="title" minlength="1" maxlength="20" pattern="a-zA-Zu4e00-u9fa5+$" placeholder="只能輸入字母和漢字"> <br><br> 內(nèi)容: <textarea name="neirong" rows="5" cols="40"

28、minlength="1" maxlength="200" placeholder="字?jǐn)?shù)小于200"></textarea> <br><br> <input type="submit" name="submit" value="提交"> </form>php/post.php代碼如下：<!DOCTYPE html><html><head><meta charset=&

29、quot;utf-8"><title></title></head><body><?phpsession_start(); if ($_POST"title" != null )&&($_POST"neirong" != null ) $title = $_POST"title" $neirong = $_POST"neirong" date_default_timezone_set('Asia/Shanghai'

30、); $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')&

31、quot; $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'); ec

32、ho "<script>alert('發(fā)布成功')</script>" else $conn->close(); header('Refresh:1,Url=./post.php'); echo "<script>alert('發(fā)布失敗')</script>" else $conn->close(); header('Refresh:1,Url=./post.php'); echo "<script>alert

33、('請(qǐng)?zhí)钊胂嚓P(guān)信息')</script>" ?></body></html>10. 回復(fù)回復(fù)功能與發(fā)帖功能類(lèi)似。用戶填寫(xiě)內(nèi)容提交后，tiezi.php使用php代碼將所回復(fù)帖子的主題傳給php/huifu.php，php/huifu.php使用過(guò)$_GET方式獲取所回復(fù)帖子的主題，然后將回復(fù)內(nèi)容添加至數(shù)據(jù)庫(kù)表huifu中。tiezi.php中的form代碼：<form method="post" action="<?php echo 'php/huifu.php?t='.$title