網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)實驗與特效資料

1、網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)實驗指導(dǎo)書網(wǎng)頁制作實訓(xùn)安排一、實訓(xùn)目的網(wǎng)頁設(shè)計是操作性很強的一門課程。本學(xué)期學(xué)生主要學(xué)習(xí)了三個軟件Photoshop、Flash、Dreamweaver，學(xué)好這三個軟件，是制作網(wǎng)頁的關(guān)鍵，而學(xué)好的關(guān)鍵是多練。盡管平 時上機有聯(lián)系，但將三個軟件聯(lián)系的整合度還不夠。通過對個人網(wǎng)站或班級網(wǎng)站的設(shè)計， 使學(xué)生熟練應(yīng)用 Dreamveaver MX 和 FrontPage MX 網(wǎng)頁設(shè)計軟件，使學(xué)生對網(wǎng)頁制作所學(xué)的內(nèi)容有一個系統(tǒng)的理解和掌握。在制作過程中，主要掌握對網(wǎng)頁的布局、色彩的搭配、框架的應(yīng)用、層的運用、行為的 實現(xiàn)、表單的使用、模板和庫的應(yīng)用等，獨立完成自己的作品并上傳至Int

2、ernet 網(wǎng)上。本次實訓(xùn)給學(xué)生提供了深入學(xué)習(xí)的資料和信息， 緊緊圍繞網(wǎng)頁制作的流程： 規(guī)劃、設(shè)計、 開發(fā)、發(fā)布、維護來進行網(wǎng)站的開發(fā)，制作出具有較高水準的靜態(tài)網(wǎng)頁。以此作為學(xué)生學(xué)習(xí) 這門課程的階段性總結(jié)，使學(xué)生復(fù)習(xí)、鞏固所學(xué)過的理論，并予以適當?shù)纳罨M一步訓(xùn)練 學(xué)生的基本技能(如：搜集資料、整理數(shù)據(jù)、制表繪圖、發(fā)現(xiàn)與分析問題、尋求解決問題的 方案等)，訓(xùn)練學(xué)生掌握計算機操作技術(shù)，運用計算機技術(shù)進行數(shù)據(jù)處理分析。二、實訓(xùn)時間：1周(5天)三、實訓(xùn)地點：實驗樓機房四、實訓(xùn)設(shè)施1 相關(guān)基礎(chǔ)：學(xué)生應(yīng)熟練掌握 Dreamweaver MX 、 Flash MX 、 FireWorks MX 等軟件的

3、應(yīng)用。2硬件環(huán)境：(1) 主機上要求安裝有 Dreamweaver MX 、 Flash MX 、 FireWorks MX 等軟件。(2) 主機能與互聯(lián)網(wǎng)相連、以便學(xué)生能夠瀏覽優(yōu)秀網(wǎng)站，搜集相關(guān)材料等。(3) 將主機配置成 WEB 服務(wù)器。五、實訓(xùn)組織形式及進行方式：(1) 制作班級網(wǎng)頁具有一定的開放性和綜合性。因此采取小組協(xié)作學(xué)習(xí)的方式是非常必要的。小組成員的知識程度、學(xué)習(xí)能力和思維方式都有差異，可以通過討論、交流與合作，取 長補短、拓展思路。每個學(xué)習(xí)小組由 6-8 人組成，實際制作中采取合理分工的工作方法。希 望同學(xué)們能夠結(jié)合所學(xué)知識， 盡量獨立完成相關(guān)任務(wù)， 對于較復(fù)雜的操作部分， 相

4、鄰?fù)瑢W(xué)間 也可以團結(jié)協(xié)作、共同完成。(2) 按照 時間與任務(wù)安排”及時完成當天的網(wǎng)頁操作任務(wù)，并用U盤保存網(wǎng)頁，(3) 網(wǎng)頁體裁、形式、風(fēng)格不限。(4) 參考網(wǎng)頁”只是起到范例作用，希望同學(xué)們看到參考網(wǎng)頁上的效果，還能想起來那些 效果是如何設(shè)計的。每組設(shè)立一個組長，負責(zé)組織分配該組成員的具體工作。(5) 教師負責(zé)整個網(wǎng)頁制作過程的體裁和內(nèi)容的審核、系統(tǒng)指導(dǎo)和監(jiān)督工作。六、實訓(xùn)要求1. 確定目標通過網(wǎng)絡(luò)就某個專題搜索資料， 題材不限，要求有個人特色、新穎和有吸引力，并對網(wǎng)站作簡單的介紹如主題是什么？分那幾個欄目，每個欄目的特色和主要內(nèi)容是什么？ 參考專題： 對計算機基礎(chǔ)教育的看法， 互動式教學(xué)的

