第一篇：平面廣告項目設計與制作綜合實訓

平面廣告項目設計與制作綜合實訓 項目1 標志設計

1.1 標志設計簡介

1.2 教學活動 旅行社標志設計

1.3 體驗活動 企業標志設計 項目2 UI設計

2.1 UI設計簡介

2.2 教學活動 手機操作界面設計

2.3 體驗活動 手機音樂界面設計 項目3 卡片設計

3.1 卡片設計簡介

3.2 教學活動 普通會員卡設計

3.3 體驗活動 VIP會員卡設計 項目4 名片設計

4.1 名片設計簡介

4.2 教學活動 企業名片設計

4.3 體驗活動 個人名片設計 項目5 信封設計

5.1 信封設計簡介

5.2 教學活動 企業信封/信紙設計

5.3 體驗活動 商業信封的設計 項目6 盤面設計 6.1 盤面設計簡介

6.2 教學活動 演出光盤及封套設計

6.3 體驗活動 房地產企業宣傳光盤盤面設計 項目7 DM廣告設計

7.1 DM設計簡介

7.2 教學活動 產品宣傳DM設計

7.3 體驗活動 護膚品宣傳DM設計 項目8 海報設計

8.1 海報簡介

8.2 教學活動 促銷海報設計

8.3 體驗活動 高爾夫球場宣傳海報設計 項目9 包裝設計

9.1 包裝設計簡介

9.2 教學活動 食品包裝設計

9.3 體驗活動 茶品包裝設計 項目10 書籍裝幀設計

10.1 書籍裝幀設計簡介

10.2 教學活動 書籍封面設計

10.3 體驗活動 雜志封面設計 項目11 字體設計

11.1 字體設計簡介

11.2 教學活動 火焰文字設計 11.3 體驗活動 制作變形文字 項目12 宣傳畫冊設計

12.1 宣傳畫冊設計簡介

12.2 教學活動 產品宣傳畫冊設計

12.3 體驗活動 旅游畫冊設計 項目13 展板設計

13.1 展板設計簡介

13.2 教學活動 醫療展板設計

13.3 體驗活動 人物宣傳展板設計 項目14 數碼照片處理

14.1 數碼照片處理簡介

14.2 教學活動 將照片處理為個性電影海報

14.3 體驗活動 調整照片夢幻紫色調 項目15 易拉寶設計

15.1 易拉寶設計簡介

15.2 教學活動 易拉寶的設計

15.3 體驗活動 打印機宣傳展架設計 項目16 折頁設計

16.1 折頁設計簡介

16.2 教學活動 產品宣傳三折頁設計

16.3 體驗活動 活動三折頁設計 項目17 招貼廣告設計 17.1 招貼廣告設計簡介

17.2 教學活動 戒指招貼廣告設計

17.3 體驗活動 皮鞋招貼廣告設計

第二篇：《網頁設計與制作》綜合實訓

《網頁制作》期末大作業

一、概述：

要求設計并制作一個表達某個主題的網站，通過網站的制作，綜合運用本課程各單元所學的知識。網站的內容不能是一些素材如圖片、音樂等的堆積，必須有鮮明的主題。可以從網上下載部分資料，但不能超過整個內容的30%，更不要指望從網上下一個完整的網站應付老師。總的頁數應超過10頁（一個包含主題內容的htm文件算一頁）。請同學們注意不要下載相同的資料，如果出現網頁內容雷同，雙方都要扣分，嚴重的必須重做。

二、網站內容：

自行選擇如下內容：科普、科幻知識；公益形象宣傳；大、中、小學教學用動畫形象；奧林匹克體育；環境保護；戰爭與和平；求職；校園生活；誠信、傳統美德；交通安全；衛生與健康；愛心；教育；新青年；管理；實用工具等。自己確定一個主題，整個網站要突出主題，信息分類合理，導航清晰。要求必須有自己創作的內容，這些原創內容可以是文字、圖片、動畫等。

三、版面及格式：

l、要求圖文并茂，顏色搭配合理，但是圖片及聲音文件不要太大。如果能加入自己創作的動態元素(如Flash，Gif動畫等)將獲得加分。希望充分發揮自己的創作能力。

2、要求每個網頁都使用表格布局。

3、要求網頁中插入有Web組件，包括懸停按鈕、滾動字幕、橫幅廣告管理器等。

4、導航設計簡潔明了，不能有“死鏈接”，要保證能夠在網絡上瀏覽。

5、自創內容越多越好，得分越高。

四、遞交方式：

1、每個同學以自己的學號姓名建一個文件夾，上交時間為18周2、所做網頁的首頁文件名必須為index.htm3、所有文件名和目錄名全部使用英文字母和數字，不得使用漢字或全角符號，否則，網絡將出現死鏈接。

4、遞交時必須把網頁中所有用到的圖片、聲音、動畫等都一起上傳到服務器。網頁的總容量一般不要大于3MB5、建議將網頁中的素材分類，建立不同的子目錄存放。

