Web前端設(shè)計(jì)與開(kāi)發(fā)技術(shù)-課件-第5章-精美內(nèi)容網(wǎng)頁(yè)的制作

Web前端設(shè)計(jì)與開(kāi)發(fā)技術(shù)（HTML+CSS+JavaScript）江西農(nóng)業(yè)大學(xué)計(jì)算機(jī)與信息工程學(xué)院主講人：第5章精美內(nèi)容網(wǎng)頁(yè)的制作5.1網(wǎng)頁(yè)復(fù)用5.2自制導(dǎo)航條5.3插入FLASH動(dòng)畫5.4插入HTML5Video和HTML5Audio5.5插入插件背景音樂(lè)5.65.7滾動(dòng)條5.8上機(jī)練習(xí)

主頁(yè)制作完之后，快速的制作內(nèi)容網(wǎng)頁(yè)，學(xué)會(huì)網(wǎng)頁(yè)復(fù)用，提高制作內(nèi)容網(wǎng)頁(yè)的效率。除此之外，網(wǎng)頁(yè)內(nèi)容還可以加入Flash動(dòng)畫、音樂(lè)、JavaApplet等動(dòng)態(tài)元素和網(wǎng)頁(yè)特效，可以使網(wǎng)頁(yè)更具動(dòng)感效果、讓網(wǎng)頁(yè)更加精美。

本章主要介紹DreamweaverCC2018如何插入多媒體元素來(lái)設(shè)計(jì)精美內(nèi)容網(wǎng)頁(yè)；另外還要求讀者掌握重復(fù)使用網(wǎng)頁(yè)部分內(nèi)容，從而提高內(nèi)容網(wǎng)頁(yè)的制作效率。學(xué)習(xí)目標(biāo)

網(wǎng)頁(yè)復(fù)用

在網(wǎng)頁(yè)插入Flash動(dòng)畫

插入聲音文件自制導(dǎo)航條插入其他媒體文件應(yīng)用網(wǎng)頁(yè)特效5.1網(wǎng)頁(yè)復(fù)用一般來(lái)說(shuō)網(wǎng)站的主頁(yè)和內(nèi)容網(wǎng)頁(yè)，或者內(nèi)容網(wǎng)頁(yè)和目錄的主網(wǎng)頁(yè)之間總有一些地方是幾乎不會(huì)變化的。那么那些幾乎不會(huì)變化的部分就可以重復(fù)使用，提高制作內(nèi)容網(wǎng)頁(yè)的效率。

【例5.1】在已有主頁(yè)的基礎(chǔ)上，利用復(fù)用思維，創(chuàng)建內(nèi)容網(wǎng)頁(yè)。

進(jìn)入站點(diǎn)，打開(kāi)已有主頁(yè)index.html文件。通過(guò)觀察發(fā)現(xiàn)，網(wǎng)頁(yè)最上方和最下方的內(nèi)容在其他內(nèi)容網(wǎng)頁(yè)需要保留。

將不需要的內(nèi)容刪除，選擇“文件”\“另存為”命令。為其取名“RGB01”，然后單擊“保存”按鈕。

此時(shí)，布局表格的最外層還在。適當(dāng)調(diào)整表格各行的高度，進(jìn)行內(nèi)容網(wǎng)頁(yè)布局。第二行用于放置整個(gè)網(wǎng)站的目錄結(jié)構(gòu)，也就是后續(xù)小節(jié)的自制導(dǎo)航條；第三行用于放置明確本頁(yè)面所在網(wǎng)站的位置；第四行為頁(yè)面的主體內(nèi)容區(qū)域。

分別在網(wǎng)頁(yè)位置和主體內(nèi)容區(qū)域插入相應(yīng)表格、文本、圖像后，就可以快速得到一個(gè)內(nèi)容網(wǎng)頁(yè)的初稿。5.2自制導(dǎo)航條

