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

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

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

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

2.1DIV+CSS布局

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

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

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

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

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

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

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

圖4　縱向?qū)Ш綏l

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

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

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

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

  

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

  3.1網(wǎng)站分析

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

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

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

  標(biāo)簽進(jìn)行操作，在這個(gè)

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

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

  4　實(shí)驗(yàn)教學(xué)安排

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

  5　結(jié)語

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

［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è)。。