基于HTML和CSS实现的TC读书网页面设计

到山东找蓝翔

发布日期: 2021-07-22 10:14:16 浏览量: 119
评分:
star star star star star star star star star star_border
*转载请注明来自write-bug.com

一、项目总体设计

1.1 需求分析

1.1.1 阐述

这个网页设计我是以“TC 读书网”为主题展开,选择这个题目,是因为自己本身就很喜欢看书,喜欢看各种各样的书籍。像很多读书爱好者一样,喜欢在安静的地方静静的看书,比如自己的房间里、图书馆、书店。喜欢把自己生活中的点点滴滴都装扮带有书香的气息。自己在家里的房间里,就装有书架,并摆满了各类书。每次回家我就很喜欢待在房间里,坐在书桌前看书。在这种环境下,能让自己的身心愉悦,心情美美的。自己也养成了坚持看书的习惯,在学校一旦有时间就会去图书馆或自习室看书。在书中不但能学习到很多东西,而且还会让一个人的精神面貌有所不同。在此之前我也浏览了很多读书网页,觉得很有意思。现在学了网页设计,当然也要根据自己的想法来设计自己的网页,同时想通过自己设计的网页,来满足更多读书爱好者的需求,让更多的爱好者在我设计的网页里找到更有意思的东西。

1.1.2 功能

此网页能够满足喜欢看书的书友,随时随地的打开网页就可以阅读各种各样的书籍,无论是国内还是国外的书籍都可以看,网页的设计还进行了书籍的分类,有在线阅读的书籍、近段时间书籍阅读量的排行榜、本网页出版的图书等等。网页的设计根据自己个人爱好来设计,比较简易,颜色不是浓艳,这样正是符合了读书的一个环境。本网页还设计了登录页面,可以让更多的读书爱好者加入进来。读书爱好者能及时、准确、完整阅读到自己喜欢的书籍,管理员可以在后台对书籍的更新点信息进行准确校对、修改和删除。

1.1.3 技术

  • HTML 语言

  • CSS 样式表

1.2 网站结构分析

该网站主要由首页、栏目页、内容页组成,每个页面都由头部(logo、TC 读书网)、导航栏、主体部分及尾部版权栏构成。

导航栏

首页、国学/古籍、出版图书、电子书、网络小说、排行榜、读书导航七个目录组成。

主体部分

图片展示栏、文字说明

1.3 网站风格分析

网站主要以简约风格为主,简洁的表现形式来满足读书爱好者对此网页的了解。

  • 总体印象:以展示本网页优点等,主题突出,内容精干,形式简洁

  • 版式布局:栏目集中,分栏目检索明确,导航标志清晰

  • 色彩运用:总体呈浅灰色简洁风格

  • 图片运用:配合文字,以极简的图片效果吸引用户

  • 语言:中文

  • 结构:浏览路线方便快捷、清晰明确

1.4 网站结构图

二、项目详细设计

2.1 登录页面设计

登陆界面主要由顶部的滚动文字、用户输入账号登录、用户注册、忘记密码组成。在登录框中加入了超链接,只要点击登录就可以进入首页。

所遇难点:通过输入账号登录(未实现)

2.2 主页页面设计

整个主页布局主要是用了盒子嵌套和排版,内容有寻找框,右上角有注册/登录键,导航栏,图书分类。导航栏通过加入超链接点击进入对应的页面。在页面最底部还加入了网页的相关信息。

所遇难点:未实现中间图片为滚动的。

2.3 在线读书页面设计

在线读书页面的设计很合理,设计了图书的分类、实现不同兴趣爱好的读书者的需求,图书也设计了读书推荐,读书推荐是根据广大读书者的评价做出的推荐,最大的板块是最新发行的图书,每本书都用一句话做出简介。整个页面的设计也非常简洁美观。

三、项目总结

在设计过程中也出现了很多的问题,如忘记使用浮动导致盒子位置错乱、class 和 id 的使用有什么区别,还有文字滚动的属性,但通过看书,上网查询,请教同学等方式,不断地学习、思考、实践、提高,最终顺利的完成了作品。但是还是有一些自己想要设计进去的东西没有办法加进去,因为技术还不够,自己时间的安排不合理没有学习到那方面的知识。例如:使用 JavaScript 脚本技术让图片滚动,输入正确的账号才可以登录。

上传的附件 cloud_download 《网页设计与开发项目设计》项目设计文档.docx ( 2.03mb, 1次下载 ) cloud_download TC读书网.rar ( 4.77mb, 1次下载 )
error_outline 下载需要11点积分
eject