[學(xué)習(xí)]網(wǎng)頁設(shè)計與制作教程

1、網(wǎng)頁設(shè)計與制作教程,第一章,WWW概述,§1.1Internet概述,一、什么是Internet Internet原意是互聯(lián)網(wǎng)，又稱因特網(wǎng)、國際互聯(lián)網(wǎng)，它不是一個單一的網(wǎng)絡(luò)，它是一個巨大的、全球范圍的計算機(jī)網(wǎng)絡(luò)，它是借助于現(xiàn)代通信和計算機(jī)技術(shù)實(shí)現(xiàn)全球信息傳遞的一種快捷、有效、方便的工具。,1、Internet的現(xiàn)狀,Internet的前身是美國國防部高級研究規(guī)劃局的ARPA網(wǎng)，成立于1969年12月，從八

2、十年代開始發(fā)展，經(jīng)過20年的發(fā)展，已取得了巨大的成功，現(xiàn)在已成為世界上規(guī)模最大、用戶最多、資源最豐富的網(wǎng)絡(luò)互聯(lián)系統(tǒng)。迄今全球Internet網(wǎng)民已達(dá)3億多,據(jù)估計到2005年網(wǎng)民將達(dá)10億?；贗nternet的電子商務(wù)交易額也將從97年的80億美元增到2003年的10000億美元。,2、信息高速公路與下一代Internet,信息高速公路以高速度、大容量和高精度的聲音、數(shù)據(jù)、文字、圖形和影像等的交互式多媒體信息服務(wù)，來最大幅度和最快速度

3、地改變著人類的生活面貌和社會景觀。實(shí)質(zhì)是一個多媒體信息交互高速通信的廣域網(wǎng)，它可以實(shí)現(xiàn)實(shí)時電視點(diǎn)播等的多媒體的通信服務(wù)。借助于光纖和光電技術(shù)，傳輸速率能達(dá)到Gbps數(shù)量級，并且將會達(dá)到Tbps(10¹² b/s),它與Internet并不是等同的。下一代Internet（NGI，Ipng) IPv4,IPv6,二、Internet與TCP/IP協(xié)議,TCP/IP：傳輸控制協(xié)議/網(wǎng)際協(xié)議，是互聯(lián)網(wǎng)絡(luò)信息交

4、換的規(guī)則、規(guī)范的集合體，包含了100多種協(xié)議。TCP的主要功能：對網(wǎng)絡(luò)中計算機(jī)和通信設(shè)備的管理，規(guī)定了信息包應(yīng)該怎樣分層、分組，又怎樣在收到信息包以后充組數(shù)據(jù)，以何種方式在線路上傳輸信號。IP ：定義了Internet上計算機(jī)之間的路由選擇，向傳輸層提供統(tǒng)一的報文。如：電子郵件傳輸、文件傳輸、新聞網(wǎng)絡(luò)的新聞發(fā)布、訪問全球網(wǎng)。IP地址：是網(wǎng)上的通信地址，是計算機(jī)、服務(wù)、路由器的端口地址，每一個IP地址在全球是唯一的，是運(yùn)行TCP/

5、IP協(xié)議的唯一標(biāo)識。,三、 Internet網(wǎng)絡(luò)地址,1、DNS系統(tǒng)IP地址的格式：主機(jī)名?域名IP在Internet中的地址是有一組以圓點(diǎn)為分隔符的四部分?jǐn)?shù)值所組成，每一部分有八位二進(jìn)制組成，十進(jìn)制格式中每一部分取值是0~255。如：210.44.195.10DNS：是由域名而由機(jī)器轉(zhuǎn)換為Internet中的IP地址的系統(tǒng)，在網(wǎng)絡(luò)中稱之為域名服務(wù)系統(tǒng)。域名的格式為：主機(jī)名.機(jī)構(gòu)名.網(wǎng)絡(luò)名.最高層域名。如：WWW.TANC.ED

6、U.CN，最高層域名一般是國家代號，如CN（中國）UK（英國）JP（日本）。常見的最高域名有,四、連接Internet的方式,1、撥號連接2、ISDN接入（一線通）傳輸速率：64Kbps或128Kbps3、企業(yè)級用戶的接入技術(shù)4、其他的用戶級接入技術(shù)Cable Modem、WebTV、ADSL(1,8M)、手機(jī)上網(wǎng)、Lan(100,100M),§1.2 Web服務(wù)器,一、Web/Server概述1、WWW

