畢業(yè)論文----網(wǎng)站的設計與實現(xiàn)

1、<p><b>　　畢業(yè)設計（論文）</b></p><p>　　題目：網(wǎng)站的設計與實現(xiàn)</p><p><b>　　目 錄</b></p><p><b>　　摘 要4</b></p><p>　　第一章 緒 論6</p><p>

2、　　1.1網(wǎng)上輔助教學產(chǎn)生的背景與意義6</p><p>　　1.2后臺管理系統(tǒng)在輔助教學網(wǎng)站的作用7</p><p>　　1.3開發(fā)工具與運行環(huán)境7</p><p>　　第二章 網(wǎng)站制作實戰(zhàn)8</p><p><b>　　2.1站點8</b></p><p>　　2.1.1

3、創(chuàng)建站點8</p><p>　　2.1.2 創(chuàng)建站點內(nèi)容9</p><p><b>　　2.2首頁9</b></p><p>　　2.2.1 設置首頁布局9</p><p>　　2.2.2設置首頁的頁面屬性10</p><p>　　2.2.3查看和編輯頭內(nèi)容11</p>

4、<p>　　2.2.4 插入圖像11</p><p>　　2.2.5插入多媒體12</p><p>　　2.2.6插入文本13</p><p>　　2.3創(chuàng)建其它網(wǎng)頁14</p><p>　　第三章 建立網(wǎng)頁鏈接14</p><p>　　3.1文字鏈接15</p><p>

5、　　3.2圖像鏈接16</p><p>　　3.3 E–Mail的鏈接18</p><p>　　3.4文件下載鏈接19</p><p>　　3.5在HTML語言中建立網(wǎng)頁鏈接20</p><p>　　3.5.1文字鏈接20</p><p>　　3.5.2圖像鏈接21</p><p>

6、<b>　　第四章 總結(jié)22</b></p><p><b>　　致 謝23</b></p><p><b>　　參考文獻：24</b></p><p><b>　　網(wǎng)站的設計與實現(xiàn)</b></p><p><b>　　摘 要<

7、/b></p><p>　　教學網(wǎng)站的建設與發(fā)展是信息化教育迫切的需要。隨著信息化時代的日益臨近，計算機網(wǎng)絡已經(jīng)成為當今社會各個領域不可或缺的組成部分！</p><p>　　學生可以通過瀏覽網(wǎng)站中的知識講解模塊，復習課堂教學的內(nèi)容或是針對自己的興趣和學習的進度自主地選擇學習內(nèi)容遇到疑難問題，通過課程論壇和其他同學或老師進行討論，從而得到問題的解答；學生還可以通過網(wǎng)絡課程中練習測試進行

8、自我測試，鞏固已經(jīng)學過的知識，發(fā)現(xiàn)薄弱環(huán)節(jié)。而對于教師來說，可以根據(jù)學生們提出的問題，及時發(fā)現(xiàn)教學中存在的不足，并做相應的調(diào)整與改進；教師輔導答疑時，不再受時間空間的限制，只要查看網(wǎng)絡課程中的課程論壇，就可以了解學生的疑難問題，然后進行解答。構(gòu)建網(wǎng)絡課程，利用網(wǎng)站的可擴展性好，易于更新的優(yōu)點，制定規(guī)則、修改教學策略、提供教學資源、組織評價、新題庫等。在一定程度上彌補和克服了傳統(tǒng)的教師授課教學方式的不足。</p><p

9、>　　作為一種新的教學模式，網(wǎng)絡輔助教學能充分發(fā)揮信息技術(shù)在高校教學中的優(yōu)勢，體現(xiàn)以學生為主體、教師為主導的現(xiàn)代教育思想，隨著計算機技術(shù)和網(wǎng)絡技術(shù)的不斷發(fā)展，網(wǎng)絡輔助教學得到越來越廣泛的應用，如何有效的開展網(wǎng)絡輔助教學活動逐漸成為高校教學信息化建設關注的重要課題，網(wǎng)絡輔助教學平臺的建設成為解決這一課題的基礎和關鍵。</p><p>　　隨著信息化教育的發(fā)展，一批批校園網(wǎng)絡如雨后春筍初具規(guī)模。網(wǎng)絡教育的第一個

10、直接效果是促進信息化教育。如何充分發(fā)揮校園中的網(wǎng)絡的功能，促進教育教學的大發(fā)展是擺在教育工作者面前一個急需解決的課題！于是教學網(wǎng)站，學科網(wǎng)站的研究便孕育而生！</p><p>　　綜上所述，信息化教育迫切需要構(gòu)建高效的教學網(wǎng)站！</p><p>　　關鍵詞：網(wǎng)上輔助教學；教學網(wǎng)站；信息技術(shù)。</p><p>　　The first chapter picks sho

11、uld</p><p>　　Teaching website construction and development of information education is an urgent need. Along with information age approaching, the computer network has become the social each domain indispens

12、able part!</p><p>　　Students can browse through the sites on the knowledge module, review the teaching contents in class or for their own interest and learning progress independently choose the content of le

