網(wǎng)設(shè)計(jì)實(shí)訓(xùn)報(bào)告

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

2、作網(wǎng)站過(guò)程鏈接、媒體、樣式、模板、教師多媒體、特效等的綜合應(yīng)用技巧使用中靈活應(yīng)用網(wǎng)站制作技術(shù)（20 分）實(shí)訓(xùn)文檔根據(jù)實(shí)訓(xùn)設(shè)計(jì)文檔和實(shí)訓(xùn)教師表達(dá)能力、文檔寫作能力、報(bào)告評(píng)定成績(jī)文檔的規(guī)范性（ 30 分）獲獎(jiǎng)加分根據(jù)學(xué)生參加網(wǎng)頁(yè)設(shè)計(jì)大有關(guān)創(chuàng)新能力、自主學(xué)習(xí)能力、賽獲獎(jiǎng)情況給予相應(yīng)加分專家綜合素質(zhì)（ 10 分）合計(jì)教師評(píng)語(yǔ)：成績(jī)：教師：年月日一、課程設(shè)計(jì)目的本學(xué)期，我們所學(xué)習(xí)的網(wǎng)站設(shè)計(jì)，主要由 Dreamweaver、Photoshop、 Flash 三部組成。通過(guò)我建立的是我個(gè)人的網(wǎng)站， 充分的將我個(gè)人的信息展現(xiàn)出來(lái)， 也將加強(qiáng)我對(duì)這三種軟件使用的技能有了很大的提高。利用 Dreamweaver怎

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

4、Pentium4、 Intel Centrino、IntelXeon或 Intel Core Duo處理器內(nèi)存： 512MB RAM。硬盤空間：至少需要1GB空閑的磁盤空間。顯示器： 1024768 分辨率的顯示器。外部設(shè)備： DVD-ROM。軟件環(huán)境操作系統(tǒng) :MicrosoftWindowXP(帶有 Service Pack2) 或 WindowsVistaHomePremium、Business 、Ultimate或 Enterprise(32位或 64 位版本 ) 。瀏覽器： MicrosoftInternetExplorer6.0以 上， 或者 更高 潘本 的 NetscapeNav

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

6、InternetExplorer6.0以 上， 或者 更高 潘本 的NetscapeNavingator瀏覽器。2.3 Flash硬件環(huán)境處理器： Intel Pentium4、 Intel Centrino、IntelXeon或 Intel Core Duo處理器內(nèi)存： 512MB RAM。硬盤空間：至少需要1GB空閑的磁盤空間。顯示器： 1024768 分辨率的顯示器， 16 位顯卡。外部設(shè)備：DVD-ROM。軟件環(huán)境操作系統(tǒng) :MicrosoftWindowXP(帶有 Service Pack2) 或 WindowsVistaHomePremium、Business 、Ultimate或

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

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

9、步驟設(shè)計(jì)流程圖個(gè)人資最新動(dòng)妻子的誘主頁(yè)精彩寫婦產(chǎn)科的女影片賞人魚小姐留言板乞 丐王5.1 建立站點(diǎn)1）一個(gè)站點(diǎn)就是系列文件的組合，而這些文件通常位于一個(gè)特定的文件夾中，所以在創(chuàng)建網(wǎng)站時(shí)就需要制指定該文件夾。在 F 盤根目錄下，新建一個(gè)名為的文件夾。（ 2）啟動(dòng) Dreamweaver CS3，在“開(kāi)始頁(yè)”的“新建”選項(xiàng)組中單擊“Dreamweaver站點(diǎn)”，或者在主窗口中執(zhí)行“站點(diǎn)”菜單中的“新建站點(diǎn)”命令，即可打開(kāi)站點(diǎn)定義向?qū)?duì)話框。如圖一3）切換“高級(jí)”選項(xiàng)卡，在左邊的“分類”列表框中選中“本地信息”選項(xiàng)，然后在右邊的“本地信息”選項(xiàng)組中設(shè)置以下選項(xiàng)。如圖二在“站點(diǎn)名稱”文本框中輸入站點(diǎn)名

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

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

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

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

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