A.3 实验3：动态导航栏

A.3.1 目的与要求
A.3.2 实验内容

本实验创建学生-教师子系统的3个动态导航栏模块文件：
(1) navigation.php:主导航栏模块文件，用于学生一教师子系统主页、注册页面和登录页面。保存于教务选课系统项目xk中的“源文件”结点。
(2) navigation_student.php:学生子系统导航栏模块文件，用于学生子系统各页面。保存于教务选课系统项目xk中的“源文件”结点下的student子目录。
(3) navigation_teacher.php:教师子系统导航栏模块文件，用于教师子系统各页面。保存于教务选课系统项目xk中的“源文件”结点下的teacher子目录。

A.3.1 目的与要求

(1)掌握PHP代码与HTML代码在PHP页面文件中交替使用的方法。
(2)掌握PHP变量的定义与使用。
(3)掌握PHP运算符、表达式的使用。
(4)掌握PHP流程控制语句的使用。

A.3.2 实验内容

xk.css

/*48页*/
/*基本样式*/
body {font-size: 14px; letter-spacing: 1.2px}
.title {color: #458994; font-weight: 700}
a {color: steelblue; text-decoration: none}
a:visited {color: steelblue}
a:hover {text-decoration: underline; font-weight: 700}
/*水平导航栏样式*/
.nav {width: 90%; background-color: #eeeeee; margin: 5px auto 5px auto}
.nav .left {float: left; padding: 5px 10px 5px 10px}
.nav .right {float: right; padding: 5px 10px 5px 10px}
.nav .current {background-color: steelblue; color: white}

(1)创建PHP文件 navigation.php，作为能够呈现主导航栏的模块文件，用于学生-教师子系统的主页、注册页面和登录页面。
该模块文件的执行要用到4个变量，当这些变量取不同值时会有不同的呈现效果。下面是这4个输入变量的变量名、含义及可能的取值：

$isLogon={truelfalse}   //是否处于登入状态，取true或false
$1b={同学|老师}   //登录人员的类别，取”同学”或”老师”
$name=<姓名>   //当前登录人员的姓名
$choice = {0|1|2}   //用户选择状态，取0、1或2

当处于未登录状态时，输入变量$isLogon的值为false。

其中，“登录”和“注册”是两个超链接的文本，两个超链接的href属性值可以分别设置为"login_p.php"和"registration_p.php”。两个超链接文本应该根据输入变量$choice的取值，决定是否醒目显示。当$choice为1时，“登录”文本醒目显示，当$choice为2时，“注册”文本醒目显示，当$choice为0时，两个超链接文本都不醒目显示。这种情况不需要输入变量$lb和$name。

navigation.php（未登录）

<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="xk.css"/></head><body><?php$isLogon = false;$lb;$name;$choice = 1;?><div class="nav"><?php if($isLogon){ ?><a class="right" href="logoff.php">退出登录</a><a class="right" href="enter.php">进入系统</a><span class="right"><?php echo $name.$lb."，你好！"?></span><?php }else{ ?><a class="right <?php echo $choice===2 ? "current": ""?>" href="registration_p.php">注册</a><a class="right <?php echo $choice===1 ? "current": ""?>" href="login_p.php">登录</a><?php } ?><div style="clear: both"></div><!--css float浮动产生浮动无法显示背景样式颜色,设置clear清除浮动--></div></body>
</html>

navigation（未登录）

当处于登录状态时，变量$isLogon的值为true。

其中，“胡文海”是输入变量$name的值，“同学”是输入变量$lb的值。“进入系统”和“退出登录”是两个超链接的文本，两个超链接的 href 属性值分别设置为”enter.php”和“logoff.php"。这种情况不需要输入变量$choice。

navigation.php（登录）

<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="xk.css"/></head><body><?php$isLogon = true;$lb = "同学";$name = "胡文海";$choice = 1;?><div class="nav"><?php if($isLogon){ ?><a class="right" href="logoff.php">退出登录</a><a class="right" href="enter.php">进入系统</a><span class="right"><?php echo $name.$lb."，你好！"?></span><?php }else{ ?><a class="right <?php echo $choice===2 ? "current": ""?>" href="registration_p.php">注册</a><a class="right <?php echo $choice===1 ? "current": ""?>" href="login_p.php">登录</a><?php } ?><div style="clear: both"></div><!--css float浮动产生浮动无法显示背景样式颜色,设置clear清除浮动--></div></body>
</html>

navigation（登录）

(2)创建PHP文件 student\navigation_student.php，作为能够呈现学生子系统导航栏的模块文件，用于学生子系统各页面。
该导航栏模块文件的执行要用到2个变量，当这些变量取不同值时会有不同的呈现效果。下面是这2个输入变量的变量名、含义及可能的取值：

name =<姓名>   //当前登录学生的姓名
$choice={1|2|3}   //用户选择状态，取1、2或3

这里，“浏览课程信息” “选课” “查看成绩”和“退出”都是超链接的文本，这些超链接的href属性值分别设置如下：

浏览课程信息：course_p.php。
选课：elective_p.php。
查看成绩：score_view_p.php。
退出：…/index.php。

这些超链接文本应该根据输入变量$choice的取值，决定是否醒目显示。当$choice分别取1、2和3时，超链接文本“浏览课程信息” “选课”和“查看成绩”分别醒目显示。

navigation_student.php

<html><head><title></title><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="xk.css"/></head><body><?php$name = "胡文海";$choice = 1;?><div class="nav"><a class="left <?php echo $choice===1 ? "current":""?>" href="course_p.php">浏览课程信息</a><a class="left <?php echo $choice===2 ? "current":""?>" href="elective_p.php">选课</a><a class="left <?php echo $choice===3 ? "current":""?>" href="score_view_p.php">查看成绩</a><a class="right" href="../index.php">退出</a><span class="right"><?php echo $name."同学，你好！"?></span><div style="clear: both"></div><!--css float浮动产生浮动无法显示背景样式颜色,设置clear清除浮动--></div></body>
</html>

navigation_student

(3)创建PHP文件 teacher/navigation_teacher.php，作为能够呈现教师子系统导航栏的模块文件，用于教师子系统的各页面。
该导航栏模块文件的执行要用到2个变量，当这些变量取不同值时会有不同的呈现效果。下面是这2个输入变量的变量名、含义及可能的取值：

name =<姓名>   //当前登录教师的姓名
$choice={1|2|3}   //用户选择状态，取1、2或3

这里，“课程列表” “编辑课程信息” “录入成绩”和“退出”都是超链接的文本，这些超链接的href属性值分别设置如下：

课程列表：course_teacher_p.php。
编辑课程：course_edit_p.php。
录入成绩：score_input_p.php。
退出：…/index.php。

这些超链接文本应该根据输入变量$choice的取值，决定是否醒目显示。当$choice分别取1、2和3时，超链接文本“课程列表” “编辑课程信息”和“录入成绩”分别醒目显示。

navigation_teacher.php

<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="xk.css"/></head><body><?php$name = "吴蕊";$choice = 1;?><div class="nav"><a class="right" href="../index.php">退出</a><span class="right"><?php echo $name."老师，你好！" ?></span><a class="left <?php echo $choice===1 ? "current":"" ?>" href="course_teacher_p.php">课程列表</a><a class="left <?php echo $choice===2 ? "current":"" ?>" href="course_edit_p.php">编辑课程信息</a><a class="left <?php echo $choice===3 ? "current":"" ?>" href="score_input_p.php">录入成绩</a><div style="clear: both"></div><!--css float浮动产生浮动无法显示背景样式颜色,设置clear清除浮动--></div></body>
</html>

navigation_teacher

A.3 实验3：动态导航栏相关推荐

css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
Axure 9实现左侧动态导航栏
目前很多B端产品都是基于左侧的导航栏,有研究表明导航栏放在左侧效率更高.那基于Axure怎么能够实现呢,其实只需要动态面板组件就可以搞定. 1.首先,拖入四个矩形组件,如下图所示,第一个矩形取名为一级 ...
途牛旅游项目——动态导航栏
学习目标 (1)数据是最重要的 (2)开发一层测试一层 (3)基础:登录导航开发导航后台代码开发 (1)CateogryServiceTest (2)CateogryService (3)Cate ...
uniapp中动态添加及修改导航栏
在pages.json {"path": "pages/cart/cart","style": {"navigationBarTi ...
ionic3 动态设置tabs页面底部导航栏隐藏，并显示输入框添加评论
1.先上原始效果图: 2.完成后效果 2.实现思路: ion ...
小程序底部导航栏动态生成
1.在app.json中增加关于底部导航栏的设置 "tabBar": {"custom": true,//这个要有,设置启用自定义tabbar"col ...
uniapp 动态修改导航栏之前使用this.$mp.page page提示未定义
uniapp 动态修改导航栏 // 使用条件编译防止H5报错// #ifdef APP-PLUSlet pages = getCurrentPages();let page = pages[page ...
导航栏实现页面的动态切换
我们经常会在一些网站上通过点击一些导航栏中的分类来显式不同的内容来浏览,下面的方式可以实现这种效果. function change(){var left1 = $(".index1left ...
html导航栏动态图标,导航栏动态图.html
导航栏动态图 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif' ...

A.3 实验3：动态导航栏

A.3 实验3：动态导航栏

A.3.1 目的与要求

A.3.2 实验内容

A.3 实验3：动态导航栏相关推荐

最新文章

热门文章