13、arning problems encountered by the course forum, and other students or teachers are discussed, so as to obtain the solution; students can also through the network curriculum practice test self test, to consolidate what h

14、as been learned, to discover the weak links. To teachers, according to the questions, timely </p><p>　　As a new teaching pattern, network aided teaching can make full use of information technology in univers

15、ity teaching advantage, embodies student-centered, teacher-led modern education thought, along with the computer technology and the continuous development of network technology, network teaching has been used more and mo

16、re widely, how to effectively carry out the network aided teaching activity gradually become higher education information construction important topic, network aided teaching p</p><p>　　With the development

17、of e-education, one batch of campus network such as bamboo shoots after a spring rain to take shape. Network education and the first direct effect is to promote education informatization. How to make full use of campus n

18、etwork function, promote educational development is an educator before an urgent solution! So the teaching website, subject website of born!</p><p>　　To sum up, the informatization of education is an urgent

19、need to build effective teaching website!</p><p>　　Key words: network teaching; teaching website; information technology</p><p><b>　　第一章 緒 論</b></p><p>　　1.1網(wǎng)上輔助教學產(chǎn)生的背景

20、與意義</p><p>　　信息技術(shù)是當今人類最偉大的科研成果之一，信息技術(shù)的發(fā)展使得其應用已廣泛深入到社會生活的各領域，對教育的發(fā)展也帶來了巨大影響。利用信息技術(shù)促進教育教學方式的變革、促進創(chuàng)新人才的培養(yǎng)，成了教育科學領域研究的重要課題，專題學習網(wǎng)站正是在這種背景下出現(xiàn)的。</p><p>　　學生可以通過瀏覽網(wǎng)站中的知識講解模塊，復習課堂教學的內(nèi)容或是針對自己的興趣和學習的進度自主地選

21、擇學習內(nèi)容遇到疑難問題，通過課程論壇和其他同學或老師進行討論，從而得到問題的解答；學生還可以通過網(wǎng)絡課程中練習測試進行自我測試，鞏固已經(jīng)學過的知識，發(fā)現(xiàn)薄弱環(huán)節(jié)。而對于教師來說，可以根據(jù)學生們提出的問題，及時發(fā)現(xiàn)教學中存在的不足，并做相應的調(diào)整與改進；教師輔導答疑時，不再受時間空間的限制，只要查看網(wǎng)絡課程中的課程論壇，就可以了解學生的疑難問題，然后進行解答。構(gòu)建網(wǎng)絡課程，利用網(wǎng)站的可擴展性好，易于更新的優(yōu)點，制定規(guī)則、修改教學策略、提供

22、教學資源、組織評價、更新題庫等。在一定程度上彌補和克服了傳統(tǒng)的教師授課教學方式的不足。</p><p>　　作為一種新的教學模式，網(wǎng)絡輔助教學能充分發(fā)揮信息技術(shù)在高校教學中的優(yōu)勢，體現(xiàn)以學生為主體、教師為主導的現(xiàn)代教育思想，隨著計算機技術(shù)和網(wǎng)絡技術(shù)的不斷發(fā)展，網(wǎng)絡輔助教學得到越來越廣泛的應用，如何有效的開展網(wǎng)絡輔助教學活動逐漸成為高校教學信息化建設關注的重要課題，網(wǎng)絡輔助教學平臺的建設成為解決這一課題的基礎和關鍵

23、?！?lt;/p><p>　　1.2后臺管理系統(tǒng)在輔助教學網(wǎng)站的作用</p><p>　　后臺管理系統(tǒng)實現(xiàn)對整個網(wǎng)站的后臺數(shù)據(jù)庫進行維護的功能，其中包括對學生用戶和網(wǎng)絡管理員的增加、刪除和管理，對新聞發(fā)布和練習測試中各大題庫內(nèi)容的增加、刪除和修改，對課程論壇的歷史留言和不良留言的刪除等工作。主要采用WEB頁和ASP技術(shù)相結(jié)合的方法來實現(xiàn)網(wǎng)絡課程的遠程數(shù)據(jù)維護。網(wǎng)站管理員通過密碼登錄管理員頁面后

24、，直接以填寫和提交網(wǎng)頁表單的形式來增加和編輯有關的數(shù)據(jù)信息，系統(tǒng)自動對相應數(shù)據(jù)庫進行增加或編輯，并直接反映在前臺的頁面發(fā)布上，即簡單快捷,又安全可靠。</p><p>　　1.3開發(fā)工具與運行環(huán)境</p><p>　　本系統(tǒng)已經(jīng)在計算機上進行開發(fā)并獲得通過了，同時方便系統(tǒng)開發(fā)，減少開發(fā)過程的難度，我們基于以下的環(huán)境：</p><p>　　（1）以Windows XP

