網(wǎng)絡(luò)編輯實(shí)訓(xùn)教程-第7章網(wǎng)頁(yè)制作軟件介紹

1、第七章 網(wǎng)頁(yè)制作軟件介紹7.1 網(wǎng)頁(yè)制作軟件基礎(chǔ)知識(shí)7.2 網(wǎng)頁(yè)制作軟件Dream Weaver7.3 網(wǎng)頁(yè)動(dòng)畫(huà)制作軟件Flash7.4 HTML語(yǔ)言簡(jiǎn)介71.網(wǎng)頁(yè)制作軟件基礎(chǔ)知識(shí)一、網(wǎng)頁(yè)設(shè)計(jì)的基本流程二、網(wǎng)頁(yè)版面布局設(shè)計(jì)三、網(wǎng)絡(luò)版面設(shè)計(jì)原則返回主目錄一、網(wǎng)頁(yè)設(shè)計(jì)的基本流程考慮因素：文字、圖像、聲音、動(dòng)畫(huà)等因素網(wǎng)頁(yè)設(shè)計(jì)的五個(gè)環(huán)節(jié)：I.分析II.設(shè)計(jì)III.制作IV.測(cè)試V.維護(hù)返回網(wǎng)頁(yè)制作的五個(gè)環(huán)節(jié)分析分析對(duì)象：網(wǎng)站將要服務(wù)的目標(biāo)群體。分析內(nèi)容：特征，可能的需求分析的作用：確定網(wǎng)頁(yè)信息內(nèi)容及其功能設(shè)計(jì)網(wǎng)頁(yè)制作的五個(gè)環(huán)節(jié)設(shè)計(jì)重要性：關(guān)系用戶對(duì)網(wǎng)頁(yè)的接受與利用程度主要內(nèi)容：1. 網(wǎng)頁(yè)素材2. 網(wǎng)頁(yè)

2、的內(nèi)容結(jié)構(gòu)3.連接方式（一般選用層次清晰、易于瀏覽 的樹(shù)形結(jié)構(gòu)）4. 網(wǎng)頁(yè)模型的可視化設(shè)計(jì) 網(wǎng)頁(yè)制作的五個(gè)環(huán)節(jié)制作利用網(wǎng)頁(yè)制作工具完成網(wǎng)頁(yè)制作工作。常用工具：Dream Weaver網(wǎng)頁(yè)制作的五個(gè)環(huán)節(jié)測(cè)試測(cè)試內(nèi)容：速度、兼容性、交互性、鏈接正確性、排版和內(nèi)容錯(cuò)誤、程序安全性、抽流量測(cè)試測(cè)試目的：發(fā)現(xiàn)并解決問(wèn)題網(wǎng)頁(yè)制作的五個(gè)環(huán)節(jié)維護(hù)網(wǎng)站建立是一個(gè)不斷完善和改進(jìn)的過(guò)程。維護(hù)工作的內(nèi)容： 根據(jù)不同時(shí)期的需求實(shí)時(shí)調(diào)整網(wǎng)站的發(fā)展方向及設(shè)置的內(nèi)容 收集外部反饋 進(jìn)行王懷忠那內(nèi)容及網(wǎng)絡(luò)安全的維護(hù)二、網(wǎng)頁(yè)版面布局設(shè)計(jì)常見(jiàn)的物種網(wǎng)頁(yè)布局形式1.“同”字形布局內(nèi)容布局類似“國(guó)”字2.“國(guó)”字形布局由“同”字形演化

3、而來(lái)頁(yè)面下方增加一橫條狀菜單或廣告。3.“匡”字形布局去掉“國(guó)”字形右邊的邊框部分，釋放更多住內(nèi)容區(qū)。適用于下載類和賀卡類站點(diǎn)使用。4.“三”字形布局采用簡(jiǎn)單的圖片和線條代替擁擠的文字，給瀏覽者留下強(qiáng)烈的視覺(jué)沖擊。適用于藝術(shù)性網(wǎng)頁(yè)布局。5.“川”字形布局垂直方向散列布局，網(wǎng)站內(nèi)容按欄目分布于三列 中，最大限度地突出主頁(yè)索引功能。一般適用于欄目較多的網(wǎng)站。 返回三、網(wǎng)頁(yè)版面設(shè)計(jì)原則突出特色顯示出本網(wǎng)站與其他網(wǎng)站不同的整體素質(zhì)和格調(diào)重視新聞高質(zhì)量的新聞可帶來(lái)巨大的瀏覽器量，使網(wǎng)站更受歡迎合乎邏輯內(nèi)容布局要有序、相互配合，合乎邏輯。返回7.2網(wǎng)頁(yè)制作軟件一、DreamWeaver簡(jiǎn)介二、DreamW

