DreamweaverCS網(wǎng)設(shè)計培訓(xùn)教程電子教案_第1頁
DreamweaverCS網(wǎng)設(shè)計培訓(xùn)教程電子教案_第2頁
DreamweaverCS網(wǎng)設(shè)計培訓(xùn)教程電子教案_第3頁
DreamweaverCS網(wǎng)設(shè)計培訓(xùn)教程電子教案_第4頁
DreamweaverCS網(wǎng)設(shè)計培訓(xùn)教程電子教案_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費閱讀

付費下載

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第1課網(wǎng)頁制作基礎(chǔ)本課要點具體要求本課導(dǎo)讀上機練習(xí)本課要點網(wǎng)頁制作的相關(guān)知識初識DreamweaverCS3具體要求了解網(wǎng)頁的定義及組成元素了解網(wǎng)頁常見部分的稱謂及規(guī)范了解網(wǎng)頁制作的流程了解網(wǎng)頁配色技巧了解DreamweaverCS3的工作界面掌握DreamweaverCS3的基本設(shè)置掌握DreamweaverCS3的基本操作本課導(dǎo)讀 網(wǎng)頁是構(gòu)成網(wǎng)絡(luò)的主體，是互聯(lián)網(wǎng)信息的主要載體。在學(xué)習(xí)網(wǎng)頁制作前，需要了解網(wǎng)頁制作的相關(guān)知識，以便在以后的學(xué)習(xí)及工作中運用。另外，我們還需要認識網(wǎng)頁制作工具DreamweaverCS3的工作界面、基本設(shè)置以及一些簡單的應(yīng)用，如啟動與退出DreamweaverCS3、新建、保存、預(yù)覽及打開網(wǎng)頁文檔等。1.1網(wǎng)頁制作的相關(guān)知識 網(wǎng)上沖浪已成為生活的一個重要組成部分，人們通過網(wǎng)絡(luò)來獲取知識、資源，越來越多的企事業(yè)單位也將網(wǎng)頁作為宣傳公司品牌形象的一種重要手段，網(wǎng)頁也從以前的純文本形式逐步發(fā)展到圖、文、聲音及動畫兼有的綜合形式。下面我們就來學(xué)習(xí)網(wǎng)頁制作的各種知識。1.1網(wǎng)頁制作的相關(guān)知識

1.1.1知識講解 1.1.2典型案例——用“記事本”制作“welcome.html”網(wǎng)頁1.1.1知識講解 在開始學(xué)習(xí)網(wǎng)頁制作之前，應(yīng)先了解一下什么是網(wǎng)頁以及一些相關(guān)的專業(yè)術(shù)語。1.1.1知識講解

1.網(wǎng)頁的定義及組成元素 2.網(wǎng)頁常見部分的稱謂及規(guī)范3.網(wǎng)頁制作的流程

4.網(wǎng)頁配色技巧1.網(wǎng)頁的定義及組成元素

瀏覽網(wǎng)頁時在瀏覽器中看到的一個個頁面就是網(wǎng)頁，其中包括多種多樣的網(wǎng)頁元素，如文本、圖像、動畫和音樂等。 文本是網(wǎng)頁最基本的組成元素，是網(wǎng)頁的主體部分。 圖像也是網(wǎng)頁中不可缺少的元素，是使網(wǎng)頁看起來更美觀的點睛之筆。動畫在網(wǎng)頁中也有廣泛的應(yīng)用，網(wǎng)頁中常用的動畫格式主要有兩種：一種是SWF動畫，一種是GIF動畫。播放音樂是為瀏覽者提供聽覺感受的最佳選擇，但因為受音樂版權(quán)的約束，在專業(yè)網(wǎng)站中很少有使用背景音樂的，只在部分個人主頁或企業(yè)網(wǎng)站中有所使用。

2.網(wǎng)頁常見部分的稱謂及規(guī)范