5、方式， 網(wǎng)上論壇， QQ 聊天論述等。也可以是其它的有興趣的專題如：文學(xué)、歷史、科技、體育、旅游、生活、時尚等。參考選題：班級主頁，動漫，個人主頁，求職簡歷，電子商務(wù)網(wǎng)站，花卉網(wǎng)站，學(xué)習(xí)網(wǎng) 站2. 選擇目標用戶確定了站點實現(xiàn)的目標之后， 需要確定站點的瀏覽客戶。 創(chuàng)建世界上每個人都能使用的Web 站點是不可能的。人們的興趣、愛好不同，使用不同的瀏覽器，以不同的速度連接， 這些因素都會影響站點的使用。因此需要確定目標用戶，根據(jù)用戶的特點來設(shè)計站點風(fēng)格。3. 組織站點結(jié)構(gòu)如果沒有考慮文檔在文件夾層次結(jié)構(gòu)中的位置就開始創(chuàng)建文檔，最終可能會導(dǎo)致一個充滿了文件的臃腫混亂的文件夾，或?qū)е孪嚓P(guān)的文件散布在許

6、多名稱類似的文件夾中。設(shè)置站點的常規(guī)做法是在本地磁盤上創(chuàng)建一個包含站點所有文件的文件夾(稱作本地站點)，然后在該文件夾中創(chuàng)建和編輯文檔。當準備好發(fā)布站點并允許公眾查看時，再將這些 文件拷貝到 Web 服務(wù)器上。組織站點結(jié)構(gòu)時，應(yīng)注意以下三個問題：( 1)將站點分類，把相關(guān)的頁面放在同一文件夾中。( 2)將圖像和聲音文件等項目放在指定的文件夾中，以便于文件的查找定位。例如，將所有圖像放在 Images 文件夾中，當在頁面中插入圖像時，就可以方便的找到它。(3)本地站點和遠程 Web站點應(yīng)該具有完全相同的結(jié)構(gòu)。如果使用 Dreamweaver MX創(chuàng)建本地站點，然后將全部內(nèi)容上傳到遠程站點，則Dr

7、eamweaver MX確保在遠程站點中精確拷貝本地結(jié)構(gòu)。4. 設(shè)計外觀頁面布局和設(shè)計保持一致非常重要。如果不考慮板塊設(shè)計，瀏覽者會覺得你的網(wǎng)站內(nèi)容雜亂、無條理，先要考慮好自己設(shè)計的板塊與鏈接結(jié)構(gòu)；根據(jù)所需的站點布局外觀，在實訓(xùn) 報告本上畫一個站點草圖，以便以后建立站點時可以按照它來操作。如圖1所示，是一個站點首頁的設(shè)計布局圖。5. 設(shè)計導(dǎo)航方案設(shè)計站點時，應(yīng)考慮如何使訪問者能夠方便的從一個區(qū)域移動到另一個區(qū)域。具體考慮以下幾點：明確“當前位置”；導(dǎo)航方便；提供與網(wǎng)站管理員的聯(lián)系方法。6. 規(guī)劃和收集資料完成了設(shè)計和布局后， 就可以創(chuàng)建和收集需要的資源了。資源可以是圖像、 文本或媒體等項目。在

8、開始開發(fā)站點前，請確保收集了所有這些項目并做好了準備。否則，可能為找不 到一幅圖像而中斷設(shè)計、開發(fā)過程。LogoBanner簡單功能導(dǎo)航欄功能列表或局部導(dǎo)航主要內(nèi)容版權(quán)聲明16七、實訓(xùn)計劃表時間安排內(nèi)容安排第一天上午明確網(wǎng)站主題，應(yīng)力求簡潔，要點明確，要 以簡單的畫面和語言告訴瀏覽者，站點的主 題。收集網(wǎng)頁素材，確定欄目，決定網(wǎng)站結(jié) 構(gòu)，通過小組討論，畫出網(wǎng)頁草圖。下午確定內(nèi)容安排，將每個頁面的草圖設(shè)計完成。 相關(guān)的文字工作錄入完畢， 定義好本地站點， 將資料保存。第二天上午用Photoshop將網(wǎng)頁草圖實現(xiàn)，決定網(wǎng)站的配 色方案，可以借鑒其他網(wǎng)站。對各個網(wǎng)頁可 以分工實現(xiàn)。下午制作網(wǎng)頁中所需

