dreamweavercs3教程第1章網(wǎng)頁設(shè)計(jì)初體驗(yàn).ppt

1、第1章 網(wǎng)頁設(shè)計(jì)初體驗(yàn),網(wǎng)頁設(shè)計(jì)是一門綜合性技術(shù)，包含許多方面的內(nèi)容。它包含程序設(shè)計(jì)、美術(shù)設(shè)計(jì)及其他媒體技術(shù)。網(wǎng)頁設(shè)計(jì)看似復(fù)雜，但是，不管哪一種技術(shù)都有基礎(chǔ)的一部分。任何技術(shù)都是從一定的基礎(chǔ)上擴(kuò)展而來。在學(xué)習(xí)網(wǎng)頁設(shè)計(jì)之前，先學(xué)習(xí)與之相關(guān)的一些基礎(chǔ)知識(shí)。,1.1 什么是網(wǎng)頁,學(xué)習(xí)網(wǎng)頁設(shè)計(jì)，首先需要了解網(wǎng)頁這一概念。在此之前，需要先了解與網(wǎng)頁相關(guān)的歷史。,1.1.1 互聯(lián)網(wǎng),在20世紀(jì)70年代，互聯(lián)網(wǎng)初露荷角。直到80年代，對(duì)其還在不斷的研究中。到了90年代，商業(yè)運(yùn)作的介入，改變了互聯(lián)網(wǎng)的狀況。互聯(lián)網(wǎng)進(jìn)入飛速發(fā)展時(shí)期。它的成長(zhǎng)幾乎是指數(shù)式的增長(zhǎng)。直到現(xiàn)在，互聯(lián)網(wǎng)發(fā)展依然是高速進(jìn)行，人類社會(huì)生活因此

2、也發(fā)生了翻天覆地的變化。 根據(jù)中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心（China Internet Network Information Center，CNNIC）發(fā)布的第十八次中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告顯示，截止到2006年6月30日，我國(guó)網(wǎng)民人數(shù)已達(dá)到1.23億，比同期增長(zhǎng)0.12億。,1.1.2 WWW（萬維網(wǎng)）,WWW即World Wide Web的簡(jiǎn)稱，也稱萬維網(wǎng)，它是由分布在互聯(lián)網(wǎng)上的成千上萬個(gè)網(wǎng)頁組成的網(wǎng)絡(luò)信息系統(tǒng)。它為用戶提供各種各樣的信息和網(wǎng)絡(luò)服務(wù)，是互聯(lián)網(wǎng)中有著重大意義的產(chǎn)品。它的出現(xiàn)是互聯(lián)網(wǎng)發(fā)展過程中的一個(gè)里程碑。據(jù)英國(guó)Netcraft公司的統(tǒng)計(jì)，截止2006年11月，全球互聯(lián)網(wǎng)網(wǎng)站數(shù)

3、量已達(dá)到100435253，超過了一個(gè)億。平均增長(zhǎng)速度幾乎是每?jī)赡攴环?1.1.3 什么是網(wǎng)頁,WWW服務(wù)是通過網(wǎng)頁形式的鏈接向用戶提供信息。網(wǎng)頁又通過超鏈接連接到其他資源。網(wǎng)頁中包含文本、圖像、聲音和視頻等多種形式的資源，因此也叫超媒體。用戶可以通過瀏覽器把信息顯示出來。 所以，網(wǎng)頁是通過許多規(guī)則把超媒體組織在一起的超文本文件，瀏覽器按照網(wǎng)頁中的規(guī)則解釋出來，然后把各種超文本元素顯示在頁面上。HTML語言是其中一種規(guī)則集，接下來講解什么是HTML。,1.2 HTML驚鴻一瞥,超文本標(biāo)記語言（Hyper Text Markup Language，HTML）是一種程序語言，它定義了一系列規(guī)則

4、告訴瀏覽器如何顯示HTML的元素。含有HTML元素集合的文件，也就是網(wǎng)頁。,1.2.1 創(chuàng)建HTML網(wǎng)頁,創(chuàng)建HTML網(wǎng)頁是一件很容易的事。把HTML標(biāo)簽寫在記事本里，然后保存擴(kuò)展名為.html或.htm文件。,【另存為】對(duì)話框 網(wǎng)頁效果,1.2.2 HTML結(jié)構(gòu),通過上面的實(shí)例，讀者會(huì)發(fā)現(xiàn)編寫一個(gè)HTML網(wǎng)頁如此簡(jiǎn)單。 但是網(wǎng)頁中的源碼告訴瀏覽器如何進(jìn)行顯示，HTML結(jié)構(gòu)又是怎樣的呢？ 一般HTML網(wǎng)頁是以標(biāo)簽開始，以結(jié)束。之間是網(wǎng)頁頭部，用來描述網(wǎng)頁的相關(guān)內(nèi)容，如網(wǎng)頁標(biāo)題、網(wǎng)頁語言和網(wǎng)頁內(nèi)容簡(jiǎn)述等。,1.3 認(rèn)識(shí)Dreamweaver,Dreamweaver是Adobe公司開發(fā)的一款可視化

