“Internet與網(wǎng)頁設(shè)計”中導(dǎo)航條的設(shè)計及其應(yīng)用

接著，就是中間豎線分割線的制作，在教學過程中發(fā)現(xiàn)，很多學生在制作這個豎線的時候經(jīng)常會認為是表格的邊框。但是仔細觀察會發(fā)現(xiàn)，這個線條還沒有達到上下邊緣，只是中間一小部分。所以，在制作這個分割線的時候采用的方法是，先截取圖1中的1個分割線條，然后把它作為單元格的1個圖片內(nèi)容插入到單元格中，本文使用標簽對其進行插入操作，這樣能比較好地解決分割線問題。

最后，給剩下的單元格補充進去導(dǎo)航條文字信息就基本完成了。選取學生做的1個導(dǎo)航條展示，如圖2所示。

分析圖2展示的導(dǎo)航條發(fā)現(xiàn)，導(dǎo)航條已經(jīng)基本能夠滿足正常使用需求，并且和實際的導(dǎo)航條已經(jīng)非常接近了，但是依然存在一些問題。如仔細觀察圖1中的導(dǎo)航條會發(fā)現(xiàn)，4個邊是帶有弧度的圓角邊，但是圖2中的邊是直角邊，看起來稍顯僵硬。

2　DIV+CSS布局導(dǎo)航條

2.1DIV+CSS布局

DIV+CSS是目前網(wǎng)頁比較流行的一種布局方式，不僅體現(xiàn)在整個網(wǎng)頁中，還廣泛應(yīng)用于很多網(wǎng)頁元素的制作中，如導(dǎo)航條。與上面介紹的利用表格

2.2DIV+CSS布局橫向?qū)Ш綏l

前面圖1中，通過表格布局，制作出的導(dǎo)航條提到的1個缺點就是解決圓弧邊較為困難，那么通過DIV+CSS布局的時候，能否解決這個問題呢？本文選取了1個帶有圓角邊的導(dǎo)航進行分析，如圖3所示。

圖3　帶有圓邊的導(dǎo)航

分析圖3所示導(dǎo)航條中圓角邊發(fā)現(xiàn)，圓角邊由長短不一的“盒子”組成，最上方的“盒子”是由1個高度（height）不是太高、具有全部邊框的盒子構(gòu)成；接下來的第二個“盒子”的寬度略微比上面的“盒子”要寬，但是如果寬度相差太大會造成視覺上的“鋸齒感”，一般選取的是1 px左右的偏差，并且制作此“盒子”只需要有左右邊框，上下不需要邊框；接下來的幾個“盒子”制作手法類似，一直做到和整個區(qū)域的寬度一致即可。這樣便給用戶一種視覺上具有圓角邊的感覺。最后，只要制作出其中1個區(qū)域，其他基本類似。

2.3DIV+CSS布局縱向?qū)Ш綏l

除此之外，網(wǎng)頁中比較常見的縱向?qū)Ш綏l也是比較常見的設(shè)計，本文選取通過DIV+CSS布局的最簡單的導(dǎo)航條進行分析，如圖4所示。

圖4　縱向?qū)Ш綏l

觀察圖4發(fā)現(xiàn)，除了基本的導(dǎo)航條鏈接功能外，點擊其中的“鏈接三”，給用戶一種凹陷的視覺感受。首先，本文按照1個無序列表對這些導(dǎo)航信息進行排序，使用1個

