当前课程知识点:软件开发实训--动态网站开发 >  1 前端需求分析 >  1.4导航菜单分析 >  1.4.1导航菜单分析

返回《软件开发实训--动态网站开发》慕课在线视频课程列表

1.4.1导航菜单分析在线视频

下一节:1.4.2课程PPT

返回《软件开发实训--动态网站开发》慕课在线视频列表

1.4.1导航菜单分析课程教案、知识点、字幕

同学

你好

欢迎回到软件开发实训课堂

上节课咱们对网站的首页做了一个分析

这节课我们把导航菜单

拿出来再做具体的分析

看一看导航菜单都有哪些

需要我们注意的

和完成的内容

下面我们来看一下

什么是导航菜单

在日常使用计算机的过程中

咱们使用的软件

大部分都有一个菜单

这个菜单几乎是软件界面的

完成功能的标配

它能够方便地对功能进行归类

让用户快速的找到需要的功能

那么要制作菜单

首先要做的就是有一个菜单条

而这个菜单条

往往是放在界面的不同区域

也许有一个也许有两个

但大部分情况下是把它放在顶部

我们windows的软件几乎都在顶部

而我们参考的网站也是在顶部

所以我们把菜单拿出来先做一下分析

而菜单除了首页需要以外

其他的副页面也会包含菜单

为了能让菜单同时出现多个

这就要把菜单放在菜单条上

菜单条

它实际上就是一个放菜单的容器

在界面上

它表现的是一个区域

而菜单是菜单条上的每一个项

具体的菜单

也称之为导航或导航菜单

所以我们通常所说的导航菜单

导航

往往指的都是菜单

菜单

软件系统中

用户操作功能划分和选择的方式

对我们软件系统功能划分和选择的方式

另外一种它类似于现实生活中的点菜单

就我们去餐厅吃饭

点菜用的菜单它很相似

所以我们把这种功能称之为菜单

通常情况下

菜单它的表现形式有横向

还有一个是纵向

对于我们经常在淘宝京东这样的大型网站

上去购物时

我们会发现

他们的菜单也就是导航用的

往往是纵向的

因为它内容特别的多

所以它们选择了纵向

而对于我们参考的网站使用的是横向的菜单

那么虽然是横向

所有的都会有一个子菜单

它有层次

那么对于层次当鼠标点击划过时

都会有变化

有子菜单时显示子菜单

无子菜单时进入链接内容

这都是可以实现的

根据你的需求来实现这样的功能

让它是变换颜色还是进入链接位置

这些个都需要你来决定

当然你的决定依赖于用户的需求

再看我们菜单的具体内容

对于我们的参考网站

我们的第一个需求

就是要有一个返回到首页的链接

无论用户走到哪一页

他想要回到首页

只需要点击这个首页链接就可以了

第二个

要有一个事件

用户想了解公司最近的信息

就可以点击事件来进入

解决方案

是为了展示公司以前的业绩

也需要我们把它放在菜单上

让用户快速的进入

关于我们

这是对公司的介绍

还有产品的展示

在我们的参考网站里边

我们的导航之所以比较简单

就是因为只有产品有下拉菜单

所以实现起来

对你来讲就更加容易一些

它只有四个子项

另外在导航菜单里边

还有一个联系我们

这样用户看到他感兴趣的内容时

如果有疑问

就可以与公司的服务人员取得联系

来了解相关信息

还有一个就是

这个网站它需要有一个

中文版的网站

它以英文为主

但是还需要有中文

所以你在设计的时候往往需要考虑到一个

国际化的问题

我们再来看一下有关菜单的相关布局

首先是菜单

它所放的区域的宽和高

也就是我们所说的菜单条的区域

在菜单条上

每一个菜单都有它自己的颜色

这个颜色呢

也许你需要两个或者三个

比如说鼠标放上去的和鼠标退下来时

它的颜色与正常颜色都是要有区别

这样看起来是有动感的

另外一个菜单的字体

对于英文

还有中文

你可以综合的把字体写到这里

这样的呢

浏览器会根据你的文字

来选择需要的字体

当然放在前面的先会选择

这是由CSS你编写的时候决定的

另外一个

这个字体的大小