DreamweaverCC2018取消了導(dǎo)航條功能，但是在網(wǎng)站設(shè)計(jì)的工作中，發(fā)現(xiàn)網(wǎng)站中的所有網(wǎng)頁(yè)中都應(yīng)該有一個(gè)像圖書目錄一樣部分，用于全面了解網(wǎng)站目錄結(jié)構(gòu)，也方便快速跳轉(zhuǎn)到所需的頁(yè)面。因此，本書單列此小節(jié)，以保證網(wǎng)站使用的方便快捷。

文本導(dǎo)航條

導(dǎo)航條可以使用文本制作的一個(gè)目錄，再加上后續(xù)超鏈接章節(jié)的內(nèi)容就可以方便的實(shí)現(xiàn)跳轉(zhuǎn)功能。

【例5.2】為例5.1制作的RGB01.html文件制作文本導(dǎo)航條。

打開(kāi)RGB01.html網(wǎng)頁(yè)文件，在預(yù)留做導(dǎo)航條的空白單元格插入表格。表格的行列根據(jù)網(wǎng)站目錄結(jié)構(gòu)設(shè)置，此處插入2行6列的表格。

選擇“插入”\“Table”命令，彈出“Talbe”對(duì)話框，設(shè)置設(shè)置“行數(shù)”為“2”，“列”為“6”，“表格寬度”為“100%”，“邊框粗細(xì)”為“0”，“單元格邊距”為“0”，“單元格間距”為“0”。

調(diào)整外層單元格的高度，與所插入表格匹配。

分別在各個(gè)單元格輸入網(wǎng)站規(guī)劃時(shí)設(shè)定的目錄名稱，并設(shè)置為“粗體”。在學(xué)習(xí)后續(xù)章節(jié)超鏈接知識(shí)之后，就可以真正實(shí)現(xiàn)導(dǎo)航功能。

圖像導(dǎo)航條

可以利用文本創(chuàng)建導(dǎo)航條，在事先準(zhǔn)備好圖像文件的前提下也可以用圖像文件或鼠標(biāo)經(jīng)過(guò)圖像創(chuàng)建導(dǎo)航條。

【例5.3】為某欄目創(chuàng)建該欄目的圖像導(dǎo)航條。

參照上一小節(jié)的方法，刪除主體內(nèi)容，將網(wǎng)頁(yè)位置修改為“第七章紅色系”，上方表格中的文本導(dǎo)航暫時(shí)不變。

將空白區(qū)域的一個(gè)大單元格拆分成兩列，左側(cè)1列用于豎排若干導(dǎo)航圖像，右側(cè)1列則為主體內(nèi)容區(qū)域。

此目錄下，預(yù)計(jì)有8個(gè)頁(yè)面，因此，左側(cè)單元格內(nèi)，嵌套一個(gè)9行1列的表格，第1行用于留白，其他8行用于安排豎向?qū)Ш綏l。

展開(kāi)右側(cè)的“文件”面板，在“本地文件”欄目下找到“red”文件夾，雙擊展開(kāi)，再進(jìn)入“images”文件夾，可以看到事先準(zhǔn)備好的導(dǎo)航圖像正在其中?？梢詫ⅰ氨镜匚募敝械膱D像文件圖標(biāo)直接拖放到對(duì)應(yīng)的單元格中，完成插入圖像文件的操作。

選中圖像文件所在的整列表格，修改“水平”屬性為“居中對(duì)齊”。到此為止，本欄目的圖像導(dǎo)航條的制作完畢5.2插入Flash動(dòng)畫

Flash動(dòng)畫是網(wǎng)頁(yè)上最流行的動(dòng)畫格式。Flash動(dòng)畫也是最常用的多媒體插件之一，它將聲音、圖像和動(dòng)畫等內(nèi)容加入到一個(gè)文件中，并能制作較好的動(dòng)畫效果，同時(shí)使用了優(yōu)化的算法將多媒體數(shù)據(jù)進(jìn)行壓縮，是文件變得很小，因此非常適合在網(wǎng)上傳播。

認(rèn)識(shí)Flash文件

