認(rèn)識dreamwear.ppt

1、,初識網(wǎng)頁 在學(xué)習(xí)DREAMWEAVER之前，先學(xué)習(xí)一些網(wǎng)頁的相關(guān)知識，對以后的設(shè)計(jì)是大有裨益的。,國際互聯(lián)網(wǎng)的誕生： 二十世紀(jì)人類有兩大最不可思議的發(fā)明，一樣是原子彈，另一樣是英特網(wǎng)(Internet)，即國際互聯(lián)網(wǎng)。當(dāng)核競賽到了六十年代，美國人對于核戰(zhàn)爭的恐懼已經(jīng)到了極點(diǎn)。這時(shí)候的美國國防部想要解決這樣一個(gè)問題，在萬一遭到核打擊的時(shí)候，重要通訊干線必定被毀，指揮部門還怎樣組織還擊呢？以往的通信線路就像一棵大樹，信息沿著樹干傳送到樹枝，再從樹枝傳送到更細(xì)的枝兒上。如果摧毀了樹干，那上面的枝干就全沒用了，甲地和乙地就失去了聯(lián)系。一個(gè)叫做玻爾巴蘭的計(jì)算機(jī)科學(xué)家提出一個(gè)想法。理想的通信線路應(yīng)該象一

2、張漁網(wǎng)。甲地和乙地之間，就象漁網(wǎng)上的兩個(gè)結(jié)點(diǎn)一樣，可以有無數(shù)條線路相通。即使把漁網(wǎng)炸幾個(gè)大窟窿，剩下來的破網(wǎng)雖然離離拉拉，但上面的任何兩點(diǎn)還是聯(lián)著的。于是國防部就著手研究，這就是英特網(wǎng)的概念起源。 1969年，美國國防部高級研究計(jì)劃署，把位于美國各地大學(xué)里的四臺高級計(jì)算機(jī)用一個(gè)網(wǎng)絡(luò)聯(lián)結(jié)起來，這個(gè)網(wǎng)絡(luò)可以使網(wǎng)絡(luò)中的計(jì)算機(jī)分享計(jì)算能力和數(shù)據(jù)。這個(gè)網(wǎng)絡(luò)被命名為阿帕網(wǎng)(ARPANet)，即高級研究計(jì)劃署網(wǎng)。兩年后，15臺計(jì)算機(jī)聯(lián)入了這個(gè)網(wǎng)絡(luò)，又過了一年，發(fā)展到37臺。而后，越來越多的大學(xué)、公司都把計(jì)算機(jī)聯(lián)入了網(wǎng)絡(luò)，加入網(wǎng)絡(luò)的開發(fā)。然而，國防部很快發(fā)現(xiàn)，使用阿帕網(wǎng)的人們不知不覺已經(jīng)把這個(gè)計(jì)算機(jī)網(wǎng)絡(luò)變成了

3、一個(gè)電子郵局網(wǎng)上流通的不再是資料，而是個(gè)人郵件。研究人員不是用網(wǎng)絡(luò)交換數(shù)據(jù)，而更多的是聊天問候。 美國國防部本想阻止，但是卻發(fā)現(xiàn)阿帕網(wǎng)沒有中心，任何人都很容易聯(lián)結(jié)到這個(gè)網(wǎng)上，成為網(wǎng)的一部分，而且阿帕網(wǎng)已經(jīng)迅速伸展開，變得無法阻止了，國防部只好放棄。這個(gè)網(wǎng)絡(luò)從此不再歸國防部所有，所以也就不能叫阿帕網(wǎng)了。1984年，美國國家科學(xué)基金會加入了聯(lián)網(wǎng)的行動(dòng)，協(xié)調(diào)取得了一些重要技術(shù)突破。然后各大部門、公司紛紛聯(lián)入網(wǎng)絡(luò)。國際互聯(lián)網(wǎng)就這樣誕生了！,初識網(wǎng)頁 在學(xué)習(xí)DREAMWEAVER之前，先學(xué)習(xí)一些網(wǎng)頁的相關(guān)知識，對以后的設(shè)計(jì)是大有裨益的。,網(wǎng)頁的發(fā)展歷程： 說起網(wǎng)頁(Web page)同學(xué)們都不會陌生，很

4、多同學(xué)可能是從初中起就開始接觸網(wǎng)頁了，很多同學(xué)會以為Internet與網(wǎng)頁同時(shí)產(chǎn)生，其實(shí)不然。當(dāng)Internet剛剛興起的時(shí)候， Internet只能傳輸純文本信息，就連標(biāo)題與正文字體的大小都不能區(qū)別，更別說多媒體了。那時(shí)候的Internet上充斥著枯燥乏味的文字，不過多數(shù)人已經(jīng)在為能夠與全世界的人群溝通而感到興奮不已。 然而有一些人卻對現(xiàn)狀并不滿意，于是他們開發(fā)了HTML網(wǎng)絡(luò)語言。通過在網(wǎng)頁里插入HTML代碼，文字可以區(qū)別大小了，更有了各種字體和色彩，還可以加入圖畫、聲音、動(dòng)畫、視頻，還能使用各種排版，于是網(wǎng)頁生動(dòng)起來、美麗起來，真正意義上的網(wǎng)頁誕生了！不過HTML有一個(gè)弱點(diǎn)，它的代碼需要一

