第一篇：網頁設計與制作報告書

電子商務2班201341440213孫巖

網頁設計與制作報告書

課程名稱:網頁設計與制作

專業班級：電子商務2班

學 號:201341440213 姓 名：孫巖

指導教師：王康哲

電子商務2班201341440213孫巖

目錄

一．概要……………………………………………………………

二．網站開發……………………………………………………

三．應用工具方案……………………………………………

四．欄目劃分……………………………………………………

五．代碼表……………………………………………………….六．截圖……………………………………………………………

七．結論…………………………………………………………… 2 6 7 13 14

電子商務2班201341440213孫巖

摘要：

在Internet飛速發展的今天，互聯網成為人們快速獲取、發布和傳遞信息的重要渠道，它在人們政治、經濟、生活等各個方面發揮著重要的作用。因此網站建設在Internet應用上的地位顯而易見，它已成為政府、企事業單位信息化建設中的重要組成部分，從而倍受人們的重視。

一、網頁制作開發背景

Dreamweaver以其功能強大、容易上手、界面親切而著稱。它采用所見即所得的方式編輯網頁，利用它可以輕松的組織、編輯網頁并將其發布到指定的站點上，而且在發布之后還能對更新情況進行監控以更新站點的內容。現在流行的網頁制作軟件有很多，如Macromedia公司的Dreamweaver、微軟公司的Dreamweaver、還有Adobe Pagemill 3.0--制作多框架，表單和Image map 圖像的網頁工具、Netscape等等。其中Dreamweaver更以其功能強大、容易上手、界面親切而著稱。它采用所見即所得的方式編輯網頁，利用它可以輕松的組織、編輯網頁并將其發布到指定的站點上，而且在發布之后還能對更新情況進行監控以更新站點的內容。工具準備好了，可根據你的個人喜好來選擇一些素材，如圖片、喜歡的文章等。

二、網頁制作設計技巧

首先，我們來看一下創建一個只包含一個網頁的站點。選擇“文件”菜單的“新建”選項，單擊“站點”命令，這時新建站點對話框就彈出來了，在“指定新站點位置”文本框中輸入新站點的位置，單擊“只有一個網頁的站點” 圖標，單擊“確定”按鈕。這就建立好站點了，我們現在來看一下新的站點里有什么，單擊“視圖”工具條的“文件夾”按鈕。在文件夾列表里有一個網頁文件，名字叫做“index.htm”。我們知道，每一個站點都要有一個主頁，這個主頁也是一個網頁文件。瀏覽者訪問站點時首先進入的就是站點的主頁。主頁的名字在一般情況下就叫做“index.htm”。就是說我們新建只包含一個網頁的站點時，DREAMWEAVER就自動為我們創建了站點的主頁了。這個新建的站點主頁時空的，我們可以向里面添加內容。

在文件列表里除了主頁之外，還有文件夾。新建站點時，DREAMWEAVER都會在站點所在位置下新建兩個文件夾，一個是“images”另一個是“_private”。我們在編輯站點時可以在“image”文件夾里放置站點用到的圖片。“private”

電子商務2班201341440213孫巖

文件夾比較特殊，其中的文件對瀏覽者來說是隱含的，我們可以把一些不想讓瀏覽者看到的網頁文件放在這個文件夾里，比如：我們可以在這個文件夾里存放注冊用戶的個人信息。

盡管每一個站點都要有一個主頁，不過創建站點時我們仍然可以從一個空站點開始：選擇“文件”菜單的“新建”命令，單擊“站點”選項，在“新建站點”對話框里，我們可以選擇“空站點”圖標來創建一個空站點。“新建站點”對話框中還有許多其他圖標，這是DREAMWEAVER提供的用來創建站點模板或向導。我們創建只有一個網頁的站點或者創建空站點，都是從頭開始來創建一個站點，這就好像蓋房子一樣，首先畫圖紙。然而，有許多的房子都具有相似的結構和用途，所以我們可以用一張圖紙蓋很多相似的房子，這樣就節省了許多工作。