7、的基本結(jié)構(gòu),瀏覽器,,,WWW服務(wù)器,GGI,,中間件,,數(shù)據(jù)庫服務(wù)器,HTTP,LAN/WAN,SQL,HTML,,WWW服務(wù)器,2、HTTP,超文本傳輸協(xié)議3、Web Server的性能由流量、響應(yīng)時間來衡量4、影響Web Server的因素硬件方面：CPU、內(nèi)存、硬盤軟件方面：HTTP服務(wù)進(jìn)程、TCP/IP實(shí)現(xiàn)、文件系統(tǒng)、數(shù)據(jù)庫、GGI程序。,二、Windows Web服務(wù)器的建立,參見教材P10—P15,網(wǎng) 頁 設(shè)

8、計,,一、基礎(chǔ)知識,（一）基本概念1、網(wǎng)頁 網(wǎng)頁就是在瀏覽器上看到的一頁信息，類似于書中的一頁，也稱為Web頁。2、網(wǎng)站 將大量的網(wǎng)頁放置在服務(wù)器上供人瀏覽，就構(gòu)成了一個網(wǎng)站。3、主頁 每個網(wǎng)站都有一個最基本的網(wǎng)頁，叫主頁。,,（二）網(wǎng)頁制作軟件1、網(wǎng)頁設(shè)計軟件a、Dreamweaver Dreamweaver是目前設(shè)計網(wǎng)頁最好的

9、軟件，它能生成高效簡潔的HTML源代碼，支持動態(tài)網(wǎng)頁技術(shù)，也可插入JavaScript程序。b、Frontpage Frontpage只能制作一些簡單的、質(zhì)量不高的網(wǎng)頁。,,2、圖象處理軟件a、專門網(wǎng)頁圖象處理軟件 Photodraw Fireworksb、其它圖象處理軟件 Photoshop Coreldreaw FreeHand3、動畫制作軟件

10、 Flash,,（三）Internet概述1、Internet的概念2、 Internet的起源3、IP地址和域名 連接在Internet上的電腦，都叫做主機(jī)，每臺主機(jī)都有一個唯一的號碼，這便是IP地址。 IP地址有四組數(shù)構(gòu)成，每組8位，共32位（二進(jìn)制），每組范圍0—255，在IP地址的4組數(shù)字中，包含了兩部分信息：網(wǎng)絡(luò)代號和主機(jī)代號。在Internet上共有A、B、C、三類網(wǎng)絡(luò)類型。,,

11、用w.x.y.z表示一個IP地址IP地址分類,域名域名是用英文來表示IP地址。域名的一般格式為：主機(jī)名.機(jī)構(gòu)名.類別名.地區(qū)名,Dreamweaver 4,,一、Dreamweaver 簡介,1、Dreamweaver是Macromedia公司的出品的一款"所見即所得"的網(wǎng)頁編輯工具。與 Frontpage不同，Deamweaver采用的是Mac機(jī)浮動面版的設(shè)計風(fēng)格，對于初學(xué)者來說可能會感到不適應(yīng)。但當(dāng)你習(xí)慣

12、了其操作方式后，就會發(fā)現(xiàn)Dreamweaver的直觀性與高效性是Frontpage所無法比擬的。,一、Dreamweaver 簡介,2、Dreamweaver對于DHTML（動態(tài)網(wǎng)頁）的支持特別好，可以輕而易舉地做出很多眩目的互動頁面特效。插件式的程序設(shè)計使得其功能可以無限的擴(kuò)展。Dreamweaver與Flash、Firework 并稱為 Macromedia的網(wǎng)頁制作三劍客，由于是同一公司的產(chǎn)品，因而在功能上有著一個非常緊密的結(jié)合。

13、因此，說Dreamweaver是高級網(wǎng)頁制作的首選并不為過。,一、Dreamweaver 簡介,3、　Dreamweaver最新的版本為:Dreamweaver 4.0和Dreamweaver UltraDev4.0。后者支持ASP、JSP等程序的編寫與調(diào)試。對于初學(xué)者來講，這兩個版本的Dreamweaver在使用上不會有太大的差別。而本書則以最新的Dreamweaver4.0為基準(zhǔn)。,二、初步認(rèn)識 Dreamweaver,1、　Dre

14、amweaver的啟動　　Dreamweaver的安裝過程非常簡單，一但成功安裝后，就可以在開始菜單找到Dreamweaver的選項(xiàng)：,二、初步認(rèn)識 Dreamweaver,2、編輯窗口　　第一次啟動Dreamweaver，首先看到的是Dreamweaver的編輯窗口：,主菜單：在這里可以找到編輯窗口的的絕大部分功能,工具欄：是Dreamweaver4的新增功能,對象面板（Objects）：在網(wǎng)頁編輯的過程中，通過單擊對象面板的按鈕