对于我们菜单来讲

尤其是现在屏幕都比较大

所以尽可能的把字体呢

放大

而且还要好看

根据我们习惯性的设计

和我们对网站长时间的观察发现呢

尺寸在14个px的字体的时候

在现在的屏幕上看起来是比较舒服的

12显得有点小

16显得又比较大

所以选择14的字体就比较舒服

另外对于中文版的切换按钮区域

它也有一个按钮大小

这个按钮你也可以根据这些区域的

去调整你的按钮大小

有区域

187×25

按钮本身95×22

这是区域和按钮

它们两个的尺寸

再一个按钮它有背景颜色

你需要把背景颜色

通过另外一种方式给它添加上去

这个和我们前面的颜色值是不一样的

要注意

这两种表示形式

结果是一样的

都是代表了一种颜色

只是表示形式不同

前面用警号开头的

在我们学习CSS的时候

你就已经知道了它是十六进制的颜色表示

而在下面我们用一个函数rgb

给他传递了三个整数

分别表示红色

绿色

蓝色

这三个三原色

但不管怎么样

这两个表示的结果是一样的

都是一种颜色

根据你的喜好可以进行选择

我们这里只是为了

展示出颜色的不同表示而已

边框的颜色也需要你把它设定上

这是对于外表的展示的样式

那么对于整个菜单的内容来讲

我们把它分了两层

为什么分两层呢

因为它只有一个叫做products

也就是产品的菜单

具有下拉内容

而且只有四项

所以我们只需要两层

就可以完成一个主菜单下面的子菜单了

当然如果说子菜单下面还有子菜单的话

那你就得需要三层等等

这里我们并不需要去考虑

通用的菜单实现

我们先学会如何去实现一个简单的菜单

以后我们可以去实现

更为通用的复杂的菜单

再看

每一个显示的菜单

它的前面都有一个小三角

小三角往往是由图片构成的

而图片通常选择的是gif图

或者是png图

为什么是它两个

因为他们才能实现透明

而jpg是无法透明的

所以我们用透明的图来表示三角

这样我们不需要的区域

它就能够和背景很好的融合

在一个菜单是没有背景的

完全就是我们网页的背景

它没有自己的背景

所以这就更加简洁了

子菜单的背景

也就是说当我们鼠标点击或者划上菜单

这个时候会显示一个子菜单出来

而子菜单的背景

不能与网页的背景融合

因为融合以后出来后你可能看不清楚了

因为它背后是有内容的

这样造成了内容的叠加

所以我们需要把

子菜单的背景给它设定出来

与网站的整体效果要有区别

用户看起来才能够更加清晰

而子菜单项里边有一个滑过

我们的主菜单是有滑过

我们的子菜单也有滑过

这都可以根据需要去设定

划过就指的是鼠标

划过文字的时候

它的效果

这在CSS里边完全是可以实现的

那么它实现的主要就是背景色

以及前景色

这两个颜色

所以效果就能够很明确地区别开

我当前鼠标所在的菜单项

与其他菜单项的区别

一目了然

那么在我们整个网页里边

你看到了我们的参考网站的整个网页里边

有两个地方需要菜单导航

第一个是每个页面的主导航

就是这样一个菜单条

这个菜单条是每一页都有

但是除了主页

其他的页面会有一个侧边导航

侧边呢

在我们的参考网站里是在左边

也就是左边有一个导航

而它的内容

实际上是重复了主菜单的相关内容

这个呢

又给客户提供了更加方便的导航形式

所以我们在实现的时候

除了主菜单以外

还需要有一个什么

侧边菜单的实现

那么我们把他的样式已经分析的差不多了

也知道了它的前景背景

鼠标滑过等等这些效果

那么具体该怎么实现

你有没有想过html如何实现

比如说我们的侧边

你考虑了吗

实际上我们侧边

用无序列表有序列表都是

很容易实现的

而主菜单除了样式以外

我们还需要配合一些

JavaScript的脚本来实现

那么具体的JavaScript脚本

该怎么来做

我们在后期实现的时候再讲

这节课的内容就讲这么多

下一节课再见

软件开发实训--动态网站开发课程列表:

1 前端需求分析

