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

╰+攻爆jí腚メ 2024-04-07 15:36 88阅读 0赞

[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86805850  
[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86805850

## 网页与网站开发基础 ##

## 1 主题内容构思 ##

### 1.1 内容安排 ###

站点主题为个性化新闻资讯站点，站点需表现出美观的，实用的，简洁的新闻排版，且需对新闻进行分类，以达到高效的资讯浏览，站点要求获取海量资源，则需用分页技术进行分页显示。体现个性化则需要对用户进行建模，以保证每个用户使用时的专属感，因此建立了用户登陆注册，个人信息等页面，针对不同用户对页面的需求，页面设计有三套风格的模板，为更加凸显个性化还将增加论坛系统，用户可对自己发布的帖子进行增删改，还可对帖子进行收藏，可对每条新闻进行评论，并可对其进行点赞，每条新闻可显示浏览次数以体现热度，对用户进行推荐，并对用户的浏览行为进行记录，通过数据分析达到定制的推送，建立朋友圈，使得朋友之间可一对一分享新闻帖子等。

由于系统内容过于庞大可分步进行开发。

1、用户基本信息页面的开发

2、新闻、论坛、评论主题内容显示页面开发

3、更多个性化功能页面开发

当前进度第二阶段完成。

### 1.2 模块划分 ###

1、用户模块，包括用户的注册、登陆等界面。

2、新闻模块，包括了热点新闻页面，推荐新闻页面与推测用户喜爱新闻页面等。

3、论坛模块，包括了热点话题页面、推荐话题页面与推测用户喜爱话题页面等。

4、评论模块，包括了热点新闻对应热点评论页面、推荐评论页面与推测用户喜爱新闻的热门评语页面等

5、搜索模块，包括了搜索返回页面等。

6、公共模块，包括了新闻主体页面与新闻板块通用显示页面。

## 2 模块原型设计 ##

### 2.1 主页模块原型设计 ###

### 2.2 关于模块原型设计 ###

图2-4关于页面 ![Image 1][]

### 2.3 文章模块原型设计 ###

<table> 
 <thead> 
  <tr> 
   <th><img alt=""> 图2-5文章页面 – 文章分类与排版</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><img alt=""> 图2-6文章页面 – 页脚</td> 
  </tr> 
  <tr> 
   <td><img alt=""> 图2-7文章页面 – 示例文章页面</td> 
  </tr> 
  <tr> 
   <td><img alt=""> 图2-8文章页面 – 示例文章页脚</td> 
  </tr> 
 </tbody> 
</table>

### 2.4 登录模块原型设计 ###

图2-9登录界面 ![Image 1][] – 后台登录主界面

### 2.5 后台模块原型设计 ###

![Image 1][]

图2-10后台管理页面 – 仪表盘主页面

![Image 1][]图2-11后台管理页面 – 文章管理

![Image 1][]

图2-11后台管理页面 – 写文章及发布页面

![Image 1][]

图2-12后台管理页面 – 全局设置页面

![Image 1][]

图2-13后台管理页面 – 更改密码页面

## 3 页面实现 ##

### 3.1静态交互实现 ###

\*\*模块的交互效果代码，如表3-1、3-2所示。

表3-1 login.html JS部分代码

表3-2 \*\*\*.html JS部分代码

js代码分别实现了登陆时以ajax方式向后台进行提交，注册时，对用户名、密码、手机号进行条件判断，并验证后台回传的验证码与输入的验证码是否相同，当所有条件都满足时，才可按下注册按钮。

其余模块js代码主要作用为控制切换皮肤，仅以index.html页面为例，如表3-3所示。

表3-3 index.html jQuery部分代码

上述代码完成了对三套css代码进行切换。

![Image 1][]\*\*模块的静态交互效果，如图3-1所示。

图3-1 login.html交互效果

### 3.2 样式实现 ###

![Image 1][]

### 3.3 页面实现 ###

#### 3.3.1 主页模块的页面实现 ####

![在这里插入图片描述][6d55c3706a544023b8ef44636af966aa.png]

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);

![在这里插入图片描述][406d78993a464516827fc1bf55618ef6.png]

首页文章展示 – 标题 摘要内容 日期 分类 标签

使用Bootstrap的container 容器类 栅格布局进行对齐和间距设计

<div class="container">
            <div id="board">
                <div class="container ">
                    <div class="row">
                        <div class="col-12 m-auto">
                            
                            <div class="row mx-auto">
                                <div class="col-6 signleArticle">
                                    
                                    <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>
                                    
                                    <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;
    }

