第一篇：上機實驗2網頁制作基礎

上機實驗2

上機練習

1按P21頁1.3.4節(jié)內容制作一個簡單的網頁。

上機練習2

（1）在計算機上建立一個自己的文件夾，然后按照課本P30頁的步驟使用高級

選項卡創(chuàng)建一個站點。（文件夾可按照P31頁實例來創(chuàng)建）

（2）站點的編輯：對所創(chuàng)建的站點進行編輯，修改

（3）站點的復制及刪除

（4）在站點中使用文件面板，新建及重命名文件

上機練習

31.練習目的：學習制作網頁的基本技能。

2.練習步驟：

（1）在計算機上建立一個自己的文件夾，制作一個簡單的網頁，網頁文件名為：index.htm，內容不限，網頁中要包含文字和圖像，文字的顏色、大小要有所變化。網頁中的圖片可以從網上下載。網頁中的文字輸入對該圖片的介紹。不少于150字。

（2）選擇自己喜愛的圖片設置為背景圖片。

（3）將制作的網頁在瀏覽器中瀏覽。

（4）制作的網頁有較好的視覺效果。

交上機練習1、3整個文件夾要交上，文件夾以班號的后3位命名。

如1班的1號為101.

第二篇：多媒體實驗四多媒體網頁制作

實驗四 多媒體網頁制作

【目的與要求】

1．熟悉網頁制作軟件Dreamweaver功能和特點；

2．學習使用網頁制作軟件Dreamweaver制作網頁的方法

【實驗儀器與器件】

硬件：多媒體個人計算機 軟件：Dreamweaver軟件

【實驗內容】

1.網站建立與網頁發(fā)布流程

建立網站首先要在本地機上構建本地站點，創(chuàng)建合理的站點結構，編輯制作網頁，用合理的組織形式來管理站點中的文檔，并對站點進行必要的測試。一切就序后，再將站點上載到Internet服務器，供其他人瀏覽。

網站建立與網頁發(fā)布基本流程是：站點規(guī)劃與設計→素材準備→建立網站與網頁制作→網站測試→網站發(fā)布→維護更新。

2.Dreamweaver 操作界面

Dreamweaver是美國MACROMEDIA公司開發(fā)的集網頁制作和網站管理于一身的所見即所得的網頁編輯器,Dreamweaver與flash、Fireworks三個軟件被稱之為網頁制作三劍客。Dreamweaver具有兩個主要功能： 網站建立與維護；網頁制作。

Dreamweaver 集成布局操作界面按功能分為四大部分：即頁面編輯器；面板組；屬性面板；站點管理器。

3.創(chuàng)建網站

1）規(guī)劃網站

在建立網站與制作網頁之前首先要規(guī)劃站點： ① 規(guī)劃站點結構：合理的站點結構可以加快對站點的設計，提高工作效率。② 規(guī)劃站點導航機制：提供清晰易懂的瀏覽方法，采用統(tǒng)一的網頁組織形式，引導用戶輕松訪問網站。

③ 構建整體的站點風格：網站中網頁風格應該統(tǒng)一，使網站特點鮮明，突出主題。

2）創(chuàng)建本地站點 在制作網頁之前，必須首先創(chuàng)建網站或打開網站，此后Dreamwear會自動將所有網站資源（HTML文檔、圖片、動畫、聲音、程序等）都保存到網站文件夾中，從而保證網站發(fā)布后網頁上的所有元素可以正常瀏覽。網站分為本地站點（網站存放在本機硬盤上）與遠程站點（網站存放在用于發(fā)布網站的服務器端）。

4.頁面布局

頁面布局是進行網頁設計最基本、最重要的工作之一。常用的布局方法有框架、表格和圖層。

①框架

框架式常見的頁面設計方式，使用框架可以講一個網頁分割成幾個既有聯系又各自獨立的部分，從而實現在一個瀏覽器中顯示多個網頁文檔的目的。一個包含有三個框架的網頁實際上是由四個獨立的 HTML 頁面組成：框架集文件和三個包含在框架中顯示的內容的文件。當使用框架集設計網頁時，為了該網頁能在瀏覽器中正常工作必須對這四個頁面都進行保存。

要在框架內使用鏈接，必須為鏈接設置一個目標。這個目標是指在哪個框架內鏈接要打開的內容。

②表格

表格是進行網頁布局時最常用的工具。表格為網頁設計者提供了在頁面中增加垂直和水平結構的簡潔方法。使用表格可以在頁面上排列數據與圖像，在頁面上設計欄目等。

③層

層是一種網頁元素定位技術，使用層可以精確定位頁面元素，層對于制作網頁的部分重疊具有特殊作用。層可以放置在頁面的任意位置，可以在層中防止文本、圖像或其它層。

5.設置超鏈接

利用超級鏈接可以實現文檔間或文檔中的跳轉，超級鏈接由兩部分組成:鏈接的載體以及鏈接的目標地址。許多頁面元素可以作為鏈接載體，如:文本、圖像、圖像熱區(qū)、輪替圖像、動畫…。而鏈接目標可以是任意網絡資源，如:頁面、圖像、聲音、程序、其他網站、Email、錨點。

6.交互表單

表單是網頁中提供交互操作的重要手段，它可以收集瀏覽者提供的信息，并對此作出反應，處理用戶的要求。每個表單中都可以包含一系列的輸入工具，如文本域、密碼域、單選按鈕、復選框、列表框、菜單、命令按紐、隱藏域等。在Dreamweaver中添加表單就像插入其它對象一樣，只需將光標置于插入點處，點擊表單工具欄中的表單圖標或插入菜單中的表單命令，將在文擋窗口中出現紅色虛線組成的空白表單體，在表單體中可以放置各種表單對象。

7.添加多媒體

Dreamweaver中可以添加多種格式的多媒體插入對象。8.系統(tǒng)的測試優(yōu)化

網頁制作完畢后，就可以將網站發(fā)布到Internet上，在發(fā)布網站之前應首先對網站進行測試與整理。

Dreamweaver為整理站點，提供了多種方法。使用“檢查超鏈接”的方法，可以迅速地找出網站中無效的鏈接。

【實驗內容及步驟】

1、主頁導航：

2、網頁布局：

歡迎主頁

Before風景發(fā)展

Now專業(yè)文化活動實習

Future工作展望

AboutMe3、鏈接結構：

4、制作截圖：

屬性設置

鏈接設置 【心得體會】

1、主題創(chuàng)意：

