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

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

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

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

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

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

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

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

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

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

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

11、A、B B、C C等類地址，實際可用的網(wǎng)絡(luò)數(shù)和主等類地址，實際可用的網(wǎng)絡(luò)數(shù)和主機數(shù)遠小于上述數(shù)目機數(shù)遠小于上述數(shù)目 。深圳大學(xué) 計算機與軟件學(xué)院20IPv6的格式：的格式：地址長度是地址長度是128位（位（bit） ， 8段的段的16位十六進制數(shù)表示，位十六進制數(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é) 計算機與軟件學(xué)院21006530深圳大學(xué) 計算機與軟件學(xué)院22Internet的域名管理 DNS域名系統(tǒng)是一種幫助人們在Internet上用字符來惟一識別自己的計算機，并保證主機名（域名）和IP地址一一對應(yīng)的網(wǎng)絡(luò)服務(wù)。DNS簡介深圳大學(xué) 計算機與軟件學(xué)院23域名空間 Internet域名具有層次結(jié)構(gòu)。整個Internet網(wǎng)被劃分成幾個頂級域。InterNIC采

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

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

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

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

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

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

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

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