25、為操作系統(tǒng)。</p><p>　?。?）以Dreamwever+ASP為開發(fā)工具。</p><p>　?。?）本系統(tǒng)是基于B/S模式的管理系統(tǒng)。 </p><p>　　Windows XP是目前主流操作系統(tǒng)，Dreamwever是Macromedia公司出品的一套專業(yè)化的網(wǎng)頁創(chuàng)造工具，它采用“所見即所得”的可視化編輯方式，通過特有的行為、摸板、時間軸等技術(shù)，使用戶

26、能夠快速高效地創(chuàng)建各種具有專業(yè)水平的網(wǎng)頁，而不需要編寫任何代碼。如果需要在代碼界面進行工作，只需要進入HTML代碼窗口或原代碼檢視器中，即可同步看到 Dreamwever生成器的源代碼。在這個代碼窗口中，可以編輯任何內(nèi)容，也可以方便地返回可視化編輯器。</p><p>　　第二章 網(wǎng)站制作實戰(zhàn)</p><p><b>　　2.1站點</b></p>

27、;<p>　　2.1.1 創(chuàng)建站點</p><p>　　要制作一個網(wǎng)站，第一步操作都是一樣的，就是要創(chuàng)造一個“站點”，這樣可以使整個網(wǎng)站的脈絡結(jié)構(gòu)清晰地展現(xiàn)在面前，避免了以后再進行紛雜的管理。</p><p>　　從菜單中選擇“站點/管理站點”在彈出的對話框中選擇“新建”，之后再選擇其中的“站點”，再次彈出一個對話框，在文本框中輸入自己已經(jīng)企化好的網(wǎng)站名稱“追夢人”。<

28、/p><p>　　填好后，單擊“下一步”，進入下一個步驟。由于我要做的是一個靜態(tài)的網(wǎng)頁，所以選擇上面的一項“否，我不想使用服務器技術(shù)?！?lt;/p><p>　　單擊“下一步”，進入下一個步驟。</p><p>　　在此選項中有兩個選擇，選擇推薦的“編輯我的計算機上的本地副本，完成后再上傳到服務器”。底下的文本框允許在本地磁盤上指定一個文件夾，Dreamweaver將在其中

29、儲存站點文件的本地副本。單擊該文本框后面的文件夾圖標，新建并指定一個空的文件夾“E:/ding”。之后單擊“下一步“，進入下一個步驟。</p><p>　　這一步是如何設置連接到遠程服務器，彈出式菜單中有6中選擇，這里選擇“無”。而后“下一步”再“完成”，即可。</p><p>　　2.1.2 創(chuàng)建站點內(nèi)容</p><p>　　站點創(chuàng)建完成后，就可以創(chuàng)建Web頁來填

30、充站點了。在“右側(cè)浮動面板組”中選擇“文件/文件”面板，此時整個網(wǎng)站中沒有任何內(nèi)容。用鼠標右擊面板中的本地根目錄文件夾。</p><p>　　在彈出的菜單中選擇“新建文件”，新建一個文件后將其命名為“index.htm(或index.html),它就是未來的首頁。 </p><p>　　由于“追夢人”網(wǎng)站分為“平面設計”、“動畫制作”、“網(wǎng)文精品”、“經(jīng)典回顧”、“個人說明“這五個大欄目，

31、所以繼續(xù)用鼠標右擊右側(cè)，在彈出的菜單中選擇第二項“New Folder（新建文件夾）”。執(zhí)行五次操作，新建五個文件夾，并把它們重命名為graph、anim、books、music、letter，分別對應上面的五個大欄目。存放它們各自的內(nèi)容。之后再次新建1個文件夾，命名為images,用來存放“所有的圖象文件”的內(nèi)容。</p><p>　　之后在個欄目的文件夾里還要建立想相應的欄目網(wǎng)頁。   &

32、lt;/p><p><b>　　2.2首頁</b></p><p>　　2.2.1 設置首頁布局</p><p>　　每個網(wǎng)站都會有一個首頁，就功能上而言，它代表著一個網(wǎng)站的風格與特色，就網(wǎng)站架構(gòu)上而言，它代表了網(wǎng)站的第一層架構(gòu)，至于網(wǎng)站上其他Web頁，原則上都必須通過首頁來連接散播出去，可見首頁是多么的重要。</p><p&g

33、t;　　首頁是打開網(wǎng)站后在瀏覽器中顯示的第一個頁面。它是起什么名字通常要視Server端的設置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。當然，后綴名為html也是正確的。</p><p>　　具體設置方法是：右健單擊“文件”浮動面板中的index.htm,在彈出的菜單中選擇“設成首頁”。</p><p>　　首頁的布局有很

34、多方法，在這里我所用到的是表格的“布局模式”?！安季帧蹦Ｊ?lt;/p><p>　　表格稱為布局表格，單元格稱為布局單元格。在繪制布局表格和布局單元格時，必須</p><p>　　“標準”模式切換到“布局”模式。直接單擊“布局”按鈕即可。</p><p><b>　　操作步驟：</b></p><p>　　1、在“插入快捷欄

