--制作导航栏.pptx
《--制作导航栏.pptx》由会员分享,可在线阅读,更多相关《--制作导航栏.pptx(56页珍藏版)》请在咨信网上搜索。
1、 1 2 Contents Page目录页第5章 制作导航栏案例一 制作简单纵向导航栏案例二 制作简单横向导航栏案例三 制作带图像效果的横向导航栏案例四 制作带下拉菜单的横向导航栏 3 案例一 制作简单纵向导航栏案例说明 导航栏的主要功能是通过超链接实现从本页面跳转到浏览者想要查看的其他页面,其中鼠标移动到导航栏上的某个菜单项时一般会有变色效果。一个好的导航栏应让用户能快捷、准确地访问网站要展现的主要内容,同时导航栏的风格也要与网站本身的风格相匹配。导航栏包括纵向导航栏、横向导航栏、带下拉菜单的导航栏等。在制作导航栏的过程中,一般会应用CSS样式表来对导航栏进行设置和美化。本案例中,我们从最基
2、础的纵向导航栏开始学习。4 案例一 制作简单纵向导航栏案例步骤 在HTML 5中,导航栏是由标签定义的。导航栏一般分为横向横向和纵向向,针对使用制作的导航栏,横向菜单无须改变结构,只需设置样式的变化即可;此处制作的纵向菜单,需要使用“display:block;”属性改变超链接列表的结构。构建HTML结构1.步骤 01将本书附赠的“素材与实例第5章”文件夹拷贝至本地磁盘创建的“My Web”站点根目录中。步骤 02打开“文件”面板,在刚拷贝的文件夹“第5章task1”中新建一个名为“menu-lx.html”的网页文档。5 案例一 制作简单纵向导航栏案例步骤步骤 03在Dreamweaver中
3、打开新建的文档,在body区域输入文字“我的首页 心情日记 学习心得 工作笔记 生活琐碎 联系我们”。6 案例一 制作简单纵向导航栏案例步骤步骤 04选中所有输入的文字,单击“插入”面板“结构”类别中的“Navigation”按钮,弹出“插入Navigation”对话框,在“ID”编辑框中输入“dh”,然后单击“确定”按钮,插入标签。7 案例一 制作简单纵向导航栏案例步骤步骤 05添加超链接添加超链接,即为文字添加超链接标签。选中“我的首页”文字,单击“插入”面板“常用”类别中的“Hyperlink”按钮,打开“Hyperlink”对话框。由于现在还没有需要跳转的页面,所以在“链接”编辑框中输
4、入“#”符号(表示插入空链接),然后单击“确定”按钮。8 案例一 制作简单纵向导航栏案例步骤步骤 06参考步骤5的操作,依次为“心情日记”“学习心得”“工作笔记”“生活琐碎”和“联系我们”这些文字添加超链接。9 案例一 制作简单纵向导航栏案例步骤步骤 07保存文件。保存文件。按【Ctrl+S】组合键保存网页,然后按【F12】键在浏览器中预览效果。此时网页的结构部分制作完成,涉及的HTML标签如表5-1所示。标 签描 述网页主体标签HTML 5中的新标签,定义导航链接部分超链接文字超链接 10 案例一 制作简单纵向导航栏案例步骤设置CSS样式2.步骤 01指定在HTML页面中引入CSS样式表的方
5、法,这里使用内嵌样式,在标签对之间添加以下代码。11 案例一 制作简单纵向导航栏案例步骤步骤 02设置超链接样式,包括纵向排列,消除下划线,设置文字大小和颜色,设置背景颜色和内边距等。在步骤1输入的标签对之间输入代码。设置各超链接块高度为30像素,再设置行高为30像素,目的是让文字可以在块中纵向居中,这也是使用line-height实现内容纵向居中的方法。超链接标签属于行内元素,将其转换为块元素(display:block)的原因有两个,一是可以控制标签的宽度、高度及能填充边框等;二是为了使鼠标指针放在导航栏的任意位置(文字之外的地方)都可产生悬停效果。提示 12 案例一 制作简单纵向导航栏案
6、例步骤步骤 03设置鼠标移到超链接上时,超链接文字颜色发生变化的效果(使用hover伪类),在步骤2输入的代码下方输入代码。#dh a:hovercolor:#FFFFFF;/*设置超链接在hover状态时的文字颜色*/background-color:#000033;/*设置超链接在hover状态时的背景色*/border-left-width:10px;/*设置超链接在hover状态时左边框的宽度为10像素*/border-left-style:solid;/*设置超链接在hover状态时左边框的线型为实线*/border-left-color:#D8D803;/*设置超链接在hover状
7、态时左边框的颜色*/padding属性叫做填充(或内边距),用来设置块元素中的元素(如文字)同块边框之间的距离;margin属性叫做外边距,用来设置元素与元素之间的距离。13 案例一 制作简单纵向导航栏案例步骤步骤 04保存文件。保存文件。按【Ctrl+S】组合键保存网页,然后按【F12】键在浏览器中预览效果。a:hover表示鼠标放到超链接上时超链接的状态;a:link是超链接没被访问时的状态;a:active为鼠标单击超链接但没释放时的状态;a:visited为超链接被访问后的状态。对于其他元素也可设置动态效果,只需将a换成其他选择器名即可。提示 14 案例一 制作简单纵向导航栏支撑知识点
8、使用CSS的一些小技巧 display属性规定元素的显示类型,其具有多个不同的属性值,其中display:block表示将元素转换为块级元素。合理利用display:block属性1.要对行内元素进行有关高度、宽度等样式的设置,就需要为此行内元素添加display:block属性,将其转换为块元素。15 案例二 制作简单横向导航栏利用border设置特殊边框2.利用border可以对4个方向的边框分别进行设置。因此在设置边框的时候,可以单独设置一个方向的边框,也可以对多个方向的边框分别进行不同的样式设置。16 Contents Page目录页第5章 制作导航栏案例一 制作简单纵向导航栏案例二
9、制作简单横向导航栏案例三 制作带图像效果的横向导航栏案例四 制作带下拉菜单的横向导航栏 17 案例二 制作简单横向导航栏案例说明 本案例中,我们将通过制作简单横向导航栏,来继续学习制作导航栏的方法及CSS样式表的使用。本案例将会用到前一个案例中的一些步骤,同时会涉及到浮动、块元素等知识。18 案例二 制作简单横向导航栏案例步骤步骤 01打开“文件”面板,在上一案例中拷贝的文件夹“第5章task2”中新建一个名为“menu-lx.html”的网页文档。构建HTML结构1.步骤 02在Dreamweaver中打开新建的文档,在代码界面的body部分输入文字“雪域西藏”“天府四川”“稻城亚丁”“神奇
10、九寨”“永恒三峡”“雄秀峨眉”“川藏万里”“城市驿站”和“出国咨询”。步骤 03添加超链接,即为文字添加超链接标签。选中“雪域西藏”文字,单击“插入”面板“常用”类别中的“Hyperlink”按钮,打开“Hyperlink”对话框为文字添加空链接,然后参照同样的方法为其他文字添加空链接。19 案例二 制作简单横向导航栏案例步骤步骤 04将文字用将文字用标签括起来。标签括起来。在代码视图中选中前面输入的文字,单击“插入”面板“结构”类别中的“Navigation”按钮,弹出“插入Navigation”对话框,在“ID”编辑框中输入“topmenu”,然后单击“确定”按钮,插入标签。20 案例二
11、制作简单横向导航栏案例步骤步骤 01指定在页面中引入指定在页面中引入CSS样式的方法。样式的方法。本例使用内嵌样式,在标签对之间输入如下代码。设置CSS样式2.21 案例二 制作简单横向导航栏案例步骤步骤 02为块设置样式,包括设置背景颜色和高度,以及其内的文字大小和颜色等。本例中块的id为topmenu,所以用“#topmenu”选择器来控制其样式。在标签对之间输入如下代码。#topmenu background:#515151;/*设置nav块的背景颜色*/font-size:14px;/*设置nav块中文字的大小为14像素*/color:#ffffff;/*设置nav块中文字的颜色*/h
12、eight:27px;/*设置nav块的高度为27像素*/22 案例二 制作简单横向导航栏案例步骤步骤 03为块中的超链接标签设置样式。在步骤2输入的代码下方添加如下代码。#topmenu a float:left;/*将超链接块设置为向左浮动*/width:100px;/*设置超链接的宽度为100像素*/color:#FFF;/*设置超链接的文字颜色*/text-decoration:none;/*去掉超链接的下划线*/text-align:center;/*设置超链接块的文字对齐方式为居中*/line-height:27px;/*设置超链接块的行高为27像素*/23 案例二 制作简单横向导
13、航栏案例步骤步骤 04设置超链接在hover状态下的效果。在步骤3输入的代码下方添加如下代码。#topmenu a:hover background:#f00;/*设置超链接在hover状态下的背景色*/color:#fff;/*设置超链接在hover状态下的文字颜色*/当设置行内元素的属性为float:left以后,就不需要再设置display:block属性,除非这个元素有显示和隐藏状态的切换,即display:hidden属性和display:block属性的切换。24 案例二 制作简单横向导航栏案例步骤步骤 05保存文件。保存文件。按【Ctrl+S】组合键保存网页,然后按【F12】键在
14、浏览器中预览效果。这样一个简单的横向导航栏就完成了。25 Contents Page目录页第5章 制作导航栏案例一 制作简单纵向导航栏案例二 制作简单横向导航栏案例三 制作带图像效果的横向导航栏案例四 制作带下拉菜单的横向导航栏 26 案例三 制作带图像效果的横向导航栏案例说明 通过前面2个案例的学习,大家已经对导航栏有了初步的了解,现在我们需要在前面2个例子的基础上,对导航栏进行更深入的学习,制作一个带有背景图像变换效果的横向导航栏,当将鼠标指针移到导航栏的菜单项时背景会发生变化。27 案例三 制作带图像效果的横向导航栏案例步骤步骤 01打开“文件”面板,在案例一拷贝的文件夹“第5章task
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 制作 导航
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【快乐****生活】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【快乐****生活】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。