㈠ 我已經做了個一級導航,如何修改成二級導航,代碼如下
這里有一個js的多級聯動下拉菜單
可以自定義位置和樣式 比較實用
裡面有教程和源碼
㈡ 請教網頁製作的高手,如何做出導航和標簽頁的效果
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME
<ul>
<li>二級</li>
<li>二級</li>
<li>二級</li>
</ul>
</li>
</ul>
思路就是這樣。
標簽頁的話:
也是上面那個思路了
<ul>
<li>TAB</li>
<li>TAB</li>
<li>TAB
<div>content</div>
</li>
</ul>
者都要寫好多樣式去控制;
如果只是想學習的話,就可以試試
如果只是為了完成工作,嘿嘿 ,去網上找現成的把,太多了。
㈢ 如何給網站前台添加二級導航
沒有必要那麼麻煩吧,魔法菜單就可以了
㈣ 如何設計二級頁面
改版前,在本地調試好所有程序及頁面,做到上線穩定不變;然後在現有網站上提前通知用戶網站即將改版,以免引起不必要的誤會,最後選擇凌晨迅速把網站所有程序上傳覆蓋。2網站的title改版前後的title盡量保持一致,如非必要,建議不做改動。3關鍵詞
改版之前可以收集一些網站的重要數據,如網站的關鍵詞及排名,用戶的來源、地域、年齡分布等數據。特別是改版後對新網站有重要作用的關鍵詞,還是應該在網站中合理的布局,不管是title、導航、文章、描述中等都應該合理的出現,避免關鍵詞密度大幅度的降低影響以後關鍵詞的優化排名。
4.網站的鏈接
網站改版前後應盡量和原來的文章鏈接及名稱一致,對於需要更換的鏈接可以使用301重定向,這么做目的是為了把網站改版的影響減少到最小。
5.友好404頁面
雖然未來避免死鏈,我們做了很多的准備工作,但是難免會有漏網之魚,勢必會出現一些錯誤頁面,所以這時候就需要一個十分友好的404頁面,一是告訴用戶網站剛剛改版,並給出網站地圖增加用戶體驗,而是為了減少用戶流失。
6.網站改版後內容要充實
這個問題特別針對首頁來說,不能出現一些欄目下沒有內容或者內容嚴重不足,必須讓網站版面充實起來,並且是原創內容。
7.外部鏈接
網站改版過後及時的做一些高權重的外部鏈接,然後重新調整網站地圖,並向搜索引擎重新提交網址,重寫robots.txt文件並提交給Google,可以讓搜索引擎蜘蛛迅速的爬行抓取網站的數據。
8.平和的心態
這個是一個非常重要的問題,一般網站改版都是迫不得已而為之,但是網站改版後的一系列問題總是讓人心煩,不管是用戶意見還是搜索引擎的懲罰,雖然我們前期做了很多的准備工作。因此改版過後我們應該有一個平和的心態,只要我們處理好方方面面的問題,保持不斷的更新,那這些問題也會迎刃而解了。
㈤ 如何設計網站導航系統
導航模式
網站的導航如何設計,在設計網站導航時首先應該明確用戶的瀏覽習慣,根據用戶的瀏覽習慣,首先會先大概地掃視一遍頁面,其次則會開始尋找導航欄,快速從導航欄上找到主要信息,引導用戶尋找網站對他有用的信息。一般來說左邊的權重要比右邊的權重要高一些。
網站的導航信息應該明確,,設計一個有魅力的導航還能留住用戶瀏覽更多的內容信息,帶給用戶良好的體驗。在網站導航設計上應該主要關注一下幾點:導航的模式常見的導航模式有很多,例如頂部水平橫欄式,垂直導航欄,側邊固定式,滑出或者彈出窗口導航等,通常網站是根據所要展示的內容要點來選擇不同的導航。如果網站的內容較少,在網站導航上可以選取水平式導航,這樣既可以重點內容而且簡單清晰,網站內容較多的時候可以選擇抽屜式的導航,用戶在瀏覽網站時各種信息都很明確。如果網站的顯示頁過長,比較試用的是垂直式導航,方便用戶在瀏覽內容時導航信息始終保持在一個位置可以被快速找到。
導航內容
網站的導航應該是對整個網站想要展示的信息總結,導航的信息要與詳細頁面符合,標題的總結要精簡,注意網站小內容最好不要以導航的總標題形式出現,可通過細分的下拉菜單,或者以更多形式的小菜單欄里出現。
導航細節
在導航設計時可以設置一個「回到頂部」的標志,以便用戶快速到達頭部的導航位置。這樣對於網站內容較多用戶下滾的內容過長時就可以快速的回到頂部了。
導航創意
我們都喜歡新的東西,在看慣了千篇一律的導航形式如果能給導航加點創意,那麼肯定會非常吸引人眼球。
網站的導航在網站設計中有著舉足輕重的地位,好的網站導航是成功的一半,所以在網站的導航設置上更加註意。
㈥ dw網頁二級菜單代碼怎麼做!很著急把它放在一級導航底下!
方法和詳細的操作步驟如下:
1、第一步,打開dw軟體並創建一個新文件,見下圖,轉到下面的步驟。
㈦ 怎樣用 顯示/隱藏層 製作二級下拉子菜單項
不是吧山東農業大學選修課網頁製作作業也是這個題哎我直接把題全給你們行了呵呵以後考試就輕鬆了呵呵
2009-2010學年第二學期
《信息發布與網頁製作》課程
本科生 期末考試要求-(A卷)
課程課序號:CMP332
學 號___________姓 名_________成 績__________
班 級_____________課序號_________任課教師___________
題號
一
二
三
四
五
合計
得分
綜合考試要求
1、按題中要求,獨立完成。如有拷貝或與他人雷同者,以0分論處。
2、作業提交的截止日期為:2010年7月2日。
一、(共5分)按如下要求提交文件 得分______
以自己的學號命名文件夾,並以此根文件夾為基礎創建站點;
在根文件夾下,至少包含如下子文件夾,按類存放站點中的所有文件;
1、Html文件夾:存放HTML網頁文件(1)
2、Image文件夾:存放圖片文件(1)
3、Sound文件夾:存放聲音文件(1)
4、Flash文件夾: 存放Flash文件(1)
5、壓縮整個學號文件夾,然後提交交互平台。(1)
二、(共10分)設計小型網站,內容主題為「上海世博會」,要求如下: 得分______
設計有3個窗口的框架集網頁(3),框架集網頁文件命名為index.html(2)。框架集網頁中,左側窗口中放置導航欄目網頁(1),右下側窗口作為導航欄被鏈接網頁的「目標」窗口,用於顯示被鏈接的網頁(1)。右上側窗口顯示網站主題、網站設計製作者學號、姓名(1)。要求框架集網頁的邊框可調(1),窗口中內容超出窗口時,要設置滾動條(1)。
三、(共65分)分別製作6個網頁,要求如下: 得分______
1) 導航欄網頁(15分)
網頁的功能是網站導航,圍繞站點主題,設置5個導航欄目(6)。
1. 上海世博會主題介紹
2. 上海世博會拼圖游戲
3. 歷屆世博會科技亮點
4. 上海世博會調查問卷
5. 歷屆世博會統計資料 (年份、國家、舉辦城市、主題)
建立每個欄目與之相應的網頁之間的鏈接,並指定被鏈接的網頁在「目標」窗口顯示(4)。利用行為,建立二級彈出子菜單,通過二級子菜單鏈接,顯示相關的內容(5)。所有鏈接正確(如不正確,1處扣2分)。
2) 「網頁1-上海世博會主題介紹」:(10分)
1. 首行顯示網站主題內容,用標題1、居中、「華文新魏」字體顯示(2);
2. 第2行,插入水平線;設置水平線的寬度為瀏覽器窗口寬度的80%(2);
3. 第3行,插入上海世博會導覽圖,設置800寬、600高(2),圖片居中並有邊框顯示(1);對圖中內容分別用矩形、橢圓、多邊形熱區畫圖工具設立3個熱區,通過鏈接,說明相關內容。(3)
3) 「網頁2-上海世博會拼圖游戲」(10分)
利用拖動層的行為,製作至少由6塊圖片組成的拼圖游戲。要求:
1. 選擇1個國家場館的圖片,用自己的學號命名圖片;(2)
2. 利用Fireworks將圖片切割成大小相同的6塊;導出切片;(2)
3. 在DreamWeaver中,導入Fireworks HTML,將表格轉換為層;添加拖動層的行為,製作拼圖游戲;(2)
4. 插入1個布局對象層並以字母L及自己的學號命名,在層中輸入拼圖游戲的說明文字,設置層中文字的大小:18px ;字體:隸書(2);
5. 設置拖動層的吸附距離為100:吸附到正確位置時顯示彈出信息(2)
4) 「網頁3-歷屆世博會科技亮點」(10)
要求:利用「顯示/隱藏層」製作二級下拉子菜單項,
1、 利用層和表格製作下拉菜單(4)
2、 下拉菜單項中,至少有2個菜單項要有鏈接功能(2)
3、 指定被連接的內容在當前窗口顯示並有返回機制。(4)
5) 「網頁4-上海世博會調查問卷」(共10分)
要求:使用表單,做1個網上調查表
1、 插入表單域,在表單域中插入如下表單元素:
2、 參與調查人員的性別:男 〇 女 〇(使用單選按鈕)(1);
3、 2010年世博會主題是: (設定為:單行文本框(寬度32字元 ));(1)
4、 年齡 (設定為:字元寬度2);(2)
5、 中國舉辦過幾次世博會?(使用「列表/菜單」表示,列表項有:一次、二次、三次、四次)(2)
6、 提交按鈕、重置按鈕。(2)
7、 為表單添加檢查表單行為,用以檢查輸入年齡的合法性(15~80為有效)。(2)
6) 「網頁5-歷屆世博會統計資料 (年份、國家、舉辦城市、主題)」(共10分)
該網頁要求:
1、 用表格顯示歷屆世博會舉辦的年份、國家、舉辦城市、主題;(2)
2、 利用DreamWeaver工具,格式化表格;(2)
3、 將歌詞放在層中,滾動顯示;(2)
4、 能控制歌詞的滾動,以保證與歌曲同步。(4)
四、(共12分)按如下要求,在網頁中插入自己製作的Flash作品 得分______
1、 在Flash文件夾中,存有Flash原始文件(2);
2、 Flash片頭顯示作者學號、姓名(2)
3、 Flash表現的內容與網站內容主題一致(2);
4、 分別使用「形狀」、「動畫」補間(2);
5、 背景圖層用自己的學號命名(2);
6、 Flash作品中包括引導層、遮罩動畫(2)
五、(共8分)綜合分 得分______
整體色調協調(2),結構合理、瀏覽方便(2),網站難度(2),創新(2)
附件(0 個)
㈧ 網頁設計問題:如何製作下拉菜單式導航欄
這段代碼比較經典的下拉菜單,不過沒有美化,自己要美化的話,對列的項a a:hover的屬性進行定義即可,比如定義一個好的背景等。
<!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">
*{ margin:0; padding:0;}
body{ font:14px "宋體"; color:#333;}
#nav{ width:800px; height:30px; margin:50px auto; background:#ccc; line-height:30px; }
#nav li{ list-style:none; float:left; font-weight:bold; vertical-align:middle;}
#nav li a{ display:block; width:100%; text-align:center; color:#000; text-decoration:none;}
#nav li a:hover{ color:#fff; background:#f00; text-decoration:none;}
#nav li ul{ display:none; position:absolute; background:#999; line-height:25px;}
#nav li.show ul{ display:block;}
#nav li.show ul li{ float:none; font-size:12px;}
#nav li.show ul li a{ text-align:left; padding-left:10%; width:90%;}
#nav li.show ul ul{ display:none;}
#nav li li.show ul{ display:block;}
</style>
<script type="text/javascript">
function getCss(elem,property){
if(elem.style[property]){
return elem.style[property];
}
else if(elem.currentStyle){
return elem.currentStyle[property];
}
else if(document.defaultView && document.defaultView.getComputedStyle){
property = property.replace(/([A-Z])/g,'-$1').toLowerCase();
var s = document.defaultView.getComputedStyle(elem,'');
return s&&s.getPropertyValue(property);
}
else{
return null;
}
}
window.onload = function() {
var obj = document.getElementById("nav");
var lis = obj.getElementsByTagName("li");
var arr = new Array();
var uls = obj.getElementsByTagName("ul")[0];
for(var i=0; i<lis.length; i++){
if(lis[i].className.indexOf("firstLevel")>=0){
arr.push(lis[i]);
}
}
for(var i=0; i<lis.length; i++){
lis[i].style.width = obj.offsetWidth/arr.length - 1 + "px";
if(lis[i].className.indexOf("thirdLevel")>=0){
lis[i].parentNode.style.marginLeft = obj.offsetWidth/arr.length - 1 + "px";
lis[i].parentNode.style.marginTop = -parseInt(getCss(uls,"lineHeight")) + "px";
}
lis[i].onmouseover=function(){
this.className+=(this.className.length>0?" ":"") + "show";
}
lis[i].onmouseout=function(){
this.className=this.className.replace(new RegExp("( ?|^)show\\b"), "");
}
}
}
</script>
</head>
<body>
<ul id="nav">
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>
</li>
<li>
<a href="#">二級欄目</a>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
㈨ 網頁設計 製作導航條 如何製作
一, 鍵盤上可以直接輸 |
二, 如果是一條虛線的話, 那麼是這樣做的:
用Fireoworks新建一個1*3PX的圖片, 在中間畫一個點,然後將其導出,再在DW里建一個單元格,將其背景設為這個圖片(注意,讓它垂直方向重復,水平方向不重復 -- CSS),大功告成
三,CSS
<a href="#" style="border-right:1px solid #000">鏈接</a>
㈩ 網站二級導航菜單問題
把#menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}
改成#menu ul li ul li { float:left; width:100px; background:#eee; margin:0;}就好了設置它的浮動和高度