基于表格的設計：表格布局使網頁設計師制作網站時有了更多選擇。在 HTML 中表格標簽的本意是為了顯示表格化的數據，但是設計師很快意識到可以利用表格來構造他們設計的網頁，這樣就可以制作較以往作品更加復雜的，多欄目的網頁。表格布局就這樣流行了起來，融合了背景圖片切片技術，常給人以看起來較實際布局簡潔得多的結構。

結構設計：這個時期的網頁設計還不太關注語義化和可用性方面的問題，主要還在追求良好的結構美學。同一時期也是大量應用 GIF 占位圖片控制留白的時期。一些主流的公司甚至訓練設計師如何使用 GIF 占位;如微軟的“關于 HTML 表格中的 GIF 占位”。第一批主要應用表格布局的“所見即所得”網頁設計軟件的發展助長了表格的應用。另外，某些軟件自動生成的表格如此復雜以至于許多設計師不可能從頭手寫代碼(例如每行只有 1px 高卻包含了幾百列的表格)。即使是稍微復雜一點兒的網頁(比如多欄目頁面)，設計師們都要依賴于表格來創建。

三、網站結構

網站結構是指網站中頁面間的層次關系;按性質可分為邏輯結構及物理結構。網站結構對網站的搜索引擎友好性及用戶體驗有著非常重要的影響。

（一）網站結構整體先用DIV和CSS來進行構造，對整個網站進行布局，(二)網站結構是衡量網站用戶體驗好壞的重要指標之一。清晰的網站結

電子商務2班201341440213孫巖

構可以幫助用戶快速獲取所需信息;相反，如果一個網站的結構極其糟糕的話，用戶在訪問時就猶如走進了一座迷宮，最后只會選擇放棄瀏覽。

（三）網站結構還直接影響搜索引擎對頁面的收錄，一個合理的網站結構可以引導搜索引擎從中抓取更多有價值的頁面。

網站結構對網站及網站中頁面的影響。搜索引擎對重要頁面的抓取

由于互聯網中信息量極其龐大，為了向用戶展示更多有價值的信息，搜索引擎會優先抓取每個網站中相對重要的頁面(即權重較高的頁面),然而，搜索引擎是怎樣發現這些重要頁面的呢?根據重要頁面的鏈接指向的頁面可能是重要頁面的思路;搜索引擎首先會從權重相對較高的頁面(即源頁面)出發跟蹤其中的鏈接，從而抓取其他相對重要的頁面(即目標頁面)。

網頁設計的要素

四、應用工具方案

DreamWeaver自制動態HTML動畫的網頁。

DreamWeaver是一個很酷的網頁設計軟件，它包括可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它還能通過拖拽從頭到尾制作動態的HTML動畫，支持動態HTML(Dynamic HTML)的設計，使得頁面沒有plug-in也能夠在Netscape和IE 4.0瀏覽器中正確地顯示頁面的動畫。同時它還提供了自動更新頁面信息的功能。

DreamWeaver還采用了Roundtrip HTML技術。這項技術使得網頁在DreamWeaver和HTML代碼編輯器之間進行自由轉換，HTML句法及結構不變。這樣，專業設計者可以在不改變原有編輯習慣的同時，充分享受到可視化編輯帶來的益處。DreamWeaver最具挑戰性和生命力的是它的開放式設計，這項設計使任何人都可以輕易擴展它的功能。

版面布局：在你開始設計之前，你必須仔細地為站點挑選色彩組合。千萬不要出現紫色的背景加上黑藍色的文字的組合。要使整個站點保持同一種色彩組合，因為不同顏色組合的背景或字體可能會是非常令人討厭的。你也可以選用一個背

電子商務2班201341440213孫巖