35、”的“布局”分類中，單擊“布局表格”按紐。</p><p>　　2、將變成“+”形狀的鼠標光標放到編輯中網(wǎng)頁上，在要繪制的地方進行拖動就可以進行創(chuàng)建了。（如果繪制的是第一個表格必須從網(wǎng)頁的最左上角開始繪制）。</p><p>　　3、在這里要繪制多個表格，可以再次單擊“布局表格”按紐進行繪制，也可以按住Ctrl鍵繪制多個表格。追夢人”網(wǎng)站首頁的布局如圖所示：</p><

36、p>　　2.2.2設置首頁的頁面屬性</p><p>　　首先雙擊“文件”浮動面板中的index.htm,進入頁面的編輯窗口。右健單擊空白區(qū)域，在菜單中選擇“頁面屬性”，之后彈出“頁面屬性”對話框，若選擇主菜單“修改/頁面屬性”項，也可以把打開該對話框。</p><p>　　在“頁面屬性”對話框中，左側(cè)窗口顯示“分類”，其中包括了“外觀”、“鏈接”、“標題”、“標題/編碼”、“跟蹤圖

37、像”5項，右側(cè)區(qū)域則顯示各類中可以設置的項目?！白穳羧恕笔醉撛O置的屬性如下圖所示：</p><p>　　2.2.3查看和編輯頭內(nèi)容</p><p>　　一個網(wǎng)頁文件結(jié)構(gòu)上實際是由兩部分組成，頭（head）內(nèi)容和主體（body）內(nèi)容主體內(nèi)容（body）是文檔的主要部分，也是包含文本和圖像等的可見部分。頭內(nèi)容（head）是除文檔標題外的不可見部分，包含有文檔類型、語言編碼、搜索引擎的關鍵的關鍵

38、字和內(nèi)容指示器以及樣式定義等重要信息，這些元器并不是每個頁面都需要的，例如，可以僅為主頁提供關鍵字。</p><p>　　下面就以首頁為例，說明怎樣插入較常用的頭（ head）內(nèi)容。</p><p>　　單擊“菜單攔”下面“插入快捷”的下拉列表，選擇其中的HTML類，此時右側(cè)將會顯示該類中可以插入的對象快捷按鈕，再次單擊第2個按鈕“文件頭”旁邊的下拉箭頭，會彈出菜單，該項列出的便是即將插入

39、的頭內(nèi)容。</p><p>　　2.2.4 插入圖像</p><p>　　圖像是網(wǎng)頁中不可或缺的組成成份，恰當?shù)厥褂脠D像，可以使網(wǎng)站充滿生活生命力與說服力，吸引更多的瀏覽者，加深他們欣賞你網(wǎng)站的意愿。</p><p>　　另一方面，網(wǎng)頁的容量大小是網(wǎng)站成功與否的一大關鍵因素。由于網(wǎng)絡在傳輸上的限制，導致了下載的速度不可能太快，因此，網(wǎng)頁的大小就不能太大，其中關鍵就在

40、于圖像的大小了，否則瀏覽者會失去等待的耐心，無論你的網(wǎng)站多么精彩也無濟于事了。所以，在網(wǎng)面容量大小的問題上一定要重視。下面就來詳細介紹對網(wǎng)頁圖像進行處理的操作步驟，以使得它們在保持圖形美麗與網(wǎng)站風格搭配的基礎上，圖片文件能夠變的更小。</p><p>　　1、首先將光標停留在要插入圖像的位置，然后單擊“菜單欄”下面“插入快健欄”的下拉表，選擇其中的“常用”類，則右側(cè)將會顯示該類中可以插入的對象快鍵按鈕。左起第5個

41、即為“圖像：圖像”按鈕，單擊它右側(cè)的下拉列表，選擇第1項“圖像”。</p><p>　　2、隨即彈出“選擇圖像源文件”對話框。從計算機磁盤中選擇想要插入的圖像文件，或在URL編輯框中輸入圖像的路徑和名稱。下面的“相對于”下拉表框中，可選擇文件URL地址的類型，如果選擇“文檔”選項，表示圖像地址相對于當前文檔；如果選擇“站點根目錄”選項，表示地址相對于根目錄。在這里我要插入的是網(wǎng)站標志logo，插入logo圖象,最

42、后單擊“確定”按鈕，即可完成插入圖像的操作。</p><p>　　2.2.5插入多媒體</p><p>　　在Dreamweaver MX2004中，除了之前講到的可以插入“圖像”外，還可插入動畫、聲音、視頻等媒體元素，如Flash,Shockwave,Applets,ActieX及格Midi聲音文件等，并且還可以在Dreamweaver自身內(nèi)插入Macromedia Flash MX20

43、04按鈕和文本對象，以及進行相關的后期處理和添加設計備注等操作。</p><p>　　在Dreamweaver MX 2004文檔中，可以插入媒體文件包括Flash Shockwave影片、QuickTime 、AVI java、 applet Active X控件以及各種格式的音頻文件。</p><p>　　要在瀏覽器中播放放Flash 動畫，必須在瀏覽器中集成“Flash 播放器 （F