5、種稱為網(wǎng)頁瀏覽器的軟件才能正確讀取它，而瀏覽器(如Netscape)需要另外花錢購買，如果不使用瀏覽器來觀看網(wǎng)頁，HTML代碼就會干擾人們找到需要的信息而顯的非常多余，所以在它剛剛出生的時(shí)候并不像今天一樣受歡迎，甚至有人還開發(fā)了一些小程序以去掉網(wǎng)頁上的HTML代碼。不過比爾蓋茨看到了網(wǎng)頁的發(fā)展前景，在他的Windows98操作平臺里預(yù)先安裝了名為Internet Explorer(簡稱IE)的網(wǎng)頁瀏覽器，這樣，購買了Windows系統(tǒng)的人就不需要再為購買瀏覽器而掏腰包了，于是Windows賣火了，比爾蓋茨成了首富，也因壟斷上了法庭，但不容置疑的是這一舉措極大的促進(jìn)了網(wǎng)絡(luò)的發(fā)展，成千上萬個(gè)用HT

6、ML編寫的網(wǎng)站走進(jìn)了人們的視野，人們享受著網(wǎng)絡(luò)帶來的便利和樂趣。 不過隨著網(wǎng)頁的增多，人們發(fā)現(xiàn)要找到需要的信息變的越來越困難了，于是人們便把網(wǎng)站像編寫電話黃頁一樣，把網(wǎng)站分類編寫成網(wǎng)站黃頁，放在網(wǎng)上供人查詢。后來人們發(fā)明了更有效的辦法那便是網(wǎng)絡(luò)搜索引擎，它是一種程序，人們只需要輸入要找的信息的關(guān)鍵字，搜索引擎便可以幫你去網(wǎng)絡(luò)的海洋里搜尋。1995年3月由美籍華裔楊致遠(yuǎn)與一個(gè)朋友創(chuàng)辦Yahoo!網(wǎng)站，這是當(dāng)時(shí)最棒的搜索引擎。網(wǎng)頁也真正的進(jìn)入了黃金時(shí)代。,初識網(wǎng)頁 在學(xué)習(xí)DREAMWEAVER之前，先學(xué)習(xí)一些網(wǎng)頁的相關(guān)知識，對以后的設(shè)計(jì)是大有裨益的。,什么是HTML？ HTML是(Hypertex

7、t Markup Language)的首字母縮寫，中文一般翻譯為“超文本標(biāo)記語言”。它是目前Internet上最廣泛的用于編寫網(wǎng)頁的主要語言之一。 HTML是純文本類型語言，它可以用任何文本編輯器來編寫它(如Windows的“記事本”)。也可以在用瀏覽器打開網(wǎng)頁時(shí)，用“查看源文件”命令查看網(wǎng)頁中的HTML代碼。 HTML的語法很簡單，他采用直白的命令，只需要一點(diǎn)英文基礎(chǔ)便能看懂。它通過使用各種“標(biāo)記”、“元素”、“屬性”、“對象”等代碼，建立與文本、圖片、聲音、視頻、Flash等多媒體以及其他HTML文件的連接。（在這里需要注意的是，HTML文件只起連接作用，至于如何連接的，我們隨后在下一節(jié)初

8、識HTML代碼將詳細(xì)講解。） HTML文件帶有.htm或.html的擴(kuò)展名(如，index.htm)。(擴(kuò)展名又叫延伸名，是電腦識別文件“身份”的標(biāo)記，如果沒有這個(gè)標(biāo)記，電腦就不知道用什么程序來打開這個(gè)文件) HTML語法是解釋型的，這就是說，我們最后所看到的網(wǎng)頁的樣子，是在瀏覽器打開HTML文檔時(shí)，由瀏覽器生成的。打個(gè)比方，瀏覽器是我們的翻譯官，HTML是外文，打開網(wǎng)頁時(shí)，翻譯官先幫我們閱讀外文，然后把外文翻譯成中文，以便于我們能夠閱讀。只是它翻譯速度很快，我們沒注意到它在翻譯罷了。（也正因?yàn)槿绱耍W(wǎng)頁的顯示速度同代碼的編寫質(zhì)量有很大關(guān)系，高水平的網(wǎng)頁應(yīng)該具有簡潔清晰、語法準(zhǔn)確，便于“翻譯”

9、的代碼） 什么是WWW？ HTML的發(fā)展與Internet上的WWW瀏覽操作密不可分。 WWW是(World Wild Web)的首字母縮寫，也稱為3W或The Web，它是建立在Internet上的全球性，交互式、動(dòng)態(tài)、多平臺的圖象信息系統(tǒng)。 什么是HTTP？ WWW是依靠HTTP (Hypertext Transfer Protocol)，中文一般翻譯為“超文本傳輸協(xié)議” ，進(jìn)行傳輸?shù)摹?協(xié)議起什么作用呢？打個(gè)比方，我們要把一批貨物從中國運(yùn)到美國去，那么中美雙方就會先簽署協(xié)議，協(xié)議里面會規(guī)定中方用什么方法包裝貨物，運(yùn)到后用什么方法打開，否則美方可能收到了貨物卻打不開。那么網(wǎng)上的服務(wù)器想把信