9、要的Flash。將在PS中完成的圖片切片，保存。第三天上午主頁的設(shè)計主要是對版面進行合理布局，利 用表格和層對版面進行合理定位。通過文字 圖形的空 間結(jié)合，表達出和諧與美。利用 DW，設(shè)計網(wǎng)頁的排版方式，把各個切片放入 DW中的表格。下午將相應(yīng)的內(nèi)容，放入網(wǎng)頁的對應(yīng)位置。其它 頁面的制作，注意與主頁的和諧統(tǒng)一，并對 各頁內(nèi)容進行充實；適當搜集一些網(wǎng)頁特效， 做出適合自己站點的特效。第四天上午修改并完善已經(jīng)做好的網(wǎng)頁，同時完成網(wǎng)頁 之間超級鏈接的設(shè)置。多頁面之間的鏈接， 特別是關(guān)系十分密切的有上下文關(guān)系的頁 面，設(shè)計時一定要含有向前和向后的按鈕， 便于瀏覽者的訪問下午完善并測試網(wǎng)頁，準確無誤后，

10、在網(wǎng)上申請 免費空間，將制作好的網(wǎng)站在網(wǎng)上發(fā)布。第五天上午對于已完成網(wǎng)站，進一步進行修改，可以加 入一些動態(tài)技術(shù)。（如留言板）小組每個成員寫好實驗報告。下午申請免費或收費的空間，將作品上傳調(diào)試。 書寫實訓(xùn)報告。檢查每個小組的網(wǎng)頁，以及 實驗報告，并打分。附表：評分標準1、內(nèi)容充實度：60%2、動態(tài)技巧：20%3、版面美工：10%4、其他功能：10%八、考核辦法評價指標量化等級分值(分值)具體指標優(yōu)良中差自評教師獲得的信息準確且完整5432網(wǎng)頁內(nèi)信息的收集方法效率咼10864容網(wǎng)頁文字沒有語法和拼寫錯誤10864(40)能找到合適的網(wǎng)頁素材并合理應(yīng) 用10864引用他人作品，是否注明出處5432

11、技術(shù)處網(wǎng)頁布局整齊、合理10864理網(wǎng)頁色彩協(xié)調(diào)、風(fēng)格鮮明10864網(wǎng)頁鏈接正確、快捷10864(35)具有較強的動態(tài)交互功能5432自主學(xué)能獨立查找操作指導(dǎo)并完成操作5432習(xí)能力(10)能獨立上傳和下載網(wǎng)頁作品5432合作能明確自己的分工職責(zé)， 圓滿完成任 務(wù)5432力(10)主動與他人討論，尊重他人，幫助 他人5432創(chuàng)新表現(xiàn)(5)網(wǎng)頁欄目設(shè)計及整體規(guī)劃有新意5432合計總得分實驗步驟1網(wǎng)站策劃1）畫出網(wǎng)站結(jié)構(gòu)草圖2）確定欄目 確定網(wǎng)頁所需的欄目?？稍谙铝辛信e的欄目中選取。 班級介紹、學(xué)習(xí)園地、通訊錄、作品展示、班級相冊、求職就業(yè)、班級新聞、好站分享、笑 話心語、 FLASH 欣賞，音樂

12、欣賞。 （至少 5 個欄目）3）進行版面設(shè)計分為首頁設(shè)計和二級頁面的設(shè)計，清楚在頁面上分別要放置哪些內(nèi)容4）搜集素材。如相關(guān)文字錄入，圖片素材，班級相片等等。二、制作網(wǎng)頁1、建立站點。命名為webfile,網(wǎng)站的結(jié)構(gòu)如下:c g仆少倉匡-,；_j 站點-webfile webfile筒 subjectl由己J imagespags eowkIe白匸）subj ect2田 Q innaggs甲S0 匕aSL-iElBE!:.pagesQ soundsEubj eet3 subj ect4 subj ect5 index, him2、進行主頁的設(shè)計。要求主頁中包含一個自己完成的Flash。3、進行

13、其他頁面的設(shè)計。4、建立幾個頁面間的鏈接關(guān)系。三、測試網(wǎng)頁四、作業(yè)檢查網(wǎng)上教學(xué)資源【網(wǎng)頁素材】：網(wǎng)頁制作大寶庫 素材精品屋 http:/www.sucaiw.eom/index.asp黑馬網(wǎng)頁素材 遐思素材屋 http:/www.zzi.cc/sck/sck1.htm【網(wǎng)頁特效】：網(wǎng)頁特效集 網(wǎng)頁特效 網(wǎng)頁特效 七色風(fēng)網(wǎng)頁特效 http:/www.7wi nd.n et/wytx/wytx.htm【技術(shù)文章】：太平洋學(xué)院 藍色理想 天極網(wǎng)網(wǎng)頁陶吧 網(wǎng)頁設(shè)計師聯(lián)盟 七色鳥設(shè)計空間 有風(fēng)的日子 中國站長站 閃客帝國 宇風(fēng)多媒體 閃吧 http:/www.flash8. net/網(wǎng)頁素材庫 參考書籍

