第1章-網(wǎng)頁(yè)設(shè)計(jì)概述

1、深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院1網(wǎng)頁(yè)與網(wǎng)站基礎(chǔ)知識(shí)李俊杰 博士深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院2大綱網(wǎng)頁(yè)與網(wǎng)站的概念Dreamweaver CS5簡(jiǎn)述Dreamweaver CS5的工作界面和基本操作Dreamweaver站點(diǎn)的建立和規(guī)劃文件的基本操作制作第一個(gè)網(wǎng)站深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院3 1.1 網(wǎng)頁(yè)與網(wǎng)站的概念I(lǐng)nternet的概述WWW網(wǎng)頁(yè)與網(wǎng)站域名與IP地址深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院41.1.1 Internet的概述 InternetInternet是由成千上萬個(gè)網(wǎng)絡(luò)、上億臺(tái)計(jì)算機(jī)是由成千上萬個(gè)網(wǎng)絡(luò)、上億臺(tái)計(jì)算機(jī)通過特定的網(wǎng)絡(luò)協(xié)議相互連接而成的全球計(jì)算機(jī)網(wǎng)通過特定

2、的網(wǎng)絡(luò)協(xié)議相互連接而成的全球計(jì)算機(jī)網(wǎng)絡(luò)，是提供信息資源查詢和信息資源共享的全球最絡(luò)，是提供信息資源查詢和信息資源共享的全球最大的信息資源平臺(tái)。大的信息資源平臺(tái)。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院5 InternetInternet所提供的服務(wù)主要是所提供的服務(wù)主要是WWWWWW、E-mailE-mail、FTPFTP、網(wǎng)上傳呼、在線聊天、網(wǎng)上購(gòu)物、旅行預(yù)訂等、網(wǎng)上傳呼、在線聊天、網(wǎng)上購(gòu)物、旅行預(yù)訂等等，而其中等，而其中WWWWWW和和E-mailE-mail是最常用的服務(wù)。是最常用的服務(wù)。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院6從國(guó)內(nèi)從國(guó)內(nèi)InternetInternet的發(fā)展現(xiàn)狀來看，的發(fā)展現(xiàn)狀來看，19941

3、994年年4 4月，月，中科院計(jì)算機(jī)網(wǎng)絡(luò)信息中心正式接入中科院計(jì)算機(jī)網(wǎng)絡(luò)信息中心正式接入InternetInternet，在，在1010多年的時(shí)間里，中國(guó)多年的時(shí)間里，中國(guó)InternetInternet發(fā)生了飛速的發(fā)展，發(fā)生了飛速的發(fā)展，截至截至20112011年年0707月月2020日，我國(guó)網(wǎng)民人數(shù)達(dá)到了日，我國(guó)網(wǎng)民人數(shù)達(dá)到了4.854.85億。億。 據(jù)新華社電據(jù)新華社電, ,國(guó)家互聯(lián)網(wǎng)信息辦公室日前披露國(guó)家互聯(lián)網(wǎng)信息辦公室日前披露的數(shù)據(jù)表明，的數(shù)據(jù)表明，20122012年，中國(guó)將正式邁入年，中國(guó)將正式邁入“5 5億網(wǎng)民億網(wǎng)民”時(shí)代。時(shí)代。 深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院7Internet的概

4、述http:/ 計(jì)算機(jī)與軟件學(xué)院8據(jù)國(guó)家互聯(lián)網(wǎng)信息辦公室統(tǒng)計(jì)數(shù)據(jù)，中國(guó)手機(jī)據(jù)國(guó)家互聯(lián)網(wǎng)信息辦公室統(tǒng)計(jì)數(shù)據(jù)，中國(guó)手機(jī)上網(wǎng)用戶約上網(wǎng)用戶約3.53.5億人，微博注冊(cè)用戶已超億人，微博注冊(cè)用戶已超3 3億人。而億人。而行業(yè)機(jī)構(gòu)易觀國(guó)際的分析報(bào)告則指出，去年中國(guó)移行業(yè)機(jī)構(gòu)易觀國(guó)際的分析報(bào)告則指出，去年中國(guó)移動(dòng)互聯(lián)網(wǎng)用戶規(guī)模已達(dá)動(dòng)互聯(lián)網(wǎng)用戶規(guī)模已達(dá)4.34.3億，環(huán)比增長(zhǎng)近億，環(huán)比增長(zhǎng)近50%50%；今；今年，移動(dòng)互聯(lián)網(wǎng)用戶數(shù)將有可能突破年，移動(dòng)互聯(lián)網(wǎng)用戶數(shù)將有可能突破6 6億，超過互聯(lián)億，超過互聯(lián)網(wǎng)用戶數(shù)量網(wǎng)用戶數(shù)量; ;網(wǎng)購(gòu)用戶近網(wǎng)購(gòu)用戶近2 2億億 。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院91.1.2WWWW

