1 / 56
文档名称:

第5章--制作导航栏说课讲解.pptx

格式:pptx   大小:5,204KB   页数:56页
下载后只包含 1 个 PPTX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

第5章--制作导航栏说课讲解.pptx

上传人:nnyoung 2019/9/13 文件大小:5.08 MB

下载得到文件列表

第5章--制作导航栏说课讲解.pptx

文档介绍

文档介绍:网页设计案例教程案例步骤在HTML5中,导航栏是由<nav>标签定义的。导航栏一般分为横向和纵向,针对使用<nav>制作的导航栏,横向菜单无须改变结构,只需设置样式的变化即可;此处制作的纵向菜单,需要使用“display:block;”属性改变超链接列表的结构。“素材与实例\第5章”文件夹拷贝至本地磁盘创建的“MyWeb”站点根目录中。步骤02打开“文件”面板,在刚拷贝的文件夹“第5章\task1”中新建一个名为“menu-”的网页文档。案例步骤步骤03在Dreamweaver中打开新建的文档,在body区域输入文字“我的首页心情日记学****心得工作笔记生活琐碎联系我们”。案例步骤步骤04选中所有输入的文字,单击“插入”面板“结构”类别中的“Navigation”按钮,弹出“插入Navigation”对话框,在“ID”编辑框中输入“dh”,然后单击“确定”按钮,插入<nav>标签。案例步骤步骤05添加超链接,即为文字添加超链接标签<a>。选中“我的首页”文字,单击“插入”面板“常用”类别中的“Hyperlink”按钮,打开“Hyperlink”对话框。由于现在还没有需要跳转的页面,所以在“链接”编辑框中输入“#”符号(表示插入空链接),然后单击“确定”按钮。案例步骤步骤06参考步骤5的操作,依次为“心情日记”“学****心得”“工作笔记”“生活琐碎”和“联系我们”这些文字添加超链接。案例步骤步骤07保存文件。按【Ctrl+S】组合键保存网页,然后按【F12】键在浏览器中预览效果。此时网页的结构部分制作完成,涉及的HTML标签如表5-1所示。表5-1涉及的HTML标签标签描述<body></body>网页主体标签<nav></nav>HTML5中的新标签,定义导航链接部分<ahref="跳转页面">超链接文字</a>,这里使用内嵌样式,在<head></head>标签对之间添加以下代码。<styletype="text/css"><!----></style>