你现在的位置:首页》
欢迎光临菜鸟网站,请留下你的宝贵意见,我会不断改进!

学习横向导航条的制作

  方妹妹说:“你写的东西我看不懂!”今天我化一天时间,自己边学,边抓图,多辛苦哦,应该够菜的了,跟上!跟上!踩着我的脚印。

1.在Dreamweaver中:文件--新建,创建一个新文件;

2.为新文件取个英文名后保存文件;

3.下面开始实战,红字为基本操作:

4.光标停在工作区,点击小三角,选择布局工具栏,点击“插入DIV标签”

5.在出来的两个对话框里作如下新建CSS规则设置:(选择器名称可以自己选择,要用英文,我是横向导航的首字拼音,#hxdh,并且前面要加#号)

6.新建选择器#hxdh面板出来后直接“确定”,把工作区里“此处显示新 Div 标签的内容”删除

7然后在内容区输入:实例教程,学习资料,素材中心,相关软件,学习站点,我的习作等几项内容,并在每一项内容后按回车换行;(导航项目设置成你自己想要的内容)

8.选中导航项目,选“文本工具组”点击ul图表,(还是点小三角,进行选择)完成列表设置;

9.在Dreamweaver中的代码视图中已经自动插入如下代码:

<ul>
<li>实例教程</li>
<li>学习资料</li>
<li>素材中心</li>
<li>相关软件</li>
<li>学习站点</li>
<li>我的习作 </li>
</ul>

10.下面编写CSS代码

在Dreamweaver右上部的样式面板上,双击#hxdh,打开#hxdh的设置面板,前面我们没有进行任何设置,这个操作经常要用,请记住哦!

在出来的对话框里,作如下CSS规则定义设置:边界与填充全部为0;(CSS规则定义设置都将在这里操作,包括修改,所以搞懂所有分类里的内容和参数含义就是编写CSS的关键)

11.选中所有导航项目,右键点击选中的项目,选择“CSS样式--新建”

12.为#hxdh li设置样式:参照CSS规则定义设置 面板,作如下设置:

分类--方框,浮动--左对齐;

分类--列表,类型--无;

在代码视图上部自动加入以下代码:

#hxdh li {
float: left; /*导航横排*/
list-style-type: none; /*取消列表默认样式*/
}

float: left; 这个设置就是导航横排的关键代码咯。list-style-type: none;这句是取消默认的圆点样式。

13.为每个导航项目上加上空连接:分别选中导航项目,在属性面板的连接中输入 # 字符,当然以后还是要把连接做好的;

14.为导航的 a 连接对象编写样式控制:右键点击导航项目,选择“CSS样式--新建”,选择器填写:#hxdh li a ,在#hxdh li a 的CSS规则定义对话框中填写以下数据:(见CSS规则定义设置)代码说明如下,

#hxdh li a {
color: #000000;/*分类--类型:颜色--#000000;*/
text-decoration: none;/*分类--类型:修饰--无;*/
background-color: #99CCCC;/*分类--背景:背景颜色-- #99CCCC;*/
text-align: center;/*分类--区块:文本对齐--居中;*/
height: 22px;/*分类--方框:高--22px*/
width: 97px;/*分类--方框:宽--97px*/
margin-left: 2px;/*分类--方框:边界--左--2px*/
padding-top: 10px;/*分类--方框:填充--上--10px*/
display:block;/*分类--区块:显示--块*/
}

11.设置把鼠标移到导航时,导航出现响应:右键点击导航项目,选择“CSS样式--新建”,选择器填写:#hxdh li a:hover

#hxdh li a:hover {
color: #FFFFFF;/*分类--类型:颜色-- #FFFFFF*/
background-color: #003399;/*分类--背景:背景颜色--#003399*/
}

呵呵,大功告成 ,虽然不好看,但过程齐全了,明天继续做,用图片代替背景色,那就漂亮了。

 

2009年2月7日

12.用图片代替背景色

   用PS制作两张背景图片,保存到网页同一目录下;
   在右上部的样式面板上,双击#hxdh li a,打开“#hxdh li a”CSS规则定义面板,进行修改;
   分类--背景:点击“浏览”按钮,找到图片地址,再取消背景色。
   用同样方法,替换#hxdh li a:hover的背景图象。

   红色文字为基本操作,均有图片配合,多做几次,记住了,你也就学会了。

2009年2月8日