10、息傳遞給我們，就事先需要跟我們的電腦約定好信息壓縮和加密的方式，然后才能傳輸。當(dāng)然傳輸信息的方式還有很多，網(wǎng)絡(luò)協(xié)議除了HTTP還有FTP、IPX、TCP/IP等多種。所以我們?yōu)g覽網(wǎng)頁的正確寫法應(yīng)該是 HTTP:/WWW.163. net。如果我們只輸入了WWW，瀏覽器會自動(dòng)幫我們在前面添上HTTP:/。,初識HTML代碼 雖然擁有DW，但對于一個(gè)希望深入掌控網(wǎng)頁創(chuàng)作的人，讀懂和書寫HTML代碼依然必不可少。,HTML的工作原理： 顧名思義，超文本標(biāo)記語言，其語言構(gòu)成主要是通過各種標(biāo)記(Fag)來標(biāo)示和排列各對象，通常標(biāo)記由“ ”符號以及其中所包容的標(biāo)記元素組成。（例如，如果希望在瀏覽器中顯示一

11、段加粗的文本，可以采用這組標(biāo)記，如下所示： HTML的語法特征： HTML語法有三種基本寫法，適用于不同的情況，如下所示：,標(biāo)記的書寫與字母大小寫無關(guān)。但是有些服務(wù)器不支持大寫，所以建議你應(yīng)盡量采用小寫書寫。,在用瀏覽器瀏覽時(shí)，標(biāo)記最后是不會被顯示出來的。這對標(biāo)記是用來告訴瀏覽器“加粗的文本”這五個(gè)字要用粗體顯示喲！,嚴(yán)格意義上，標(biāo)記跟元素不同，標(biāo)記是指”符號，元素是位于標(biāo)記中間的內(nèi)容，也就是”符號間的內(nèi)容。不過通常我們都把標(biāo)記跟元素當(dāng)成一種東西，因?yàn)闃?biāo)記和元素，離開誰都不起作用了。所以我們把它們統(tǒng)稱為“標(biāo)記”。為了方便我們表示成：,初識HTML代碼 雖然擁有DW，但對于一個(gè)希望深入掌控網(wǎng)頁創(chuàng)

12、作的人，讀懂和書寫HTML代碼依然必不可少。,寫法一，封閉類型標(biāo)記。大多數(shù)標(biāo)記都是屬于這個(gè)類型。它們成對出現(xiàn)在對象前后，后面的標(biāo)記元素前帶有反斜線，表明結(jié)束標(biāo)記對對象的控制。如下所示： 寫法二，封閉類型標(biāo)記的擴(kuò)展形式。利用“屬性”可以進(jìn)一步設(shè)置對象某方面的屬性?！皡?shù)”是屬性值。如下所示： 寫法三，非封閉類型標(biāo)記。這種標(biāo)記在HTML語言里類型很少，但也最為常用。如下所示： 綜合運(yùn)用標(biāo)記嵌套，標(biāo)記還間可以相互嵌套，形成更為復(fù)雜的語法，這樣可更為詳細(xì)的定義對象。如下所示：,叫錨記，它的作用就跟船錨一樣。打個(gè)比方，我們上網(wǎng)就像在大海里航行，每個(gè)網(wǎng)頁就是我們要去的目的地（所以有人把上網(wǎng)形容為沖浪呢）。

13、我們把船錨拋向想要去的地方，船錨就會拉著船兒到達(dá)目標(biāo)。, 叫分段標(biāo)記。 叫提行標(biāo)記，表示它后面的內(nèi)容與它前面的內(nèi)容同屬一個(gè)段落，只是寫了一半后，提了行。,也可寫成這樣,不可寫成這樣，這樣嵌套順序就錯(cuò)了！,很幸運(yùn)！在這個(gè)例子里，大多數(shù)瀏覽器能夠正確翻譯它。但是對于其他的一些標(biāo)記，如果嵌套發(fā)生錯(cuò)誤的話，就不一定有這么好的運(yùn)氣了。為了保證文檔有更好的兼容性，請盡量不要發(fā)生標(biāo)記嵌套順序的錯(cuò)誤。,初識HTML代碼 雖然擁有DW，但對于一個(gè)希望深入掌控網(wǎng)頁創(chuàng)作的人，讀懂和書寫HTML代碼依然必不可少。,構(gòu)成HTML文檔的基本代碼 以下四組標(biāo)記構(gòu)成了最基本的HTML文檔，它們分別是。 在下表中，代碼的書寫格

14、式是為了讓代碼看起來清晰明了，不這樣書寫也不會影響瀏覽器正確讀取代碼，不過最好還是按這種格式書寫。, 容器，里面裝著文檔里的全部內(nèi)容。, 頭部，一般用來放置網(wǎng)頁的簡介，就是其一。, 標(biāo)題，網(wǎng)頁不能沒有標(biāo)題。, 身體，網(wǎng)頁正文內(nèi)容放在這里。,初識DW 第一眼看到DW你有什么樣的感受呢？,值得紀(jì)念的Macromedia! 和永遠(yuǎn)的Dreamweaver! Dream是夢，Weaver是編織者。Dreamweaver便是織夢者。 早期的網(wǎng)頁設(shè)計(jì)師都是由程序員擔(dān)任，因?yàn)槟菚r(shí)候還沒有Dreamweaver(以下簡稱DW)，那時(shí)的網(wǎng)頁設(shè)計(jì)師使用文本編輯器編寫HTML語言，而制作更需要精通HTML，那是十分

