资源下载地址：https://download.csdn/download/sheziqiong/86805850
资源下载地址：https://download.csdn/download/sheziqiong/86805850
网页与网站开发基础
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: [
' ',
"我五颜六色,但不乱七八糟 ",
],
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 内容
居中
<!-- About Content -->
<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 文章模块的页面实现
文章列表显示 与主页面的文章展示基本相同 控制好间距 字重 对齐 统计 年份分类 文章标题 + 日期
3.3.4 登录模块的页面实现
账号输入页
<div class="input-group-prepend col-1">
<span class="input-group-text">
<img src="../svgs/user-line.svg" alt="" class="inputIcons">
</span>
</div>
<div class="col-11">
<input type="text" class="form-control" placeholder="User name">
</div>
密码输入框
<div class="input-group-prepend col-1">
<span class="input-group-text">
<img src="../svgs/lock-password-line.svg" alt="" class="inputIcons">
</span>
</div>
<div class="col-11">
<input type="password" class="form-control" placeholder="Password">
</div>
3.3.5 后台模块的页面实现
<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>
卡片设计 展示数据与运行情况
<div class="panelContent">
<div class="container-fluid">
<div class="row justify-content-end">
<div class="col">
<div class="infoBoard">
<div class="container">
<div class="row justify-content-between">
<div class="col">
<p class="h4">文章</p>
</div>
<div class="col-2">
<a href="./panelArticlesControl.html" target="_self"><img src="../svgs/attachment-2.svg" alt="" class="achors"> </a>
</div>
</div>
<div class="row show_details">
<div class="col-2 offset-3">
<p class="h3">4</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mdui-collapse-item mdui-collapse-item-open">
<div class="mdui-collapse-item-body mdui-list">
<a href="./panelArticlesControl.html" class="mdui-list-item mdui-ripple ">管理文章</a>
<a href="./panelArticlesWrite.html" class="mdui-list-item mdui-ripple mdui-list-item-active">写文章</a>
</div>
</div>
<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>
写文章模块
标题栏
<div class="form-group">
<label for="articleEditor" class="bmd-label-floating">输入标题</label>
<input type="password" class="form-control" id="articleTitle">
</div>
内容栏可向下自由拉伸长度 自适应长度
<form action="">
<div class="form-group">
<label for="articleContent" class="bmd-label-floating">开始编辑</label>
<textarea class="form-control" id="articleContent" rows="26"></textarea>
</div>
</form>
系统设置页面
用户名 邮箱 个人描述的更改
与文章编写的代码基本一致
更改密码部分
为了提高安全性 需要输入原密码
并重复输入新密码
与上述代码基本一致 修改部分内容即可
资源下载地址：https://download.csdn/download/sheziqiong/86805850
资源下载地址：https://download.csdn/download/sheziqiong/86805850
更多推荐
基于Html的个性化新闻资讯网页设计
发布评论