計算機輔助藝術(shù)設(shè)計2課程設(shè)計指導(dǎo)書

1、計算機輔助藝術(shù)設(shè)計2課程設(shè)計指導(dǎo)書一、課程設(shè)計的目的本次課程設(shè)計的任務(wù)是在兩周時間內(nèi)，按計劃，由教師帶領(lǐng)學(xué)生進行網(wǎng)站素材的搜集整理，設(shè)計并制作完成一個小型網(wǎng)站，以鞏固學(xué)生對“網(wǎng)頁三劍客”軟件技術(shù)要點的掌握，提高學(xué)生在網(wǎng)頁三劍客的整合應(yīng)用中分析問題、解決問題的能力。學(xué)生應(yīng)掌握并利用因特網(wǎng)發(fā)布信息，運用多媒體技術(shù)進行相關(guān)設(shè)計，以便為進一步學(xué)習(xí)及就業(yè)打下堅實的基礎(chǔ)。二、課程設(shè)計內(nèi)容及要求（一）課前安排利用兩節(jié)課時間就此次課程設(shè)計的任務(wù)、要求、指導(dǎo)教師安排、應(yīng)該達到的目標等進行講解，使學(xué)生認識課程設(shè)計的重要性，端正思想，明確任務(wù)，保質(zhì)保量地完成各項任務(wù)。（二）內(nèi)容：制作一個完整的小型網(wǎng)站要求：網(wǎng)站主題

2、自定，題材不限，但要求主題鮮明，結(jié)構(gòu)完整。著重網(wǎng)頁內(nèi)容、布局及其他構(gòu)成要素的合理安排，特別是網(wǎng)頁的形式美感及相關(guān)知識點的掌握與運用。（三）課程設(shè)計步驟（知識點要求）1、網(wǎng)站制作前的準備（1） 網(wǎng)站主題及內(nèi)容確定（2） 網(wǎng)頁布局及色調(diào)（3） 設(shè)計網(wǎng)站的目錄結(jié)構(gòu)（4） 。（5） 按照模塊功能的不同分別創(chuàng)建文件夾，并將與該模塊相關(guān)的網(wǎng)頁放在相應(yīng)的文件夾中。（6） 網(wǎng)站素材可按類型不同分別放在單獨的文件夾中。該文件夾可以在網(wǎng)站根目錄下，也可以放在相關(guān)模塊的文件夾下。（7） 當?shù)鼐W(wǎng)站和遠程網(wǎng)站要使用相同的結(jié)構(gòu)。2、網(wǎng)頁制作工具選擇（1） 使用dreamweaver生成網(wǎng)頁。（2） 網(wǎng)頁制作還會涉及到一些

3、腳本語言：javascript、vbscript、asp、php、jsp等等。（3） dreamweaver、flash、firework網(wǎng)頁制作三劍客整合應(yīng)用。3、網(wǎng)站設(shè)計的工作流程（1）根據(jù)網(wǎng)站主題組織網(wǎng)站內(nèi)容在著手制作網(wǎng)站之前，要首先清楚建立網(wǎng)站的目的是什么?要明確站點的主題和類型。如果是一個為了自娛的個人網(wǎng)站，那么后面的設(shè)計可以圍繞“個性化”來進行；而如果是一個公司的宣傳站點，則應(yīng)立足于公司的企業(yè)形象展示來進行。網(wǎng)站內(nèi)容切忌繁多雜亂，要精挑細選突出重點，網(wǎng)站主題忌諱大和空。確定網(wǎng)站主題后，即可以組織網(wǎng)站內(nèi)容，搜集并整理網(wǎng)站可能需要的資料，尤其是文本資料和圖片資料，準備得越充分越有利于下

4、一步的網(wǎng)站欄目規(guī)劃和網(wǎng)頁素材整理工作。 （2）規(guī)劃網(wǎng)站欄目和網(wǎng)站目錄結(jié)構(gòu)網(wǎng)站主題明確了，網(wǎng)站內(nèi)容資料也準備了，但還不宜立即進行網(wǎng)頁制作，一定要先規(guī)劃好網(wǎng)站欄目并進而確定網(wǎng)站的目錄結(jié)構(gòu)。網(wǎng)站欄目實質(zhì)上是個網(wǎng)站內(nèi)容的大綱索引。網(wǎng)站欄目的設(shè)置原則有二：一是網(wǎng)站內(nèi)容重點突出，二是是訪問者瀏覽方便。在設(shè)置欄目時，要仔細考慮網(wǎng)站內(nèi)容的輕重緩急，合理安排，突出重點。規(guī)劃網(wǎng)站欄目和網(wǎng)站目錄結(jié)構(gòu)時要注意以下幾點：A、網(wǎng)站欄目劃分要服從并體現(xiàn)網(wǎng)站主題B、網(wǎng)站主要內(nèi)容要打破欄目層次束縛C、不要將所有的文件都存放在根目錄下D、按欄目內(nèi)容建立子目錄E、每個主目錄下都建立獨立的images目錄F、熟悉目錄文件的命名規(guī)則G

