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

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

2、教師網(wǎng)站整體效 果、布局等（20）網(wǎng)站 制作 技巧 使用主要是針對制 作網(wǎng)站過程中 靈活應用網(wǎng)站 制作技術教師鏈接、媒體、 樣式、模板、 多媒體、特效 等的綜合應用（20 分）實訓文檔根據(jù)實訓設計 文檔和實訓報 告評定成績教師表達能力、文 檔寫作能力、 文檔的規(guī)范性（30 分）獲獎加分根據(jù)學生參加 網(wǎng)頁設計大賽有關創(chuàng)新能力、自 主學習能力、獲獎情況給予 相應加分專家綜合素質（10 分）合計教師評語:成績: 教師:、課程設計目的本學期，我們所學習的網(wǎng)站設計，主要由 Dreamweave、Photoshop、Flash三部組成。 通過我建立的是我個人的網(wǎng)站，充分的將我個人的信息展現(xiàn)出來， 也將加強

3、我對這三種軟件 使用的技能有了很大的提高。利用Dreamweaver怎樣來布局網(wǎng)頁的格式、利用 Photoshop處理圖片、利用Flash制 作動畫。將三者完美的結合制作網(wǎng)頁。經(jīng)過半學期網(wǎng)頁設計學習，我基本掌握了設計網(wǎng)頁的步驟， 懂得了怎樣運用設計網(wǎng)頁所 需的各個軟件、以及各種技巧。在學習中我體會到了建立網(wǎng)頁的趣味，并且吸引了我，而建立一個屬于自己網(wǎng)頁也成了我學習的目標和動力，終于等到了這次機會，可以讓我證明自己所學的知識是有用的。所以我設計的網(wǎng)頁是一個自己主頁， 可以發(fā)表自己喜歡的日志，可一 上傳相片，還可以收藏自己愛聽的音樂，以這些功能為主建立一個自己空間與大家共同分享。二、軟件、硬件的需

4、求2.1 Dreameweaver2.1.1 硬件環(huán)境處理器：In tel Pen tium4 、In tel Ce ntrino、In telXeo n 或 In tel Core Duo 處理器內(nèi)存：512MB RAM硬盤空間：至少需要1GB空閑的磁盤空間。顯示器：1024 X 768分辨率的顯示器。外部設備：DVD-ROM2.1.2 軟件環(huán)境操作系統(tǒng):Microsoft Window XP（ 帶有 Service Pack2） 或 Windows Vista Home Premium Business、Ultimate 或 Enterprise（32 位或 64 位版本）。瀏覽器：Mic

5、rosoft In ternet Explorer 6.0以上，或者更高潘本的 NetscapeNavingator 瀏覽器。2.2 Photoshop2.2.1 硬件環(huán)境處理器：In tel Pen tium4 、In tel Ce ntrino、In telXeo n 或 In tel Core Duo 處理器內(nèi)存：512MB RAM硬盤空間：至少需要1GB空閑的磁盤空間。顯示器：1024 X 768分辨率的顯示器，16位顯卡。外部設備：DVD-ROM2.2.2 軟件環(huán)境操作系統(tǒng):Microsoft Window XP（帶有 Service Pack2） 或 Windows Vista H

6、omePremium Business、Ultimate 或 Enterprise（32 位或 64 位版本）。瀏覽器：Microsoft In ternet Explorer 6.0以上，或者更高潘本的NetscapeNavingator 瀏覽器。2.3 Flash硬件環(huán)境處理器：In tel Pen tium4 、In tel Ce ntrino、In telXeo n 或 In tel Core Duo 處理器內(nèi)存：512MB RAM硬盤空間：至少需要1GB空閑的磁盤空間。顯示器：1024 X 768分辨率的顯示器，16位顯卡。外部設備：DVD-ROM2.3.2 軟件環(huán)境操作系統(tǒng):Mic

7、rosoft Window XP（帶有 Service Pack2） 或 Windows Vista HomePremium Business、Ultimate 或 Enterprise（32 位或 64 位版本）。瀏覽器：Microsoft In ternet Explorer 6.0以上，或者更高潘本的NetscapeNavingator 瀏覽器。三、使用的主要技術1:使用 Dreameweaver網(wǎng)頁布局。2：使用Dreameweaver插入圖片，插件，歌曲，動畫。3:使用Photoshop處理圖片。4：使用 Photoshop 制作 logo。5:使用Flash制作動畫。四、課程設計內(nèi)

8、容我制作的網(wǎng)頁主要是以韓國女星張瑞希為主題，詳細的介紹了她的個人信息，最新動態(tài)等可以全面了解她的內(nèi)容，在主頁上的導航條上我做了五個超級鏈接，分別是“主頁”，“個人資料”，“最新動態(tài)”，“精彩寫真”，“影片賞析”，在主頁頁面上還有關于張瑞希曾出演的 電視劇熱門圖片等相關鏈接五個不等，每個頁面的內(nèi)容都包含了大量的圖片及文字信息等。 本學期最重要的組成部分“留言板”，也在我所制作的網(wǎng)頁中有所體現(xiàn)。在“個人信息”頁面中主要介紹了張瑞希的基本資料與個人演藝經(jīng)歷， 講述了她從小就 踏上了演藝圈這條路；“最新動態(tài)”頁面中向大家展示了張瑞希的最新動態(tài)；“精彩寫真”頁 面中主要是以圖片的方式向大家展現(xiàn)出來的，大

