導航:首頁 > 萬維百科 > 網頁設計導航條怎麼做

網頁設計導航條怎麼做

 發布時間：2020-10-14 16:21:42

1、怎麼用fireworks製作網頁導航條

下載安裝 FIREWOKRS CS5（我目前電腦上已經安裝）並啟動軟體，建議大家購買正版軟體，此處不做過多說明。 新建一個寬950像素X35像素，解析度為72像素的畫布，並且點確定，如下圖二 選擇矩形工具，在畫布上拖動出一個大小為950X35像素黑白漸變的圖形 漸變的顏色大家可以根據自己網頁的風格進行調整），單擊屬性面板中的油漆桶工具，調整顏色為紅色漸變，調整完畢，畫布上的矩形圖形的顏色已經發生了變化。 選擇矢量工具內的文本工具，鍵入導航上需要顯示的文字，為了演示方便，我只打了幾個導航的文字。 下邊我們開始正式製作下拉導航，也就是平時常說的下拉菜單。選擇切片工具，一次切好對應的大小 點擊產品展示這個切片中心位置的圓形圖形，彈出下拉菜單選擇「添加彈出菜單」選項， 選擇後台在彈出的面板分別添加產品分類1，產品分類2，產品分類3等下拉菜單的文字內容。鏈接和打開窗口大家可以根據自己的需要手動添加即可。 下拉導航添加完成後，在彈出菜單編輯器面板點擊繼續，分別進行外觀、高級、及位置設置，最後點擊完成。如下圖2所示 下拉導航的顯示位置需要手動拖動進行簡單的調整，如下圖，用滑鼠左鍵選中紅色方框框選的內容，進行左右或者上下拖動，將下拉內容顯示的合適的位置進行顯示，此處需要進行多次調整並通過導出的頁面文件進行測試，直到顯示完美即可。 回到FW主界面，在畫布外的任意位置，點擊滑鼠右鍵，彈出菜單選擇「全選」，全選的目的是為了保證每個切邊的狀態為選中。 這里有三種全選的方法，大家可以採取任意一種： 方法1：直接在FW主界面，按下快捷鍵「CTRL+A」進行快速全選（圖示略）； 方法2：即上面提到的方； 方法3：在畫布外的任意位置，按下滑鼠左鍵不放，拖動選擇，將畫布上的內容可以全部選中， 導出選項如下圖1，導出後的文件如下圖2 雙擊導出的未命名1.htm這個文件進行瀏覽，最終效果如下。

2、如何用Photoshop製作網站的「導航欄」

用photoshop畫出導航欄的效果

用切片工具把每個導航標簽切出來。並保存切片。如下圖：

再用html寫出導航欄的代碼，把這幾個圖片鏈接到網頁中，就可以了

總結：photoshop是無法直接做出導航欄，它只是輔助設計出效果，實際功能的，還是要用html代碼的。

3、用PS製作的網站導航欄，怎麼應用到自己的網頁里

網站的「導航欄」作為網頁設計中的重要組成部分，扮演著極為重要的角色。網頁導航欄設計的成功與否，在很大程序上決定著整個網頁的美觀程度。用Photoshop設計「導航欄」，不僅講究ps技術，更在於發揮你的創造力和想像力，這是學習ps最難之所在。具體製作過程見網上教程。

4、網頁設計導航條

下面的代碼，你去看看，不好用再說。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
<!--
body {
background-color: #0099FF;
}
#navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navigation li {
border-bottom-style: none;
border-bottom-color: #ed9f9f;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-top-color: #ed9f9f;
border-right-color: #ed9f9f;
border-left-color: #ed9f9f;
float: left;
}
#navigation li a {
text-decoration: none;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 0.5em;
border-right-width: 1px;
border-left-width: 12px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #711515;
border-left-color: #711515;
border-top-style: none;
border-bottom-style: none;
width: 50px;
text-align: center;
margin: 0px;
}
#navigation li a:link, #navigation li a:visited {
color: #FFFFFF;
background-color: #c11136;
}
#navigation li a:hover {
color: #ffff00;
background-color: #990020;
}
#navigation ul li:hover ul,#navigation ul a:hover ul {
visibility: visible;
}
#navigation ul ul {
visibility: hidden;
}
#navigation ul ul li {
clear: both;
}
#navigation ul ul li a {
border: 1px solid #CCCCCC;
}
#navigation ul ul li a:link, #navigation ul ul li a:visited {
color: #000000;
background-color: #FFCC66;
}
#navigation ul ul li a:hover {
color: #006699;
background-color: #99CC00;
}
.nav {
border: 1px solid #0099CC;
position: absolute;
width: 357px;
left: 112px;
top: 34px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 12px;
}
.nav li {
float: left;
}
.nav li a {
border: 1px solid #FF3333;
display: block;
padding: 5px;
background-color: #FFCC33;
text-decoration: none;
}
-->
</style>
</head>