![在这里插入图片描述][4d2d63beffe7449c99f985cbcfc1d872.png]

<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 关于模块的页面实现 ####

![在这里插入图片描述][067cbeb284444408a406924344e61e3a.png]

CSS

.aboutAvatar{
        margin: -8rem auto 1rem;
        max-width: 10rem;
    }

![在这里插入图片描述][5d7bd1fb4af342698802c5f3b442ab5a.png]

ID 内容

居中

<div class="container aboutContent">
                    <div class="row">
                       <div class="col-10 m-auto">
                           <div class="text-center">
                               <p class="h4">Ge15emium</p>
                               <p>Perfectionist / CTF Noob / Front-End / Resume Driven Developer</p>
                           </div>
                       </div>
                    </div>
                </div>

#### 3.3.3 文章模块的页面实现 ####

![Image 1][] 文章列表显示 与主页面的文章展示基本相同 控制好间距 字重 对齐 统计 年份分类 文章标题 + 日期

#### 3.3.4 登录模块的页面实现 ####

![在这里插入图片描述][35d695cc702f48ffbcccff3f7a8a91bb.png]

账号输入页

![在这里插入图片描述][ac704d8255be4f0aba4662b2bac1986d.png]

密码输入框

#### 3.3.5 后台模块的页面实现 ####

![在这里插入图片描述][72dd7e4bb5e14b5ba01fa69985353c7a.png]

<div class="mdui-appbar mdui-appbar-fixed mdui-color-white">
        <div class="mdui-toolbar mdui-color-theme">
          <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
            mdui-drawer="{target: '#main-drawer', swipe: true}"
            ><i class="mdui-icon material-icons">menu</i></span>
          <a href="./panelIndex.html" class="mdui-typo-headline mdui-hidden-xs">控制台</a>
          <a href="../index.html" class="mdui-typo-title">返回首页</a>
    
          <div class="mdui-toolbar-spacer"></div>
    
          <p class="h4">Ge15emium</p>
          <img src="../imgs/avatar.jpg" alt="" class="img-fluid avatar rounded-circle">
        </div>
    </div>

![在这里插入图片描述][1745c582040346ae895e6ad07269d62c.png]

卡片设计 展示数据与运行情况

![在这里插入图片描述][a130687d29e2490eae480d1c96a66fa1.png]

![在这里插入图片描述][d6f33a124cd1440f882a4dbbc1635193.png]

