网站前端技术上机
PAGE 1
网站前端技术课程设计报告
海贼王主题网站
学院:计算机与控制工程学院
班级:
姓名:
学号:
指导教师:
一、目的与要求
参考给出ppt内容进行填写,不可以照抄ppt内容,做一定的语句上的更改后使用。(200字)
目的:运用本学期所学的HTML、CSS以及JavaScript知识,以海贼王这一作品为主题,设计并实现一个海贼王主题网站。网站以海贼王主题为中心进行介绍、分享、交流等活动。
要求:网站包含首页,论坛,介绍,分享等五个部分内容。用户可以选择注册成为会员,也可以仅以非会员身份有限制的浏览网站。论坛需要实现发帖,查看以及回复功能。网页数不少于8页,结构类似的算一页。网站整体风格统一,各网页结构完整。
二、主要内容
详细描述网站结构和各部分的详细内容、网站中各网页结构及各部分详细内容。所有结构图需手绘。(5页,500字)
功能结构图
主页
网站主体框架由头部,section,页脚和回到顶部连接组成。头部包含导航栏、logo两部分,导航栏展示网站主要页面导航和登录功能,若用户已登录,则显示用户名。页面框架如下。
Logo导航栏Section和iframe
Logo
导航栏
Section和iframe框架
回到顶部
头部内容
页脚版权
首页
首页主要包括海贼王简介和最新动态两个框架。简介部分包含滚动图片显示和简介内容两部分。最新动态以表的形式展示。页面框架如下。
简介滚动图片标题标题最新动态
简介
滚动图片
标题
标题
最新动态
故事介绍
故事介绍页面包含标题和内容主体两部分。内容主体显示创作背景和故事介绍两部分。主体内容的两部分都包含标题和主要内容两个部分。页面框架如下。
标题故事介绍标题创作背景story
标题
故事介绍
标题
创作背景
story
人物介绍
人物介绍有两个相同界面。每个人物介绍页面包含标题,人物信息和页码链接三部分。人物信息包含一个人物信息表格,表格分为两列,一列展示人物简介,另一列展示任务图片。页面框架如下。
页码链接 人物信息表格人物简介
页码链接
人物信息表格
人物简介 人物图片
图片分享
图片分享包含标题和图片两部分。图片由九个图片3*3排列组成。页面框架如下。
图片图片图片图片图片图片图片图片图片
图片
图片
图片
图片
图片
图片
图片
图片
图片
海贼吧
海贼吧包含所有帖子、我的帖子和发帖三个部分。初始状态下显示所有帖子页面。
所有帖子
所有帖子页面包含导航和内容两部分。内容部分以表格形式展示所有帖子。页面框架如下。
内容导航
内容
导航
我的帖子
我的帖子页面包含导航栏和内容两部分。内容部分以表格形式展示当前用户发过的帖子。页面框架同所有帖子部分。
发贴
发帖页面包含导航栏和内容两部分。内容包含一个表单。页面框架同所有帖子部分。
登录
登录页面包含标题和内容两部分。内容包含一个表单。页面框架如下。
标题Form
标题
Form表单
注册
注册页面包含标题和内容两部分。内容包含一个表单。页面框架与登录页面相同。
个人信息
个人信息页面由一个表格组成,表格分两列,一列展示信息名称,另一列展示用户信息。框架如下。
表格标题信息名称 用户信息
表格标题
信息名称 用户信息
三、设备与环境
运行环境、编程语言等信息说明。(100字)
运行环境:Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari),phpStudy+mysql服务器,windows系统。
编程语言:前端使用html、css和JavaScript语言,后台使用php+mysql语言。
四、实现过程
针对网站每一页面中你认为比较有亮点的、重要的,可以体现你工作的部分进行实现过程的详细讲解,包括相对应的主要代码(仅展示这一部分较为重要的代码,剩余代码在附录中展示)。
这一部分是展示个人工作的最主要部分,请务必认真完成,保证数量(5页)和质量。注意:两人一组完成的情况,分工要明确,这一部分仅对自己所承担部分进行详细描述,因此,同组人员所提交的报告在这一部分是不可以雷同的。
主页
网站主体框架由头部,section,页脚和回到顶部连接组成。
头部包含导航栏、logo两部分,导航栏展示网站主要页面导航和登录功能。
页面导航的链接内容显示在section中的iframe内联框架中。代码如下。