FLA文件(.fla)是Flash的源文件，使用Flash創(chuàng)作工具創(chuàng)建。只能在Flash中打開(kāi)。需要時(shí)，可以在Flash中打開(kāi)FLA文件，然后將它發(fā)布為SWF或SWT文件以在瀏覽器中使用。

SWF文件(.swf)SWF文件是FLA(.fla)文件的編譯版本，已進(jìn)行優(yōu)化，可以在Web上查看。SWF文件可以在瀏覽器中播放并且可以在Dreamweaver中進(jìn)行預(yù)覽，但不能在Flash中編輯此文件。

FLV文件(.flv)FLV文件是一種視頻文件，它包含經(jīng)過(guò)編碼的音頻和視頻數(shù)據(jù)，用于通過(guò)Flash?Player進(jìn)行傳送。例如，如果具有QuickTime或WindowsMedia視頻文件，可以使用編碼器將該視頻文件轉(zhuǎn)換為FLV文件。

插入SWF文件

在“文檔”窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)放置在要插入內(nèi)容的位置，選擇“插入”\“HTML”\“FlashSWF”命令。在彈出的“選擇SWF”對(duì)話框中，選擇一個(gè)SWF文件(.swf)，并單擊“確定”按鈕。將在“文檔”窗口中顯示一個(gè)SWF文件占位符。

按F12預(yù)覽該網(wǎng)頁(yè)，在彈出確認(rèn)保存網(wǎng)頁(yè)文件的警告框之后，還會(huì)彈出“復(fù)制相關(guān)文件”對(duì)話框，DreamweaverCC2018提示正在將兩個(gè)相關(guān)文件（expressInstall.swf和swfobject_modified.js）保存到站點(diǎn)中的Scripts文件夾。在將SWF文件上傳到Web服務(wù)器時(shí)，不要忘記上傳這些文件，否則瀏覽器無(wú)法正確顯示SWF文件。

設(shè)置SWF文件屬性

在DreamweaverCC2018中可以使用“屬性”面板設(shè)置SWF文件的屬性。這些屬性也適用于Shockwave影片。選擇一個(gè)SWF文件或Shockwave影片，然后在“屬性”面板中設(shè)置選項(xiàng)。

FlashVideo視頻

FlashVIdeo視頻并不是Flash動(dòng)畫，它的出現(xiàn)是為了解決Flash以前對(duì)連續(xù)視頻只能使用JPEG圖像進(jìn)行幀內(nèi)壓縮，并且壓縮效率低，文件很大，不適合視頻存儲(chǔ)的弊端。FlashVIdeo視頻采用幀間壓縮的方法，可以有效地縮小文件大小，并保證視頻的質(zhì)量。在Dreamweaver中選擇“插入”\“HTML”\“FlashVideo”命令，彈出“插入FLV”對(duì)話框。

【例5.4】新建一個(gè)網(wǎng)頁(yè)文件，在合適的位置插入FLV視頻文件。

新建一個(gè)空白網(wǎng)頁(yè)文件。

選擇“插入”\“HTML”\“FlashVideo”命令，在彈出的“插入FLV”對(duì)話框中選擇文件。

在“文檔”窗口可以看到FLV文件標(biāo)記。5.3插入HTML5Video和HTML5Audio

允許在網(wǎng)頁(yè)中插入HTML5視頻Video和HTML5Audio，以使用戶能夠在瀏覽器中播放視頻和音頻文件，而無(wú)需使用外部增效工具或播放器。

插入HTML5Video

HTML5視頻元素提供一種將電影或視頻嵌入網(wǎng)頁(yè)中的標(biāo)準(zhǔn)方式。

選擇“插入”\“HTML”\“HTML5Video”。HTML5視頻元素將會(huì)插入指定位置。