本網站主題圍繞作者而建，包括三個部分，過去（Before）、現在（Now）和未來（Future）。充分利用圖片、音頻、視頻等素材，體現出作者對當前生活的熱愛，對美好未來的努力奮斗，表現一種寧靜淡泊的情懷。

過去部分展現作者家鄉(xiāng)的風景（scenery）和發(fā)展（develop），通過回憶，描繪對家鄉(xiāng)的眷戀和期望。現在部分則是作者大學生活，分別是專業(yè)（special）、文化（culture）、活動（travel）和實習（practice）。從四個方面展示了母校的文化氛圍、專業(yè)方向，和對即將到來的實習之期待。未來部分從工作（work）和展望（hope）兩方面描繪出一個令人期待的美好生活，并為之努力的堅持。

關于我（About me）是一個小小的個人簡歷，恰逢導師布置的訓練任務，借此制作網頁機會，融入其中。算是在節(jié)約時間和創(chuàng)新層面，有自己的想法。

2、操作步驟：

第一步，確定主題；

首先規(guī)劃出大致的網頁設計，思考所必要的素材等項目。

第二步，素材整理；

按照第一步構想內容，在網上搜尋圖片等素材，音頻和視頻文件則是很早之前就有收藏。之后又利用各種軟件處理好，做成適合網頁制作的大小和美感。

第三步，網頁制作； 打開Dreamweaver CS4 開始一點點制作，不懂就問，不懂就查，不懂就搜。期間經歷各種失誤、錯誤，導致兩次NG，不得不重新來過。最后，（此環(huán)節(jié)）耗時兩天，共計36小時以上，終于完成。

3、實驗心得

本次網站制作，感覺比上一實驗視頻制作還要辛苦。相對來說素材要求很多，網站的結構、布局、鏈接等環(huán)節(jié)比較麻煩。畢竟是一個人在完成，沒有美工等的協助。圖片自己處理，音頻自己處理，視頻自己處理。經過此役，完全是一個人在“戰(zhàn)斗”。很辛苦，很累。不過，很值得！

所有的事情一個人完成，那么，所有的知識就是自己學到。經歷過的“阻撓”、“挫折”，實則是寶貴的經驗，現在發(fā)生以后就不會發(fā)生。

其實很多靈感都是在制作過程中產生的，“咦這個導航可以這么來著。”“噢圖片也可以那樣無限滾動展示，多炫！”“嗯，加個音樂效果應該很好?！辈粩嗝俺鲂碌姆绞?，新的靈感。這也算是工作的樂趣所在，沉浸于此，知足常樂。

較大的一次失誤出現在鏈接設置，初步的結構做出來之后測試了一下可以通過。然后在查看鏈接時候，之前正確的鏈接在查了一遍之后全部錯誤。當時心死一般的冰涼啊，如果錯誤那就預示著又要全部重新來過，情形十分駭人。

不能大意，又檢查了一遍還是錯誤。報錯在百度搜索了一下，也沒有解決之道。就在即將按下刪除的確認時候，一下子驚醒過來。迅速在每個文件夾中建立鏈接的Button文件。再次測試終于成功，頓時“淚流滿面”，欣喜若狂。

這事說明了，遇事千萬不能慌亂，以免做出任何不智的舉動，使得之后萬分后悔為時已晚。心若冰清，天塌不驚！

【實驗結果】

附件：

壓縮文件：多媒體實驗四.rar 附件下載：百度網盤

http://pan點baidu點com/share/link?shareid=455970&uk=4228522131

注意：該網站內所有鏈接是建立在作者主機之上，若是拷貝至其他電腦，煩請在D盤根目錄之下建立My Documents文件夾，并將MySite文件夾解壓至其中。

如圖：

然后運行MySite中的home.html文件，若是部分內容無法顯示，請設置瀏覽器允許插件運行，或者下載支持插件。

第三篇：網頁制作與規(guī)劃實驗教案

實驗一 站點的創(chuàng)建與基本HTML標記的應用

一、實驗目的及要求

1.了解組成網頁的基本元素

2.掌握文本元素的添加和編輯方法 3.掌握圖像元素的添加和運用技巧 4.掌握幾種鏈接的具體創(chuàng)建方法 5.掌握圖像元素的添加和運用技巧

二、實驗學時

4學時

三、實驗內容

任務一：在網頁中基本頁面元素的應用 1．準備工作

在c盤或其他盤新建一個文件夾作為站點文件夾，文件夾名稱為myweb3。復制給定的一個圖像文件夾images和一個網頁文件sx3-2.htm。

2．建立本地站點

‘ 用已學方法建立本地站點。

3．依據圖3．38所示的效果，向網頁中添加并編輯頁面元素，具體操作步驟如下。

(1)在默認打開的網頁中選擇“修改”|“頁面屬性”菜單命令，設置使

背景顏色為#CCCCCC。

(2)輸入網頁首行文本“老郵票知多少”，大小為48像素，顏色為#FFFF00，字體為“華文行楷”粗體，居中對齊。

(3)在網頁第二行插入更新日期和版權信息，選擇“插入”l“日期”菜單命令，將當前編輯日期插入網頁，然后利用“插入”面板上“文本”選項卡中的晶按鈕，插入多個空格，再輸入版權信息“◎版權所有：D．Wei@sohu．com”整行文字大小為18像素，顏色為#000000，字體為默認字體，粗體，居中對齊。

(4)在網頁第三行選擇“插入”|“水平線”菜單命令，插入一條水平線，高度為5，其他屬性取默認值。

(5)在網頁第四行、第七行各插入一行文本，內容分別為“紀33(C33)：中國古代科學家、1955．8．25發(fā)行600萬套、全套4枚、新票市場參考價￥550元。”和“紀36(C36)：中國工農紅軍勝利完成二萬五千里長征二十周年、1955．12．30發(fā)行600萬套、全套2枚、新票市場參考價￥850元?！蔽淖执笮?8像素，格式為“項目列表”，其他屬性取默認值。

(6)在網頁第五行選擇“插入”I“圖像”菜單命令，插入四張郵票圖像，文件名分別為0637.jpg、0638.jpg、0639.jpg、0640.ipg。每張圖像的寬為

110、高為150，其他屬性取默認值。

(7)在網頁第六行插入一條水平線，寬為400像素，其他屬性取默認值。

(8)在網頁第八行插入兩張郵票圖像，文件名分別為0645.jPg、0646.ipg，圖像寬高分別為150／110和110／150，其他屬性取默認值。

