【培訓(xùn)課件】網(wǎng)頁(yè)設(shè)計(jì)與制作教程(共32張)(PPT 32頁(yè))

1、網(wǎng)頁(yè)設(shè)計(jì)與制作教程第1頁(yè)，共32頁(yè)。第一章第2頁(yè)，共32頁(yè)。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)全球信息傳遞的一種快捷、有效、方便的工具。第3頁(yè)，共32頁(yè)。 1、Internet的現(xiàn)狀 Internet的前身是美國(guó)國(guó)防部高級(jí)研究規(guī)劃局的ARPA網(wǎng)，成立于1969年12月，從八十年代開(kāi)始發(fā)展，經(jīng)過(guò)20年的發(fā)展，已取得了巨大的成功，現(xiàn)在已成為世界上規(guī)模最大、用戶最多、資源最豐富的網(wǎng)絡(luò)互聯(lián)系統(tǒng)。迄今全球Internet網(wǎng)民已達(dá)3億多,據(jù)

2、估計(jì)到2005年網(wǎng)民將達(dá)10億?；贗nternet的電子商務(wù)交易額也將從97年的80億美元增到2003年的10000億美元。第4頁(yè)，共32頁(yè)。2、信息高速公路與下一代Internet信息高速公路以高速度、大容量和高精度的聲音、數(shù)據(jù)、文字、圖形和影像等的交互式多媒體信息服務(wù)，來(lái)最大幅度和最快速度地改變著人類的生活面貌和社會(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,IPv

3、6第5頁(yè)，共32頁(yè)。二、Internet與TCP/IP協(xié)議TCP/IP：傳輸控制協(xié)議/網(wǎng)際協(xié)議，是互聯(lián)網(wǎng)絡(luò)信息交換的規(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/IP協(xié)議的唯一標(biāo)識(shí)。第6頁(yè)，共32頁(yè)。 三、 Inter

4、net網(wǎng)絡(luò)地址商業(yè)軍事教育網(wǎng)絡(luò)機(jī)構(gòu)政府機(jī)構(gòu)非贏利組織commiledunetgovorg第7頁(yè)，共32頁(yè)。四、連接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)第8頁(yè)，共32頁(yè)。1.2 Web服務(wù)器瀏覽器GGI中間件數(shù)據(jù)庫(kù)服務(wù)器HTTPLAN/WANSQLHTML第9頁(yè)，共32頁(yè)。2、HTTP超文本傳輸協(xié)議3、Web Server的性能由流量、響應(yīng)時(shí)間來(lái)衡量4、影響Web Server的因素硬件方面：C

5、PU、內(nèi)存、硬盤軟件方面：HTTP服務(wù)進(jìn)程、TCP/IP實(shí)現(xiàn)、文件系統(tǒng)、數(shù)據(jù)庫(kù)、GGI程序。第10頁(yè)，共32頁(yè)。二、Windows Web服務(wù)器的建立參見(jiàn)教材P10P15第11頁(yè)，共32頁(yè)。網(wǎng) 頁(yè) 設(shè) 計(jì)第12頁(yè)，共32頁(yè)。一、基礎(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è)。第13頁(yè)，共32頁(yè)。（二）網(wǎng)頁(yè)制作軟件1、網(wǎng)頁(yè)設(shè)計(jì)軟件a、Dreamweaver Dreamweaver是目前設(shè)計(jì)網(wǎng)頁(yè)最好的軟件，它能生成高效簡(jiǎn)潔的HTML源代

6、碼，支持動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)，也可插入JavaScript程序。b、Frontpage Frontpage只能制作一些簡(jiǎn)單的、質(zhì)量不高的網(wǎng)頁(yè)。第14頁(yè)，共32頁(yè)。2、圖象處理軟件a、專門網(wǎng)頁(yè)圖象處理軟件 Photodraw Fireworksb、其它圖象處理軟件 Photoshop Coreldreaw FreeHand3、動(dòng)畫制作軟件 Flash第15頁(yè)，共32頁(yè)。（三）Internet概述1、Internet的概念2、 Internet的起源3、IP地址和域名 連接在Internet上的電腦，都叫做主機(jī)，每臺(tái)主機(jī)都有一個(gè)唯一的號(hào)碼，這便是IP地址。 IP地址有四組數(shù)構(gòu)成，每組8位，共32位（二進(jìn)制

7、），每組范圍0255，在IP地址的4組數(shù)字中，包含了兩部分信息：網(wǎng)絡(luò)代號(hào)和主機(jī)代號(hào)。在Internet上共有A、B、C、三類網(wǎng)絡(luò)類型。第16頁(yè)，共32頁(yè)。用w.x.y.z表示一個(gè)IP地址IP地址分類類型W值網(wǎng)絡(luò)ID主機(jī)ID網(wǎng)絡(luò)總數(shù)一個(gè)網(wǎng)絡(luò)中主機(jī)總數(shù)A1-126wx.y.z12616777214B128-191w.xy,.z1638465534C192-223w.x.yz2097151254域名域名是用英文來(lái)表示IP地址。域名的一般格式為：主機(jī)名.機(jī)構(gòu)名.類別名.地區(qū)名第17頁(yè)，共32頁(yè)。Dreamweaver 4 第18頁(yè)，共32頁(yè)。一、Dreamweaver 簡(jiǎn)介1、Dreamweaver是