5、、確定網(wǎng)頁版面布局考慮網(wǎng)頁版面布局時，基本上應(yīng)該考慮醒目性、可讀性、明快性、造型性、創(chuàng)造性等要素。醒目性是指使用戶把注意力集中到某網(wǎng)站并誘導(dǎo)其瀏覽使其看到的部分或內(nèi)容；可讀性就是使網(wǎng)站的內(nèi)容更容易讓人讀懂；明快性就是準確、快速地轉(zhuǎn)達網(wǎng)站的構(gòu)成內(nèi)容；造型性就是維持整體外型上的穩(wěn)定性和均衡性。另外，為了使網(wǎng)站更加富有創(chuàng)造性和鮮明的個性，在設(shè)計網(wǎng)站的界面時還應(yīng)在創(chuàng)造性方面多下些工夫。我們常見的布局結(jié)構(gòu)有“國”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、海報型步局、Flash布局、標題文本型布局、框架型布局和變化型布局等。（3）收集制作網(wǎng)頁的素材這里搜集網(wǎng)頁素材是對前面介紹的根據(jù)網(wǎng)站主題

6、組織網(wǎng)站內(nèi)容的進一步挑選和細化，因為這時頁面布局已經(jīng)確定，收集到的網(wǎng)頁素材應(yīng)該落實為站標、廣告欄、導(dǎo)航欄、宣傳語、按鈕、文本、圖片、動畫，以及背景聲音等頁面元素。這一階段實際上是通過各種工具軟件對素材進行編輯和處理。（4）整合網(wǎng)頁素材網(wǎng)頁是通過瀏覽器所看到的頁面。在頁面中，站標、按鈕、宣傳語、導(dǎo)航欄、廣告欄、文本、圖片、動畫、以及背景聲音等頁面元素必須通過專業(yè)的網(wǎng)頁制作軟件進行整合，才可以稱為網(wǎng)頁。（5）添加網(wǎng)頁特效網(wǎng)頁特效是指對網(wǎng)頁進行美化，強化網(wǎng)頁的視覺（包括聽覺）沖擊力，使之更具有藝術(shù)效果。美化網(wǎng)頁可以通過HTML語句、Flash動畫、頁面自動滾屏等技術(shù)實現(xiàn)。需要說明的是，添加網(wǎng)頁特效要

7、適度，要契合網(wǎng)站的主題和內(nèi)容，否則過多的動感和色彩效果會喧賓奪主，影響訪問者瀏覽網(wǎng)頁信息內(nèi)容4、網(wǎng)站管理（1）關(guān)于網(wǎng)站和網(wǎng)頁的區(qū)別網(wǎng)頁是一個單獨的頁面，而網(wǎng)站則是一個向網(wǎng)絡(luò)用戶提供網(wǎng)絡(luò)服務(wù)的服務(wù)器。網(wǎng)站通常是由大量的內(nèi)容相關(guān)的網(wǎng)頁組成網(wǎng)站是有獨立域名、獨立存放空間的內(nèi)容集合，這些內(nèi)容可能是網(wǎng)頁，也可能是程序或其他文件，不一定要有很多網(wǎng)頁，主要有獨立域名和空間，那怕只有一個頁面也叫網(wǎng)站。網(wǎng)頁是網(wǎng)站的組成部分。有了很多網(wǎng)頁沒有獨立的域名和空間也只能說是網(wǎng)頁，例如blog、掛在別人那里的個人主頁，企業(yè)建站系統(tǒng)里的企業(yè)頁面，多用戶商城里的商戶盡管有很多頁面，功能也齊全，但都不能叫網(wǎng)站。網(wǎng)站就是有門牌（

8、域名）的房子，網(wǎng)頁就是房子里面的人，房子里有沒有人或很多人都還叫房子，你在人家房子里搭一個房間，不管里面家私如何齊全，住了多少人，都不能把那個房間叫房子。（2）Dreamweaver中的網(wǎng)站管理1、在硬盤上建立一個文件夾2、站點菜單-新建站點-出現(xiàn)向?qū)?、輸入站點的名字及url，點擊下一步4、根據(jù)你的網(wǎng)站使用的腳本語言，選擇是否需要使用服務(wù)器技術(shù)，點擊下一步5、選擇你編輯網(wǎng)站的方式（本地編輯測試、遠程編輯測試。建議本地編輯完后在上傳遠程服務(wù)器）6、選擇如何連接你的服務(wù)器7、使用什么url瀏覽根目錄。5、三劍客的整合應(yīng)用（1）dreamweaver中插入fireworks將Fireworks H