4、eaver的優(yōu)點(diǎn)返回主目錄二、Dream Weaver的優(yōu)點(diǎn)最佳的制作效率便捷的網(wǎng)站管理超強(qiáng)的控制功能返回一、Dream Weaver簡(jiǎn)介Dream Weaver由Macromedia公司推出，現(xiàn)為Adobe旗下產(chǎn)品特點(diǎn)1. 所見(jiàn)即所得，可制作出跨平臺(tái)和瀏覽器的動(dòng)感網(wǎng)頁(yè)。2.集成功能強(qiáng)大的網(wǎng)站管理系統(tǒng)。3.不生成冗余代碼，方便的代碼編輯4.強(qiáng)大的動(dòng)態(tài)支持5.精確的層定位6.操作簡(jiǎn)單7.提供了與很多其他插件兼容的多哦如機(jī)制，節(jié)省了開(kāi)發(fā)者的勞動(dòng)，便于擴(kuò)展等。版本情況：目前最新版為CS6（于2012年4月發(fā)布），使用比 較多的是8.0，其次是CS5、CS4?！熬W(wǎng)頁(yè)三劍客”：Dream Weaver、

5、Flash、返回7.3 網(wǎng)頁(yè)動(dòng)畫(huà)制作軟件Flash一、Flash簡(jiǎn)介二、Flash的功能三、Flash的特點(diǎn)四、Flash的基本界面五、新建與保存文檔六、Flash動(dòng)畫(huà)的導(dǎo)出七、Flash動(dòng)畫(huà)的發(fā)布返回主目錄一、Flash簡(jiǎn)介矢量動(dòng)畫(huà)制作軟件可以做什么？1. 制作簡(jiǎn)單的動(dòng)畫(huà)、web交互程序可創(chuàng)建任何作品2. 添加圖片、聲音、視頻和特殊效果構(gòu)建豐富的Flash 應(yīng)用程序。Flash文檔組成：舞臺(tái)、時(shí)間軸、庫(kù)面板、Action Script代碼 返回二、Flash的功能基本功能包括以下三種：1.繪圖功能可完成圖形繪制、特殊字形處理等方面工作。2.動(dòng)畫(huà)功能即使沒(méi)有繪畫(huà)基礎(chǔ)也可以是使用Flash提供的

6、動(dòng)畫(huà)工具從外部倒入圖像，制作出票連的動(dòng)畫(huà)。3.編輯功能制作交互動(dòng)畫(huà)不可少的部分。返回三、Flash的特點(diǎn)使用矢量圖形和流式生意播放技術(shù)?？扇诤下曇簟?dòng)畫(huà)、聲效于一體，制作出令人驚奇的動(dòng)畫(huà)效果，同時(shí)支持MP3 音樂(lè)格式，使動(dòng)畫(huà)文件保持小巧身材。強(qiáng)大的動(dòng)畫(huà)編輯功能，可隨心所欲的設(shè)計(jì)制作出高質(zhì)的動(dòng)畫(huà)。返回四、Flash的基本界面Flash 基本界面包括以下內(nèi)容： 標(biāo)題欄 菜單欄 工具欄 時(shí)間軸 浮動(dòng)面板 面板屬性 編輯區(qū)返回五、新建與保存文檔新建文檔 方法：“文件”“新建”命令或按“Ctrl+N”組合鍵，可打開(kāi)“新建文檔”對(duì)話框，如圖所示： 然后單擊“Flash文件（Action3.0）”等選項(xiàng)，再

7、單擊“確定”按鈕也可新建Flash CS4文檔文檔的保存 保存方法：Ctrl+S，也可以使用工具欄上的“保存”按鈕進(jìn)行保存。返回六、Flash動(dòng)畫(huà)的導(dǎo)出Flash可以導(dǎo)出多種格式，本教程只介紹兩種1. 導(dǎo)出為.SWF2.導(dǎo)出為GIF動(dòng)畫(huà)由于不同版本的導(dǎo)出過(guò)程會(huì)有所區(qū)別，這里不做詳細(xì)的贅述。返回七、Flash動(dòng)畫(huà)的發(fā)布.SWF格式的文件必須要安裝插件，若無(wú)插件則可以將.swf格式動(dòng)畫(huà)轉(zhuǎn)化為.exe格式。注意：.exe比.swf大一些。若要將Flash動(dòng)畫(huà)發(fā)布為html頁(yè)面，則需建立一個(gè)可以激活動(dòng)畫(huà)的html文檔返回7.4 HTML語(yǔ)言簡(jiǎn)介一、標(biāo)記語(yǔ)法和文檔結(jié)構(gòu)二、案例剖析三、字體與顏色四、超鏈和

8、URL五、圖像、聲音、視像和動(dòng)畫(huà)六、列表結(jié)構(gòu)和預(yù)編排結(jié)構(gòu)返回主目錄一、標(biāo)記語(yǔ)法和文檔結(jié)構(gòu)Html標(biāo)記總是封裝在“”內(nèi)標(biāo)記分類1.單標(biāo)記 特點(diǎn)：只需單獨(dú)使用即可完整的表達(dá)意 思。 語(yǔ)法：2.雙標(biāo)記 特點(diǎn)：必須成對(duì)使用。 語(yǔ)法：內(nèi)容標(biāo)記屬性 語(yǔ)法： 各屬性無(wú)順序之分，屬性也可省略（使用默認(rèn)值）文檔結(jié)構(gòu) 頭部信息 文檔主題，正文內(nèi)容 返回二、案例剖析如下源代碼： Sample Html Document A sample HTML DocumentTo Demostrate HTML Style The document is written by HTML. At here to brake li