4．保存網頁 選擇“文件”“|保存”菜單命令，在站點中將此網頁保存為sx3-1．htm。5．打開并編輯給定的網頁文件sx3．2．htm，如圖3-39所示。

(1)建立圖像熱點鏈接。為此選中網頁上方圖像，利用“屬性”檢查器

中的熱點工具在圖像上建立兩個熱點，如圖3．40所示。從左到右兩個熱點分別鏈接到sx3-2-1．htm和sx3-2-2．htm文件(兩個文件可稍后建立)。

(2)插入命名錨記。為此將光標放在網頁標題“教育天地”后，選擇“插入”I‘‘命名錨i6'’菜單命令，在輸入對話框中輸入錨記“A0“。依此方法在網頁右側文本“教養(yǎng)員”、“教員”、“特級教師”、“助教”、“講師”、“副教授”和“教授”處分別插入命名錨記，依次為A1～A7。

(3)創(chuàng)建錨點鏈接。為此分別創(chuàng)建左列目錄文本“教養(yǎng)員”、“教員”、“特級教師”、“助教”、“講師”、“副教授”和“教授”與右列命名錨記A1～A7的錨點鏈接。然后再將各段下方的文本“返回”與標題處錨記A0建立錨點鏈接。

(4)創(chuàng)建無址鏈接。選中網頁上方文本“教師篇”，在“屬性”檢查器的鏈接欄中輸入“≠}”即可。

(5)創(chuàng)建郵件鏈接。選中網頁最后一行文本“聯系”，然后在“屬性”檢查器的鏈接欄中輸入“mailto：abc@163．com'’即可。如圖3—41所示。

6．保存網頁

選擇“文件”I“保存”菜單命令，將此網頁保存在站點中。7建立其他網頁

(1)新建一張網頁，輸入“名人看教育”，文件名為sx3-2-1.htm，保存

在站點中。

(2)再新建一張網頁，輸入“教育話題”，文件名為sx3-2-2.htm，保存在站點中。

8．站點測試

按【F12】鍵在瀏覽器中預覽，觀察效果與樣圖是否一致。單擊建立的每個鏈接，以測試超鏈接是否都能夠正確跳轉。

任務二：HTML基本標記的應用 1．準備工作

在C盤或其他盤符下新建一個工作夾，制作的所有頁面都保存在這個文件夾內。將給定的圖像素材文件復制到工作文件夾中。

2．建立名稱為了test.html的HTML頁面，效果如圖4-1所示。頁面功能要求為：

（1）頁面標題為“基本標記測試”；

（2）頁面內的所有標題文字均為標題2格式；

（3）單擊鏈接文字時要求在新的瀏覽器窗口中，打開test.html頁面自身；

(4)圖片名稱為1．gif，存放在工作文件夾中，與test．htm頁面位于同一位置；

(5)依據圖4—1所示樣式，完成頁面中的表格制作

3．建立名稱為login．htm的HTMI。頁面，效果如圖4—2所示。頁面功能要求為：

(1)頁面標題為“表單標記測試”；

(2)“姓名”為單行文本框，寬10個字符，最多能填寫20個字符；(3)“性別”為單選按鈕，傳遞的值為“男”和“女”，第一個按鈕為默認選中；

(4)“職業(yè)”為下拉列表框，內容有“教師”、“工人”和“職員”；(5)“愛好”為復選按鈕，傳遞的值分別對應為1，2，3，4，第一個按

鈕為默認選中；

(6)“留言”為多行文本框，大小為5行40列，默認內容為“說幾句吧!”；(7)“提交”按鈕和“重置”按鈕分別完成提交表單功能和重置表單功能，表單提交方式為get；

(8)頁面上的所有文字默認為3號字。4．頁面測試

在瀏覽器中瀏覽所完成的頁面，觀察效果是否符合要求。

實驗二 表格、表單和框架的應用

一、實驗目的及要求 1.掌握表格的基本用法 2.掌握表格布局頁面的方法 3.學會用框架布局頁面的方法 4.了解框架布局的特點

二、實驗學時

10學時

三、實驗內容

任務一：表格的應用 1．準備工作

在c盤或其他盤新建一個文件夾，作為站點文件夾。輸入你想要的站點名稱，這里輸入myweb5。在此文件夾中新建一個圖像文件夾images，并將給定圖像素材復制到其中。

2．建立本地站點

用已學方法建立本地站點。3．利用表格編輯首頁

(1)在默認打開的網頁中，選擇“修改”l‘‘頁面屬性”菜單命令，設置背景顏色為#clclcl。

(2)在網頁中插入一個2行2列的表格，參數設置如圖5-21所示。選中表格，在“屬性”檢查器的表格“高”輸入框中輸入100，單位為“％”。將第一行兩個單元格合并為一個，如圖5-22所示。

．

(3)利用“屬性”檢查器調整3個單元格的寬度和高度。將光標放在第一行單元格內，在“屬性”檢查器“高”輸入框中輸入110，“寬”不輸入；將光標放在第二行第一個單元格內，在“屬性”檢查器“寬”輸入框中輸入250，“高”不輸入；將光標放在第二行第二個單元格內，在“屬性”檢查器“寬”輸入框中輸入450，“高”不輸入。效果如圖5-22所示。

(4)按樣張(如圖5-23所示)在第一行單元格中輸入“飲食本草”，文字大小80像素，字體“華文彩云”，前兩個字白色，后兩個字顏色為#009900。在文字下方插入一條水平線，屬性取默認值。

(5)在第二行第一個單元格內插入一嵌套表格，表格相關屬性分別為8行1列、表格高度和寬度均為100％、邊框粗細為0、單元格邊框為0、單元格間距為0。如圖5．23所示。

(6)在第二行第二個單元格內插入一嵌套表格，表格相關屬性分別為3行3列、表格高度和寬度均為100％、邊框粗細為

2、單元格邊框為0、單元格間距為0。如圖5-23所示。

(7)在左側嵌套表格各行中分別輸入圖5．24所示內容，然后將8個單元格的高度均設置為50。文字大小為36，字體為“華文新魏”，然后將每行文字均創(chuàng)建無址鏈接。

（8）在中側嵌套表格中分別插入5張文件夾images中的圖片，每張圖片的寬度和高度均為150，注意：當圖片尺寸變小后，表格不會自動縮小，這時可以選中整個表格，在“屬性”檢查器中單擊“清除行高”和“清除列寬”兩個按鈕來調整表格大小。

4．保存網頁

選擇“文件”！“保存”菜單命令，將此網頁保存在站點中。5．站點測試

