网站前端设计课程设计样本.doc
《网站前端设计课程设计样本.doc》由会员分享，可在线阅读，更多相关《网站前端设计课程设计样本.doc（23页珍藏版）》请在咨信网上搜索。
网站前端技术课程设计报告 海贼王主题网站 学院：计算机与控制工程学院 班级： 姓名： 学号： 指引教师： 一、目与规定 参照给出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. 个人信息 顾客登录状况下点击顾客名，页面展示顾客信息表格。 附录
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 网站 前端 设计 课程设计 样本
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前自行私信或留言给上传者【二***】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时私信或留言给本站上传会员【二***】，需本站解决可联系【 微信客服】、【 QQ客服】，若有其他问题请点击或扫码反馈【 服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【 版权申诉】”（推荐），意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：4008-655-100；投诉/维权电话：4009-655-100。
该用户的其他文档 更多>>
团支部学期工作计划与要点总结.docx
-
房地产销售月工作计划书.docx
餐饮的工作计划与总结.pdf
-
出纳工作总结和工作计划怎么写好.pdf
-
司法所个人月工作计划.pdf
-
庆祝妇女节主题活动工作计划范文.pdf
-
政教处月度工作计划.pdf
-
财务部工作计划.pdf
-
护士长手册季度工作计划安排.pdf
-
水利局工作人员年度工作总结范文.pdf
-
工信局年度工作总结汇报.pdf
-
幼儿园教师的工作总结.pdf
-
维修岗位个人工作总结.pdf
-
超市休闲食品工作总结怎样写.pdf
-
大班三月份保育员工作总结.docx
-
学校教学月工作计划 (2).docx
-
团支部工作计划与要点总结.docx
-
电子版工作总结怎么弄.docx
-
宿管工作总结1000.docx
-
刚步入工作的工作总结范文大全.docx
-
火锅店的策划方案.docx
-
乡镇卫生健康工作总结和计划.docx
-
市场部年度工作计划（7篇）.docx
-
近三年工作总结 个人.pdf
-
个人工作总结摘要怎么写 (2).docx
-
美容师的年度工作计划.docx
-
护士的新年工作计划范文大全.docx
-
这学期的工作计划.docx
-
每月工作计划范本大全.docx
-
服务员服务管理工作计划样本.docx
-
保育员老师工作总结.pdf
-
办公室月工作计划.docx
关于本文
实名认证
查看上传人更多文档
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