-1.1课程介绍

--1.1.1课程介绍

--1.1.2课程介绍PPT

--1.1.3随堂测试

-1.2网站需求分析

--1.2.2网站需求分析

--1.2.3需求PPT

--1.2.4随堂测试

-1.3网站首页分析

--1.3.1网站首页分析

--1.3.2首页分析PPT

--1.3.3随堂测试

-1.4导航菜单分析

--1.4.1导航菜单分析

--1.4.2课程PPT

--1.4.3随堂测试

-1.5内容区域分析

--1.5.1内容区域分析

--1.5.2课程PPT

--1.5.3随堂测试

-1.6内容副页面分析

--1.6.1副页面分析

--1.6.2课程PPT

--1.6.3软件系统需求分析

-1.7编写需求文档

-1.8需求分析理解

2 后端分析

-2.1后端页面总体分析

--2.1.1后端页面总体设计

--2.1.2课程PPT

--2.1.3随堂测试

-2.2用户管理功能设计

--2.2.1用户管理功能分析

--2.2.2课程PPT

--2.2.3随堂测试

-2.3内容与分类功能分析

--2.3.1内容与分类功能分析

--2.3.2课程PPT

--2.3.3随堂测试

-2.4网站配置功能设计

--2.4.1网站配置功能设计

--2.4.2课程PPT

--2.4.3软件系统设计

--2.4.4随堂测试

-2.5数据库及表结构分析

--2.5.1数据库及表结构分析

--2.5.2课程PPT

--2.5.3数据库设计

-总体设计文档

3 接口设计

-3.1前台模板约定

--3.1.1前台模板约定

--3.1.2课程PPT

--3.1.3随堂测试

-3.2网站配置接口设计

--3.2.1网站配置接口设计

--3.2.2课程PPT

--3.2.3随堂测试

-3.3菜单接口设计

--3.3.1菜单接口设计

--3.3.2课程PPT

--3.3.3随堂测试

-3.4内容接口设计

--3.4.1内容接口设计

--3.4.2课程PPT

--3.4.3随堂测试

-3.5幻灯片接口设计

--3.5.1幻灯片接口设计

--3.5.2课程PPT

--3.5.3随堂测试

-补充设计文档

-3.7接口设计

4 功能设计

-4.1用户管理功能设计

--4.1.1用户管理功能设计

--4.1.2课程PPT

--4.1.3随堂测试

-4.2菜单管理功能设计

--4.2.1菜单管理功能设计

--4.2.2课程PPT

--4.2.3随堂测试

-4.3内容管理功能设计

--4.3.1内容管理功能设计

--4.3.2课程PPT

--4.3.3随堂测试

-4.4网站配置信息设计

--4.4.1网站配置信息设计

--4.4.2课程PPT

--4.4.3随堂测试

-完成设计文档

-4.6随堂测试

5 环境搭建与开发

-5.1开发环境搭建

--5.1.1环境搭建

--5.1.2随堂测试

-5.2Web前端环境搭建

--5.2.1Web前端环境

-5.3创建用户实体

--5.3.1用户实体创建

--5.3.2随堂测试

-5.4用户实体表创建与初始化

--5.4.1用户实体表创建与初始化

--5.4.2随堂测试

-5.5用户数据访问接口实现

--5.5.1用户数据访问接口实现

--5.5.2随堂测试

-5.6环境搭建问题

-5.7环境搭建问题

6 用户管理功能实现

-6.1用户服务层接口实现

--6.1.1用户服务层接口实现

--6.1.2随堂测试

-6.2用户列表和编辑控制器实现

--6.2.1用户列表和编辑控制器实现

--6.2.2随堂测试

-6.3用户存储和删除控制器实现

--6.3.1用户存储和删除控制器实现

-6.4用户添加、编辑界面实现

--6.4.1用户添加、编辑界面实现

-6.5用户管理添加用户调试

--6.5.1用户管理添加用户调试

-6.6开发

7 用户管理功能实现二

-7.1用户查询模板实现

--7.1.1用户查询模板实现

--7.1.2随堂测试

-7.2用户信息编辑的实现

--7.2.1用户信息编辑的实现