44、lash Player）”。其中，Internet Explorer通過ActiveX控制來實現(xiàn)，Netscape Navigator則是通過相應的插件來實現(xiàn)的。在最新的Netscape Navigator和Internet Explorer瀏覽器中，均已集成了 Flash動畫播放功能。</p><p><b>　　操場作步驟：</b></p><p>　　步驟1:將

45、光標停留在要插入Flash的位置，然后單擊菜單欄下面“插入快捷欄”的下拉列表，選擇其中的“常用”分類，右側(cè)將會顯示該類中可以插入的對象快捷按鈕。左起第6個即為“媒體”按鈕，單擊它右側(cè)的下拉列表，選擇第1項Flash圖標。</p><p>　　步驟2:在彈出的對話框中選擇擴展名為swf 的Flash文件，即可將其插入到Dreamwe aver的“網(wǎng)頁編輯窗口”中，可以看到，在這個窗口中Flash文件的

46、大小。在 這里我的主頁插入的一個動畫，如圖所示：</p><p><b>　　2.2.6插入文本</b></p><p>　　文字是人類語言最基本的表達方式，在網(wǎng)頁中，文本內(nèi)容也可以說是重要的組成部分，一個網(wǎng)站成功與否，它是最關鍵的因素。在這最關鍵的因素。可豐富網(wǎng)站的文字內(nèi)容，并以最最美觀、最整齊的方式放入到網(wǎng)頁中。</p><p&g

47、t;<b>　　插入文本的兩種方式</b></p><p>　　網(wǎng)頁中需要大量的文本，我們或以通過以下兩種方式插入它們</p><p>　　一種是在網(wǎng)頁編輯窗口中直接用鍵盤敲入文本。這可以算是最基本的輸入方式了，和一些文本編輯軟件（如Microsoft Word）的使用方法一樣，選擇好習慣的輸入法，就可以運指如飛了。</p><p>　　另一種

48、是復制文本的方式。有些讀者可能不喜歡使用Dreamweaver MX2004來進行打字的工作，而更習慣在專門的文本編輯軟件中快速打字，如Microsoft Word和 Windows自帶的記事本等，又或者讀者已經(jīng)準備好了要放入網(wǎng)頁的文本的電子版本，那么我們就可以直接使用Dreamweaver的文本復制功能，將大段的文本內(nèi)容拷貝到網(wǎng)頁的編輯窗口來進行排版的工作，具體步驟如下。</p><p>　　打開文本編輯軟件（

49、如Microsoft Word），選中要復制的文本，它們將反白顯示，執(zhí)行菜單“編輯/復制”命令或直接用快捷鍵Ctrl+C，之后切換回Dreamweaver,將光標停留在插入文本的位置，執(zhí)行主菜單“編輯/粘貼”命令或直接使用快捷鍵Ctrl+v,即可將大段的文本快速粘貼到網(wǎng)頁中。</p><p>　　這在我的“網(wǎng)文精品”中用到很多，全部是在word軟件中排好ctrl+c,然后點擊要粘貼的位置，crtl+v到Dream

50、weaver即可。</p><p><b>　　2.3創(chuàng)建其它網(wǎng)頁</b></p><p>　　還有其它的幾個網(wǎng)站與主頁的制作相同，一個網(wǎng)頁是圖象和文字的組合。</p><p>　　“平面設計”中的圖象插入和前面的介紹相似，并可以在屬性攔中調(diào)節(jié)圖象的大小。 在Dreamwerver中常常會用到Firework、Flash，它們是相輔相成，在主頁

51、中的主體部分就是用Firework,如圖所示：</p><p>　　在“個人說明”中也用到這點，首先定好需要尺寸，在屬性中設好背景，顏色等等，插入圖象，輸入文字，也word里的操作雷同。</p><p>　　第三章 建立網(wǎng)頁鏈接</p><p>　　網(wǎng)站實際上是由很多網(wǎng)頁組成的，那么網(wǎng)頁之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容----網(wǎng)頁的“鏈接”。</p&g

52、t;<p>　　“鏈接”，又稱“超鏈接"（Hyperlink）,它作為網(wǎng)頁的橋梁，起著相當重要的作用。網(wǎng)頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver MX2004中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共8種。其中部分內(nèi)容在之前的章節(jié)中可能接

53、觸過，這里將對其進行更深入的講解。</p><p><b>　　3.1文字鏈接</b></p><p>　　“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護”的特點。</p><p>　　接下來結(jié)合我的個人網(wǎng)站為實例，來講解如何為文字建立“鏈接”。</p><p>　　

54、具體操作步驟如下所述。</p><p>　　步驟1:準備好已經(jīng)制作完成的首頁的各個欄目頁面（假設除了“鏈接”，其他內(nèi)容都已經(jīng)制作完成了），該網(wǎng)站包含6個欄目，這里的5個欄目----“平面設計”、“動畫制作”和“網(wǎng)文精品”、“經(jīng)典回顧”、“個人說明”為例來進行講解。</p><p>　　步驟2:在Dreamweaver 中打開首頁，之后反白選取作為“鏈接”的文字。實例中要做到單擊不同的欄目的

