《畫法幾何》多媒體數據庫的建立

《畫法幾何》多媒體數據庫的建立,畫法幾何,多媒體,數據庫,建立,樹立 年 月 日 誠信聲明 本人鄭重聲明：本論文及其研究工作是本人在指導教師的指導 下獨立完成的，在完成論文時所利用的一切資料均已在參考文獻中 列出。 本人簽名：  機械工程系 程昊 起 止 日 期 查閱文獻，完成開題報告 廣泛閱讀相關文獻，制定方案 完成平面圖形和三維圖形的繪制 制作網頁或者動畫。 撰寫畢業(yè)設計論文，準備答辯 年 專業(yè)： 指導教師（含職稱）： 趙躍文(副教授)(任潔)(助教) 2014.12.01至2014.12.31 2015.01.01至2015.03.10 2015.03.11至2015.04.30 2015.05.01至2015.05.15 2015.05.16至2015.06.10 月 機械工程及其自動化 日 學號： 112011145 畢業(yè)設計任務書 設計題目： 《畫法幾何》多媒體數據庫的建立 系部： 學生： 1．課題意義及目標 針對教學中畫法幾何例題量大、排列分類不合理的情況，要求在掌握畫法幾何知 識的基礎上，用AUTOCAD繪制例題的平面圖形，用solidworks或者pro/e繪制對應 的三維模型，建立例題求解過程的動畫。 2．主要任務 1）查閱資料，了解畫法幾何課程設置。收集大量例題。 2）繪制例題的AUTOCAD平面圖形，并用solidworks或者pro/e繪制對應的三維 模型。 3）制作解題過程中每一步的動畫，用swf格式或者avi格式保存。 4)撰寫畢業(yè)論文 3．主要參考資料 [1]李力.《機械制圖》多媒體課件中動畫的技術研究.長安大學碩士學位論文.2012 [2]霞云周.高職機械制圖精品課程網絡資源建設研究.合肥工業(yè)大學碩士學位論 文.2009 [3]鄧祖才.機械制圖多媒體課件的開發(fā).電子科技大學碩士學位論文.2009 [4]金樂.機械制圖三維虛擬模型庫的研究與開發(fā).山東大學碩士學位論文.2010 4．進度安排 設計各階段名稱 1 2 3 4 5 審核人：  要：針對教學中畫法幾何部分例題量大、排列分布不合理的情況，作者通過閱讀 太原工業(yè)學院畢業(yè)設計 《畫法幾何》多媒體數據庫的建立 摘 大量資料，收集整理各種案例。將課本知識內容從傳統(tǒng)紙質教材轉移到網頁上以電子 數據的形式呈現給用戶。其主要特點在于，將各式習題資源與教學內容收集匯總并存 放在頁面上，方便學生瀏覽學習和使用。 本文從數據內容的制作與整理開始，逐個詳細講解了包括圖形繪制、頁面設計布 局、網頁制作步驟以及各欄目的相應制作及其用途意義等。 關鍵詞：畫法幾何；多媒體數據庫；網頁制作；AutoCAD。 The 《descriptivegeometry》multimediadatabasedesign Abstract：For teaching descriptive geometry distribution part of the large amount of examplesandunreasonablesituation,theauthorthroughreadingalargenumberofdata, collectvariouscases.Thecontentofthetextbookknowledgefromtraditionalpaper-based materialstransferredtothewebpageintheformofelectronicdatapresentedtotheuser. Maincharacteristicisthatitsresourcestothevarioustypesofproblemsetsandteaching contentaggregationonthepage,convenienttobrowsestudentslearnanduse. In this paper, starting from the data content production and finishing, one by one explainsindetailincludinggraphicsdesign,pagelayout,webdesignstepsandthecolumns ofthecorrespondingproductionanditssignificanceinuse,etc. Keywords：descriptivegeometry;multimediadatabase;Webpagecreation;AutoCAD I  太原工業(yè)學院畢業(yè)設計 目錄 1 緒論...........................................................................................................................1 2 二維工程圖的繪制...................................................................................................2 2.1 AutoCAD................................................................................................................2 2.2 二維工程圖的繪制................................................................................................3 2.3 對《點的投影》章節(jié)內容的繪制........................................................................3 2.4 對《直線與平面、平面與平面的相對位置》章節(jié)內容的繪制........................4 2.5 對《平面的投影》章節(jié)內容的繪制....................................................................5 2.6 對《直線的投影》章節(jié)內容的繪制....................................................................7 2.7 對《投影變換》章節(jié)內容的繪制........................................................................8 3 三維立體模型的繪制...............................................................................................9 4 網頁的制作.............................................................................................................11 4.1 Dreamweaver軟件介紹......................................................................................11 4.2 網頁的制作與頁面內容的插入..........................................................................11 4.2.1 初始頁面的制作與網頁的基本布局...............................................................12 4.2.2 站點的建立.......................................................................................................12 4.3 空白頁面的布局與框架的建立..........................................................................13 4.4 菜單欄的分類及不同欄目的內容和意義..........................................................15 4.4.1 鏈接作用...........................................................................................................15 4.4.2 欄目內容意義及制作方式...............................................................................16 4.5 超級鏈接與測試鏈接有效性..............................................................................23 5 結論.........................................................................................................................25 參考文獻.......................................................................................................................27 致 謝...........................................................................................................................28 II  緒論 太原工業(yè)學院畢業(yè)設計 1 隨著社會的不斷進步，科技的高速發(fā)展，人們的生活方式也隨著信息技術的變革 而不斷改變，社交方式以及試聽習慣等都在適應著電子科技的潮流，唯獨在教育方面 一成不變。本次課題設計的目的在于提供給學生新式的學習平臺，用電子媒體的形式 作為傳遞教育資源的媒介。 多年來我國的學生大都依賴于紙質教材的學習，通過本次課題的設計與制作，讓 我看到了電子教學的未來趨勢。手機、電腦、電視等等高新產品都在不斷地更新?lián)Q代， 這些電子設備也在無時無刻的改變著我們的生活習慣、交往方式、娛樂休閑甚至是閱 讀習慣，書信早已悄無聲息的消失在我們的生活當中，連它的替代者bb機、短信、 飛信直到現在的QQ微信都已經換了好幾代，也許書籍還能陪伴著人類在多走幾年， 但報紙卻早已失去了其生命力，在當今這科技發(fā)達的時代，電子閱覽的方式正大邁步 的奪取著傳統(tǒng)紙質讀物的地位。相比而言，它是高效的、便捷的、環(huán)保的、開放的、 易于交換分享的甚至是免費的，它不需要砍伐樹木破壞環(huán)境，不需要花費高昂的費用， 不需要外出需找，它的形式是當今年輕人最能接受的。常常聽到人們說帶著興趣和樂 趣去學習，那么他在學習過程中一定是快樂的，對于現在的年輕人喜愛電子設備的程 度而言，何不放棄對他人的勸導而去適應社會做自我改變，讓學生以他們最接受喜愛 的方式進行學習。與時代接軌的新式教育媒介和對傳統(tǒng)教學理念的不變是我本次課題 設計的兩個最基本的出發(fā)點。 此課題設計的目的不僅在于幫助提供給學生自主學習的平臺，同時也希望能夠成 為老師學生在課堂中的教學輔助工具，用于教學輔導、習題練習。其下載專區(qū)支持各 類型習題答案、教案等下載，便利于學生在課后課外進行對應知識點的練習與鞏固， 如遇無法解決的難題難點也可借助平臺欄目進行人工援助。 在本數據庫的制作中會使用到較多相關制作軟件，因作者技術能力有限，僅能將 大體框架與網頁的基本雛形呈現在諸位眼前。此數據庫中還存在有諸多瑕疵與不足， 望在今后的日子能得到大家的點評和指正，在此表示感謝。 1  二維工程圖的繪制 太原工業(yè)學院畢業(yè)設計 2 在繪制平面圖形中，可根據圖形繪制的規(guī)格要求以及個人習慣來進行選擇。通常 較為常用的有AutoCAD、SolidWorks、Proe、UG、3dmax等繪圖軟件。本次多媒體數 據庫里所包含的二維圖形采用的都是AutoCAD繪制。 2.1 AutoCAD AutoCAD（AutoComputerAidedDesign）是Autodesk公司在1982年第一次生產 的計算機輔助設計的軟件，主要使用在二維圖形的繪制與設計、詳細繪制、設計文檔、 基本三維設計?，F在已經是國際上最受歡迎的圖形繪制工具。此軟件所使用的二維繪 圖事實標準格式為dwg文件格式。 AutoCAD是由美國的Autodesk歐特克公司在二十世紀八十年代為微型計算機上 應用CAD技術而開發(fā)的圖形繪制程序軟件包，經過不斷地升級和完善，現已成為國 際上廣為流傳的圖形繪制工具 此軟件具有很好的用戶使用界面，通過交互菜單或者是命令行方式就可以進行各 種操作。他的多文檔設計環(huán)境，使不是計算機專業(yè)的人也能很快的掌握學習并使用， 在不斷的操作實踐的過程中能更加熟練地掌握此軟件的各種應用和開發(fā)使用技巧來 大幅提高工作效率。 此軟件具有非常廣泛的適應性，現支持當今多種微機的各類型操作系統(tǒng)，并且能 夠在其中完美流暢的運行，支持各種圖形顯示分辨率以及數種輸入型外置設備，是使 之能廣泛應用及普及的重要因素。 此軟件具有如下優(yōu)點： （1）有十分強大的圖形處理編輯功能。 （2）有十分完善的二維圖形設計繪制功能。 （3）可以使用數種方式方法來進行第二次開發(fā)與用戶定制。 （4）支持市面上大多數硬件設備 （5）方便進行各種圖形的格式轉換，數據交換能力強。 （6）能完美應用于多種操作平臺 （7）具有通用和易用性，適用于不同用戶。 盡管此軟件在繪制二維圖形時有著顯著的優(yōu)勢，但在繪制三維圖形時就顯得很無 2  二維工程圖的繪制 對《點的投影》章節(jié)內容的繪制 投影 太原工業(yè)學院畢業(yè)設計 力，如繪制三維圖形，proe和solidworks無疑是更好地選擇。 如大多數二維圖形繪制，在開始階段需要設置好自己習慣使用的各項參數，例如 圖層的選擇，直線粗細、樣式與顏色等等，這樣在某種程度上極大的便利繪圖者的使 用與操作便捷，養(yǎng)成一定的良好習慣有助于在今后繪制圖形過程中能夠更加精確、熟 練。 2.2 在本課題中主要對應的是畫法幾何數據庫的建立，所以會有大量的二維圖形需要 去繪制和處理，其中要整理好習題資源以及課本例題等相關圖形，在用AutoCAD軟 件進行二維圖形繪制，最后再將圖形插入到已制作完成的對應網頁內容里。需要繪制 的內容大概包括書本教學內容所對應的圖形、課本例題、課本課外習題。 2.3 本章節(jié)知識點內容及題型題量相對后面較少，也相對好學習與理解，因此習題內 容與例題題庫不需量大而在于精。首先對應第一節(jié)的“投影法”進行圖形繪制，如圖 2.1： 圖2.1 例如此圖形的繪制，首先需要準備好兩個最簡單的圖層，一粗一細直線即可，由 3  對《直線與平面、平面與平面的相對位置》章節(jié)內容的繪制 太原工業(yè)學院畢業(yè)設計 于沒有規(guī)格尺寸，所以需要繪圖者根據原始圖形用肉眼捕捉細節(jié)大概畫出即可。下面 介紹在此圖形中需要用到的常用技巧及繪圖命令。 （1）DT：文字輸入命令，如需在圖形中添加注釋或者輸入文字等，需要用到此 命令。 （2）PL：箭頭繪制命令，如一般標注或者指引需要用到此命令。 （3）L：直線繪制命令，如畫直線線段可用此命令，一般也可直接用鼠標點選直 線繪制圖標來使用。 （4）修剪：主要用于對多余線段的修剪剪裁。 （5）圖案填充：用于對某一封閉區(qū)域里進行色彩填充。 其余的包括極軸追蹤、對象捕捉、對象捕捉追蹤等。 由于此圖形較為簡單且沒有規(guī)格尺寸，在進行繪畫時可先畫物體也可以先畫投影 面，其中投影面和物體的棱線和邊緣用粗實線畫出，其余線條使用細實線，在畫基本 圖形的框架時，將極軸追蹤和對象捕捉按鈕點亮可以使繪制變得非常方便，不要太刻 意去繪制線段的原始長度，按自己舒服的畫法進行，最后用剪裁按鈕將多余的線段刪 除即可。在繪制物體中數個細實線時，可將對象捕捉按鈕關閉，不然它會不斷的自動 選定到最近的交點而極大地干擾繪畫，在區(qū)域填充色彩時主要需保證線段圍成的區(qū)域 為封閉的即可，標注跟箭頭也只需精準精細。這里有個小技巧 ，在繪制兩種極為相 似的圖形時，可先繪制出第一個圖形，在用復制粘貼的方法快速的貼出第二個圖形， 并且對其不同的小細節(jié)進行修改即可。這種方法能極大的加快繪圖者繪制圖形的速 度，并且及其便利。 在本章節(jié)中所需要繪制的是書本上的概念和教學內容相關的圖形，著重抓住教學 環(huán)節(jié)的主要知識點和概念，用最直觀的圖形和最精簡的語句讓學生充分理解學習相關 內容。 2.4 本章節(jié)需要繪制的內容包括： 1.平行關系 （1）直線與平面平行 （2）平面與平面平行 2.相交關系 4  案例圖 對《平面的投影》章節(jié)內容的繪制 太原工業(yè)學院畢業(yè)設計 （1）用積聚性求交點交線 （2）利用輔助平面法求交點交線 3.垂直關系 （1）直線與平面垂直 （2）平面與平面垂直 此章節(jié)繪圖內容較為復雜，知識點涵蓋較多，繪圖時需仔細用心避免出錯，由于 其中包含大部分平面的相對關系，所以在此章繪圖時可以利用復制粘貼方法來減少繪 制工作量并且加快繪制速度。其中個別圖形中需要使用虛線，在這里需要繪圖者熟練 掌握各種線段的使用。同時其中一些圖形還會出現遮擋部分，需靈活運用剪裁工具來 對圖形進行編輯處理。例如圖2.2： 圖2.2 繪制此圖形時可直接繪制出平面與物體，不用考慮其虛線與遮擋關系，當全部線 段物體繪制完成時，在用剪裁工具對被遮擋處的線段進行刪除，并用已設好的虛線繼 續(xù)填補即可。 2.5 5  正面圖 太原工業(yè)學院畢業(yè)設計 此章節(jié)的圖形包括各種投影面的知識點，其中分為面面垂直、面面平行、一般位 置平面和平面上的點和直線。開始需先繪制基本的“用幾何元素表示平面”里的內容， 讓學生直觀的理解平面的表示。需要繪制的部分包括： （1）不在同一條直線上的三點。 （2）一直線和直線外的一點。 （3）兩條相交的直線。 （4）兩條平行的直線。 （5）任意平面圖形，如圓形平行四邊形等。 由于上述圖形較為簡單，就不一一闡述繪制過程，再次我們以繪制“投影面平行 面”圖形內容為例，如圖2.3： 圖2.3 可以看出此圖形繪制與之前內容不盡相同，也是需要先繪出三面在繪制其中物 體，需要注意的是圖形與其V面投影交點的連接線必須平行于Y軸，同理豎直和水 平連接線也要分別平行于Z和X軸。H面和W面投影可以看出是條直線，所以可直 接垂直連三點到其所對應的平面，選定投影位置畫出線段并用裁剪進行修改即可。如 圖2.4： 6  正平面 對《直線的投影》章節(jié)內容的繪制 太原工業(yè)學院畢業(yè)設計 圖2.4 可以看出此圖形需先畫出其坐標軸，做出第四象限的45°直線，然后先畫出第二 象限的實物物體，在分別連線于其他象限畫出其對應圖形，繪制十分簡單方便。 2.6 此章節(jié)無論是課本內容還是例題與課外習題的數量都略有增大，下圖為本章節(jié)示 例圖形。如圖2.5： 7  直線投影 對《投影變換》章節(jié)內容的繪制 太原工業(yè)學院畢業(yè)設計 圖2.5 可以看出，繪制的步驟和需標注的字母相對要多一些，在此圖形的繪制中，需先 畫出圖形的三面，在對物體進行繪制，其中大部分繪圖方法上章也有所提及，另外此 章在繪圖上會用到額外新的指令，例如畫圓、特殊符號的標注等。在特殊符號的標注 方面，可以直接使用搜狗輸入法的Ctrl+Shift+Z鍵快速調出特殊符號選擇面板，其中 常用的有標點符號、數字序號、數學/單位、希臘/拉丁，在需要標注符號表示時就可 選用“希臘/拉丁”符號面板里的α、β、γ等，需要標出角度時可在“數學/單位”面板里找 到度數符號（°），還有一個小技巧就是比如需要打出γ這個字符時，可以不調用特殊符 號面板，直接用拼音的方式輸入gama會看到在第五選項會有γ字符選項，基本常用的 簡單符號都可用這種方法來使用。 2.7 本章節(jié)內容較少但相對知識點較難，其中重點是需要學習掌握“換面法”，換面 法內容里又包括其六個基本問題都是需要相應去繪制的。另還有旋轉法的相關知識， 由于圖形特點前幾章都詳盡講過，在此不做示例介紹。 以上是對本課題全部章節(jié)內容里二維圖形的繪制與介紹，之后需要講解的是 三維立體模型的制作與制作軟件。 8  三維立體模型的繪制 太原工業(yè)學院畢業(yè)設計 3 在繪制三維立體模型時，可以使用的軟件有很多，如proe、Solidworks、3dmax、 CAXA、UG等。同樣以上的軟件是需要根據不同的情況和條件針對不同的設計模型 來選用的。通常來說solidworks很容易上手運用，3dmax繪制于不規(guī)則圖形較多，本 章采用的是proe來進行繪制，以下就對此軟件的優(yōu)點及用法進行詳細介紹。 Pro/E是美國PTC公司開發(fā)制作的軟件，制作完成并于1988年推出。27年來， 經歷了數十次的改版，已經當選為全球乃至中國地區(qū)最熱門最普及的三維建模系統(tǒng)應 用軟件，其主要應用于機械設計、模具生產設計、電子電器設計、工業(yè)設計、汽車制 造與設計、航空航天設計、玩具設計制造等等行業(yè)。 Pro/E是十分完善而全面的3D產品開發(fā)軟件，和其相關的軟件分別有pro/designer （造型設計）、pro/mechanica（功能仿真），此軟件包含了對產品的轉配、零件的設計、 模具的開發(fā)、加工制造、逆向工程、鈑金設計、自動測量、工業(yè)設計、有限元和機構 分析、產品的數據庫及其管理功能，從而使用戶大大的縮短了產品的開發(fā)時間與此同 時也極大地簡化了產品開發(fā)的流程，在全球范圍內有眾多數企業(yè)和公司選擇使用 PRO/ENGINEER軟件系統(tǒng)作為他們的標準設計軟件進行產品的開發(fā)與設計。Pro/E及 其具有特點的軟件功能深深的影響了我們在工作中設計及制造方法。 雖然solidworks相較于初學者來說更容易上手，操作也更為簡便直觀，但proe功 能以及實用性更加強大，不僅在模型模擬動畫方面尤為突出，對于常使用CAD繪制 二維圖的人員來說，它的三維模型轉二維圖紙功能、與cad二維圖紙互通等等的便利 無疑深受人們的喜愛。 在本數據庫中，需要有一章節(jié)畫出三維模型來讓用戶進行學習認知，圖形素材與 教學內容等都是經過網上收集與從教學課本上的題型中挑選而來，通過使用Proe軟件 進行繪制，最后將其整理插入到相應的網頁頁面當中去，本次繪制題型大部分來源自 課本第七章中的經典例題、教學內容所對應的模型、課外練習習題等。 對《基本立體的投影及表面交線》章節(jié)內容的三維模型制作在本章節(jié)的三維模 型繪制中，需先了解章節(jié)內容所包括的幾個主要的知識點，其中在平面基本立體小節(jié) 中，要對最基本的幾何模型進行繪制，接著是回轉立體的繪制，在后面的小節(jié)內容里 大部分都是關于各種情況下立體的交線，需挑選個別具有代表性的立體模型進行繪 制。在此已繪制簡單的圓柱體為例，如圖3.1所示 9  圓柱體 太原工業(yè)學院畢業(yè)設計 圖3.1 在繪制此三維模型時，具體操作步驟大概如下。 首先在草繪中畫一個已知直徑的圓，然后找到拉伸命令，點擊拉伸，則形成以上 的圓柱圖形。 10  網頁的制作 Dreamweaver軟件介紹 網頁的制作與頁面內容的插入 太原工業(yè)學院畢業(yè)設計 4 網頁的設計與制作，首先要進行的是對網頁制作軟件的選擇，在市面上較為流行 的網頁制作軟件有Dreamweaver、MicrosoftFrontPage、CoreDraw等甚至也可以使用 word來制作網頁頁面。除去必須熟練掌握以上的一種網頁制作工具外，一個合格的網 頁制作人員還必須同時掌握其他類型的輔助軟件，例如PS（Photoshop），此軟件主要 用途是對圖片的編輯修改，對頁面圖片潤色包括加特效的一款圖像處理軟件；Flash， 此程序是給頁面或者標題添加動態(tài)圖片、制作網頁里添加動畫等的一款動畫制作軟 件。如能熟練掌握此二程序，將會給你的網頁帶來非同凡響的效果，頁面的美觀，炫 彩的動畫，豐富的內容，將會是每一個瀏覽者賞心悅目。 4.1 本次課題設計采用的是Dreamweaver來對網頁進行制作，此軟件在網頁制作方面 特點十分明顯，多年來在世界范圍內有著良好的口碑，dreamweaver屬于一款可視化 網頁制作工具。 對于初學者來說，其可視化設計可以令用戶很快的適應學習并掌握此軟件的運用 而不需要糾結于繁復的代碼輸入，同時它還支持網站的運作與管理，在維護與更新方 面做得十分出色，其涵蓋了絕大部分的程序語言的編寫與調試，例如PHP、ASP、XML、 JSP、ASP.NET等。還同時包含有HomeSite/BBEdit捆綁、HTML格式化、HTML格 式控制選項和HTML的檢查。 其主要特點還是在于可視化的網頁編輯器，一般來說網頁制作都會生成大量的代 碼，對今后網頁的修改與維護帶來了很大的不便，也會增大網頁文件大小。此程序在 使用時就不會出現類似情況和麻煩，且經過設置后也能清理網頁的無用代碼。在操作 上，如非專業(yè)制作人人員，完全不用去學習使用代碼來制作網頁，用可視窗口來對網 頁制作布局無疑對初學者是極大地便利。 4.2 本次網頁制作的過程和結果都是制作者在自學后邊做邊摸索而成的，其技術水平 對網頁的質量有很大影響與限制，當中所有鏈接與子網頁文件等均是制作者自己的設 11  初始頁面的制作與網頁的基本布局 空白頁格式 站點的建立 太原工業(yè)學院畢業(yè)設計 計思路，圖片背景素材部分采用學校網站截圖截取并修改，網頁插入內容有收集的習 題資源、制作者手打的教學內容及使用cad繪制的二維圖形等。 4.2.1 在開始階段，打開程序的同時，我們需要選擇一個空白頁面，選項我們常用HTML 格式，所以應在常規(guī)項里選擇基本頁，基本頁面的格式要選擇HTML。如圖4.1： 圖4.1 4.2.2 在制作設計初期，除了空白頁的建立，最主要的是先建立好一個使用站點，站點 的用途在于方便集中管理今后在此網頁上的圖片、素材和子頁面，它能讓用戶清楚的 看到文件的位置與存儲狀況，方便快速找到需要用到的圖片與子網頁并相應的對其修 改或刪除。 在圖4.2右側點選站點管理選項點擊新建直接創(chuàng)建。 12  站點創(chuàng)建 站點子文件夾 空白頁面的布局與框架的建立 太原工業(yè)學院畢業(yè)設計 圖4.2 當站點創(chuàng)建完成時我們可以點擊前面的小+號，同時可以在其中創(chuàng)建文件夾或者 網頁文件。在站點中可以對文件和文件夾進行刪除、移動、復制、粘貼和重命名等等 操作。通常建議在準備制作網頁前，按照制作者自己的構思和對未來創(chuàng)建頁面的類型 格式布局等，在站點文件夾下建立多個子文件夾來方便保存查找資料。例如在本課題 的網頁制作中，站點文件夾下創(chuàng)建了素材資源、教學內容、教學大綱、內容概括和題 庫這5個子文件夾，建立這5個子文件夾是因為設計的需要、涵蓋的內容和頁面的布 局等，把不同類型的素材資源、網頁文件分別對應的存放到相應文件夾中，使資源管 理器里的頁面干凈文件存放的有序，而同時又能讓制作人員快速方便的查找瀏覽。如 圖4.3： 圖4.3 4.3 在開始制作前，制作者要有明確的網頁規(guī)劃布局，頭腦里要清楚地知道怎樣對頁 13  太原工業(yè)學院畢業(yè)設計 面的劃分。當構思完畢時，即可開始制作頁面。首先我們以本課題的網頁制作為例， 基本網頁的構成需要有標題欄、選項欄和基本網頁內容。在制作初期，需要先建立一 個表格來幫助頁面劃分，首先是標題欄，這里我們需要一個根據網頁大小布局相適應 的的框架來存放標題的圖片素材，點擊軟件菜單欄里“插入”選項，選擇“表格”，在彈 出的對話框中對各項屬性進行修改，因為常用標題都是一張長方形的圖片，這里我們 把表格的行、列選項都設置為一，根據頁面的布局和圖片的大小我們將此表格框架的 寬度設置為1002像素，高度設置為132像素，需要特別說明的是這里的長寬單位也 可以更改為百分比。 制作好標題欄的框架后就可以插入已準備好的素材圖片了，本網頁的標題圖片是 從學校網站里直接截取下來的，如需想在標題圖片里添加自己想要的文字可以使用ps 等相關圖形編輯程序，此程序除了可以對圖片進行文字添加，也可以抹去原圖中制作 者不想要的文字同時在進行替換。圖片插入后，也可對圖片進行適當的調整，使其填 滿對準表格的邊緣。 當制作完標題欄后緊接著就是制作菜單欄，根據設計者的需要，在這里由于我們 把網頁分成了八個內容，所以對應的就要有八個菜單點選框。新建表格，把表格設置 為一行八列，設置好固定的列間距，長寬跟局頁面的布局分別設置為寬度1002像素， 高度37像素。此后分別給每個框架設置好背景圖片并且輸入各自對應的文字內容。 當標題和菜單欄制作完成后，就該對頁面其余空白部分進行劃分，這里的設計與 劃分完全是按照設計者的意愿來進行的，本網頁將其設置成一個一行三列的表格，并 在第三列加裝了兩個文本框，寬度與標題欄一致，高度按頁面合理大小來設定，后期 再全部完成前可以根據需求及個人喜好來往里添加素材。 最后需要在頁尾設置一個尾標，操作方法與之前相同，建立一個表格設置為一行 一列即可，寬度與之前一致，高度則可以設為38像素，添加相應的背景素材并輸入 文字就完成。 另需說明本網頁的菜單欄文字格式統(tǒng)一采用fontstyle1090406394-44102字體，字 體顏色統(tǒng)一設置為白色（因為背景素材為藍色的緣故，白色字體顯得更為美觀和清 晰）。 以上是網頁的主頁面制作全部步驟，頁面的設計與布局劃分可以千差萬別，完全 根據設計者的想法而定，圖4.4就是本網頁設計初步完成后的效果圖。 14  頁面基本框架 菜單欄的分類及不同欄目的內容和意義 鏈接作用 太原工業(yè)學院畢業(yè)設計 圖4.4 4.4 4.4.1 （1）本站首頁 此鏈接的作用是方便網頁瀏覽者快速回到網站首頁，無論瀏覽用戶在此站內任何 子網頁當中，只要點選即可返回主頁。 （2）課程概括 此鏈接的作用是讓瀏覽用戶需要查看了解課程概括時，點選此鏈接可快速跳轉到 相應子網頁。 （3）教學大綱 此鏈接的作用是讓需要了解并查看教學大綱的瀏覽者點選此項并能快速跳轉至 相對頁面。 （4）教學內容 此鏈接是讓需要學習課本知識了解課程講解的瀏覽者來點選，并且會自動跳轉至 相應界面。 （5）練習題庫 此鏈接是當瀏覽者需要練習習題、查看題型時，點選此項能跳轉至習題頁面。 15  欄目內容意義及制作方式 文本域屬性框 太原工業(yè)學院畢業(yè)設計 （6）在線答疑 此鏈接的作用是當瀏覽者需要幫助并希望相應解答是，點此項可跳轉至在線答疑 頁面。 （7）下載專區(qū) 此鏈接是當瀏覽用戶需要下載習題或習題答案時，此選項可跳轉至下載專區(qū)網頁 頁面。 （8）網站地圖 此鏈接主要用于引導訪問網頁的瀏覽用戶快速找到自己想訪問的頁面，點選此項 可以跳轉至網站地圖頁。 4.4.2 （1）本站首頁 此欄無單獨頁面和獨立內容，其主要作用是鏈接于網站主頁，使瀏覽者方便快捷 的返回到網站的起始頁。 （2）課程概括 在制作此頁面時，需先復制開始時制作的主頁頁面，因為這樣就省去了后面每頁 對于標題欄、菜單欄、頁面框架、頁尾等的制作步驟，在右邊資源管理器復制完網頁 文件后，點選開課程概括文件夾并將它粘貼至其中，接著雙擊剛剛已粘好的文件，可 以看到與主頁相同的頁面出現。在需要對其稍加改動，將原始空白處的表格框刪除， 也可重新設置，點選軟件菜單欄里的插入選項，將光標移動至表單選項，點選其中的 文本區(qū)域。接著會彈出文本區(qū)域屬性框，直接點選是不用修改，會看到文本框已經出 現在頁面中。下面需要對表格進行屬性調整，將其設置為寬1002像素，高500像素， 行列屬性默認為一不變。接著點選文本框，可以看到屬性欄里“字符寬度”和“行數” 選項，“字符寬度”的意思是在一行里最多容納的字數的限制，“行數”的意思類似于 表格高度，將其分別設置為140和60。如圖4.5： 圖4.5 16  課程概括 太原工業(yè)學院畢業(yè)設計 在屬性欄里還可以看見“類型”的選項，此選項最能體現表單的作用，其中“類 型”里有三個選擇分別是單行、多行和密碼，選擇多行按鈕可以看到下面初始值里會 出現頁面滾動條，表單包括其初始值得設置一般用于表格的填寫、問卷調查，這里是 利用其特性來制作網頁內容。在初始之中，將事先準備好的課程概括內容粘貼進去， 特別提醒由于表單的特性而不能直接粘貼至頁面，必須粘至初始值框架里才可以?？? 以看到如圖4.6，文章內容已經出現在了頁面上，并且配有獨立的頁面滾動條方便用 戶操作瀏覽。 圖4.6 課程概括欄目的意義： 此欄目是為了讓學生大致了解不同課程所要講述的知識和知識點，方便學生有效 迅速的找到需要學習的課程，省去翻書查找目錄等繁瑣的步驟，極大提高了學生學習 的便捷。 （3）教學大綱 此欄的網頁頁面制作步驟與課程概括可謂如出一轍，包括頁面的粘貼，表單文本 區(qū)域的設置，內容的填寫方式以及類型的選擇等等，再次不做過多說明。 本欄目設置的意義在于方便教師查看教學大綱，在瀏覽網頁的同時可以邊看課題 內容邊查閱大綱，脫離紙質教材的束縛，習題內容大概可以同時在此站點查詢，同時 學生也可了解大綱內容，對今后的學習予以規(guī)劃，確定學習的路線和方向。 （4）教學內容 本欄所包含的大多是課本內容，只是以電子閱覽的方式呈現。在做此子頁面的同 17  課程鏈接 太原工業(yè)學院畢業(yè)設計 時，也需復制主頁文件至其教學內容子文件夾內（可以單獨拷貝一個文件保存下來方 便后續(xù)頁面的制作），與教學大綱和課程概括的制作方式不同在于，需要對空白頁表 格進行屬性設置而不用在添加表單的文本框。這里需要設置表格框架行列屬性為一行 兩列，因為后面要做頁面內容里左側為文字超級鏈接、右側為相對應的文字內容格式。 在設置好表格框架屬性后，用鼠標拉選中間的框架分割線往左側移動（也可直接在框 架屬性欄里輸入數據設置），給右面對應內容區(qū)域留下足夠的空間。全部完成后就可 以在左側第一列里輸入想對應的課程題目，本網頁有六個課程題目分別是：第二章 投 影基本知識及點的投影、第三章 直線的投影、第四章 平面的投影、第五章 直線與 平面，平面與平面的相對位置、第六章 投影變換和第七章 基本立體的投影及表面交 線。如圖4.7： 圖4.7 完成此項輸入后，需將此頁面保存并復制留以其他鏈接所用。由于此欄包括六章 內容，所以需要分別粘出六個子網頁文件，加上此欄主頁一共七個子頁面。首先對第 一個子網頁命名為“第二章 投影基本知識點及點的投影”（其余子網頁也按照順序先 后命名，此欄主頁面也可直接命名為“主”）方便后續(xù)點選修改。其次點進第二章所 屬的網頁文件內，對右側章節(jié)內容區(qū)域進行文字圖形內容的填寫。本欄目里的文字圖 形都是根據課本內容進行填寫的，沒有全篇引用，而是著重挑選最主要的文字、概念、 公式及個別例題，以上內容均為手打，二維圖形均采用AutoCAD繪制前篇也有大概的 繪制講解。 對第二張的內容輸入完畢后即可按相同方式分別對之后的三、四、五、六、七章 進行內容鍵入，每章節(jié)對應的網頁內容完成后記得保存，避免操作失誤或者不可抗因 18  太原工業(yè)學院畢業(yè)設計 素導致數據丟失。 本欄目設定的主要意義在于方便學生可以脫離紙質教材的情況下進行系統(tǒng)的學 習，由于章節(jié)內容全部出自于原版紙質教材，不會出現教、學不一致的情況，在者本 欄里的內容大都是經過精心挑選，主要抓住的都是重要的知識點及圖示，拋開省去了 不必要的文字注釋以及難懂只用做到了解即可的內容，讓學生能直觀的看到一個章節(jié) 里的中心內容，核心知識，加大學生學習的動力，提高學習的興趣，而且最為主要的 是大大縮短了學習的時間，提高效率。讓學生不在課堂也能學習理解課本知識。 （在完成全部的章節(jié)內容輸入后，需要做的就是超級鏈接的設定，此處不做講解， 在后面的章節(jié)會有演示。） （5）練習題庫 此欄開始頁面的制作步驟與前一欄“教學內容”一致，甚至也可直接復制上一欄 的主頁面來使用。在布局方面，也是要左面為不同章節(jié)文字鏈接，右面為不同章節(jié)對 應的相關內容。表格框架的屬性設定也都是一行一列，高寬與之前相同。 此頁面內的所有題型及例題資源大多是從網上查閱以及各式畫法幾何習題庫等 查找而來，經過篩選總結后，分類至各個相應章節(jié)之中，大多是很具有代表性的題型， 基本能掛靠住每個章節(jié)的各個知識點。 此欄設定的主要意義在于方便學生去做對應的習題練習，在之前的幾個欄目中分 別有讓學生對課程內容的了解以及對課本內容知識點的學習。在學習過后需要對每個 知識點進行消化，就可以利用本題庫進行特定的章節(jié)內容以及相關知識點所對應的題 集進行練習。邊學邊練無疑極大的鞏固了學生對知識點的認知，讓學生吃透每一個章 節(jié)的每一部分內容。與此同時，也減去了學生在學習后，去購買習題冊，翻閱紙質習 題查找對應點的不必要步驟?，F是初步規(guī)劃習題的內容和涵蓋，在今后不斷地對網頁 的開發(fā)和升級上將會有更多更好更精確的題型出現在此網頁上。 （6）在線答疑 在做此欄目網頁內容時，需要做大量準備工作，因為其不同于前幾個欄的制作， 在這一環(huán)節(jié)主要是表單的制作及各種單選復選框的運用。首先，在內容框架上需要刪 除之前復制來的頁面框架，然后點選菜單里的“插入”選項，從中找到表單選項，點 出表單框會先彈出其基本屬性設置框，這里不用進行設置直接點擊確定即可，可以看 到出現一個空白的表單框。 接下來需要在表單框里添加一個新的表格，將其設置為10行2列的格式，高度 19  單選按鈕 列表值 太原工業(yè)學院畢業(yè)設計 設定為500像素，寬度設置為1002像素，可以看出基本表格形式出現，這里我們也 需要將分割線向左拖動至適當的位置。然后在第一行第二列里輸入“在線答疑”四個 字，并點選第一行的兩個框架右鍵選擇合并文本框將它們合并，之后可以適當調整字 間距以示美觀。 后在第二行第一列里輸入漢字“姓名”，在第二列里需要插入一個“文本字段”， 按順序在第三行里輸入性別 ，同樣在其對應的第二列里點選出兩個單選按鈕，分別 在其后打上“男”、“女”，現點選第一個單選按鈕將其屬性面板里的選定值改為“男”， 這么做是因為每當有用戶點選此按鈕時，就會默認為是選擇“男”這個選項。同理， 第二個按鈕也需要進行同樣的設置，區(qū)別在于選定值需改為“女”。在其單選框的屬 性面板中也可看到“初始狀態(tài)”中有“已勾選”和“未選中”兩個按鈕，當把“男” 所屬的單選按鈕屬性面板里的已勾選選中后，會發(fā)現在表單初始狀態(tài)下是會自動選定 性別“男”這個單選按鈕的。如圖4.8： 圖4.8 當完成單選按鈕時，進行下一步設定。在第四行第一列里輸入“系部專業(yè)”，并 在對應列里添加一個“列表/菜單”并對其進行設置。首先點擊它打開的屬性面板， 點選其中的“列表值”選項并對里面相應內容進行添加，如“機械工程系”、“設計藝 術系”、“自動化系”等。如圖4.9： 圖4.9 20  太原工業(yè)學院畢業(yè)設計 設置完成后點選他就會出現一個下拉菜單式的選項，方便而又美觀。 接著一行我們需要輸入的是“聯(lián)系方式”，與其對應的第二列里只需要添加一個 文本字條即可。下面一行輸入“年級”，對應的列里添加“列表/菜單”框，其設置與 之前的“系部專業(yè)”對應框設置類似，需要變動的只是列表值里的文字，分別鍵入“大 一”、“大二”、“大三”、“大四”并點擊確定按鈕即可。 第七行里，輸入漢字“問題”，并在與之對應的第二列里添加“復選框”。復選框 選項在軟件快捷欄里“單選按鈕”的前面，其設置與“單選按鈕”十分類似。本網頁 制作創(chuàng)建了四個復選按鈕，與其相對應的分別是“公式概念不理解”、“疑難題型不會 解”、“缺少學習方法”和“其他”。之后要做的就是分別把每個復選框屬性面板里的 選定值改為與其相對應的文字，而后點擊確定即可。 第八行需要輸入的是“備注說明”，此欄目的是在求助者需要表達自己想法意思包 括各類題型時所用的到的。在其對應的第二列里插入一個文本區(qū)域，將文本區(qū)域里的 類型設置為多行，字符寬度設置為70，行數設置為3行。并在初始值中鍵入“此處需 填寫問題和要求，疑難題型和詳細說明”字樣，每當有瀏覽者訪問此頁并想要在框架 里填寫問題時，可以刪除之前作者留下的字樣或提示。并且字數限制于格式也相對夠 用。 在最后一行里需要點出軟件快捷選項欄里的“按鈕”選項，并點選兩次，可以看 到的是出現了兩個按鈕選項，其默認文字為提交。在這里先將最后一行的兩列合并為 一列，再將兩個按鈕居中，然后分別對其進行設置。首先點擊一個按鈕選框改名為“確 定提交”，將第二個改名為“重新填寫”（改名選項在其屬性面板里操作），在者將“確 定提交”按鈕屬性面板里的動作勾選為“提交表單”，將“重新填寫”屬性面板里的 動作勾選為“重設表單”，這樣在設置好之后，當點擊“提交表單”時網頁會自動發(fā) 出表單，在點擊“重設表單”時網頁會重置表單內容并讓使用者可以重新填寫。 最后選中表單，在屬性框中找到動作條并輸入所指定的郵箱地址，這樣在此后每 當有用戶提交表單時，整個表單信息就會以郵件的形式自動發(fā)送，以下為表單制作完 成后的效果圖。如圖4.10： 21  表單效果 太原工業(yè)學院畢業(yè)設計 圖4.10 此欄設定的主要意義在于，幫助學生解決學習上的難題問題，在通過本網頁進行 學習的過程中，遇到難懂的知識點，不會解答的習題等都可以使用此功能來尋求幫助。 另外一個好處就是在課外沒有老師輔導情況下，可以通過此功能解答一切學習上遇到 的困難?？傊菍W生自主學習時不可獲取的一項功能。 （7）下載專區(qū) 本欄的作用主要是給師生提供各式習題的下載資源。在頁面制作與頁面劃分上并 無特點，只需采取表格單行兩列并將習題資源排列放置即可，左邊的章節(jié)文字展開欄 也和之前的幾個欄目一致，做好超級鏈接后，學生只需點擊即可下載相應資料。 設定此欄的意義在于能夠給教師或者學生提供大量的電子習題素材，省去了購買 和查閱資料的時間，極大地方便了學生對習題的查找。還因為網頁頁面的限制，使得 網頁制作者不可能大篇幅的而又得保證習題涵蓋知識點很廣的情況下放置習題集，同 樣，大篇幅的練習題也會使得頁面看起來雜亂無章，無形中增加了學生查找習題的難 度，使得題庫變得毫無意義。因此，除了在題庫中例舉一定數量的習題外，此欄的主 要作用就是放置各對應章節(jié)的大量題型，題集一般采取壓縮包格式，配有對應章節(jié)列 表并明確標注題集內容，使得用戶在瀏覽頁面時能輕松、便捷的查找到所需要的資料。 另本欄中除了包含有各練習題的下載，還提供題庫里對應章節(jié)習題的答案下載，其功 能和用途十分有效。 （8）網站地圖 此欄作用是幫助訪問者快速找到所需要的頁面，在制作上較為簡單，只需設定幾 個超級鏈接即可，當用戶需要找尋某一指定頁面時，從中可直接點選并跳轉至用戶指 22  超級鏈接與測試鏈接有效性 超級鏈接 太原工業(yè)學院畢業(yè)設計 定當前頁。 此欄的意義及用途在于極大便利了用戶在訪問網頁期間，挨個點選查找所需頁面 的時間，其能使用戶輕松便捷的找到所需的頁面并且較為直觀、清晰的展現整個網頁 的劃分與布局，給每個訪問用戶提供便利。 4.5 在做好了各個欄目的子網頁以及各章節(jié)對應的子網頁后，需要進行超級鏈接的操 作，特別需要注意的是，每個子網頁的每個需要做鏈接的文字、欄目都需要逐一去鏈， 如果其中一個環(huán)節(jié)漏掉了鏈接，都會使用戶在訪問網頁的過程中遇到“無法鏈接服務 器”的情況，因此，制作時一定要仔細認真，最后還要逐一檢查鏈接的有效性。 制作鏈接的方法很簡單，但是工作量較大而又很容易出錯，在此以網頁菜單欄里 “在線答疑”欄目為例，用鼠標選中欄目里“在線答疑”四個字，同時可以看到下方 屬性欄里有鏈接字樣，這里制作鏈接有兩個方法，第一種就是點選屬性欄鏈接字樣旁 的文件夾圖標，從中找到所需要鏈接的網頁或文件。還一種方法就是點選另一個像瞄 準器一樣的標識，按住鼠標左鍵不放并將其拖動到右側資源管理器中你想要鏈接的網 頁上，如圖4.11所示，點選鏈接圖標并按住鼠標左鍵不放將其箭頭拖動到右側資源管 理器中“課程”網頁文件上 圖4.11 之后可以看到鏈接框里顯示的是已成功鏈接到的文件地址與名稱。 23  太原工業(yè)學院畢業(yè)設計 如此做法將每個子頁面中需要鏈接的內容逐一