景圖，而不是僅用一種顏色。背景圖案可以自己繪制，也可以從因特網上下載。通過模糊背景圖案，就可以使文字更容易被閱讀。要記住的是，圖片不會被瀏覽器重畫的，而背景色彩則是要被重新畫的，因此，在上傳你的圖片之前，必須檢查不同的瀏覽器是如何顯示這些網頁的。當增加文字時，盡量設置容易被閱讀的字體和大小。如果你使用背景圖片，那么，當網頁被瀏覽時，背景色和字體將會先于背景圖片被下載，因此，如果背景色和文本的顏色沒有鮮明的對照的話，那么瀏覽者會有幾秒鐘的時間看到一個充滿了不可閱讀的文本的網頁。解決這個問題的簡單的方法就是，使背景色與背景圖的顏色相類似。

瀏覽導航：站點的瀏覽導航必須被設計成非常容易。如果需要，把站點分割為幾個部分。最容易的方法，就是在整個網站的所有的網頁的左邊放置一個菜單條。當然，除此以外，還有許多可選的方法。對于具有大量信息的站點，使用一個可擴展的菜單條會是一個不錯的選擇。無論你使用何種導航模式，在每一頁都放置一個主頁鏈接，那會是一種不錯的設計思想；瀏覽者必須知道，無論何時，當他們迷失在你的站點瀏覽中時，都可以通過簡單的一次點擊就能準確地知道目前所處的位置。

Frame(幀,框架)的問題：Frame—— 你也許會喜歡它，也許不喜歡。如果你在你的網站上使用幀，你很可能使一個幀用于導航目的，另一個幀用于放置內容。你可以看見在同一頁上有兩個被分割的瀏覽窗口，你點擊左邊的幀，只會改變右邊的內容。用幀來組織網站的內容，顯然是非常容易的。

檢驗你的HTML代碼 ：不要在你的網站上放置瀏覽計數器。計數器會讓你的網站看起來不夠專業化，如果瀏覽量不夠的話，還會起到相反的宣傳作用。最后，內容是金，如果能給的瀏覽者一些有價值的東西，如，信息，建議，或軟件，那么就能吸引瀏覽者經常光顧你的網站。為你的站點增加消息板和聊天室，從而提高網站的交互性，使你和你的訪問者交流，讓訪問者彼此交流。

五、頻道欄目劃分

圖1

電子商務2班201341440213孫巖

六、代碼段

content=“text/html;charset=gb2312” /> （2）textarea多行多列輸入元素

功能：實施對Textarea中的元素進行控制。基本屬性

name：設定提交信息時的信息名稱，對應HTML文檔Textarea的Name。Value：用以設定出現在窗口中對應HTML文檔中Value的信息。Default value：元素的默認值。方法：

blur()：將輸入焦點失去 select()：將文字加亮后 事件：

onBlur:當失去輸入焦點后產生該事件 onFocus:當輸入獲得焦點后，產生該文件 Onchange:當文字值改變時，產生該事件 Onselect:當文字加亮后，產生該文件（3）Select選擇元素

功能：實施對滾動選擇元素的控制。屬性：

name:設定提交信息時的信息名稱，對應文檔select中的name。Length:對應文檔select中的length options:組成多個選項的數組 selectIndex;該下標指明一個選項

select在中每一選項都含有以下屬性： Text:選項對應的文字

selected:指明當前選項是否被選中 Index:指明當前選項的位置 defaultselected:默認選項 事件：

第五章

色彩在網頁中的應用

OnBlur：當select選項失去焦點時，產生該文件。onFocas:當select獲得焦點時，產生該文件。Onchange:選項狀態改變后，產生該事件。（4）Button按鈕

功能：實施對Button按鈕的控制。屬性：

Name:設定提交信息時的信息名稱，對應文檔中button的Name。Value:用以設定出現在窗口中對應HTML文檔中Value的信息。方法：

click()該方法類似于一個按下的按鈕。事件：

onclick當單擊button按鈕時，產生該事件。例 ：

功能：實施對一個具有復選框中元素的控制。屬性：

name:設定提交信息時的信息名稱。

Value:用以設定出現在窗口中對應HTML文檔中Value的信息。Checked:該屬性指明框的狀態true/false.defauitchecked:默認狀態 方法：