按【F12】鍵在瀏覽器中預覽，觀察效果是否與樣張一樣。任務二：框架的應用 1．準備工作

在C盤或其他盤新建一個文件夾，作為站點文件夾。并將給定的圖片文件和素材文件復制到站點文件夾中。

2．建立本地站點

用已學方法建立本地站點。3．利用框架布局頁面

站點首頁部局效果如圖15-15所示，頁面制作步驟如下。（1）在默認打開的網頁中，選擇“插入”面板上的“布局’’選項卡。單擊框架按鈕的下拉箭頭，從下拉菜單中選擇命令。

(2)將光標置于頂端框架內，選擇“修改”|“頁面屬性”菜單命令，設置背景顏色為#C1C1C1。同理將左框架和主框架的頁面背景色都設置為#C1C1C1。

(3)選擇“窗口“|‘‘框架”菜單命令，將“框架”面板調出來。然后設置三個框架的大小。

“頂端框架”：在“框架”面板中選定外層框架集，在“屬性”檢查器將頂端框架的高度設置為“120像素”，下面部分設置為“1”，單位為“相對”。將“邊框”設置為“是”，“邊框寬度”設置為1’，邊框顏色設置為“#CCCCCC”。如圖15—16所示。

“左側框架”在“框架”面板中選定內層的子框架集，在“屬性”檢查器將左側框+架的寬度設置為“250像素”，右側主框架設置為“1”，單位為“相對”。將“邊框”設置為“是”，“邊框寬度”設置為“1’，邊框顏色設置為“#CCCCCC”。如圖15—17所示。

(4)在頂端框架內輸入站點標題‘‘飲食本草”，文字大小為80像素，字體為“華文彩云”，前兩個字白色，后兩個字顏色為#009900，居中對齊。

(5)在左側框架內插入一個表格，表格相關屬性分別為9行1列、表格高度和為100％、寬度為100％、邊框粗細為0、單元格邊框為0、單元格間距為0、對齊方式為右對齊。然后

將9個單元格的高度均設置為50，在其中輸入樣張中的文字，文字大小為36，字體為“華文

新魏”。如圖15．15所示。

(6)在右側主框架中插入一個表格，表格相關屬性分別為3行3列、表格高度和寬度任意、邊框粗細為

2、單元格邊框為0、單元格間距為0、居中對齊。按樣張效果在表格中分別插入5 張文件夾images中的圖片，每張圖片的寬度和高度均為150。注意：當圖片尺寸變小后，要在“屬

性，檢查器中單擊cc清除行高’’和“清除列寬”兩個按鈕，使表格調整到最小。如圖15—15所示。

4．保存框架網頁

選擇“文件”|“保存全部”菜單命令，按照保存窗口彈出的順序，分別將框架集、右側

主框架、左側框架、頂端框架命名為index．htm、main．htm、left．htm、top．htm。注意以上文件均保存在本站點中。

5．建立導航鏈接 具體制作步驟如下。

(1)按導航欄目分別建立8個相關內容的頁面，或者從提供的素材文件中獲取。

(2)在左側框架內選擇“首頁”文字，在“屬性”檢查器的鏈接欄中設置目標文件為本框架集頁面．Index．htm，目標選擇“parent'’。

(3)在左側框架內選擇“谷物篇”文字，在“屬性”檢查器的“鏈接”欄中設置目標文件為素材文件guwu．htm，“目標”欄選擇右側主框架的名稱“mainframe”。同理，將左側框 架內的各項導航內容分別鏈接到對應的素材文件，且“目標”均設置為“mainframe”。

(4)再次選擇“文件”|“保存全部”菜單命令。6．預覽和測試站點

在打開的Index．htm文件中，按【F12】鍵在瀏覽器中預覽，觀察效果與樣張是否一樣，然后，測試各導航鏈接內容和顯示位置是否正確。效果如圖15-18所示。

實驗三 網頁圖像和動畫的設計與應用

一、實驗目的及要求

1．掌握在Fireworks中創(chuàng)建動畫的方法 2．掌握在Fireworks中制作蒙版的創(chuàng)建方法 3．掌握基本動畫補間操作

二、實驗學時

8學時

三、實驗內容 任務一：gif動畫 1．準備工作

在c盤或其他盤新建一個文件夾，本次實訓的內容將全部保存在該文件夾下。

2．一張向日葵畫框圖片的制作(1)新建文件

打開Fireworks 8，在“開始頁”中選擇“新建Fireworks文件”，新建一個空白文件。在彈出的“新建文檔”中設置畫布的“寬”為360，“高”為400，畫布顏色選擇白色，然后單擊“確定”按鈕。選擇“文件”|‘‘另存為”菜單命令，將文件以“sx6—1．png”為文件名保存在指定文件夾下。

(2)制作圖片 選擇“文件”l‘‘導入”菜單命令，在“導入”對話框中選擇需要導入的圖片“畫框．gif”。此時光標的形狀變?yōu)閂-，在畫布上單擊鼠標左鍵，即可將該圖片以原始大小導入(也可以按下左鍵拖放，將圖片以不同的大小導入)。此時可以在“層”面板中看到剛導入的對象。用相同的方法導入第二張圖片“向日葵．png”，將圖片的大小調整合適，放入畫框內，并調整整個圖片的坐標，到此這個圖片的制作就完成了。單擊“主要”工具欄上的“保存”按鈕，保存文件。

(3)圖片的優(yōu)化和導出

選擇“窗口”l“優(yōu)化”菜單命令，打開“優(yōu)化”面板，如圖6-23所示的設置。選擇“文件”|“導出”菜單命令，在彈出的“導出”對話框中，“文件名”一欄輸入文件名“sx6—1．jpg”，選擇侏存類型為“僅圖像”，單擊“保存”按鈕，該文件即可以JPEG的文件格式輸出。

選擇“文件”l礫存”菜單命令，保存源文件，單擊“預覽”按鈕預覽效果，如圖6-24所示。

3．進一步編輯向日葵畫框圖片(1)新建一幀

打開剛剛創(chuàng)建的向日葵畫框，即“sx6—1．png”。在“幀”面板，選擇剛才已有的第一幀，將它拖到“新建／重制幀”按鈕上釋放，得到復制的一幀。

將新復制的第二幀選中，將原有的向日葵圖片刪除，重新導入另一幅圖像“椰子樹．jpg”，并調整大小使其居于畫框內。這樣當前文件具有兩個幀的畫面，如圖6—25所示。

(2)觀看動畫播放效果