9、ne.Here is bold text Here is the next paragraph. 代碼效果返回案例剖析源碼分析標(biāo)題文本作用：標(biāo)明文件的總標(biāo)題， 出現(xiàn)位置：一般出現(xiàn)在標(biāo) 記中。：注釋內(nèi)容不會(huì)在瀏覽器中顯示。文本：為一級(jí)標(biāo)題，標(biāo)題可分為六級(jí)， 隨著級(jí)數(shù)的增加，標(biāo)題字體依次減小。:表示在正文中換行三、字體與顏色常見(jiàn)的字體標(biāo)記 你好：粗體； 你好嗎：斜體； 好：定義長(zhǎng)寬度字體； 以上屬于無(wú)理意義上的標(biāo)記，指明了屬于 哪一類型的字體。 好：突出顯示，并不指明怎樣突出 發(fā)，而是讓瀏覽器自行決定。大多數(shù)瀏覽器將 它處理為斜體。 類似的邏輯標(biāo)記還有： 重點(diǎn)突出顯示 按地址類型顯示 按代碼類型顯

10、示以上標(biāo)記只是定義字體的形狀，而并不能改變字體的大小。若要該百年字體大小可以正文標(biāo)題標(biāo)記，或字體size屬性。返回三、字體與顏色實(shí)例代碼四、超鏈和URL（頁(yè)面鏈接標(biāo)簽）在同一個(gè)文件夾下有兩個(gè)html文件，從一個(gè)文件超鏈接到另一個(gè)文件的路徑有兩種方式：相對(duì)路徑與絕對(duì)路徑。鏈接到其他頁(yè)面1. 相對(duì)路徑指定從根目錄到文件的完整路徑。2. 絕對(duì)路徑指定相對(duì)于當(dāng)前文件的文件位置。返回超鏈和URL（頁(yè)面鏈接標(biāo)簽）要鏈接到同一目錄 (C:HTML) 下的頁(yè)面，可編寫(xiě) 或 相對(duì)路徑名絕對(duì)路徑名四、超鏈和URL（頁(yè)面鏈接標(biāo)簽）演示示例：演示錨鏈接的例子 使用錨記標(biāo)簽超鏈和URL（頁(yè)面鏈接標(biāo)簽）鏈接到本頁(yè)面1.

11、錨記標(biāo)簽用于使用戶“跳”到文檔的某個(gè)部分2. HTML 的 NAME 屬性用于創(chuàng)建錨標(biāo)記 主題名稱3. 為達(dá)到這種跳轉(zhuǎn)效果，請(qǐng)?jiān)?HREF 參數(shù)中使用該標(biāo)記主題名稱演示示例：演示錨鏈接的例子 鏈接到其他頁(yè)面新人上路新人上路指南1、定義錨標(biāo)記2、鏈接到錨標(biāo)記所在位置五、圖像、聲音、視像和動(dòng)畫(huà)HTML支持內(nèi)嵌式的圖像顯示。1. 插入圖像（圖片）標(biāo)記語(yǔ)法： 2. URL表示圖像（圖片）的源文件(Source),必須對(duì)應(yīng)一個(gè)圖片3. 常用的圖片格式：.GIF(256色)、.X位圖格式(.XBM文件，黑白圖像)、.jpeg格式(.jpg、.jpeg格式，支持RGB格式)4. 圖片對(duì)齊方式：設(shè)置Align

12、屬性?？梢栽O(shè)置的值： 垂直方向：TOP、MIDDLE、BOTTOM 水平方向：LEFT、CENTER、RIGHT5. 若需要圖片獨(dú)占一塊區(qū)域，則需要在圖片前后添加或者6. Web瀏覽器會(huì)在圖片鏈接的四周添加一個(gè)邊框，若需要清除邊框 ，只需設(shè)置border=“0”即可。7. 修改圖片尺寸：可以設(shè)置WIDTH和HEIGHT屬性，重新定義圖片的尺寸。返回圖像、聲音、視像和動(dòng)畫(huà)聲音和視像： Web瀏覽器自身不能解釋聲音和視像文件 ，需要其他輔助工具來(lái)完成聲音和視頻的 播放。 一般格式：聲音：.wav、.AU、.SND等文件 擴(kuò)展名。 視像：.avi、.MPG、RMVB、 .wav等格式文件。動(dòng)畫(huà) java可支持內(nèi)嵌式動(dòng)畫(huà)和內(nèi)嵌式聲音。六、列表結(jié)構(gòu)和預(yù)編排結(jié)構(gòu)列表結(jié)構(gòu)：有序列表、