15、復(fù)雜的讓人頭暈?zāi)垦５钠D巨工作，所以只有程序員能夠制作，但程序員畢竟不是藝術(shù)家改變這一切的是美國的Macromedia公司，是它開發(fā)了DW這一專業(yè)的網(wǎng)頁創(chuàng)作工具。它采用所見即所得的編輯方式使網(wǎng)頁制作變得前所未有的簡單。設(shè)計(jì)者不再必須面對繁雜的HTML代碼和JavaScript，而是以更接近于繪畫的方式來制作網(wǎng)頁，設(shè)計(jì)師、藝術(shù)家紛紛加入網(wǎng)頁設(shè)計(jì)的行列，極大的提高了網(wǎng)頁設(shè)計(jì)的水平，但不僅僅是專業(yè)人員，更多的普通人也在制作自己的網(wǎng)頁，把自己的快樂與世界分享?？梢栽O(shè)想，沒有Macromedia就沒有DW，沒有DW今天的網(wǎng)絡(luò)就不可能有如此繁榮！ Macromedia被譽(yù)為世界上最有創(chuàng)意的公司，不但是因?yàn)樗?/p>

16、開發(fā)了具有獨(dú)創(chuàng)精神的DW，還因?yàn)樗_發(fā)了獨(dú)具魅力的Flash，如果說，網(wǎng)絡(luò)世界因而DW而繁榮，那它就因Flash而生動(dòng)，DW編織了人們的夢想，F(xiàn)lash猶如閃電讓人們眼前一亮。Macromedia的每一款產(chǎn)品都給網(wǎng)絡(luò)世界帶了革命！ 2004年，Macromedia為世界帶來DW的最新版本DW MX 2004，人們不禁會問：什么是MX？ Macromedia這樣答道：MX并不是某個(gè)單詞的首字母縮寫，它是一個(gè)名字，更是代表著Macromedia的理念，領(lǐng)導(dǎo)網(wǎng)絡(luò)技術(shù)發(fā)展的一面旗幟！ 出師未捷生先死，常使英雄淚滿襟。就在Macromedia將版本號改為MX，信誓旦旦的要一統(tǒng)網(wǎng)絡(luò)開發(fā)領(lǐng)域不久。今年3月，

17、 Macromedia突然宣布被傳統(tǒng)印刷出版軟件業(yè)巨頭Adobe公司收購。 從今往后，Macromedia這個(gè)名稱很可能將不復(fù)存在，而下一代的Macromedia DW或許會叫Adobe DW，而版本號MX也會變成CS。對于此，我們只能寄希望于Adobe能夠繼承Macromedia銳意創(chuàng)新的精神，我們期待著下一個(gè)驚喜，在那時(shí)我們將回憶起Macromedia為網(wǎng)絡(luò)世界做出的杰出貢獻(xiàn)！ 本節(jié)學(xué)習(xí)內(nèi)容目錄： DW的界面。 制作簡單的網(wǎng)頁。,DW的基本功能 最基本的功能，也許是最簡單的，但一定是最重要的。,本節(jié)學(xué)習(xí)內(nèi)容目錄： 創(chuàng)建站點(diǎn)。 規(guī)劃站點(diǎn)。 設(shè)置網(wǎng)頁文檔屬性。 改變文字屬性。 添加新字體。 使

18、用項(xiàng)目。 插入水平線。 插入符號。 插入圖片。 用Adobe ImagerReady CS制作GIF動(dòng)畫。 圖文編排。 制作鼠標(biāo)響應(yīng)的翻轉(zhuǎn)按鈕。 超鏈接。 用超鏈接鏈接頁面。 錨記的用途。 圖像熱區(qū)。 HTML快捷欄。,DW的基本功能 最基本的功能，也許是最簡單的，但一定是最重要的。,創(chuàng)建站點(diǎn)： 在制作網(wǎng)頁前需要作的第一件事便是指定一個(gè)文件夾作為你的站點(diǎn)文件夾。站點(diǎn)，就是構(gòu)成你網(wǎng)站的各種零件的集合，那個(gè)裝著零件的文件 夾就叫做站點(diǎn)文件夾。 遠(yuǎn)程站點(diǎn)：作好的網(wǎng)頁需要放到網(wǎng)絡(luò)服務(wù)器上才能被別人瀏覽。如果站點(diǎn)已經(jīng)被放到網(wǎng)絡(luò)服務(wù)器上，那就叫做遠(yuǎn)程站點(diǎn)。 本地站點(diǎn)：為了制作時(shí)的方便，我們一般都是在自己的

19、電腦上將網(wǎng)站制作好，然后再傳到網(wǎng)絡(luò)服務(wù)器上的。那么當(dāng)站點(diǎn)在自己的電腦上時(shí)，就叫做本地站點(diǎn)。 規(guī)劃站點(diǎn)： 合理的站點(diǎn)結(jié)構(gòu)能夠方便你管理，當(dāng)網(wǎng)站內(nèi)容逐漸豐富起來時(shí)，如果沒有合理的規(guī)劃，管理將使你頭痛不止。規(guī)劃站點(diǎn)時(shí)請遵循兩個(gè)原則： 清楚命名：別圖方便而讓文件名都是“未命名-1” “未命名-2”或是”111”222”之類，胡亂命名并不節(jié)約時(shí)間，而會讓你在需要它時(shí)找不到北。 盡管使用中文名稱對于我們更加清晰易懂，遺憾的是很多英文操作系統(tǒng)不能識別中文，采用中文文件名會導(dǎo)致錯(cuò)誤。背幾個(gè)常用 的單詞肯定有好處，如果實(shí)在不行，你用拼音呀。還有最好都用小寫字母。 清楚歸類：別把所有東西都胡亂裝在一個(gè)文件夾里，在