五、網頁評分標準:

整個網頁的評分強調“自己的創意”，不管主題是什么，也不論是哪一個欄目的內容，如果創意獨特，有自己鮮明的個性、觀點，得分較高。

1、主題鮮明，有關主題的內容豐富（30分）

2、原創內容豐富，能體現自己的想法，文字流利通順（30分）

3、版面布局合理，整理效果美觀（20分）

4、其他內容如友情鏈接、相關資料等（5分）

5、插入的圖片等素材恰當、美觀（5分）

6、技術含量（使用了各種效果、技術等）（10分）

六、網頁制作特別注意事項：

1、網頁文件名最好全部用英文字母或數字（不能包含漢字）；

2、整理圖片和其他素材；

3、在與網頁主文件（index.htm)同級的目錄中建立子目錄image(圖片）、wave(聲音）、?等，將取得的素材按類保存好，在制作網頁（即編輯HTM文件）時，必須從這些目錄中插入素材，以保證顯示正確，不能從其他目錄插入，提示另外保存圖片時，不要改變保存目錄，直接按[確定]即可。同學們要改變那種在編輯網頁時到處找圖片，找到了就往HTML文件中插的壞習慣(也不管這個文件在哪里）；

4、作好筆記將對后期調試非常有利，從開始規劃起就記錄目錄名、文件名的分配，以便調試時節省時間。

第三篇：《網頁設計與制作綜合實訓》實訓指導書

武漢商貿職業學院 信息工程學院

《網頁設計與制作綜合實訓》實訓指導書

軟件教研室 2013年9月 《網頁設計與制作綜合實訓》實訓指導書

目錄

實訓目的...........................................................................................................................................1 實訓內容及要求...............................................................................................................................1 實訓性質、實訓地點、實習時間安排，適用專業班級...............................................................2 實訓一 站點的規劃設計..................................................................................................................3 實訓二 設計案例網站LOGO.........................................................................................................4 實訓三 設計案例網站BANNER...................................................................................................5 實訓四 設計案例網站導航條.........................................................................................................6 實訓五 設計案例網站網頁內容和網頁版權聲明.........................................................................7 實訓六 對案例網站版面切圖.........................................................................................................8 實訓七 制作完成案例網站首頁.....................................................................................................9 實訓八 案例網站模板的制作.......................................................................................................10 實訓九 案例網頁超級鏈接的添加...............................................................................................11 實訓十 案例網站加入動態元素...................................................................................................12

第2頁 《網頁設計與制作綜合實訓》實訓指導書

實訓目的

在前一階段，學生完成了《網頁設計與制作》、《圖形圖像處理》、《CSS設計》、等專業課程的學習，為了讓學生將前期的專業課程學以致用，融會貫通，特開設本系統化實訓。

本次綜合實訓基于學生的興趣，選取專業建設網站開發為主題，基于網頁開發的流程，把實訓周期當做是一個項目的開發周期，嚴格把握項目進度，最終要求學生完成網站的前臺設計。

通過本次實訓希望達到以下目的：

1.熟悉和掌握Dreamweaver軟件的使用方法； 2.熟悉和掌握PS軟件的使用方法； 3.熟悉FLASH軟件應用的方法； 4.學會使用CSS+DIV做網頁布局； 5.熟練掌握站點的規劃與設計

實訓內容及要求

本實訓的內容簡述： 1.網站首頁（1）專業概況（2）專業建設規劃

（3）展示最新動態文章標題（8條）（4）專業建設成效的文章標題（8項）（5）專業建設特色文章標題（8項）2.專業概況

點擊項目概況，顯示相關文本 3.專業建設規劃

點擊項目申報書菜單，顯示flashpaper格式的申報書內容 4.專業建設特色

顯示專業建設特色的文章標題列表，點擊標題進入內容 5.專業建設動態

顯示專業建設動態的標題列表，點擊標題進入成果詳細展示 6.專業建設成效

顯示專業建設成效的標題列表，點擊標題進入成果詳細展示。本實訓的要求：

1.應用css和html（div+css）技術完成至少4個頁面，其中必須包括網站主頁面設計、欄目頁設計、管理員管理登陸頁面、管理員登錄以后的頁面。2.顯示環境：網頁視覺效果應采用Internet Explorer 6.0以上版本瀏覽器，顯示分辨率以1024×768狀態為準。

第1頁 《網頁設計與制作綜合實訓》實訓指導書

3.網頁規模：網頁總量原則上不應超過10M，且必須要是不連接互聯網就可以進行展示的作品。

4.網站結構：要求結構清晰，文件有清晰的分類，比如圖片都放在images文件夾下等。

5.要求頁面美觀大方、顏色搭配協調；

6.作品留存，下學期或下一階段繼續完善、開發。

實訓性質、實訓地點、實習時間安排，適用專業班級

該實訓為校內模擬實訓。根據高等教育教學大綱規定和學院教學計劃安排及培養學生職業技能的要求，軟微班的學生于第一學期進行為期4周的校內實訓，項目名稱為《網頁設計與制作綜合實訓》。

實訓時間：2013-2014學年第一學期第15-18周 實訓班級：軟件1301班、軟件1302班 實訓地點： 學校機房

第2頁 《網頁設計與制作綜合實訓》實訓指導書

實訓一 站點的規劃設計

1、學時分配：6學時

2、實訓目的

（1）熟悉Dreamweaver軟件的界面布局和工作環境。（2）熟練掌握本地站點創建和管理的方法。

3、實訓任務

（1）創建一個靜態網站站點。（2）從網絡上收集網頁素材。

（3）根據提供的網站策劃方案范本，結合自己要制作完成的網站，開始著手書寫網站策劃方案。

4、實訓內容

（1）打開Dreamweaver 軟件，熟悉軟件的界面布局和工作面板的擺放，能夠熟練使用Dreamweaver 軟件。

（2）在本機D盤上創建文件夾“home”，在“home”文件夾下根據網站的規劃設計，創建相關的文件夾，用來放置不同的文件。

（3）在Dreamweaver 軟件中，將D盤 “home” 文件夾定義成靜態網站站點，站點名稱任意。

5、實訓要求

（1）由指導教師講清實訓的基本原理，要求，實訓目的。

（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養學生自學的能力。

第3頁 《網頁設計與制作綜合實訓》實訓指導書

實訓二 設計案例網站LOGO

1、學時分配：6學時

2、實訓目的

（1）熟悉Photoshop軟件的界面布局和工作環境。（2）熟練掌握網站LOGO的設計方法。（3）創建項目案例網站的LOGO。

3、實訓任務

（1）掌握Photoshop軟件文字工具工具的使用方法。（2）查看網絡上相關網站LOGO。

（3）根據小組討論結果，實際動手完成網站的LOGO。

4、實訓內容

（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，能夠熟練使用Photoshop軟件。

（2）新建Photoshop文件，大小為980*600像素，分辨率為72像素/英寸，顏色模式為RGB顏色8位，背景顏色為白色或者透明都可以。（3）使用文字工具，輸入MZD三個字母，設置文字屬性。

（4）柵格化文字圖層，將柵格化后的圖層上的3個字母分別移動到不同的3個圖層上。

（5）分別對3個字母進行藝術化處理。（6）輸入其他的文字。

（7）為輸入的文字圖層設置“混合選項”。（8）保存文件。

5、實訓要求

（1）由指導教師講清實訓的基本原理，要求，實訓目的。

（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養學生自學的能力。

第4頁 《網頁設計與制作綜合實訓》實訓指導書

實訓三 設計案例網站BANNER

1、學時分配：6學時

2、實訓目的

（1）熟悉Photoshop軟件的使用方法。（2）熟練掌握網站BANNER的設計方法。（3）創建項目案例網站的BANNER。

3、實訓任務

（1）掌握Photoshop軟件漸變工具的使用方法。（2）查看網絡上相關網站BANNER。

（3）根據小組討論結果，實際動手完成網站的BANNER。

4、實訓內容

（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。

（2）打開上次保存好的Photoshop源文件，在上次完成的LOGO基礎上，準備開始制作本次的BANNER。

（3）根據網站策劃方案里的主色調和主題的要求，開始設計網站的BANNER，首先去選擇一張適合的圖片。

（4）使用矩形選框工具選擇要使用的圖片部分，圖片的其他部分刪除。（5）根據設計要求，在BANNER上添加其他元素，比如文字或者其他能夠表達網站主題的圖片。

（6）使用魔術棒工具將要放置到BANNER上的圖片的某一部分扣出來，然后設置適合的大小，旋轉好方向后放好。

（7）設置圖層的樣式，以及文字的混合選項等。（8）保存文件。

5、實訓要求

（1）由指導教師講清實訓的基本原理，要求，實訓目的。

（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養學生自學的能力。

第5頁 《網頁設計與制作綜合實訓》實訓指導書

實訓四 設計案例網站導航條

1、學時分配：6學時

2、實訓目的

（1）熟悉Photoshop軟件的使用方法。（2）熟練掌握網站導航條的設計方法。（3）創建項目案例網站的導航條。

3、實訓任務

（1）掌握Photoshop軟件圓角矩形工具的使用方法。（2）查看網絡上相關網站導航條。

（3）根據小組討論結果，實際動手完成網站的導航條。

4、實訓內容

（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。

（2）查看網上其它網站的導航條，了解導航條的基本情況。

（3）打開上次保存好的Photoshop源文件，在上次完成的基礎上，準備開始制作本次的導航條。

（4）根據網站策劃方案里的主色調和主題的要求，開始設計網站的導航條，首先去選擇一張適合的圖片。

（5）使用圓角矩形工具繪制一個圓角矩形，顏色與大小要與整個網站的風格與主題相一致。

（6）選中繪制好的圓角矩形，使用漸變工具，繪制立體感導航條背景。（7）輸入導航條文字，輸入導航條文字間的豎線間隔。（8）設置文字和豎線的混合選項，增加立體感。（9）保存文件。

5、實訓要求

（1）由指導教師講清實訓的基本原理，要求，實訓目的。

（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養學生自學的能力。

第6頁 《網頁設計與制作綜合實訓》實訓指導書

實訓五 設計案例網站網頁內容和網頁版權聲明

1、學時分配：6學時

2、實訓目的

（1）熟悉Photoshop軟件的使用方法。

（2）熟練掌握網站網頁內容和網頁版權聲明的設計方法。（3）創建項目案例網站的網頁內容和網頁版權聲明。

3、實訓任務

（1）掌握Photoshop軟件多種工具結合的使用方法。（2）查看網絡上相關網站網頁。

（3）根據小組討論結果，實際動手完成網站的網頁內容和網頁版權聲明。

4、實訓內容

（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。

（2）查看網上其它網站的網頁，了解網頁對象分布的基本情況。

（3）打開上次保存好的Photoshop源文件，在上次完成的基礎上，準備開始制作本次的網頁內容和網頁版權聲明。

（4）根據網站策劃方案里的主色調和主題的要求，選擇灰色與深藍色作為邊框顏色，網頁內容標題文字顏色為黑色。

（5）以制作通知公告為例，使用文字工具輸入文字“通知公告”，文字大小為14號，文字顏色為黑色，文字字體為“宋體或者黑體”，根據自己的理解，可以為文字增加“混合選項”，設置文字效果。（6）新建圖層，選擇“線條工具”，線條粗細為1 像素，顏色為黑色或者深藍色都可以，繪制一條直線。

（7）新建圖層，選擇“圓角矩形工具”，半徑為50 像素，顏色為黑色或者深藍色。

（8）新建圖層，選擇“文字工具”，在剛才繪制好的圓角矩形上輸入“More”，文字大小是12，顏色為白色，字體為“Arial”。

（9）使用同樣的辦法可以制作完成其他網頁內容部分的標題。（10）保存文件。

5、實訓要求

（1）由指導教師講清實訓的基本原理，要求，實訓目的。

（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養學生自學的能力。

第7頁 《網頁設計與制作綜合實訓》實訓指導書

實訓六 對案例網站版面切圖

1、學時分配：6學時

2、實訓目的

（1）熟悉Photoshop軟件的使用方法。（2）掌握網站版面設計的方法。（3）對案例網站版面進行切圖。

3、實訓任務

（1）掌握Photoshop軟件切片工具的使用方法。（2）查看網絡上相關網站網頁。

（3）根據小組討論結果，實際動手對網站版面進行切圖。

4、實訓內容

（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。

（2）查看網上其它網站的網頁，了解網頁對象分布的基本情況。

（3）打開制作好的網站版面源文件，使用切片工具準備對版面進行切圖。（4）使用參考線將網站版面部分之間進行分割。（5）使用切片工具對網站版面進行切割。

（6）切圖完成后，選擇“文件”——“存儲為WEB所用格式”，存儲文件類型可以選擇“JPEG”或者“GIF”。（7）整理保存好的文件。

5、實訓要求

（1）由指導教師講清實訓的基本原理，要求，實訓目的。

（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養學生自學的能力。

第8頁 《網頁設計與制作綜合實訓》實訓指導書

實訓七 制作完成案例網站首頁

1、學時分配：6學時

2、實訓目的

（1）熟悉Dreamweaver軟件的使用方法。（2）掌握使用表格布局網頁的方法。（3）制作完成案例網站首頁。

3、實訓任務

（1）掌握Dreamweaver軟件的使用方法。（2）查看網絡上相關網站網頁。

（3）根據小組討論結果，實際動手完成案例網站首頁。

4、實訓內容

（1）預覽實訓網頁。

（2）在D盤根目錄下新建一個文件夾“home”，在該文件夾中分別新建“css”、“images”，“html”三個文件夾，（3）打開Dreamweaver軟件，將“home”文件夾定義為站點。

（4）創建一個命名為“index.html”的網頁文檔，設置網頁的頁面屬性。（5）根據網頁首頁效果圖，插入表格，進行表格的嵌套，完成網頁首頁的布局。（6）在網頁插入的表格中輸入文字、水平線和日期等內容，設置文本的屬性。（7）在網頁中插入圖像，設置圖像的屬性。

（8）創建CSS樣式表文件，分別定義需要添加效果的不同CSS樣式。（9）在網頁上分別應用不同的CSS樣式。（10）保存網頁文件。

5、實訓要求

（1）由指導教師講清實訓的基本原理，要求，實訓目的。

（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養學生自學的能力。

第9頁 《網頁設計與制作綜合實訓》實訓指導書

實訓八 案例網站模板的制作

1、學時分配：6學時

2、實訓目的

（1）熟悉Dreamweaver軟件的使用方法。（2）掌握網頁模板的制作方法。

（3）掌握使用網頁模板創建網頁的方法。

3、實訓任務

（1）掌握Dreamweaver軟件的使用方法。（2）查看網絡上相關網站網頁。

（3）根據小組討論結果，實際動手制作網頁模板。

4、實訓內容（1）根據下發的“二級網頁.jpg”，在Photoshop軟件中設計完成二級網頁版面，并且切圖制作網頁。

（2）查看網上其它網站的網頁，了解網頁對象分布的基本情況。

（3）在Dreamweaver軟件中打開制作好的二級網頁，選擇“文件”—“另存為模板”，將制作好的網頁轉化為模板文件。（4）在創建好的模板網頁上插入“可編輯區域”，根據需要可以插入多個可編輯區域。

（5）也可以選擇“文件”—“新建”—“模板文件”，重新創建一個新的模板文件，跟制作網頁的方法一樣，制作完成模板網頁后，一定要在模板網頁中插入可編輯區域。

（6）選擇“文件”—“模板”，選擇創建好的網頁模板，選擇“由模板創建”，利用制作好的模板來生成網頁。

（7）在生成的網頁中的可編輯區域中添加相應的網頁內容。（8）對創建好的網頁模板進行編輯，并且進行更新。（9）整理保存好的文件。

5、實訓要求

（1）由指導教師講清實訓的基本原理，要求，實訓目的。

（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養學生自學的能力。

第10頁 《網頁設計與制作綜合實訓》實訓指導書

實訓九 案例網頁超級鏈接的添加

1、學時分配：6學時

2、實訓目的

（1）熟悉Dreamweaver軟件的使用方法；（2）掌握網頁超連接的添加和設置方法；（3）創建完成案例網頁的超連接。

3、實訓任務

（1）掌握Dreamweaver軟件的使用方法。（2）查看網絡上相關網站網頁。

（3）根據小組討論結果，實際動手創建網頁超鏈接。

4、實訓內容

（1）根據設計好的二級網頁版面，制作網頁模板。（2）打開Dreamweaver軟件使用創建的二級網頁模板來創建主頁的新聞網頁。（3）根據首頁新聞鏈接標題內容，選擇新聞網頁內容，并將新聞內容添加到使用網頁模板生成的新聞網頁中。

（4）為首頁新聞文字添加文字超鏈接。

（5）在創建新聞網頁的模板文件中添加返回首頁的鏈接。（6）更新網頁。

（7）根據首頁導航條內容，選擇合適的網頁內容，使用二級網頁模板生成相應網頁。

（8）為首頁導航條添加圖片超鏈接，鏈接到相應的二級網頁。

（9）在創建二級網頁的模板文件中創建返回首頁，以及二級網頁之間互相鏈接的超鏈接。

（10）更新網頁。（11）為首頁添加郵件鏈接、錨點鏈接、跳轉菜單鏈接、下載鏈接等其他超鏈接。（12）測試網頁超鏈接，保存相關文件。

5、實訓要求

（1）由指導教師講清實訓的基本原理，要求，實訓目的。

（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養學生自學的能力。

第11頁 《網頁設計與制作綜合實訓》實訓指導書

實訓十 案例網站加入動態元素

1、學時分配：6學時

2、實訓目的

（1）熟悉Flash軟件的使用方法；（2）掌握創建滾動效果的方法；（3）為案例網站加入動態效果。

3、實訓任務

（1）掌握Dreamweaver軟件和Flash軟件的使用方法。（2）實際動手為網站首頁制作一個Flash動畫。

（3）為首頁增加新聞動態滾動效果，以及圖片動態滾動效果。

4、實訓內容

（1）打開Flash軟件，熟悉Flash軟件的使用方法。

（2）使用Flash軟件創建一個簡單動畫，比如圖片之間的簡單切換。（3）打開Dreamweaver軟件，將Flash中生成的SWF格式動畫文件插入到網頁中，設置動畫屬性。

（4）熟悉鏈接網頁源代碼的編寫方法，掌握基本的網頁代碼標簽。（5）在“通知公告”中給網頁新聞添加由下向上的動態滾動效果。（6）在“專業展板”中給圖片添加由右向左的動態滾動效果。（7）測試網頁效果，整理保存好的文件。

5、實訓要求

（1）由指導教師講清實訓的基本原理，要求，實訓目的。

（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養學生自學的能力。

第12頁

第四篇：網頁設計與制作實訓報告[范文]

《網頁設計與制作》

實習報告

指導老師：

實習地點：

實習時間：

實習班級：

學生姓名：

一、實習目的① 學會制作新聞發布系統。

② 學會制作在線調查系統。

③ 熟悉購物網站的主要功能和欄目。

④ 學會購物網站數據庫表的創建和數據庫連接的創建。

⑤ 學會購物系統前臺頁面制作和后臺管理制作。

二、實訓內容

1.創建數據庫表

① 啟動Microsoft Access，執行“文件”——“新建”命令，打開“新建文件”面板，在面板中單擊“空數據庫”。

② 彈出“文件新建數據庫”對話框，在對話框中選擇數據庫保存的路徑，“文件名”文本框中輸入shop。

③ 單擊“創建”按鈕，在對話框中雙擊“使用設計器創建表”選項。

④ 彈出“表1：表”對話框，在對話框中輸入“字段名稱”和字段所對應的“數據類型”，將shopID字段設置為主鍵。

⑤ 執行“文件”——“保存”命令，彈出“另存為”對話框，在對話框的“表名稱”文本框中輸入products。

⑥ 單擊“確定”按鈕，保存表。按以上步驟的方法，創建表fen和admin。

2.創建數據庫連接

新建一個網頁文件夾，打開IIS信息服務，創建IIS虛擬目錄，在文件夾安全性把來賓用戶的權限修改為完全控制，并導入數據庫。

3.制作購物網系統頁面

① 用index.html創建zhanshi.asp商品分類展示頁，新建站點，導入shop.mdb數據庫文件建立數據庫連接。插入表格并插入圖片、文字，創建記錄集并在表格相應位置綁定數據。在服務器行為里為表格設置重復區域，創建記錄集RS2并在左邊的商品分類表格里綁定

數據，在服務器行為里為左側的表格添加重復區域和轉到詳細頁，制作記錄集導航條。

② 用index.html創建xiangxi.asp商品詳細信息頁，首先創建記錄集并制作左側的商品分類表格，之后在中間區域插入表格，在表格中插入圖片、文字，創建記錄集RS2并將數據綁定在表格相應位置。

③ 用index.html創建denglu.asp商品詳細信息頁,創建記錄集并制作左側的商品分類表格，在中間區域插入表單，在表單里插入表格，在表格里插入文字、文本域、表單按鈕，并為表單設置檢查表單。創建記錄集RS2并在服務器行為里添加登錄用戶。

④ 用index.html創建fenlei.asp添加商品分類頁，插入表單，在表單里插入文字、文本域、表單按鈕，創建記錄集并在服務器行為里添加插入記錄和限制對頁的訪問。再用index.html創建fenleiok.asp,在其中插入表格輸入文字，并設置返回鏈接。

⑤ 用index.html創建tianjia.asp添加商品頁，創建記錄集，用插入記錄表單向導創建插入記錄表單，在服務器行為里添加限制對頁的訪問。再用index.html創建tianjiaok.asp,在其中插入表格輸入文字，并設置返回鏈接。

⑥ 用index.html創建guanli.asp商品管理頁，創建記錄集并制作左側的商品分類表格，在中間區域插入表格并插入文字，創建記錄集RS2并在表格相應位置綁定數據，為該表格設置服務器行為的重復區域，制作修改和刪除鏈接，制作記錄集導航條。

⑦ 用tianjia.asp創建xiugai.asp修改頁面，創建記錄集在對應的文本域中綁定數據，把服務器行為里的插入記錄刪除并添加更新記錄。在服務器行為里添加限制對頁的訪問。再用index.html創建xiugaiok.asp,在其中插入表格輸入文字，并設置返回鏈接。

⑧ 用index.html創建shanchu.asp刪除頁面,插入表格并插入文字，建立記錄集，在表格相應位置綁定數據，插入表單和表單按鈕，創建服務器行為限制對頁的訪問和刪除記錄。再用index.html創建shanchuok.asp,在其中插入表格輸入文字，并設置返回鏈接。

三、疑難解惑

① 網頁不能正常打開，電腦用戶權限沒有修改，在文件夾安全性把來賓用戶的權限修改為完全控制。

② 創建重復區域時，總顯示相同的內容，仔細閱讀教材，發現創建重復區域時要選中表格，而不是文字內容。

③ 登陸頁面不能登陸，把表格放入表單后，重新登錄，問題解決。

④ 創建添加商品頁面時，無法顯示商品分類。在插入記錄表單時，應將feileiID“顯

示為”下拉列表中選擇“菜單”，并在“菜單屬性”里的“域”列表中選擇fenlei。

⑤ 修改頁面點進去初始內容都一樣，“唯一鍵列”下拉列表中應選擇shpID。

⑥ 商品分類點進去每個種類都一樣，查找原因，發現記錄集中篩選是shpID，把記錄集中的篩選改為fenleiID解決。

四、實訓心得

經過一周動態網頁的實訓，使我們對本學期的這門課進行了整體的匯總。在這匯總期間，也算是對自己本學期的一個考核，此次實訓暴露出了許多我自身存在的問題，同時也對自身有了很大的提高。

在這次實訓中，我也有許多收獲。首先，我體會到了作為一個計算機專業的人，不會用DW的痛苦和尷尬。在制作的過程中遇到問題，可以說得是困難重重，這畢竟是第一次獨自制作動態網頁，難免會遇到過各種各樣的問題，同時在制作的過程中發現了自己的不足之處，對以前所學過的知識理解得不夠深刻，掌握得不夠牢固。在此過程當中彌補了我許多知識上的缺陷，弄清的以前沒有搞懂的知識點。經過多番的努力和辛酸，我成功地完成了這次過程艱辛的實訓，而且我從中體會到了一種叫做‘成功的喜悅’的感覺，那種小有成就的興奮是只有置身其中的人才能體會的。

在實訓過程中，我更體會到了基礎知識的重要性，也許我們正在迷惘，我們是否學到了東西，但事實說明零零散散的知識，在項目開發當中起到了非常關鍵的作用，我們不缺少時間和工具，我們只是缺少經驗和動手能力，如果我們以后能更好的在各方面增長自己的經驗，相信我們能在長長的就業隊伍中脫穎而出的！相信自己，相信未來。今后我將會更加努力的學習，不斷提高自身素質，為我將來的就業打下良好的基礎

第五篇：網頁設計與制作實訓報告

《Dreamweaver網頁設計與制作案例教程》

實訓報告

專 業： 計算機網絡技術 年 級： 2013級 姓 名： 學 號： 輔導老師：

制作電子商務類網站首頁

一、網站建設的前期準備工作

1、網站整體需求分析

網站整體需求主要包括以下幾個方面： 1)網站建設背景及目標 2)網站建設現狀分析 3)網站建設目標分解

