如何用DW制作导航条 如何使用Dreamweaver做一个网页的导航栏
\u600e\u6837\u7528dw\u5236\u4f5c\u5bfc\u822a\u680f\u4e0b\u62c9\u83dc\u53551\u3001\u5148\u6253\u5f00Dreamweaver\u3002\u5982\u679c\u4e8b\u5148\u6709\u597d\u7684web\u6e90\u6587\u4ef6\uff0c\u53ef\u4ee5\u76f4\u63a5\u5355\u51fb\u201c\u6587\u4ef6\u6253\u5f00\u201d\u6253\u5f00web\u6e90\u6587\u4ef6\u3002\u5982\u679c\u6ca1\u6709\uff0c\u8bf7\u5355\u51fb\u201c\u6587\u4ef6\u201d\u201c\u65b0\u5efa\u201d\u4ee5\u521b\u5efa\u65b0\u7684web\u6e90\u6587\u4ef6\u3002
2\u3001\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u65b0\u7c7b\u578b\u662fOK\u3002\u5982\u679c\u60a8\u6709\u5176\u4ed6\u9700\u8981\uff0c\u53ef\u4ee5\u9009\u62e9\u9875\u9762\u7c7b\u578b\u3001\u5e03\u5c40\u7b49\uff0c\u7136\u540e\u5355\u51fb\u201c\u521b\u5efa\u201d\u6309\u94ae\u3002
3\u3001\u521b\u5efa\u65b0\u7f51\u9875\u540e\uff0c\u5355\u51fb\u201c\u8bbe\u8ba1\u201d\u9875\u4e0a\u7684\u201c\u63d2\u5165-\u8868\u5355-\u9009\u62e9\uff08\u5217\u8868/\u83dc\u5355\uff09\u201d\u4ee5\u63d2\u5165\u53ef\u9009\u62e9\u7684\u4e0b\u62c9\u8868\u5355\u3002
4\u3001\u6216\u8005\u5728\u83dc\u5355\u680f\u4e0b\u6709\u4e00\u4e2a\u8868\u5355\u9009\u9879\u56fe\u6807\u3002\u5c06\u9f20\u6807\u653e\u5728\u4e0a\u9762\u663e\u793a\u201c\u9009\u62e9\uff08\u5217\u8868/\u83dc\u5355\uff09\u201d\u5e76\u5355\u51fb\u5b83\uff0c\u6216\u63d2\u5165\u4e0b\u62c9\u83dc\u5355\u3002
5\u3001\u7136\u540e\u5f39\u51fa\u63a5\u53e3\uff0c\u60a8\u9700\u8981\u8f93\u5165\u6807\u8bb0\u8f85\u52a9\u51fd\u6570\u7684\u5c5e\u6027\u3002\u7528\u82f1\u6587\u6216\u6570\u5b57\u586b\u5199\u8eab\u4efd\u8bc1\u3002\u6807\u8bb0\u662f\u4e0b\u62c9\u83dc\u5355\u7684\u76f8\u5e94\u6570\u636e\u6807\u9898\uff0c\u5982\u5730\u5740\u3001\u6027\u522b\u7b49\u3002\u5728\u6b64\u5904\u586b\u5199\u201c\u6027\u522b\uff1a\u201d\u7136\u540e\u5355\u51fb\u201c\u786e\u5b9a\u201d\u3002
6\u3001\u5f39\u51fa\u662f\u5426\u6dfb\u52a0\u8868\u5355\u6807\u7b7e\u7684\u63d0\u793a\uff0c\u9009\u62e9\u201c\u662f\u201d\u3002
7\u3001\u6b64\u65f6\uff0c\u4e0b\u62c9\u83dc\u5355\u5c06\u63d2\u5165\u9875\u9762\u3002\u5355\u51fb\u4e0b\u9762\u7684\u5217\u8868\u503c\u5c06\u5185\u5bb9\u6dfb\u52a0\u5230\u4e0b\u62c9\u83dc\u5355\u4e2d\u3002
8\u3001\u8df3\u51fa\u5217\u8868\u503c\u754c\u9762\uff0c\u5e76\u586b\u5199\u9879\u76ee\u6807\u7b7e\u4e0a\u7684\u4e0b\u62c9\u83dc\u5355\u9009\u9879\u3002\u4f8b\u5982\uff0c\u6211\u60f3\u5728\u8fd9\u91cc\u5236\u4f5c\u4e00\u4e2a\u6027\u522b\u9009\u62e9\u4e0b\u62c9\u83dc\u5355\u3002\u5728\u8fd9\u91cc\uff0c\u586b\u5199\u7537\u6027\u503c\u548c\u9879\u76ee\u6807\u7b7e\u3002
9\u3001\u7136\u540e\u5355\u51fb\u52a0\u53f7\u5728\u4e0b\u9762\u6dfb\u52a0\u65b0\u6807\u7b7e\u548c\u503c\uff0c\u5e76\u586b\u5199\u9634\u6027\u3002\u7136\u540e\u5355\u51fb\u201c\u786e\u5b9a\u201d\u6309\u94ae\u3002
10\u3001\u7136\u540e\u5355\u51fb\u754c\u9762\u4e0a\u7bad\u5934\u6307\u793a\u7684\u5c0f\u56fe\u6807\uff0c\u9009\u62e9\u4e00\u4e2a\u6d4f\u89c8\u5668\uff0c\u7136\u540e\u5355\u51fb\u5b83\u4ee5\u67e5\u770b\u6d4f\u89c8\u5668\u4e0a\u7684\u9884\u89c8\u6548\u679c\u3002
11\u3001\u6b64\u65f6\uff0c\u7cfb\u7edf\u5c06\u63d0\u793a\u60a8\u4fdd\u5b58\u5bf9\u7f51\u9875\u6587\u4ef6\u7684\u66f4\u6539\u3002\u9009\u62e9\u201c\u662f\u201d\u4fdd\u5b58\u3002
12\u3001\u7136\u540e\u60a8\u53ef\u4ee5\u770b\u5230\u60a8\u5728\u6d4f\u89c8\u5668\u4e0a\u521b\u5efa\u7684\u4e0b\u62c9\u83dc\u5355\u7684\u5916\u89c2\u3002\u5355\u51fb\u4e00\u6b21\u4e0b\u62c9\u7bad\u5934\u9009\u62e9\uff0c
\u5982\u679c\u4f60\u4e0d\u4f1a\u7f16\u7a0b\uff0c\u53ef\u4ee5\u5230\u5f88\u591ajs\u6e90\u7801\u7ad9\uff0c\u4e0b\u8f7d\u3001\u590d\u5236\u5bfc\u822a\u680f\u7684\u6e90\u4ee3\u7801\uff0c\u7c98\u8d34\u5230\u7f51\u9875\u4e0a\u4f7f\u7528\u3002
\u4e5f\u6709\u4e0d\u5c11\u7f51\u9875\u5bfc\u822a\u680f\u5236\u4f5c\u8f6f\u4ef6\uff0c\u53ef\u4ee5\u65b9\u4fbf\u5730\u505a\u51fa\u9700\u8981\u7684\u83dc\u5355\uff0c\u540c\u6837\u53ef\u4ee5\u590d\u5236\u5230\u7f51\u9875\u4e0a\u4f7f\u7528\u3002
兄弟,你要做网页,代码肯定是要学的 不懂可以私
相信我,慢慢来不难的,我帮你写好了,你只需要修改自己喜欢的样式即可
并且所有要修改样式的地方我都帮你备注好了
您只需要把 这堆东西放入<head></head>两个标签之间的中间
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: BLACK; /*导航栏背景颜色*/
}
li {
float: left; /*在导航栏内对齐方式*/
}
li a {
display: block;
color: white; /*字体颜色*/
text-align: center; /*字居中*/
padding: 14px 14px; /*框大小*/
text-decoration: none; /*把<a>标签自带的下划线去掉*/
}
li a:hover {
background-color: #228B22; /*鼠标经过框框时的背景颜色*/
font-size: 25px; /*鼠标经过时字体大小*/
}
</style>
在把 这堆放在<body></body>之间
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
示例页面HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: BLACK; /*导航栏背景颜色*/
}
li {
float: left; /*在导航栏内对齐方式*/
}
li a {
display: block;
color: white; /*字体颜色*/
text-align: center; /*字居中*/
padding: 14px 14px; /*框大小*/
text-decoration: none; /*把<a>标签自带的下划线去掉*/
}
li a:hover {
background-color: #228B22; /*鼠标经过框框时的背景颜色*/
font-size: 25px; /*鼠标经过时字体大小*/
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>
我觉得还是DIV+CSS来做比较好。这个导航很简单啦！有兴趣可以加我QQ交流下330311197
导航条制作方法：
移动光标到需要导航条的地方，单击主菜单栏的“Insert\Navigation Bar”子命令，或直接单击Objects面板上的图标，弹出“Insert Navigation Bar”对话框，此时我们可以进行各种设置来实现上述功能：
在“Element Name”项后的文本框填入这个部位的命名，也可以不填，这时Dreamweaver 3将自动给它命名。在Dreamweaver中每部分中最多可设四个状态下的图像：“Up Image”项是该部位的初始图像，在其后文本框填入已准备好的图像的地址，或点击右边Browse按钮来选择。每个部位可只设置Up Image项，其下的“Over Image”、“Down Image”和“Over While Down Image”三项可以不设置。其中，“Over Image”项是鼠标移动到这个部位上时显示的图像(本例中选择)；“Down Image”项是鼠标点击该部位后显示的初始图像；“Over While Down Image”项是鼠标点击后当鼠标再次移动到这个部位上时显示的图像。注意：Element Name项和 Up Image项是必需的，所有的调用图像都会在系统的提示下保存在Dreamweaver 3文件夹中，以便调用。 当然，还可给该部位设置超级链接：在下面的“When Clicked Go To URL”项后文本框填入链接到的文件的地址，或单击Browse按钮选择，当鼠标移动到这个部位上时，在状态栏中可以看到链接到的地址。When Clicked Go To URL项后有一个下拉选框，这是设置超级链接的目标。
接着是“Options”项，若选中“Preload Images”选框，则浏览者浏览页面时，所有图像将在页面下载的同时全部下载，整个页面打开的速度会慢些，但图像间转换会没有延迟，选中它。反之，不选Preload Images选框，则页面下载的同时只下载初始图像，其它图像按顺序下载，整个页面打开的速度较快，但图像间转换会有延迟。若选中“Show “Down Image”Initially”选框，则将Down Image设为初始图像。此时，Over While Down Image项改为鼠标移动到这个部位上时显示的图像，Up Image项改为鼠标点击该部位后显示的初始图像，Over image项改为鼠标点击后当鼠标再次移动到这个部位上时显示的图像。
最下面是“ Insert”项，选框中有Horizontally(水平)和Vertically(垂直)两个选项。选中Horizontally为导航条水平展开，选中Vertically 为导航条垂直展开。 Use Table 项，选中后，Dreamweaver自动生成HTML代码将导航条各部位用表格隔开。
当一个部位设置完成后，要添加其他部位，可点击对话框上方的“+”按钮，可按上面的步骤进行新部位的设置。要删去某一个部位，在“Nav Bar Elements”选框中先选中，再点击对话框上方的“-”按钮即可。
另外，使用设置导航条图像中的高级功能,可改变文档中基于当前按钮下的其他的图像。在默认下,单击导航条中的元素时,所有导航条中元素都会自动地返回原来默认的状态。若想设置被选中图像的上浮或是下沉的不同效果时,可用导航条中的高级功能:在“Behaviors”面板中的“Actions”标签页,单击其上面的“+”号按钮,在弹出的菜单中选择“Set Nav Bar Image”命令,弹出Set Nav Bar Image 对话框中,选择“Advanced”标签页,对高级属性进行设置。其中,若选择“Over Image or over while Down Image”项,则当鼠标划过图片时显示其上面的图片,有上浮或是下沉的效果,并在“Also Set Image”文本框中选择要显示的图片,同时在其下面的“If Down To Image File”中选择当鼠标按下时要显示的图片路径；若选择“Down Image”项,则当浏览者单击所选图像后,显示另外的图片。
存盘后，按F12键测试所作导航条。
很简单其实这个我也不会。
是不是
Photoshopcs5呀？
可以看帮助。
绛旓細杩欎釜寰堝鏉傜殑锛佽鐢ㄨ褰曢泦銆1锛屸滄彃鍏モ濇爮(涓嶆槸鎻掑叆鑿滃崟)鈥斿簲鐢ㄧ▼搴忊旇褰曢泦瀵艰埅鐘舵 2锛岄夋嫨绫诲瀷 3锛屸滄彃鍏モ濇爮鈥斿簲鐢ㄧ▼搴忊旇褰曢泦鍒嗛〉鏃佺殑灏忎笁瑙掆旇褰曢泦瀵艰埅鏉 4锛岄夋嫨2涓殑绫诲瀷锛屾柟寮忚嚜宸遍夛紝鍥剧墖鎴栬呮枃瀛 5锛岀‘瀹氬暒 杩欎釜php鐨勪笢瑗夸簡锛屽崟绾殑DW鏄仛涓嶄簡鐨勶紒甯屾湜鎴戠殑鍥炵瓟瀵逛綘鏈夌敤 ...
绛旓細鍙互鐢变袱绉嶅父鐢ㄧ殑鏂规硶 绗竴锛氭妸浣犵殑鍑犱釜鍒嗙被閮借鍒囨垚鍗曠嫭鐨勬寜閽紝鎻掑叆鍒拌〃鏍兼垨鑰呭叾浠栨爣绛撅紙ul銆乴i锛夐噷闈㈡潵鐢 绗簩锛氫綘閭ｄ釜缁胯壊鐨勫仛鑳屾櫙锛岀劧鍚庣敤琛ㄦ牸鎴栧叾浠栨爣绛撅紙ul銆乴i锛夋潵鎺у埗閭ｄ簺鏂囧瓧閾炬帴 濡傛灉涓嶆竻妤氾紝鍙互鐣欎釜閭锛屾垜甯綘鍋氬ソ 鍙戠粰锛岃繖鏍蜂綘浼氱湅鐨勬噦涓浜 ...
绛旓細鍙互鐩存帴鍦DW鐨勪唬鐮佸尯鍩熻緭鍏ョ浉搴斾唬鐮佸嵆鍙В鍐筹細鑳屾櫙鍥剧墖hover 寰堢畝鍗曠殑 globalNavi { width: 908px;margin: 0 auto 18px;height: 42px;overflow: hidden;} globalNavi li { float: left;} globalNavi li a { display: block;} globalNavi li.gnavi01 a { width: 97px;background: url(../...
绛旓細涓銆 瀵艰埅鏉鐨鍒朵綔 棣栧厛杩涜涓浜涘繀瑕佺殑鍓嶆湡宸ヤ綔锛屾寜CTRL+J锛屾墦寮Page Properties锛堥〉闈㈠睘鎬э級绐楀彛锛屽弬鏁拌缃鍥句簩锛岃繖涓璁剧疆瀵硅彍鍗曠殑浣嶇疆灏嗘湁褰卞搷锛屾墍浠ヨ濡傚浘璁剧疆銆傛寜CTRL+F2鎵撳紑Objects闈㈡澘锛岀偣鍑诲眰[img=20,20]file:///G:/绋嬪簭鎵鐢ㄧ殑鏉愭枡/缃戠珯/缃戦〉鍒朵綔涓嬭浇鏂囩珷/[澶╂瀬璁哄潧缃戦〉璁捐]涓嬫媺鑿滃崟鍏ㄦ敾鐣ヤ箣...
绛旓細DW濡備綍鎶婂鑸爮鍋氭垚椤堕儴锛熶竴鑸潵璇达紝瀵艰埅鏉鏄氳繃缁濆瀹氫綅鏉ユ寚瀹氱殑銆傜ず渚嬩唬鐮佸涓:CSS浠ｇ爜:銆傚鑸獅 浣嶇疆:鍥哄畾锛/*缁濆瀹氫綅锛屽浐瀹氭槸鐩稿浜庢祻瑙堝櫒绐楀彛鐨勫畾浣嶃*/ top:0锛/*璺濈獥鍙ｉ《閮ㄧ殑璺濈*/ 宸:0锛/*璺濈獥鍙ｅ乏渚х殑璺濈*/ 瀹藉害:100%锛/*瀹藉害璁剧疆涓100%*/ 楂樺害:40px/*楂樺害*/ z鎸囨暟:99锛/*...
绛旓細鑻ユ槸瀵艰埅涓湁鏂囧瓧鐨勮瘽锛岄鍏堢粰瀵艰埅涓殑鏂囧瓧鍔犱笂閾炬帴 css鏍峰紡 濡備笅锛堝搴︽牴鎹渶瑕佽缃 width锛***px锛涳級a{ color:#333; display:block; background:#999; } a:hover{ color:#FFF; background:#060;} 鍙︿竴绉嶈鏄洿鎺ヤ娇鐢ㄥ浘鐗囪瘽锛堟彁鍓嶅垏濂藉浘鐗囷級 鍙互 a{ 娣诲姞鐏拌壊鑳屾櫙鍥剧墖鏂囧瓧榛戣壊} a:hover{...
绛旓細鎴戜箣鎵浠ユ病鏈夋妸浠ｇ爜娌句笂鏉ワ紝鏄洜涓烘垜鐪嬪埌浣犺鍒扳滄垜涓嶄細绋嬪簭锛屽彲浠ョ洿鎺ュ憡璇夋垜閿洏鍜岄紶鏍囨搷浣滃悧锛熲濊瀹炶瘽锛屾垜鐪熺殑涓嶄細鍦ㄨ璁¤鍥鹃噷闈㈢敤閿洏鍜岄紶鏍囧幓鍋歞iv鏍囪锛岃寰楀湪瀛︽牎鐨勬椂鍊欒佸笀涔熸湁鏁欒繃锛屼絾鏄垜灏辨病鏈夊锛屾垜灏变笓鐗涜灏栵紝鎴戝亸瑕佺敤鑷繁鐨勫弻鎵嬩竴涓唬鐮佷竴涓唬鐮佹暡鍑烘潵锛屾墍浠ユ垜涓嶄細璁捐瑙嗗浘鍋歞iv妗嗘灦...
绛旓細鍙互鏁翠釜鍋氭垚鑳屾櫙锛屾渶鐪佷簨鍎夸絾姣旇緝鍌荤殑鍋氭硶銆備篃鍙互鎶婅繖涓珫鏉″垏鍑烘潵锛屽仛鑳屾櫙瀹氫綅涓嶉噸澶嶏紝鏀惧湪鏂囧瓧鐨勫乏杈规垨鑰呭彸杈广
绛旓細鍋囧瑙嗛鎵鍦ㄧ殑div涓簍est;1銆佺粰瑙嗛鎵鍦ㄧ殑div,test,璁剧疆css鏍峰紡锛宲osition:relative;2銆佹妸瀵艰埅鏀惧叆test鍐呴儴.灏嗗鑸殑div璁剧疆position:absolute;left:鍧愭爣鍊紁x;top:鍧愭爣鍊紁x;鍏朵腑鍧愭爣鍊间负鏁板硷紝浣犲～澶氬皯灏变粠澶氬皯鍧愭爣寮濮嬨傜浉瀵逛簬test鐨勫乏涓婅璁＄畻銆
绛旓細