9、TML插入到Dreamweaver中有許多不同的方法。用戶可以將Fireworks HTML復(fù)制到剪貼板；或者利用菜單或者“Insert”面板來直接插入Fireworks HTML文件；也可以在Dreamweaver中打開導(dǎo)出的Fireworks HTML文件，然后復(fù)制并粘貼所選的代碼片段；另外使用 Fireworks中的“Update HTML”命令還可以輕松地更新導(dǎo)出到Dreamweaver的代碼，甚至可以將HTML 導(dǎo)出為Dreamweaver庫項目，這些方法各有千秋，可以根據(jù)具體情況作出選擇。（2）dreamweaver中flash的應(yīng)用通過跨應(yīng)用共享和管理資源，可以更加高效地開發(fā)富媒

10、體網(wǎng)站和應(yīng)用?？梢砸酝戏欧绞浇o網(wǎng)站添加Flash元素。在屬性檢查器中更新元素的參數(shù)，不用離開Dreamweaver就可以編輯和優(yōu)化圖像文件。通過使用共享站點和公共登記/注銷功能，可以更輕易地管理文件和減少覆蓋錯誤。使用Fireworks/Dreamweaver往返編輯功能，流水線處理圖像文件。在Dreamweaver中使用內(nèi)建的Flash元素，可以給頁面添加交互性。在頁面中導(dǎo)入Flash元素，并像一個標記一樣定制它。這僅需要在選擇檢查器中設(shè)置屬性，其它事情就讓Dreamweaver來完成。6、空間申請、站點更新與管理（1）測試本地站點A、測試站點網(wǎng)頁與目標瀏覽器的兼容性目前Internet上存

11、在著各種各樣的瀏覽器，它們都有各自的標準，要讓網(wǎng)頁在所有的瀏覽器中都能被正確的瀏覽是不現(xiàn)實的。通常只需測試當前最流行的兩種瀏覽器InternetExplorer和NetscapeNavigator就可以了。事實上，InternetExplorer和NetscapeNavigator瀏覽器認識的只是一種簡單的控制語言HTML，它指示瀏覽器按一定的現(xiàn)實格式顯示文字和圖形、播放聲音和動畫等。隨著Internet的迅猛發(fā)展，HTML也不斷的發(fā)展，加入了更多的標記，增加了更多的功能。要支持HTML的新功能，就必須升級瀏覽器。問題在于，InternetExplorer和NetscapeNavigator版

12、本眾多，而由于種種原因很多用戶并沒有使用最新版本的瀏覽器。因此，設(shè)計出能同時兼顧各種瀏覽器的網(wǎng)頁，就顯得非常重要。B、預(yù)覽自己的網(wǎng)頁站點設(shè)計和管理人員在將站點發(fā)布到服務(wù)器上之前，通常都要在瀏覽器中預(yù)覽自己所作的網(wǎng)頁，以確保網(wǎng)頁預(yù)覽的效果與自己設(shè)想的效果一致。由于在DreamweaverMX文檔窗口中制作出來的網(wǎng)頁并不總是與在瀏覽器中瀏覽到的網(wǎng)頁有相同的效果，因而在瀏覽器中預(yù)覽網(wǎng)頁是站點測試中不可缺少的。C、檢驗文件的大小及下載時間減小網(wǎng)頁文件的大小，提高下載速度是網(wǎng)頁設(shè)計人員的一項重要工作。在DreamweaverMX文檔窗口的狀態(tài)欄中，有一個方格顯示了當前頁面的大小及預(yù)計的下載時間。首頁狀態(tài)

13、欄的一個方格中顯示了“152K/43秒”，表明當前頁面的全部內(nèi)容為152KB，預(yù)計下載時間為43秒。DreamweaverMX根據(jù)當前頁面中的全部內(nèi)容計算文件的大小，包括鏈接的對象，如圖片及插件等。預(yù)計的下載時間是DreamweaverMX根據(jù)“參數(shù)設(shè)置”面板中的“狀態(tài)欄”選項組中選定的鏈接速度計算出來的。實際上，文件的下載時間完全依賴于計算機與Internet連接的實際速度。設(shè)計人員應(yīng)根據(jù)下載時間的指示，適當調(diào)整網(wǎng)頁內(nèi)容，以求獲得較好的下載效果。（2）站點文件的上傳A、文件傳輸?shù)幕A(chǔ)知識因特網(wǎng)上的兩臺計算機在地理位置上無論相距多遠，只要兩者都支持FTP協(xié)議，網(wǎng)上的用戶就能將一臺計算機上的文件