4)網站建設資金及人員投入情況分析

2、確定網站風格

根據電子商務網站的特點，確定網站的整體風格，即網站的色彩和版式。網站風格是在網站整體需求分析的基礎上，通過明確網站設計的目的和用戶需求、訪問者的特點等得出的結論。本實例是針對一個工業產品交易平臺的網站，網站與用戶交互性強，因此確定其主色調為暖色系的橘黃色給人以輕松愉快的瀏覽環境。如圖是電子商務網站的LOGO。

3、網站素材搜集

明確網站主題和劃分板塊后，接著要為后續的網站建設搜集素材。若想讓網站有聲有色，能夠吸引客戶注意，就要盡量搜集文字、圖片、音頻、視頻、動畫等多媒體素材。對于一些通用素材，可以從網上搜集得到，也可以根據需求自行制作素材，比如，通過Photoshop圖像處理軟件對圖像進行優化處理，使用Flash制作動畫等。如圖所示。

二、創建站點

1、網站建設的第一步是創建本地站點。

2、創建的站點信息將顯示在“文件”面板中。如果需要對站點參數進行修改，可以單擊“站點→管理站點”對站點進行重新設置。

三、網站主頁制作

1.使用Div+CSS布局頁面

使用Div+CSS實現頁面布局，具體操作如下：

