中职高教版高二《网页设计与制作》任务3.3 其他类导航条制作课件

项目3 制作网站导航系统 ——任务3.3其他类导航条制作 高等教育出版社 Higher Education Press 任务3.3 其他类导航条制作 目录 01 活动1 制作下拉菜单 02 活动2 制作spry菜单 高等教育出版社 Higher Education Press 任务3.2 其他类导航条制作 01 活动1制作下拉菜单 高等教育出版社 Higher Education Press 活动1 制作下拉菜单 项目3 制作网站导航/任务3.3 其他类导航条制作/活动1 制作下拉菜单 【下拉菜单】 下拉菜单是导航中最常见的效果之一，鼠标轻点或移过去，就会出现一个更加详细的菜单，它不仅节省了网页排版上的空间，使网页布局简洁有序，更是使网页增色不少。下拉菜单利用了Behaviors(行为)面板中的内置方法Show-Hide Layers(隐藏-显示层)方法，并用onMouseOver(鼠标移至)和onMouseOut(鼠标移开)来触发层的隐藏和显示，而将要出现的菜单就在层中。 高等教育出版社 Higher Education Press 活动1 制作下拉菜单 项目3 制作网站导航/任务3.3 其他类导航条制作/活动1 制作下拉菜单 【作业步骤】 （1）打开Dreamweaver软件，新建文件index.html，设置页面属性。 （2）创建栏目导航。用“AP Div”创建层，在“层”中插入一个1行5列的表格，并输入文字。 （3）创建下拉菜单。用“AP Div”在“栏目导航”第一个单元格下创建层，在在“层”中插入一个5行1列的表格，在表格中输入文字。 （4）设置当鼠标经过导航文字“所有商品”时，出现下拉菜单。用“行为”面板的内置方法Show-Hide Layers(隐藏-显示层)方法，及onMouseOver(鼠标移至)和onMouseOut(鼠标移开)来触发层的隐藏和显示。 （5）保存网页文件，预览网页效果 高等教育出版社 Higher Education Press 活动1 制作下拉菜单 项目3 制作网站导航/任务3.3 其他类导航条制作/活动1 制作下拉菜单 【小助手1】AP Div AP Div是一种能够随意定位的页面元素，如同浮动在页面里的透明层，可以将AP Div放置在页面的任何位置。由于AP Div中可以放置包含文本、图像或多媒体对象等其他内容，很多网页设计者都会使用AP Div定位一些特殊的网页内容。 AP Div属性面板 高等教育出版社 Higher Education Press 活动1 制作下拉菜单 项目3 制作网站导航/任务3.3 其他类导航条制作/活动1 制作下拉菜单 【小助手1】AP Div CSS-P元素：在下拉框中设置AP Div的ID。 左：设置AP Div的左边缘。输入一个数值，要带上单位px。 上：设置AP Div的顶部边缘。输入一个数值，要带上单位px。 宽：设置AP Div内容区域的宽度。输入一个数值，要带上单位px。 高：设置AP Div内容区域的高度。输入一个数值，要带上单位px。 Z轴：设置AP Div的层叠顺序。输入一个数值，不需要单位。 可见性：设置AP Div是否可见。在下拉框中任选一项。默认default（可见），inferit(主用于嵌套的AP Div元素的父级上，表示继承父级的显示属性)，visible（可见），hidden（不可见）。 高等教育出版社 Higher Education Press 活动1 制作下拉菜单 项目3 制作网站导航/任务3.3 其他类导航条制作/活动1 制作下拉菜单 【小助手1】AP Div 背景图像：设置AP Div的背景图像。直接输入图像的URL地址，或者点击“文件夹”按钮，选择图像文件。 背景颜色：设置AP Div的背景颜色。 溢出：设置AP Div的内容超过其指定高度及宽度时处理的方式。 剪辑：对AP Div包含的内容进行剪切。包括“左、右、上、下”项，可以分别输入一个数值，要带上单位px。 高等教育出版社 Higher Education Press 活动1 制作下拉菜单 项目3 制作网站导航/任务3.3 其他类导航条制作/活动1 制作下拉菜单 【小助手2】行为面板的“显示-隐藏元素” “显示-隐藏元素”行为可以显示、隐藏或者恢复一个或多个页面元素的默认可见性。主要用于在用户与页面进行交互时显示信息。 高等教育出版社 Higher Education Press 活动1 制作下拉菜单 项目3 制作网站导航/任务3.3 其他类导航条制作/活动1 制作下拉菜单 【知识链接】行为面板 单击“+”按钮，打开动作菜单，添加行为；单击“-”按钮，删除行为。 添加行为时，从动作菜单中选择一个行为项。 单击事件列右方的三角，打开事件菜单，可以选择