標簽，6個
• 標簽；接著，設(shè)計每一塊的內(nèi)容，給背景添加顏色，給每個列表的邊界（margin）和填充（padding）部分設(shè)置相應(yīng)的像素值；最后關(guān)鍵部分是如何使得鼠標點擊某個區(qū)域時可以呈現(xiàn)出凹陷的視覺效果。觀察圖4導(dǎo)航條，發(fā)現(xiàn)“鏈接三”和其他導(dǎo)航的區(qū)別，其他導(dǎo)航的上邊框和左邊框接近于白色邊框，右邊和下邊接近于黑色的邊框，而“鏈接三”恰好相反，上邊框和左邊框接近于黑色邊框，右邊和下邊接近于白色的邊框，利用這個效果使得鼠標停留在上面給用戶有種“按下去”的視覺感受，代碼實現(xiàn)上可根據(jù)邊框顏色（border-color）來進行改變，但是除此之外，不僅邊框上的色彩會改變，背景區(qū)域也會隨著邊框顏色的變化而變化，所以背景采用的是相對定位對其移動，當鼠標移動到該區(qū)域時（a:hover），通過相對定位（position: relative），分別向上和向左移動2px實現(xiàn)其移動效果。

  3　導(dǎo)航條應(yīng)用

  導(dǎo)航條的制作是網(wǎng)頁設(shè)計課程中必不可少的一部分內(nèi)容，但是導(dǎo)航條一般情況下不單獨存在，大部分情況下需要放入相關(guān)網(wǎng)頁中，作為1個或者幾個頁面的連接。所以，接下來本文就將上面設(shè)計的幾個簡單的導(dǎo)航條放入到相關(guān)的網(wǎng)頁中。選取1個較為簡單的網(wǎng)頁進行模仿訓練，網(wǎng)頁中存在兩個導(dǎo)航，其中橫向?qū)Ш阶鳛楦鱾€頁面之間的聯(lián)系，縱向?qū)Ш綏l作為該頁面中各段文字位置的1個跳轉(zhuǎn)鏈接，固定不變在網(wǎng)頁的最左邊。網(wǎng)頁最終效果如圖5所示。

  

  圖5　導(dǎo)航條在網(wǎng)站中的應(yīng)用

  3.1網(wǎng)站分析

  本文想要制作出如圖5所示的網(wǎng)站，首先要看出網(wǎng)站是有1個漸變效果的背景；接著，在網(wǎng)站的最上部存在一張類似于網(wǎng)頁圖標的圖片，當然這邊的圖片可以根據(jù)需求任意進行轉(zhuǎn)換；接下來，就是兩個導(dǎo)航條位置的擺放。觀察圖5，可以發(fā)現(xiàn)該網(wǎng)站存在兩個導(dǎo)航條，即本文制作出來的兩個導(dǎo)航條如圖3—4所示。橫向?qū)Ш綏l擺放在網(wǎng)站內(nèi)容部分的上端，可以通過這個導(dǎo)航條實現(xiàn)不同頁面的轉(zhuǎn)換等；縱向?qū)Ш綏l擺放在整個網(wǎng)站的左邊，可以通過這個導(dǎo)航條實現(xiàn)該頁面不同位置的切換；最后，就是網(wǎng)站內(nèi)容的制作，根據(jù)實際需求進行內(nèi)容的設(shè)置。

  3.2網(wǎng)站制作過程解析

  首先，針對網(wǎng)站的背景，從上面分析可知，背景的效果是1個漸變的過程，在教學過程中還未涉及漸變操作的相應(yīng)知識，所以為了解決這個問題，可以通過其他途徑來解決。由于背景是從白色漸變?yōu)殂y灰色，而下邊大部分區(qū)域為銀灰色，所以可以先截取該網(wǎng)站或者類似網(wǎng)站中白色漸變?yōu)殂y灰色的部分作為背景圖片插入到網(wǎng)頁中，設(shè)置body樣式中的background-image屬性，接著再通過顏色拾色器把截圖下來的這段漸變圖片的最底端的顏色獲取出來，然后把這個顏色作為網(wǎng)頁的這個背景色，通過設(shè)置body樣式中的background-color屬性，這樣讓整個背景呈現(xiàn)出1個漸變的過程，背景設(shè)置完成。接著，就是對網(wǎng)頁中顯示出來的一些基本要素進行布局，網(wǎng)頁的最頂端是一張圖片，所以，僅需要通過標簽進行插入即可。但是，如果直接通過標簽插入的話比較難以掌握其布局位置，所以本文在操作這塊內(nèi)容的時候通過設(shè)置1個

  標簽進行操作，在這個

  中調(diào)用相關(guān)的id樣式進行圖片的插入，id樣式里面可以設(shè)置圖片寬度和高度等相關(guān)屬性，若是需要把圖片居中顯示，則可添加margin屬性，設(shè)置margin的值為0和auto即可。隨后，在網(wǎng)頁主體部分插入需要顯示的相關(guān)內(nèi)容文字就可以大致顯示出整體效果。

  最后，最關(guān)鍵的一部分內(nèi)容便是把橫豎導(dǎo)航條插入到整個網(wǎng)頁中。橫向?qū)Ш綏l作為相關(guān)頁面的跳轉(zhuǎn)導(dǎo)航，所以只需要將上面做好的橫向?qū)Ш綏l代碼復(fù)制到相關(guān)位置，然后根據(jù)網(wǎng)頁需求給導(dǎo)航條中每一項設(shè)置超級鏈接。縱向?qū)Ш綏l作為當前網(wǎng)頁的位置導(dǎo)航，設(shè)置稍微復(fù)雜一些，首先由于網(wǎng)頁的整個頁面較長，篇幅較大，所以出現(xiàn)滾動條。這時候就需要設(shè)置縱向?qū)Ш綏l始終保持在左側(cè)不變。所以，本文需要給縱向?qū)Ш綏l樣式中添加1個position屬性，屬性值為fixed，這樣縱向?qū)Ш綏l就可以一直出現(xiàn)在網(wǎng)頁的左邊，不會隨著滾動條的移動而移動。緊接著，縱向?qū)Ш綏l作為該頁面的位置導(dǎo)航，點擊相關(guān)的鏈接，需要顯示本頁中某一塊的內(nèi)容，所以，本文需要給頁面中主體文字部分設(shè)置錨點，然后在縱向?qū)Ш綏l中對這些錨點進行鏈接設(shè)置，這時候左邊導(dǎo)航條便可以固定不動，通過點擊相關(guān)的導(dǎo)航，本網(wǎng)頁可以跳轉(zhuǎn)到相關(guān)的文字內(nèi)容。

  4　實驗教學安排

  導(dǎo)航條一般不單獨出現(xiàn)，它是鏈接各個網(wǎng)頁的關(guān)鍵性指南，所以這塊的實驗教學安排致力于把導(dǎo)航條的制作插入到網(wǎng)頁中應(yīng)用。經(jīng)過前面理論部分知識的學習以及相關(guān)案例的介紹，實驗教學的安排是檢驗學習效果的重要手段之一，所以，首先可以引導(dǎo)學生對一些經(jīng)典網(wǎng)頁中導(dǎo)航條進行觀察分析，分析通過目前所學的知識可否制作出相關(guān)或者類似的導(dǎo)航條出來；接著，在給定的時間內(nèi)，著手對這些導(dǎo)航條進行實際的動手制作，并且發(fā)現(xiàn)其中存在的問題；最后，展示各自的項目并且自我評價，總結(jié)本節(jié)課程。

  5　結(jié)語

  Internet與網(wǎng)頁設(shè)計是計算機相關(guān)專業(yè)必修的專業(yè)課之一，其中導(dǎo)航條的制作是該課程中比不可少的基礎(chǔ)知識。本文就教學過程中制作兩種簡單導(dǎo)航條的方式進行講解，1個是基于表格

［1］SHEA D，HOLZSCHLAG M E，陳黎夫，等. CSS禪意花園［M］.北京：人民郵電出版社，2007.

Design and application of the navigation bar in the “Internet and Web Design”

Geng Hai
（Dongfang College of Zhejiang University of Finance & Economics， Haining 314408， China）

The “Internet and Web Design” is one of essential courses in college computer related majors， and the navigation bar design is also an important basic application in the “Internet and Web Design”course. Navigation design usually adopts two ways in the teaching process， one is adopted table form for basic part and another part uses DIV + CSS way for the design of the navigation bar. This paper separately introduces the two ways to layout the navigation bar.

web design； navigation bar； table layout； DIV + CSS

耿海（1988— ），男，江蘇南京，碩士，助教；研究方向：網(wǎng)站建設(shè)。。