55、網(wǎng)頁。因此為第1個欄目“平面設計”設置鏈接，首先要反白選中“平面設計”4個文字。</p><p>　　步驟3:觀察“屬性面板”，其中包括一個“鏈接”文本框。</p><p>　　步驟4:接下來需要把鏈接的地址加入到文本框中，方法有3種。</p><p>　　這里我用到的是直接點擊文件夾圖標，在文件夾中找到要鏈接的對象graph.htm。這樣就建立了超鏈接。不過有點很

56、重要，由于大多數(shù)服務器都不支持中文文件名，而且對大小寫敏感，因此采用英文文件名并統(tǒng)一大小寫。如圖所示：</p><p>　　步驟5:在“鏈接”文本框下面還有一個“目標”下拉列表，從中可以選擇鏈接網(wǎng)頁顯示的窗口方式，共有4種。如圖：</p><p>　　實例中沒有選擇任何選項，保持空白，表示在原窗口中打開鏈接網(wǎng)頁。</p><p>　　步驟6:還可以設置一些“鏈接”的

57、屬性，這是前面講過的內(nèi)容。單擊“屬性面板”中的“頁面屬性”，選擇其中的“鏈接”分類，可以進行的設置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及“下劃線樣式”。</p><p>　　步驟7:至此，第1個欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，測試一下，當鼠標放在“平面設計”這4個文字上時將變成手形，并且瀏覽器窗口下面的狀態(tài)欄中會顯示

58、鏈接到的網(wǎng)頁的地址，單擊文字，頁面會立即跳轉(zhuǎn)到第1個欄目中，這表示鏈接已經(jīng)制作成功了。</p><p>　　步驟8:同理，按照以上步驟，再為“動畫制作”和“網(wǎng)文精品”“經(jīng)典回顧“等其它欄制作指向?qū)獧谀康逆溄印?lt;/p><p>　　步驟9:通常在欄目頁面中還需要有“返回首頁”的鏈接，單擊其后可以跳轉(zhuǎn)回首頁，因此在各個欄目中還要插入“網(wǎng)站首頁”的文字，并且制作指向首頁index.html的鏈

59、接，制作方法不變。</p><p>　　至此，整個“文字鏈接”的實例就全就全部完成了。通過對這個實例的講解，讀者不僅應該學會如何為文字制作鏈接，還應用對“鏈接”有了更加深刻的理解，鏈接的目的何在？它到底能夠在網(wǎng)頁的網(wǎng)站中發(fā)揮什么樣的作用？怎樣才能更好地使用它？這些是網(wǎng)頁制作者更應該思考的問題。</p><p>　　下面繼續(xù)介紹其他類型的鏈接。</p><p><

60、;b>　　3.2圖像鏈接</b></p><p>　　“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應該在網(wǎng)頁中插入“圖像”，有關插入“圖像”或“導航條”按鈕的內(nèi)容，接下來以我的網(wǎng)站“追夢人“為例，講解如何建立“圖像鏈接”。</p><p><b>　　操作步驟</b></p><p>　　步驟

61、1:首先仍然要準備好已經(jīng)制作完成的首頁和各個欄目的頁面（假設除了“鏈接”，其他內(nèi)容都已經(jīng)制作完成了），該網(wǎng)站包含6個欄目，下面我們就動手為這6個欄目分別制作它們的鏈接。</p><p>　　步驟2:在Dreamweaver中打開網(wǎng)站的首頁，之后選取要制作“鏈接”的圖像。實例中先為第3個欄目“動畫制作”設置鏈接，因此選中包含“動畫制作”4個字的圖像。</p><p>　　步驟3:觀察“屬性面

62、板”，在“鏈接”文本框中輸入鏈接的文字地址?？梢允褂弥爸v過的“指向文件”和“選擇文件”的方法。</p><p>　　步驟4:如果有需要，可以在“目標”下拉列表中選擇“鏈接”網(wǎng)頁顯示的窗口方式，分別為-blank 、-parent 、-self或 top。實例中使用了默認出的保留空白選項的方式。 </p><p>　　步驟5:另外，讀者還可以為圖像增加“替代”文本。實例中為第1個欄目增加欄

63、目名稱的“替代”文本。</p><p>　　步驟6:至此，第1個欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，測試一下，將鼠標放在“動畫制作”4個文字上時將變成手形，同時瀏覽器窗口下面的狀態(tài)欄中會顯示出鏈接到的網(wǎng)頁的地址，并且會顯示出“替代”文本“動畫制作”，單擊文字，頁面會立即跳轉(zhuǎn)到第3個欄目中，這表示鏈接已經(jīng)制作成功了。</p><p>　　步驟7:同理，按照

64、以上步驟，再為其它幾幅圖像制作指向?qū)獧谀康逆溄印?lt;/p><p>　　步驟8:在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉(zhuǎn)回首頁，其制作方法不變。</p><p>　　至此，整個“圖像鏈像”的實例就全部完成了。</p><p>　　3.3 E–Mail的鏈接</p><p>　　E-Mail鏈接，是指當瀏覽者單擊該鏈接之后，不是打

