基于Html的个性化新闻资讯网页设计.zip

# 网页与网站开发基础 # 1 主题内容构思 ## 1.1 内容安排 站点主题为个性化新闻资讯站点，站点需表现出美观的，实用的，简洁的新闻排版，且需对新闻进行分类，以达到高效的资讯浏览，站点要求获取海量资源，则需用分页技术进行分页显示。体现个性化则需要对用户进行建模，以保证每个用户使用时的专属感，因此建立了用户登陆注册，个人信息等页面，针对不同用户对页面的需求，页面设计有三套风格的模板，为更加凸显个性化还将增加论坛系统，用户可对自己发布的帖子进行增删改，还可对帖子进行收藏，可对每条新闻进行评论，并可对其进行点赞，每条新闻可显示浏览次数以体现热度，对用户进行推荐，并对用户的浏览行为进行记录，通过数据分析达到定制的推送，建立朋友圈，使得朋友之间可一对一分享新闻帖子等。 由于系统内容过于庞大可分步进行开发。 1、用户基本信息页面的开发 2、新闻、论坛、评论主题内容显示页面开发 3、更多个性化功能页面开发 当前进度第二阶段完成。 ## 1.2 模块划分 1、用户模块，包括用户的注册、登陆等界面。 2、新闻模块，包括了热点新闻页面，推荐新闻页面与推测用户喜爱新闻页面等。 3、论坛模块，包括了热点话题页面、推荐话题页面与推测用户喜爱话题页面等。 4、评论模块，包括了热点新闻对应热点评论页面、推荐评论页面与推测用户喜爱新闻的热门评语页面等 5、搜索模块，包括了搜索返回页面等。 6、公共模块，包括了新闻主体页面与新闻板块通用显示页面。 # 2 模块原型设计 ## 2.1 主页模块原型设计 | 图2-1主页面 – 展示![]() | | ------------------------------------------------------------ | | 图2-2主页面 ![]() – 文章列表 | | 图2-3主页面 ![]() – 页脚 | ## 2.2 关于模块原型设计 图2-4关于页面 ![]() ## 2.3 文章模块原型设计 | ![]() 图2-5文章页面 – 文章分类与排版 | | ------------------------------------------------------------ | | ![]() 图2-6文章页面 – 页脚 | | ![]() 图2-7文章页面 – 示例文章页面 | | ![]() 图2-8文章页面 – 示例文章页脚 | ## 2.4 登录模块原型设计 图2-9登录界面 ![]() – 后台登录主界面 ## 2.5 后台模块原型设计 ![]() 图2-10后台管理页面 – 仪表盘主页面 ![]()图2-11后台管理页面 – 文章管理 ![]() 图2-11后台管理页面 – 写文章及发布页面 ![]() 图2-12后台管理页面 – 全局设置页面 ![]() 图2-13后台管理页面 – 更改密码页面 # 3 页面实现 ## 3.1静态交互实现 **模块的交互效果代码，如表3-1、3-2所示。 表3-1 login.html JS部分代码 ``` <script type="text/javascript"> </script> ``` 表3-2 ***.html JS部分代码 ``` <script type="text/javascript"> </script> ``` js代码分别实现了登陆时以ajax方式向后台进行提交，注册时，对用户名、密码、手机号进行条件判断，并验证后台回传的验证码与输入的验证码是否相同，当所有条件都满足时，才可按下注册按钮。 其余模块js代码主要作用为控制切换皮肤，仅以index.html页面为例，如表3-3所示。 表3-3 index.html jQuery部分代码 ``` <script type="text/javascript"> </script> ``` 上述代码完成了对三套css代码进行切换。 ![]()**模块的静态交互效果，如图3-1所示。 图3-1 login.html交互效果 ## 3.2 样式实现 ![]() ## 3.3 页面实现 ### 3.3.1 主页模块的页面实现   ``` <script> var typed = new Typed('#subtitle', { strings: [ ' ', "我五颜六色,但不乱七八糟&nbsp;", ], cursorChar: "_", typeSpeed: 63, loop: false, }); typed.stop(); $(document).ready(function () { $(".typed-cursor").addClass("h2"); typed.start(); }); </script> <script src="js/typed.min.js"></script> ``` ``` height: 100vh; background: url('../imgs/bg.png') no-repeat center center; ``` 采用绝对布局 控制高度和颜色 内容滚动方式 ``` position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* 内容大小 */ width: 100vw; height: 100vh; /* 背景图像不随内容滚动 */ background-attachment: fixed; background-color: rgba(50, 50, 50, 0.2); ```  首页文章展示 – 标题 摘要内容 日期 分类 标签 使用Bootstrap的container 容器类 栅格布局进行对齐和间距设计 ``` <div class="container"> <div id="board"> <div class="container "> <div class="row"> <div class="col-12 m-auto"> <!-- singel one --> <div class="row mx-auto"> <div class="col-6 signleArticle"> <!-- TODO: 链接设置 --> <a href="./ajaxsetpin.html"> <p class="indexHeader h4 ">Ajax Step-In</p> </a> <div class="indexCaption"> <p class="indexCaption h6">Ajax Asynchronous JavaScript and XML</p> </div> <!-- FIXME: 间距设置 --> <div class="iconInfo"> <img src="./svgs/calendar-2-line.svg" alt="" class="icons">2019-11-19 <img src="./svgs/archive-line.svg" alt="" class="icons">Codes <img src="./svgs/price-tag-3-line.svg" alt="">Web Learning </div> </div> </div> </div> </div> </div> </div> </div> ``` css ``` # board { position: relative; margin-top: -3rem; background-color:#fff; border-radius: 0.5rem; /* 平滑角 */ z-index: 3; box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24) , 0 17px 50px 0 rgba(0, 0, 0, .19); /* 阴影 */ /* 间距控制 */ padding-top: 3rem; padding-bottom: 3rem; } ```  ``` <footer> <p class="text-center ">Made by Sonder Lau <img src="/svgs/heart-line.svg" class="icons"> Blog:<a href="http://9up.fun/" target="_blank">http://9up.fun</a></p> </footer> ``` ### 3.3.2 关于模块的页面实现  ``` <div class="aboutAvatar"> <img src="imgs/avatar.jpg" alt="" class="img-fluid avatar rounded-circle"> </div> ``` CSS ``` .aboutAvatar{ margin: -8rem auto 1rem; max-width: 10rem; } ```  ID 内容 居中