5、WW(World Wide Web)WWW(World Wide Web)簡(jiǎn)稱為簡(jiǎn)稱為WebWeb或萬維網(wǎng)，客戶端只要或萬維網(wǎng)，客戶端只要通過通過“瀏覽器瀏覽器”（BrowserBrowser）就可以非常方便地訪問）就可以非常方便地訪問InternetInternet上的服務(wù)器端，迅速地獲得所需的信息。如圖上的服務(wù)器端，迅速地獲得所需的信息。如圖所示。所示。 Internet瀏覽器瀏覽器WEB服務(wù)器服務(wù)器HTTP網(wǎng)絡(luò)協(xié)議網(wǎng)絡(luò)協(xié)議深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院10深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院11 用戶通過瀏覽器訪問用戶通過瀏覽器訪問WEBWEB服務(wù)器的網(wǎng)頁(yè)，那么如何查找這些服務(wù)器的網(wǎng)頁(yè)，那么如何查找這

6、些網(wǎng)頁(yè)呢？通過在瀏覽器的地址欄中輸入網(wǎng)址，即網(wǎng)頁(yè)呢？通過在瀏覽器的地址欄中輸入網(wǎng)址，即URLURL，統(tǒng)一，統(tǒng)一資源定位器資源定位器。 URLURL的一般格式如下：的一般格式如下： 通信協(xié)議通信協(xié)議：/主機(jī)域名主機(jī)域名/ /路徑路徑/ /文件名文件名 其中，其中，通信協(xié)議通信協(xié)議指提供該文件的服務(wù)器所使用的通指提供該文件的服務(wù)器所使用的通信協(xié)議；信協(xié)議；主機(jī)域名主機(jī)域名指上述服務(wù)器所在主機(jī)的域名；指上述服務(wù)器所在主機(jī)的域名；路路徑徑指該文件在主機(jī)上的路徑；指該文件在主機(jī)上的路徑；文件名文件名指文件的名稱。指文件的名稱。 例如例如http:/ 其中，其中，httphttp是是WWWWWW服務(wù)器與服

7、務(wù)器與WWWWWW客戶之間遵循的通信協(xié)議?？蛻糁g遵循的通信協(xié)議。用來標(biāo)識(shí)該文件存儲(chǔ)在山西大學(xué)的用來標(biāo)識(shí)該文件存儲(chǔ)在山西大學(xué)的WWWWWW服務(wù)服務(wù)器上，第二部分是文件所在的路徑，最后一部分器上，第二部分是文件所在的路徑，最后一部分sxuc1.htmsxuc1.htm這個(gè)文件的名稱。這個(gè)文件的名稱。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院12深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院13伯納斯-李于1989年在歐洲粒子物理研究所提出了建立一個(gè)全球超文本項(xiàng)目萬維網(wǎng)，以此使人們都能順利地從網(wǎng)上獲取并共享信息。 深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院141.1.3 網(wǎng)頁(yè)與網(wǎng)站n構(gòu)建WWW的基本單位是網(wǎng)頁(yè)。網(wǎng)頁(yè)中包含所謂的“超鏈接”，通過已經(jīng)定

8、義好的關(guān)鍵字和圖形，只要用鼠標(biāo)輕輕一點(diǎn)，就可以自動(dòng)跳轉(zhuǎn)到相應(yīng)的其它文件，獲得相應(yīng)的信息，從而實(shí)現(xiàn)網(wǎng)頁(yè)之間的鏈接，從而構(gòu)成了WWW的縱橫交織的網(wǎng)狀結(jié)構(gòu)。n通過超鏈接連接起來的一系列邏輯上可以視為一個(gè)整體的頁(yè)面，則叫做網(wǎng)站。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院15深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院161.1.4 域名與IP地址在Internet上的每臺(tái)網(wǎng)絡(luò)設(shè)備都要有一個(gè)唯一的地址才能被訪問到，這個(gè)地址就是IP地址。IP地址是由32bits的二進(jìn)制數(shù)值構(gòu)成，分成4組，轉(zhuǎn)化為十進(jìn)制用點(diǎn)分隔。 比如：00深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院17IP地址知識(shí) 為了識(shí)別通信系統(tǒng)上的計(jì)算機(jī)，需要建立一種普通接受