單擊位于工作窗口下方幀控制器的“播放”按鈕，觀看動畫播放效果。單擊“停止”按鈕，停止播放。

如果不滿意，可以返回幀1或幀2進行修改。

如果想調整兩幀的播放速度，可以在幀面板雙擊每幀右側的數字“7”，將其修改成想要的值。

再次通過幀控制器觀看動畫播放效果，如果想再增加幾幀，可以按上面的方法進行編輯，直至滿意為止。

選擇“文件”|“另存為”菜單命令，將文件以“sx6．2．png'’為文件名保存在指定文件夾下保存文件。

再選擇“文件”|“圖像預覽”菜單命令，打開“圖像預覽”對話框，如圖6—26所示。

選擇導出的文件格式為“GIF動畫”，然后再選擇“導出”按鈕，就可以導出GIF動畫文件，文件名為“sx6．2．gift。這樣可以在Fireworks之外，同樣看到動畫效果。

任務二：蒙版和動畫的制作 1．準備工作

在c盤或其他盤新建一個文件夾，將給定圖像素材復制到其中，本次實訓的內容將全部保存在該文件夾下。

2．導入圖像并調整畫布

新建空白文檔，大小、顏色均默認。

選擇“文件”l“導入”菜單命令，將指定文件夾中的圖像導入文檔。選中圖片，在“屬性”檢查器中修改圖片的寬、高值(500×400)。然后單擊畫布之外，在“屬性”檢查器選擇“符合畫布”命令，使畫布和圖片一樣大且對齊。

在“屬性”檢查器選擇“畫布”旁邊的拾色器，把畫布顏色改成自己喜歡的顏色。

3．制作矢量蒙版

選擇橢圓工具，在窗口中畫一個橢圓。選擇“編輯”I“剪切”菜單命令，橢圓消失，用鼠標再次選中導入的圖像，然后選擇“編輯”I“粘貼為蒙版”菜單命令，出現蒙版效果，如圖9-36所示。

打開“層”面板，如圖9-37所示。單擊層中圖片與蒙版之間的鏈接@標記，可以使它消失，再次單擊又會出現。它的出現與消失決定著蒙版是否與圖片鏈接在一起。當未鏈接時，單擊“層”面板中的蒙版圖標，使它周圍出現綠框。如圖9-38所示。

用鼠標移動畫布上橢圓的位置，效果如圖9-39所示。

把位置調整到理想狀態(tài)后，選擇“文件”|“另存為”菜單命令，將文件以“sx9-1．png'，為名保存在指定文件夾下。

4．修改蒙版效果

打開剛才新建的蒙版文件，在“層”面板選中蒙版。在“屬性”檢查器中，選擇“蒙版”為“灰度外觀”，將方式改為“放射狀”，并單擊旁邊的拾色器，將放射狀填充的中心調整為透明(白色)，邊緣調整為不透明(黑色)，如圖9-40所示。

在“屬性”檢查器中，將“邊緣”修改為“羽化”，值為“50'’，“描邊”設置為“無”，如下圖9-41所示。

在畫布上適當調整橢圓填充的放射中心和幅度，最后達到如圖9—42所示效果。

5．制作位圖蒙版，打開給定圖像文件0258.jpg，另存為sx9-2.jpg。把顯示的縮放比例調整為66%。單擊“層”面板的“添加蒙版”按鈕，并在“層”面板選中，然后按照圖9-43蒙版圖標。

在“工具”面板“顏色”部分中選擇“漸變”工具設置蒙版的相關屬性。

在圖像中間拖動鼠標，使填充呈由中心向四周的放射形狀。圖像產生了蒙版效果，同時“層”面板的蒙版圖標也發(fā)生了變化。如圖9-44所示。

6.制作文本蒙版

打開給定圖像文件0258.jpg，另存為sx9-3.jpg。把顯示的縮放比例調整為66%。在“工具”面板“矢量”部分中選取“文字”工具。輸入文字“熱帶風情”，字體為華文行楷，大小150。選中文字，選擇“編輯”|“剪切”菜單命令，將其剪切。在“層”面板中選擇取位圖標，然后選擇“編輯”|“粘貼為蒙版”菜單命令。圖像產生了蒙版效果，同時“層”面板也出出了文本蒙版圖標，如圖9-45所示。

任務三：風吹樹葉(1)新建Flash文件。

(2)修改背景顏色為“藍色”。

(3)使用“文本工具”按鈕，創(chuàng)建文字“風吹效果”四個字，用工具選中文字并按【Ctrl】+【B】一次，將四個字分解為個體。如13-11所示。

(4)再次用工具，選中“風”字然后選擇“修改”|轉換為元件”菜單命令。在彈出轉換為符號“對話框中，將元件名稱改為“風”，如圖13-12所示。

(5)重復步驟(4)，將剩下的三個字“吹”、“效”、“果”也依次做成圖形元件。

(6)選中所有的文字，然后鼠標右擊，在彈出的上下文菜單中選擇“分散到各層”，于是個字將分別處于四個不同的圖層。這樣做是為了動畫漸變能夠正確的執(zhí)行。

如果分散到各層后文字沒有對齊，則可用“對齊面板”，將各層的文字重新排列好?！皩γ姘迦鐖D13-13所示，可以通過菜單“窗口”|對齊’’菜單命令打開“對齊”面板。

(7)在時間軸中第1 5幀處，給各層“添加關鍵幀”，選中第15幀。(8)將四個字全部選中，使用鼠標向上移動一段距離，選擇“修改”|變形”|“水平翻轉”菜單命令，將四個字水平翻轉一下，然后調整字體的位置，用“對齊’’面板排列字體，如圖13-14所示。

(9)選中所有元件，在“屬性，檢查器中將顏色“Alpha”值設為“O”，如圖13-15所示。

(1 O)在“吹”、“效”、“果”三個元件所在層的第1幀處創(chuàng)建動畫補間，如圖13-16所示。

(11)按住【Ctrl】鍵，選擇第二層的第2幀到最后一幀。按住鼠標左鍵不放，將位置向后拖放一段距離，如圖13-17所示。

(1 2)參照步驟(1 0)內容，將‘‘效”、“果”兩個元件所在層的位置分別后移，如圖13-l8所示。

(1 3)按【Ctrl】+【Enter】組合鍵查看效果。任務四：球的跳動 1.準備工作

在c盤或其他盤新建一個文件夾，并將給定的圖片文件和素材文件復制到站點文件夾中。本次初訓的內容將全部保存在該文件夾下。