通常情況下，網(wǎng)頁的基本組成部分有Logo、Banner、導(dǎo)航條、超鏈接和版權(quán)信息等。3.網(wǎng)頁頁制制作作的的流流程程制作作網(wǎng)網(wǎng)頁頁不不像像編編輯輯文文檔檔那那樣樣輕輕松松，，需需要要遵遵循循一一定定的的流流程程：：收收集集資資料料和和素素材材、、規(guī)規(guī)劃劃站站點點、、制制作作網(wǎng)網(wǎng)頁頁、、測測試試站站點點、、發(fā)發(fā)布布站站點點、、更更新新和和維維護護站站點點等等。。1）收收集集資資料料和和素素材材2）規(guī)規(guī)劃劃站站點點3）制制作作網(wǎng)網(wǎng)頁頁4）測測試試站站點點5）發(fā)發(fā)布布站站點點6）更更新新和和維維護護站站點點4.網(wǎng)頁頁配配色色技技巧巧網(wǎng)頁頁中中的的色色彩彩通通常常用用十十六六進進制制數(shù)數(shù)來來表表示示，，如如““#FF0000””表示示紅紅色色，，““#00FF00””表示示綠綠色色、、““#0000FF””表示示藍藍色色、、““#FFFF00””表示示黃黃色色、、““#FFFFFF””表示示白白色色、、““#000000””表示示黑黑色色等等，，即即每每兩兩位位為為一一種種色色彩彩，，從從左左到到右右分分別別為為紅紅、、綠綠、、藍藍三三色色，，每每組組色色彩彩的的取取值值均均為為00～FF（十十進進制制數(shù)數(shù)255的十十六六進進制制值值））。。典型型案案例例———用““記記事事本本””制制作作““welcome.html””網(wǎng)頁頁案例例目目標(biāo)標(biāo)本案案例例將將使使用用““記記事事本本””制制作作一一個個簡簡單單的的網(wǎng)網(wǎng)頁頁。。典型型案案例例———用““記記事事本本””制制作作““welcome.html””網(wǎng)頁頁操作作思思路路（1）利利用用以以HTML代碼碼創(chuàng)創(chuàng)建建的的文文本本文文件件可可以以通通過過““記記事事本本””等等文文本本編編輯輯程程序序直直接接進進行行編編寫寫的的特特點點制制作作本本網(wǎng)網(wǎng)頁頁文文檔檔。。（2）創(chuàng)創(chuàng)建建圖圖像像和和文文本本等等內(nèi)內(nèi)容容。。（3）從從結(jié)結(jié)構(gòu)構(gòu)上上講講，，HTML文件件由由兩兩大大部部分分組組成成：：一一是是頭頭部部（（即即<head>標(biāo)簽簽與與</head>標(biāo)簽簽之之間間的的內(nèi)內(nèi)容容，，如如網(wǎng)網(wǎng)頁頁的的標(biāo)標(biāo)題題就就放放置置在在頭頭部部）），，二二是是主主體體（（即即<body>標(biāo)簽簽與與</body>標(biāo)簽簽之之間間的的內(nèi)內(nèi)容容，，也也就就是是在在瀏瀏覽覽器器中中看看到到的的內(nèi)內(nèi)容容））。。為為了了與與普普通通的的文文本本文文件件相相區(qū)區(qū)別別，，將將<html>標(biāo)簽簽與與</html>標(biāo)簽簽分分別別放放置置在在網(wǎng)網(wǎng)頁頁代代碼碼最最前前及及最最后后，，這這樣樣，，一一個個簡簡單單的的網(wǎng)網(wǎng)頁頁就就創(chuàng)創(chuàng)建建好好了了。。典型型案案例例———用““記記事事本本””制制作作““welcome.html””網(wǎng)頁頁操作作步步驟驟具體體操操作作步步驟驟請請教教師師參參照照軟軟件件及及書書中中內(nèi)內(nèi)容容進進行行講講解解。。典型型案案例例———用““記記事事本本””制制作作““welcome.html””網(wǎng)頁頁案例例小小結(jié)結(jié)本案案例例用用““記記事事本本””制制作作了了一一個個簡簡單單的的網(wǎng)網(wǎng)頁頁文文檔檔。。在在制制作作過過程程中中需需注注意意的的是是：：在在保保存存文文檔檔時時一一定定要要在在【保存存類類型型】下拉拉列列表表框框中中選選擇擇【所有有文文件件】選項項；；在在輸輸入入網(wǎng)網(wǎng)頁頁文文檔檔名名稱稱時時，，一一定定要要將將網(wǎng)網(wǎng)頁頁文文檔檔的的擴擴展展名名.htm（或或.html）一一并并輸輸入入，，否否則則““記記事事本本””程程序序會會將將其其保保存存為為純純文文本本格格式式文文檔檔。。1.2初識識DreamweaverCS3在學(xué)學(xué)習(xí)習(xí)了了網(wǎng)網(wǎng)頁頁制制作作的的基基礎(chǔ)礎(chǔ)知知識識后后，，接接下下來來就就應(yīng)應(yīng)該該認認識識網(wǎng)網(wǎng)頁頁制制作作利利器器———DreamweaverCS3了。。1.2初識識DreamweaverCS3知識識講講解解典型型案案例例———用DreamweaverCS3創(chuàng)建建““welcome2.html””網(wǎng)頁頁知識識講講解解在學(xué)學(xué)習(xí)習(xí)DreamweaverCS3之前前應(yīng)應(yīng)先先安安裝裝DreamweaverCS3，安安裝裝方方法法與與其其他他應(yīng)應(yīng)用用程程序序的的安安裝裝基基本本相相同同，，這這里里不不再再贅贅述述。。知識識講講解解1.DreamweaverCS3的工工作作界界面面2.DreamweaverCS3的基基本本設(shè)設(shè)置置1.DreamweaverCS3的工工作作界界面面2.DreamweaverCS3的基基本本設(shè)設(shè)置置在使使用用DreamweaverCS3前，，需需要要進進行行一一些些簡簡單單的的設(shè)設(shè)置置，，以以方方便便使使用用軟軟件件。。選選擇擇【編輯輯】→→【【首選選參參數(shù)數(shù)】命令令，，打打開開【首選選參參數(shù)數(shù)】對話話框框，，如如圖圖1.17所示示。。該該對對話話框框左左側(cè)側(cè)為為【分類類】列表表框框，，右右側(cè)側(cè)為為對對應(yīng)應(yīng)的的設(shè)設(shè)置置選選項項；；默默認認打打開開的的是是【常規(guī)規(guī)】分類類，，可可單單擊擊左左側(cè)側(cè)【分類】列表框中的選選項進行切換換，然后進行行該分類的設(shè)設(shè)置。典型案例——用DreamweaverCS3創(chuàng)建“welcome2.html”網(wǎng)頁案例目標(biāo)本案例將用DreamweaverCS3制作“welcome2.html”網(wǎng)頁，其效果果和用“記事事本”創(chuàng)建的的“welcome.html”網(wǎng)頁相同典型案例——用DreamweaverCS3創(chuàng)建“welcome2.html”網(wǎng)頁操作思路（1）創(chuàng)建一個新新網(wǎng)頁并將其其保存。（2）在網(wǎng)頁中添添加素材并設(shè)設(shè)置效果。（3）加入版權(quán)欄欄。典型案例——用DreamweaverCS3創(chuàng)建“welcome2.html”網(wǎng)頁操作步驟具體操作步驟驟請教師參照照軟件及書中中內(nèi)容進行講講解。典型案例——用DreamweaverCS3創(chuàng)建“welcome2.html”網(wǎng)頁案例小結(jié)本案例用DreamweaverCS3創(chuàng)建了一個網(wǎng)網(wǎng)頁，并在IE瀏覽器中進行行了預(yù)覽。通通過本案例的的學(xué)習(xí)，可以以看出Dreamweaver的強大功能及及由此帶來的的便捷。Dreamweaver最大的特點之之一就是可視視化的操作，，使得用戶在在不是很了解解網(wǎng)頁的框架架語言HTML時即可隨心所所欲地對網(wǎng)頁頁元素進行添添加、刪除以以及各種屬性性設(shè)置，大大大地減輕了初初學(xué)者的負擔(dān)擔(dān)，使初學(xué)者者能夠輕松上上手，為以后后的學(xué)習(xí)打下下基礎(chǔ)。1.3上機練習(xí)用“記事本””創(chuàng)建“Goodmorning.html”網(wǎng)頁

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論