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

网站前端技术课程设计报告海贼王主题网站学院：计算机与控制工程学院班级： 姓名： 学号： 指引教师： 一、目与规定参照给出ppt内容进行填写，不可以照抄ppt内容，做一定语句上更改后使用。（200字）目：运用本学期所学HTML、CSS以及JavaScript知识，以海贼王这一作品为主题，设计并实现一种海贼王主题网站。网站以海贼王主题为中心进行简介、分享、交流等活动。规定：网站包括首页，论坛，简介，分享等五个某些内容。顾客可以选取注册成为会员，也可以仅以非会员身份有限制浏览网站。论坛需要实现发帖，查看以及回答功能。网页数不少于8页，构造类似算一页。网站整体风格统一，各网页构造完整。二、重要内容详细描述网站构造和各某些详细内容、网站中各网页构造及各某些详细内容。所有构造图需手绘。（5页，500字）功能构造图1. 主页网站主体框架由头部，section，页脚和回到顶部连接构成。头部包括导航栏、logo两某些，导航栏展示网站重要页面导航和登录功能，若顾客已登录，则显示顾客名。页面框架如下。Logo导航栏Section和iframe框架回到顶部头部内容页脚版权2. 首页首页重要涉及海贼王简介和最新动态两个框架。简介某些包括滚动图片显示和简介内容两某些。最新动态以表形式展示。页面框架如下。简介滚动图片标题标题最新动态3. 故事简介故事简介页面包括标题和内容主体两某些。内容主体显示创作背景和故事简介两某些。主体内容两某些都包括标题和重要内容两个某些。页面框架如下。标题故事简介标题创作背景story4. 人物简介人物简介有两个相似界面。每个人物简介页面包括标题，人物信息和页码链接三某些。人物信息包括一种人物信息表格，表格分为两列，一列展示人物简介，另一列展示任务图片。页面框架如下。页码链接 人物信息表格人物简介 人物图片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内联框架中。代码如下。首页海贼吧登录某些，若顾客已登录，则显示顾客名；若未登录，则显示“登录|注册”。实当代码如下：?phpsession_start();if(!empty($_SESSIONuserid)/你已经赋值ID echo .$_SESSIONusername. | 注销;/登陆后解决else echo 登录;/未登陆解决 ?点击回到顶部图片链接可使页面直接调回页面顶部。代码如下：section某些居中显示，宽度1050px，上下外边距10px。section包括一种iframe内联框架，用于显示导航栏点击链接内容，初始状态显示首页first.php内容。内联框架大小随着内联框架中内容变化。section块css代码：#sectionbackground-color：#ffffff;width：1050px;margin：10px auto;iframe内联框架代码：iframe内联框架大小设立代码：js1.js代码：function IFrameResize() var obj = parent.document.getElementById(iframe)； /获得父页面IFrame对象 obj.height = this.document.body.scrollHeight+30； /调节父页面中IFrame高度为此页面高度 在每个要显示页面body中加载js1.js函数：页脚显示版权信息。2. 首页首页重要涉及海贼王简介和最新动态两个框架。简介某些包括滚动图片显示和简介内容两某些。滚动图片某些每三秒换一张图片，循环播放，点击下面序号，显示相应图片。简洁滚动图片代码如下：first.php某些代码：14js2.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;/变化文字样式elsedocument.getElementById(img+i).style.display=none;/隐藏其他图片document.getElementsByTagName(a)i-1.className=a1;/变化文字样式if(nowimg=maximg)/设立下一种显示图片nowimg=1;elsenowimg+;timer=setTimeout(show(),3000);/设立定期器，显示下一张图片最新动态以表形式展示，展示数据库中最新5条帖子代码如下。 0) / 输出数据 while($row=mysqli_fetch_assoc($res) echo .$rowtitle.$rowid.$rowdate.; else echo 0 成果;$conn-close(); ?3. 故事简介故事简介页面包括标题nav框架和内容主体框架story两某些。内容主体显示创作背景和故事简介两某些。主体内容两某些都包括标题标记内容和重要内容标记内容标记内容两个某些。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标记内容如下：4. 人物简介人物简介有两个相似界面。每个人物简介页面包括标题，人物信息和页码链接三某些。人物信息包括一种人物信息表格，表格分为两列，一列展示人物简介，另一列展示任务图片。表格标记属性代码如下：简介图片5. 图片分享图片分享包括标题和图片两某些。图片由九个图片3*3排列构成。图片展示css代码如下。#picturemargin：20px;padding：0;width：250px;height：250px;text-align：center;float：left;6. 海贼吧海贼吧包括所有帖子、我帖子和发帖三个某些。初始状态下显示所有帖子页面。7. 所有帖子所有帖子页面包括导航和内容两某些。内容某些使用php输出表格，展示所有从数据库中查到帖子，帖子顺序以时间先后排序。php代码如下： 0) / 输出数据 while($row=mysqli_fetch_assoc($res) echo .$rowtitle.$rowid.$rowdate.; else echo 0 成果;$conn-close(); ? 8. 我帖子我帖子页面包括导航栏和内容两某些。内容某些以表格形式展示从数据库中查到当前顾客发过帖子。若顾客未登录，则页面跳转至bbs.php页面。跳转代码某些如下：?phpsession_start();if(!empty($_SESSIONuserid)/你已经赋值IDelseheader(Refresh:1,Url=bbs.php);/未登陆解决 echo alert(请登录);?9. 发贴发帖页面包括导航栏和内容两某些。内容包括一种表单。若顾客未登录，则页面跳转至bbs.php页面。该页面顾客填写表单form，填写完毕后系统将表单提交给post.php，由post.php解决上传至数据库。其中主题少于20字，帖子内容少于200字，主题和内容不能为空。某些代码如下。发帖 主题： 内容： php/post.php代码如下：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(发布失败); 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代码：form method=post action= 回答 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通过获取$_SESSIONuserid查询输出当前与顾客信息。五、成果与分析最后运营成果截图与阐明。1. 主页顾客进入主页，主页中内联框架展示首页内容。2. 故事简介点击顶部导航栏故事简介，内联框架展示故事简介页面。3. 人物简介点击顶部导航栏故事简介，内联框架展示故事人物简介页面。4. 图片分享点击图片分享，内联框架展示图片分享界面。5. 海贼吧点击顶部导航栏故事简介，内联框架展示故事海贼吧。海贼吧展示所有帖子页面。6. 我帖子顾客登录状况下点击我帖子，页面展示冲数据库中读取到该顾客发帖子。7. 发贴顾客登录状况下点击发帖，内联框架展示发帖页面，顾客填写帖子内容提交。8. 登录点击登录进入登录页面，填写账号密码登录。9. 注册点击注册进入注册页面，填写顾客信息。10. 个人信息顾客登录状况下点击顾客名，页面展示顾客信息表格。附录