2．素材的導入

1)新建文件

打開Flash 8，在“開始頁”中選擇“新建Flash文件”，以新建一個空白文件。背景色為“白色’’。

選擇“文件”|“保存”菜單命令，將文件保存為ex3.fla文件。2)“球’’的導入

選擇“文件”|“導入”|“導入到庫”菜單命令將“球”導入到庫，如圖13-33所示。

3.元件的轉換

選擇“修改”|“轉換為元件”菜單命令，將圖片轉換為“圖形”元件，并命名為“球”。13-34所示。

4．動作補間的設置

將元件“球”拖放到場景1的圖層1中。在圖層1的第60幀處插入關鍵幀，如圖13-35所示。

在第1幀處添加‘‘動畫補-間，效果，如圖13-36所示。

在第1幀處處的“屬性”檢查器中，單擊“緩動”旁邊的“編輯”按鈕，設置動作的“緩入|緩出”效果(通過緩入／緩出可以控制動畫漸變的速度和狀態(tài))。設置效果如圖13-37所示。

在“自定義緩入／緩出”對話框定義各個幀處的動畫補間速度和方向。新建圖形元件，命名為“陰影”，設置筆觸色為“無”，填充色為“黑白漸變”，白色部分的alpha透明度為29％。使用橢圓工具繪制一個橢圓，設置面板如圖13-38所示，繪制的效果如13-39所示。

在場景1中新建圖層2，將元件“陰影”拖放到第1幀處的恰當位置(在球落下的下方)，并在第60幀插入關鍵幀，陰影位置如圖13—40所示。

在圖層2第1幀處設置元件“陰影”的A1pha透明度為20％，如圖1 3-4 1所示。

在圖層2第1幀處設置補間動作，如圖1 3—42所示。

打開圖層1第一幀“屬性”，檢查器的“自定義緩入／緩出”面板，按鍵【Ctrl】+【c】復制緩動效果。打開圖層2第一幀處的“自定義緩入／緩出”面板，按I Ctrl 】+【V】組合鍵，將其粘貼到陰影動畫補間中。

5．發(fā)布動畫

使用“文件”|“發(fā)布”菜單命令進行發(fā)布。

實驗四 層疊樣式與層的應用

一、實驗目的及要求 1.掌握層的正確定位方法

2.學會利用層來制作彈出式菜單 3.了解時間軸的編輯特點和方法 4．學會定義和應用CSS樣式

二、實驗學時

6學時

三、實驗內容

任務一：利用層制作彈出菜單

步驟：

l準備工作

在c盤或其他盤新建一個文件夾，作為站點文件夾。將給定的素材文件存入其中。

2．建立本地站點

啟動Dreamweaver·8，用已學方法建立本地站點。3．利用圖層制作下拉彈出菜單

(1)新建一個空白頁面，選擇“修改”I“頁面屬性”菜單命令，設置頁面的背景顏色為#FFCC99，左邊距為0，上邊距為0。

(2)在文檔第一行插入一行文字“電子信息職業(yè)技術學院”作為站點標題，字體為華文行楷，大小為48號字，顏色為#FF9933。

(3)在標題的下一行插入一個l行5列的表格，表格寬度800像素，邊框粗細為l，高 度30，平均分配各列(每列寬度為160像素)，表格背景顏色為#9999FF。

(4)在表格的各列分別寫入“首頁”、“學院概況”、“師資建設”、“系部設置”、“招生就業(yè)”，各單元格文字對齊方式為居中對齊，文字為粗體顯示。如圖16—16所示。

(5)在“學院概況”列中添加一個圖層，命名為“Layerl”，注意不可見元素“層錨記”應在此列當中。如果不在，可用鼠標將其拖到此列中。然后在圖層中添加一個3行l(wèi)列的表格，表格寬度為160像素，各行高度為30像素，邊框粗細為1，單元格文字為居中對齊，表格背景顏色為#9999F’F，文字為粗體顯示。三個單元格內容為“學院簡介”、“辦學思想”、“校園風景”，如圖16．17所示。

(6)同樣在其他幾列中也分別添加圖層，各自命名為“Layer2'’，“Layer3”，“Layer4”。其中Layer2中插入3行1列的表格，表格屬性與Layerl中的相同，內容為“隊伍建設、名師風采、優(yōu)秀教師”；L,ayer3中插入5行l(wèi)列的表格，表格屬性與L,ayerl中的相同，內容為“機電技術系、電子技術系、計算機應用系、計算機網絡系、計算機軟件系”；Layer4中插入2行1列的表格，表格屬性與Layerl中的相同，內容為“招生信息、就業(yè)信息”。如圖16—18所示。

(7)調整各層的位置。注意：層的調整非常重要，不同的瀏覽器窗口大

小，不同的分辨率，層的位置顯示都不是一樣。即使在同一個機器上調整瀏覽器的窗口大小，都會出現位置的變動。Dreamweaver中并不是所見即所得，需要我們來精確定位才會達到滿意的效罘。為此，首先固定表格的寬度，本例中將表格固定為寬度800，高度30。然后固定層的位置，這

個位置需要計算一下，計算公式并不是很難。本例中表格總寬度為800，共有5列，這樣每列的橫坐標起始位置的計算公式為：

800÷5*(當前列一1)對于“Layerl”，當前列為2，所以結果為160。

最后加上一個將要創(chuàng)建的層與原表格列偏移值，那么計算各列下屬的層的橫坐標公式變?yōu)椋?/p>

800--5x(當前列-1)+偏移量

這個偏移量需要通過大家試驗來最終確定，因為不同的字體和寬度這個值是不同的。這里測試滿意的效果是-1，所示Layer1的實際工資起始橫坐標為159據這個公式將各個層的位置設定好，最好不要用鼠標禾移功定位。要使用“屬性”檢查器來設置。(8)打開“層，面板，將Layerl～Layer4都設置為隱藏狀態(tài)。．

(9)在窗口左下方選中第2列“學院概況”所在單元格的標簽選擇器，在“行為”面板中為其添加“顯示一隱藏層’’行為，將“Layerl”設定為“顯示”，如圖16-19所示。

(10)更改行為的觸發(fā)事件為“onMouseOver”。(11)再次選中第二列的標簽選擇器，在‘‘行為’’面板中為其添加“顯示一隱藏層”行為，設定圖層Layerl為‘‘隱藏”，并更改此行為的觸發(fā)事件為“onlMoluseOut”。．

(12)重復步驟9～1l，為第三列、第四列、第五列添加顯示與隱藏圖層的行為。