4）為AP Div元素設置CSS樣式。由于網站首頁和子頁面采取相同的布局風格，因此樣式表采用外部鏈接樣式表。

5）選中創建的AP元素“container”，在右側的“CSS樣式”面板中單擊鼠標右鍵，選擇“新建”命令，打開“新建CSS規則”對話框，并作相應設置，如圖所示。

6）單擊確定按鈕，彈出“#container的CSS規則定義”對話框，選擇分類列表框下的“背景”選項卡，設置文檔的“背景顏色”為#FFF；在分類列表框中，切換到“區塊”選項卡，設置“文本對齊”屬性為左對齊；在分類列表框中，切換到“方框”選項卡，設置Ap Div的“寬”為960 px，“上邊界”為1 px，“下邊界”為0 px；“邊框”和“列表”選項卡的屬性保持默認設置；切換到“定位”選項卡，單擊確定按鈕，完成對“#container”元素樣式的定義。設置后的“CSS樣式”面板如圖所示。

/* ==整體布局定義開始== */ #Container { width:960px;/*定義頁面寬度*/ visibility:visible;/*設置可見度*/ margin:1px auto 0;/*設置外邊距*/ background-color: #FFF;/*定義背景顏色*/ } 2.設置頁面屬性

在style.css樣式表文件內部設置網頁的頁面屬性。頁面屬性是對標簽屬性的設置。代碼如下所示： body{ font-size:12px;/*定義字號*/ color:#666;/*定義字體顏色*/ background:#FFF;/*定義背景顏色*/ text-align:center;/*定義文本位置*/ margin:0;/*定義外邊距*/ padding:0;/*定義外邊距*/ border:0;/*定義邊框粗細*/ background: transparent;/*定義背景透明*/ } 也可以打開index.html，選擇“修改→頁面屬性”菜單命令，在打開的“頁面屬性”對話框中進行相應設置。

3.插入圖片

在頂部的“top”元素中插入一幅圖像。如圖所示。

4.添加導航條

網頁導航條是非常重要的網頁元素，網頁間的跳轉，需要通過導航條來完成。

1）將光標定位在“nav” Div元素中，在其內部輸入列表項，并為列表項的各個單元設置超鏈接。設置情況如圖所示。

2）添加CSS樣式，需要在style.css文件中輸入相關代碼。#nav { height:30px;/*定義高度*/ width:100%;/*定義寬度*/ background-color:#c00;/*定義背景顏色*/ overflow: hidden;/*定義溢出效果*/ } #nav ul { font-size:12px;/*定義字號*/ color:#FFF;/*定義字體顏色*/ line-height:30px;/*定義字體行高*/ white-space:nowrap;/*定義區塊空格*/ margin:0 0 0 30px;/*定義外邊距*/ padding:0;/*定義內邊距*/ } #nav li { list-style-type:none;/*定義列表類型*/ display:inline;/*定義區塊顯示效果*/ } #nav li a { text-decoration:none;/*定義字體修飾*/ font-family:Arial, Helvetica, sans-serif;/*定義字體*/ color:#FFF;/*定義字體顏色*/ padding:7px 10px;/*定義內邊距*/ } #nav li a:hover { color:#ff0;/*定義字體顏色*/ background-color:red;/*定義背景顏色*/ 該樣式表使用列表項實現導航菜單功能。效果如圖所示。

5.推薦廠家

1）把光標置于DIV元素“left”中，創建新的DIV元素 sideBarLefta1，并定義相關樣式

2）在DIV元素“sideBarLefta1”的內部插入推薦廠家標志及說明文字等信息，定義相關樣式如圖所示。

3）在style.css樣式表中插入下面的代碼，#left { float:left;/*定義浮動位置 */ width:640px;/*定義寬度 */ height:832px;/*定義高度 */ }.sideBarLeftb1 { width:238px;/*定義寬度 */ height:240px;/*定義高度*/ border:#ebcbb4 solid 1px;/*定義邊框的顏色、粗細、樣式*/ } 6.網頁廣告設計制作

1）將光標置于div元素“#left”中，插入一個嵌套的div元素#sideBarLefta2，2）將光標置于DIV元素“banner”中，插入一個已經準備好的SWF元素。

3）選中“banner”下面DIV元素，并定義類為“hot”，在4個小DIV元素中分別插入準備好的廣告圖，效果如圖所示

style.css樣式表中插入的代碼如下： #sideBarLefta2 {

float:left;/*定義浮動位置 */ width:390px;/*定義寬度 */ height:268px;/*定義高度*/ overflow: hidden;/*定義溢出效果*/ } #banner { margin-top:5px;/*定義頂端外邊距*/ border:#999 solid 1px;/*定義邊框的顏色、粗細、樣式*/ width:390px;/*定義寬度 */ }.hot{ display:inline;/*定義區塊顯示效果*/ border:#999 1px solid;/*定義邊框的顏色、粗細、樣式*/ width:91px;/*定義寬度 */ height:70px;/*定義高度*/ float:left;/*定義浮動位置 */ margin:2px;/*定義外邊距*/ } 7.頁面右側欄目設計