9、量的精彩圖片以Flash的形式有所體現(xiàn)；“影 片賞析”頁面中詳細的敘述了電視劇妻子的誘惑中女主角有了翻天覆地變化的第48集電視劇，同時也插入了相關視頻等。五、課程設計步驟設計流程圖主頁個人 最新 精彩 影片 留言5.1建立站點(1) 一個站點就是系列文件的組合， 而這些文件通常位于一個特定的文件夾中，所以在 創(chuàng)建網(wǎng)站時就需要制指定該文件夾。在 F盤根目錄下，新建一個名為XX的文件夾。(2) 啟動Dreamweaver CS3在“開始頁”的“新建”選項組中單擊“ Dreamweaver站 點”，或者在主窗口中執(zhí)行“站點”菜單中的“新建站點”命令，即可打開站點定義向導對 話框。如圖一(3) 切換“

10、高級”選項卡，在左邊的“分類”列表框中選中“本地信息”選項，然后在 右邊的“本地信息”選項組中設置以下選項。如圖二 在“站點名稱”文本框中輸入站點名稱，站點名稱可以是任意字符，但不能包括“？、 *、/、 “等等特殊字符。 在“本地根文件夾”文本框右側丹迪文件夾按鈕，然后定位到事先創(chuàng)建的文件夾中 選中“啟動緩存”復選框，以便創(chuàng)建現(xiàn)有文件的緩存記錄，從而可以在移動、重命名 或刪除文件時加速更新超級連接。(4) 單擊“確定”按鈕，創(chuàng)建完畢，系統(tǒng)自動返回主窗口，此時在“文件”面板中顯示 出已創(chuàng)建的站點。圖一圖二5.2網(wǎng)頁布局創(chuàng)建表格執(zhí)行“插入記錄”菜單中的“表格”命令，或在“插入”欄的“常用”類別中單

11、擊 岡按鈕，打開“表格”對話框，如圖三圖三布局視圖排版使用布局視圖，首先必須切換到布局視圖中，其操作方法是：執(zhí)行“查看”菜單中的“表 格模式” | “布局模式”命令，此時“文檔”窗口的頂部會出現(xiàn)標有“布局模式”的條，然后即可創(chuàng)建布局表格及添加布局單元格。如圖四圖四5.3處理圖片5.3.1 畫布顏色在“屬性”面板中，單擊“畫布”區(qū)拾色器，或執(zhí)行“修改”菜單中的“畫布”I “畫布顏色”命令，即可重新設置新的畫布顏色。如圖五冬五.3.2 畫布大小| “畫布在“屬性”面板中，單擊“畫布大小”按鈕或執(zhí)行“修改”菜單中的“畫布”命令，即可彈出“畫布大小”對話框。如圖六圖六.3.3 圖像大小| “圖像在“屬

12、性”面板中，單擊“圖像大小”按鈕或執(zhí)行“修改”菜單中的“畫布”命令，即可彈出“圖像大小”對話框在“像素尺寸”選項組中，選擇合適的度量單位（像素、英寸、厘米）并輸入新的寬度 和高度尺寸值，即可重新設置工作區(qū)的寬、高度數(shù)值。関稼大小博盂E寸33E像素* "1丁V 取立方回酬重新職祥®rar頁面馭肖圖七34圖像的儲存需要存儲的圖像時，直接執(zhí)行“文件”菜單中的“保存”命令，也可以按快捷鍵Crtl+S。如果這個圖像是剛剛新建的空白文件，而且是第一次進行儲存，此時會彈出“另存為”對話框，在對話框中選擇保存的路徑并進行輸入文件名，然后單擊“保存”按鈕，圖像文檔將自 動以.png格式儲存。

13、4插入歌曲在“常用”的模式下，單擊靈，單擊“插件”，彈出對話框如圖八，選擇指定歌曲,單擊“確定”既可圖八5.5插入圖片在“常用”的模式下，單擊 腥IT，單擊“插件”，彈出對話框如圖九，選擇指定圖片,單擊“確定”既可圖九5.6制作動畫5.6.1 制作文字動畫（1）新建一個文件，執(zhí)行“修改” | “文檔”命令，設置文檔的背景顏色。（2）選中文字工具，在場景中輸入文字，并設置文字字體、顏色、大小。然后執(zhí)行“修 改”菜單中的“分離”命令打散文字，可以看到文字并未灰色網(wǎng)格。（3）右擊“圖層 T的第10幀，在彈出的跨界菜單中選擇“插入空白關鍵幀”選項，這時場景中的文字將會消失。若讓文字能正常顯示又不影響實

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