導航:首頁 > 萬維百科 > 動漫網頁導航欄設計

動漫網頁導航欄設計

發布時間:2021-01-23 21:01:38

1、怎麼用FLASH動畫製作網站導航條,然後是怎麼鏈接子頁的,我是一個新手而已請解說清楚點哦

還是不要用這樣的導航
用這樣的
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>

2、網頁導航欄的設計方式有哪些

導航欄的設計方式有很多種,通過專業的PS設計軟體,可以結合自己的靈感設計,網上有很多可以做為參考或欣賞。

3、有哪些炫酷好玩兒的網頁導航設計

Jova

Jova的網站設計非常清爽,導航欄的設計均衡並且結構妥帖

設計師使用細線構成的線框柵格來構建網站導航,經典的黑白配色,加上清晰銳利的英文字體,構建出優雅迷人的外觀,在柔和的背影映襯之下,給人深刻的印象。

Beloesuhoe

Beloesuhoe  的設計團隊巧妙地使用布景構建出了一個獨一無二的網頁導航,非常抓人眼球。這個網站乍一看好象就是一個背景圖,但是實際上,網頁上脈動的小紅點會提示你導航的存在,它並不是看起來那麼簡單。將滑鼠移動到小紅點上,你會發現這些導航點是可交互的,並且將你引導到特定的頁面。這種「沉浸式」的導航欄設計是個非常有趣的解決方案,可拓展的空間也相當大。

First Person

First Person  整站使用了單頁滾動設計,並且通過左上方的菜單欄來進行導航引導。但是這並不是它的突出之處,當你在首頁向下滾動的時候,能夠看到一個精心製作的3D場景,整個場景會隨著白天黑夜變換主題,並且當你滑鼠移動到3D場景的特定點上的時候,能夠激活組件,進行交互,瀏覽信息,絕對別出心裁。雖然整站導航不算突出,但是這個3D場景的導航設計 ,簡直帥酷爆表。

Mint Design Company

說 Mint Design Company 的導航設計  精美絕倫完全不是過譽。設計師幾乎是用漂亮的手繪插畫完成了整個網頁的設計,導航欄所使用的手繪圖標更是精緻,滑鼠移動到導航欄圖標處會有好玩兒的動效出現,最關鍵的是每個動效都不盡相同。

Vive Latino

Viva  Latino的設計團隊充分利用塗鴉的獨特效果,讓整著陸頁在同類設計中脫穎而出。干凈的單色頁面上,漂亮的手繪排版設計和獨具個性的小人錯落混拍在一起,營造出節日的氣氛,最關鍵的是,這樣的設計也創造出獨具一格的導航模式。

Pete Nottage

這個名為Pete Nottage  的網站以五彩繽紛的插畫而著稱,也使得整個網站充滿了創造性和積極的氛圍。這些扁平風的插畫以城市場景為主題,並且還是作為網站導航而存在

為了讓這個導航欄更加好玩,網站的設計師和開發者將許多動態的元素加入到插畫中,比如移動的汽車和遊艇,那些看似靜態的景物其實也是可交互的,當你點擊它們的時候,有些建築會抖動甚至消失!這種引人入勝的設計賦予了網站獨特的氣質,讓人流連忘返樂此不疲。

Mathilde Jacon

Mathilde Jacon  的這個個人作品展示頁使用了更加獨特的導航模式:嵌套環形可互動式導航欄,環形的每一段都會導向一個作品。原來導航還可以這樣做啊!

Moira Young

Moira Young  的網站採用了一套自然風的主題,導航設計則以優雅的輻射狀的閃光來呈現,當你滑鼠移到這些微光之上,導航內容便會呈現,漂亮而微妙。

Bancolombia

和許多之前的網站導航設計思路相近,漂亮的插畫和動態視覺元素共同構建起了它的導航欄。網站唯一與時代脫節的地方在於,它採用了Flash來實現這些功能,而非HTML5。

Nat-Ant

值得一提的是,使用極簡設計風其實也可以作出別出心裁的導航欄的。正如你所看到,網頁的著陸頁非常干凈,背景大量留白,幾個控制項散落在頁面上用作導航,不同尋常。

Love Carmen Rose

Love Carmen Rose 的網頁設計  也個性十足,精雕細琢的背景圖其實承載著它獨有的導航模式,雖然看起來不太顯眼,但是復雜的導航和背景圖也足夠它脫穎而出了,不是么?