1）將光標置于DIV元素“right”中，插入已經準備好的圖片service.jpg。如圖所示。

2）在service.jpg下面插入兩個div，分別定義為.sideBarRightb3和.sideBarRightb4，在新建的div中插入準備好的廣告圖像ad1.jpg和ad2.jpg并在屬性面板中定義超鏈接，效果如圖所示。

在style.css中添加的代碼如下： #right { float:left;/*定義浮動位置 */ width:320px;/*定義寬度 */ height:832px;/*定義高度 */ }.sideBarRightb3 { height:60px;/*定義高度*/ margin-top:5px;/*定義頂端外邊距*/ border:#ebcbb4 1px solid;/*定義邊框的顏色、粗細、樣式*/ }.sideBarRightb4 { height:93px;/*定義高度*/ margin-top:5px;/*定義頂端外邊距*/

border:#ebcbb4 1px solid;/*定義邊框的顏色、粗細、樣式*/ margin-bottom:5px;/*定義底端外邊距*/ }.sideBarRightb3,.sideBarRightb4 img { text-align:center;/*定義文本位置 */ padding:5px;/*定義內邊距*/ } 8.行業欄目設計

1）將光標置于DIV元素“left”中，在其下側插入一個嵌套的DIV元素“sideBarLeftb2”。

2）選中Div元素“sideBarLeftb2”，將光標定位在其內部，創建多個新Div，為了方便日后的維護我們將新建Div單獨定義為.sideBarLeftb3。

3）選中DIV元素“sideBarLeftb3”，在style.css中添加的代碼如下：

sideBarLeftb3 { text-align:left;/*定義文本位置 */ float:left;/*定義浮動位置 */ height:150px;/*定義高度*/ width:280px;/*定義寬度 */ padding:4px;/*定義內邊距*/ } 4）將光標移到sideBarLeftb3的DIV元素中，插入兩行列表并對列表設置相關CSS參數。在style.css中添加的代碼如下：.sideBarLeftb3 ul { font-size:12px;/*定義字號*/ line-height:6px;/*定義字體行高*/ float:left;/*定義浮動位置 */ width:270px;/*定義寬度 */ margin:0 0 0 5px;/*定義外邊距*/ padding:0;/*定義內邊距*/ } 5）在列表中添加列表內容，代碼如下：