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

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

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

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

4、任務，并用U盤保存網(wǎng)頁，（）網(wǎng)頁體裁、形式、風格不限。（）“參考網(wǎng)頁”只是起到范例作用，希望同學們看到參考網(wǎng)頁上的效果，還能想起來那些效果是如何設計的。每組設立一個組長，負責組織分配該組成員的具體工作。（）教師負責整個網(wǎng)頁制作過程的體裁和內(nèi)容的審核、系統(tǒng)指導和監(jiān)督工作。六、實訓要求1. 確定目標 通過網(wǎng)絡就某個專題搜索資料， 題材不限，要求有個人特色、新穎和有吸引力，并對網(wǎng)站作簡單的介紹如主題是什么？分那幾個欄目，每個欄目的特色和主要內(nèi)容是什么？參考專題：對計算機基礎教育的看法，互動式教學的方式，網(wǎng)上論壇，QQ聊天論述等。也可以是其它的有興趣的專題如：文學、歷史、科技、體育、旅游、生活、時尚等

5、。參考選題：班級主頁，動漫，個人主頁，求職簡歷，電子商務網(wǎng)站，花卉網(wǎng)站，學習網(wǎng)站2. 選擇目標用戶 確定了站點實現(xiàn)的目標之后，需要確定站點的瀏覽客戶。創(chuàng)建世界上每個人都能使用的 Web 站點是不可能的。人們的興趣、愛好不同，使用不同的瀏覽器，以不同的速度連接，這些因素都會影響站點的使用。因此需要確定目標用戶，根據(jù)用戶的特點來設計站點風格。 3. 組織站點結構 如果沒有考慮文檔在文件夾層次結構中的位置就開始創(chuàng)建文檔，最終可能會導致一個充滿了文件的臃腫混亂的文件夾，或導致相關的文件散布在許多名稱類似的文件夾中。 設置站點的常規(guī)做法是在本地磁盤上創(chuàng)建一個包含站點所有文件的文件夾（稱作本地站點），然后

6、在該文件夾中創(chuàng)建和編輯文檔。當準備好發(fā)布站點并允許公眾查看時，再將這些文件拷貝到 Web 服務器上。 組織站點結構時，應注意以下三個問題： （1）將站點分類，把相關的頁面放在同一文件夾中。（2）將圖像和聲音文件等項目放在指定的文件夾中，以便于文件的查找定位。例如，將所有圖像放在Images 文件夾中，當在頁面中插入圖像時，就可以方便的找到它。（3）本地站點和遠程 Web 站點應該具有完全相同的結構。如果使用 Dreamweaver MX創(chuàng)建本地站點，然后將全部內(nèi)容上傳到遠程站點，則 Dreamweaver MX確保在遠程站點中精確拷貝本地結構。 4. 設計外觀 頁面布局和設計保持一致非常重要。

7、如果不考慮板塊設計，瀏覽者會覺得你的網(wǎng)站內(nèi)容雜亂、無條理，先要考慮好自己設計的板塊與鏈接結構；根據(jù)所需的站點布局外觀，在實訓報告本上畫一個站點草圖，以便以后建立站點時可以按照它來操作。如圖1所示，是一個站點首頁的設計布局圖。5. 設計導航方案 設計站點時，應考慮如何使訪問者能夠方便的從一個區(qū)域移動到另一個區(qū)域。具體考慮以下幾點：明確“當前位置”；導航方便；提供與網(wǎng)站管理員的聯(lián)系方法。 6. 規(guī)劃和收集資料 完成了設計和布局后，就可以創(chuàng)建和收集需要的資源了。資源可以是圖像、文本或媒體等項目。在開始開發(fā)站點前，請確保收集了所有這些項目并做好了準備。否則，可能為找不到一幅圖像而中斷設計、開發(fā)過程。

8、LogoBanner簡單功能導航欄功能列表或局部導航主要內(nèi)容版權聲明七、實訓計劃表時間安排內(nèi)容安排第一天上午明確網(wǎng)站主題，應力求簡潔，要點明確，要以簡單的畫面和語言告訴瀏覽者，站點的主題。收集網(wǎng)頁素材，確定欄目，決定網(wǎng)站結構，通過小組討論，畫出網(wǎng)頁草圖。下午確定內(nèi)容安排，將每個頁面的草圖設計完成。相關的文字工作錄入完畢，定義好本地站點，將資料保存。第二天上午用Photoshop將網(wǎng)頁草圖實現(xiàn)，決定網(wǎng)站的配色方案，可以借鑒其他網(wǎng)站。對各個網(wǎng)頁可以分工實現(xiàn)。下午制作網(wǎng)頁中所需要的Flash。將在PS中完成的圖片切片，保存。第三天上午主頁的設計 主要是對版面進行合理布局，利用表格和層對版面進行合理定

9、位。通過文字圖形的空 間結合，表達出和諧與美。利用DW，設計網(wǎng)頁的排版方式，把各個切片放入DW中的表格。下午將相應的內(nèi)容，放入網(wǎng)頁的對應位置。其它頁面的制作，注意與主頁的和諧統(tǒng)一，并對各頁內(nèi)容進行充實；適當搜集一些網(wǎng)頁特效，做出適合自己站點的特效。第四天上午修改并完善已經(jīng)做好的網(wǎng)頁，同時完成網(wǎng)頁之間超級鏈接的設置。多頁面之間的鏈接，特別是關系十分密切的有上下文關系的頁面，設計時一定要含有向前和向后的按鈕，便于瀏覽者的訪問下午完善并測試網(wǎng)頁，準確無誤后，在網(wǎng)上申請免費空間，將制作好的網(wǎng)站在網(wǎng)上發(fā)布。第五天上午對于已完成網(wǎng)站，進一步進行修改，可以加入一些動態(tài)技術。（如留言板）小組每個成員寫好實驗報