<body>
<div id="navigation">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">產品展示</a>
<div>
<ul>
<li><a href="#">產品1一</a></li>
<li><a href="#">產品2一</a></li>
<li><a href="#">產品3一</a></li>
<li><a href="#">產品4一</a></li>
<li><a href="#">產品5一</a></li>
<li><a href="#">產品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">聯系電話</a>
<div>
<ul>
<li><a href="#">產品1一</a></li>
<li><a href="#">產品2一</a></li>
<li><a href="#">產品3一</a></li>
<li><a href="#">產品4一</a></li>
<li><a href="#">產品5一</a></li>
<li><a href="#">產品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">公司介紹</a></li>
</ul>
</div>

</body>
</html>

5、網頁設計導航是怎麼做的

1、打開Deamweaver8，新建一網頁文件。接著輸入以下導航菜單的內容：

<html xmlns="網址">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>導航欄示例</title>

</head>

<body>

<ul id="navigation">

<li></li>

<li><a href="#">首  頁</a></li>

<li><a href="#">我的博客</a></li>

<li><a href="#">互動交流</a></li>

<li><a href="#">開心一刻</a></li>

<li><a href="#">懸 賞 令</a></li>

<li></li>

</ul>

</body>

</html>

2、此時對應效果如圖：

3、接下來准備相關的導航按鈕圖片（可以事先利用PS製作好）。

4、然後將以下CSS代碼加入到<head></head>之間：

<style type="text/css">

body {text-align:center;}

#navigation

{ list-style-type:none; height:auto;}

#navigation li { width:154px; height:60px; text-align:center;

float:left; padding-top:18px;font-size:20px; font-family:"微軟雅黑", "宋體", "隸書";

background-image:url(images/noactive.jpg);}

a {width:154px; height:72px;}

a:link { text-decoration:none; color:#FFFF00;}

a:visited { text-decoration:none; color:#FFFF00; }

#navigation li:hover { color:#CC0000; text-decoration:underline;

background-image:url(images/active.jpg);}

a:hover{ color:#CC0033;}

#left {background-image:url(images/left.jpg); width:22px;}

</style>

5、在加入CSS代碼之間，網頁此時的效果如圖：

6、網頁導航條中的豎線是怎麼製作的啊？

一, 鍵盤上可以直接輸 |
二, 如果是一條虛線的話, 那麼是這樣做的:
用Fireoworks新建一個1*3PX的圖片, 在中間畫一個點,然後將其導出,再在DW里建一個單元格,將其背景設為這個圖片(注意,讓它垂直方向重復,水平方向不重復 -- CSS),大功告成
三,CSS
<a href="#" style="border-right:1px solid #000">鏈接</a>

7、網頁製作 導航欄和分類欄怎麼在子頁面也共用呢

首先將導航欄或分類欄目製作成一個獨立的文件，這個文件需要根據你使用不同的網頁編程語言來進行不同的命名，比如.html .asp .php .jsp;再將這文件放置到需要調用的地方即可：
HTML靜態網頁調用：
<include file="header.htm" />
ASP網頁調用：
<!--#include.file="header.asp"-->
PHP網頁調用：
<?php include 'header.php';?>

8、如何使用Dreamweaver做一個網頁的導航欄

Dreamweaver，簡稱「DW」，中文名稱"夢想編織者"，是美國MACROMEDIA公司開發的集網頁製作和管理網站於一身的所見即所得網頁編輯器。
想用DW做出導航欄必熟知div+css，基本代碼：
ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto}
ul#nav li{display:inline; height:60px}
ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px;
color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px}
ul#nav li a:hover{background:#0095BB}/*設置滑鼠滑過或懸停時變化的背景顏色*/

<ul id="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">HTML教程</a></li>
<li><a href="#">CSS基礎</a></li>
<li><a href="#">CSS開發工具</a></li>
<li><a href="#">CSS特效</a></li>
<li><a href="#">CSS問題</a></li>
</ul>

9、網頁設計中,怎麼做成上面是導航條,下面是內容....... （我要簡單的代碼，讓我做參考）

沒明白你什麼意思！你是說就像百度知道首頁一樣，導航條在上面，導航條的下面也有內容？還是內容在導航條裡面，滑鼠放在導航條上自動彈出導航內容的效果？

與網頁設計導航條怎麼做相關的知識