8、Macromedia公司的出品的一款所見(jiàn)即所得的網(wǎng)頁(yè)編輯工具。與 Frontpage不同，Deamweaver采用的是Mac機(jī)浮動(dòng)面版的設(shè)計(jì)風(fēng)格，對(duì)于初學(xué)者來(lái)說(shuō)可能會(huì)感到不適應(yīng)。但當(dāng)你習(xí)慣了其操作方式后，就會(huì)發(fā)現(xiàn)Dreamweaver的直觀性與高效性是Frontpage所無(wú)法比擬的。第19頁(yè)，共32頁(yè)。一、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è)制作三劍客，由于是同一公司

9、的產(chǎn)品，因而在功能上有著一個(gè)非常緊密的結(jié)合。因此，說(shuō)Dreamweaver是高級(jí)網(wǎng)頁(yè)制作的首選并不為過(guò)。第20頁(yè)，共32頁(yè)。一、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)。第21頁(yè)，共32頁(yè)。二、初步認(rèn)識(shí) Dreamweaver1、Dreamweaver的啟動(dòng)Dreamweaver的安裝過(guò)程非常簡(jiǎn)單，一但成功安裝后，就可以在

10、開(kāi)始菜單找到Dreamweaver的選項(xiàng)：第22頁(yè)，共32頁(yè)。二、初步認(rèn)識(shí) Dreamweaver2、編輯窗口第一次啟動(dòng)Dreamweaver，首先看到的是Dreamweaver的編輯窗口：主菜單：在這里可以找到編輯窗口的的絕大部分功能工具欄：是Dreamweaver4的新增功能對(duì)象面板（Objects）：在網(wǎng)頁(yè)編輯的過(guò)程中，通過(guò)單擊對(duì)象面板的按鈕來(lái)為網(wǎng)頁(yè)添加相應(yīng)的元素，如圖片、表格、層、Flash。我們稱這些元素為為對(duì)象。單擊對(duì)象面板上的向下箭頭，能插入其他類型的對(duì)象，如特殊字符（Characters）、表單Froms）等。屬性面板：用于顯示所選中的網(wǎng)頁(yè)元素的屬性，并可在屬性面板上修改。選擇

11、不同的網(wǎng)頁(yè)元素，屬性面板所顯示的內(nèi)容也有所不同，例如圖片和表格所顯示的屬性是不一樣的。此外，點(diǎn)擊屬性面板右下角的小三角可以根據(jù)使用的需要，縮小或展開(kāi)屬性面板，建議一般情況下都設(shè)置為展開(kāi)模式。面板組（又稱可?？扛?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ū)域：以“所見(jiàn)即所得”的方式顯示被編輯網(wǎng)頁(yè)內(nèi)容第2

12、3頁(yè)，共32頁(yè)。二、初步認(rèn)識(shí) Dreamweaver3、【提示1】如果屏幕上的浮動(dòng)面板位置過(guò)于凌亂，甚至超出了桌面范圍而不便操作的時(shí)候（在改變了顯示器的分辨率后尤其容易出現(xiàn)這種情況），可以選取主菜單中的“Window Arrange Panels”自動(dòng)重排浮動(dòng)面板。 【提示2】以下是幾個(gè)常用的浮動(dòng)面板的快速打開(kāi)和關(guān)閉的熱鍵，好好記住，因?yàn)閷?huì)再制作過(guò)程中被頻繁地使用：Properties屬性面板：Crtl+F3CSS Styles樣式面板：Shift+F11Behaviors行為面板：Shift+F3Objects對(duì)象面板：Crtl+F2 第24頁(yè)，共32頁(yè)。二、初步認(rèn)識(shí) Dreamweave

13、r4、站點(diǎn)窗口站點(diǎn)窗口是Dreamweaver另一個(gè)重要的窗口，左半部是遠(yuǎn)程站點(diǎn)的目錄，一般顯示為空，只有在 FTP 連通狀態(tài)下才有顯示內(nèi)容；右半部是當(dāng)前編輯中的本地目錄，站點(diǎn)窗口的作用其實(shí)就是直觀而方便地讓你讓像管理硬盤里的文件一樣管理的你的站點(diǎn)第25頁(yè)，共32頁(yè)。 在以后網(wǎng)頁(yè)制作的過(guò)程中，將會(huì)頻繁地在編輯窗口和站點(diǎn)窗口之間切換。第26頁(yè)，共32頁(yè)。三、制作前的準(zhǔn)備工作定義網(wǎng)站在正式開(kāi)始制作網(wǎng)頁(yè)之前，最好先定義一個(gè)新網(wǎng)站，這是為了更好地利用站點(diǎn)窗口對(duì)站點(diǎn)文件進(jìn)行管理。定義的方法方法一：在站點(diǎn)窗口的下拉菜單選擇最后一項(xiàng)Define Sites，如下圖。第27頁(yè)，共32頁(yè)。 三、制作前的準(zhǔn)備工作

14、定義網(wǎng)站 此時(shí)會(huì)彈出一個(gè)新的對(duì)話框，點(diǎn)擊New按鈕是定義一個(gè)新網(wǎng)站，如果日后需要對(duì)舊有網(wǎng)站重新定義，可以在左邊的網(wǎng)站列表中選中你需要重新定義的網(wǎng)站，然后點(diǎn)擊 Edit 按鈕便可。第28頁(yè)，共32頁(yè)。 三、制作前的準(zhǔn)備工作定義網(wǎng)站方法二：選擇命令菜單 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)可以選擇硬盤的任意目錄作為存放網(wǎng)站文件的目錄； Cache（緩存）：建立緩