10、告。下午申請免費或收費的空間，將作品上傳調試。書寫實訓報告。檢查每個小組的網(wǎng)頁，以及實驗報告，并打分。附表：評分標準1、內(nèi)容充實度：60% 2、動態(tài)技巧：20% 3、版面美工：10% 4、其他功能：10%八、考核辦法評價指標(分值)具體指標量化等級分值自評教師優(yōu)良中差網(wǎng)頁內(nèi)容(40)獲得的信息準確且完整5432信息的收集方法效率高10864網(wǎng)頁文字沒有語法和拼寫錯誤10864能找到合適的網(wǎng)頁素材并合理應用10864引用他人作品，是否注明出處5432技術處理(35)網(wǎng)頁布局整齊、合理10864網(wǎng)頁色彩協(xié)調、風格鮮明10864網(wǎng)頁鏈接正確、快捷10864具有較強的動態(tài)交互功能5432自主學習能力(

11、10)能獨立查找操作指導并完成操作5432能獨立上傳和下載網(wǎng)頁作品5432合作能力(10)明確自己的分工職責，圓滿完成任務5432主動與他人討論，尊重他人，幫助他人5432創(chuàng)新表現(xiàn)(5)網(wǎng)頁欄目設計及整體規(guī)劃有新意5432合計總得分實驗步驟1網(wǎng)站策劃1） 畫出網(wǎng)站結構草圖2）確定欄目確定網(wǎng)頁所需的欄目?？稍谙铝辛信e的欄目中選取。班級介紹、學習園地、通訊錄、作品展示、班級相冊、求職就業(yè)、班級新聞、好站分享、笑話心語、FLASH欣賞，音樂欣賞。（至少5個欄目）3）進行版面設計分為首頁設計和二級頁面的設計，清楚在頁面上分別要放置哪些內(nèi)容4） 搜集素材。如相關文字錄入，圖片素材，班級相片等等。二、制作

12、網(wǎng)頁1、建立站點。命名為webfile,網(wǎng)站的結構如下：2、進行主頁的設計。要求主頁中包含一個自己完成的Flash。3、進行其他頁面的設計。4、建立幾個頁面間的鏈接關系。三、測試網(wǎng)頁四、作業(yè)檢查網(wǎng)上教學資源【網(wǎng)頁素材】：網(wǎng)頁制作大寶庫 素材精品屋 黑馬網(wǎng)頁素材 遐思素材屋 http:/www.zzi.cc/sck/sck1.htm【網(wǎng)頁特效】：網(wǎng)頁特效集 網(wǎng)頁特效 網(wǎng)頁特效 七色風網(wǎng)頁特效 【技術文章】：太平洋學院 藍色理想 天極網(wǎng)-網(wǎng)頁陶吧 網(wǎng)頁設計師聯(lián)盟 七色鳥設計空間 有風的日子 中國站長站 閃客帝國 宇風多媒體 閃吧 網(wǎng)頁素材庫參考書籍網(wǎng)頁制作三劍客精彩實例詳解 作者：趙艷鐸 出版社：

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

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

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

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

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

18、味著我們可以將整個頁面分割開來，孤立地進行每一屏的設計。頁面的整體感是建立在形象的啟承關系上，盡管頁面被分割成幾屏來顯示，但圖像或文字的延續(xù)性應使瀏覽者得到完整、統(tǒng)一的視覺感受。設計者所要做的就是進行通盤考慮，例如：尋找對比中的和諧、建立同一的視覺識別等，來處理好每一屏與整個頁面的關系。 三、版式的基本類型 網(wǎng)頁版式的基本類型主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型十種。 四、iframe的用法解釋成“瀏覽器中的瀏覽器“很是恰當 用于設置文本或圖形的浮動圖文框或容器。BORDER設定圍繞圖文框的邊緣寬度FRAMEBODER設置邊框是不否為3維（0=否

19、，1=是）HEIGHT,WIDTH設質邊框的寬度和高度SCROLLING是否有滾動條（YES,NO,AUTO)SRC指定IFRAME調用的文件或圖片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)五、改變滾動條顏色。將以上代碼中的顏色代碼換成要改的顏色，放在前。六、滾動字幕的制作方法。水平滾動水平滾動字幕內(nèi)容垂直滾動垂直滾動字內(nèi)容各參數(shù)詳解：a)scrollAmount。它表示速度，值越大速度越快。如果沒有它，默認為6，建議設為13比較好。b)width和height，表示滾動區(qū)域的大小，width是寬度，height是高度。特別是在做垂直滾動的時候，一定要設height

20、的值。c)direction。表示滾動的方向，默認為從右向左：?？蛇x的值有right、down、up。滾動方向分別為：right表示，up表示，down表示。d)scrollDelay，這也是用來控制速度的，默認為90，值越大，速度越慢。通常scrollDelay是不需要設置的。e)behavior。用它來控制屬性，默認為循環(huán)滾動，可選的值有alternate(交替滾動)、slide(幻燈片效果，指的是滾動一次，然后停止?jié)L動) 七、圖片切換代碼。!-var imgUrl=new Array();var imgLink=new Array();var adNum=0;imgLink1=imgUr

21、l1=imgLink2=imgUrl2=imgLink3=imgUrl3=imgLink4=imgUrl4=imgLink5=imgUrl5=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 (document.all)imgInit.filters.revealTrans.play();function setTransition()if (document.a