Html导航菜单的制作
效果图:
源代码:
#top{
background-image:url(Images/top_bg.gif);//此处放置你所需的图片背景background-repeat:no-repeat;
height:118px;
width:778px;
}
#message{
height:30px;
width:150px;
padding-left:240px;
padding-top:85px;
color:#CC0000;
}
#daoh{
background-color:#CC9933;
height:20px;
width:778px;}
#date{
background-color:#CCCC00;
height:20px;
width:240px;
float:left;
padding:0px;
font-size:10px;
font-weight:bold;
color:#FFF;
}
#menu{
height:20px;
width:538px;
float:right
}
.box{ padding:0px;
font-size:10px; }
.box ul{margin:0px; padding:0px; list-style:none;}
.box ul li{margin:0px 2px 0px 0px; padding:0px; width:63px; height:20px; display:in line; float:left; border-bottom-style:none solid none none;}
.box ul li:hover ul{visibility:visible;}//当鼠标移动到菜单时,下拉列表显示出来
.box ul li a{text-align:center; width:80px; height:20px; line-height:15px; display:block; text-decoration:none; color:#FFF;}
.box ul li ul{visibility:hidden;}//下拉菜单默认设置为隐藏
.box ul li ul li{ padding:0px; width:80px; background-color:#CC9933;}
.box ul li ul li:hover{background:#666;}
body li{color:#FFF;}
strong{color:#FFFFFF;}
var timenow;
var s;
function jialing(s){//当获取的时间值小于10时,加一个0,如9显示为09 if(s<10){
s="0"+s;
return s;
}else{
return s;}
}
function showTime(){
var date=new Date();//获取系统当前时间
var second=date.getSeconds();
var month=date.getMonth()+1;
var da=date.getDate();
var hour=date.getHours();
var minute=date.getMinutes();
second=jialing(second);
minute=jialing(minute);
hour=jialing(hour);
da=jialing(hour);
month=jialing(month);
var weekday=new Array(7);
weekday[0]="星期日";
weekday[1]="星期一";
weekday[2]="星期二";
weekday[3]="星期三";
weekday[4]="星期四";
weekday[5]="星期五";
weekday[6]="星期六";
var strDate = date.getFullY ear()+'年'+month
+'月'+da+'日'+weekday[date.getDay()]+hour+':'+minute+':'+second;
var span = document.getElementById('showDate');
span.innerHTML = strDate;
timerId = setTimeout('showTime()',1000);//每1秒自动刷新一次,时间显示为按秒跳动}
function winclose(){
if(confirm("确定退出?")){//弹出对话框,询问是否删除。
window.close();
}
}
Authorware下拉菜单与多级菜单的制作Authorware制作下拉菜单需要用到交互图标所提供的下拉菜单 首先是擦除原有菜单的“文件”二字 在用Authorware的菜单交互制作菜单时,Authorware总会在菜单栏上加一个“文件”菜单。这个“文件”菜单与我们的作品总是那么不协调。所以咱们先想办法去掉这个“文件”菜单。具体步骤如下: 1、在主流程线上拖一个交互图标,命名为“文件”。在其右侧放一个组图标(内容为空),在弹出的对话框中,选择“下拉菜单”。双击组图标上方的小方块,弹出属性对话框,选择“永久”及“退出交互”,其他选项就用默认的设置。 2、在交互图标的下方,放一个擦除图标,然后运行一下演示窗口,用鼠标单击演示窗口标题栏上的“文件”二字。仔细看,那个“文件”菜单会随之消失。运行一下看看是不是消除了。 下拉菜单制作 首先在流程线上拖入一交互图标,命名为“文件”,在其右侧放一个组图标,在弹出的对话框中,选择“下拉菜单”。将这个组图标命名为“新建”,范围选择“永久”。然后在其右侧继续放入五个这样的组图标,分别命名为:“打开”、“- ”(这个减号表示分界线)、“保存”、“另存为”、“- ”。最后再放上一个计算图标,命名为“退出”,打开它,输入" quit(0) " ,这样一个下拉菜单就做好了,运行下便能看到效果。
多级菜单制作 1、在流程线上放一个交互图标,命名为“图片欣赏”,在其右侧放一个组图标,选择交互类型“下拉菜单”。将这个组图标命名为“植物图片”。双击组图标上方的那个矩形色块,在弹出的属性对话框中,点击“响应”选项卡,选中其中的“永久”复选项,并将“分支”的值选为“返回”。您可以继续添加几个这样的组图标,分别命名为“动物图片”、“风景图片”等等,当然随便您啦。 2、按同样的方法,在主流程线上再放一个交互图标,其右侧也放几个组图标,分别命名为“梅花”、“兰花”、“菊花”等。各项设置同上面的步骤一样。惟一的不同,就是要把交互图标的命名删除,也就是说要让这个交互图标的名字为空。
基础题(1)【考点分析】本题考点有:菜单编辑器的使用(标题、名称和内缩符号)。 【解题思路】通过菜单编辑设置菜单的标题、名称和内缩符号。 【操作步骤】 步骤1:建立界面,添加控件并设置控件的属性。程序中用到的控件及属性见表3.193。 步骤2:调试并运行程序,关闭程序后按题目要求存盘。 基础题(2)【考点分析】本题考点有:文本框的Name、PasswordChar属性和Change 事件。 【解题思路】首先通过属性窗口设置文本框的名称,并将Text1的PasswordChar属性设为*。在文本框的Change事件中,将文本框1显示的内容赋给文本框2。 【操作步骤】 步骤1:建立界面,添加控件并设置控件的属性。程序中用到的控件及属性见表3.194。 步骤2:编写程序代码。 参考答案 Private Sub Text1_Change() Text2.Text = Text1.Text End Sub 步骤3:调试并运行程序,关闭程序后按题目要求存盘。 简答题(1)【考点分析】本题考点有:图片框的Name、Height、Width、Picture属性和命令按钮的Name、Caption属性。 【解题思路】通过图片框的Name、Height、Width、Picture属性分别设置其名称、高、宽和添加图片。在命令按钮的Click事件中,图片的交换用LoadPicture()方法来实现。 【操作步骤】 步骤1:建立界面,添加控件并设置控件的属性。程序中用到的控件及属性见表3.195和表3.196。 表3.195
程序提供代码 Private Sub C1_Click() P1.Picture = LoadPicture("pic2.jpg") P2.Picture = LoadPicture("pic1.bmp") End Sub 程序结束 步骤3:调试并运行程序,关闭程序后按题目要求存盘。 简答题(2)【考点分析】本题考点有:复选框的Name、Caption、Value属性,文本框的Name、Text属性,命令按钮的Name、Caption属性,"+"连接符以及If判断语句。 【解题思路】首先在窗体上建立相应控件,并通过属性窗口设置其属性。通过If语句判断复选框的Value属性值是否为True,来判断文本框中应该显示的内容。 【操作步骤】 步骤1:建立界面,添加控件并设置控件的属性。程序中用到的控件及属性见表3.197。 步骤2:分析并编写程序代码。 程序提供代码 Private Sub C1_Click() '需要考生编写的内容 End Sub Private Sub Form_Unload(Cancel As Integer) Open App.Path & "\out4.txt" For Output As #1 Print #1, Ch1.Value, Ch2.Value, Text1.Text
二级下拉菜单实现代码
下面我们定义一下全局的字体,字号,行距等,点击css样式面板上的新建按钮,在弹出的窗口中选择器类型选择标签,名称选择body,然后在css编辑器中设置如下图所示属性 body全局样式定义后,下面我们给#menu定义一个灰色的1px边框及宽度,然后把li定义下背景色和下边框及内边距等 接下来定义li的背景色为浅灰色及下边框和内边距 这些属性设置完后,一个简单的纵向列表菜单初具模型了。因为导航菜单,需要链接到其它页面,下边把这些导航加上链接,然后在定义a的状态和鼠标划过状态。 要添加链接,先选择要添加链接的文字,然后在属性页面链接上输入要链接的页面址,我这里输入个#,是个虚拟链接,不指向任何页面。一、直接自定义序列 用“数据/有效性”功能可以达到目的。 以选择性别为例,制作有男、女选项的下拉菜单: 选中“性别”数据区域; 执行“数据/有效性”命令,打开“数据有效性”对话框; 单击“设置”选项卡,在“允许”栏选择“序列”,“来源”中输入“男,女”(不含引号,用英文单引号分隔); 单击“确定”按钮。 二、利用表内数据作为序列源 有时候序列值较多,直接在表内打印区域外把序列定义好,然后引用。 操作步骤:先在同一工作表内的打印区域外要定义序列填好(假设在在Z1:Z3),如“男,女,其他”,然后选择要实现效果的列,再点击"数据\有效性",打开"数据有效性"对话框;选择"设置"选项卡,在"允许"下拉菜单中选择"序列",“来源”栏点击右侧的展开按钮(有一个红箭头),用鼠标拖动滚动条,选中序列区域Z1:Z3(可以直接输入=$Z$1:$Z$8;选上"忽略空值"和"提供下拉菜单"两个复选框。点击"输入信息"选项卡,选上"选定单元格显示输入信息",在"输入信息"中输入"请在这里选择"。 三、横跨两个工作表来制作下拉菜单 方法:用INDIRECT函数实现跨工作表 在sheet2中在Z1:Z3处设置好数据源:男,女,其他 选择要实现效果的列,再点击"数据\有效性",打开"数据有效性"对话框;选择"设置"选项卡,在"允许"下拉菜单中选择"序列",在来源处换成=INDIRECT("sheet2!$i$8:$i$12"), 就可实现横跨两个工作表来制作下拉菜单。 Excel设置数据有效性实现单元格下拉菜单的3种方法 一、直接输入: 1.选择要设置的单元格,譬如A1单元格; 2.选择菜单栏的“数据”→“有效性”→出现“数据有效性”弹出窗口;
Excel2007中创建多级下拉菜单[图解] (2011-05-08 23:00:00) 转载▼ 分类:07.MSoffice 标签: 郑来轶 数据分析 excel2007 下拉菜单 多级 列表 indirect Excel2007中创建多级下拉菜单 有如下一份省市数据:省份以及省份所辖地市清单,需要实现多级联动下拉菜单操作,具体操作方式如下所示: 第一步:对各单元格区域进行名称定义 选中A1:A5单元格区域,然后公式——根据所选内容创建——如图设置 PS:分别对B、C、D、E列重复以上操作
第二步:设置省份列的选项 选中G1:G22单元格区域,然后数据——数据有效性 弹出数据有效性设置窗口,然后如图设置
其中来源“=省份”,这里的省份与之前自定义的单元格区域名称是相对应的 省份选项搞定 第三步:设置地市列的选项
选中H1:H22单元格区域,然后数据——数据有效性 在弹出的窗口,设置如下 其中来源=indirect($G1) PS:indirect函数,返回由文本字符串指定的引用。
地市选项也搞定了,N级操作以此类推 ------------------------------我是完美的分割线----------------------- 条件查找: =OFFSET(C1,MATCH(A9&B9,A2:A6&B2:B6,0),)
图片来源:王喆 点击放大图组索引 我们经常会遇到如图中的EXCEL表的情况,第一行是一级单位,下面都是二级单位的这种EXCEL形式的小型数据库,我们需要在表中先填写一级单位后再填写二级单位,但是为了防止填写EXCEL工作表的人乱填,需要严格限定单元格内容,同时由于有些数据量非常大,就需要减轻填表人的劳动强度,因此需要在数据有效性的基础上再进一步设置联动。 图片来源:王喆 点击放大图组索引
Excel简单制作一级、二级、三级及多级联动下拉菜单 Excel2003巧用数据有效性和INDIRECT函数简单制作一级、二级、三级及多级联动下拉菜单 一、Excel一级下拉菜单制作 例如在A1:A10单元格制作一个下拉列表菜单,步骤如下: 选中A1:A10单元格,选择“数据—有效性”,进行如图所示设置即可,其中来源中的每一项要用英文逗号隔开。 设置好以后,在A1:A10单元格就能进行下拉选择了,如图所示: 二、Excel二级下拉菜单制作 例如在A1:A10和B1:B10单元格制作二级联动下拉列表菜单,步骤如下: 1、在表中输入需联动下拉选择的信息,如图所示(其中省份是一级下拉选项,市名是二级下拉选项):
2、选中E1:F1单元格,选择“插入—名称—定义”,输入名称如“省份”,如图示: EXCEL 2007如下: 3、选中E1:F3单元格,选择“插入—名称—指定—首行”,如图所示:
EXCEL 2007如下: 4、选中A1:A10单元格,选择“数据—有效性”,进行如图所示设置即可,其中来源中输入=省份 5、选中B1:B10单元格,选择“数据—有效性”,进行如图所示设置即可,其中来源中输入=INDIRECT($A1)
设置好以后,在A1:A10和B1:B10单元格就能实现联动下拉选择了,如图所示: 三、Excel三级下拉菜单制作 例如在A1:A10和B1:B10和C1:C10单元格制作三级联动下拉列表菜单,步骤如下: 1、在表中输入需联动下拉选择的信息,如图所示(其中省份是一级下拉选项,市名是二级下拉选项,县名是三级下拉选项):
2、选中E1:F1单元格,选择“插入—名称—定义”,输入名称如“省份”,如图所示: EXCEL 2007如下: 3、选中E1:F3单元格,选择“插入—名称—指定—首行”,如图所示: EXCEL 2007如下:
目录 1.1Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单 (2) 1.1.1Spry菜单栏 (2) 1.1.2自定义菜单栏组件的显示风格(修改CSS文件) (9) 1.1.3更改菜单栏组件的方向 (15)
1.1Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单 1.1.1Spry菜单栏 Spry 框架是一个JavaScript 库,Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的Web 页。有了Spry,就可以使用HTML、CSS 和极少量的JavaScript 将XML 数据合并到HTML 文档中,创建构件(如折叠构件和菜单栏),向各种页面元素中添加不同种类的效果。 在设计上,Spry 框架的标记非常简单且便于那些具有HTML、CSS 和JavaScript 基础知识的用户使用。 1、菜单栏组件是一组可导航的菜单按钮 当站点访问者将鼠标悬停在其中的某个按钮上时,将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息,并使站点访问者无需深入浏览站点即可了解站点上提供的内容。 Dreamweaver 允许Web开发人员插入两种菜单栏组件:垂直组件和水平组件。并且所生成的菜单栏组件由标准的HTML标签(由
将弹出下面形式的对话框 选择“水平”或“垂直”等所需要的菜单形式,并最后单击“确定”按钮,本示例选择“水平菜单”。Dreamweaver将自动地创建出下面形式的“水平菜单”。 也可以使用“插入记录”主菜单栏中的“Spry”子菜单,然后插入菜单栏组件的方式创建。 4、保存页面文件及所生成的CSS和JavaScript文件 (1)确认保存所需要的各个相关的资源文件
本文部分内容来自网络整理,本司不为其真实性负责,如有异议或侵权请及时联系,本司将立即删除! == 本文为word格式,下载后可方便编辑和修改! == excel创建下拉菜单 篇一:如何在Excel中设置下拉选项,实现下拉列表 在Excel中实现下拉列表 注:以下示例在Microsoft Excel 201X中通过测试 一、直接输入: 1.选择要设置的单元格,例如A1单元格; 2.选择菜单栏的“数据”→“数据有效性”→出现“数据有效性”弹出窗口; 3.在“设置”选项卡中→“有效性条件”→“允许”中选择“序列”→右边的“忽略空值”和“提供下拉箭头”全部打勾→在“来源”下面输入数据,如 “部门1,部门2,部门3,部门4,部门5”(不包括双引号,分割符号“,”必须 为半角模式)→点击“确定”完成,再次选择该A1单元格,就出现了下拉菜单。当然,可以拖动单元格扩展填充序列。 如图所示: 二、引用同一工作表内的数据: 如果同一工作表的某列区域就是下拉菜单想要的数据,例如引用工作表Sheet1 的B1:B5。B1:B5分别有以下数据:部门1、部门2、部门3、部门4、部门5, 操作如下: 1.选择要设置的单元格,例如A1单元格; 2.选择菜单栏的“数据”→“数据有效性”→出现“数据有效性”弹出窗口; 3.在“设置”选项卡中→“有效性条件”→“允许”中选择“序列”→右边的“忽略空值”和“提供下拉菜单”全部打勾→在“来源”下面输入数据 “=$B$1:$B$5”,也可以直接点击单元格选择B1:B5区域→按“确定”完成,再次选择该A1单元格,就出现了下拉菜单。
如图所示: 三、引用不同工作表内的数据(必须为引用的区域定义名称): 如果不同工作表的某列区域就是下拉菜单想要的数据,譬如工作表Sheet1的A1单元格要引用工作表Sheet2的A1:A5区域。工作表Sheet2的A1:A5分别有以下数据:部门1、部门2、部门3、部门4、部门5,操作如下: 1. 为引用单元格区域定义名称: 首先选择Sheet2 的A1:A5单元格区域→右键→“命名单元格区域”→弹出“新建名称”窗口,在“名称”右面输入“部门”(可以自己随便填,但也要注意命名规则,例如数字就不可以)→“引用位置”下面输入“=Sheet2!$A$1:$A$5”,也可以直接点击单元格选择A1:A5区域→点击“确定”完成命名单元格区域。 如图所示: 单元格区域的另外一种命名方法: 选择要命名的单元格区域,在“名称框”中输入名称,如图: 注:可以按Ctrl+F3键打开“名称管理器”,在这里可以编辑或删除命名的单元格区域,如图: 2.选中要设置的单元格,比如Sheet1表的A1,选择菜单栏的“数据”→“数据有效性”→出现“数据有效性”弹出窗口; 3. 在“设置”选项中→“有效性条件”→“允许”中选择“序列”→右边的“忽略空值”和“提供下拉菜单”全部打勾→在“来源”下面输入数据“=部门”→按“确定”完成,再次选择该A1单元格,就出现了下拉菜单。如图: 篇二:Excel 201X制作下拉选项及颜色的设置 Microsoft Excel 201X 制作单元格的下拉选项及颜色的设置 图1首先鼠标选定需要生成下拉选择框的单元格;然后在功能区,找到数据选项并单击,进入数据功能页; 第二步:找到数据有效性按钮并点击,选择数据有效性; 图2:在弹出的数据有效性窗口中,在有效性条件下拉列表中选择序列
VBA 新手学习笔 记 之:二级下拉菜单 (字 典嵌套法)
VBA新手学习笔记之:二级下拉菜单(字典嵌套法) 如下效果图: 今天这个效果所涉及的新增知识点有: 1.模块级变量的定 义2.事件程序3.字典嵌套4. Join函数 下面我们逐一来解读下这四个知识点: 1.先看看什么是事件之前我们执行Excel程序都需要手 动画一个按钮,然后将对应的过程指定给这个按钮,当我们需要程序运行的时候,就发送一个命令(点一下按钮)给这个程序,程序接收命令后,会按照程序的逻辑进行运行。 而事件程序是不需要手工指定按钮,而是当我们在操作 Excel的时候有些动作会自动被ExcelVBA所识别,VBA内部已经自行内置了有关此事件的过程名,我们在对应的过程中写需要执行操作的代码,当Excel的某个动作发生的时 候,会自动触发执行所写的程序。 这个案例所用到的事件程序有两个:第一:单元格选区发生变化的时候:当需要填写省份的那一列的单元格选区发生变化时,需要添加去重后的省份的下拉菜单操作方法:对准需要达到效果的工作表名的位置右键一一查看代码一—进入工作表的代码编辑区选择worksheet --------------------------- 会自动弹出(单元格选区发生变化时要执行的过程)——在该过 程中写所需要的代码即可
Private SubWorksheet_SelectionChange(ByVal Target As Range) End Sub 第二:单元格的值发生变化的时候:当省份填写完毕后, 则需要将对应省份的城市添加到城市单元格的下拉菜单,如果省份单元格没有填、则城市下拉菜单跟着消失。 操作方法:前面的操作与第一点都是一样的,调出代码窗 口后 -- 选择worksheet ------ 在事件下拉框中选择Change事 件 --- 会自动生成(单元格值发生变化时要执行的过程) Private Sub Worksheet_Change(ByValTarget As Range) End Sub 2.因为今天的两个程序中都需要使用同一个字典来做数据有 效性的下拉菜单,所以用了一个字典对象的模块级变量 dicSF,所谓模块级变量即在同一个模块内所有程序都能使用 的变量;这里涉及到变量的作用域的问题,大家可以百度搜索下什么叫变量的作用域。 3?字典嵌套的运用,因为我们要通过不同的省份分别对应找到其对应的城市,显然这是一个字典无法完成的事情,因为我们有很多个省份,多个省份下又又多个城市,所以我们在省份字典dicSF中每存入一个省份,那么就将这个省份 作为一个新的字典的名称再创建一个字典,在这个字典下将城市再
「Excel」Excel设置多级下拉菜单在平时工作学习中,经常会用到Excel的下拉菜单功能,这一功能的实现方法也较为简单。但是,如果遇到需要使用二级下拉菜单或多级下拉菜单的情况,就会比较棘手。 实现二级下拉菜单的方法也有很多,本文为大家介绍一种,供大家参考,我们将以下面的表格为例来展开。 1、首先,我们需要做一些准备工作:对每一个项目建立一个名称索引。第一级下拉菜单的内容,选中商品类别,然后在左上角的名称位置,将名称改为我们自定义的名称“商品类别”,记得按回车确定。
2、接下来选中二级下拉菜单的项,同样在左上角自定义它的名称,名称要对应商品类别中的项。将剩余家用电器、电脑办公的项也设置好。 3、然后是三级菜单的项,自定义每一个小项的名称。名称要跟二级菜单中的项对应。
4、好,准备工作完成。现在设置一级菜单。选中B5单元格,打开数据-数据有效性。 5、在弹出的对话框中,“允许”选择序列,“来源”中输入“=商品类别”,商品类别即我们之前自定义的名称,最后确定。
6、这时我们看到,商品栏下可以通过下拉菜单选择内容了。 7、接下来要设置每一项商品的二级下拉菜单。
选中C5单元格,打开数据有效性,选择序列,来源里输入“=INDIRECT(B5)”(indirect函数的含义引用,并显示其内容),然后确定。这样,C5单元格的内容就会根据B5的内容去索引自定义的名称来显示。 根据上一步的同样的方式,设置品牌下的下拉菜单,注意数据有效性“来源”中输入“=INDIRECT(C5)”。最终效果如下: 到现在,三级下拉菜单就设置完成了。多级下拉菜单的原理是一样的。
Excel2010制作一二级下拉菜单 作者:郇冰洁文章来源:本站原创点击数:8530 更新时间:2011-7-6 1. 功能描述。 Excel中用户输入数据时,Excel会产生一个下拉菜单,只允许用户输入菜单中预设好的这些数据。一级的下拉菜单常用于性别、政治面貌、是否判断内容;除此之外,二级的下拉菜单也很常用,例如在某企业的招聘网站上,你选择某个部门,后面就只能选择属于这个部门的一些职位,那么这些下拉菜单是如何制作的呢? 2. 一级下拉菜单 1) 选中“性别”数据区域 2) 执行“数据/有效性”命令,打开“数据有效性”对话框; 图1 3) 单击“设置”选项卡,在“允许”栏选择“序列”,“来源”中输入“男,女”(不含引号,用英文单引号分隔);
图2 4) 单击“确定”按钮。 3. 二级下拉菜单 1) 先列出一个基本表表1。将A17:A19选中,在地址栏定义为“人力资源部”,并回车。检验的方法可以再选择A17:A19,地址栏会显示“人力资源部”。旧版本的MSO Excel会有一个专门的名称定义菜单,2010这样的定义方式更方便了,大家可以自己对照。
图3 同样方法,将B17:B20和C17:C20分别定义为“财务部”和“市场部”。 2) 再将A16:C16定义为“部门”。至此,层级上的定义就做好了,可以利用地址栏检验一下定义是否成功。
图4 3) 在要绘制的工作表表2里面,列出“部门”和“职位”两列。
图5 4) 按照之前“一级下拉菜单”的制作步骤,分别给“部门”列下的数据区域制作下拉菜单,不同的是,在“数据有效性”对话框中,“来源”是“=部门”,这个部门就是之前基本表中定义为“部门“,实际上包含了“人力资源部,财务部,市场部”三个内容。 图6 如果出现“源格式错误”提示框,需要检查一下定义是否正确,但是有的时候是软件抽象,不用理他,重新试试。这样,“部门”这一列就可以选择这三个部门了。
移动网站的导航设计 导航是互联网网站最重要的组成部分之一,它涉及到产品的信息架构、页面布局和用户交互行为等诸多方面。一个网站用户体验的优劣往往和导航的优劣有密切的联系。 随着移动互联网的发展,越来越多的网站以移动网站的形式移植到手机上。在网站移植过程中,导航的重新设计有什么变化和设计要点呢,本文尝试做出一些研究。 导航的目的 在研究导航之前,我们不妨从导航的使用目的谈起。如果把网站比成一座大厦,那导航可认作是大厦内的指引系统。导航的使用目的归纳起来主要有以下几个方面: 1. 引导用户在网站页面间移动和浏览,提供获取信息的路径。全局导航、局部导航等都是为了用户浏览相关的页面提供引导,方便用户找到所求。 2. 理清网站各部分内容之间的关系,使用户了解网站全景。最常见于全局导航和站点信息导航,它们展现了整个网站的目录信息,用户可快速理解网站结构,对网站有整体的把握。 3. 定位用户在网站中所处的位置。这个功能常见于面包屑和相关导航中,它帮助用户识别当前浏览的页面与网站整体内容间关系,使用户了解当前页面和网站其它内容的联系和区别。 导航变化的原因 从PC端到移动端导航变化的原因归根结底是由物(设备的软、硬件差异)、景(使用情景和操作方式)、事(用户需求和使用目的)差异。这些因素相互交织,对移动终端的导航设计有显著的影响。 本文尝试从类型、内容、样式等方面结合实例来说明PC端到移动端网站导航设计的变化: 一、常用导航类型变化 网页导航的划分有不同的维度。网页导航按照作用范围的不同可以分为三大类:结构性导航、关联性导航和公用程序导航。根据《web 导航设计》,三者的关系可描述如下:
一、使用Dreamweaver CS5制作下拉菜单 1. 在“插入”面板中点击“绘制AP Div”按钮插入一个AP Div。请阅读Dreamweaver CS5插入AP Div。 2. 选择刚才插入的AP Div。请阅读Dreamweaver CS5激活、选择和删除AP Div。 3. 在AP Div属性面板上,设置AP Div的参数。如下图所示: 请阅读Dreamweaver CS5中AP Div属性面板。 4. 在AP Div内单击,将光标放在AP Div内,然后插入一个一行四列的表格,如下图所示: 请阅读Dreamweaver CS5插入表格。 (1)按住Ctrl键的同时点击表格的四个单元格,设置它们的宽度都为120。请阅读Dreamweaver CS5改变单元格的高度和宽度。 (2)在单元格中分别输入主菜单名称,然后加上链接。请阅读Dreamweaver CS5创建超链接。如下图所示: 如果AP Div与表格的设置不一致,可以分别调整AP Div或者表格。 5. 重复1.2.3.的步骤再次插入一个AP Div,然后设置AP Div的参数。如下图所示:
注意:“左”和“上”两个参数是设置这个AP Div距离窗口左边框和上边框的距离的,如果填写的不正确,会导致子菜单的错位和以后的可用性。 6. 在apDiv2中输入下拉菜单的内容,在此仍用表格进行排版。如下图所示: 7. 为“网络编程”再制作一个AP Div,仍然重复1.2.3.的步骤插入一个AP Div,然后设置AP Div的参数。如下图所示: 8. 在apDiv3中输入下拉菜单的内容,仍然使用表格排版。因为表格排版比较方便,当然也可以使用其它方法。如下图所示: 9. 在“窗口”菜单中选择“AP 元素”命令,打开“AP 元素”面板。如下图所示:
实验六 CSS制作导航栏 1实验目的 1)掌握CSS的类选择器和派生选择器; 2)掌握导航栏的制作方法; 3)掌握CSS中伪类(Pseudo-Classes)的使用。 2实验内容 1)使用CSS制作导航菜单栏; 2)使用伪类的属性使菜单动起来; 3)丰富实验三中的网站栏目,为你的网站设计栏目结构,使其更加完善; 4)制作一个绚丽的导航栏,应用到实验三中网站上。 3实验仪器、设备 1)PC机最低配置:2G Hz以上CPU;1G以上内存;1G自由硬盘空间; 2)Internet Explorer、Firefox、Chrome、Opera、Safari任意浏览器; 3)Macromedia Dreamweaver 8或Macromedia Dreamweaver CS3。 4实验要求 1)掌握CSS的类选择器和派生选择器; 2)掌握导航栏的制作方法; 3)掌握CSS中伪类(Pseudo-Classes)的使用。
5实验步骤 5.1CSS导航入门 在前几次实验中,我们的网站已经已经越来越完善了,但我们的还没有一个漂亮的导航菜单栏,看到网络上的那些漂亮的菜单,是不是也想制作一个绚丽的菜单栏。这里我们要使用到CCS中伪类的特性,简单来说就是根据鼠标的状态来改变相关样式。 我们知道了什么是“内容块状元素和内联元素”,以及XHTML+CSS布局的核心概念“盒子模型”,同时又学习了一下页面布局中两种方法中的一种方法“浮动”,这次我们就利用这三个概念,来制作一款,经典的导航条,别看它其貌不扬,可是网上所有的导航条都可以再它的基础上修改而来,其实理论都是一样的,只要你能理解并学会这节课的内容,以后再困难的导航条你都可以很应对,EASY !!!OK!我们要做的导航条的效果如下,鼠标移动上去背景变黑,并且字体颜色变成白色 5.2制作导航菜单 新建一个html文档,我们要先做一个容器(要求:ID为“nav”,宽度为960px,高度为:35px,位于页面水平正中,与浏览器顶部的距离是30px;),这个容器就是放我们的导航的,html代码如下:
Css制作导航菜单 除非你的网站只有一页,不然你一定会用的导航的.事实上,导航在网页设计中是最重要部分之一.你要用很多时间去考虑如何让浏览者更容易访问你的网站. 在以前做网站导航时,往往依赖于图像,表格,和javascript.而这些都严重的影响了网站的可访问性和可使用性.如果在一个缺乏支持javascript的用户,那么你的网站导航将无算正常的显示.比如说一个用户把浏览器的javascript关闭掉,或者在一个只能读纯文字的手持设备--它们将无算从你的网站读到所有的数据.如果你的委拖人不注重这方面,那么告诉他繁杂的菜单会阻止搜索引擎的排名.(木木:像禅意花园就是一个不错的CSS网站.) 使用CSS可以创建一个更有吸引力的导航,因为CSS没有和文本混合在一起,所以确保了导航的可访问性和使那些手持设备也可以读出.在这个教程里我们将看到一个基于CSS的导航.基于CSS的网站会加快网页加载的时间,这样基于图像的导航将渐渐的被淘汰掉. 导航的结构 先看效果图: 导航的本质是让浏览者更好的访问你的网站,所以要建立有意义的语义.使CSS和语义相符合,为了以后方便维护.注意要避免现有浏览器的不兼容. 解决方案 下面是导航的HTML和CSS的代码,效果如图. 这是创建导航的HTML代码 =========================
"https://www.doczj.com/doc/856064382.html,/TR/xhtml1/DTD/xhtml1-strict.dtd">