click()該方法使得框的某一個項被選中。事件：

Onclick：當框的選被選中時，產生該事件。（6）radio無線按鈕

功能：實施對一個具單選功能的無線按鈕控制。屬性：

Name：設定提交信息時的信息名稱，對應HTML文檔中的radio的name相同 Value：用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中的radio的name。

length：單選按鈕中的按鈕數目。defalechecked:默認按鈕。

checked:指明選中還是沒有選中。

第五章

色彩在網頁中的應用

index:選中的按鈕的位置。方法：

chick():選定一個按鈕。事件：

onclick:單擊按鈕時，產生該事件。（7）hidden:隱藏

功能：實施對一個具有不顯示文字并能輸入字符的區域元素的控制。屬性：

name:設定提交信息時的信息名稱，對應HTML文檔的hidden中的Name。

Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔hidden中的value。

defaleitvalue:默認值（8）Password口令

功能：實施對具有口令輸入的元素的控制。屬性：

Name:設定提交信息時的信息名稱，對應HTML文檔中password中的name。Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中password中的Value。

defaultvalu:默認值 方法：

select():加亮輸入口令域。

blur():使這丟失passward輸入焦點。focus():獲得password輸入焦點。（9）submit提交元素

功能：實施對一個具有提交功能按鈕的控制。屬性：

name:設定提交信息時的信息名稱，對應HTML文檔中submit。

Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中value。

方法

click()相當于按下submit按鈕。事件：

onclick()當按下該按鈕時，產生該事件。

6.3窗體對象實例

下面我們演示通過點擊一個按鈕（red）來改變窗口顏色，點擊“調用動態按鈕文檔”調用一個動態按鈕文檔。

test8_1.htm 調用動態按鈕文檔

第三篇：網頁設計與制作教學計劃

網頁設計與制作教學計劃

網頁設計與制作情況介紹：13級計算機專業就業班每周課時為8課時，其中上機操作6課時、理論2課時；高考班每周課時為6課時，其中上機操作4課時、理論2課時。根據其課時安排，每周課時就以8課時為準。現按照15周課，計120課時，其中上機操作課90課時，理論課30課時，如上機操作課程時間充足，可自行安排舉一反三。

注：因13級計算機3個班，高考班的課時較少，所以具體實際上機操作情況只有根據實際情況而定。

項目一 網頁概述（6）

任務一 講解網頁設計與制作這門學科的發展前景。（1課時）

講解網頁設計與制作這門學科的發展前景，培養起學生的興趣。任務二 用html代碼編寫“我的第一個網頁”的網頁。（1課時）

簡單介紹一下html代碼：、、，在記事本中用html編寫一個簡單的網頁，轉換格式，在瀏覽器中預覽效果，培養起學生的興趣。任務三 Web簡介。（1課時）

在學習制作一個網頁之前，首先應該了解一些網頁和網站的基本知識：web的起源與基本結構、web的常用術語。任務四 認識網頁制作軟件。（1課時）

了解網頁制作工具網頁制作三劍客，并掌握紅蜻蜓抓圖軟件和Microsoft Office Visio 2007的基本功能。任務五 網站規劃。（2課時）

熟悉網站開發的工作流程：規劃、制作、維護，自行設計一個網站，寫出網站規劃。

項目二 網頁制作基礎（5）

任務一 認識Dreamweaver8。（1課時）

任務二 創建本地站點，搭建模擬結構。（2課時）

學會創建站點，掌握規劃站點結構的原則；學會把其他站點定義成本地站點。任務三 html代碼的基本結構。（2課時）

項目三 插入對象（16）任務一 插入文本（2課時）

學會插入文本、特殊字符、日期、水平線（修改顏色）、注釋，并了解設計文本屬性；掌握enter（

）與shift+enter（
）的區別。任務二 插入圖片（2課時）

掌握插入圖片的技巧，靈活調整圖像的大小，使用“重新取樣”，學會更改默認編圖工具。

任務三 制作圖文混排頁面。（2課時）