14、網(wǎng)頁制作三劍客精彩實例詳解作者：趙艷鐸 出版社：上?？茖W(xué)普及出版 社網(wǎng)頁制作三劍客經(jīng)典實例 作者：崔亞量 出版社：電子科技大學(xué)出版社SQL Server 2000實用全書專著/ (美)Ray Rankins等著；邱仲潘等譯ASP 網(wǎng)絡(luò)編程技術(shù) 肖金秀主編/清華大學(xué)出版社出版 信息高速公路與大眾傳播 明安香 北京：華夏出版社 WWWDESIGN 丹涅爾，多累斯 中國輕工業(yè)出版社 Active Server Pages(ASP)3.0 網(wǎng)頁設(shè)計手冊 北京 :清華大學(xué)出版社 1999 現(xiàn)代平面廣告設(shè)計 -CIS 企業(yè)戰(zhàn)略伍門西安交通大學(xué)出版社巧學(xué)巧用 Dreamweaver Fireworks、Fl

15、ash制作網(wǎng)頁北京:人民郵電出版社 施 書恩，李冬梅網(wǎng)頁制作教程 丁愛萍 電子工業(yè)出版社Dreamweaver MX 中文版網(wǎng)頁制作實用教程 洪江龍、顧凌燕、徐軍玲 人民 郵電出版社網(wǎng)頁設(shè)計與制作 謝永超 中國電力出版社精彩網(wǎng)頁制作三劍客 深源室 西安電子科技大學(xué)出版社Adobe Photoshop 7.0C 標準培訓(xùn)教材 Adode 公司北京代表處 人民郵電出 版社Photoshop中文版金典案例教程飛思科技產(chǎn)品研發(fā)中心 電子工業(yè)出版社電腦平面設(shè)計大全 瀟湘工作室 機械工業(yè)出版社Potoshop7.0圖像處理精彩實例創(chuàng)作通朱仁成西安電子科技大學(xué)出版社網(wǎng)頁設(shè)計與制作制作過程中的參考技術(shù) 、圖像

16、處理 圖像的外形、大小、數(shù)量以及與背景的關(guān)系，都與內(nèi)容有著密切的聯(lián)系。（1 ）圖像的外形處理圖像的外形能使頁面的氣氛發(fā)生變化，并直接影響瀏覽者的興趣。一般而言，方形的 穩(wěn)定、嚴肅，三角形的銳利，圓形或曲線外形的柔軟親切，退底圖及一些不規(guī)則或不帶邊框 的圖像活潑。（2）圖像的面積圖像在網(wǎng)頁中占據(jù)的面積大小能直接顯示其重要程度。一般地，大圖像容易形成視覺 焦點，感染力強，傳達的情感較為強烈；小圖像常用來穿插在字群中，顯得簡潔而精致，有 點綴和呼應(yīng)頁面主題的作用。 在一個頁面中，如果只有大圖像而無小圖像或細密的文字，就會顯得空洞，但只有小圖像而無大圖像又使頁面缺乏視覺沖擊力。圖像的大小不僅決定著主從

17、關(guān)系，也控制著頁面的均衡與運動。大小對比強烈，給人跳 躍感，使主角更突出；大小對比減弱，則頁面穩(wěn)定、安靜。這是因為，訪問者在瀏覽頁面時， 首先會注意到大圖像， 然后再看到較小的圖像， 這種由大到小的引導(dǎo)， 使瀏覽者的視線在頁 面上流動，便造成一種動勢，使頁面活潑起來。因此，在網(wǎng)頁設(shè)計時，應(yīng)首先確定主要形象與次要形象，擴大主要圖像的面積，使次 要角色縮小到從屬地位。只有大小圖像主次得當?shù)卮┎褰M合，才能構(gòu)成最佳的頁面視覺效果。（3）圖像的數(shù)量圖像的數(shù)量是根據(jù)內(nèi)容決定的。只用一幅圖像，會使內(nèi)容突出、頁面安定。增加一幅圖 像，頁面會因為有了對比和呼應(yīng)而活躍起來。再增加一幅，則更加熱鬧、活潑。但是，限于

