1、怎樣用 顯示/隱藏層 製作二級下拉子菜單項
不是吧山東農業大學選修課網頁製作作業也是這個題哎我直接把題全給你們行了呵呵以後考試就輕鬆了呵呵
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 個)
2、網頁設計：下拉菜單的十幾種表現形式
網頁設計或者應用UI網頁設計中經常會出現下拉菜單，主要是會將不常用的同類選項或者提醒放置其中，如何設計下拉菜單，網頁設計出圖片以及裁剪後的大小，然後後台再把這些做起來，這些作品或許能給你啟發。下面先看下這些作品的設計風格，我相信會對你們有大的啟發的，設計感實在是需要慢慢的積累創新的，時代進步不得不把我們帶的進步。具體內容可以參看百家號
3、網頁製作中，如何做二級菜單（就是滑鼠滑過去才有顯示）
你說的是把滑鼠擱置在某個控制項上停留一會，然後彈出快捷菜單嗎？
其實我無形中已經告訴你辦法了，滑鼠事件選擇「載入」或者「顯示」，事件代碼就是「彈出快捷菜單」並寫上快捷菜單顯示內容
4、網頁製作中如何做下拉菜單
在Dreamweaver中輕松實現滑動折疊菜單-太平洋電腦網
http://www.pconline.com.cn/pce/sj/wz/dreamweaver/0603/776492_2.html
Dreamweaver MX 2004簡體中文版進階教程(三)之彈出菜單-中華網科技頻道
http://tech.china.com/zh_cn/netschool/homepage/dreamweaver/develop/2005061503.html
藍色理想 - 下拉菜單全攻略
http://www.blueidea.com/tech/web/2003/301.asp
5、網頁設計 滑鼠移到下拉菜單，下拉菜單就不見了，不是一級菜單與二級菜單層的位置沒設置好，應該是其他的。
下拉菜單的製作來的詳細步驟：
FW中的自做法：
1.打開軟體---新建文檔
2.繪制一個導航條----在上面輸入文字
3.用最上面的選擇工具----選中導航按鈕（不要少點哦）----右鍵----「插入矩形切片」
4.導航上面出現了一個矩形將導航 蓋住了，-----你可以看到上面有個白色的小圓圈-----選中 它（一定是白色的小圓圈）-------右鍵------「添加彈出菜單」
5.設置你的下拉菜單就行了。。 "內容" 「外觀」 "高級" "位置"
6.調整一下你的切片位置和大小。
7.預覽（f12)
8.文件----導出----html和圖像。
9.ok大致步驟就這么多。
再打開 dreamweaver
1."插入"---「圖像對象」----「fireworks HTML」
2.「瀏覽」----將做好的那個導航條在加進來。
按上面的步驟做就可以了，，這可是詳細的步驟。。先用FW，然後用DW就OK了。。
6、如何製作網頁首頁導航菜單顯示二級菜單
<!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>
.sever{ margin-top:4px;}
.sever_menu{ width:213px; background:#99ABB9;}
.sever_menu a{ display:block; }
.sever_menu img{ *margin-bottom:-2px;}
.help_menu,.help_menu_main{ line-height:25px; }
.help_menu{ height:25px; background:#4AC5E8; border-bottom:1px solid #99ABB9;text-indent:57px;}
.help_menu a{ background:url(../images/help_arr.jpg) no-repeat 43px center;}
#sever_left .help_menu:hover a{ color:#fff;}
.help_menu .hover{ background:url(../images/help_hover_arr.jpg) no-repeat 43px center; color:#FFFFFF;}
.help_menu_main ul{ text-indent:63px;}
.help_menu_main ul li{ border-bottom:1px solid #B3BFCB;}
.help_menu_main ul li a{ color:#fff;}
</style>
<script>
// JavaScript Document
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
</head>
<body>
<div class="sever">
<div class="sever_menu L" id="sever_left">
<img src="images/sever_help.jpg" />
<div class="help_menu"><a id="help1" onclick="setTab('help',1,9)" class="hover">新手上路</a></div>
<div id="con_help_1" class="help_menu_main">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help2" onclick="setTab('help',2,9)">如何銷售</a></div>
<div id="con_help_2" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help3" onclick="setTab('help',3,9)">如何采購</a></div>
<div id="con_help_3" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help4" onclick="setTab('help',4,9)">交易安全</a></div>
<div id="con_help_4" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help5" onclick="setTab('help',5,9)">操作指南</a></div>
<div id="con_help_5" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help6" onclick="setTab('help',6,9)">商人通服務</a></div>
<div id="con_help_6" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help7" onclick="setTab('help',7,9)">商業資訊</a></div>
<div id="con_help_7" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help8" onclick="setTab('help',8,9)">展會幫助</a></div>
<div id="con_help_8" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help9" onclick="setTab('help',9,9)">廣告幫助</a></div>
<div id="con_help_9" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
這個拿去參考一下吧~~
7、如何用圖片導航做二級下拉菜單（急）！！！
用這個下拉菜單來修改就可以
8、網頁製作，慢慢下拉的菜單怎麼做？
這個效果你可以通過2中途徑實現，使用框架或者是使用JavaScript代碼。
1.使用框架：查找框架中的二級菜單組建，如Bootstrap中的導航條中的二級菜單。下面的是一個二級下拉菜單的例子
詳細內容參見http://v3.bootcss.com/components/#navbar
2.使用JavaScript代碼。使用jQuery的動畫實現，如slideToggle()可使元素上下滑動，並且可以使用參數控制快慢。
<script>slideToggle()請參考http://www.w3school.com.cn/jquery/jquery_slide.asp