哈利波特信息站web网页课设报告（html+css）
web哈利波特课程设计资源下载
一、课程设计任务
针对软件工程各专业岗位技能要求，进行Web程序设计项目工作，培养学生计算机操作的能力和用计算机设计网站的基本技能，使学生具备分析问题、用编程思维解决问题的能力，达到计算机初级网页设计员的水平，使学生养成既善于独立思考，又乐于与人沟通、具备团队合作意识的职业素质。
二、课程设计目的
课程设计总的目的在于加深对Web程序设计的基本知识的理解，Web程序设计技能综合运用和提高，通过真实工作任务，是学生能设计出有一定水平的网页并解决培养解决实际问题的能力，掌握实际Web程序设计开发流程和开发方法。
目的∶运用本学期所学的 HTML、CSS以及JavaScript 知识，以哈利波特这一作品为主题，设计并实现一个哈利波特主题。以哈利波特主题为中心进行介绍、分享、交流等活动。
三、网页规划
3.1页面数：一共11个页面：
（1）首页[菜单(下拉)，轮播图片，文章列表，友情链接，时间显示]
（2）文章列表页：文章的列表，单击列表项能进入具体的内容。
（3）文章内容页[长内容，页内链接]
（4）个人信息设置页[表单验证]（5）
（5）个人简历介绍页（6）
（6）内容展示列表页
（7）登录页：要有前端验证，注意总体风格一致，可参考下面的登录页。
（8）注册页：要有前端验证，注意总体风格一致。
（9）表格展示页，制作出视觉效果良好的表格。
（10）个人常用链接展示页。
（11）进入页
3.2网站风格定位
网站主题：哈利波特
网站的类型：信息介绍网站
所用的技术：html css js
网站的色彩：魔法奇幻风 色彩偏灰黑调深色调居多，给人神秘感。网站的色彩是浏览者整体的视觉感官，如果网站的色彩具有一致性，会使网站看起来美观，使浏览者不容易对内容混淆，增加了浏览的简洁与方便。从而更能衬托网站的主题，若色彩能与主题合理搭配，将会增加网站的易读性。哈利波特网站选定的主题色是黑灰色，能给吸引更多用户并给用户一种神秘感，网站中除了采用黑灰色系外，还和淡蓝色、白色搭配，使网站产生一种舒适的气氛，使人可以长时间驻留其间,眼睛也不会觉得疲劳，更好的获取网站的信息。
3.3主要任务
1.站点规划，搜集资料。确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。
2.进行主页设计。构思主页布局，进行主页标题图片的设计(原创最好)，进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。
3.网页设计。除主页以外的网页设计，首先设计网页模版，一部分网页由模版生成，一部分为单独设计（依据实际需要确定哪些网页由模版生成，确定哪些网页单独设计)。包括版面设计和图形设计、内容录入等。
4综合优化。链接正确、得当，动态效果好（时间轴动画、行为、代码的嵌入等)
5.网站测试并递交。在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画是否丢失等。
四、网站基本介绍
1.进入页：风格魔幻 加入了哈利波特标志性的主题曲 引人入胜 风格更加明显。网页主要是插入图片 加入了音频，开始按钮链接到主页。
结构图：
2.主页：加入了轮播图 下拉列表。主体框架由头部, 内容,页脚组成。头部包含导航栏、logo。导航栏展示主要页面导航和登录注册功能。
结构图如下：
3.登录页：有简单的前段验证，背景图可能稍有花哨，但是切合主题魔幻魔法，这是一张霍格沃兹（魔法学校）的全外景，主人公们游船进入。
结构图：
4.注册页：与登录页风格相似，风格统一原则。有前端验证。
结构图：
5.内容展示列表页：展示了哈利波特系列的八部电影，介绍了相关评分热度等。
6.个人信息设置页：表单验证。做个是一个入学信息的表单，为了切合主题。
7.个人简历页：外观相对简单了许多，没有找到好的模板参照。
8.个人常用链接页：模仿的是最常见的链接页，大背景加a标签。
9.文章内容页【长内容，锚点链接】:风格类似百度百科，外观相对简单。
10.文章列表页：文章的列表，单击列表能进入具体内容。
11.表格展示页：
设计完成后，我作为浏览者，对页面进行了浏览，发现内容百科居多，表现力不足，相关媒体文件欠缺，文字过多，浏览者容易产生疲倦感，总体风格边简单。还有很大的提升空间。
五、心得体会
这次课设的主题老师让我们自由选择，我选取的是哈利波特，因为自己对哈利波特这个专题特别喜欢，电影相关的也看了很多遍 ，就想着选取一个自己比较感兴趣的主题会做起来比较有意思。在叶老师布置任务之后，我就开始想着手开始一点一点的做起来，因为要求有十个页面，之前也只是做一些老师在慕楚上发的小模块的练习，没有做过一个相对完整的页面，所以要花一些时间。这次课设最大的心得就是 多多练习真的可以从不熟练到熟练。一开始，虽然在课堂上老师都有细心得将一些模块敲给我们看教我们如何使用，还有页面的排版问题和如何摆盒子等等，但是因为自己写的太少，开始做起来速度很慢，很不熟悉，还会卡壳。第一个index主页，虽然内容不多但是还真的花了蛮久，加上找素材找参照之类的，前前后后搭起来花了三四天。第一个做成之后，后面的搭起来就顺利很多了，因为真的熟练了好多！后面的网页主要是花时间在找素材资料和构思模板之类的，动手能力强了很多。特别深切的体会到了 熟能生巧的含义。然后还有别的心得体会就是，对于初学者来说大多是去模仿别人的网站，模仿外观也好，看看源代码也好，然后慢慢的才开始做自己的东西。对于这次课设遇到的一些问题，一就是一开始的不熟练，但是后面好了很多。然后就是因为已经定下来想做哈利波特这个主题了，但是很少关于哈利波特的一整个网站，搜索哈利波特大多数都是一些相关资讯电影，百科等等，所以在外观上就比较难敲定，没有很好的仿照物，只能自己去搜集资料图片然后构思怎么摆，所以做的有几个页面就比较单调了，实在是想不出外观，包括内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等等相对来说可能简单了些。上查找数据，找各种资料，一切并不像想象的那样简单，但最后整体效果出来后还是特别有成就感。要想做好一个网站，不仅仅是课上的认真，还有课下的练习和自己课外。总之，这次收获很多。
哈利波特信息站web网页课设报告（html+css）相关推荐
- 图书管理系统课设报告（含用例图、通信图、顺序图、状态图、活动图）
这份报告帮助了很多人完成学业,你值得拥有 下载链接: 图书管理系统课程设计报告.docx_图书管理系统课程设计报告,图书管理系统课设报告-互联网文档类资源-CSDN下载 面向对象的系统分析与设计 ...
- c语言学生成绩查询课设报告,C语言课设报告(学生考试成绩查询程序)【荐】.doc...
C语言课设报告(学生考试成绩查询程序)[荐].doc 学生考试成绩查询程序 学号:******** 姓名:***** 完成日期:****年月 通过键盘输入学生的考试信息,包括:学号.姓名.课程名称.学 ...
- 【014】基于Vue.js的移动端购物商城网站(含源码、课设报告)
文章目录 一.项目介绍 二.代码及报告获取 一.项目介绍 基于Vue.js的移动端购物商城网站(含源码.课设报告),代码获取放在文末了,码字不易,感谢点赞~ 一.系统概述 本部分主要是对项目进行简要描 ...
- 数据库课程设计——某煤气公司送气管理系统（附课设报告）
下面都是我在CSDN发的文章,这算广告???审核你有毛病? 数据库课程设计--某工厂的物料管理系统(附Java源码与课程设计报告) 数据库课程设计--某商店进销存管理系统(附Java源码与课程设计报告 ...
- 【013】基于Vue的酒店客房管理系统（含管理员、普通用户两种身份（附源码数据库、课设报告）
这里写目录标题 一.系统详细介绍 二.系统部分设计思路 三.项目获取 一.系统详细介绍 前言: 这次带来的是基于Nodejs+Vue+Mysql的酒店客房管理系统,含非常非常详细的课设报告,觉得物超所 ...
- 学生信息管理系统c语言课设,学生信息管理系统C语言课设.doc
学生信息管理系统C语言课设 目录 一.需求分析2 二.概要设计2 三.详细设计4 四.调试分析9 五.用户手册9 六.测试数据9 七.附录10 一.需求分析学生学籍管理系统用数据文件存放学生的学籍,可 ...
- 嵌入式计算机课程设计,嵌入式系统设计课设报告.doc
嵌入式系统设计课设报告.doc 福州大学嵌入式系统设计课设报告书题 目 基于28027的虚拟系统 姓 名 学 号 学 院 电气工程与自动化学院 专 业 电气工程与自动化 年 级 起讫日期 指导教师 目 ...
- 计算机组成模型计算机课设总结,计算机组成原理课设报告.doc
计算机组成原理课设报告 计算机组成原理课程设计报告 班级:物联网 1301 班 姓名: 石杰元 学号: 完成时间: 2016/1/10 一.课程设计目的 1．在实验机上设计实现机器指令及对应的微指令( ...
- Mysql数据库笔记分享系列--下（内附免费课设报告）
索引和视图 索引 索引类别 普通索引 唯一性索引 主键索引 全文索引 空间索引 创建索引 1．ALTER TABLE创建索引 #ALTER TABLE用来创建普通索引.UNIQUE索引或PRIMARY ...
- verilog 自动售货机状态机实现_基于Verilog语言的简单自动售货机-数电课设报告（最终版）最新版...
<基于Verilog语言的简单自动售货机-数电课设报告.docx>由会员分享,可免费在线阅读全文,更多与<基于Verilog语言的简单自动售货机-数电课设报告(最终版)>相关文 ...
最新文章
- hdu1518 bjfuoj1042 zoj1909 poj2362 经典的搜索加剪枝
- vscode css智能补全_强大的 VS Code入门
- 系统分析与仿真1-单输入单输出质量块+阻尼器系统
- 计算机辅助设计课程描述,计算机辅助设计课程教学的现状与方法
- VBoxManage命令详解
- Pyotrch —— 优化器Optimizer（一）
- 华为云AI斩获2019数博会“黑科技”等四大奖项
- SQL Server元数据损坏(metadata corruption)修复
- 快捷支付与网银支付的对比
- 【SQL 社区】一些有用的SQL社区！（持续更新~~）
- 2022年最完整的html网页跳转代码大全
- dosbox进行debug调试教程
- 用java编写英寸到厘米的转换_像素、英寸、厘米的换算 - flyinglife - JavaEye技术网站...
- 有一个包含 10 亿个搜索关键词的日志文件，如何快速获取到 Top 10 最热门的搜索关键词呢？
- 响应服务器530 5.7.0,SMTPSenderRefused（530，需要b'5.7.0身份验证）
- 常与同好争高下，不与傻瓜论短长
- 小程序支持主体迁移了
- 稀疏特征（稀疏矩阵）
- Java奠基】Java经典案例讲解
- 如何绘制motif结构图