網(wǎng)設(shè)計實訓報告

1、網(wǎng)頁設(shè)計實訓報告 Personal Page 張瑞希 課題名稱： 計算機網(wǎng)絡(luò)技術(shù) 專 業(yè)： S101 網(wǎng)絡(luò) 級： 班 01 學號： 魏洪名：姓 指導教師：雷學智 日 二十二 月 十二 一一年0二 錄 目一、課程設(shè)計目的 . 二、軟件、硬件的需求 . 三、使用的主要技術(shù) . 四、課程設(shè)計內(nèi)容 . 五、課程設(shè)計步驟 . 六、結(jié)論 . 七、結(jié)束語 . 成績評定標準考考核、評價項考核內(nèi)得實訓對實訓期間的出勤職業(yè)素質(zhì)、實訓態(tài)度教效率觀念、協(xié)作精況、實訓態(tài)度、職平時學2道德素分基本站點建立，網(wǎng)站的正確建立網(wǎng)站站點教覽無錯誤1分用、網(wǎng)站根據(jù)網(wǎng)站效果評定網(wǎng)站整體效果布局教訓2網(wǎng)站主要是針對制作網(wǎng)鏈接、媒體、樣

2、式、教板多媒體特效等作技過程中靈活應(yīng)用網(wǎng)分綜合應(yīng)用使2制作技表達能力文檔寫作實訓根據(jù)實訓設(shè)計文檔教力文檔的規(guī)范3實訓報告評定成分獲獎加有自主學習創(chuàng)新能力根據(jù)學生參加網(wǎng)頁設(shè)計大賽獲獎情況給予相應(yīng)加分 專家 力、綜合素質(zhì)（10分） 教師評語：合計 成績： 教師： 年 月 日 一、課程設(shè)計目的本學期，我們所學習的網(wǎng)站設(shè)計，主要由Dreamweaver、Photoshop、Flash三部組成。通過我建立的是我個人的網(wǎng)站，充分的將我個人的信息展現(xiàn)出來，也將加強我對這三種軟件使用的技能有了很大的提高。 利用Dreamweaver怎樣來布局網(wǎng)頁的格式、利用Photoshop處理圖片、利用Flash制作動畫。

3、將三者完美的結(jié)合制作網(wǎng)頁。 經(jīng)過半學期網(wǎng)頁設(shè)計學習，我基本掌握了設(shè)計網(wǎng)頁的步驟，懂得了怎樣運用設(shè)計網(wǎng)頁所需的各個軟件、以及各種技巧。在學習中我體會到了建立網(wǎng)頁的趣味，并且吸引了我，而建立一個屬于自己網(wǎng)頁也成了我學習的目標和動力，終于等到了這次機會，可以讓我證明自己所學的知識是有用的。所以我設(shè)計的網(wǎng)頁是一個自己主頁，可以發(fā)表自己喜歡的日志，可一上傳相片，還可以收藏自己愛聽的音樂，以這些功能為主建立一個自己空間與大家共同分享。 二、軟件、硬件的需求 Dreameweaver 2.1 2.1.1 硬件環(huán)境 處理器：Intel Pentium4、Intel Centrino、IntelXeon或Int

4、el Core Duo處理器 內(nèi)存：512MB RAM。 硬盤空間：至少需要1GB空閑的磁盤空間。 顯示器：1024×768分辨率的顯示器。 外部設(shè)備：DVD-ROM。 2.1.2 軟件環(huán)境 操作系統(tǒng):Microsoft Window XP(帶有Service Pack2)或Windows Vista Home Premium、Business、Ultimate或Enterprise(32位或64位版本)。 瀏覽器：Microsoft Internet Explorer 6.0以上，或者更高潘本的Netscape Navingator瀏覽器。 2.2 Photoshop 2.2.1

5、硬件環(huán)境 處理器：Intel Pentium4、Intel Centrino、IntelXeon或Intel Core Duo處理器 內(nèi)存：512MB RAM。 硬盤空間：至少需要1GB空閑的磁盤空間。 顯示器：1024×768分辨率的顯示器，16位顯卡。 外部設(shè)備：DVD-ROM。 2.2.2 軟件環(huán)境 操作系統(tǒng):Microsoft Window XP(帶有Service Pack2)或Windows Vista Home Premium、Business、Ultimate或Enterprise(32位或64位版本)。 瀏覽器：Microsoft Internet Explorer