學會設置文字和圖像的屬性，并能進行圖像和文字的混排。任務四 插入Flash動畫（2課時）

掌握插入Flash、Flash按鈕和文字、Flash圖片播放器功能。任務五 插入交互圖像（2課時）

學會制作鼠標經過圖像和導航條圖片。任務六 插入音視頻（2課時）

在網頁實現播放音頻文件的效果，并實現下載音視頻文件的功能。任務七 插入滾動文字（2課時）

學會制作滾動文字，并掌握控制滾動文字的html代碼。任務八 綜合練習，制作一個主頁面。（2課時）

項目四 超鏈接

任務一 網頁鏈接路徑與類型（1課時）任務二 內部鏈接、外部鏈接（1課時）任務三 email鏈接、錨點鏈接（1課時）

任務四 圖像映射，基本掌握腳本鏈接的關閉功能（1課時）

項目五 表格

任務一 創建web畫廊（1課時）

通過fireworks創建web畫廊，掌握“創建網站相冊”的功能。任務二 表格的應用（2課時）

新增表格、表格屬性的設定、選擇行列、選擇不相鄰的單元格。任務三 學會使用表格調整方法（3課時）

對預先設計好的網頁圖，在fireworks中切片，通過插入fireworks html 的方式對表格進行調整。

任務四 制作簡單的內頁頁面（2課時）任務五 制作復雜的內頁頁面（3課時）任務六 表格的繪制（1課時）

任務七 表格排版，制作一個小型網站（3課時）

切片，準備圖片；新建站點，搭建結構；表格頁面排版；鏈接，制作網頁。

項目六 表單

任務一 表單文本域：單行、多行、密碼（2課時）

加入空白表單，設定表單屬性；講解什么事表單，解釋表單屬性get和post的區別。

任務二 插入對象（4課時）

單選按鈕（組）、復選框、列表、下拉菜單、文件域、按鈕、跳轉菜單、圖像域、隱藏域。

任務三 綜合練習，表單的排版，以郵箱的方式提交（3課時）

項目七 CSS 任務一 CSS的特點、添加方式、類型（1課時理論）任務二 使用四種方法使用css 樣式表（2課時）任務三 使用 Class類與id類控制網頁的格式（1課時）任務四 運用css樣式表設置字體樣式并控制圖文布局（2課時）任務五 綜合應用CSS的各種屬性（2課時）

任務六 綜合練習，熟練使用css美化網頁（2課時）

項目八 框架

任務一 框架應用（2課時）

任務二 利用框架設計網頁（3課時）

項目九 模板

任務一 模板應用（2課時）

任務二 利用模板設計網頁（3課時）

項目十行為

任務一 制作彈出消息（1課時）任務二 制作打開瀏覽器窗口（1課時）任務三 制作背景音樂（1課時）任務四 控制Flash動畫（1課時）任務五 檢查表單（2課時）

項目十一 時間軸

任務一 時間軸動畫（2課時）任務二 任務三 任務一 任務二 任務一 任務二 任務三 任務一 任務二 任務三 任務二 任務三 任務四 任務五 任務一 制作動態文字（1課時）制作飄動廣告（2課時）

項目十二 層

層的應用（2課時）

層與行為、時間軸結合（3課時）

項目十三 javascript 彈出對話框（1課時）函數應用（2課時）時鐘顯示功能（2課時）

項目十四 數據庫

認識iis（1課時）復習數據庫知識（1課時）連接（2課時）顯示數據（2課時）表單收集（增）（3課時）登陸頁面（查）（3課時）修改密碼（改）（3課時）

項目十五 網頁設計

做個人作品（15課時）

第四篇：網頁設計與制作簡答題

1、簡述Web瀏覽器打開一個Web文件的工作過程。

2、描述網頁設計的一般步驟。

3、簡述網頁設計的基本準則。

4、簡述規劃網站目錄結構時應遵循的原則。

5、描述版面布局的步驟。

6、什么是“HTML”？HTML“標記”又是什么？

7、簡述“HTML”文檔的基本結構。