18、 目前網(wǎng)絡(luò)的傳輸速度， 使用圖像時一定要謹慎， 大的圖像會降低頁面顯示速度，即使是小圖像，如果運用數(shù)量過多，同樣會使頁面下載速度變慢。隨著網(wǎng)絡(luò)環(huán)境及技術(shù)條件的改善，這 種情況已經(jīng)有了很大的改觀。（4）與背景的關(guān)系網(wǎng)頁圖像與背景是對比和統(tǒng)一的關(guān)系。也就是說，圖像與背景在和諧統(tǒng)一的基礎(chǔ)上，應(yīng)存在一定的對比，以使主要圖像更加突出。 如精密的相機鏡頭以粗糙的巖石為背景，明亮的文字以深邃的星空為背景，或者使用沒有背景及陪襯物的退底圖像，周圍留出大面積空白， 都是利用對比對主體形象起到突出作用。二、圖像在長頁面中的應(yīng)用網(wǎng)頁一般都是縱向的（也有特意設(shè)計成橫向滾屏的 ），其長度從一屏到三屏不等，有時甚 至更多

19、。訪問者在瀏覽頁面時， 通過拖動垂直滾動條使網(wǎng)頁一屏一屏地顯示，但這并不意味著我們可以將整個頁面分割開來，孤立地進行每一屏的設(shè)計。 頁面的整體感是建立在形象的啟承關(guān)系上，盡管頁面被分割成幾屏來顯示，但圖像或文字的延續(xù)性應(yīng)使瀏覽者得到完整、 統(tǒng)一的視覺感受。設(shè)計者所要做的就是進行通盤考慮，例如：尋找對比中的和諧、建立同一 的視覺識別等，來處理好每一屏與整個頁面的關(guān)系。三、版式的基本類型網(wǎng)頁版式的基本類型主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱 型、焦點型、三角型、自由型十種。四、iframe的用法 解釋成 “瀏覽器中的瀏覽器 “很是恰當 用于設(shè)置文本或圖形的浮動圖文框或容器。B

20、ORDER設(shè)定圍繞圖文框的邊緣寬度FRAMEBODER 設(shè)置邊框是不否為 3 維( 0=否， 1=是)HEIGHT,WIDTH設(shè)質(zhì)邊框的寬度和高度SCROLLING 是否有滾動條( YES,NO,AUTO)SRC指定 IFRAME 調(diào)用的文件或圖片 (HTML,HTM,GIF,JPEG,JPG ,PNG,TXT,*.*)五、改變滾動條顏色。 將以上代碼中的顏色代碼換成要改的顏色，放在 前。六、滾動字幕的制作方法。水平滾動水平滾動字幕內(nèi)容垂直滾動垂直滾動字內(nèi)容各參數(shù)詳解：a) scrollAmount。它表示速度，值越大速度越快。如果沒有它，默認為6，建議設(shè)為13比較好。b) width和hei

21、ght，表示滾動區(qū)域的大小，width是寬度，height是高度。特別是在做垂直滾動的時候，一定要設(shè)height的值。c) direction。表示滾動的方向，默認為從右向左：?？蛇x的值有 right、down、up。滾動方向分別為：right表示m,up表示f, dow n表示J。d) scrollDelay ,這也是用來控制速度的，默認為90,值越大，速度越慢。通常scrollDelay是不需要設(shè)置的。e) behavior。用它來控制屬性，默認為循環(huán)滾動，可選的值有alternate(交替滾動卜slide(幻燈片效果，指的是滾動一次，然后停止?jié)L動)七、圖片切換代碼。!-var imgUr

22、l=new Array();var imgL ink=new Array();var adNum=0;imgL in k1= in gga n/2005-11-22/19.html;imgUrl1=http:/www. mn nwen/5.jpg;imgL in k2=http:/www.m n88.eom/x in gga n/2005-11-22/20.html;imgUrl2=http:/www. mn nwen /4.jpg;imgL in k3=http:/www.m n88.eom/x in gga n/2005-11-22/15.html; imgUrl3=http:/www.

23、mn nwen/2.jpg;imgL in k4=http:/www.m n88.eom/x in gga n/2005-11-22/38.html; imgUrl4=http:/www. mn nwen/l.jpg;imgL in k5=http:/www.m n88.eom/x in gga n/2005-11-22/17.html; imgUrl5=http:/www. mn nwen/3.jpg;var imgPre=new Array();var j=0;for (i=1;i=5;i+) if( (imgUrli!=) & (imgLinki!=) ) j+; else break;var preloadedimages=new Array();for (i=1;i6;i+) preloadedimagesi=new Image(); preloadedimagesi.src=imgUrli;function playTran()if (docume