計(jì)算機(jī)應(yīng)用基礎(chǔ)(Windows7+Office2010)第六章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

第六章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)計(jì)算機(jī)應(yīng)用基礎(chǔ)6.1網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)6.1網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)6.2HTML簡(jiǎn)介6.3AdobeDreamweaverCS4基礎(chǔ)6.1網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)6.1.1基本概念1、WWW WWW，即WorldWideWeb，中文譯作萬(wàn)維網(wǎng)，是為解決網(wǎng)絡(luò)中的信息傳遞問題而建立的，在WWW誕生之前，網(wǎng)絡(luò)中的信息傳遞大多采用E-mail、FTP、Archie和Gopher來(lái)實(shí)現(xiàn)，這些傳遞方式采用的協(xié)議大多無(wú)法兼容，難以實(shí)現(xiàn)互聯(lián)網(wǎng)中信息的有效檢索。由于這些限制，開發(fā)一種能夠獨(dú)立于各種平臺(tái)并方便用戶獲取信息的技術(shù)手段，已經(jīng)成為互聯(lián)網(wǎng)發(fā)展過程中的迫切需要。 1984年，歐洲量子物理實(shí)驗(yàn)室（CERN）為了使分散在歐洲各國(guó)的物理學(xué)家能夠通過網(wǎng)絡(luò)合作，分享各自實(shí)驗(yàn)室的研究成果，委托蒂姆·伯納斯·李利用超文本技術(shù)開發(fā)了一個(gè)網(wǎng)絡(luò)應(yīng)用軟件，這就是瀏覽器的雛形。在此基礎(chǔ)上，又開發(fā)出了超文本標(biāo)記語(yǔ)言（HTML）和超文本傳輸協(xié)議（HTTP），用戶可以遠(yuǎn)程利用瀏覽器軟件進(jìn)入服務(wù)器進(jìn)行信息查詢等操作，這標(biāo)志著萬(wàn)維網(wǎng)的誕生。隨后，萬(wàn)維網(wǎng)聯(lián)盟（W3C）成立，WWW迅速在世界范圍內(nèi)開始推廣，現(xiàn)已成為互聯(lián)網(wǎng)中最重要的應(yīng)用之一。2、網(wǎng)頁(yè)與網(wǎng)站 所謂網(wǎng)站，是指在互聯(lián)網(wǎng)中提供多種服務(wù)的信息平臺(tái)，由域名和站點(diǎn)空間構(gòu)成。網(wǎng)站可以提供網(wǎng)頁(yè)服務(wù)、數(shù)據(jù)傳輸服務(wù)、郵件服務(wù)和數(shù)據(jù)庫(kù)服務(wù)等多種服務(wù)內(nèi)容，其中網(wǎng)頁(yè)服務(wù)是指根據(jù)一定的規(guī)則，在互聯(lián)網(wǎng)上進(jìn)行特定內(nèi)容展示的網(wǎng)頁(yè)集合。 網(wǎng)頁(yè)通常由文本、圖像、音視頻文件、腳本程序等元素構(gòu)成，網(wǎng)頁(yè)需要通過瀏覽器進(jìn)行閱讀，通常使用超文本標(biāo)記語(yǔ)言（HTML）作為網(wǎng)頁(yè)的標(biāo)準(zhǔn)代碼。HTML可以創(chuàng)建包含圖像、聲音、動(dòng)畫的格式化文本，即網(wǎng)頁(yè)文件。在HTML的基礎(chǔ)上，還誕生了一種衍生語(yǔ)言XML（可擴(kuò)展標(biāo)記語(yǔ)言），可以實(shí)現(xiàn)自定義標(biāo)記，具有良好的擴(kuò)展性，已成為新一代的網(wǎng)頁(yè)標(biāo)準(zhǔn)規(guī)范。3、域名 互聯(lián)網(wǎng)中的計(jì)算機(jī)采用的身份標(biāo)識(shí)是IP地址，但由于IP地址完全由數(shù)字構(gòu)成，不便于記憶，為了解決這個(gè)問題，人們按照一定的規(guī)則對(duì)互聯(lián)網(wǎng)中的計(jì)算機(jī)定義了字符形式的地址標(biāo)記，這就是域名。在網(wǎng)絡(luò)中，域名通常與IP地址是一一對(duì)應(yīng)的。按照互聯(lián)網(wǎng)中的組織模式，域名系統(tǒng)最早提出了六大分類，即.com（商業(yè)組織）、.edu（教育機(jī)構(gòu)）、.gov（政府部門）、.mil（軍事機(jī)構(gòu)）、.net（網(wǎng)絡(luò)相關(guān)組織）、.org（非營(yíng)利性組織），并沒有考慮到跨國(guó)家的范圍。隨著互聯(lián)網(wǎng)在國(guó)際范圍內(nèi)的進(jìn)一步發(fā)展，后期增設(shè)了以國(guó)家或地區(qū)為界限的域名系統(tǒng)，如.cn（中國(guó)）、.jp（日本）、.uk（英國(guó)）、.hk（香港）等等。6.1.2靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)1、靜態(tài)網(wǎng)頁(yè) 靜態(tài)網(wǎng)頁(yè)并不是指網(wǎng)頁(yè)中的元素靜止，而是指純粹的HTML格式的網(wǎng)頁(yè)，它相對(duì)于動(dòng)態(tài)網(wǎng)頁(yè)而言，不包含后臺(tái)數(shù)據(jù)庫(kù)，不含程序，不可交互。網(wǎng)頁(yè)的制作人員制作的頁(yè)面就是用戶最終瀏覽的頁(yè)面，不會(huì)發(fā)生任何改動(dòng)。靜態(tài)網(wǎng)頁(yè)較難進(jìn)行更新，一般適用于展示型內(nèi)容。靜態(tài)網(wǎng)頁(yè)執(zhí)行過程2、動(dòng)態(tài)網(wǎng)頁(yè) 與靜態(tài)網(wǎng)頁(yè)一樣，動(dòng)態(tài)網(wǎng)頁(yè)同樣與動(dòng)畫、字幕等視覺上的運(yùn)動(dòng)效果沒有關(guān)系。動(dòng)態(tài)網(wǎng)頁(yè)可以是純文字的頁(yè)面，也可以包含動(dòng)畫等運(yùn)動(dòng)效果，這都是內(nèi)容的表現(xiàn)形式，無(wú)論頁(yè)面的內(nèi)容是否具有運(yùn)動(dòng)效果，只有采用了動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)生成的頁(yè)面才被稱為動(dòng)態(tài)網(wǎng)頁(yè)。 從瀏覽者的角度來(lái)看，動(dòng)態(tài)頁(yè)面與靜態(tài)頁(yè)面在瀏覽器中展示出的各種信息并沒有太大不同，但從工作原理來(lái)看，兩者存在著本質(zhì)的差別。靜態(tài)網(wǎng)頁(yè)僅由HTML語(yǔ)言構(gòu)成，而動(dòng)態(tài)網(wǎng)頁(yè)采用動(dòng)態(tài)網(wǎng)頁(yè)語(yǔ)言進(jìn)行編寫，如ASP、JSP、PHP等。動(dòng)態(tài)網(wǎng)頁(yè)支持?jǐn)?shù)據(jù)庫(kù)技術(shù)并可以實(shí)現(xiàn)瀏覽器端與服務(wù)器端的交互功能，能夠?yàn)橛脩籼峁┓N類更多、功能更強(qiáng)的服務(wù)。動(dòng)態(tài)網(wǎng)頁(yè)執(zhí)行過程6.1.3網(wǎng)站運(yùn)行方式1、實(shí)體主機(jī) 由網(wǎng)站的所有者自行購(gòu)買主機(jī)，建立獨(dú)立的WWW服務(wù)器，并自行維護(hù)的方式。2、主機(jī)托管 網(wǎng)站所有者自行購(gòu)買服務(wù)器主機(jī)，并將其放置在互聯(lián)網(wǎng)服務(wù)供應(yīng)商（ISP）所設(shè)立的機(jī)房，每月支付必要費(fèi)用，由ISP代為管理維護(hù)，而客戶從遠(yuǎn)端連線服務(wù)器進(jìn)行操作的服務(wù)方式。