14、傳送到另一臺上。使用FTP服務(wù)，首先要登錄到對方的計算機上，用戶在登錄到遠程計算機時需要相應(yīng)的用戶名和口令。B、在DreamweaverMX中傳輸站點（1）申請網(wǎng)站域名設(shè)計好網(wǎng)頁以后，就要考慮對外發(fā)布的問題；需要注冊申請一個域名。有國際域名，也有國內(nèi)域名。有免費的，也有收費的（按年度計費，服務(wù)有保障）。主要是要起一個能夠反映網(wǎng)站主題的用戶名，這一點很關(guān)鍵；一方面要保證獨一無二，另一個方面要反映網(wǎng)站的主題，用戶的信息，企業(yè)類用戶起商標名。（2）申請服務(wù)器空間一般用戶很少有自己的服務(wù)器，要發(fā)布需要向ISP申請主頁存貯空間，當然網(wǎng)上也有很多免費提供的。為了獲得穩(wěn)定良好的服務(wù)，一般向?qū)I(yè)的ISP申請，

15、需要一定的費用，提供的服務(wù)比較有保障。（3）定義站點本地信息在設(shè)計網(wǎng)頁的初期就要定義好，如網(wǎng)站的名稱，本地文件夾信息等。方法：選擇“站點/新建站點”菜單?！罢军c定義”對話框中的“高級”標簽中點擊“分類”項目下的“本地信息”選項。設(shè)置“本地信息”。修改站點信息：選擇“站點/編輯站點”菜單4、定義站點遠程信息方法：選擇“站點/編輯站點”菜單。一般情況下，設(shè)計好網(wǎng)頁，申請域名、網(wǎng)頁空間以后，ISP將提供相應(yīng)的配置信息，如帳號、密碼、FTP地址，以及默認主頁的名稱等信息。將這些信息分別對號入座，進行設(shè)置即可。（3）站點文件的傳輸下一步應(yīng)將文件上傳到遠程服務(wù)器上；在“站點”面板上，從“站點”彈出式菜單中

16、選擇一個站點。如果在使用 FTP 傳輸文件，則可以單擊“連接”打開與遠程服務(wù)器的連接。選擇要上傳的文件。單擊“站點”面板工具欄上的“上傳”按鈕?；蛘哂覔暨x擇“上傳”。（不過，單擊“連接”并不是必需的操作；單擊“上傳”時，Dreamweaver 會自動連接。）（4）站點的維護與管理1、站點文件管理在制作網(wǎng)頁文件時，總是將所有的網(wǎng)頁文件都存放在同一個文件夾下，該文件夾下包含一個站點中所有的文件夾和文件。添加一個文件到網(wǎng)站所在的文件夾中，可以用“我的電腦”或者“資源管理器”，因為在沒有放到該文件夾中以前，它是一個獨立的文件。刪除一個文件，一定要注意在站點管理器中進行，因為它不是獨立的個體，與網(wǎng)站中的

17、其它文件有聯(lián)系。刪除意味著，這種聯(lián)系斷了。重命名文件，也必須在站點管理器中進行，文件之間的聯(lián)系即超級鏈接是通過文件名定義的，改了名稱，這種的鏈接也應(yīng)同步進行。在站點管理器中，選中欲重命名的文件，右擊，選“重命名”。根據(jù)提示，自動改變所有的鏈接。另外，改變文件在網(wǎng)站中存貯位置，也需要在站點管理器中。2、遠程與本地站點同步第一次上傳站點之后，如無意外，遠程與本機的網(wǎng)頁文件應(yīng)該是一樣的。但由于站點內(nèi)容也許不只由一個人編輯和維護，這樣就容易造成兩處文件不一樣的情況。即使是完全由自己編輯和維護的網(wǎng)頁，在過了一段時間之后，也可能會由于網(wǎng)頁制作人自己的疏忽，將本不該刪去的網(wǎng)頁刪掉，而由于文件眾多，難以一一進

18、行核對。這時就可用DreamweavetMX的站點同步功能進行修正。它能使遠程文件和本機的文件完全相同，方便地進行站點內(nèi)容更新。方法：在站點面板的“站點”菜單中，單擊“同步”。3、檢查與修正超級鏈接 檢查超級鏈接通常一個站點制作下來，超級鏈接的項目非常多，對于大型站點來說更是如此。逐一檢查，不僅效率低，還容易出錯。利用DreamweaverMX所提供的檢查超級鏈接的工具，可以在極短的時間內(nèi)掌握站點內(nèi)所有超級鏈接的狀態(tài)。方法：在站點面板的“站點”菜單中，單擊“檢查站點范圍的鏈接”?；蛘哂覔裟硞€文件，選擇“檢查鏈接”中的相應(yīng)命令。修正超級鏈接檢查完超級鏈接后，就可以根據(jù)檢查的情況對錯誤或斷開的超級