当前课程知识点：软件开发实训--动态网站开发 > 14 网站前端组件实现 > 14.1网站首页布局实现 > 14.1.1网站首页布局实现
同学
你好
欢迎回到软件开发实训课堂
在上一节课我们已经将后台的所有程序
已经写完了
那么还有一些美化以及菜单的相关功能实现
没有去做
这个作为你下去以后训练的内容
那么菜单它的制作与分类非常的相似
所以我们不再去对菜单进行处理
希望你下去以后通过菜单
来实现一下自己是否能够完整地
做到一个表数据的内容管理
那么从这节课开始
咱们来说一说前台如何来实现
那么在实现前台的时候
咱们所使用的技术
主要包括html5 CSS
以及JavaScript
相对于第三方的框架
我们使用Jquery
VODS不得bootstrap等等
那么首先我们来看一下整个首页
它的一个布局
根据我们前面的分析
首页实际上一共分了
四行
首页的菜单
以及它的logo
还有幻灯片
占一行
中间的内容
占一行
以及版权占一行
为了能和其他页面共享顶部
我们将幻灯片给他单独成一行
这样我们的头部
包括菜单和logo
所以这一行呢
我们只包括上面两个内容
而幻灯片单独的使用一行
好
现在我们来看首页的框架
通过bootstrap怎么来写
在我们开始的时候新建了一个index的
htmI文件
这个文件位于statie目录下
我们把它打开
这个是默认的首页
我们首先将页面的title给它改掉
我们就简单的写公司网站
其他的内容
这包括了
Jquery Bootstrap
Vue
这三个
JavaScript还有它的样式表CSS
这是Bootstrap的样式库
之前我们写的测试的内容把它都删掉
Bootstrap它的实现
我们来看
首先
我们加一个container的容器
然后我们定义行
一共有四行
我们把它
分别放起来
在这四行里
我们可以用head标签
表示顶部行
用foot标签表示底部的版权内行
幻灯片和我们具体的内容
就用DIV来表示就可以了
当然我们也可以完全使用
DIV这是没有问题的
这样我们就将首页划分成了四行
四行里面
在顶部行
有菜单
菜单区域呢
我们用nav标签
然后是logo
网站的logo呢
我们可以直接使用
它的图片
这个图片我们看一下
我们复制原图到我们的
images文件夹下
这样Top就有了
在这里我们简单地写上它的文件名称
注意整个网站的宽度
在咱们分析的时候
已经知道了
它的宽度实际上和图片的宽度一样
是768px
我们可以去控制它
整个网页
我们可以用一个DIV
把它包起来
而给DIV一个宽度
768px
这样我们整个网页的宽度就是768px
然后这个容器
我们就根据我们的外围的
768的容器来进行变化
有了这个
内容区域以后
我们就可以
定义我们的Vue实例
这里之前我们已经写好了
可以删掉
相关的测试内容
在这里我们需要几个数据
第一个数据就是我们菜单区域的数据
根据我们的设计是要从
后台去加载数据
这里我们先暂时写上我们的模拟数据
menus
它是个数组
数组中
每一项
都是一个对象
mid表示菜单的编号
name
表示菜单的名称
还有
href表示菜单的链接地址
我们这里
先用一个描述占着
我们发现在参考网站上
产品是有子目录的
所以我们加一个submenus
用这个
为什么sublists的这个是跟
后端
关联的
也可以用submenus
让后端也可以把它改成submenus
那么我们后端用的是sublists
所以我们对前端也使用sublists
它是子菜单
如果为空说明它没有
如果不为空
那就说明它是有内容的
那么菜单这个数据该怎么去使用
这就需要我们去实现我们的
菜单功能
那么菜单功能
我们使用Bootstrap
提供的导航条模式
来进行实现
这是
有关首页的布局
那么对于首页的布局
布局好之后
我们只需要把我们的组件
放进去就可以了
好
关于首页我们就讲这么多
下节课我们再见
-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随堂测试
