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

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

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

3、地改變著人類的生活面貌和社會(huì)景觀。實(shí)質(zhì)是一個(gè)多媒體信息交互高速通信的廣域網(wǎng)，它可以實(shí)現(xiàn)實(shí)時(shí)電視點(diǎn)播等的多媒體的通信服務(wù)。借助于光纖和光電技術(shù)，傳輸速率能達(dá)到Gbps數(shù)量級(jí)，并且將會(huì)達(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的主要功能：對(duì)網(wǎng)絡(luò)中計(jì)算機(jī)和通信設(shè)備的管理，規(guī)定了信息包應(yīng)該怎樣分層、分組，又怎樣在收到信息包以后充組數(shù)據(jù)，以何種方式在線路上傳輸信號(hào)。IP ：定義了Internet上計(jì)算機(jī)之間的路由選擇，向傳輸層提供統(tǒng)一的報(bào)文。如：電子郵件傳輸、文件傳輸、新聞網(wǎng)絡(luò)的新聞發(fā)布、訪問(wèn)全球網(wǎng)。IP地址：是網(wǎng)上的通信地址，是計(jì)算機(jī)、服務(wù)、路由器的端口地址，每一個(gè)IP地址在全球是唯一的，是運(yùn)行TCP/

5、IP協(xié)議的唯一標(biāo)識(shí)。,三、 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，最高層域名一般是國(guó)家代號(hào)，如CN（中國(guó)）UK（英國(guó)）JP（日本）。常見的最高域名有,四、連接Internet的方式,1、撥號(hào)連接2、ISDN接入（一線通）傳輸速率：64Kbps或128Kbps3、企業(yè)級(jí)用戶的接入技術(shù)4、其他的用戶級(jí)接入技術(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ù)庫(kù)服務(wù)器,HTTP,LAN/WAN,SQL,HTML,,WWW服務(wù)器,2、HTTP,超文本傳輸協(xié)議3、Web Server的性能由流量、響應(yīng)時(shí)間來(lái)衡量4、影響Web Server的因素硬件方面：CPU、內(nèi)存、硬盤軟件方面：HTTP服務(wù)進(jìn)程、TCP/IP實(shí)現(xiàn)、文件系統(tǒng)、數(shù)據(jù)庫(kù)、GGI程序。,二、Windows Web服務(wù)器的建立,參見教材P10—P15,網(wǎng) 頁(yè) 設(shè)

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

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

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

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

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

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

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

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

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

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

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

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

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