8、簡述以下一段HTML代碼中各對標記的作用。〈html〉

〈head〉

〈title〉網頁設計〈/title〉 〈/head〉

〈body〉

〈h2〉北國風光〈/h2〉

〈/body〉 〈/html〉

9、如何進行本地網頁的測試？

10、網站管理和維護的主要工作有哪些？

11、什么是Web瀏覽器?

12、簡述網頁設計中所需要注意的通用規則。

13、簡述DHTML的概念及主要組成。

14、簡述使用FrontPage在網頁中插入一個日歷的過程。

15、簡述色彩的三原色的概念及每種顏色的調配范圍。

16、為什么要采用DHTML技術？客戶端動態網頁技術有哪些優點？

17、網站欄目劃分的原則是什么？

18、XML與HTML相比的主要優點有哪些？

19、請簡述一下網站的設計流程？

20、簡述FireWorks的特點。

21、網頁制作的步驟是什么？

22、怎樣讓鏈接沒有下劃線?

23、怎樣在網頁中加入多媒體播放?

24、怎樣讓網頁的背景圖像不滾動?

25、怎樣定義網頁的關鍵字?

26、什么是Web瀏覽器?

27、網頁上所說的重心平衡指的是什么?

28、什么是DHTML？DHTML技術主要由哪幾部分組成？

29、在CSS中，對字體的的設置所涉及到的屬性有哪些？

30、用HTML語言回答一個HTML文件應具有的基本結構。

31、比較GIF格式和JPG格式的原理與各自的適用范圍。

32、為什么要采用DHTML技術?客戶端動態網頁技術有哪些優點?

33、簡述站點的概念以及虛擬目錄和實際目錄之間的對應關系。

34、什么是Web安全色?

35、簡述虛擬主機的概念和功能。

36、簡述Dreamweaver的工作窗口由哪些部分組成。

37、在Dreamweaver中，插入圖像的方法有哪些？

38、在Fireworks中，如何使文字附加于路徑？

39、在Flash MX中可以創建哪些類型的元件？各元件的含義是什么？

40、HTML中
標記和

標記有何區別?

41、簡述在網頁中插入背景音樂的方法。

42、怎樣在網頁中插入Flash影片？

43、簡述設計Web站點的一般步驟。

44、簡要說明html的基本工作原理。

45、簡要說明表格與框架布局的區別。

46、舉例說明在網頁中使用CSS樣式表的三種方式（都使用對p標記符應用color屬性為例），并簡要分析各自的特點。

47、簡要說明使用網頁圖像時應注意的問題

48、簡要回答選擇符的作用及分類。

49、XML的主要特征有哪些？

50、FrontPage的主要功能有哪些？

51、簡答HTML文件的基本標記組成。

52、簡答Java與JavaScript的主要區別。

53、簡述網站的開發流程。（10分）

54、簡述靜態網頁的執行過程。（7分）

55、簡述在Dreamweaver MX中制作以插件方式播放音樂的頁面的步驟。

56、簡述網頁制作有哪些基本流程。

57、在Dreamweaver MX中，目標端點的鏈接有哪幾種？

58、簡述在Fireworks中，可以做哪幾個方面的環境設置。

59、在Flash MX中，幀有哪幾種類型？各自的含義是什么？

參考答案：

1、簡述Web瀏覽器打開一個Web文件的工作過程。

1）

Web瀏覽器向服務器發出頁面請求

2）

服務器接收頁面請求，并將搜索到的頁面發給Web瀏覽器

3）

Web瀏覽器接收并顯示頁面

2、描述網頁設計的一般步驟。

1)

設計主題

2)

設計網頁的總體結構

3)

資料的收集和整理

4)

選擇網頁的設計方法

5)

注意一些基本問題，如：標題要簡明、圖片最好加說明等

3、簡述網頁設計的基本準則。

需要遵循的藝術原則主要有：

1）

對比原則

2）

協調原則

3）

平衡原則

4）

趣味原則。

還包括統一、連貫、分割、對比、和諧、易讀、易找、清晰、精選。