5、網(wǎng)頁設(shè)計(jì)和網(wǎng)站管理軟件?？梢暬庉嫻δ芸梢钥焖僦谱鞒鼍实木W(wǎng)頁，而不需要編寫任何代碼。而且，它能與其他圖形編輯軟件緊密結(jié)合，協(xié)同處理編輯圖片，使用起來非常方便。同時(shí)，它還支持代碼編輯環(huán)境，如顏色代碼、自動(dòng)補(bǔ)全和代碼折疊等，更方便地進(jìn)行代碼編寫，支持最新的CSS可視化布局。,1.3.1 常用功能,經(jīng)過Adobe公司不斷地更新，目前最新的Dreamweaver是CS3版。下面介紹一下它的常用功能。,代碼折疊 新CSS面板,1.3.1 常用功能,代碼提示。在編輯代碼時(shí)，出現(xiàn)代碼提示，用戶可以選擇需要的代碼。這方便了代碼的輸入、提高了代碼編輯的速度和網(wǎng)頁開發(fā)的效率。 Spry工具。通過Dreamwea

6、ver CS3提供的Spry工具，可以快速創(chuàng)建符合Ajax（Asynchronous JavaScript + XML）的網(wǎng)頁，極大地提高了設(shè)計(jì)效率。,代碼提示 Spry工具欄,1.3.2 操作界面,Dreamweaver CS3有著強(qiáng)大的功能，它的操作界面集成了各功能的操作元素，功能面板浮動(dòng)于應(yīng)用程序的窗口內(nèi)，可以非常方便進(jìn)行網(wǎng)頁或網(wǎng)站編輯。它的簡(jiǎn)潔性和靈活性極大地提高了工作效率。這也是選擇Dreamweaver CS3的重要原因。 在Windows操作系統(tǒng)下，Dreamweaver CS3的操作界面像其他標(biāo)準(zhǔn)界面一樣，包含有除了標(biāo)準(zhǔn)界面的元素，同時(shí)還有特有的操作界面元素，,1.3.2 操作

7、界面,操作界面,1.3.2 操作界面,Dreamweaver CS3的操作界面是由標(biāo)題欄、菜單欄、工具欄、狀態(tài)欄、編輯欄，以及常用的浮動(dòng)面板組等組成，這些界面排放合理，為用戶提供了極大的方便。接下來詳細(xì)地對(duì)各種常用面板進(jìn)行介紹，具體如下。 1標(biāo)題欄2菜單欄3插入欄4文檔窗口 5狀態(tài)欄 6【屬性】面板7【時(shí)間軸】面板 8CSS面板 9【文件】面板10【標(biāo)簽】面板 11【應(yīng)用程序】面板,1.4 創(chuàng)建站點(diǎn)與頁面,Dreamweaver CS3除了具有強(qiáng)大靈活的頁面編輯功能，還具有先進(jìn)而簡(jiǎn)捷的站點(diǎn)管理功能。網(wǎng)頁是網(wǎng)站的組成部分，很少會(huì)單獨(dú)存在，幾乎所有的網(wǎng)頁設(shè)計(jì)都是在網(wǎng)站的范圍內(nèi)進(jìn)行的。,1.4.1

8、創(chuàng)建站點(diǎn),Dreamweaver CS3擁有優(yōu)秀的站點(diǎn)管理功能。此功能使網(wǎng)頁設(shè)計(jì)工作更輕松合理。用戶可以更合理地規(guī)劃網(wǎng)頁設(shè)計(jì)素材，并把網(wǎng)站的各個(gè)網(wǎng)頁有條理地組織起來，融合成一個(gè)整體。創(chuàng)建站點(diǎn)的具體步驟如下：,1.4.1 創(chuàng)建站點(diǎn),單擊【站點(diǎn)】|【新建站點(diǎn)】命令，彈出【編輯文件】對(duì)話框 。單擊【下一步】按鈕，彈出【編輯文件，第2部分】 。,【編輯文件】對(duì)話框 【編輯文件，第2部分】對(duì)話框,1.4.1 創(chuàng)建站點(diǎn),選擇【否，我不想使用服務(wù)器技術(shù)】單選按鈕，然后單擊【下一步】按鈕，彈出【編輯文件，第3部分】對(duì)話框。在【您如何連接到遠(yuǎn)程服務(wù)器】下拉列表框中，選擇【無】選項(xiàng)，然后單擊【下一步】按鈕，彈出【總結(jié)】對(duì)話框，,【編輯文件，第3部分】對(duì)話框 【總結(jié)】對(duì)話框,1.4.2 創(chuàng)建頁面,在Dreamweaver CS3中創(chuàng)建頁面同其他應(yīng)用程序一樣簡(jiǎn)單，并且還提供了更多更方便的方式。主要有兩種方式：一種是在菜單命令中創(chuàng)建，另一種是在Dreamweaver開啟時(shí)出現(xiàn)在應(yīng)用程序中的對(duì)話框中創(chuàng)建，其實(shí)兩種方式都是一樣的，第二種方式在開啟應(yīng)用程序時(shí)更快捷。,啟動(dòng)對(duì)話框,1.4.2 創(chuàng)建頁面,新創(chuàng)建的文檔有多種類型，包含空白內(nèi)容文檔、空白模板文檔和基于范例文檔。在創(chuàng)建時(shí)根據(jù)需要進(jìn)行選擇。下面依次介紹各種文檔的創(chuàng)建方法。創(chuàng)建空白內(nèi)容文檔的具體步驟如下：,【新