3、虛擬主機(jī) 虛擬主機(jī)是使用特殊的軟硬件技術(shù)，把真實(shí)的物理服務(wù)器主機(jī)分割成多個(gè)的邏輯存儲(chǔ)單元，即虛擬主機(jī)，虛擬主機(jī)沒有物理實(shí)體，但是都能像真實(shí)的物理主機(jī)一樣在網(wǎng)絡(luò)上工作，具有單獨(dú)的域名、IP地址(或共享的IP地址)以及完整的Internet服務(wù)器功能，網(wǎng)站所有者只需要租用這樣一個(gè)虛擬單元就可以實(shí)現(xiàn)站點(diǎn)發(fā)布。在這三類方法中，這種方式成本最低、開銷最小，廣泛被個(gè)人用戶所采用。6.2HTML簡(jiǎn)介 HTML（HyperTextMark-upLanguage，超文本標(biāo)記語(yǔ)言）是目前網(wǎng)絡(luò)中應(yīng)用最廣泛的語(yǔ)言，也是構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言。它與常見的編程語(yǔ)言不同，是一種描述性的標(biāo)記語(yǔ)言，用于描述超文本中內(nèi)容的顯示方式。HTML在文本文件的基礎(chǔ)上，增加了一系列標(biāo)記，用來(lái)描述顏色、字體、字號(hào)等信息，同時(shí)可以將聲音、圖像、動(dòng)畫插入頁(yè)面中形成豐富多彩的網(wǎng)頁(yè)文件，這也是它得到廣泛普及的重要原因。6.2.1HTML基本語(yǔ)法 HTML語(yǔ)法的基本形式為：<標(biāo)記>內(nèi)容</標(biāo)記>。其中的標(biāo)記通常成對(duì)出現(xiàn)，有開始標(biāo)記就有結(jié)束標(biāo)記，結(jié)束標(biāo)記的形式是開始標(biāo)記加上斜杠“/”，一般來(lái)說，結(jié)束標(biāo)記與開始標(biāo)記配合使用，但在某些情況下也可以省略。6.2.2使用HTML創(chuàng)建簡(jiǎn)單網(wǎng)頁(yè) 平時(shí)我們所見到的大多數(shù)網(wǎng)頁(yè)文件都是利用HTML生成的，所以網(wǎng)頁(yè)文件又被稱為HTML文件。從本質(zhì)上來(lái)看，HTML文件仍然是文本文件，只是擴(kuò)展名變成了“.htm”或“.html”，所以使用任何的文本編輯工具都可以創(chuàng)建、修改HTML文件。在這里我們以最基本的文本編輯軟件——記事本為例，來(lái)創(chuàng)建第一個(gè)網(wǎng)頁(yè)文件。6.2.3HTML文件結(jié)構(gòu)1、<html>標(biāo)記2、<head>標(biāo)記3、<title>標(biāo)記4、<body>標(biāo)記6.2.4HTML網(wǎng)頁(yè)實(shí)例例6.1設(shè)置背景色、體會(huì)標(biāo)題樣式的使用<html> <head> <title>例1.1設(shè)置背景色、體會(huì)標(biāo)題樣式的使用</title> </head> <bodybgcolor=red>