20、站點(diǎn)文件夾下創(chuàng)建幾個(gè)子文件夾，把東西分門別類放的好。我推薦如下的分類方法：,我的站點(diǎn)_01，根目錄，站點(diǎn)文件夾。,資源，子目錄。,關(guān)于我，子目錄。,圖像，子目錄。,媒體，子目錄。,導(dǎo)航，子目錄。,作品，子目錄。,關(guān)于我，文件。,DW的基本功能 最基本的功能，也許是最簡單的，但一定是最重要的。,什么是文件地址： 文件地址是用來說明文件保存在電腦里的什么位置。 aboutme.htm文件的地址： snow.jpg文件的地址：,aboutme.htm的實(shí)際地址應(yīng)該是：D:mysite_01aboutme.htm，但是在DW里，會省略掉根目錄，即：D:mysite_01這部分。,snow.jpg的實(shí)際

21、地址應(yīng)該是：D:mysite_01assetsaboutmeimagesnow.jpg，但是在DW里，不但會省略掉根目錄，即：D:mysite_01這部分。而且還會將”替換成”/”。,在這里，image文件夾是snow.jpg的父目錄，aboutme又是image的父目錄，image則為aboutme的子目錄。依次類推。,DW的基本功能 最基本的功能，也許是最簡單的，但一定是最重要的。,什么是超鏈接？ 超鏈接(Hyperlink)其實(shí)是一根將各個(gè)獨(dú)立的網(wǎng)頁鏈接起來的看不見的連接線。通過這根連接線，我們才可以從這個(gè)網(wǎng)頁跳到另一個(gè)網(wǎng)頁。 它是由一個(gè)起點(diǎn)和一個(gè)終點(diǎn)構(gòu)成。 分類： 建立超鏈接到同一文件

22、加里的網(wǎng)頁文檔： 建立超鏈接到其他文件加里的網(wǎng)頁文檔： 建立超鏈接到其他網(wǎng)站： 建立E-mail鏈接：,DW的基本功能 最基本的功能，也許是最簡單的，但一定是最重要的。,建立超鏈接到該網(wǎng)頁內(nèi)部某處： 這種鏈接先要在網(wǎng)頁某處放下命名錨，然后點(diǎn)擊超鏈接時(shí)，跳轉(zhuǎn)到命名錨所在的位置： 鏈接目標(biāo)： 就是指超鏈接到目標(biāo)的方法。,被命名為top的命名錨。,文字鏈接。,_blank，當(dāng)點(diǎn)擊超鏈接后，會新開一個(gè)瀏覽器窗口以顯示被鏈接的網(wǎng)頁。,_parent，當(dāng)點(diǎn)擊超鏈接后，在原瀏覽器窗口中顯示被鏈接的網(wǎng)頁。,_parent，如果網(wǎng)頁有框架，當(dāng)點(diǎn)擊超鏈接后，在原框架中顯示被鏈接的網(wǎng)頁。,_parent，如果網(wǎng)頁有

23、框架，當(dāng)點(diǎn)擊超鏈接后，打開的網(wǎng)頁不受原框架的限制。,DW的基本功能 最基本的功能，也許是最簡單的，但一定是最重要的。,鼠標(biāo)響應(yīng)的翻轉(zhuǎn)按鈕： 網(wǎng)頁上經(jīng)?？吹竭@樣一種按鈕，當(dāng)鼠標(biāo)放在它上面時(shí)，它就出現(xiàn)了變化。這種按鈕稱為鼠標(biāo)響應(yīng)按鈕。 它的原理是平常狀態(tài)下顯示一張圖片，當(dāng)鼠標(biāo)指向這張圖片時(shí)，馬上使用另一張圖片來替換它。 實(shí)際上，鼠標(biāo)相應(yīng)的反轉(zhuǎn)按鈕一共有四種狀態(tài)。,普通狀態(tài)，鼠標(biāo)什么都事都沒有做的狀態(tài)，顯示圖片aboutme.jpg,鼠標(biāo)懸停狀態(tài)，就是鼠標(biāo)放上去，但還沒有點(diǎn)下去的狀態(tài)。顯示圖片aboutme_over.jpg,普通狀態(tài),鼠標(biāo)懸停狀態(tài),鼠標(biāo)點(diǎn)擊狀態(tài)，鼠標(biāo)點(diǎn)下去了，但還沒有松手時(shí)的狀態(tài)，

24、顯示圖片aboutme_down.jpg,被選擇狀態(tài)，鼠標(biāo)完成了它的選擇后離開了，這個(gè)狀態(tài)一直會保持，直到有了新的選擇，顯示圖片aboutme_sel.jpg,表格和框架 網(wǎng)頁布局排版利器。,本節(jié)學(xué)習(xí)內(nèi)容目錄： 什么是表格。 熟練掌握表格和單元格屬性。 利用表格設(shè)計(jì)特殊的頁面布局。 利用透明圖片制作1像素的細(xì)線。 插入背景圖片。 什么是框架。 創(chuàng)建并保存框架。 熟練掌握框架屬性。 利用框架制作主頁。 制作內(nèi)部框架。,什么是表格： 表格其實(shí)跟Word里的表格沒有多大差別，都是用來把復(fù)雜的東西進(jìn)行歸類的。你也可以利用它布局文字、圖片的位置。 它就像可以隨意改變形狀的組合抽屜。,表格和框架 網(wǎng)頁布局