4、簡述規劃網站目錄結構時應遵循的原則。

在創建目錄時需要注意：

（1）不要將所有文件都存放在根目錄下。

（2）目錄層次不要太深，建議不要超過三層。

（3）不要使用過長的目錄名和盡量不要使用中文目錄名。

5、描述版面布局的步驟。

步驟：

1）

繪制網頁草圖

2）

粗略布局

3）

定案

6、什么是“HTML”？HTML“標記”又是什么？

HTML是一種建立網頁文件的語言，透過標記式指令，將影像、聲音、圖片和文字等連接起來。

在HTML中用于描述功能的符號稱為“標記”，它是用來控制文字、圖形等顯示方式的符號。

7、簡述“HTML”文檔的基本結構。

HTML網頁的基本結構。

HTML文件開始

文件頭開始

文件頭

文件頭結束

文件體開始

文件體

第五篇：網頁設計與制作總結

網頁設計與制作

實訓報告

班級：多媒體152

姓名：張莉鈞

學號：201501032118

指導老師：薛楊 王淑惠

實訓時間：6.20——6.24

一、實訓目的：

1、進一步熟悉和掌握網站建設的基本流程和技術規范；

2、鞏固運用Dreamweaver網頁制作軟件制作網頁、特別是制作復雜網頁的知識；

3、鞏固運用PS圖像處理軟件進行網頁中圖形制作和運用flash動畫制作軟件設計網頁中動畫的知識；

4、鞏固綜合運用Dreamweaver、PS、flash三個軟件完成網站建設任務的方法，能獨立設計一個內容完整、圖文并茂、技術運用得當的網站；

5、具備獨立撰寫實訓報告基本能力；

6、在網頁設計的實踐中培養分析問題、解決問題的能力，培養協作、交流的能力，培養創新能力和團隊意識；

7、緊緊圍繞網頁制作的流程：規劃、設計、開發、發布、維護來進行網站的開發，制作出具有較高水準的靜態網頁。以此作為學生學習這門課程的階段性總結，使學生復習、鞏固所學過的理論，并予

以適當的深化，進一步訓練學生的基本技能（如：搜集資料、整理數據、發現與分析問題、尋求解決問題的方案等），為今后從事網站開 發、維護和管理奠定基礎

二、實訓項目——特色美食餐廳網站設計

1、網站主題

我的網站的主旨在于從各個方面全面的介紹特色美食餐廳，包括它的菜品、餐廳的環境以及促銷活動。另外，網站里還包括餐廳資料和聯系方式，網站里的每一個網頁都有統一的風格，每一個網頁的主題色彩都是橙色和白色搭配，用以展示餐廳特色的效果。其實最重要的是要做出自己的風格，給瀏覽者好的欣賞感受。

2、網站材料

主要在網站上搜集所要的網頁信息，包括圖片、文字。同時，查

詢相關的書籍、百度等方式收集所需的文字資料,圖象資料,flash動畫和網頁特效等，用以得來更加具有說服力的頁面。要想做好自己的網站，能夠給瀏覽者好的欣感受，就要盡量搜集材料，搜集得材料越多，以后制作網站就越容易。精選自己收集的材料，作為自己制作網頁的素材，這樣就可以做好一個好的網站。

3、網站規劃

我的網站共有７個主頁面：首頁、美食介紹、優惠活動、商品促銷、宴會定制、會員中心和關于我們。每一個頁面用統一的模塊，以保證網站統一的頁面風格。網頁布局主要用框架和表格，用框架定位內容的大體結構，再用表格具體定位。位子的設計也是重要的一個部分，根據具體內容決定字體風格，相同的風格多次調用是CSS設計一個樣式，以保證隨時、準確的調用。

三、網頁設計工具使用

1、Dreamweaver——我們使用它做網頁的主要布局。

2、Photoshop——我們使用它做網頁圖片的處理以及logo的制作。

3、Flash——我們使用它制作動畫

四、網站設計流程

1、主頁設計

2、色彩搭配