6、 6.0以上，或者更高潘本的Netscape Navingator瀏覽器。 2.3 Flash 2.3.1硬件環(huán)境 處理器：Intel Pentium4、Intel Centrino、IntelXeon或Intel Core Duo處理器 內(nèi)存：512MB RAM。 硬盤空間：至少需要1GB空閑的磁盤空間。 顯示器：1024×768分辨率的顯示器，16位顯卡。 外部設(shè)備：DVD-ROM。 2.3.2 軟件環(huán)境 操作系統(tǒng):Microsoft Window XP(帶有Service Pack2)或Windows Vista Home Premium、Business、Ultimate或E

7、nterprise(32位或64位版本)。 瀏覽器：Microsoft Internet Explorer 6.0以上，或者更高潘本的Netscape Navingator瀏覽器。 三、使用的主要技術(shù)1：使用Dreameweaver網(wǎng)頁布局。 2：使用Dreameweaver插入圖片，插件，歌曲，動畫。 3：使用Photoshop處理圖片。 4：使用Photoshop制作logo。 5：使用Flash制作動畫。 四、課程設(shè)計內(nèi)容我制作的網(wǎng)頁主要是以韓國女星張瑞希為主題，詳細的介紹了她的個人信息，最新動態(tài)等可以全面了解她的內(nèi)容，在主頁上的導航條上我做了五個超級鏈接，分別是“主頁”，“個人資料”，

8、“最新動態(tài)”，“精彩寫真”，“影片賞析”，在主頁頁面上還有關(guān)于張瑞希曾出演的電視劇熱門圖片等相關(guān)鏈接五個不等，每個頁面的內(nèi)容都包含了大量的圖片及文字信息等。本學期最重要的組成部分“留言板”，也在我所制作的網(wǎng)頁中有所體現(xiàn)。 在“個人信息”頁面中主要介紹了張瑞希的基本資料與個人演藝經(jīng)歷，講述了她從小就踏上了演藝圈這條路；“最新動態(tài)”頁面中向大家展示了張瑞希的最新動態(tài)；“精彩寫真”頁面中主要是以圖片的方式向大家展現(xiàn)出來的，大量的精彩圖片以Flash的形式有所體現(xiàn)；“影片賞析”頁面中詳細的敘述了電視劇妻子的誘惑中女主角有了翻天覆地變化的第48集電視劇，同時也插入了相關(guān)視頻等。 五、課程設(shè)計步驟設(shè)計流程

9、圖 主頁 建立站點5.1 ）一個站點就是系列文件的組合，而這些文件通常位于一個特定的文件夾中，1（新建一個名為××的文盤根目錄下，在F所以在創(chuàng)建網(wǎng)站時就需要制指定該文件夾。件夾。 Dreamweaver“的“新建”選項組中單擊在啟動（2）Dreamweaver CS3，“開始頁”站點”，或者在主窗口中執(zhí)行“站點”菜單中的“新建站點”命令，即可打開站點定義向?qū)υ捒?。如圖一 ）切換“高級”選項卡，在左邊的“分類”列表框中選中“本地信息”選項，（3然后在右邊的“本地信息”選項組中設(shè)置以下選項。如圖二 在“站點名稱”文本框中輸入站點名稱，站點名稱可以是任意字符，但不能包“等等特殊

10、字符。、括“？、*/< 在“本地根文件夾”文本框右側(cè)丹迪文件夾按鈕，然后定位到事先創(chuàng)建的文件夾中 選中“啟動緩存”復選框，以便創(chuàng)建現(xiàn)有文件的緩存記錄，從而可以在移動、重命名或刪除文件時加速更新超級連接。 （4）單擊“確定”按鈕，創(chuàng)建完畢，系統(tǒng)自動返回主窗口，此時在“文件”面板中顯示出已創(chuàng)建的站點。 圖一 圖二 網(wǎng)頁布局5.2 5.2.1創(chuàng)建表格 執(zhí)行“插入記錄”菜單中的“表格”命令，或在“插入”欄的“常用”類別中單 擊按鈕，打開“表格”對話框，如圖三 圖三 5.2.2 布局視圖排版 使用布局視圖，首先必須切換到布局視圖中，其操作方法是：執(zhí)行“查看”菜單中的“表格模式”|“布局模式”命令，