25、排版利器。,這就是表格。,表格的構(gòu)造：,表格和框架 網(wǎng)頁布局排版利器。,行（橫）。,列（豎）。,邊框。,單元格。,填充，指單元格中的內(nèi)容到單元格邊框的距離。,間距，指單元格與單元格之間的距離。,邊框，指邊框的寬度。,容易讓人暈菜的對齊方式： DW里的文字、圖片、文本繞圖、表格、表格的單元格都可以設(shè)置對齊方式，雖然共能強(qiáng)大，但卻容易搞混。 提醒一句，看清楚你現(xiàn)在選中的是什么。 文本的對齊方式,表格和框架 網(wǎng)頁布局排版利器。,圖片的對齊方式，文本對齊圖片的方式,表格和框架 網(wǎng)頁布局排版利器。,這里控制圖片處于哪個(gè)位置。,這里比較特殊！是控制文字如何圍繞圖片的方式。,表格的對齊方式,表格和框架 網(wǎng)頁

26、布局排版利器。,這里控制表格處于哪個(gè)位置。,單元格的對齊方式,表格和框架 網(wǎng)頁布局排版利器。,這里很特殊！并不是控制單元格本身的位置，而是控制單元格里裝的東西處于單元格里的哪個(gè)位置。,圖片與表格背景圖片的區(qū)別: 我們把表格或者是單元格比作一個(gè)盒子。這個(gè)盒子不僅可以裝東西，還可以在它表面畫畫。,表格和框架 網(wǎng)頁布局排版利器。,表格中既沒有圖片，又沒有背景圖片。,表格中有圖片，但沒有背景圖片。,表格沒有圖片，但有背景圖片。,表格既有圖片，又有背景圖片。,框架式什么？ 雖然表格已經(jīng)可以滿足我們排版布局的需要，但有時(shí)候每個(gè)頁面都有重復(fù)的元素，比如導(dǎo)航欄。這樣重復(fù)制作不僅麻煩，而且瀏覽者每次瀏覽新頁面時(shí)

27、都要下載重復(fù)的內(nèi)容，很浪費(fèi)時(shí)間。如果我們把一個(gè)頁面分成兩種區(qū)域，一種區(qū)域不變，另一種區(qū)域可根據(jù)你的選擇進(jìn)行頁面的更換，這樣就不用重復(fù)制作與下載了。這就是框架的作用。 使用框架，可以在一個(gè)瀏覽器窗口中同時(shí)瀏覽幾個(gè)頁面，通過在這些頁面上建立超鏈接，可以實(shí)現(xiàn)導(dǎo)航、瀏覽的目的。,表格和框架 網(wǎng)頁布局排版利器。,框架的結(jié)構(gòu)： 一般來說，框架由框架集(frameset)和框架(frame)兩個(gè)元素組成。 所謂框架集就是框架的集合。框架集其實(shí)就是一個(gè)HTML文檔，用來把框架組合在一起?？梢园阉醋鍪且粋€(gè)用來容納和組織多個(gè)框架文檔的容器?？蚣芪臋n其實(shí)也是HTML文檔，只不過被框架集組合在了一起。 下圖是一個(gè)擁

28、有3個(gè)框架的框架集，實(shí)際上它是由4個(gè)HTML文檔組成的。,表格和框架 網(wǎng)頁布局排版利器。,框架，用于導(dǎo)航。,框架，正文內(nèi)容。,框架，廣告圖片。,框架集。,最終效果,框架的另一種形式內(nèi)連框架： 內(nèi)聯(lián)框架(inline frame)，也稱圖文框。它可以在不需要框架集的情況下，使用框架效果。 遺憾的是DW沒有提供建立內(nèi)連框架的快捷方式，我們只能自己動(dòng)手編寫內(nèi)連框架的HTML代碼。,表格和框架 網(wǎng)頁布局排版利器。,框架邊框，0表示沒有邊框，1表示有邊框,滑動(dòng)手柄，no表示沒有，yes表示有，auto自動(dòng),高度，單位是像素,寬度，單位可以使像素也可以是百分比,地址，要放入框架的文檔的地址,標(biāo)記，這是個(gè)封

29、閉類型的標(biāo)記，不過間沒有內(nèi)容,CSS樣式表 網(wǎng)頁布局排版利器。,本節(jié)學(xué)習(xí)內(nèi)容目錄： 什么是CSS。 利用樣式表改變文字屬性。 利用樣式表修改行距。 利用樣式表，給所有圖片加上邊框。 利用樣式表調(diào)整背景圖片的位置。 利用樣式表定義超鏈接形態(tài)。 利用樣式表制作項(xiàng)目圖標(biāo)。 利用樣式表改變滾動(dòng)條的外觀。,CSS樣式表 HTML的超越者，下一代網(wǎng)頁語言的標(biāo)準(zhǔn)。,什么是CSS樣式表： CSS是層疊樣式表單(Cascading Style Sheet)的簡稱。中文一般簡稱為：樣式表。樣式，可以解釋為外觀。樣式表是用來定義對象外觀的。 你可以把CSS當(dāng)成HTML語言的擴(kuò)展形式，利用它可以定義HTML無法定義的

