当前课程知识点:软件开发实训--动态网站开发 > 1 前端需求分析 > 1.5内容区域分析 > 1.5.1内容区域分析
同学你好
欢迎回到软件开发实训课堂
上节课咱们讲了导航菜单
如何去分析导航菜单
导航菜单的每个地方颜色层次我们都做了一些介绍
那么这节课我们来看一看
整个网站它的内容区域都有哪些内容
什么是内容区域呢 就是网站上所展示的主要内容
比如说新闻
它的详细内容是什么
我们首页的公告
它的内容是什么
还有我们首页上的解决方案
等等这些内容
区域它该怎么样去完成去实现
首先我们来看一下对于网站的内容
通常情况下是如何布局的
网站中除了一些导航以及底部的版权内容以外
还会有其他的列表性内容
或者是详细性内容
或者是概要性内容
而这些个内容
有的区域是可有标题的
有的是没有标题的
就像我们的网站
我们的每一个区域几乎都是有标题的
来简要的说明我们这个区域它所描述的内容是
什么
而网站的内容
区域的表现形式通常是比较多的
分了纯文字的
带有图片的
图文结合的
带有视频的等等
根据设计师的设计
往往你可以去自行的去实现
对每一个区域都尽可能的把它分析出来
想出它最简洁的实现方式
方法
用到哪些技术
需不需要第三方的框架等等
这些个都需要你找出来
而对于网站的文字性的区域内容
通常常见的几种
第一个
有标题
需要用列表一项一项的把它列出来
第二个
有标题
并且有缩减的图片缩略图
加上一个文字
这样的图文列表
还有第一条信息
带有图片
带有标题
还有概要文字
而下边仅仅只是文字性列表
这也是一种形式
当然了
还有我们用幻灯片的形式滚动显示的内容等等
非常的丰富
这里我们只是简单的列举了四个
那么对于我们参考的网站
实际上也就包含了这四个基本的内容
对于我们参考的网站
通常情况下你会发现它的格式是很简单的
一共有三种
第一种形式是幻灯片的形式
就图片不断的切换
用动画来进行切换
第二种是滚动形式
它在我们的参考网站里边是从下往上进行滚动
还有图文形式
这种形式通常出现在文章的详细页面比较多
我们的参考网站
它的详细内容页采用的就是这种图文形式的
看一下我们首页的内容区域布局
在首页的内容区域里边
我们说左边的下方是我们的公告群内容
而它的右边有三个列
这三个列分别表示了产品解决方案等等
而他的展示形式就是图文形式
上面是图片
标题
它的内容
而且三个都是这样
所以它们的形式三个的形式是一样的
所以你在设计的时候可以通过CSS怎么来
实现
用哪些标签
这个时候你就应该有一个清晰的认识
在看这个页面是我们的除了主页的其他的副页面
而这个页面左侧除了搜索以外
还有一个什么
左侧除了搜索以外
还有一些导航信息
那么在我们的右侧针对某一个像展示的详细
内容
他也是有图片
有文章
图文形式结合
这所有的副页区域
内容区域都是这样子的
所以它也是很简单的
这也就是我们为什么选择这个网站作为我们的
第一个项目训练
就是简单关于内容区域
你考虑了哪些东西
这些个都可以把它写到你的分析文档里
甚至你可以分析出用哪些标签
用哪些
CSS都可以把它写出来
以方便你后期实现时具体的去操作
好
关于内容区域的分析
我们就讲这么多
这节课就讲到这里
下节课再见
-1.1课程介绍
--1.1.3随堂测试
-1.2网站需求分析
--1.2.4随堂测试
-1.3网站首页分析
--1.3.3随堂测试
-1.4导航菜单分析
--1.4.3随堂测试
-1.5内容区域分析
--1.5.3随堂测试
-1.6内容副页面分析
-1.7编写需求文档
-2.1后端页面总体分析
--2.1.3随堂测试
-2.2用户管理功能设计
--2.2.3随堂测试
-2.3内容与分类功能分析
--2.3.3随堂测试
-2.4网站配置功能设计
--2.4.4随堂测试
-2.5数据库及表结构分析
-总体设计文档
-3.1前台模板约定
--3.1.3随堂测试
-3.2网站配置接口设计
--3.2.3随堂测试
-3.3菜单接口设计
--3.3.3随堂测试
-3.4内容接口设计
--3.4.3随堂测试
-3.5幻灯片接口设计
--3.5.3随堂测试
-补充设计文档
-4.1用户管理功能设计
--4.1.3随堂测试
-4.2菜单管理功能设计
--4.2.3随堂测试
-4.3内容管理功能设计
--4.3.3随堂测试
-4.4网站配置信息设计
--4.4.3随堂测试
-完成设计文档
-4.6随堂测试
-5.1开发环境搭建
--5.1.2随堂测试
-5.2Web前端环境搭建
-5.3创建用户实体
--5.3.2随堂测试
-5.4用户实体表创建与初始化
--5.4.2随堂测试
-5.5用户数据访问接口实现
--5.5.2随堂测试
-5.6环境搭建问题
-6.1用户服务层接口实现
--6.1.2随堂测试
-6.2用户列表和编辑控制器实现
--6.2.2随堂测试
-6.3用户存储和删除控制器实现
-6.4用户添加、编辑界面实现
-6.5用户管理添加用户调试
-7.1用户查询模板实现
--7.1.2随堂测试
-7.2用户信息编辑的实现
-7.3单个用户删除实现
-7.4多个用户删除实现
-8.1用户列表分页基本实现
-8.2用户列表查询结果分页实现
-8.3通用日期处理
-8.4整型日期处理
--8.4.2随堂测试
-8.5枚举数据的应用
-9.1登录逻辑实现
--9.1.2随堂测试
-9.2登录界面及流程调试
--9.2.2随堂测试
-9.3管理主界面实现
--9.3.2随堂测试
-9.4授权验证拦截器实现
--9.4.2随堂测试
-9.5拦截器调试
-10.1分类接口实现
-10.2分类添加、编辑实现
-10.3分类树结构实现
-10.4分类删除实现
--10.4.2随堂测试
-11.1内容实体定义
-11.2相关接口定义
-11.3服务接口实现
-11.4内容添加、编辑模板实现
-11.5内容添加、编辑控制器实现
-11.6内容检索页面实现
-11.7内容分类树实现
-12.1修改UEditor相关问题
-12.2整合UEditor到内容编辑界面
-12.3UEditor图片对话框应用
-12.4文件上传问题处理
-13.1网站配置相关类实现
-13.2网站配置界面模板实现
-13.3网站配置调试
-14.1网站首页布局实现
-14.2菜单Vue组件实现
--14.2.2随堂测试
-14.3幻灯片Vue组件实现
-14.4滚动Vue组件实现
--14.4.2随堂测试
-14.5滚动接口实现
-14.6滚动接口调试
-14.7幻灯片接口实现
-15.1首页区域实现
-15.2首页内容脚本实现
-15.3首页完善
-15.4Vue组件放入单文件
-15.5详细页面实现
-16.1网站测试介绍
-16.2功能测试
-16.3打包发布
-16.4部署运行
--16.4.2随堂测试