多媒體網(wǎng)頁設(shè)計(jì)與制作

多媒體網(wǎng)頁設(shè)計(jì)與制作3提綱學(xué)會(huì)在網(wǎng)頁中插入多媒體文件2學(xué)會(huì)多媒體網(wǎng)頁的設(shè)計(jì)1學(xué)會(huì)多媒體網(wǎng)頁的合成34學(xué)會(huì)多媒體網(wǎng)頁的設(shè)計(jì)使用Dreamweaver創(chuàng)建站點(diǎn)2認(rèn)識(shí)網(wǎng)頁制作工具Dreamweaver81使用Dreamweaver制作一個(gè)網(wǎng)頁框架355.1.1認(rèn)識(shí)網(wǎng)頁制作工具8工欲善其事，必先利其器。8是在多媒體方面頗有建樹的公司推出的可視化網(wǎng)頁制作工具，它與8、8合在一起被稱為網(wǎng)頁制作三劍客，這三個(gè)軟件相輔相承，是制作網(wǎng)頁的最佳選擇。其中，主要用來制作網(wǎng)頁文件，制作出來的網(wǎng)頁兼容性比較好，制作效率也很高，用來制作精美的網(wǎng)頁動(dòng)畫，而用來處理網(wǎng)頁中的圖形。65.1.1認(rèn)識(shí)網(wǎng)頁制作工具818的功能可視化編輯全面的編碼環(huán)境服務(wù)器技術(shù)功能自定義75.1.1認(rèn)識(shí)網(wǎng)頁制作工具828的工作區(qū)布局85.1.2使用創(chuàng)建站點(diǎn)在中，“站點(diǎn)”一詞既表示站點(diǎn)，又表示屬于站點(diǎn)的文檔的本地存儲(chǔ)位置。在開始構(gòu)建站點(diǎn)之前，您需要建立站點(diǎn)文檔的本地存儲(chǔ)位置。站點(diǎn)可組織與站點(diǎn)相關(guān)的所有文檔，跟蹤和維護(hù)鏈接，管理文件，共享文件以及將站點(diǎn)文件傳輸?shù)椒?wù)器。95.1.2使用創(chuàng)建站點(diǎn)可以使用“站點(diǎn)定義向?qū)А痹O(shè)置站點(diǎn)，該向?qū)?huì)引領(lǐng)您完成設(shè)置過程?；蛘?，也可以使用“站點(diǎn)定義”的“高級(jí)”設(shè)置，根據(jù)需要分別設(shè)置本地文件夾、遠(yuǎn)程文件夾和測(cè)試文件夾。在本教程中，您將使用“站點(diǎn)定義”的“高級(jí)”設(shè)置來設(shè)置項(xiàng)目文件的本地文件夾。在本書后面的部分，您將學(xué)習(xí)如何設(shè)置遠(yuǎn)程文件夾，以便將頁面發(fā)布到服務(wù)器，從而提供給公眾訪問。105.1.2使用創(chuàng)建站點(diǎn)步驟1：將素材文件夾復(fù)制到E盤根目錄下。步驟2：?jiǎn)?dòng)。115.1.2使用創(chuàng)建站點(diǎn)步驟3：創(chuàng)建“多媒體技術(shù)與應(yīng)用基礎(chǔ)”站點(diǎn)。125.1.2使用創(chuàng)建站點(diǎn)步驟3：創(chuàng)建“多媒體技術(shù)與應(yīng)用基礎(chǔ)”站點(diǎn)。135.1.3使用制作網(wǎng)頁框架步驟1：創(chuàng)建新文件。在菜單欄上依次點(diǎn)擊【文件】→【新建】，打開“新建文件”對(duì)話框，在“常規(guī)”選項(xiàng)卡中選擇“基本頁”和，點(diǎn)擊“創(chuàng)建”按鈕即創(chuàng)建一個(gè)新的網(wǎng)頁文件。145.1.3使用制作網(wǎng)頁框架步驟2：保存文件。完成步驟1的操作就創(chuàng)建了一個(gè)空白頁面。在菜單欄上依次點(diǎn)擊【文件】→【保存】，打開“保存”對(duì)話框。保存目錄選擇E盤根目錄下的文件夾，文件名為：。點(diǎn)擊“保存”按鈕保存文件。155.1.3使用制作網(wǎng)頁框架步驟3：插入表格。將光標(biāo)移到頁面內(nèi)，在菜單欄上依次點(diǎn)擊【插入】→【表格】，打開“插入表格”對(duì)話框。165.1.3使用制作網(wǎng)頁框架步驟4：設(shè)置整個(gè)表格屬性。選中表格，在“屬性”檢查器中的對(duì)齊列表中選擇“居中對(duì)齊”。將“背景顏色”設(shè)置為白色。17學(xué)會(huì)在網(wǎng)頁中插入多媒體文件為網(wǎng)頁中插入音頻文件2為網(wǎng)頁中插入圖像文件1為網(wǎng)頁中插入視頻文件3為網(wǎng)頁中插入動(dòng)畫文件4185.2.1為網(wǎng)頁中插入圖像文件一個(gè)頁面僅有文本會(huì)非常單調(diào)，很難吸引人的目光，所以必須在文檔中加入其他元素，如圖像。如果能在網(wǎng)頁設(shè)計(jì)中恰當(dāng)?shù)剡\(yùn)用圖像，既能使網(wǎng)頁美觀生動(dòng)而且富有生機(jī)，又能體現(xiàn)網(wǎng)站的風(fēng)格和特色圖像，加深用戶對(duì)網(wǎng)站的良好印象。應(yīng)用與網(wǎng)頁中的圖片，目前比較流行的有兩種圖片格式，即和格式。這兩種格式，瀏覽器都能正確顯示。下面將為大家介紹運(yùn)用圖像的簡(jiǎn)單操作方法。195.2.1為網(wǎng)頁中插入圖像文件步驟1：插入頁面背景圖片。在完成任務(wù)一的操作后，在“屬性”檢查器中選擇“頁面屬性”按鈕打開“頁面屬性”對(duì)話框，選擇背景圖像為目錄下的文件夾下的文件。點(diǎn)擊“應(yīng)用”、“確定”按鈕。205.2.1為網(wǎng)頁中插入圖像文件215.2.1為網(wǎng)頁中插入圖像文件步驟2：在表格內(nèi)插入圖片。將光標(biāo)移至表格第一行內(nèi)，在菜單欄上依次點(diǎn)擊【插入】→【圖像】，打開“選擇圖像源文件”對(duì)話框，選擇目錄下的文件夾下的文件，點(diǎn)擊“確定”按鈕，在彈出的對(duì)話框中點(diǎn)擊“確定”按鈕。225.2.1為網(wǎng)頁中插入圖像文件步驟3：在表格內(nèi)插入背景圖片。將光標(biāo)移至表格第二行內(nèi)，在“屬性”檢查器中點(diǎn)擊背景標(biāo)題下的圖標(biāo)，在打開的對(duì)話框中選擇文件，點(diǎn)擊“確定按鈕”。步驟4：插入導(dǎo)航條文字。將光標(biāo)移至表格第二行內(nèi)，輸入“圖片|音頻|視頻|動(dòng)畫”，選中文字后，在“屬性”檢查器中設(shè)置字號(hào)為24，文本顏色為白色。235.2.1為網(wǎng)頁中插入圖像文件步驟5：插入內(nèi)容文字。將光標(biāo)移至表格第三行內(nèi)，在菜單欄上依次點(diǎn)擊【插入】→【圖像】，打開“選擇圖像源文件”對(duì)話框，選擇目錄下的文件夾下的文件，點(diǎn)擊“確定”按鈕，在彈出的對(duì)話框中點(diǎn)擊“確定”按鈕。245.2.1為網(wǎng)頁中插入圖像文件255.2.2為網(wǎng)頁中插入音頻文件步驟1：將文件復(fù)制三份，文件名稱分別為、、，全部存放在文件夾下。步驟2：刪除圖像。打開文件，選中第三行中的圖片，按住鍵刪除圖像。265.2.2為網(wǎng)頁中插入音頻文件步驟3：插入音頻文件。將光標(biāo)移至表格第三行內(nèi)，在菜單欄上依次點(diǎn)擊【插入】→【媒體】→【插件】，打開“選擇文件”對(duì)話框，選擇目錄下的文件夾下的3文件，點(diǎn)擊“確定”按鈕，在彈出的對(duì)話框中點(diǎn)擊“確定”按鈕。275.2.2為網(wǎng)頁中插入音頻文件步驟4：設(shè)置音頻文件顯示大小。選中音頻文件，在“屬性”檢查器中設(shè)置寬為770，高為200。高和寬的值確定音頻控件在瀏覽器中以多大的大小顯示。285.2.1為網(wǎng)頁中插入圖像文件295.2.3為網(wǎng)頁中插入視頻文件步驟1：刪除圖像。打開文件，選中第三行中的圖片，按住鍵刪除圖像。步驟2：插入視頻文件。將光標(biāo)移至表格第三行內(nèi)，在菜單欄上依次點(diǎn)擊【插入】→【媒體】→【插件】，打開“選擇文件”對(duì)話框，選擇目錄下的文件夾下的文件，點(diǎn)擊“確定”按鈕，在彈出的對(duì)話框中點(diǎn)擊“確定”按鈕。305.2.3為網(wǎng)頁中插入視頻文件步驟3：設(shè)置視頻文件顯示大小。選中視頻文件，在“屬性”檢查器中設(shè)置寬為600，高為400。高和寬的值確定視頻控件在瀏覽器中以多大的大小顯示。315.2.4為網(wǎng)頁中插入動(dòng)畫文件步驟1：刪除圖像。打開文件，選中第三行中的圖片，按住鍵刪除圖像。步驟2：插入動(dòng)畫文件。將光標(biāo)移至表格第三行內(nèi)，在菜單欄上依次點(diǎn)擊【插入】→【媒體】→【】，打開“選擇文件”對(duì)話框，選擇目錄下的文件夾下的文件，點(diǎn)擊“確定”按鈕，在彈出的對(duì)話框中點(diǎn)擊“確定”按鈕。325.2.4為網(wǎng)頁中插入動(dòng)畫文件步驟3：設(shè)置視頻文件顯示大小。選中視頻文件，在“屬性”檢查器中設(shè)置寬為600，高為400。高和寬的值確定視頻控件在瀏覽器中以多大的大小顯示。33學(xué)會(huì)多媒體網(wǎng)頁的合成為網(wǎng)頁建立超文本、超媒體2了解超文本、超媒體技術(shù)1345.3.1了解超文本、超媒體技術(shù)多媒體是融合兩種或者兩種以上媒體的一種人-機(jī)交互式信息交流和傳播媒體，使用的媒體包括文字、圖形、圖像、聲音、動(dòng)畫和電視圖像()的。多媒體是超媒體系統(tǒng)中的一個(gè)子集，超媒體系統(tǒng)是使用超鏈接構(gòu)成的全球信息系統(tǒng)，全球信息系統(tǒng)是因特網(wǎng)上使用協(xié)議和協(xié)議的應(yīng)用系統(tǒng)。二維的多媒體網(wǎng)頁使用來編寫，而三維的多媒體網(wǎng)頁使用來編寫。在目前許多多媒體作品使用光盤存儲(chǔ)器發(fā)行，在將來多媒體作品更多地使用網(wǎng)絡(luò)來發(fā)行。355.3.1了解超文本、超媒體技術(shù)多媒體使用具有劃時(shí)代意義的"超文本"思想與技術(shù)組成了一個(gè)全球范圍的超媒體空間，通過網(wǎng)絡(luò)、只讀光盤存儲(chǔ)器(，)、數(shù)字多能光盤(，)和多媒體計(jì)算機(jī)，人們表達(dá)、獲取和使用信息的方式和方法將產(chǎn)生重大變革，對(duì)人類社會(huì)產(chǎn)生長(zhǎng)遠(yuǎn)和深刻的影響。365.3.1了解超文本、超媒體技術(shù)1.超文本的概念超文本是一種文本，它和書本上的文本是一樣的。但與傳統(tǒng)的文本文件相比，它們之間的主要差別是，傳統(tǒng)文本是以線性方式組織的，而超文本是以非線性方式組織的。這里的"非線性"是指文本中遇到的一些相關(guān)內(nèi)容通過鏈接組織在一起，用戶可以很方便地瀏覽這些相關(guān)內(nèi)容。這種文本的組織方式與人們的思維方式和工作方式比較接近。375.3.1了解超文本、超媒體技術(shù)385.3.1了解超文本、超媒體技術(shù)超鏈接()是指文本中的詞、短語、符號(hào)、圖像、聲音剪輯或影視剪輯之間的鏈接，或者與其他的文件、超文本文件之間的鏈接，也稱為“熱鏈接()”，或者稱為“超文本鏈接()”。395.3.1了解超文本、超媒體技術(shù)2.超媒體的概念超媒體不僅可以包含文字而且還可以包含圖形、圖像，動(dòng)畫、聲音和電視片斷，這些媒體之間也是用超級(jí)鏈接組織的，而且它們之間的鏈接也是錯(cuò)綜復(fù)雜的。405.3.2為網(wǎng)頁建立超文本、超媒體超鏈接是多媒體網(wǎng)頁中一個(gè)不可缺少的要素，在一個(gè)文檔中可以創(chuàng)建幾種類型的鏈接：鏈接到其它文檔或文件（如圖形、影片、或聲音文件）的鏈接；命名錨記鏈接，此類鏈接跳轉(zhuǎn)至文檔內(nèi)的特定位置。電子郵件鏈接，此類鏈接新建一個(gè)收件人地址已經(jīng)填好的空白電子郵件；空鏈接和腳本鏈接，此類鏈接使您能夠在對(duì)象上附加行為，或者創(chuàng)建執(zhí)行代碼的鏈接。創(chuàng)建鏈接之前，一定要清楚文檔相對(duì)路徑、站點(diǎn)根目錄相對(duì)路徑以及絕對(duì)路徑的工作方式。415.3.2為網(wǎng)頁建立超文本、超媒體步驟1：選擇對(duì)象。打開文件，選中導(dǎo)航欄中的“圖片”兩字。步驟2：添加超鏈接。選中對(duì)象后，在在“屬性”檢查器中鏈接標(biāo)題后的文本框中輸入“”，也可以點(diǎn)擊鏈接標(biāo)題下的圖標(biāo)，在打開的對(duì)話框中選擇文件，點(diǎn)擊“確定”按鈕。425.3.2為網(wǎng)頁建立超文本、超媒體435.3.2為網(wǎng)頁建立超文本、超媒體步驟3：依照步驟1和步驟2的操作，依次為導(dǎo)航欄中的“音頻”、“視頻”、“動(dòng)畫”等文字添加超鏈接。步驟4：打開、、等文件，對(duì)頁面中的導(dǎo)航欄進(jìn)行超鏈接設(shè)置。445.3.2為網(wǎng)頁建立超文本、超媒體文檔的位置和路徑：絕對(duì)路徑（例如：）。文檔相對(duì)路徑（例如