1、網頁導航菜單欄製作
導航菜單的實現
首先定義導航外圍容器的樣式:
#left {
width: 178px;
}
現在外圍容器我們只要簡單版的定義其寬度,並權賦予left的id名。在left容器中,我們添加一個名為navcontainer的子容器來放置導航菜單。實現導航的標簽推薦使用無序列表ul,通過CSS我們可以改變其外觀和形式。HTML結構如下:
< div id="navcontainer">
< ul>
< li>< a href="#">Home< /a>< /li>
< li>< a href="#">About me< /a>< /li>
< li>< a href="#">ximicc< /a>< /li>
< li>< a href="#">Articles< /a>< /li>
< li>< a href="#">Photo roll< /a>< /li>
補充
< /ul>
< /div>
ul和li標簽構建了一個簡單的項目列表,其項目符號默認為小圓點,這是我們不需要的。利用CSS可以去掉那些小圓點,並用背景圖片的形式替換以我們製作好的圖標:
2、網頁設計:如何創建一個滾動菜單
首先打開dreamweaver8寫基本語法
<marquee>滾動文字 </marquee>
2.文字移動屬性的設置
(1)滾動方向屬性direction
可以設定文字滾動的方向,分別為向左(left)、向右(right)、向上(up)、向下(down),使滾動的文字具有更多的變化。
基本語法:
<marquee direction="value">滾動文字</marquee>
(2)滾動方式屬性behavior
通過這個屬性能夠設定不同方式的滾動文字效果。如滾動的循環往復、交替滾動、單次滾動等。
基本語法:
<marquee behavior="value">滾動文字</marquee>
(3)滾動循環屬性loop
通過這個屬性能夠讓文字滾動循環進行。
基本語法:
<marquee loop="次數">滾動文字</marquee>
(4)滾動速度屬性scrollamout
通過這個屬性能夠調整文字滾動的速度。
基本語法:
<marquee scrollamount="value">滾動文字</marquee>
(5)滾動延遲屬性scrolldelay
通過這個屬性,可以在每一次滾動的間隔產生一段時間的延遲。
基本語法:
<marquee scrolldelay="value">滾動文字</marquee>
3.外觀(Layout)設置
(1)滾動文字對齊方式align
基本語法:
<marquee align="對齊方ottom,對齊上沿、中間、下沿。
(2)滾動背景顏色屬性bgcolor
在滾動文字的後面,可以添加背式">滾動文字</marquee>
對方方式=top、middle、b景顏色。
基本語法:
<marquee bgcolor="color_value">滾動文字</marquee>
3、網頁設計中的彈出菜單製作
打開"行為"面板,選"顯示彈出菜單"在內容里有個"+",新建一個,重復新建多個即可,其他選項是設置外觀和功能,自己看著辦.要選中觸發行為的文字或圖像再點行為面板.這樣就不是豎著排了吧
4、網頁製作怎麼製作按鈕
1.新建一個500*250象素的窗口,填充綠色(R:52,G:175,B:125),再新建一層命名為"按鈕--底",選擇「圓角矩形工具」,半徑數值為「25」,繪制圓角矩形。
2.所示鎖定透明象素
3.選擇漸變工具,顏色設置如下<圖5>,由上至下繪制漸變效果
4.在「按鈕-底」上新建一層命名為「按鈕--高光」,調出「按鈕--底」的選區如<圖7>,選擇菜單:選擇 > 修改 > 收縮,數值為3,再填充白色,按Ctrl D取消選區。
5.在「按鈕--高光」這層添加蒙版,再用黑白漸變工具如<圖11>由上往下繪制漸變
6.回到"按鈕--底"這層,調出圖層樣式,分別調節:內陰影,描邊。
7.在"按鈕--底"這層上面新建一層命名為「按鈕--測光」,調出「按鈕--底」的選區如<圖16>,選擇菜單:選擇 > 修改 > 收縮,數值為1,再填充白色,用矩形選取工具適當的把選區向右移幾個象素然後按"Delete"鍵刪除選區部分
8.按Ctrl D取消選區,再用橡皮工具選適當的大小插除下面的部分
9.按Ctrl J 把"按鈕--側光"復制一層,選擇:編輯> 變形 > 垂直翻轉,再選擇:編輯> 變形 > 水平翻轉,把翻轉後的圖片移到右側適當的位置
10.在"按鈕--底"上面新建一層命名為「按鈕--邊」調出"按鈕--底"的選區如<圖23>,再選擇菜單:編輯 > 描邊 設置如<圖24>再按Ctrl D 取消選區。
11.在"按鈕--高光"上面新建一層命名為「按鈕--文字」,在上面打上"網站名",字體顏色用白色.
12.按Ctrl J 把文字復制一層,把下面的文字隱藏,為上面文字加投影效果,設置如<圖27>,再回到下面的文字層,刪格化圖層,選擇菜單 編輯> 變形 > 垂直翻轉 把文字拖到合適的位置
13.如下圖添加蒙版用黑白漸變從上至下繪制漸變,製作文字的倒影。
5、網頁下拉菜單怎麼製作
<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜單演示</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋體, serif;
font-size:12px;
}
#nav {
line-height: 24px; list-style-type: none; background:#666;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}
#nav li ul a{
display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;
}
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
-->
</style>
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
</head>
<body>
<ul id="nav">
<li><a href="#">產品介紹</a>
<ul>
<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><a href="#">產品一</a></li>
</ul>
</li>
<li><a href="#">服務介紹</a>
<ul>
<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><a href="#">服務二</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例三</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">案例三案例三</a></li>
<li><a href="#">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="#">關於我們</a>
<ul>
<li><a href="#">我們四</a></li>
<li><a href="#">我們四</a></li>
<li><a href="#">我們四</a></li>
<li><a href="#">我們四111</a></li>
</ul>
</li>
<li><a href="#">在線演示</a>
<ul>
<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><a href="#">演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#">聯系我們</a>
<ul>
<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><a href="#">聯系聯系聯系</a></li>
<li><a href="#">聯系聯系聯系</a></li>
</ul>
</li>
</ul>
</body>
</html>
6、網頁中的按鈕怎麼製作下拉菜單啊?
在flash裡面直接做好連接
1、建一個元件,比如命名為「按鈕鏈接」
2、將「按鈕鏈接」導入FLASH舞台中你設計的位置;
3、點擊「按鈕鏈接」一下哦,然後點擊動作菜單/全函數/「瀏覽器/網路」/雙擊getURL
在腳本編輯欄中會出現getURL();
在括弧中輸入"http://地址",注意一定要加" " 哦,否則語法錯誤;
然後寫入:
on(release) {
getURL("http://地址");
}
最後面給一個連接,可以參考下。有解釋getURL()得具體用法。有問題歡迎留言交流,因為這里的修改次數是有限的,經常有的問題修改幾次就不讓在改答案了。
跳轉的地址可以在本地測試,前提是網頁最好在flash同目錄裡面,直接引用
on(release) {
getURL("網頁.htm");
}
7、左側頁面菜單欄樣式設計
俺做過類似的功能, 左邊固定一個treeview,右邊放一個容器控制項, 點擊左邊的treeview節點的時候根據節點的不同,用反射機制創建一個你要的控制項(就是右邊的那一部分,你事先已經做成用戶控制項),然後調用 右邊容器的Controls.Add方法,把你剛才的創建那個控制項放進去並顯示出來就OK了。