30、屬性，比如說行距和字距。 一個(gè)CSS不僅能夠控制一個(gè)網(wǎng)頁中的內(nèi)容的屬性，還能通過外部鏈接的形式，控制多個(gè)網(wǎng)頁內(nèi)容的屬性。而且你只需要修改樣式表，那么被控制對象的屬性就一起被改變了，這樣可以大幅度的提高工作效率。對于專業(yè)人士來說，CSS提供了簡潔有序的網(wǎng)站代碼結(jié)構(gòu)，有利于網(wǎng)站開發(fā)后的維護(hù)工作。 CSS唯一的缺點(diǎn)在于，只有IE4或Netscape4以上的瀏覽器才能正確識別樣式表定義的屬性，但是在Windows XP時(shí)代，尤其是在中國，老版本的瀏覽器已經(jīng)十分罕見了，所以這個(gè)缺點(diǎn)完全可以被忽略。 去年網(wǎng)絡(luò)上已經(jīng)風(fēng)聞樣式表以其無與倫比的優(yōu)越性，將成為網(wǎng)頁編寫語言的新標(biāo)準(zhǔn)。WWW協(xié)會正大力提倡設(shè)計(jì)師使用C

31、SS，而Macromedia公司也表示下一代DW將全力支持CSS。不過到目前為止，世界上還有數(shù)以千萬用HTML編寫的網(wǎng)站，不可能一下子全部更新，還有很多習(xí)慣于使用HTML的設(shè)計(jì)師不愿意進(jìn)行改變，比如讓他們使用CSS來排版會讓他們覺得事倍功半。況且CSS在局部方面還存在著不完善。所以HTML和CSS還將共存一段較長的時(shí)間。 CSS的語法： CSS分為定義部分和應(yīng)用部分。 先在間寫入用來定義對象屬性的CSS代碼。標(biāo)記表示它們中間的內(nèi)容是CSS語言，style后面的type表示了CSS的類型。 真正起作用的部分是.myStyle后面 間的內(nèi)容。,.myStyle是樣式名稱，注意前面的”.”是必不可少

32、的。, 用來把樣式屬性包起來。,Font-family是樣式屬性。,: 用來表示屬性值的從屬關(guān)系。,“黑體”是屬性值。,; 用來分開多個(gè)樣式屬性。,CSS樣式表 HTML的超越者，下一代網(wǎng)頁語言的標(biāo)準(zhǔn)。,只是定義并不能讓對象有所改變，我們還需要把定義附加到對象身上。 這樣我們就把名叫myStyle的樣式，應(yīng)用到了“這個(gè)對象被樣式表定義”這幾個(gè)字上面。 CSS的種類： 自定義，我們可以把定義好的樣式應(yīng)用到任何制定的地方。使用方法跟前面學(xué)習(xí)的用HTML語言定義表格的方式一樣。 標(biāo)簽，可以一次性定義網(wǎng)頁中某種標(biāo)記的屬性。,間的對象被CSS定義了,class后的名稱是樣式名稱。,在這里輸入新建樣式的名

33、稱，注意前面加”.”,在下拉菜單里選擇要定義的標(biāo)記,CSS樣式表 HTML的超越者，下一代網(wǎng)頁語言的標(biāo)準(zhǔn)。,高級，定義偽類，我們一般它用來定義超鏈接文本的外觀。,文字鏈接的狀態(tài)，跟前面的鼠標(biāo)響應(yīng)按鈕的狀態(tài)很相似。,普通狀態(tài),被選擇狀態(tài),鼠標(biāo)懸停狀態(tài),鼠標(biāo)點(diǎn)擊狀態(tài),利用CSS改變滾動(dòng)條樣式 把下面代碼放到之間。注意這個(gè)代碼是CSS代碼的標(biāo)簽類型，body是樣式名稱，與自定義類型不同的是，名稱前面不加”.”。,CSS樣式表 HTML的超越者，下一代網(wǎng)頁語言的標(biāo)準(zhǔn)。,表面色彩,陰影色彩,高光色彩,3D高光色彩,軌跡色彩,箭頭色彩,3D陰影色彩,多媒體 讓網(wǎng)頁生動(dòng)起來。,本節(jié)學(xué)習(xí)內(nèi)容目錄： 什么是多媒

34、體？ 在網(wǎng)頁中插入背景音樂。 在網(wǎng)頁中插入影像。 利用瀏覽者的Media Player播放影像。 在網(wǎng)頁中插入Flash影片。 利用框架設(shè)置可連續(xù)播放的背景音樂。,多媒體 讓網(wǎng)頁生動(dòng)起來。,什么是多媒體？ 多媒體就是多種媒體?，F(xiàn)在的人們已經(jīng)不單純滿足于文字于圖片構(gòu)成的網(wǎng)頁了，他們需要聲音、動(dòng)畫、影像！ 但實(shí)際上，網(wǎng)頁瀏覽器自身并不能播放聲音和影像，要播放聲音和影像需要媒體播放器。媒體播放器跟網(wǎng)頁瀏覽器一樣都是一種軟件。 多媒體技術(shù)的廣泛應(yīng)用還是要感謝與比爾蓋茨 ，因?yàn)樗赪indows中預(yù)先內(nèi)置了Media Player，有了Media Player人們便可以欣賞到網(wǎng)頁上的音樂和影像了。 Me

