網(wǎng)站前端設計課程設計_第1頁
網(wǎng)站前端設計課程設計_第2頁
網(wǎng)站前端設計課程設計_第3頁
網(wǎng)站前端設計課程設計_第4頁
網(wǎng)站前端設計課程設計_第5頁
已閱讀5頁，還剩11頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

4、分。內(nèi)容部分以表格形式展示所有帖子。頁面框架如下。內(nèi)容導航8. 我的帖子我的帖子頁面包含導航欄和內(nèi)容兩部分。內(nèi)容部分以表格形式展示當前用戶發(fā)過的帖子。頁面框架同所有帖子部分。9. 發(fā)貼發(fā)帖頁面包含導航欄和內(nèi)容兩部分。內(nèi)容包含一個表單。頁面框架同所有帖子部分。10. 登錄登錄頁面包含標題和內(nèi)容兩部分。內(nèi)容包含一個表單。頁面框架如下。標題Form表單11. 注冊注冊頁面包含標題和內(nèi)容兩部分。內(nèi)容包含一個表單。頁面框架與登錄頁面相同。12. 個人信息個人信息頁面由一個表格組成，表格分兩列，一列展示信息名稱，另一列展示用戶信息?？蚣苋缦隆１砀駱祟}信息名稱 用戶信息三、設備與環(huán)境運行環(huán)境、編程語言等信息

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

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

7、quot; name="bbs" target="iframe">海賊吧</a></li><ul>登錄部分，若用戶已登錄，則顯示用戶名；若未登錄，則顯示“登錄|注冊”。實現(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">注銷</a>'/登陸后的處理else echo '<a href="login.html" name="login">登錄</a>'/未登陸的處理 ?>點擊回到頂部的圖片鏈接可使頁面直接調(diào)回頁面頂部。代碼如下：<div id="gotop"><a href=""><img src="img

9、/gotop.png" width="50" height="50"></a></div>section部分居中顯示，寬度1050px，上下外邊距10px。section包含一個iframe內(nèi)聯(lián)框架，用于顯示導航欄點擊的鏈接內(nèi)容，初始狀態(tài)顯示首頁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)框架大小設置代碼：js1.js代碼：function IFrameResize() var obj = parent.document.getElementById("iframe");

11、 /取得父頁面IFrame對象 obj.height = this.document.body.scrollHeight+30; /調(diào)整父頁面中IFrame的高度為此頁面的高度 在每個要顯示的頁面的body中加載js1.js的函數(shù)：<body onload="IFrameResize()">頁腳顯示版權信息。2. 首頁首頁主要包括海賊王簡介和最新動態(tài)兩個框架。簡介部分包含滾動圖片顯示和簡介內(nèi)容兩部分。滾動圖片部分每三秒換一張圖片，循環(huán)播放，點擊下面序號，顯示相應的圖片。簡潔滾動圖片代碼如下：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;/當前顯示圖片for(var i=1;i<(maximg+1);i+)if(i=nowimg)document.getElementById('img'+nowimg).style.display=''/顯示當前圖片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)/設置下一個顯示的圖片nowimg=1;elsenowimg+;timer=setTimeout('show()',3000);/設置定時

16、器，顯示下一張圖片最新動態(tài)以表的形式展示，展示數(shù)據(jù)庫中最新的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 結果"$conn->close(); ?>3. 故事介紹故事介紹頁面包含標題nav框架和內(nèi)容主體框架story兩部分。內(nèi)容主體顯示創(chuàng)作背景和故事介紹兩部分。主體內(nèi)容的兩部分都包含標題<h3>標記內(nèi)容和主要內(nèi)容<p>標記內(nèi)容<img>標記內(nèi)容兩

19、個部分。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標記內(nèi)容如下：<img src="img/weitian.jpg" style="float: left; width: 40%;height: 40%; margi

20、n: 10px;">4. 人物介紹人物介紹有兩個相同界面。每個人物介紹頁面包含標題，人物信息和頁碼鏈接三部分。人物信息包含一個人物信息表格，表格分為兩列，一列展示人物簡介，另一列展示任務圖片。表格標記屬性代碼如下：<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. 圖片分享圖片分享包含標題和圖片兩部分。圖片由九個圖片3*3排列組成。圖片展示的css代碼如下。#picture

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

23、date降序獲取數(shù)據(jù)庫表中的信息$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 結果"$conn->close(); ?> 8. 我的帖子我的帖子頁面包含導航欄和內(nèi)容兩部分。內(nèi)容部分以表格形式展示從數(shù)據(jù)庫中查到的當前用戶發(fā)過的帖子。若用戶未登錄，則頁面跳轉至bbs.php頁面。跳轉代碼部分如下：<?phpsession_start();if(!empty($_SESSION'userid')/你已經(jīng)賦值的IDelseheader('Refresh:1,Url=bbs.php');/未登陸的處理 echo "<script>alert(

26、9;請登錄')</script>"?>9. 發(fā)貼發(fā)帖頁面包含導航欄和內(nèi)容兩部分。內(nèi)容包含一個表單。若用戶未登錄，則頁面跳轉至bbs.php頁面。該頁面用戶填寫表單form，填寫完成后系統(tǒng)將表單提交給post.php，由post.php處理上傳至數(shù)據(jù)庫。其中主題少于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="字數(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、('請?zhí)钊胂嚓P信息')</script>" ?></body></html>10. 回復回復功能與發(fā)帖功能類似。用戶填寫內(nèi)容提交后，tiezi.php使用php代碼將所回復帖子的主題傳給php/huifu.php，php/huifu.php使用過$_GET方式獲取所回復帖子的主題，然后將回復內(nèi)容添加至數(shù)據(jù)庫表huifu中。tiezi.php中的form代碼：<form method="post" action="<?php echo 'php/huifu.php?t='.$title

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論