4．保存與預覽

保存文件為Index．html，然后按IFl2]鍵進行預覽。當移動鼠標到菜單時，將顯示當前菜單項所屬的子菜單內容，當鼠標離開顯示的子菜單時，子菜單隱藏，返回初始狀態(tài)。最終效果如圖16—20所示。

5．為下拉菜單設置超級鏈接

(1)根據菜單內容，建立相應的其他頁面文件。(2)為各菜單項設置跳轉到這些頁面的超級鏈接。(3)再次保存文件并預覽效果。任務二：時間軸 步驟：

1．準備工作

在C。盤或其他盤新建一個文件夾，作為站點文件夾。在此站點中再建一個images子文件夾，將給定的素材存入其中。2．建立本地站點

啟動Dreamweaver 8，用已學方法建立本地站點。

3.利用時間軸使層做直線運動

(1)打開給定的網頁文件sx17-1-1.htm，在網頁上插入一個層”Layerl",并將其位置調整好，然后在其中插入給定的圖片imgl．gif,圖片大小為64×64。如圖17-9所示.(2)打開“時間軸”面板，把圖層Layerl拖到“時間軸’’面板上，單擊最后一幀關鍵幀，并將其拖到第100幀的位置。再單擊圖層Layerl，將 Layerl水平拖動到頁面的右側。如圖17-10所示。

(3)選中“時間軸”面板上的“自動播放”和“循環(huán)”選項。

(4)將文件另存為sxl7-1-3．htm，并在瀏覽器中預覽，即可看到小豬從頁面左側運動到 右側，并循環(huán)播放。

4．利用時間軸使層做軌跡運動

(1)打開剛才保存的sxl7-1-3．htm文檔，再插入一個圖層Layer2，并將給定的圖片img2．Gif插入其中，設置圖片和層的大小均為100*100，如圖17-11所示。

(2)右擊“時間軸”面板的動畫通道，在彈出的快捷菜單中選擇“添加時間軸”命令，新添加的時間軸為“Timeline2'’。

(3)選中頁面中的圖層Layer2，并單擊右鍵，在彈出的快捷菜單中選擇

“記錄路徑”命令，緊接著用鼠標拖動層左上角的標記在頁面上移動繪制路徑，釋放鼠標，在頁面上出現了一條灰色的路徑。同時，時間軸上也出現了一個有多個關鍵幀的動畫條。如圖17-12所示。

(4)選中“時間軸”面板上的“自動播放”和“循環(huán)”選項。

(5)保存文件，并在瀏覽器中預覽，即可看到小豬從頁面左側運動到右側的同時，另一小豬在頁面上按繪制的軌跡進行移動，并循環(huán)播放。5．給移動的小豬添加行為和超級鏈接

(1)選中頁面中的Layer2，打開“行為”面板，單擊“+”按鈕，從彈出的菜單中選擇“時間軸”I“停止時間軸”命令。然后從對話框中選擇“1'imeline2'’，單擊“確定”按鈕。在“行為”面板中將事件改為onMouseover。(2)再次單擊“行為”面板的“+”按鈕，從彈出的菜單中選擇“時間軸”}“播放時間軸”命令。然后從對話框中選擇“Timeline2'’，單擊“確定”按鈕。在“行為”面板中將事件改為onMouseout。

(3)選中Layer2層中的圖片，在“屬性”檢查器的鏈接欄中輸入“sxl7-1-2．htm'’(預先編輯好的網頁)，在替代欄中輸入“單擊有驚喜”。

(4)保存文件，并在瀏覽器中預覽，即可看到當鼠標指向小豬時，小豬停止移動；當鼠標離開小豬時，小豬繼續(xù)移動。當鼠標單擊小豬時，跳轉到sxl7-1-2．htm頁面。

任務三：利用CSS樣式改變頁面風格 步驟：

1．準備工作

在c盤或其他盤新建一個文件夾，作為站點文件夾。將給定的網頁文件及素材文件夾存入該文件夾中。

2．建立本地站點

啟動Dreamweaver 8，用已學方法建立本地站點。3．自定義樣式的定義及應用

(1)打開站點中給定的sx20．1．1．htm文檔。(2)選擇“窗口”I‘‘樣式”菜單命令，將“CSS樣式”面板打開。(3)單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對話框。在選擇器類型處選擇“類(可應用于任何標簽)”，名稱處輸入“ysl”，定義在處選擇“僅對該文檔”。單擊“確定”按鈕。