五、網站測評

網站建成后為了出現不必要的錯誤，需對它進行測評，測評的主要內容為

1、鏈接有效性，靜態網頁只要保證每一個網頁正常瀏覽保證頁面信息不缺失就可以了。

2、網頁語言的正確性，檢查網頁中英文拼寫與html語言是否正確，在靜態網頁中語言都是自動生成的所以語言的正確性一般不會有太大的問題。

3、網站便用性，檢查網站的整體結構是否清晰以及網站頁面的導航是否清晰。

最終效果圖

總結：

通過學習一學期的網頁設計，我們收獲了不少，我們這次實訓雖然只做了一個網站，但這個里面包括的內容很多，主要包括網站主頁的布局設計，建立站點，網頁與網頁之間的連接，以及模板和css樣式表的應用。

收獲：通過一個星期的網頁設計實訓，從中學到了不少的網頁設計知識，之前都是老師講得比較多，總以為很難實現，但自己做起來其實也并不是想象中那么苦難。雖然代碼看起來復雜，但是慢慢學會分析就會懂。

不足：當然這次實訓我也有不足，比如css樣式表不能靈活應用，網頁布局也不夠完美，不過多虧了王老師和薛老師的細心指導，我才能完成這次實訓。

Flash實訓總結

班級：多媒體152

姓名：張莉鈞

學號：201501032118

指導老師：薛楊

實訓時間：2.flash培訓實訓總結提要：

這次實訓過后，對flash有了基礎的了解，想在這方面學習的話有了初步的基礎，主要是學習了flash中各種工具的使用，1、確定動畫劇本及分鏡頭；

2、設計出不同字母間的完美轉換。、一、實訓目地：讓我們更熟練的應用flash制作動圖

二、實訓項目——不同字母間的形狀變換

1、先要確定使用的字母w o r l d

2、再給每個字母使用不同的顏色以及給它們變形

3、最后再給每個字母做不同的變換方式

三、總結 實訓收獲: 通過這次實訓我更加鞏固了對flash的應用，雖然這中間有很多失誤和很多不必要犯的錯誤，但更多的是收獲，這次實訓過后，對flash有了基礎的了解，想在這方面學習的話有了初步的基礎，主要是學習了flash中各種工具的使用，1、確定動畫劇本及分鏡頭；

2、設計出字母形狀；

3、導入到flash進行制作；

4、剪輯配音。在分鏡頭畫面腳本繪制過程中，應養成填表的好習慣，在表格中注明畫面的景別，畫面景別使用的專業術語有：大特寫、特寫、近景、中景、全景、遠景、全遠景、縱深景等。畫面鏡頭號景別秒數內容摘要對白效果音樂。存在的問題及解決思路: 這幾個星期我學習的flash大多是比較基礎的，Flash中字母刻畫不夠完善，很多動作，變形都需要有一定的美術功底及Flash基礎，對于初學的我很困難，所以在此只做了一些簡單的變形。在Flash中的一些腳本語言初學時無從下手，只好從大量的視頻、書籍里尋找答案。4．結束語

為了對Flash的現況有更好的了解，主要是對于網上一些MV做了參考。現在的FlashMV已經逐漸成熟了。MV的制作從開始的大量使用位圖，轉換為矢量后讓它們移動來制造動畫效果，或者是一些簡單的閃入、閃出來豐富畫面，發展到現在的廣泛使用矢量圖甚至手工作圖，一些費心思的逐幀動畫讓我看到了Flash的日漸成熟；從以前的生硬呆板，發展到今天的生動、逼真。Flash動畫說到底就是“遮罩+補間動畫+逐幀動畫”與元件（主要是影片剪輯）的混合物，通過這些元素的不同組合，從而可以創建千變萬化的效果。我不僅復習熟練了相關的課程、專業，還學習掌握了很多知識，同時也認識到還有很多基礎知識要去學習，去鞏固。在以后的時間里，我將花費大量的時間用于學習Flash及相關知識，在Flash之路上我會走的更遠。