以下為標(biāo)題樣式：

<h1>標(biāo)題一</h1> <h2>標(biāo)題二</h2> <h3>標(biāo)題三</h3> <h4>標(biāo)題四</h4> <h5>標(biāo)題五</h5> <h6>標(biāo)題六</h6> </body></html>例6.2設(shè)置文字顏色<html> <head> <title>例1.2設(shè)置文字顏色</title> </head> <body> <fontcolor=purple>

紫色文字

</font> </body></html>例6.3設(shè)置加粗、傾斜，設(shè)置背景圖<html> <head> <title>例1.3設(shè)置加粗、傾斜，設(shè)置背景圖</title> </head> <bodybackground=bg.jpg> <fontcolor=blue> <b> <i>

此處文字為藍(lán)色粗斜體

</i> </b> </font> </body></html>例6.4插入圖片<html> <head> <title>例1.4插入圖片</title> </head> <body> <imgsrc=pic.jpg>

在網(wǎng)頁(yè)中插入圖片，讓網(wǎng)頁(yè)豐富多彩！

</body></html>6.2.5查看網(wǎng)頁(yè)源文件 大多數(shù)瀏覽器都提供直接查看HTML代碼的方法，這里以IE瀏覽器為例，選擇菜單欄中的“查看”菜單項(xiàng)下的“源文件”命令即可看到該網(wǎng)頁(yè)的源文件。6.3AdobeDreamweaver基礎(chǔ)

Dreamweaver是美國(guó)Adobe公司開發(fā)的集網(wǎng)頁(yè)制作和站點(diǎn)管理于一身的所見即所得網(wǎng)頁(yè)編輯器，它是針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁(yè)開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的符合規(guī)范的網(wǎng)頁(yè)。6.3.1認(rèn)識(shí)DreamweaverCS4工作界面中各部分的功能如下所述：1、文檔工作區(qū) 是工作界面的主要區(qū)域，在窗口中部，它是進(jìn)行網(wǎng)頁(yè)編輯創(chuàng)作的主要區(qū)域，編排的結(jié)果與網(wǎng)頁(yè)在瀏覽器中的效果近似，但仍有部分差異，這就是可視化設(shè)計(jì)工具的重要特性“所見即所得”。2、“插入”工具欄 位于界面上方，主要作用在于插入各種對(duì)象，單擊標(biāo)簽可以切換不同類型的插入對(duì)象，默認(rèn)為“常用”欄，包括超級(jí)鏈接、圖像、表格等。3、屬性欄 當(dāng)選中某對(duì)象時(shí)，屬性欄會(huì)實(shí)時(shí)顯示相關(guān)信息和參數(shù)，并可以對(duì)其進(jìn)行修改設(shè)置，其中的內(nèi)容會(huì)隨著選擇對(duì)象的不同而變化。4、面板組 針對(duì)其他不同的控制對(duì)象，還有諸如CSS樣式、行為、框架等面板，它們都在面板組中集中顯示，根據(jù)所面向的對(duì)象的不同發(fā)揮著特殊作用。6.3.2使用Dreamweaver創(chuàng)建簡(jiǎn)單網(wǎng)頁(yè)1、添加文本2、插入圖片3、創(chuàng)建超鏈接6.3.3創(chuàng)建站點(diǎn)1、定義站點(diǎn)2、添加文件和文件夾6.