-7.3单个用户删除实现

--7.3.2单个用户删除实现

-7.4多个用户删除实现

--7.4.1多个用户删除实现

8 用户管理功能实现三

-8.1用户列表分页基本实现

--8.1.1用户列表分页基本实现

-8.2用户列表查询结果分页实现

--8.2.1用户列表查询结果分页实现

-8.3通用日期处理

--8.3.1通用日期处理

-8.4整型日期处理

--8.4.1整型日期处理

--8.4.2随堂测试

-8.5枚举数据的应用

--8.5.1枚举数据的应用

--8.5.2Spring Boot开发

9 后台主界面实现

-9.1登录逻辑实现

--9.1.1登录逻辑实现

--9.1.2随堂测试

-9.2登录界面及流程调试

--9.2.1登录界面及流程调试

--9.2.2随堂测试

-9.3管理主界面实现

--9.3.1管理主界面实现

--9.3.2随堂测试

-9.4授权验证拦截器实现

--9.4.1授权验证拦截器实现

--9.4.2随堂测试

-9.5拦截器调试

--9.5.1拦截器调试

10 分类管理实现

-10.1分类接口实现

--10.1.1分类接口实现

-10.2分类添加、编辑实现

--10.2.1分类添加、编辑实现

-10.3分类树结构实现

--10.3.1分类树结构实现

-10.4分类删除实现

--10.4.1分类删除实现

--10.4.2随堂测试

11 内容管理实现

-11.1内容实体定义

--11.1.1内容实体定义

-11.2相关接口定义

--11.2.1相关接口定义

-11.3服务接口实现

--11.3.1服务接口实现

-11.4内容添加、编辑模板实现

--11.4.1内容添加、编辑模板实现

-11.5内容添加、编辑控制器实现

--11.5.1内容添加、编辑控制器实现

-11.6内容检索页面实现

--11.6.1内容检索页面实现

-11.7内容分类树实现

--11.7.1内容分类树实现

12 UEditor富文本编辑器

-12.1修改UEditor相关问题

--12.1.1修改UEditor相关问题

-12.2整合UEditor到内容编辑界面

--12.2.1整合UEditor到内容编辑界面

-12.3UEditor图片对话框应用

--12.3.1UEditor图片对话框应用

-12.4文件上传问题处理

--12.4.1文件上传问题处理

13 网站配置管理实现

-13.1网站配置相关类实现

--13.1.1网站配置相关类实现

-13.2网站配置界面模板实现

--13.2.1网站配置界面模板实现

-13.3网站配置调试

--13.3.1网站配置调试

14 网站前端组件实现

-14.1网站首页布局实现

--14.1.1网站首页布局实现

-14.2菜单Vue组件实现

--14.2.1菜单Vue组件实现

--14.2.2随堂测试

-14.3幻灯片Vue组件实现

--14.3.1幻灯片Vue组件实现

-14.4滚动Vue组件实现

--14.4.1滚动Vue组件实现

--14.4.2随堂测试

-14.5滚动接口实现

--14.5.1滚动接口实现

-14.6滚动接口调试

--14.6.1滚动接口调试

-14.7幻灯片接口实现

--14.7.1幻灯片接口实现

15 网站前端页面实现

-15.1首页区域实现

--15.1.1首页区域实现

-15.2首页内容脚本实现

--15.2.1首页内容脚本实现

-15.3首页完善

--15.3.1首页完善

-15.4Vue组件放入单文件

--15.4.1Vue组件放入单文件

-15.5详细页面实现

--15.5.1详细页面实现

-15.6前端问题

16 测试与发布

-16.1网站测试介绍

--16.1.1网站测试介绍

--16.1.2课程PPT

-16.2功能测试

--16.2.1功能测试

--16.2.2课程PPT

-16.3打包发布

--16.3.1打包发布

-16.4部署运行

--16.4.1部署运行

--16.4.2随堂测试

1.4.1导航菜单分析笔记与讨论

也许你还感兴趣的课程:

© 柠檬大学-慕课导航 课程版权归原始院校所有,
本网站仅通过互联网进行慕课课程索引,不提供在线课程学习和视频,请同学们点击报名到课程提供网站进行学习。