Orillo

用戶打開 Orillo  網站的時候,能看到低調沉穩的背景上用簡約線條勾勒出來的控制中心。用戶可以藉助這個獨特的導航欄做很多事情,唯一可惜的是它僅能在桌面端瀏覽器上呈現,移動端頁面則使用的是另外一個相對簡單的版本。

OK Kid

OK Kid的網頁充分運用了視頻背景的特性來設計它們的基礎導航體系。設計團隊採用視覺優先的設計原則,最終結果也並沒有令人失望。

The  Colors of Motion

網頁採用運動的色彩來呈現經典的美國精神,帶你開始一段旅程。結合影片劇情,設計團隊展現了一個原創而吸引人的導航設計,雖然沒有任何標識,但是那些細細的條紋會帶你走完這個旅程

HelloNicolas

從你打開這個網頁的第一秒開始,頁面所展示的作品就會吸引住你的全部注意力。網站的視覺設計非常大膽,整體布局導航通過相對較寬的可交互區域來展現,每一塊完成不同的工作。

Grimouville

想不想通過Grimouville  開始一段短暫而難忘的旅程?打開這個網站就可以了。網站中那些有趣的互動元素能讓你在城市的大街小巷中實現這個夢想。

Leidgens Piscines

網站的著陸頁令人難以忘懷:壯觀的視頻背景和風格化明顯的導航欄,這些設計不僅讓你愉悅,還能更為高效地探索網站。雅緻的菱形導航欄中,每個區塊包含著不同的功能和相應的短片。

Soppo

基於柵格的導航系統配合可愛的圖片營造出網站的整體氛圍,純色和圖片的錯落排布,不同區塊中獨特的效果,會讓你記住這個網站的。

Visit Brazil

這是一個真正意義上的概念網站。通過有趣的交互,你可以在這個網站知道關於巴西這個國家許多有趣的故事。

Alexandru Nastase

網站的設計師巧妙的利用排版和簡約的外觀,呈現出了網站有趣的氛圍。密集而大膽的標題周圍,圍繞著相對較小的文字導航,塑造出獨特的形式感。

4、網頁導航菜單欄製作

導航菜單的實現

首先定義導航外圍容器的樣式:

#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可以去掉那些小圓點,並用背景圖片的形式替換以我們製作好的圖標:

5、如何製作flash導航條動畫

http://shineday.nease.net/
這里的代碼是抄襲過來的,根本是為了說明問題和解決問題:)
var
drag
=0.1;
//震動參數
var
flex
=0.7;
//震動參數
mc._y
=20;
mc.goalX
=10;
//裝入動畫後影片剪輯(也就是滑塊)首先出現的位置
mc.onEnterFrame
=
function()
{
this.Step
=this.Step*flex+(this.goalX-this.px)*drag;
//計算滑塊移動步長的公式
this.px+=this.Step;
//將步長累加,個人認為這個很重要,相當於一個循環,以本次移動步長為基準,進行下次累加
this._x
=this.px;
//使影片剪輯的X坐標軸等於
if
(this.sOut
&&
this._xscale<99.5)
{
/*這里是縮放影片剪輯*/
this._xscale
+=
(100-this._xscale)/8;
}
if
(this.sIn
&&
this._xscale>0.1)
{
this._xscale
+=
-this._xscale/8;
}
};
////The
First
Button
Events
b1.onRollOver
=
function()
{
mc.goalX
=this._x;
//將按鈕的X坐標值賦給影片剪輯的初始位置,也就是說,下次移動以這次的位置為原點這里根據按
鈕和影片剪輯的大小而定,若按鈕比影片剪輯小,相應的加上一些數值以作調節
mc.sOut
=
true;
/*這里是把一個BOOBLE值返回給調用它的函數,如下:
if
(this.sOut
&&
this._xscale<99.5),以控制整個影片剪輯的縮放功能*/
mc.sIn
=
false;
this.fadeOut
=
true;
this.fadeIn
=
false;
};
b1.onRollOut
=
function()
{
mc.sOut
=
false;
mc.sIn
=
true;
this.fadeIn
=
true;
this.fadeOut
=
false;
};
//The
second
Button
Events
b2.onRollOver
=
function()
{
mc.goalX
=this._x;
mc.sOut
=
true;
mc.sIn
=
false;
this.fadeOut
=
true;
this.fadeIn
=
false;
};
b2.onRollOut
=
function()
{
mc.sOut
=
false;
mc.sIn
=
true;
this.fadeIn
=
true;
this.fadeOut
=
false;
};
//The
Third
Button
Events
b3.onRollOver
=
function()
{
mc.goalX
=this._x;
mc.sOut
=
true;
mc.sIn
=
false;
this.fadeOut
=
true;
this.fadeIn
=
false;
};
b3.onRollOut
=
function()
{
mc.sOut
=
false;
mc.sIn
=
true;
this.fadeIn
=
true;
this.fadeOut
=
false;
};
//The
Fourth
Button
Events
b4.onRollOver
=
function()
{
mc.goalX
=this._x;
mc.sOut
=
true;
mc.sIn
=
false;
this.fadeOut
=
true;
this.fadeIn
=
false;
};
b4.onRollOut
=
function()
{
mc.sOut
=
false;
mc.sIn
=
true;
this.fadeIn
=
true;
this.fadeOut
=
false;
};
//The
Fifth
Button
Events
b5.onRollOver
=
function()
{
mc.goalX
=this._x;
//trace(mc.goalX);
mc.sOut
=
true;
mc.sIn
=
false;
this.fadeOut
=
true;
this.fadeIn
=
false;
};
b5.onRollOut
=
function()
{
mc.sOut
=
false;
mc.sIn
=
true;
this.fadeIn
=
true;
this.fadeOut
=
false;
};
stop();

