“Internet與網頁設計”中導航條的設計及其應用

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

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

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

2　DIV+CSS布局導航條

2.1DIV+CSS布局

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

2.2DIV+CSS布局橫向導航條

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

圖3　帶有圓邊的導航

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

2.3DIV+CSS布局縱向導航條

除此之外，網頁中比較常見的縱向導航條也是比較常見的設計，本文選取通過DIV+CSS布局的最簡單的導航條進行分析，如圖4所示。

圖4　縱向導航條

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

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

  3　導航條應用

  導航條的制作是網頁設計課程中必不可少的一部分內容，但是導航條一般情況下不單獨存在，大部分情況下需要放入相關網頁中，作為1個或者幾個頁面的連接。所以，接下來本文就將上面設計的幾個簡單的導航條放入到相關的網頁中。選取1個較為簡單的網頁進行模仿訓練，網頁中存在兩個導航，其中橫向導航作為各個頁面之間的聯系，縱向導航條作為該頁面中各段文字位置的1個跳轉鏈接，固定不變在網頁的最左邊。網頁最終效果如圖5所示。

  

  圖5　導航條在網站中的應用

  3.1網站分析

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

  3.2網站制作過程解析

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

  標簽進行操作，在這個

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

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

  4　實驗教學安排

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

  5　結語

  Internet與網頁設計是計算機相關專業必修的專業課之一，其中導航條的制作是該課程中比不可少的基礎知識。本文就教學過程中制作兩種簡單導航條的方式進行講解，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— ），男，江蘇南京，碩士，助教；研究方向：網站建設。。