<table class="table">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col-2">标题</th>
                            <th scope="col-2">状态</th>
                            <th scope="col-2">访问量</th>
                            <th scope="col-4">发布时间</th>
                            <th scope="col-2">编辑</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row"><a href="" class="text-info">Ajax Step-In</a></th>
                            <td><i class="mdui-icon material-icons statusIcon mdui-text-color-green-600">fiber_manual_record</i>已发布</td>
                            <td><h5><span class="badge badge-info badge-pill">40</span></h5></td>
                            <td>2019-11-19 16:45:00</td>
                            <td><a href="" class="text-info">删除</a></td>
                        </tr>
                        <tr>
                            <th scope="row"><a href="" class="text-info">Ajax Step-In</a></th>
                            <td><i class="mdui-icon material-icons statusIcon mdui-text-color-green-600">fiber_manual_record</i>已发布</td>
                            <td><h5><span class="badge badge-info badge-pill">40</span></h5></td>
                            <td>2019-11-19 16:45:00</td>
                            <td><a href="" class="text-info">删除</a></td>
                        </tr>
                        <tr>
                            <th scope="row"><a href="" class="text-info">Ajax Step-In</a></th>
                            <td><i class="mdui-icon material-icons statusIcon mdui-text-color-green-600">fiber_manual_record</i>已发布</td>
                            <td><h5><span class="badge badge-info badge-pill">40</span></h5></td>
                            <td>2019-11-19 16:45:00</td>
                            <td><a href="" class="text-info">删除</a></td>
                        </tr>
                        <tr>
                            <th scope="row"><a href="" class="text-info">Ajax Step-In</a></th>
                            <td><i class="mdui-icon material-icons statusIcon mdui-text-color-green-600">fiber_manual_record</i>已发布</td>
                            <td><h5><span class="badge badge-info badge-pill">40</span></h5></td>
                            <td>2019-11-19 16:45:00</td>
                            <td><a href="" class="text-info">删除</a></td>
                        </tr>
                        <tr>
                            <th scope="row"><a href="" class="text-info">Ajax Step-In</a></th>
                            <td><i class="mdui-icon material-icons statusIcon mdui-text-color-red-500">fiber_manual_record</i>发布失败</td>
                            <td><h5><span class="badge badge-info badge-pill">40</span></h5></td>
                            <td>2019-11-19 16:45:00</td>
                            <td><a href="" class="text-info">删除</a></td>
                        </tr>
                    </tbody>
                </table>

![在这里插入图片描述][0319430f45bb4880b0181a33cfaba85d.png]

写文章模块

标题栏

内容栏可向下自由拉伸长度 自适应长度

![在这里插入图片描述][0385a3319b254c3ab54514667cc44a7f.png]

系统设置页面

用户名 邮箱 个人描述的更改

与文章编写的代码基本一致

![在这里插入图片描述][16edd5865b1c4b8fb9a6ba7bc1edf096.png]

更改密码部分

为了提高安全性 需要输入原密码

并重复输入新密码

与上述代码基本一致 修改部分内容即可

[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86805850  
[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86805850

[Link 1]: https://download.csdn.net/download/sheziqiong/86805850
[Image 1]: 
[6d55c3706a544023b8ef44636af966aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/24481c5c1498415592b623407515d51f.png
[406d78993a464516827fc1bf55618ef6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e49c7db2b62b489dbae46337e7b49862.png
[4d2d63beffe7449c99f985cbcfc1d872.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2b7305df27214f5f905cbcb7608bc023.png
[067cbeb284444408a406924344e61e3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/13bf32af1c7d4f208cab806086bd1ac8.png
[5d7bd1fb4af342698802c5f3b442ab5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2a67ccdad1c04d4f953c4f01bd38c208.png
[35d695cc702f48ffbcccff3f7a8a91bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/64c62e6a4fe5487d9ae7572dce62a32a.png
[ac704d8255be4f0aba4662b2bac1986d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e1c07dd900f341d08c60be5423c60b2d.png
[72dd7e4bb5e14b5ba01fa69985353c7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b7643b222c21473aa769d6fa497741ef.png
[1745c582040346ae895e6ad07269d62c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b07c4c310aff4d0781081cf708628e3f.png
[a130687d29e2490eae480d1c96a66fa1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c515528867a1470f97cf1855d7509e1e.png
[d6f33a124cd1440f882a4dbbc1635193.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/28ee8f5596404dc693928c8525eed951.png
[0319430f45bb4880b0181a33cfaba85d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/684753a47b6144dba3618ff4631b4851.png
[0385a3319b254c3ab54514667cc44a7f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6e0cec5073b349fa93e3c7f787a03ebc.png
[16edd5865b1c4b8fb9a6ba7bc1edf096.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ea51f99bce46498190bdeab091f37326.png