当前课程知识点:软件开发实训--动态网站开发 > 1 前端需求分析 > 1.4导航菜单分析 > 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.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随堂测试