6、網頁設計:圍繞一個主題(如企業網站、動漫世界、個人網站、學校網站、家鄉網站、娛樂網站等)

如果你是為了應付老師的話,我發給模板給你。稍作修改 然後自己添加子網頁就行,如果你想學製作網頁的話,去圖書館借點相關方面的書,邊看邊做,然後上網找資料。。模板已發送至你的郵箱

7、網頁的側導航欄是怎樣製作的

使用方法:
1.載入jQuery和SMINT插件

1 <script type="text/javascript" src="jquery/1.7.1/jquery.min.js"></script>
2 <script type="text/javascript" src="js/jquery.smint.js"></script>
2.初始化配置

1 <script type="text/javascript">
2 $(document).ready( function() {
3 $('.subMenu').smint({
4 'scrollSpeed' : 1000
5 });
6 });
7 </script>
3.菜單配置

01 <div class="subMenu" >
02 <div class="inner">
03 <a href="#" id="sTop" class="subNavBtn">Home</a>
04 <a href="#" id="s1" class="subNavBtn">What it does</a>
05 <a href="#" id="s2" class="subNavBtn">How to use</a>
06 <a href="#" id="s3" class="subNavBtn">Demo</a>
07 <a href="#" id="s4" class="subNavBtn">Download</a>
08 <a href="#" id="s5" class="subNavBtn end">About Me</a>
09 </div>
10 </div>
4.滾動模塊定義

1 <div class="section sTop">
2 滾動內容
3 </div>
1 <div class="section s1">
2 滾動內容
3 </div>
1 <div class="section s2">
2 滾動內容
3 </div>
.........

8、做一個少兒教育的網頁設計,想做個動畫效果,就是一排小動物代表導航菜單,把滑鼠放在上面它就做個小動作

給圖片或動畫加上行為效果就行了

9、如何設計網頁導航欄標題

這是初學者可能會問的問題,其實這要具體情況具體分析的:比如如果內容非常多,就要考慮用「國字型」或拐角型;而如果內容不算太多而一些說明性的東西比較多,則可以考慮標題正文型;那幾種框架結構的一個共同特點就是瀏覽方便,速度快,但結構變化不靈活;而如果是一個企業網站想展示一下企業形象或個人主頁想展示個人風采,封面性是首選;Flash型更靈活一些,好的Flash大大豐富了網頁,但是它不能表達過多的文字信息。還沒有提到的就是變化型了,我只是想把這個留給各位朋友了,因為,只有不斷的變化才會提高,才會不斷豐富我們的網頁!