雖然可以在網(wǎng)頁(yè)中嵌入任何視頻，但“實(shí)時(shí)”視圖并非始終呈現(xiàn)所有視頻，往往只顯示一個(gè)HTML5Video圖標(biāo)。DreamweaverCC2018使用AppleQuickTime增效工具來(lái)支持音頻和視頻標(biāo)簽。在Windows中，如果已安裝AppleQuickTime插件，網(wǎng)頁(yè)會(huì)呈現(xiàn)媒體播放器和媒體內(nèi)容；否則不會(huì)呈現(xiàn)媒體內(nèi)容。

插入HTML5Audio

HTML5音頻元素提供一種將音頻內(nèi)容嵌入網(wǎng)頁(yè)中的標(biāo)準(zhǔn)方式。選擇“插入”\“HTML”\“HTML5Audio”。音頻文件將會(huì)插入到指定位置，此時(shí)，“文檔”窗口出現(xiàn)音頻文件圖標(biāo)。5.4插入插件

現(xiàn)在瀏覽器支持的多媒體文件越來(lái)越多，文件也越來(lái)越小，但是表現(xiàn)的效果卻一點(diǎn)也不遜色以前。允許在網(wǎng)頁(yè)中通過(guò)插入插件的方式嵌入音頻和視頻。

網(wǎng)頁(yè)中的音頻格式

MP3格式最大的特點(diǎn)就是能以較小的比特率，較大的壓縮比達(dá)到近科完美的CD音質(zhì)。

WAV格式具有較好的聲音品質(zhì)，許多瀏覽器都支持此格式，并且不要求安裝插件。

AIF格式AIF格式的音頻文件也具有較好的聲音品質(zhì)，容量通常較大。

MIDI格式

.ra、.ram、.rpm或RealAudio

具有非常高的壓縮比，文件大小比MP3小。歌曲文件可以在合理的時(shí)間這種格式一般用于器樂(lè)類的音頻文件。范圍內(nèi)下載。必須下載并安裝RealPlayer軟件才能播放。插入音頻

要在網(wǎng)頁(yè)中加入聲音，選擇“插入”\“HTML”\“插件”命令，彈出“選擇文件”對(duì)話框，選中要插入的音頻文件，單擊“確定”按鈕即可。在“文檔”窗口的“設(shè)計(jì)”視圖，只能看到插件圖標(biāo)，并不會(huì)顯示播放聲音的狀態(tài)。只有在實(shí)時(shí)預(yù)覽時(shí)才能看到播放器。

插件的默認(rèn)“寬”和“高”的值均為“32”。因此，在實(shí)時(shí)預(yù)覽只能看到播放器的部分，那么需要對(duì)插件修改大小，以便網(wǎng)頁(yè)中能完整顯示播放器。修改插件大小可以直接用鼠標(biāo)拖放插件的定位標(biāo)尺，也可以在“屬性”面板設(shè)置“寬”和“高”屬性的值為合適大小。網(wǎng)頁(yè)中的視頻格式

1．

2．

3．

4．

5．AVI格式MOV格式（QuickTime）MPEG/MPG/DAT格式RM(RealMedia)格式ASF(AdvancedStreamingFormat)格式插入視頻

選擇“插入”\“HTML”\“插件”命令，彈出“選擇文件”對(duì)話框，選中要插入的視頻文件，單擊“確定”按鈕即可。在“文檔”窗口的“設(shè)計(jì)”視圖，只能看到默認(rèn)32*32像素大小的插件圖標(biāo)，因此必須拖放插件大小，以便完整播放視頻的需要。5.5背景音樂(lè)

插件隱身

設(shè)置背景音樂(lè)

在<body>標(biāo)簽后輸入“<”,在下拉列表中選擇“bgsound”標(biāo)簽5.6滾動(dòng)條

插入滾動(dòng)條

<marquee>這里是滾動(dòng)條</marquee>

【例5.5】新建一個(gè)網(wǎng)頁(yè)文件，在文檔中插入一張圖片，并使圖片滾動(dòng)起來(lái)。

新建一個(gè)網(wǎng)頁(yè)文件，在文檔中插入一張圖片。

選擇“查看”\“代碼