11、此時“文檔”窗口的頂部會出現(xiàn)標有“布局模式”的條，然后即可創(chuàng)建布局表格及添加布局單元格。如圖四 圖四 處理圖片5.3 畫布顏色5.3.1 在“屬性”面板中，單擊“畫布”區(qū)拾色器，或執(zhí)行“修改”菜單中的“畫布”|“畫布顏色”命令，即可重新設(shè)置新的畫布顏色。如圖五 圖五 畫布大小5.3.2 在“屬性”面板中，單擊“畫布大小”按鈕或執(zhí)行“修改”菜單中的“畫布”|“畫布大小”命令，即可彈出“畫布大小”對話框。如圖六 圖六 圖像大小5.3.3 在“屬性”面板中，單擊“圖像大小”按鈕或執(zhí)行“修改”菜單中的“畫布”|“圖像大小”命令，即可彈出“圖像大小”對話框 在“像素尺寸”選項組中，選擇合適的度量單位（像

12、素、英寸、厘米）并輸入新的寬度和高度尺寸值，即可重新設(shè)置工作區(qū)的寬、高度數(shù)值。 圖七 圖像的儲存5.3.4 需要存儲的圖像時，直接執(zhí)行“文件”菜單中的“保存”命令，也可以按快捷鍵此時會彈出而且是第一次進行儲存，。如果這個圖像是剛剛新建的空白文件，Crtl+S“另存為”對話框，在對話框中選擇保存的路徑并進行輸入文件名，然后單擊“保存”按鈕，圖像文檔將自動以.png格式儲存。 插入歌曲5.4 在“常用”的模式下，單擊，單擊“插件”，彈出對話框如圖八，選擇指定歌曲，單擊“確定”既可。 圖八 插入圖片5.5 在“常用”的模式下，單擊，單擊“插件”，彈出對話框如圖九，選擇指定圖片，單擊“確定”既可。 圖

13、九 制作動畫5.6 制作文字動畫5.6.1 “文檔”命令，設(shè)置文檔的背景顏色。|（1）新建一個文件，執(zhí)行“修改” ）選中文字工具，在場景中輸入文字，并設(shè)置文字字體、顏色、大小。然后執(zhí)（2行“修改”菜單中的“分離”命令打散文字，可以看到文字并未灰色網(wǎng)格。 幀，在彈出的跨界菜單中選擇“插入空白關(guān)鍵幀”10”的第）右擊“圖層（31選項，這時場景中的文字將會消失。若讓文字能正常顯示又不影響實際的播放效果，可以單擊時間軸下面的“繪圖紙外觀”按鈕，此時文字有呈現(xiàn)出來。 （4）再次選中文字工具，在場景中輸入文字，并設(shè)置文字字體、顏色、大小。然后執(zhí)行“修改”菜單中的“分離”命令打散文字。 （5）使用同樣的方法

14、，分別在時間軸的第20、30、40幀處輸入文字，并將其打散。 （6）在時間軸的第1幀單擊，并在“屬性”面板中的“補間”下拉列表框中選擇“形狀”選項，以創(chuàng)建從第1幀到第10幀的變形過渡動畫。設(shè)置完畢后，可以看到在這兩幀之間產(chǎn)生了一條綠色的箭頭線。 六、結(jié)論在我看來網(wǎng)站設(shè)計就是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用Dreamweaver、Photoshop等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。簡單地說，網(wǎng)站是一種通訊工具，就像布告欄一樣，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)路服務(wù)。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)路服務(wù)。因此在網(wǎng)頁創(chuàng)作的時候就必須將網(wǎng)站的整日設(shè)計與網(wǎng)頁設(shè)計的相關(guān)原理緊密結(jié)合起來。網(wǎng)站設(shè)計是將策劃案中的內(nèi)容、網(wǎng)站的主題模式、以及結(jié)合自己的認識通過藝術(shù)的手法表現(xiàn)出來。 七、結(jié)束語通過一個學期的有關(guān)網(wǎng)站設(shè)計的學習我從根本上理解了什么是網(wǎng)站設(shè)計，也明白了怎么進行一個網(wǎng)站的設(shè)計及注意事項，如果自己想設(shè)計一個