9、的標(biāo)識(shí)方法。這就如同通過郵局寄信，信封上必須有收件人的地址，包括國(guó)家、城市、街道、門牌號(hào)以及郵政編碼。在Internet上定義了兩種方法來標(biāo)識(shí)網(wǎng)上的計(jì)算機(jī)，分別是Internet的IP地址和域名。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院18 Internet上的數(shù)據(jù)能夠發(fā)送到目的端的原因是：任何一個(gè)連接到Internet上的計(jì)算機(jī)都有一個(gè)惟一的網(wǎng)絡(luò)地址。為了確保Internet上的每一個(gè)網(wǎng)絡(luò)地址始終是惟一的，國(guó)際網(wǎng)絡(luò)信息中心組織（InterNIC）根據(jù)公司網(wǎng)絡(luò)的大小給他們分配了一系列IP地址（又稱為Internet地址）。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院19 IPv6簡(jiǎn)介 當(dāng)前在當(dāng)前在InternetIntern

10、et上使用的上使用的IPIP地址是在地址是在19781978年確年確定的協(xié)議，它由定的協(xié)議，它由4 4段段8 8位二進(jìn)制數(shù)構(gòu)成。由于位二進(jìn)制數(shù)構(gòu)成。由于InternetInternet協(xié)議的當(dāng)時(shí)版本號(hào)為協(xié)議的當(dāng)時(shí)版本號(hào)為4 4，因而稱為，因而稱為“IPv4IPv4”。IPv4IPv4的地址長(zhǎng)度是的地址長(zhǎng)度是3232位（位（bitbit），理論上可以支持多），理論上可以支持多達(dá)達(dá)16001600萬個(gè)網(wǎng)絡(luò)，容納四十多億臺(tái)主機(jī)萬個(gè)網(wǎng)絡(luò)，容納四十多億臺(tái)主機(jī)（2 23232=4,294,967,296=4,294,967,296），但由于），但由于IPIP對(duì)地址進(jìn)行了分對(duì)地址進(jìn)行了分類，分成類，分成A

11、A、B B、C C等類地址，實(shí)際可用的網(wǎng)絡(luò)數(shù)和主等類地址，實(shí)際可用的網(wǎng)絡(luò)數(shù)和主機(jī)數(shù)遠(yuǎn)小于上述數(shù)目機(jī)數(shù)遠(yuǎn)小于上述數(shù)目 。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院20IPv6的格式：的格式：地址長(zhǎng)度是地址長(zhǎng)度是128位（位（bit） ， 8段的段的16位十六進(jìn)制數(shù)表示，位十六進(jìn)制數(shù)表示， 中間用中間用“：”來隔開。來隔開。比如：比如：60A7:9BA5:FFF0:87B5:FFFF:FFF3:BAFF:88A260A7:9BA5:FFF0:87B5:FFFF:FFF3:BAFF:88A2山西大學(xué)商務(wù)學(xué)院的山西大學(xué)商務(wù)學(xué)院的IP地址是地址是30，表示，表示成成IPv6地址格式是怎樣的呢？

12、地址格式是怎樣的呢？0：0：0：0：0：0：30深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院21006530深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院22Internet的域名管理 DNS域名系統(tǒng)是一種幫助人們?cè)贗nternet上用字符來惟一識(shí)別自己的計(jì)算機(jī)，并保證主機(jī)名（域名）和IP地址一一對(duì)應(yīng)的網(wǎng)絡(luò)服務(wù)。DNS簡(jiǎn)介深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院23域名空間 Internet域名具有層次結(jié)構(gòu)。整個(gè)Internet網(wǎng)被劃分成幾個(gè)頂級(jí)域。InterNIC采

13、用兩種方法進(jìn)行分類：一種方法是按組織模式進(jìn)行劃分；另一種方法是按地理模式進(jìn)行劃分。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院24按組織模式進(jìn)行劃分頂級(jí)域名 域名類型com 商業(yè)機(jī)構(gòu)edu 教育機(jī)構(gòu)gov 政府內(nèi)容int 國(guó)際組織mil 軍事部門net 網(wǎng)絡(luò)支持中心org 各種非贏利性組織http:/ 計(jì)算機(jī)與軟件學(xué)院25國(guó)家代碼國(guó)家代碼 各個(gè)國(guó)家各個(gè)國(guó)家比如：比如：cncn代表中國(guó)代表中國(guó),us,us代表美國(guó)，代表美國(guó)， caca代表加拿大，代表加拿大，jpjp代表日本代表日本按地理模式進(jìn)行劃分按地理模式進(jìn)行劃分深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院26 為了適應(yīng)Internet的迅速發(fā)展，我國(guó)成立了“中國(guó)互聯(lián)網(wǎng)絡(luò)信息中

