返回首页
当前位置: 主页 > 图形图像 > Dreamweaver教程 >

怎么用dreamweaver做简单的垂直导航

时间:2016-12-28 21:19来源:电脑教程学习网 www.etwiki.cn 编辑:admin

怎么用dreamweaver软件做一个简单的垂直导航呢,其实我们要学会一些简单的代码,慢慢的去练习,孰能生巧,下面微部落博客就为大家介绍一下,CSS纵向导航菜单通常是指放置在网页左侧或右侧的从上至下排列的一种导航形式。纵向导航菜单的使用也较为常见,如淘宝网的淘宝服务。这一篇DW教程就详细教你如何制作垂直导航,一起来看看吧。

步骤

1、打开Adobe Dreamweaver CC 2015。

DW教程:怎么用dreamweaver做简单的垂直导航

2、执行菜单栏中的”文件>新建“命令或按住Ctrl+N键打开”新建文档“对话框,选择其文档类型为HTML,单击”创建”按钮,即创建一个网页文档。

DW教程:怎么用dreamweaver做简单的垂直导航

DW教程:怎么用dreamweaver做简单的垂直导航

3、<body>和</body>之间添加”<div id=”menu”></div>”,如下图所示。

【解释】DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。DIV标签称为区隔标记。作用:设定字、画、表格等的摆放位置。

id属性:规定元素的唯一 id,通过 CSS 为带有指定 id 的元素改变或添加样式。

【基本语法】<div 属性=”属性值”>标签内容</div>

【功能说明】div元素为包含型的DIV块元素,可以设定放置在其”标签内容”中的元素(例如对齐方式),若是加上id、class等属性,则可设定任意范围的样式。

在HTML、XHTML文件中开始标签与结束标签都不可省略。

DW教程:怎么用dreamweaver做简单的垂直导航

4、<div id=”menu”>和</div>之间添加”<h3>全部商品分类</h3>”,如下图所示。

基本语法】<h#>标题文字</h#>

语法说明

1.标题标记本身具有换行的作用,标题总是从新的一行开始;

2.#用来指定标题文字的大小,#取1~6的整数值,取1时文字最大;取6时文字最小。

DW教程:怎么用dreamweaver做简单的垂直导航

DW教程:怎么用dreamweaver做简单的垂直导航

5、<body>和</body>之间添加”<ul></ul>”,如下图所示。

【基本语法】

<ul> ….</ul>

【语法说明】

在HTML文件中,可以利用成对的<ul></ul>标记插入无序列表。其里面有列表项标记<li></li>。

DW教程:怎么用dreamweaver做简单的垂直导航

6、<ul>和</ul>之间添加”<li>图书音像</li> <li>手机数码</li> <li>>电脑办公</li> <li>>家用电器</li>”,如下图所示。

基本语法】

<ul>

<li>….</li>

<li>….</li>

<li>….</li>

<li>….</li>

…..

</ul>

【语法说明】

列表项标记<li></li>用来定义列表项序列。

DW教程:怎么用dreamweaver做简单的垂直导航

DW教程:怎么用dreamweaver做简单的垂直导航

顶一下
(1)
100%
踩一下
(0)
0%
标签(Tag):dreamweaver 垂直导航
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
推荐内容