15、來為網(wǎng)頁添加相應(yīng)的元素，如圖片、表格、層、Flash。我們稱這些元素為為對象。單擊對象面板上的向下箭頭，能插入其他類型的對象，如特殊字符（Characters）、表單Froms）等。,屬性面板：用于顯示所選中的網(wǎng)頁元素的屬性，并可在屬性面板上修改。選擇不同的網(wǎng)頁元素，屬性面板所顯示的內(nèi)容也有所不同，例如圖片和表格所顯示的屬性是不一樣的。此外，點(diǎn)擊屬性面板右下角的小三角可以根據(jù)使用的需要，縮小或展開屬性面板，建議一般情況下都設(shè)置為展開模式

16、。,面板組（又稱可?？扛用姘澹篋reamweaver 還有很多很多其他的浮動面板，我們可以根據(jù)自己的喜好，將不同的浮動面板重新組合，這就是所謂的面板組。在Photoshop中，也有類似的概念。,:快速啟動欄（又稱啟動面板）：用于顯示或隱藏響應(yīng)的浮動面板。啟動面板與右下角的微型啟動欄 一一對應(yīng)；其中 是切換到站點(diǎn)管理器， 是切換到行為面板， 是查看網(wǎng)頁源代碼,編輯區(qū)域：以“所見即所得”的方式顯示被編輯網(wǎng)頁內(nèi)容,二、初步認(rèn)識

17、Dreamweaver,3、【提示1】如果屏幕上的浮動面板位置過于凌亂，甚至超出了桌面范圍而不便操作的時候（在改變了顯示器的分辨率后尤其容易出現(xiàn)這種情況），可以選取主菜單中的“Window > Arrange Panels”自動重排浮動面板?！?【提示2】以下是幾個常用的浮動面板的快速打開和關(guān)閉的熱鍵，好好記住，因?yàn)閷僦谱鬟^程中被頻繁地使用：　　Properties屬性面板：Crtl+F3　　CSS Styl

18、es樣式面板：Shift+F11　　Behaviors行為面板：Shift+F3　　Objects對象面板：Crtl+F2,二、初步認(rèn)識 Dreamweaver,4、站點(diǎn)窗口　　　　站點(diǎn)窗口是Dreamweaver另一個重要的窗口，左半部是遠(yuǎn)程站點(diǎn)的目錄，一般顯示為空，只有在 FTP 連通狀態(tài)下才有顯示內(nèi)容；右半部是當(dāng)前編輯中的本地目錄，站點(diǎn)窗口的作用其實(shí)就是直觀而方便地讓你讓像管理硬盤里的文件一樣管理的你的站點(diǎn),三、制作前的準(zhǔn)備

19、工作——定義網(wǎng)站,在正式開始制作網(wǎng)頁之前，最好先定義一個新網(wǎng)站，這是為了更好地利用站點(diǎn)窗口對站點(diǎn)文件進(jìn)行管理。　　定義的方法　　方法一：在站點(diǎn)窗口的下拉菜單選擇最后一項(xiàng)Define Sites，如下圖。,三、制作前的準(zhǔn)備工作——定義網(wǎng)站,此時會彈出一個新的對話框，點(diǎn)擊New按鈕是定義一個新網(wǎng)站，如果日后需要對舊有網(wǎng)站重新定義，可以在左邊的網(wǎng)站列表中選中你需要重新定義的網(wǎng)站，然后點(diǎn)擊 Edit 按鈕便可。,三、制作前的準(zhǔn)備工作——定義網(wǎng)

20、站,方法二：選擇命令菜單 Site > New Site 選項(xiàng)。　　基本設(shè)置　　在接著看到的對話框中，要進(jìn)行以下三步簡單的設(shè)置：　?、?Site Name（網(wǎng)站名稱）：為你的網(wǎng)站起一個名字，這個名字只起著識別的作用，與網(wǎng)站發(fā)布后真實(shí)的名字無關(guān)，例如這里的名字是：“我的網(wǎng)站”，而實(shí)際上我的網(wǎng)站叫“上網(wǎng)指南”；　?、?Local Root（本地根目錄）：設(shè)置網(wǎng)站在本地硬盤的位置，點(diǎn)擊后面的文件夾圖標(biāo)可以選擇硬盤的任意目錄作為存