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

1、網(wǎng)頁設(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)教師：雷學(xué)智二 0一一年十二月二十二日目錄一、課程設(shè)計(jì)目的1二、軟件、硬件的需求1三、使用的主要技術(shù)2四、課程設(shè)計(jì)內(nèi)容3五、課程設(shè)計(jì)步驟3六、結(jié)論10七、結(jié)束語10成績評(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ù)覽無錯(cuò)誤（10 分）、實(shí)網(wǎng)站效果根據(jù)網(wǎng)站效果 評(píng)定成績教師網(wǎng)站整體效果、布局等（

2、20）訓(xùn)評(píng)網(wǎng)站制作主要是 針對(duì)制作網(wǎng)站 過程鏈接、媒體、樣式、模板、多價(jià)教師媒體、特效等的 綜合應(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)定成績文檔的 規(guī)范性（30 分）獲獎(jiǎng)加分根據(jù)學(xué)生參加網(wǎng) 頁設(shè)計(jì) 大有關(guān)創(chuàng)新能力、自主學(xué) 習(xí)能力、賽獲獎(jiǎng) 情況給予相應(yīng)加分專家綜合素 質(zhì)（10 分）合計(jì)教師評(píng)語：成績：教師：年月日一、課程設(shè)計(jì)目的本學(xué)期，我們所學(xué)習(xí)的網(wǎng)站設(shè)計(jì)，主要由 Dreamweaver、Photoshop、Flash 三部組成。通過我建立的是我個(gè)人的網(wǎng)站，充分的將我個(gè)人的信息展 現(xiàn)出來，也將加強(qiáng)我對(duì)這三種軟件使

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

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

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

6、ate 或 Enterprise(32位或 64 位版本 )。瀏覽器：Microsoft Internet Explorer 6.0 以上，或者更高潘本的 Netscape Navingator 瀏覽器。2.3 Flash2.3.1 硬件環(huán)境處理器：Intel Pentium4、Intel Centrino、IntelXeon 或 Intel Core Duo 處理器內(nèi)存：512MB RAM 。硬盤空間：至少需要1GB 空閑的磁盤空間。顯示器：1024768分辨率的 顯示器，16 位顯卡。外部設(shè)備：DVD-ROM 。2.3.2軟件環(huán)境操作系統(tǒng):MicrosoftWindowXP(帶有 Serv

7、icePack2)或 WindowsVistaHomePremium、Business、Ultimate 或 Enterprise(32位或 64 位版本 )。瀏覽器：Microsoft Internet Explorer 6.0 以上，或者更高潘本的 Netscape Navingator 瀏覽器。三、使用的主要技術(shù)1：使用Dreameweaver網(wǎng)頁布局。2：使用Dreameweaver插入圖片，插件，歌曲，動(dòng)畫。3：使用Photoshop處理圖片。4：使用Photoshop制作 logo。5：使用Flash 制作動(dòng)畫。四、課程設(shè)計(jì)內(nèi)容我制作的網(wǎng) 頁主要是以 韓國女星張瑞希為主題，詳細(xì)的介

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

9、以 Flash 的形式有所體 現(xiàn)；“影片賞析 ”頁面中 詳細(xì)的敘述了 電視劇妻子的誘惑中女主角有了翻天覆地 變化的第 48 集電視劇，同時(shí)也插入了相關(guān) 視頻等。五、課程設(shè)計(jì)步驟設(shè)計(jì)流程圖主頁個(gè)人資料最新動(dòng)態(tài)妻子的誘惑精彩寫真婦產(chǎn)科的女醫(yī)生影片賞析人魚小姐留言板乞丐王子5.1 建立站點(diǎn)（1）一個(gè)站點(diǎn)就是系列文件的 組合，而這些文件通常位于一個(gè)特定的文件夾中，所以在創(chuàng)建網(wǎng)站時(shí)就需要制指定 該文件夾 。在F 盤根目錄下，新建一個(gè)名為的文件夾。（2）啟動(dòng) Dreamweaver CS3，在“開始頁 ”的 “新建 ”選項(xiàng)組 中單擊 “Dreamweaver站點(diǎn) ”，或者在主窗口中 執(zhí)行“站點(diǎn) ”菜 單中

10、的 “新建站點(diǎn) ”命令，即可打開站點(diǎn)定 義向?qū)?duì)話框。如圖一（3）切換“高級(jí)”選項(xiàng)卡，在左邊的 “分 類”列表框中 選中“本地信息 ”選項(xiàng) ，然后在右邊的“本地信息 ”選項(xiàng)組 中設(shè)置以下選項(xiàng)。如圖二 在“站點(diǎn)名稱 ”文本框中 輸入站點(diǎn)名稱，站點(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)建的站