65、開一個網(wǎng)頁文件，而是啟動用戶的E- Mail客戶端軟件（如Outlook Express）,并打開一個空白的新郵件，供瀏覽者撰寫內(nèi)容來與網(wǎng)站聯(lián)系人聯(lián)系，這是一種最方便的互動方式。</p><p>　　結(jié)合“個人說明”網(wǎng)頁，建立E-Mail鏈接的步驟如下所述。</p><p><b>　　操作步驟</b></p><p>　　步驟1:將光標停留在

66、頁面右下角要插入E-mail鏈接的位置。</p><p>　　步驟2:選擇“插入快捷欄”中的“常用”分類，單擊左側(cè)第2個“電子郵件鏈接”按鈕。</p><p>　　步驟3:在彈出的“電子郵件鏈接”對話框中有兩個輸入項，分別是“文本”和“E-Mail” 。在“文本”項中輸入鏈接的文字，中文、英文均可，在E-Mail項中輸入網(wǎng)站聯(lián)系有的電子郵件地址</p><p>　　

67、步驟4 單擊“確定”按鈕，具有“E-Mail鏈接”屬性的文本就ding_zhuimeng123@163.net。插入到光標所在位置了，按下 Ctrl+S保存網(wǎng)頁，再按下F12預覽查看實際效果。</p><p>　　上面的方法只適用于文本的“E-Mail鏈接”，如果想在其它的對象（如圖像）上也加入這種鏈接，該怎辦呢？下面介紹第2種建立“E-Mail鏈接”的方法。</p><p>　　其實很簡

68、單，與前面講過的圖像加入鏈接的方法基本一樣。先在頁面中需要的地方插入圖像，之后選中圖像，并在“屬性面板”的“鏈接”文本框中輸入如下語句即可----mailto: ding_zhuimeng123@163.net ?subject=網(wǎng)站的建議與第1種方法不同的是，E-Mail 地址前面增加了mailto:字樣。用這種方法就可以給圖像等其他對象建立“E-Mail鏈接”了。</p><p><b>　　3.4

69、文件下載鏈接</b></p><p>　　“文件下載鏈接”的原理很簡單，只要鏈接文件屬于瀏覽無法識別的關型，便都會使用IE瀏覽器直接進行下載，并保存到本地計算機中。</p><p>　　瀏覽器無法識別的文件類型有很多，這里就介紹一個最常用的，以zip或rar為后綴名的壓縮格式文件，這種文件可以使用主流的壓縮軟件（如winzip、winrar）來制作。下面我們就業(yè)以實例來說明。&

70、lt;/p><p>　　在前面“插入多媒體”一章中，我們曾經(jīng)講過直接鏈接文件的方式來插入“視頻”，即直接在“鏈接”文本框中輸入“文件名+名后綴名”，如olympus.wmv。單日擊這個鏈接，經(jīng)過數(shù)據(jù)下載后，Windows系統(tǒng)將啟動自帶的媒體播放器Windows Media Player 來播放該視頻。</p><p><b>　　操作步驟</b></p>&

71、lt;p>　　步驟1:先將視頻文件olympus.wmv通壓縮成olympus.rar文件，放入站點的media文件夾下。</p><p>　　步驟2:將文件路徑輸入至“鏈接”文本框中。</p><p>　　步驟3:保存網(wǎng)頁，按下F12預覽，在瀏覽器中單擊“下載精彩廣告視頻”鏈接文本，會彈出“文本下載”選擇框，單擊其中的“保存”按鈕。</p><p>　　步驟

72、4:在“另存為”對框中選擇保存到本地計算機中的位置，實例中為“經(jīng)典回顧”文件夾。之后單擊“保存”按鈕，壓縮文件即保存到該位置中。至此，“文件下載鏈接”便制作完成了。讀者可以打開“我的文檔”文件夾，解壓縮olympus.rar文件，隨時欣賞下載影片。</p><p>　　本設計中未用到此鏈接，在此只作簡單介紹。</p><p>　　3.5在HTML語言中建立網(wǎng)頁鏈接</p>&

73、lt;p><b>　　3.5.1文字鏈接</b></p><p>　　在HTML語言中用超鏈接標記指向一個目標。其基本格式為：</p><p>　　<a href=”URL”文本內(nèi)容</a></p><p>　　舉個簡單的“文本鏈接”的實例，該實例相對應的HTML代碼如下所示。</p><p>&

74、lt;b>　　<html></b></p><p><b>　　<head></b></p><p>　　<title>文字鏈接</title></p><p><b>　　</head></b></p><p><

75、b>　　<body></b></p><p>　　<p>a href-“index2.html”target=”-blank”> 平面設計</a>（新開窗口，-blank)</p></p><p>　　<p><a href=”index3.html>動畫制作</a>（原窗口，默認為空

76、）</p></p><p>　　<p><a href=”index4.html>網(wǎng)文精品</a></p></p><p><b>　　</body></b></p><p><b>　　</html></b></p><