烈火網 www.liehuo.net 推薦閱讀蒼井空在微博為青海玉上周五(23日),日本AV女優蒼井空在自己的微博宣布,擬發起為青海災民籌款的活...IPv4 地址枯竭的日子何時到來?五一放假安排,2010年勞動節放假三天百度聯盟峰會召開 三大舉措助力聯盟發韓國版獸獸照片下載地址,遭網友瘋狂追谷歌街景汽車肩負收集WiFi網路與MAC的關注地球日:共同珍惜資源倡導低碳生活中國電影著作權協會:網吧看電影收費網頁灰白:向玉樹地震遇難同胞默哀點擊彈出div圓角的遮罩層,可關閉可移動類似HAO123.COM的多個搜索引擎跳轉效果Tab選項卡效果,兼容IE、火狐、Chrome等網站技術分析報告之——開心網給Dedecms前台/後台添加來源網址功能極點五筆7.1 (x86/x64) 標准版/學習版 導航欄的位置

導航欄能讓我們在瀏覽時容易的到達不同的頁面,是網頁元素非常重要的部分,所以導航欄一定要清晰、醒目,一般來講,導航欄要在「第一屏」能顯示出來,但是有時第一屏可能會小於上面所說的435px,基於這點考慮,那種橫向放置的導航欄要優於縱向的導航欄考慮,原因很簡單:如果瀏覽者的第一屏很矮,橫向的仍能全部看到,而縱向的就很難說了,因為窗口的寬度一般是不會受瀏覽器設置影響的,而縱向的則不確定性要大的多。

網頁布局類型

網頁布局大致可分為「國」字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型,下面分別論述。

1. 「國」字型:也可以稱為「同」字型,是一些大型網站所喜歡的類型,即最上面是網站的標題以及橫幅廣告條,接下來就是網站的主要內容,左右分列一些兩小條內容,中間是主要部分,與左右一起羅列到底,最下面是網站的一些基本信息、聯系方式、版權聲明等。這種結構是我們在網上見到的差不多是最多的一種結構類型。

2. 拐角型:這種結構與上一種其實只是形式上的區別,其實是很相近的,上面是標題及廣告橫幅,接下來的左側是一窄列鏈接等,右列是很寬的正文,下面也是一些網站的輔助信息。在這種類型中,一種很常見的類型是最上面是標題及廣告,左側是導航鏈接。

3. 標題正文型:這種類型即最上面是標題或類似的一些東西,下面是正文,比如一些文章頁面或注冊頁面等就是這種類。

4. 左右框架型:這是一種左右為分別兩頁的框架結構,一般左面是導航鏈接,有時最上面會有一個小的標題或標致,右面是正文。我們見到的大部分的大型論壇都是這種結構的,有一些企業網站也喜歡採用。這種類型結構非常清晰,一目瞭然。

5. 上下框架型:與上面類似,區別僅僅在於是一種上下分為兩頁的框架。

6. 綜合框架型:上頁兩種結構的結合,相對復雜的一種框架結構,較為常見的是類似於「拐角型」結構的,只是採用了框架結構。

7. 封面型:這種類型基本上是出現在一些網站的首頁,大部分為一些精美的平面設計結合一些小的動畫,放上幾個簡單的鏈接或者僅是一個「進入」的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現在企業網站和個人主頁,如果說處理的好,會給人帶來賞心悅目的感覺。

8. Flash型:其實這與封面型結構是類似的,只是這種類型採用了目前非常游戲行的Flash,與封面型不同的是,由於Flash強大的功能,頁面所表達的信息更豐富,其視覺效果及聽覺效果如果處理得當,絕不差於傳統的多媒體。

9. 變化型:即上面幾種類型的結合與變化,比如本站在視覺上是很接近拐角型的,但所實現的功能的實質是那種上、左、右結構的綜合框架型。

10、求網頁製作導航欄的代碼或方法

css代碼如下:---------------------
#box_topbar {
/*width: 980px;*/
width:100%;height:135px;
z-index:100;
_position: relative ;
_top:0px;
}
#topNav {
width: 100%;height: 105px;
z-index: 100;
overflow: visible;
position: fixed;
top: 0px; /* position fixed for IE6 */
_position: absolute;
_top: expression(documentElement.scrollTop + "px");background:#1a1a1a;
color:#fff;

}
html代碼如下------------------------------
<div id="box_topbar">
<div id="topNav">
</div></div>

做網頁還是用Dreamweaver更方便一些的

與動漫網頁導航欄設計相關的知識