11、點(diǎn)。圖一圖二5.2 網(wǎng)頁布局5.2.1 創(chuàng)建表格執(zhí)行 “插入 記錄 ”菜單 中的 “表格 ”命令，或在“插入 ”欄的“常用 ”類別 中單擊按鈕，打開“表格 ”對(duì)話框，如圖三圖三5.2.2 布局視圖排版使用布局 視圖，首先必須切換到布局視圖中，其操作方法是：執(zhí)行“查看 ”菜單 中的 “表格模式 ”|布“局模式 ”命令，此時(shí)“文檔 ”窗口的 頂部會(huì)出現(xiàn)標(biāo)有“布局模式 ”的條，然后即可 創(chuàng)建布局表格及添加布局 單元格。如圖四圖四5.3 處理圖片5.3.1 畫布顏色在“屬性 ”面板中，單擊 “畫布 ”區(qū)拾色器，或執(zhí) 行“修改 ”菜單中的 “畫布 ”|畫“布顏色”命令，即可重新 設(shè)置新的畫布 顏色。如圖

12、五圖五5.3.2 畫布大小在“屬性 ”面板中，單擊 “畫布大小 ”按鈕或 執(zhí)行“修改 ”菜單 中的 “畫布 ”|畫“布大小 ”命令，即可彈出 “畫布大小 ”對(duì)話 框。如圖六圖六5.3.3 圖像大小在“屬性 ”面板中，單擊 “圖像大小 ”按鈕或 執(zhí)行“修改 ”菜單 中的 “畫布 ”|圖“像大小 ”命令，即可彈出“圖像大小 ”對(duì)話 框在“像素尺寸 ”選項(xiàng)組 中，選擇合適的度量 單位（像素、英寸、厘米）并輸入新的寬度和高度尺寸值，即可重新設(shè)置工作區(qū)的 寬、高度數(shù)值。圖七5.3.4 圖像的儲(chǔ)存需要存儲(chǔ)的圖像時(shí)，直接執(zhí)行“文件 ”菜 單中的 “保存 ”命令，也可以按快捷 鍵 Crtl+S。如果這個(gè)圖像是

13、剛剛新建的空白文件，而且是第一次 進(jìn)行儲(chǔ)存，此時(shí)會(huì)彈出“另存為”對(duì)話框，在對(duì)話框中選擇保存的路徑并 進(jìn)行輸入文件名，然后單擊 “保存 ”按 鈕，圖像文檔將自 動(dòng)以.png 格式儲(chǔ)存。5.4 插入歌曲在 “常用 ”的模式下，單擊，單擊 “插件 ”，彈出 對(duì)話框如圖八，選擇指定歌曲，單擊 “確定 ”既可。圖八5.5 插入圖片在 “常用 ”的模式下，單擊，單擊 “插件 ”，彈 出對(duì)話框如圖九，選擇指定圖片，單擊 “確定 ”既可。圖九5.6 制作動(dòng)畫5.6.1 制作文字 動(dòng)畫（1）新建一個(gè)文件，執(zhí)行 “修改 ”|文“檔 ”命令，設(shè)置文檔的背景 顏色。（2）選中文字工具，在場景中輸入文字，并設(shè)置文字字體

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

15、下拉列表框中 選擇 “形狀 ”選項(xiàng) ，以創(chuàng)建從第 1 幀到第 10 幀的變形過渡動(dòng)畫。設(shè)置完畢后，可以看到在這兩幀之間產(chǎn)生了一條綠色的箭頭線。六、結(jié)論在我看來網(wǎng)站 設(shè)計(jì)就是指在因特網(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)作的時(shí)候就必須將網(wǎng)站的整日 設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)的相關(guān)原理 緊密結(jié)合起來。網(wǎng)站設(shè)計(jì)是將策劃案中的內(nèi)容、網(wǎng)站的主 題模式、以及結(jié)合自己的 認(rèn)識(shí)通過藝術(shù)的手法表 現(xiàn)出來。七、結(jié)束語通過一個(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è)網(wǎng)站首先得 創(chuàng)建一個(gè)自己的站點(diǎn)，并選擇在本地編輯好網(wǎng)站后再上 傳到服務(wù)器，一切準(zhǔn)備就緒后就可以 設(shè)計(jì)自己的網(wǎng)站了。設(shè)計(jì)一個(gè)好的網(wǎng)站沒有耐心是不行的，因?yàn)樗泻玫乃夭?，好?設(shè)計(jì)思路和自己