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

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

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

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

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

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

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

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

8、URL五、圖像、聲音、視像和動畫六、列表結(jié)構(gòu)和預(yù)編排結(jié)構(gòu)返回主目錄一、標(biāo)記語法和文檔結(jié)構(gòu)Html標(biāo)記總是封裝在“”內(nèi)標(biāo)記分類1.單標(biāo)記 特點：只需單獨使用即可完整的表達(dá)意 思。 語法：2.雙標(biāo)記 特點：必須成對使用。 語法：內(nèi)容標(biāo)記屬性 語法： 各屬性無順序之分，屬性也可省略（使用默認(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)容不會在瀏覽器中顯示。文本：為一級標(biāo)題，標(biāo)題可分為六級， 隨著級數(shù)的增加，標(biāo)題字體依次減小。:表示在正文中換行三、字體與顏色常見的字體標(biāo)記 你好：粗體； 你好嗎：斜體； 好：定義長寬度字體； 以上屬于無理意義上的標(biāo)記，指明了屬于 哪一類型的字體。 好：突出顯示，并不指明怎樣突出 發(fā)，而是讓瀏覽器自行決定。大多數(shù)瀏覽器將 它處理為斜體。 類似的邏輯標(biāo)記還有： 重點突出顯示 按地址類型顯示 按代碼類型顯

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

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

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