(4)在彈出的“ysl的CSS樣式定義”對話框中，進行如圖20-25所示的樣式定義(類型：字體為隸書，大小為36像素，顏色為#0033FF；區(qū)塊：文字對齊為居中)。

(5)用同樣的方法定義樣式“ys2”，定義內容如圖20-26所示(類型：

字體為華文新魏，大小為24像素；區(qū)塊：文字對齊為居中)。

(6)用同樣的方法定義樣式“ys3”，定義內容如圖20—27所示(類型：字體為隸書，大小為36像素，粗細為粗體，#00CC33；區(qū)塊：文字對齊為居中)。

(7)下面開始應用已定義的樣式。選中第一行標題“唐詩欣賞”，單擊右鍵，選擇“CSS樣式y(tǒng)sl，(或者用前面介紹的其他方法來應用ysl)，這時標題已變成所定義的樣式了。用同樣的方法，將每首詩的詩文內容應用

‘‘ys2’’，將每首詩的標題段落應用“ys3”。效果如圖20-28所示。

(8)修改頁面的背景風格。首先為頁面設置背景圖像(站點中images文件夾中的bj．jpg文件)，效果如圖20-29所示。由于選擇的背景圖像的尺寸不夠大，在頁面中圖像會以不斷重復的形式鋪滿整個頁面，視覺效果不夠理想。

(9)在“CSS樣式”面板新建自定義樣式“ys4”，在樣式定義對話框中，背景樣式的設置如圖20—30所示(背景：重復為不重復，附件為固定，水平位置為居中，垂直位置為居中)。

(10)選擇文檔窗口左下方的標簽選擇器<．body>，然后單擊右鍵，從下拉列表中選擇“設置類，ys4”，文檔應用樣式y(tǒng)s4后的效果如圖20-31所示。當預覽時會發(fā)現背景圖像居中并不再重復，且當用鼠標滾動游覽文字時，背景圖像保持靜止，而不隨文字的滾動而滾動。

4．重定義特定標簽外觀

(1)單擊“CSS樣式”面板下方的“新建(；SS樣式”按鈕，打開新建樣式對話框，選擇器類型處選擇“標簽(重定義特殊標簽的外觀)”，標簽處下拉列表選擇“l(fā)n定義在處選擇“僅對該文檔”。單擊“確定”按鈕。

(2)在彈出的“l(fā)i的CSS樣式定義”對話框中，進行如圖20-32所示的樣式定義(類型：字體為華文新魏，大小為24像素；列表：項目符號圖像為0001．gif)。

(3)單擊“確定”按鈕，發(fā)現頁面列表外觀發(fā)生了變化。效果如圖20-33

所示。

(4)再次單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對話框，選擇器類型處選擇“標簽(重定義特殊標簽的外觀)”，標簽處下拉列表選擇“a”，定義在處選擇“僅對該文檔”。單擊“確定”按鈕。

(5)在彈出的‘‘a的cSS樣式定義”對話框中，進行定義，其中類型分類中只將修飾選擇為‘‘無”。單擊“確定”后，頁面中超級鏈接的下劃線處的修飾沒有了，如圖20-33所示。

5．鏈接文字技術

(1)單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對話框，選擇器類型處選擇“高級(ID、偽類選擇器等)”，選擇器處下拉列表選擇“a：link”，定義在處選擇“僅對該文檔”。單擊“確定”按鈕。

(2)在彈出的“a：link的(；SS樣式定義”對話框中，進行如圖20—34所示的樣式定義(類型：字體為華文新魏，大小為24像素，顏色為#CC0099，修飾為無)。

(3)再次單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，在對話框中其他選項不變，只將選擇器選為“a：hover'。然后在“a：hover的CSS樣式定義”對話框中，進行如圖20—35所示的樣式定義(類型：字體為華文新魏，大小為24像素，顏色為#FF0000，修飾為下劃線)。

(4)單擊“確定”按鈕，關閉定義對話框。預覽時可以看到當鼠標指針移到超級鏈接文字時，文字變?yōu)榧t色且出現下劃線修飾。

(5)將網頁另存為Index．．html，按【F12】預覽網頁，觀察各種樣式的應用效果。

實驗五

網頁綜合設計

一、實驗目的及要求

利用所學的網頁設計的方法來設計一個個性化的網站，網站的內容一定要合理，內容健康，頁面美觀。

二、實驗學時

6學時

三、實驗內容

自己設計

第四篇：計算機程序設計基礎上機指導(實驗1)

計算機程序設計基礎上機指導

實驗一熟悉C程序的運行環(huán)境和運行一個C程序的方法

一、實驗目的1．熟悉C語言編程環(huán)境創(chuàng)天中文版VC++6.0,掌握運行一個C程序的基本步驟，包括編輯、編譯、連接和運行。

2.了解在該系統(tǒng)上如何編輯、編譯、連接和運行一個C程序。

3.通過運行簡單的C程序，初步了解C源程序的特點。

二、實驗內容

1．建立自己的文件夾

在磁盤上新建一個文件夾，用于存放C程序，如C:liming

2.調用編輯程序

在屏幕上顯示一個短句“Hello World!”。輸入以下程序，并進行編譯和運行。源程序

#include

int main(void)

{

printf(“Hello World!n”);

return 0;

}

運行結果

Hello World！

具體操作步驟見《C語言程序設計實驗指導》第1頁－第4頁。

3．編程題1

在屏幕上顯示一個短句“What is a computer?”

4．編程題2

改寫下列程序，求1－100中能被6整除的所有整數的和，并在編程環(huán)境中驗證該程序的運行結果。

#include

int main(void)

{

int i, sum=0;

for(i=1;i<=100;i++)

if(i%2= = 0)sum=sum+i;

printf(“%d”, sum);

return 0;

}

應了解所用的系統(tǒng)是用什么命令進行編譯和連接運行的。編譯和連接后所得到的目標程序的后綴是什么形式的？

第五篇：網頁設計與制作實驗過程及報告

網頁制作過程及報告

網頁設計與制作的一般實驗步驟：

1、確定網站主題

網站里的每一個網頁都要有統(tǒng)一的風格，以加強渲染自己性格的效果。最重要的是做出自己的風格，吸引瀏覽者的眼球。

2、搜集材料

主要在網站上搜集所要的網頁信息，包括圖片、文字、相關的新聞，同時，查詢相關的圖書、報紙、光盤、多媒體等，也可以得來更加有說服力的信息。

3、規(guī)劃網站

我的網站包括5個頁面。版面設計要靈活，根據各部分內容的不同適當的自由設計。但是每個頁面的主元素和位置不能變。用CSS設計一個樣式，以保證隨時、準確的調用。另外，為了網頁布局的協調，還可以加入flash動態(tài)圖片，會達到更好的效果。

4、選擇合適的制作工具

做網頁的首先工具當然為Dreamweaver。

5、認識網頁設計工具Dreamweaver

（1）Dreamweaver的啟動

（2）窗口組成的認識

6、新建站點

7、站點中首頁的創(chuàng)建

8、制作網頁

素材、風格、模板都設計好以后，下一步就是具體的制作網頁。制作網站時，首先要做的就是站點的規(guī)劃，建立一個本地站點。網頁中的css 樣式文件也應統(tǒng)一管理，做到有條不紊。

9、根據自己的網頁風格，在網上搜集合適的圖片。

最后還要制作各個頁面的鏈接，把整個網頁可憐起來，形成一個統(tǒng)一的整體，方便瀏覽者進行各個頁面間的跳轉。

10、上傳測試

網頁制作完畢以后，要進行測試，在瀏覽器上運行自己的網站，反復測試，以發(fā)現設計中的缺陷。

實驗結果及理論分析：

通過這簡短的三個周的學習，讓我有一個獨立設計，制作網頁的機會，通過這次試驗，我的收益頗多。首先，獨立的實踐了一個完整的網站設計的全過程，把設計中零散的注意點和要求在自己大腦中形成了一個完整的框架體系，使平時學到的知識點有了一個質的升華，并且合理的在試驗中進行了實踐。第二，在這次實驗的過程中，我搜集了大量的素材和網頁設計的技術技巧方面的書，擴大了知識面，給我在以后的設計過程中能博采眾長，制作出技術精湛的網頁打下了基礎。最后，我感受最深的是，技術方面的學習，最重要的是自己實踐做出東西，只通過自己的親身實踐，才能學會、學懂、學通技術。

朱禮明

信息管理與信息系統(tǒng)1301班

2014.07.23