77、p><b>　　解釋  </b></p><p>　　« href:是<a>標記的一種屬性，該屬性中的URL等于鏈接目標文件的地址。</p><p>　　« Target:也是<a>標記的一種屬性，相當于Dreamweaver“屬性面板”中的“目標”，它的值等于-blank,效果是在新窗口中打開。除此之外還包

78、括其他3種：-parent,-self和-top。這和Dreamweaver中“目標”下拉列表中的內(nèi)容是一模一樣的。</p><p>　　« 文本內(nèi)容：如代碼實例中的“平面設計”。這些文本將放在使用了鏈接屬性href和目標屬性target的 <a>與</a>標記之間，產(chǎn)生了鏈接的效果。</p><p><b>　　提示　</b&g

79、t;</p><p>　　再提醒讀者一下，<p>為段落標記，在Dreamweaver中是由Enter（回車）鍵產(chǎn)生的。</p><p><b>　　3.5.2圖像鏈接</b></p><p>　　舉個簡單的“圖像鏈接”的實例。該實例相對應的ＨＴＭＬ代碼所示。</p><p><b>　　<ht

80、ml></b></p><p><b>　　<head></b></p><p>　　<title>圖像鏈接</title></p><p><b>　　</head></b></p><p><b>　　<body&

81、gt;</b></p><p>　　<p><a href=”web/web-001.htm”target=”-blank”><img src=”images/btn-001-out.gif”alt“平面設計”=width=”85”height=”18”border=”0”></a>（新開窗口，-blank）</p></p>&l

82、t;p>　　<p><a href=wallpaper/wallpaper-001.htm”><img src=”images/btn-002-out.gif”alt=“原創(chuàng)壁紙”width=”85”height=”18”border=”0”></a>（原窗口，默認為空）</p></p><p>　　<p>a href=”3d/3d-00

83、1.htm”><img src=”images/btn-003-out.gif”alt“三維作品”=width=”85”height=”18”border=”0”></a></p></p><p><b>　　</body></b></p><p><b>　　</html></b>

84、;</p><p>　　解釋仔細觀察代碼可以發(fā)現(xiàn)，“圖像鏈接”與“文本鏈接”惟一的差別就在于<a>與<a/>之間的內(nèi)容。“文本鏈接”中<a>與</a>之間的內(nèi)容是文字內(nèi)容，而“圖像鏈接”中就肯定是圖片內(nèi)容了。之前講過，插入圖片使用“<img src=”圖像的ＵＲＬ“<”的標記，這里當然也不會例外。而是還可以使用”<img 的屬性，如alt（替換文本

85、）、width（寬）、height（高）、及border（邊框）等</p><p><b>　　第四章 總結(jié)</b></p><p>　　隨著網(wǎng)絡技術(shù)的不斷成熟，網(wǎng)絡資源的不斷豐富，網(wǎng)絡學習必將成為一種時尚，它對學校課堂教學產(chǎn)生的沖擊力不斷加強，如果能夠正確認識網(wǎng)絡，能夠充分運用網(wǎng)絡，不失為實施素質(zhì)教育的又一重要途徑。而教學網(wǎng)站正是實現(xiàn)此目的的重要方式之一。</

86、p><p>　　通過對現(xiàn)代教與學理論的分析以及網(wǎng)站構(gòu)建相關技術(shù)理論的研究，進行了基于網(wǎng)頁技術(shù)的教學網(wǎng)站的設計與實現(xiàn)。</p><p>　　將論文研究工作總結(jié)如下：</p><p>　　對現(xiàn)階段教學網(wǎng)站發(fā)展情況進行了解和分析，總結(jié)了教學網(wǎng)站的功能及特點。針對教學網(wǎng)站的目的和意義，提出了論文所要研究的主要內(nèi)容；</p><p>　　本教學網(wǎng)站是以現(xiàn)代

87、教與學的理論為基礎構(gòu)建的。它基本符合建構(gòu)主義的學習理論，現(xiàn)代教學理論，現(xiàn)代教學設計的基本要素及教學自動化理論；</p><p>　　網(wǎng)頁制作技術(shù)是微軟公司的新一代開發(fā)動態(tài)網(wǎng)頁的技術(shù)，基于網(wǎng)頁技術(shù)的教學網(wǎng)站具有開發(fā)簡單，功能強大等優(yōu)點。</p><p>　　重點討論和分析了網(wǎng)站后臺管理系統(tǒng)的構(gòu)架，它的功能模塊！以及制作動態(tài)的作業(yè)上傳網(wǎng)頁。</p><p><b&

88、gt;　　致 謝</b></p><p>　　本論文是在xx老師的悉心指導下完成的，在此，我向辛勤的xx老師表示衷心的感謝！</p><p>　　在論文的撰寫過程中，得到了xx老師的指導和小組同學的大力支持，得到了認課老師和長沙大學繼續(xù)教育學院各位老師們的關心和指導，得到了同班同學們的熱情幫助，使論文更加完善，在此表示最誠摯的謝意！</p><p>