14、心”，并頒布了中國(guó)互聯(lián)網(wǎng)絡(luò)域名規(guī)定。 中國(guó)互聯(lián)網(wǎng)的域名規(guī)定深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院27我國(guó)我國(guó)二級(jí)域名分配二級(jí)域名分配（組織模式組織模式）二級(jí)域名二級(jí)域名 分配情況分配情況com 商業(yè)機(jī)構(gòu)商業(yè)機(jī)構(gòu)edu 教育機(jī)構(gòu)教育機(jī)構(gòu)gov 政府內(nèi)容政府內(nèi)容net 網(wǎng)絡(luò)支持中心網(wǎng)絡(luò)支持中心org 各種非贏利性組織各種非贏利性組織net 網(wǎng)絡(luò)支持中心網(wǎng)絡(luò)支持中心ac 科研機(jī)構(gòu)科研機(jī)構(gòu)深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院28我國(guó)我國(guó)二級(jí)域名分配二級(jí)域名分配（地理模式地理模式）二級(jí)域名二級(jí)域名 分配情況分配情況bj 北京北京sh 上海上海tj 天津天津jx 江西江西gd 廣東廣東sx 山西山西tw 臺(tái)灣臺(tái)灣.深圳大學(xué) 計(jì)

15、算機(jī)與軟件學(xué)院29大綱網(wǎng)頁(yè)與網(wǎng)站的概念Dreamweaver CS5簡(jiǎn)述Dreamweaver CS5的工作界面和基本操作Dreamweaver站點(diǎn)的建立和規(guī)劃文件的基本操作制作第一個(gè)網(wǎng)站深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院30Dreamweaver CS5概述概述Dreamweaver CS5是美國(guó)Adobe公司推出的集網(wǎng)頁(yè)制作和站點(diǎn)管理于一身的網(wǎng)頁(yè)制作軟件，也是第一個(gè)專門為網(wǎng)頁(yè)設(shè)計(jì)師量身定制的可視化網(wǎng)頁(yè)制作軟件，利用它可以制作出跨越平臺(tái)限制和瀏覽器限制的、充滿豐富動(dòng)感的網(wǎng)頁(yè)。以前，網(wǎng)頁(yè)設(shè)計(jì)者在制作網(wǎng)頁(yè)時(shí)必須熟練掌握HTML語言和JavaScript，但是現(xiàn)在設(shè)計(jì)者使用 Dreamweaver CS5

16、就可以輕松制作出精美的網(wǎng)頁(yè)，而且在制作過程中可以同步預(yù)覽制作效果，使得網(wǎng)頁(yè)設(shè)計(jì)過程簡(jiǎn)單明了。 Dreamweaver CS5在原來版本的功能基礎(chǔ)之上進(jìn)行了改進(jìn)和升級(jí)，功能更強(qiáng)大。它不僅可以制作出任何結(jié)構(gòu)復(fù)雜的靜態(tài)網(wǎng)頁(yè)，具有完美的操作界面、強(qiáng)大的模板功能、創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)、強(qiáng)大的代碼編輯功能，在Dreamweaver CS5中，CSS功能更加完整、站點(diǎn)管理更為簡(jiǎn)捷、高效。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院31大綱網(wǎng)頁(yè)與網(wǎng)站的概念Dreamweaver CS5簡(jiǎn)述Dreamweaver CS5的工作界面和基本操作Dreamweaver站點(diǎn)的建立和規(guī)劃文件的基本操作制作第一個(gè)網(wǎng)站深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院323