35、dia Player可以播放大部分的聲音文件和影像文件，如下表： 在頁面里插入媒體的語法 利用快捷方式插入媒體時(shí)，在參數(shù)對話框中設(shè)置媒體的屬性：,重復(fù)播放？,影片的寬度和高度。,影片地址。,多媒體 讓網(wǎng)頁生動(dòng)起來。,隱藏播放器控制桿的方法？ 先將標(biāo)記改為，然后將src屬性改為dvsrc，即可。 利用訪問者的Media Player播放媒體。 前面學(xué)習(xí)是，在網(wǎng)頁里播放媒體的方法，因?yàn)榫W(wǎng)頁瀏覽器不支持媒體播放，所以我們必須使用插入的方式。 如果我們利用瀏覽者本地電腦上的媒體播放器播放媒體，那就很簡單了只需要設(shè)置鏈接就可以了。,行為 搞定JavaScript ，搞定實(shí)用效果。,本節(jié)學(xué)習(xí)內(nèi)容目錄： 什

36、么是行為。 什么是JavaScript。 常用的事件。 利用行為制作鼠標(biāo)響應(yīng)的導(dǎo)航條。 利用行為制作拼圖游戲。 利用行為制作彈出窗口。 利用行為顯示大圖片的預(yù)覽效果。 利用行為制作高級下拉菜單。,什么是行為？ 行為是一種能夠簡單的運(yùn)用JavaScript，制作各種效果的DW功能。 如果想使用行為，首先要指定發(fā)生行為的對象，然后決定對象要完成什么動(dòng)作，最后還要決定這個(gè)動(dòng)作在什么情況下發(fā)生。在什么情況下發(fā)生被稱為事件。 什么是JavaScript。 JavaScript是Sun公司推出的一種編程語言。可以用它來實(shí)現(xiàn)HTML語言不能實(shí)現(xiàn)的效果，后面我們將看到這些效果。 Java這個(gè)名字的來歷是，當(dāng)年

37、開發(fā)Java的程序員很喜歡喝一種在爪哇島上叫Java的咖啡。所以Java的標(biāo)志是一杯咖啡就不難理解了。 Java編寫好后，將它存入頁面中，并在HTML檔上作好相應(yīng)標(biāo)記，這樣，只要瀏覽者的電腦上裝有Java客戶應(yīng)用程序（這就跟播放媒體需要安裝Media Player一樣），就可以看到Java帶來的效果。 前兩年聽說Sun跟微軟鬧翻了，微軟推出了自己的.Net想代替Java，并不在Windows 上預(yù)裝Java客戶應(yīng)用程序， 不過似乎并不成功，很多D版Windows里還是預(yù)裝了java，并且這種Java客戶應(yīng)用程序在網(wǎng)絡(luò)上隨處可下載。,行為 搞定JavaScript，搞定實(shí)用效果。,誰？,干什么？

38、,在什么時(shí)候？,常用的事件 事件非常的多，各有用處，不過對于初學(xué)者而言，先掌握幾個(gè)最最常用的就可以應(yīng)付基本的需要了。,行為 搞定JavaScript，搞定實(shí)用效果。,插件 讓DW更強(qiáng)大，讓網(wǎng)頁更精彩。,本節(jié)學(xué)習(xí)內(nèi)容目錄： 什么是插件？ 插件的種類。 利用插件制作添加到收藏夾的按鈕。 利用插件制作幻燈片。 利用插件制定根據(jù)瀏覽器窗口大小自動(dòng)縮放的背景圖片。 利用插件制作文字的滾動(dòng)效果。 利用插件制作相對定位層。 到網(wǎng)絡(luò)上找資源！,插件 讓DW更強(qiáng)大，讓網(wǎng)頁更精彩。,什么是插件？ 雖然DW的既可以“所見即所得”的方式編輯網(wǎng)頁，也可以代碼編輯的方式制作網(wǎng)頁，功能已經(jīng)非常全面。 但是人希望偷懶的欲望是

39、沒有止境的。于是一些不屬于Macromedia的小公司或個(gè)人開發(fā)了一些小程序，用以讓本來需要手動(dòng)編寫代碼的特殊效果，變得更容易使用。 我們可以利用DW附帶的擴(kuò)展管理器Extension Manager，將插件們安裝到DW里。 不過，偷懶是要擔(dān)風(fēng)險(xiǎn)的！因?yàn)椴寮皇怯蒑acromedia開發(fā)，所以就不能保證質(zhì)量。你可能會遇到一些你意想不到情況，比如：按說明使用插件卻達(dá)不到說明上宣稱的效果，或者添加了一個(gè)新功能后，一些DW本身的功能卻不見了！確實(shí)讓人郁悶 插件的種類： 插件，根據(jù)安裝在什么位置，可分為3類。 對象,命令,插件 讓DW更強(qiáng)大，讓網(wǎng)頁更精彩。,行為 文字的滾動(dòng)效果 Marquee是個(gè)非常有用的插件，他是利用了標(biāo)記，不過不是很完善，但我們可以手動(dòng)的方式完善它。,對齊方式。,卷軸速度。,卷動(dòng)方向。,卷動(dòng)方式。,插件 讓DW更強(qiáng)大，讓網(wǎng)頁更精彩。,到網(wǎng)絡(luò)上找資源！ www.G 可能是世界上最好的搜索引擎！因?yàn)閥ahoo! 都扔掉了自己的引擎，改用Google的了。,表單 溝通人與電腦。,本節(jié)學(xué)習(xí)內(nèi)容目錄： 什