17、.1.1Dreamweaver CS5的啟動(dòng)單擊“開始”按鈕，選擇“程序”中的“Adobe Dreamweaver CS5”命令，就可以啟動(dòng)Dreamweaver CS5應(yīng)用程序。啟動(dòng)Dreamweaver CS5后首先看到的畫面是開始頁(yè)面，供用戶選擇新建文件的類型，或打開已有的文檔等，如圖所示。在此選擇“新建”下的“HTML”選項(xiàng)，便可進(jìn)入工作界面。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院333.1.1Dreamweaver CS5的啟動(dòng) Dreamweaver CS5根據(jù)不同的需求設(shè)置了不同風(fēng)格的工作界面有經(jīng)典、編碼器、編碼人員（高級(jí)）、設(shè)計(jì)器、設(shè)計(jì)人員（緊湊）和雙重屏幕幾種布局模式，其中默認(rèn)的是設(shè)計(jì)器

18、界面。如果在操作過程中想改變工作界面，可單擊菜單“窗口”“工作區(qū)布局”命令，從中選擇相應(yīng)的工作區(qū)即可，如圖所示。為便于與前面版本接軌，此處我們選擇“經(jīng)典”布局模式。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院343.1.2Dreamweaver CS5的工作界面深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院353.1.2Dreamweaver CS5的工作界面1.“插入”面板組 “插入”面板組包含用于創(chuàng)建和插入對(duì)象所用到的所有按鈕，它包括8個(gè)子面板，如圖所示。2. “文檔”工具欄 “文檔”工具欄中主要包含了一些對(duì)文檔進(jìn)行常用操作的功能按鈕，通過單擊這些按鈕可以在文檔的不同視圖間進(jìn)行快速切換。并且可以設(shè)置文檔的標(biāo)題，如圖所示。文檔窗

19、口有3種視圖顯示，分別是“代碼”、“拆分”和“設(shè)計(jì)”。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院363.1.2Dreamweaver CS5的工作界面3. 文檔窗口文檔窗口是設(shè)計(jì)網(wǎng)頁(yè)的主窗口，在該窗口中，用戶可以對(duì)各種網(wǎng)頁(yè)元素進(jìn)行編輯和排版。在文檔窗口中右擊，在彈出的快捷菜單中可以選擇相應(yīng)的命令進(jìn)行操作。4. 狀態(tài)欄狀態(tài)欄位于文檔窗口的底部，用于提供與用戶當(dāng)前編輯的文檔有關(guān)的信息，如當(dāng)前窗口大小、文檔大小和估計(jì)下載時(shí)間等。5. “屬性”面板 在Dreamweaver CS5中“屬性”面板是經(jīng)常使用的工具之一。當(dāng)選中某一對(duì)象時(shí)，“屬性”面板會(huì)自動(dòng)地顯示相關(guān)信息和參數(shù)，可以對(duì)其進(jìn)行修改和設(shè)定，如圖所示。深圳大學(xué)

20、計(jì)算機(jī)與軟件學(xué)院37大綱網(wǎng)頁(yè)與網(wǎng)站的概念Dreamweaver CS5簡(jiǎn)述Dreamweaver CS5的工作界面和基本操作Dreamweaver站點(diǎn)的建立和規(guī)劃文件的基本操作制作第一個(gè)網(wǎng)站深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院384.1實(shí)例1 “藏獒傳說”網(wǎng)站的建立 單擊菜單“站點(diǎn)” “新建站點(diǎn)”命令，可打開“站點(diǎn)設(shè)置對(duì)象”對(duì)話框。在站點(diǎn)名稱右側(cè)的文本框中輸入網(wǎng)站的名稱，這里輸入“藏獒傳說”，單擊本地站點(diǎn)文件夾右側(cè)的按鈕，指定“藏獒傳說”站點(diǎn)的文件夾，如圖所示。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院394.2利用站點(diǎn)定義向?qū)?chuàng)建站點(diǎn)實(shí)例1 “藏獒傳說”網(wǎng)站的建立 若需要進(jìn)行更為復(fù)雜的設(shè)置，可以單擊“高級(jí)設(shè)置”選項(xiàng)，在彈出的選項(xiàng)卡中根據(jù)需要設(shè)置站點(diǎn)，如圖所示。深圳大學(xué) 計(jì)算機(jī)與軟件學(xué)院404.3站點(diǎn)的管理站點(diǎn)的管理 站點(diǎn)建好以后，可根據(jù)需要對(duì)站點(diǎn)進(jìn)行編輯管理，如新建、編輯、復(fù)制、刪除、導(dǎo)入和導(dǎo)出等。可單擊菜單“站點(diǎn)”“管理站點(diǎn)”命令，打開“管理站點(diǎn)”對(duì)話框，如圖所示，選擇要編輯的站點(diǎn)名稱，可根據(jù)需要選擇不同的按鈕進(jìn)行操