《網(wǎng)頁設計與制作》中職全套教學課件

網(wǎng)頁設計與制作基礎模塊一全套可編輯PPT課件共9個模塊，包括網(wǎng)頁設計與制作基礎、網(wǎng)頁版面布局和色彩搭配、Dreamweaver2021、HTML5語言、JavaScript腳本語言、使用表單、繪制圖形、CSS3基礎、CSS3高級應用。模塊導讀

隨著Internet的飛速發(fā)展,網(wǎng)絡存在于人們生活、工作和學習的方方面面,網(wǎng)站已成為人們獲取信息、企業(yè)展示自身形象的一個通用平臺,網(wǎng)頁作為承載傳遞信息的載體,其設計與制作技術的發(fā)展越來越多地被人們關注。本模塊將介紹網(wǎng)站、網(wǎng)頁、網(wǎng)站建設以及HTML語言的基礎知識。163學習目標（1）了解網(wǎng)站和網(wǎng)頁的基本概念。（2）了解網(wǎng)站開發(fā)的技術與網(wǎng)頁制作軟件。（3）熟悉網(wǎng)站建設的基本流程。（4）了解網(wǎng)站設計的相關語言學習目標0102認識網(wǎng)頁認識網(wǎng)站03網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件04網(wǎng)站建設基本流程05網(wǎng)站設計的語言CONTENTS本章目錄任務說明

網(wǎng)站(website)是網(wǎng)頁設計的基礎,本節(jié)將詳細講解網(wǎng)站的定義、IP地址與域名以及URL的概念。1.1認識網(wǎng)站本節(jié)重點講解1.1認識網(wǎng)站URL的概念網(wǎng)站的定義IP地址與域名認識網(wǎng)站1.11.1.1網(wǎng)站的定義

一個功能多樣的網(wǎng)站是由多個網(wǎng)頁組成的。用戶想要瀏覽網(wǎng)頁,其計算機中必須安裝瀏覽器,瀏覽器的作用就是將網(wǎng)頁打開并呈現(xiàn)給用戶。常見的瀏覽器包括Chrome、Firefox、MircrosoftEdge以及360安全瀏覽器等,圖1-1-1所示為使用Chrome瀏覽器顯示的網(wǎng)頁。認識網(wǎng)站1.1認識網(wǎng)站1.1網(wǎng)址和域名

網(wǎng)站通常是存放在一個固定的主機上的,這臺主機稱為網(wǎng)頁服務器或Web服務器,它以虛擬主機或主機托管的方式進行存放和運作。為了能使用戶訪問網(wǎng)站,這臺服務器通常擁有固定的網(wǎng)址或域名。認識網(wǎng)站1.11.1.2IP地址與域名

為了可以在Internet上正確地將信息傳送到目的地,每臺主機都必須有一個唯一的網(wǎng)絡地址,才不至于在傳輸數(shù)據(jù)時出現(xiàn)混亂。1.11.IP地址

一、

在Internet中,每臺連接到網(wǎng)絡上的主機的唯一的網(wǎng)絡地址就是IP地址。IP地址是一個點分十進制的結構,即將32位的二進制數(shù)利用點(.)分成4個部分,然后將每個部分轉(zhuǎn)換成一個十進制數(shù),如01。IP地址是由互聯(lián)網(wǎng)名稱與數(shù)字地址分配機構ICANN(the

Internet

Corporation

for

Assigned

Namesand

Numbers)進行分配的。用戶必須向ICANN申請IP地址,并在獲取批準后使用。凡是可以使用Internet域名的地方都可以使用IP地址。認識網(wǎng)站1.1

2.域名

一、

在Internet上使用主機的IP地址來定位和標識主機,為了方便記憶,IP地址采用了4段點分十進制的數(shù)字表示,但是要記住這些枯燥的數(shù)字還是非常煩瑣的。為了解決這個問題,提出了網(wǎng)絡域名的概念。簡單地說,域名就相當于每臺服務器或主機的別名,Internet域名是Internet上的一個服務器或一個網(wǎng)絡系統(tǒng)的名字。域名是唯一的。認識網(wǎng)站1.1

2.域名

一、按照Internet的組織模式,對域名進行分級,一級域名主要包括.com(商業(yè)組織)、.net(網(wǎng)管部門)、.edu(教育機構)、.gov(政府機關)、.mil(軍事機構)、.org(非營利性組織)等。大部分國家和地區(qū)擁有自己的獨立域名,如.cn(中國內(nèi)地)、.us(美國)、.hk(中國香港)等。認識網(wǎng)站認識網(wǎng)站1.11.1.3URL

URL(uniformresourcelocator,統(tǒng)一資源定位器)是主要用來指明網(wǎng)絡通信協(xié)議和地址的方式。因為用戶想要獲取Internet站點通信,獲取服務器主機提供的網(wǎng)絡服務,就必須通知服務器主機通信使用的協(xié)議類型、主機地址以及資源文件的位置等信息。簡單地說,URL就是Web地址,俗稱“網(wǎng)址”。URL包括通信協(xié)議、主機名、要訪問的資源文件的路徑和資源文件名等幾部分。認識網(wǎng)站1.11.1.3URL

注意:Internet上的每一個網(wǎng)頁都具有一個唯一的名稱標識,通常稱之為URL地址,這種地址可以是本地磁盤,也可以是局域網(wǎng)上的某一臺計算機,更多的是Internet上的站點。任務說明

網(wǎng)站的內(nèi)容是通過其中的網(wǎng)頁來展現(xiàn)的。網(wǎng)頁是網(wǎng)站中最基本的文檔,也是Web站點中最重要的組成部分。1.2認識網(wǎng)頁本節(jié)重點講解1.2認識網(wǎng)頁網(wǎng)頁的類型網(wǎng)頁的定義認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義

網(wǎng)頁是一個文本文檔,其擴展名通常是.htm或.html,通過超鏈接、表格、APDiv、框架等技術將文本、圖像、動畫、音頻和視頻等媒體嵌入其中,利用瀏覽器將內(nèi)容展現(xiàn)給用戶。網(wǎng)頁通常存放在網(wǎng)站指定的主頁目錄中,網(wǎng)站通常搭建在網(wǎng)絡上的一臺服務器上,用戶通過URL來定位并訪問指定的網(wǎng)頁。當用戶在瀏覽器上輸入URL后,瀏覽器根據(jù)輸入的URL,將網(wǎng)頁文件傳送到用戶的計算機中,然后通過瀏覽器解釋網(wǎng)頁的內(nèi)容,并展示給用戶。網(wǎng)頁常見的構成元素有文本、圖像、動畫、音頻和視頻。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義

1.文本文本是網(wǎng)頁的基本元素之一,是網(wǎng)頁信息的主要載體。文字、字母、數(shù)字和符號等都可以稱為文本,它是網(wǎng)頁中表述信息最完備的元素,網(wǎng)頁中的絕大多數(shù)內(nèi)容都是通過文本來傳遞的,如圖1-2-1所示。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義

2.圖像圖像是網(wǎng)頁中的重要元素,它影響著頁面的風格和創(chuàng)意。一個設計良好的站點離不開圖像的使用。在某個站點中,所有網(wǎng)頁里使用的圖像的風格應該是統(tǒng)一的。因此在設計和制作網(wǎng)頁之前需要統(tǒng)一確定好所使用圖像的風格和顏色。網(wǎng)頁中的圖像可以傳遞文本無法呈現(xiàn)的特定信息,因此通常在網(wǎng)頁中大量使用圖像來表達文字內(nèi)容。網(wǎng)頁設計人員可以根據(jù)需要合理安排,如圖1-2-2所示。網(wǎng)頁中常見的圖像格式有GIF、JPG、JPEG、PNG等。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義

3.動畫動畫是網(wǎng)頁的一個重要成分,在網(wǎng)頁中使用動畫可以使頁面效果更加活潑生動,引人入勝。常用的動畫類型有GIF動畫、Flash動畫等,也可以使用編程的方法制作動畫。目前網(wǎng)絡上廣泛使用的動畫是Flash動畫,并且逐漸成為網(wǎng)頁內(nèi)嵌動畫的主流,如圖1-2-3所示。在網(wǎng)頁中內(nèi)嵌Flash動畫,可以表達很多靜態(tài)組件無法描述的內(nèi)容,如產(chǎn)品展示等。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義

4.音頻音頻文件是Internet中運用最早,也是運用最多的多媒體文件。目前音頻文件在網(wǎng)絡上被廣泛地運用,類型多種多樣,主要有MP3、ASF、WMA、APE、FLAC、WAV、RM和OGG等。(1)MP3具有壓縮程度高、音質(zhì)好的特點,當MP3的壓縮率達到160KB/s時就非常接近CD音質(zhì)了,因此,MP3已成為最流行的一種音頻格式,如圖1-2-4所示。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義(2)ASF和WMA都是Microsoft公司針對RealNetworks公司開發(fā)的新一代網(wǎng)絡流行的數(shù)字音頻壓縮技術,這種壓縮技術具有兼顧保真度和網(wǎng)絡傳輸需求的特點。(3)APE和FLAC是兩種無損壓縮音頻格式,與MP3、WMA等格式為了獲取較小音頻文件而允許損失一定的音質(zhì)不同,APE和FLAC在保有原來的高音質(zhì)基礎上,將WAV文件壓縮到原來的1/2左右,方便在網(wǎng)絡上傳輸。另外,APE和FLAC還可以和WAV音頻文件進行無損轉(zhuǎn)換。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義(4)WAV是MicrosoftWindows系統(tǒng)提供的音頻格式,這種格式可以和CD進行無損轉(zhuǎn)換,并且已經(jīng)成為事實上的通用音頻格式。(5)RM是目前網(wǎng)絡上流行的主流多媒體文件格式之一,它是由RealNetworks公司制定的音頻視頻壓縮規(guī)范,主要包含RealAudio、RealVideo和RealFlash,該類文件具有壓縮比高、文件小、音頻和視頻能同時保持較好的質(zhì)量等特點。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義RM文件只有使用RealNetworks公司開發(fā)的RealMedia引擎播放器(如RealPlayer等)才能正常播放,但它支持在網(wǎng)上實時收聽音頻及收看視頻。(6)OGG是一種新的音頻壓縮格式,類似于MP3等現(xiàn)有的音樂格式,同時具備完全免費開放、沒有專利限制和支持多聲道等特點。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義

5.視頻現(xiàn)代多媒體網(wǎng)頁的一個重要特點就是在網(wǎng)頁上添加視頻,視頻的加入可以大大增加站點的可讀性,如圖1-2-5所示。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義能夠運行在網(wǎng)站上的視頻文件類型正日益增多,主要有AVI、MPEG、DivX、RealVideo、QuickTime、ASF以及WMV等。(1)AVI(擴展名為.avi)音頻視頻交錯格式,即視頻和音頻交織在一起進行同步播放。這種視頻格式的優(yōu)點是圖像質(zhì)量好,可以跨多個平臺使用;其缺點是體積過于龐大,而且壓縮標準不統(tǒng)一。AVI是目前視頻文件的主流格式。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義(2)MPEG(擴展名為.mpeg、.mpg或.dat)動態(tài)圖像專家組,是運動圖像壓縮算法的國際標準。它采用有損壓縮的方法減少運動圖像中的冗余信息,同時保證了動態(tài)圖像應有的每秒30幀的刷新率。MPEG已被幾乎所有的計算機平臺共同支持。(3)DivX是由MPEG-4衍生出的一種視頻編碼壓縮標準,它采用了MPEG-4的壓縮算法,同時綜合了MPEG-4與MP3各方面的技術。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義(4)RealVideo(擴展名為.ra、.rm或.rmvb)文件是由RealNetworks公司開發(fā)的一種新型流式視頻文件格式,它包含在RealNetworks公司所制定的音頻、視頻壓縮規(guī)范RealMedia中,主要用來在低速率的廣域網(wǎng)上實時傳輸視頻影像活動,可以根據(jù)網(wǎng)絡數(shù)據(jù)傳輸速率的不同而采用不同的壓縮比率,從而實現(xiàn)影像數(shù)據(jù)的實時傳送和實時播放。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義(5)QuickTime(擴展名為.mov或.qt)是Apple計算機公司開發(fā)的一種音頻、視頻文件格式,用于保存音頻和視頻信息。QuickTime因具有跨平臺、存儲空間要求小等技術特點,得到業(yè)界的廣泛認可,目前已成為數(shù)字媒體軟件技術領域事實上的工業(yè)標準。(6)ASF(擴展名為.asf)高級流格式,是Microsoft公司開發(fā)的一個在Internet上實時傳播多媒體的技術標準。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義

ASF具有本地或網(wǎng)絡回放、可擴充的媒體類型、部件下載、可伸縮的媒體類型、流的優(yōu)先級化、多語言支持、環(huán)境獨立性、豐富的流間關系以及擴展性等特點。(7)WMV(擴展名為.wmv)是ASF格式的升級和延伸。在同等視頻質(zhì)量下,WMV格式的體積非常小,因此很適合在網(wǎng)上播放和傳輸。認識網(wǎng)頁1.21.2.2網(wǎng)頁類型根據(jù)網(wǎng)頁執(zhí)行的方式不同可以將網(wǎng)頁分為兩種類型,即靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。

1.靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是相對于動態(tài)網(wǎng)頁而言的,指沒有后臺數(shù)據(jù)庫、不含程序和不可交互的網(wǎng)頁。網(wǎng)頁中僅包含HTML(hypertextmarkuplanguage,超文本標記語言)代碼,而且頁面內(nèi)容完全包含在網(wǎng)頁的代碼中并由瀏覽器解釋執(zhí)行。靜態(tài)網(wǎng)頁可以是以.htm、.html、.shtml等為后綴的文本文件認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義(1)每個靜態(tài)網(wǎng)頁都有一個固定的URL,且網(wǎng)頁URL以.htm、.html、.shtml等常見形式為后綴,不含有“?”。(2)網(wǎng)頁內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務器上,無論是否有用戶訪問,每個靜態(tài)網(wǎng)頁的內(nèi)容都是保存在網(wǎng)站服務器上的,也就是說,靜態(tài)網(wǎng)頁是實際保存在服務器上的文件,每個網(wǎng)頁都是一個獨立的文件。(3)靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定,因此容易被搜索引擎檢索。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義(4)靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持,在網(wǎng)站制作和維護方面工作量較大,因此當網(wǎng)站信息量很大時完全依靠靜態(tài)網(wǎng)頁制作方式比較困難。(5)靜態(tài)網(wǎng)頁的交互性較差,在功能方面有較大的局限性。認識網(wǎng)頁1.21.2.2網(wǎng)頁類型

2.動態(tài)網(wǎng)頁網(wǎng)頁文件中包含一定的程序和組件,并且這些程序和組件必須在服務器端運行,這樣的網(wǎng)頁就是動態(tài)網(wǎng)頁。動態(tài)網(wǎng)頁能夠隨不同客戶、不同時間返回不同的網(wǎng)頁。因此,動態(tài)網(wǎng)頁的頁面內(nèi)容并不是完全包含在頁面文件中,而是采用ASP(activeserverpages,活動服務器頁面)、ASP.NET、PHP(pagehypertextpreprocessor,超文本預處理器)或JSP(Javaserverpages,Java服務器頁面)技術,從服務器的數(shù)據(jù)庫中提取數(shù)據(jù)后,自動生成HTML文檔的。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義動態(tài)網(wǎng)頁的特點如下:(1)動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術為基礎,可以大大降低網(wǎng)站維護的工作量。(2)采用動態(tài)網(wǎng)頁技術的網(wǎng)站可以實現(xiàn)更多的功能,如用戶注冊、用戶登錄、在線調(diào)查、用戶管理、訂單管理等。(3)動態(tài)網(wǎng)頁實際上并不是獨立存在于服務器上的網(wǎng)頁文件,只有當用戶請求時服務器才返回一個完整的網(wǎng)頁。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義(4)動態(tài)網(wǎng)頁中的“?”在搜索引擎檢索時存在一定的問題,搜索引擎一般不能從一個網(wǎng)站的數(shù)據(jù)庫中訪問全部網(wǎng)頁,或者出于技術方面的考慮,搜索引擎不會去抓取網(wǎng)址中“?”后面的內(nèi)容,因此,采用動態(tài)網(wǎng)頁的網(wǎng)站在進行搜索引擎推廣時需要做一定的技術處理才能適應搜索引擎的要求。認識網(wǎng)頁1.21.2.1網(wǎng)頁的定義

注意:建立網(wǎng)站時采用動態(tài)網(wǎng)頁還是靜態(tài)網(wǎng)頁,主要取決于網(wǎng)站的功能需求和網(wǎng)站內(nèi)容的多少。如果網(wǎng)站功能比較簡單,內(nèi)容更新量不是很大,采用純靜態(tài)網(wǎng)頁的方式會更簡單,反之則一般采用動態(tài)網(wǎng)頁技術來實現(xiàn)。任務說明

WWW服務器上相互鏈接的一系列網(wǎng)頁組成一個網(wǎng)站,通常把網(wǎng)站稱作WWW站點或Web站點。從廣義上說,網(wǎng)站由硬件與軟件兩大部分組成,硬件主要是指服務器(計算機),軟件則指操作系統(tǒng)、Web服務器軟件和應用程序(包括靜態(tài)和動態(tài)網(wǎng)頁文件以及數(shù)據(jù)庫)等。從狹義上說,網(wǎng)站則是指基于Web服務器的應用程序。1.3網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件本節(jié)重點講解1.3網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件網(wǎng)頁制作軟件網(wǎng)站開發(fā)技術網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.1網(wǎng)站開發(fā)技術網(wǎng)站的體系結構如圖1-3-1所示。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.1網(wǎng)站開發(fā)技術

1.網(wǎng)站的工作流程客戶端通過瀏覽器來顯示數(shù)據(jù)并實現(xiàn)與服務器的交互。在服務器端由Web服務器通過HTTP協(xié)議與客戶端的瀏覽器交互,Web服務器和應用服務器(這里的應用服務器通常是指某種軟件環(huán)境,如圖1-3-1中用虛線框表示的部分)也使用HTTP作為它們之間的通信協(xié)議。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.1網(wǎng)站開發(fā)技術而應用服務器與數(shù)據(jù)庫服務器之間采用標準的機制進行通信,如ODBC(opendatabaseconnectivity,開放數(shù)據(jù)庫連接)、JDBC(Javadatabaseconnectivity,Java數(shù)據(jù)庫連接)、SQL(structurequerylanguage,結構化查詢語言)等。通常Web服務器接受客戶端的請求,并根據(jù)請求的類型直接回復HTML頁面給客戶端,或者將請求提交給應用服務器處理。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.1網(wǎng)站開發(fā)技術應用服務器接受由Web服務器傳來的處理請求,并根據(jù)需要查詢或更新數(shù)據(jù)庫,進行應用邏輯的處理,然后將處理結果傳回Web服務器。數(shù)據(jù)庫服務器實現(xiàn)數(shù)據(jù)的存取功能,負責數(shù)據(jù)庫的組織并向應用邏輯提供接口。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.1網(wǎng)站開發(fā)技術

2.網(wǎng)站的服務器端技術這里的服務器端技術是指服務器端構造動態(tài)頁面的技術,下文介紹的客戶端技術是指瀏覽器的網(wǎng)頁標記語言技術。在網(wǎng)站設計過程中,最重要的是服務器端應用程序的開發(fā)。通俗地說,就是要在Web服務器上構造動態(tài)網(wǎng)頁。流行的服務器端構造動態(tài)網(wǎng)頁的技術有ASP、PHP和JSP等。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.1網(wǎng)站開發(fā)技術

(1)ASP。ASP是微軟提供的一種運行于服務器端的腳本編寫環(huán)境,它使開發(fā)者可以使用幾乎所有的腳本語言(如VBScript、JavaScript、Perl等)編寫腳本,這些腳本可以執(zhí)行應用程序邏輯,并能夠調(diào)用ActiveX標簽和文本、腳本命令以及與ActiveX控件混合在一起實現(xiàn)動態(tài)網(wǎng)頁,創(chuàng)建交互式的Web站點,而不需要進行復雜的編程。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.1網(wǎng)站開發(fā)技術(2)PHP。PHP是一種內(nèi)嵌式的語言,而且PHP的語法混合了UNIX、Shell、C、C++、Java、Perl以及PHP自己的特性,它可以比CGI更快速地生成動態(tài)網(wǎng)頁。Perl執(zhí)行數(shù)據(jù)操作要另外通過DBI,但是PHP本身自帶了操作幾乎所有數(shù)據(jù)的能力,不需借助其他軟件。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.1網(wǎng)站開發(fā)技術PHP與Apache服務器緊密結合,執(zhí)行效率很高,并且它支持幾乎所有主流與非主流數(shù)據(jù)庫,使基于數(shù)據(jù)庫的Web網(wǎng)頁的開發(fā)變得輕而易舉。更重要的是它的源代碼公開，PHP及其相關的軟件都是免費的,在中小型網(wǎng)站的開發(fā)中具有很大的市場。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.1網(wǎng)站開發(fā)技術(3)JSP。Java語言是Sun公司開發(fā)的一種面向?qū)ο蟮木W(wǎng)絡時代的語言,但Java不僅是一種語言,還是一種架構應用的技術系列。Java構造動態(tài)頁面的技術包括Servlet和JSP。一個JavaServlet就是一個基于Java技術的運行在服務器端的程序,它可以接收來自用戶的Web瀏覽器端的HTTP請求,并且動態(tài)地生成響應或應答,將網(wǎng)頁文件發(fā)送到瀏覽器。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.1網(wǎng)站開發(fā)技術

3.網(wǎng)站的客戶端技術從Internet誕生開始,客戶端技術就不斷地發(fā)展,從最早的HTML到DHTML(dynamichypertextmarkuplanguage,動態(tài)超文本標記語言),一直到目前最有發(fā)展前途的XML技術?？蛻舳思夹g用于為最終用戶構造一個友好的人機界面。(1)HTML。使用HTML生成的是一種靜態(tài)的頁面,其優(yōu)點是可以被瀏覽器存儲在緩存中,所以HTML頁面請求的速度比較快。此外HTML代碼可以通過一些網(wǎng)頁編輯軟件以所見即所得的方式生成和編輯,便于維護和修改。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.1網(wǎng)站開發(fā)技術(2)DHTML。DHTML是對HTML的一個擴充。在DHTML中，HTML頁面上的所有元素都作為對象來處理,它們有自己的屬性和事件,對它們的控制是通過改變它們的屬性和觸發(fā)它們的某些事件來實現(xiàn)的。所有這些對象共同構成了DOM(documentobjectmodel,文檔對象模型)。DHTML為Web應用提供了一種動態(tài)機制,一些簡單的操作,如確認數(shù)據(jù)驗證和動態(tài)菜單,都可以不通過向服務器提交請求,而直接在客戶端通過JavaScript來處理,所以它在一定程度上可以減輕服務器的負荷,大大縮短響應的時間。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.1網(wǎng)站開發(fā)技術(3)XML。XML(extensiblemarkuplanguage,可擴展標記語言)是由萬維網(wǎng)聯(lián)盟(WorldWideWebConsortium,W3C)組織給出的一種可擴展的源標記語言。它是SGML(standardgeneralmarkuplanguage,標準通用標記語言)的一個簡化子集,這個子集是專為Web環(huán)境設計的。XML通過在數(shù)據(jù)中加入附加信息的方式來描述結構化數(shù)據(jù)。但XML不像HTML那樣只提供一組事先已經(jīng)定義好的標記,而是允許程序開發(fā)人員根據(jù)它所提供的規(guī)則,制定各種各樣的標記語言。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.2網(wǎng)頁制作技術目前流行的網(wǎng)頁制作軟件分為兩類,即代碼型和所見即所得型。1.代碼型網(wǎng)頁制作軟件代碼型網(wǎng)頁制作軟件就是直接通過編寫HTML語言代碼的方式制作網(wǎng)頁文件,對于初學者來說想要立即上手比較困難,而且相對所見即所得方式來說效率低下。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.2網(wǎng)頁制作技術常用的代碼型網(wǎng)頁制作軟件有EditPlus等。EditPlus是一款能處理文本、HTML和程序語言的32位編輯器,內(nèi)嵌了HTML、CSS、PHP、ASP、Perl、JavaScript和VBScript等語言的語法檢查功能,并支持上述多種編程語言的高亮顯示。其內(nèi)置的HTML工具欄可以自動完成HTML標記的插入和糾錯,并且可以直接預覽編寫的HTML網(wǎng)頁,是一款優(yōu)秀的代碼型網(wǎng)頁編制工具。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.2網(wǎng)頁制作技術2.所見即所得型網(wǎng)頁制作軟件所見即所得型網(wǎng)頁制作軟件就是在直觀的視圖中直接編輯網(wǎng)頁的文本、圖形、顏色等網(wǎng)頁元素及屬性,網(wǎng)頁設計的效果可以同時展現(xiàn)出來,從而大大提高編制網(wǎng)頁的效率。常見的所見即所得型網(wǎng)頁制作軟件有Office辦公軟件。所見即所得型網(wǎng)頁制作軟件給網(wǎng)頁制作帶來了極大的方便,尤其是它能使初學者快速掌握網(wǎng)頁制作技術,是學習網(wǎng)頁制作的得力助手。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.2網(wǎng)頁制作技術(1)Microsoft公司的FrontPage。FrontPage作為Office家族中的一員,是一款所見即所得型的代表軟件。FrontPage沿襲了Office風格,只要會使用Word的用戶就可以快速學會使用FrontPage,利用它可以極大地提高網(wǎng)頁制作者的工作效率。(2)Adobe公司的Dreamweaver。Dreamweaver是由美國Macomedia公司(已被Adobe公司收購)開發(fā)的集網(wǎng)頁制作和網(wǎng)站管理于一身的所見即所得型的網(wǎng)頁編輯軟件,利用它可以輕而易舉地制作出跨越平臺限制和瀏覽器限制的充滿動感的網(wǎng)頁。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.2網(wǎng)頁制作技術雖然所見即所得型網(wǎng)頁制作軟件方便用戶制作網(wǎng)頁,極大地提高了網(wǎng)頁制作的效率,但是其也存在著難以克服的缺點。首先,難以精確達到與瀏覽器完全一致的顯示效果。也就是說,在所見即所得型網(wǎng)頁編輯器中制作的網(wǎng)頁在瀏覽器中很難完全達到真正想要的效果,這一點在結構復雜的網(wǎng)頁(如動態(tài)網(wǎng)頁結構)中尤其明顯。其次,頁面原始代碼具有難以控制性,如在所見即所得編輯器中制作一張表格需要幾分鐘,但要完全符合要求可能需要幾十分鐘,甚至更多時間。而相比之下,代碼型的網(wǎng)頁編輯工具就不存在這個問題,因為所有的HTML代碼都在制作者的監(jiān)控下產(chǎn)生。網(wǎng)站開發(fā)技術和網(wǎng)頁制作軟件1.31.3.2網(wǎng)頁制作技術注意:通常情況下,網(wǎng)頁設計人員應綜合使用代碼型網(wǎng)頁制作軟件和所見即所得型網(wǎng)頁制作軟件,充分發(fā)揮兩者的優(yōu)點?？衫肈reamweaver等所見即所得型網(wǎng)頁制作軟件制作網(wǎng)頁的雛形,然后使用EditPlus等代碼型網(wǎng)頁制作軟件進行細致的調(diào)試,最終生成符合要求的網(wǎng)頁。任務說明

作為網(wǎng)頁制作的初學者,必須掌握網(wǎng)站建設的基本流程,其主要包括網(wǎng)站的需求分析、網(wǎng)站結構規(guī)劃、素材搜集、網(wǎng)站的設計與制作以及網(wǎng)站的發(fā)布等步驟。1.4網(wǎng)站建設基本流程網(wǎng)站建設基本流程1.41.網(wǎng)站的需求分析網(wǎng)站是建立在各種各樣具體的用戶需求之上的,這些需求往往來自用戶的實際需要。經(jīng)過需求分析后,必須獲得如下的內(nèi)容:(1)網(wǎng)站的主題。每個網(wǎng)站都必須有一個明確的主題,才能給瀏覽者留下深刻的印象。(2)網(wǎng)站的名稱。網(wǎng)站的名字必須便于用戶記憶。(3)網(wǎng)站的欄目設置。網(wǎng)站的欄目設置取決于網(wǎng)站的內(nèi)容。(4)網(wǎng)站的色調(diào)。網(wǎng)站的色調(diào)影響網(wǎng)站的風格。1.4.1網(wǎng)站的需求分析網(wǎng)站建設的基本流程1.41.4.2網(wǎng)站結構規(guī)劃2.網(wǎng)站結構規(guī)劃網(wǎng)站的結構在很大程度上決定了網(wǎng)站的風格,也決定了一個網(wǎng)站的方向和前途。合理的網(wǎng)站欄目結構能正確表達網(wǎng)站的基本內(nèi)容及其內(nèi)容之間的層次關系,因此必須站在用戶的角度考慮,使得用戶在網(wǎng)站中瀏覽時可以方便地獲取信息,不至于迷失。做到這一點并不難,關鍵在于對網(wǎng)站結構的重要性要有充分的認識,選擇合適的布局。網(wǎng)站建設的基本流程1.41.4.2網(wǎng)站結構規(guī)劃歸納起來,合理的網(wǎng)站欄目結構主要表現(xiàn)在以下幾個方面:(1)通過主頁可以到達任何一個一級欄目首頁、二級欄目首頁以及最終的內(nèi)容頁面。(2)通過任何一個網(wǎng)頁可以返回上一級欄目頁面并逐級返回主頁。(3)主欄目清晰并且全站統(tǒng)一。(4)通過任何一個網(wǎng)頁可以進入任何一個一級欄目首頁。網(wǎng)站建設的基本流程1.41.4.3素材收集3.素材收集完成了網(wǎng)站的需求分析和結構規(guī)劃后,就需要收集制作網(wǎng)站的素材,即在網(wǎng)頁制作過程中需要使用到的圖標、圖片、圖像、音頻、視頻、數(shù)據(jù)和動畫等材料,并選擇符合網(wǎng)站風格的材料,合理地安排這些素材的使用位置。制作者往往還要根據(jù)實際制作需要的素材。網(wǎng)站建設的基本流程1.41.4.4網(wǎng)站的設計與制作4.網(wǎng)站的設計與制作經(jīng)過需求分析、網(wǎng)站結構規(guī)劃和素材搜集等前期步驟后,接著進入網(wǎng)頁的設計與制作階段。在這一階段的工作按其性質(zhì)可以分為3類:頁面美工設計、靜態(tài)頁面制作和程序開發(fā)。頁面美工設計首先要對網(wǎng)站風格有整體的定位,包括標準字體、Logo、標準色彩和廣告語等。然后根據(jù)此定位分別做出首頁、二級欄目以及內(nèi)容的設計稿。1.4.4網(wǎng)站的設計與制作網(wǎng)站建設的基本流程1.41.4.4網(wǎng)站的設計與制作首頁設計包括版面、色彩、圖像、動態(tài)效果、圖標等風格設計,也包括Banner、菜單、標題、欄目等模塊設計。在設計好各個頁面的效果后,就需要制作成HTML頁面。對于簡單的網(wǎng)站通常只需要靜態(tài)頁面,不需要程序開發(fā),但對于功能復雜的網(wǎng)站,程序開發(fā)就是必要的了。程序開發(fā)人員可以事先編寫功能模塊,再整合到HTML頁面上,也可以用制作好的頁面進行程序開發(fā)。1.4.4網(wǎng)站的設計與制作網(wǎng)站建設的基本流程1.41.4.5網(wǎng)站的發(fā)布5.網(wǎng)站的發(fā)布網(wǎng)站的發(fā)布就是網(wǎng)頁制作完成后,將其發(fā)布到Internet上供用戶瀏覽。發(fā)布網(wǎng)站必須在Internet的Web服務器上擁有自己的存儲空間。如果擁有獨立的Web服務器,直接將制作好的網(wǎng)頁發(fā)布到Web服務器上相應的目錄中即可。網(wǎng)站建設的基本流程1.41.4.5網(wǎng)站的發(fā)布注意:如果沒有自己獨立的Web服務器,則可以在Internet上申請一個主頁空間存放網(wǎng)頁,同時申請一個域名來指向該網(wǎng)站。發(fā)布網(wǎng)站時可以直接使用Dreamweaver2021中的“發(fā)布站點”功能進行上傳。對于大型站點的發(fā)布常常使用FTP軟件進行上傳,如LeapFTP、CuteFTP等。任務說明

本節(jié)將介紹網(wǎng)站設計的幾種常用語言。1.5網(wǎng)站設計的語言本節(jié)重點講解1.5網(wǎng)站設計的語言JavaScriptHTML網(wǎng)站設計的語言1.5HTML并不是一種程序設計語言,而是一種描述文檔結構的標記語言,不需要翻譯而直接由瀏覽器解釋執(zhí)行,它的作用是通過一些標簽來告訴瀏覽器怎樣顯示標簽中的內(nèi)容。HTML中的標簽是不能擴展的。HTML文件中包括要顯示的數(shù)據(jù)和顯示的方法,其擴展名為.htm或.html。1.5.1HTML網(wǎng)站設計的語言1.5下面通過一個例子簡單了解HTML文檔的結構和作用,在電腦桌面新建名稱為“簡單的HTML例子.txt”,并在該文檔中輸入如下信息:。1.5.1HTML網(wǎng)站設計的語言1.5將“簡單的HTML例子.txt”修改為“簡單的HTML例子.html”,使用瀏覽器打開該文檔,這段程序在瀏覽器中的顯示結果如圖1-5-1所示。1.5.1HTML網(wǎng)站設計的語言1.5注意:HTML5的前身名為Web應用程序,由WHATWG于2004年提出,W3C于2007年接受,并成立了一個新的HTML工作組。第一個正式的HTML5草案于2008年1月22日發(fā)布。目前,大多數(shù)瀏覽器有一些面向HTML5的支持。2012年12月17日,W3C發(fā)布HTML5規(guī)范的正式草案,該草案凝聚了大量網(wǎng)絡工作者的心血。根據(jù)W3C的聲明,HTML5是開放網(wǎng)絡平臺的基石。1.5.1HTML網(wǎng)站設計的語言1.5注意:2013年5月6日,HTML5.1的正式草案發(fā)布。該規(guī)范定義了第五個正式版本,第一次要修訂萬維網(wǎng)的核心語言———超文本標記語言(HTML)。該版本不斷地引入新特性和新元素。2014年10月29日,W3C宣布,經(jīng)過近8年的努力,HTML5標準終于完成并發(fā)布。HTML5取代1999年建立的HTML4.01和XHTML1標準,使其能夠滿足當代互聯(lián)網(wǎng)的需要,并在互聯(lián)網(wǎng)應用程序迅速發(fā)展時豐富桌面和移動平臺之間無縫連接的內(nèi)容。HTML5也有望成為開放Web平臺的基石。例如,其可以進一步促進更深入的跨平臺Web應用程序的發(fā)展。1.5.1HTML網(wǎng)站設計的語言1.5JavaScript是一種解釋性的腳本語言,它的代碼可以直接嵌入HTML命令中。JavaScript的最大特點是可以很方便地操縱網(wǎng)頁上的元素,并通過Web瀏覽器與訪問者交互。同時,JavaScript可以捕捉客戶的操作并做出反應。JavaScript是一種跨平臺、基于對象的腳本語言。提到JavaScript腳本語言,人們可能會把它與Java語言混淆,其實JavaScript與Java是兩種完全不同的語言。1.5.2JavaScrip網(wǎng)站設計的語言1.5雖然它們的語法元素都和C++十分相似,但彼此是不同的。首先,JavaScript是Netscape公司的產(chǎn)品,而Java是Sun公司的產(chǎn)品;其次,JavaScript是一種解釋型的語言,而Java是一種編譯型的語言。在HTML基礎上,使用JavaScript可以開發(fā)交互式Web網(wǎng)頁,使網(wǎng)頁包含更多活躍的元素和更加精彩的內(nèi)容。1.5.2JavaScrip網(wǎng)站設計的語言1.5下面通過一個例子簡單了解JavaScript的結構和作用,在電腦桌面新建名稱為“簡單的JavaScript例子.txt”,并在該文檔中輸入如下代碼示例:1.5.2JavaScrip網(wǎng)站設計的語言1.5其中,“<scriptlanguage="JavaScript">”與“</script>”之間就是JavaScript的腳本代碼;“l(fā)anguage”告訴瀏覽器腳本代碼的語言類型是JavaScript;“alert()”是JavaScript語言中顯示消息框的函數(shù),其功能是彈出一個具有按鈕的對話框,并顯示“()”中的字符串,效果如圖1-5-2所示。1.5.2JavaScrip

提倡網(wǎng)絡道德,必須從我做起。作為網(wǎng)絡時代的大學生,要努力做到不瀏覽或觀看不健康的網(wǎng)站或電影,不發(fā)表不恰當?shù)难哉?嚴格遵循《中華人民共和國網(wǎng)絡安全法》和《中國互聯(lián)網(wǎng)管理條例》,善于在網(wǎng)上學習,誠實友好交流,不侮辱欺詐他人,增強自我保護意識,不隨意約會網(wǎng)友,維護網(wǎng)絡安全,不破壞網(wǎng)絡秩序,不沉溺虛擬時空。思政園地網(wǎng)站設計的語言1.5

從我們自己做起,就要求每一個網(wǎng)民:在網(wǎng)上與別人發(fā)生矛盾時,少一些沖動,多一些忍讓;少一些急躁,多一些耐心;少一些惡意猜測,多一些理解;在網(wǎng)上與別人交談時,少一些不文明的用詞,多一些暖心的話語;在網(wǎng)上看到一些言論時要理性思考,辨別真假;在發(fā)布信息的時候要三思,多在網(wǎng)上發(fā)布一些傳遞正能量的內(nèi)容。思政園地網(wǎng)站設計的語言1.5課后習題一、選擇題1.(

)協(xié)議是一組協(xié)議的總和,包含一大批軟件程序,并提供遠程登錄、遠程文件傳輸和電子郵件等網(wǎng)絡服務,是國際互聯(lián)網(wǎng)的基礎。A.HTTP

B.TCP/IP

C.FTP

D.IPX/SPX2.(

)是局域網(wǎng)的核心設備,管理著局域網(wǎng)中的各種資源,其基本功能是提供網(wǎng)絡通信服務、管理和提供網(wǎng)絡共享資源,以及進行網(wǎng)絡管理。A.交換機

B.集線器

C.瀏覽器

D.服務器3.(

)是計算機網(wǎng)絡上的位置,它使信息以網(wǎng)頁或文檔的形式提供給使用瀏覽器訪問站點的訪問者。A.網(wǎng)站

B.URL

C.服務器

D.域名課后習題一、選擇題4.Internet的域名系統(tǒng)是為方便解釋計算機的(

)地址而設立的。A.TCP

B.URL

C.IP

D.FTP5.靜態(tài)網(wǎng)頁中每個網(wǎng)頁都有一個固定的(

),且網(wǎng)頁以“.htm”和“.html”等形式為后綴。A.IP

B.URL

C.HTM

D.HTML課后習題二、填空題1.統(tǒng)一資源定位器URL包括通信協(xié)議、

、要訪問的資源文件的路徑和資源文件名等幾部分。2.根據(jù)網(wǎng)頁執(zhí)行的方式不同可以將網(wǎng)頁分為兩種類型,即

和

。3.HTML并不是一種程序設計語言,而是一種標記

語言,不需要翻譯而直接由

解釋執(zhí)行。4.JavaScript是一種腳本語言,它的代碼可以直接嵌入

中。5.HTML文件中包括了要顯示的數(shù)據(jù)和顯示的方法,其擴展名為

或

。課后習題6.靜態(tài)網(wǎng)頁是相對于而言,是指沒有

、

和

的網(wǎng)頁。網(wǎng)頁中僅包含代碼,而且頁面內(nèi)容完全包含在網(wǎng)頁的代碼中并由瀏覽器解釋執(zhí)行。7.網(wǎng)站通常是存放在一個固定的主機上的,這臺主機稱為

或

,它以

的方式進行存放和運作。為了能使用戶訪問網(wǎng)站,這臺服務器通常擁有固定的

或

。8.目前,最常用的3種動態(tài)網(wǎng)頁語言是

、

和

。課后習題三、簡答題1.靜態(tài)網(wǎng)頁有什么特點?2.典型的網(wǎng)頁布局有哪幾種類型?3.簡述網(wǎng)站建設的基本流程。4.JavaScript與Java相同嗎?如果不同,說明兩者的區(qū)別。謝謝大家！theend網(wǎng)頁版面布局和色彩搭配模塊二模塊導讀

版面布局與色彩搭配是網(wǎng)頁界面設計的重要一環(huán),版面布局的最終目的是使界面有清晰的條理性,并以鮮明的主題、融洽的整體美感吸引瀏覽者。因此布局新穎、合理,色彩搭配美觀的網(wǎng)頁能夠增強對用戶的感染力,甚至能做到使用戶過目不忘。本模塊主要介紹與網(wǎng)頁版面布局和色彩搭配的相關知識。學習目標（1）掌握網(wǎng)頁版面布局的基礎知識。（2）掌握網(wǎng)頁色彩搭配的基本方法。學習目標0102網(wǎng)頁色彩搭配網(wǎng)頁版面布局CONTENTS本章目錄任務說明

本節(jié)介紹網(wǎng)頁版面布局、網(wǎng)頁尺寸設定和構成要素,以及版面布局原則和如何根據(jù)實際需要選擇合理的網(wǎng)頁版式等方面的基礎知識。2.1網(wǎng)頁版面布局本節(jié)重點講解2.1網(wǎng)頁版面布局版面布局原則網(wǎng)頁版面布局網(wǎng)頁尺寸設定和構成要素版面布局風格網(wǎng)頁版面布局2.12.1.1版面布局概述

網(wǎng)頁的版面布局與報紙、雜志等平面媒體的版面設計有很多相似之處,就是在有限的屏幕空間中將文字、圖形、圖像、色彩、動畫、視頻等多媒體元素進行有機組合,使頁面整體的視覺效果美觀易讀,便于閱讀理解,實現(xiàn)信息傳達的最佳效果。網(wǎng)頁界面設計作為一種特殊媒介的設計,在具有平面設計一般特征的同時,還具有自身的設計特征。網(wǎng)頁版面布局應時刻圍繞“信息傳達”這一主題來進行。因此,從根本上看,它是一種以功能為主的設計。網(wǎng)頁版面布局2.12.1.1版面布局概述

(1)網(wǎng)頁版面布局以功能為主。網(wǎng)頁版面布局的功能性主要體現(xiàn)在兩方面:信息傳遞功能和審美功能。網(wǎng)頁版面布局必須充分體現(xiàn)功能性第一原則,以功能要求為設計的主要出發(fā)點,綜合考慮、整體設計,以求達到最佳效果。

(2)形象明確,易于接受。網(wǎng)頁版面布局借助界面的各種視覺形象,引導瀏覽者的興趣向一定的方向集中并產(chǎn)生聯(lián)想。因此,對網(wǎng)頁界面中視覺形象的構思要以形象明確、易于接受的原則來設計。

(3)形式簡潔。形式簡潔是網(wǎng)頁界面應具有的外在特征。這主要基于兩個方面的要求,一是加強網(wǎng)頁界面的視覺沖擊力,迅速傳遞信息的要求;二是形式美的要求。網(wǎng)頁版面布局2.12.1.2網(wǎng)頁版面的尺寸和構成要素

1.網(wǎng)頁版面的尺寸在進行網(wǎng)頁版面布局時,頁面的尺寸通常用像素(px)進行度量,并遵循如下的規(guī)律:(1)當屏幕分辨率為800px×600px時,網(wǎng)頁寬度保持在778px以內(nèi),不會出現(xiàn)水平滾動條,高度則根據(jù)版面和內(nèi)容決定。(2)當屏幕分辨率為1024px×768px時,網(wǎng)頁寬度保持在1002px以內(nèi),若要保持滿屏顯示,高度應為612~615px,不會出現(xiàn)水平滾動條和垂直滾動條。網(wǎng)頁版面布局2.12.1.2網(wǎng)頁版面的尺寸和構成要素(3)若在Photoshop中做網(wǎng)頁,并以分辨率為800px×600px顯示全屏,尺寸應為740px×560px,不會出現(xiàn)水平滾動條和垂直滾動條。(4)頁面長度原則上不超過3屏,寬度不超過1屏。(5)全尺寸Banner為468px×60px,半尺寸Banner為234px×60px小Banner為88px×31px。網(wǎng)頁版面布局2.12.1.2網(wǎng)頁版面的尺寸和構成要素將多媒體元素引入網(wǎng)頁界面可以在很大程度上增強對瀏覽者的吸引力。

2.網(wǎng)頁版面的構成要素網(wǎng)頁版面布局2.12.1.2網(wǎng)頁版面的尺寸和構成要素網(wǎng)頁作為一種新興媒體,其版面包含了更多的構成要素。除了文字、圖形和色彩以外,還有聲音、視頻圖像和動畫等多媒體元素,以及由Java、ActiveX控件等制作的特殊效果及交互功能。(1)文字。文字是網(wǎng)頁界面的主體,是用以傳達信息的主要元素。雖然利用網(wǎng)絡多媒體的影音效果也可以達到同樣的目的,但文字在網(wǎng)頁中的優(yōu)勢很難被取代。這首先是由于以文字傳達信息符合常人的接受習慣,其次是因為文字所占的存儲空間極小,利于瀏覽及下載,許多網(wǎng)頁提供純文字頁面形式以節(jié)省瀏覽者的時間和費用。網(wǎng)頁界面中的文字主要有標題、文字信息和文字鏈接。網(wǎng)頁版面布局2.12.1.2網(wǎng)頁版面的尺寸和構成要素(2)圖形。圖形在網(wǎng)頁界面中有著十分重要的作用。在網(wǎng)上瀏覽頁面時,瀏覽者常常會因為看到一幅十分引人注目的圖形而去了解相關內(nèi)容。圖形必須完全符合網(wǎng)頁的主題,并具有創(chuàng)新的構思和強烈的個性,使主題與內(nèi)容較好地統(tǒng)一,有利于信息的傳達。頁面中的圖形可以用作標題、背景、主圖和鏈接按鈕等。網(wǎng)頁版面布局2.12.1.2網(wǎng)頁版面的尺寸和構成要素(3)色彩。色彩在網(wǎng)頁界面設計中起著重要的作用。首先,彩色網(wǎng)頁比單色網(wǎng)頁更具吸引力;其次,彩色網(wǎng)頁可通過色彩傳達信息,是增強可理解性和易識別性的有效手段;再次,色彩本身具有象征作用,通過帶有主題傾向的色彩語言,可以更加有效地與瀏覽者進行情感溝通;最后,彩色網(wǎng)頁具有悅目、裝飾性強的特點,使瀏覽者愿意花更長的時間了解相關信息。網(wǎng)頁版面布局2.12.1.2網(wǎng)頁版面的尺寸和構成要素(4)多媒體。將多媒體元素引入網(wǎng)頁界面可以在很大程度上增強對瀏覽者的吸引力。從網(wǎng)頁界面的發(fā)展來看,由純文字到圖文并茂,再到引入新的多媒體元素,這是一個必然的過程。網(wǎng)頁界面中所涉及的多媒體元素主要是音頻、視頻和動畫等。網(wǎng)頁版面布局2.12.1.3網(wǎng)頁版面布局原則

網(wǎng)頁的版面布局必須遵循如下3條原則。網(wǎng)頁版面布局2.1

1.主題鮮明突出版面布局的最終目的是使網(wǎng)頁界面產(chǎn)生條理性,用悅目的組織來更好地突出主題,以達到最佳的效果,它有助于增強用戶對版面的注意,增進用戶對內(nèi)容的理解。在進行版面布局時應做到:(1)按照主從關系的順序使放大的主體形象成為視覺中心,以此來表達主題思想。(2)將文案中多種信息做整體編排設計,有助于主體形象的建立。(3)在主體形象四周增加空白量,使被強調(diào)的主體形象更加鮮明。2.1.3網(wǎng)頁版面布局原則網(wǎng)頁版面布局2.1

2.形式與內(nèi)容統(tǒng)一版面布局所追求的完美形式必須符合主題的思想內(nèi)容,這是版面布局的前提。只講完美的表現(xiàn)形式而脫離主體內(nèi)容,或者只求內(nèi)容而缺乏藝術表現(xiàn)力,版面布局都會變得空洞和刻板,也就失去了版面布局的意義。為了達到兩者統(tǒng)一,設計者首先深入領會其主題的思想精神,再融合自己的思想感情,找到一個符合兩者的完美表現(xiàn)形式,版面布局才會體現(xiàn)出它獨具的分量和特有的價值。2.1.3網(wǎng)頁版面布局原則網(wǎng)頁版面布局2.1

3.強化整體布局版面各種編排要素應在編排結構和色彩上做整體設計。如果圖片和文字少,則需要以周密的組織和定位來獲得版面的秩序。對于連頁或展開頁,不能設計完左頁再考慮右頁,否則必將造成松散、“各自為政”的狀態(tài),也就破壞了版面的整體性。2.1.3網(wǎng)頁版面布局原則網(wǎng)頁版面布局2.12.1.4網(wǎng)頁版面布局風格網(wǎng)頁版面布局風格包括文字和圖像的處理及版式類型的選擇。網(wǎng)頁版面布局2.1

1.文字的處理(1)字號、字體和行距。字號大小可以用不同的方式計算,如磅(pt)或像素(px)。建議采用磅為單位。最適合于網(wǎng)頁正文顯示的字號大小為12pt左右;對于內(nèi)容較多的頁面,通常采用9pt的字號。較大的字號可用于標題或其他需要強調(diào)的地方,小一些的字號可以用于頁腳和輔助信息。2.1.4網(wǎng)頁版面布局風格網(wǎng)頁版面布局2.1注意:字體選擇是一種感性、直觀的行為,需要依據(jù)網(wǎng)頁的總體設想和瀏覽者的需要進行選擇。①粗體字強壯有力,適合編排機械、建筑等行業(yè)的內(nèi)容。②細體字高雅細致,更適合服裝、化妝品、食品等行業(yè)的內(nèi)容。③在同一頁面中,字體種類少,版面雅致,有穩(wěn)定感;字體種類多,則版面活躍,豐富多彩。行距的變化也會對文本的可讀性產(chǎn)生很大影響。一般情況下,接近字體尺寸的行距設置比較適合正文。2.1.4網(wǎng)頁版面布局風格網(wǎng)頁版面布局2.1(2)文字的整體編排。頁面里的正文部分是由許多單個文字經(jīng)過編排組成的群體,要充分發(fā)揮這個群體形狀在版面整體布局中的作用。從藝術的角度可以將字體本身看成是一種藝術形式,它在個性和情感方面對人們有著很大影響。在網(wǎng)頁設計中,字體的處理與顏色、版式、圖形等其他設計元素的處理一樣非常關鍵。從某種意義上來講,所有的設計元素都可以理解為圖形。2.1.4網(wǎng)頁版面布局風格網(wǎng)頁版面布局2.1(3)文字的強調(diào)。①行首的強調(diào)。將正文的第一個字或字母放大并做裝飾性處理,嵌入段落的開頭,有吸引視線、裝飾和活躍版面的作用,被應用于網(wǎng)頁的文字編排中。②引文的強調(diào)。引文是提綱挈領性的文字,通常用于概括一個段落、一個章節(jié)或全文大意。引文的編排方式多種多樣,如將引文嵌入正文的左右側(cè)、上下方或中心位置等,并且可以在字體或字號上與正文相區(qū)別而產(chǎn)生變化。2.1.4網(wǎng)頁版面布局風格網(wǎng)頁版面布局2.1注意:在網(wǎng)頁設計中,設計者還可以為文字、文字鏈接、已訪問鏈接和當前活動鏈接選用各種顏色。使用不同顏色的文字可以使想要強調(diào)的部分更加引人注目。2.1.4網(wǎng)頁版面布局風格網(wǎng)頁版面布局2.1

2.圖像的設計除了文本之外,網(wǎng)頁上最重要的設計元素是圖像。一方面,圖像的應用使網(wǎng)頁更加美觀、有趣;另一方面,圖像本身也是傳達信息的重要手段之一。Web通常使用兩種圖像格式:GIF和JPEG。除此以外,還有兩種適合網(wǎng)絡傳播但沒有被廣泛應用的圖像格式:PNG和MNG。同印刷排版一樣,靜態(tài)圖像在網(wǎng)頁排版中的運用通常有幾種形式:方形圖、退底圖、出血圖以及這3種形式的結合使用。2.1.4網(wǎng)頁版面布局風格網(wǎng)頁版面布局2.1

3.版式類型的選擇網(wǎng)頁版式的基本類型主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型和自由型10種。(1)骨骼型。網(wǎng)頁版式的骨骼型是一種規(guī)范、理性的分割方法,類似于報刊的版式。常見的“骨骼”有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結合使用,既理性且有條理,又活潑而富有彈性。2.1.4網(wǎng)頁版面布局風格網(wǎng)頁版面布局2.1(2)滿版型。滿版型是指頁面以圖像充滿整版,主要以圖像為訴求點,也可將部分文字壓置于圖像之上,視覺傳達效果直觀而強烈,特點是給人以舒展、大方的感覺。(3)分割型。分割型是指把整個頁面分成上下或左右兩部分,分別安排圖片和文案。兩個部分形成對比:有圖片的部分感性而具活力,文案部分則理性而平靜。通過調(diào)整圖片和文案所占的面積來調(diào)節(jié)對比的強弱。(4)中軸型。中軸型是指沿瀏覽器窗口的中軸將圖片或文字做水平或垂直方向的排列。水平排列的頁面給人穩(wěn)定、平靜、含蓄的感覺,垂直排列的頁面給人以舒暢的感覺。2.1.4網(wǎng)頁版面布局風格網(wǎng)頁版面布局2.1(5)曲線型。曲線型是指圖片、文字在頁面上做曲線的分割或編排,產(chǎn)生韻律與節(jié)奏感。(6)傾斜型。傾斜型是指頁面主題形象或多幅圖片、文字做傾斜編排,形成不穩(wěn)定感或強烈的動感,引人注目。(7)對稱型。對稱的頁面給人穩(wěn)定、嚴謹、莊重、理性的感受。對稱分為絕對對稱和相對對稱,一般采用相對對稱的手法,避免呆板。2.1.4網(wǎng)頁版面布局風格網(wǎng)頁版面布局2.1(8)焦點型。焦點型的網(wǎng)頁版式通過對視線的誘導,使頁面具有強烈的視覺效果。焦點型分3種情況:以中心為焦點,將對比強烈的圖片或文字置于頁面的視覺中心;以向心為焦點,視覺元素引導瀏覽者視線向頁面中心聚攏,形成一個向心的版式;以離心為焦點,視覺元素引導瀏覽者視線向外輻射,形成一個離心的網(wǎng)頁版式。(9)三角型。三角型的網(wǎng)頁各視覺元素呈三角形排列,包括正三角形、倒三角形和側(cè)三角形。(10)自由型。自由型的頁面具有活潑、輕快的風格。2.1.4網(wǎng)頁版面布局風格任務說明

一個吸引瀏覽者的網(wǎng)頁必定具有良好的色彩搭配效果。優(yōu)良的色彩搭配是網(wǎng)頁制作成功不可忽視的一項。2.2網(wǎng)頁色彩搭配本節(jié)重點講解2.2網(wǎng)頁色彩搭配網(wǎng)頁中的色彩及配色色彩的基本理論網(wǎng)頁色彩搭配2.22.2.1色彩的基本理論

1.光與色彩日本的小林秀雄曾經(jīng)說過:“色彩是破碎的光。太陽光與地球相撞,四分五裂,因而形成了美麗的色彩?！边@表明物體本身是沒有色彩的,色彩是由光的刺激而產(chǎn)生的視覺效應。(1)光譜與原色光。從物理意義上講,光是電磁波的一部分,波長范圍是380~780nm,被稱為可見光。不同波長的可見光在人們的視覺中形成各種色彩。英國物理學家牛頓曾做過實驗證明紅、橙、黃、綠、青、藍、紫七色光譜是由光的色散形成的,同時驗證了光譜中的單色光聚合后就會形成白光,即太陽光是由單色光混合而成的。網(wǎng)頁色彩搭配2.22.2.1色彩的基本理論(2)物理色與固有色。①物理色。物體本身雖然沒有色彩,但它能夠通過對不同波長色光的吸收、反射、遠視,反映出某種色彩的面貌,這就是物理色。人們?nèi)粘Ｋ姷降姆前l(fā)光物體會呈現(xiàn)出不同的顏色,這是由物體表面和投照光兩個因素決定的。例如,在白色日光的照射下,白色表面幾乎反射全部光線,黑色表面幾乎吸收全部光線,因此會呈現(xiàn)出黑白不同的物理色。網(wǎng)頁色彩搭配2.22.2.1色彩的基本理論②固有色。固有色通常是指物體在正常的白色日光下所呈現(xiàn)的色彩,由于它最具有普遍性,在人們的知覺中便形成了對某種物體色彩形象的概念。固有色是一種相對的色彩概念,即使是日光也是不斷變化的。任何物體的色彩不僅受到投照光的影響,還會受到周圍環(huán)境中各種反射光的影響,所以人們通?？吹降纳识际俏锢砩?。網(wǎng)頁色彩搭配2.22.2.1色彩的基本理論注意:固有色的作用主要體現(xiàn)在它強烈的象征意義和現(xiàn)實性的表現(xiàn)價值上。當設計作品中的色彩以固有色存在時,往往給人以現(xiàn)實主義的印象,而固有色被抽象出來使用時,則具有象征的含義。網(wǎng)頁色彩搭配2.22.2.1色彩的基本理論(3)色彩的種類?？陀^世界中成千上萬的色彩,歸納起來只有兩個范疇,即無彩色系和有彩色系。當投照光、反射光與透過光在視知覺中并未顯示某種單色光的特征時,看到的就是無彩色。無彩色系包括黑、白和各種明度的灰,也被稱為中性色。除無彩色系以外的所有色彩,無論其灰艷、明暗程度如何,均屬于有彩色系。無彩色從物理光學角度來講,并未包括在可視光譜中,但在心理效應上無彩色具有完整的色彩性質(zhì),與有彩色同樣具有重要的意義。因此,無彩色屬于色彩體系的一部分。網(wǎng)頁色彩搭配2.22.2.1色彩的基本理論

2.色彩的要素視覺所感知的一切色彩現(xiàn)象都具有其基本的構成要素。對于有彩色系,任何一種顏色都包含3個基本要素,即明度、色相和純度;而無彩色系則只具有明度要素。(1)明度。明度指的是顏色的明暗或深淺程度,即顏色的相對色調(diào)或明亮程度,通常也被稱為“亮度”“光度”。明度是一切色彩現(xiàn)象都具有的通性,有較強的獨立性,它可以不帶任何色相的特征而通過黑、白、灰單獨呈現(xiàn)出來。而有彩色系的另外兩個要素色相與純度都必須依賴一定的明暗關系才能顯現(xiàn),色彩一旦發(fā)生,明暗關系必然同時出現(xiàn)。網(wǎng)頁色彩搭配2.22.2.1色彩的基本理論明度的產(chǎn)生有以下3種情況。①同一色彩因光源的投射角度不同造成明度強弱的差異。②同一色相因混合不同比例的黑、白、灰而形成截然不同的明度變化。③在同等光源下,不同色相間的明度差異。(2)色相。色相指的是色彩的相貌,具體體現(xiàn)為各種色彩,也稱“色度”。在可見光譜中,人的視覺能夠感受到紅、橙、黃、綠、青、藍、紫這些不同特征的色彩,這些可以相互區(qū)別的色彩就稱為色相。由于色彩具有這種具體相貌的特征,人們才得以感受到五彩繽紛的客觀世界。網(wǎng)頁色彩搭配2.22.2.1色彩的基本理論(3)純度。純度指色彩的純粹程度,又稱“彩度”“飽和度”“艷度”。在光學上,它取決于色彩波長的單一程度,光波波長越單純,則色彩越鮮明。人的視覺能辨認出的有色相感的色彩,都具有一定程度的純度。不同的色相明度不同,純度也不相同。網(wǎng)頁色彩搭配2.22.2.1色彩的基本理論3.色彩空間色彩空間又稱“色彩模型”,是一種以概念和數(shù)字來科學地描述色彩的方法。根據(jù)應用范圍及標準的不同,色彩科學家定義了多種多樣的色彩空間,下面介紹常用的兩個色彩空間。(1)RGB色彩空間。RGB色彩空間也稱加色空間,指由色光混合而形成的色彩空間。RGB指的是色光中的三原色,即紅、綠、藍,由此三種色光混合即可得到任何顏色的色光。網(wǎng)頁色彩搭配2.22.2.1色彩的基本理論RGB色光的混合被稱為“加色混合”或“加光混合”。計算機的顯示設備和輸入設備采用的就是RGB色彩空間的加色混合原理。(2)CMYK色彩空間。CMYK色彩空間稱“減色空間”,指由色料混合而形成的色彩空間。色料的三原色為品紅、黃和湖藍(青),由此三種色料任意組合即可產(chǎn)生其他色彩。CMYK色彩空間就是依據(jù)減色混合的原理創(chuàng)建的,它是電子出版領域中廣泛使用的色彩語言。CMYK指的是cyan(青)、magenta(品紅)、yellow(黃)和black(黑)網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色

1.網(wǎng)頁色彩的作用任何網(wǎng)頁界面設計都離不開色彩的使用,色彩是網(wǎng)頁界面設計中最基本的元素,在網(wǎng)頁設計中起著至關重要的作用。(1)視覺區(qū)域劃分。網(wǎng)頁界面的首要功能是傳遞信息,色彩正是創(chuàng)造有序的視覺信息流程的重要元素。網(wǎng)頁界面中利用色彩分布,可以將不同類型的信息分類排布,并利用各種色彩帶給人的不同心理效果,很好地區(qū)分出主次順序,從而形成有序的視覺流程。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色(2)突出主題。網(wǎng)頁界面?zhèn)鬟f的信息內(nèi)容與傳遞方式應該是相互統(tǒng)一的,這是設計作品成功的必要條件。網(wǎng)頁界面中不同的內(nèi)容需要有不同的色彩來表現(xiàn)。利用不同色彩自身的表現(xiàn)力、情感效應以及審美心理感受,可以使網(wǎng)頁的內(nèi)容與形式有機地結合起來,以色彩的內(nèi)在力量來烘托主題。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色(3)吸引視線。由于色彩設計的特殊性能,越來越多的網(wǎng)頁界面設計人員認識到,好的色彩設計對于網(wǎng)站的生存起著至關重要的作用。因此,網(wǎng)頁設計人員利用色彩的力量,不斷設計出各式各樣悅目的界面。網(wǎng)頁界面中的色彩應用,或含蓄優(yōu)雅,或動感強烈,或時尚新穎,或單純有力,無論哪種形式都是為了一個明確的目標,即引起更多瀏覽者的關注。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色(4)增強藝術性。色彩既是視覺信息傳達的方式,又是藝術設計的語言。色彩設計對界面設計作品的藝術品位起著舉足輕重的作用,不僅在視覺上,而且在心理作用和象征作用中都可以得到充分的體現(xiàn)。以色彩的科學知識為基礎,進而從美學的角度去探討色彩設計的表現(xiàn)形式,可以大大增強網(wǎng)頁界面設計作品的藝術性,創(chuàng)造出更加富有審美情趣的作品。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色

2.網(wǎng)頁配色原則計算機是通過數(shù)字信息來處理顏色的,所以計算機在屏幕上顯示顏色的能力是有限的,這也和計算機的顯卡、顯示器等硬件配置有很大的關系。網(wǎng)頁設計者在本地高性能的計算機上設計出來的頁面,在瀏覽者訪問時受到客戶端硬件配置性能的制約,未必能夠準確體現(xiàn)出原有的風貌。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色(1)安全調(diào)色板。安全調(diào)色板就是包含216種RGB色的調(diào)色板,這216種RGB色在各種瀏覽器、操作平臺、分辨率和顯示器條件下都保持不變,這是因為Microsoft公司在開發(fā)計算機操作系統(tǒng)時,在計算機原有的256種RGB色中保留了40種作為系統(tǒng)使用的顏色。由于絕大多數(shù)訪問者使用的都是PC,所以這種情況所造成的約束相當普遍。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色(1)安全調(diào)色板。安全調(diào)色板就是包含216種RGB色的調(diào)色板,這216種RGB色在各種瀏覽器、操作平臺、分辨率和顯示器條件下都保持不變,這是因為Microsoft公司在開發(fā)計算機操作系統(tǒng)時,在計算機原有的256種RGB色中保留了40種作為系統(tǒng)使用的顏色。由于絕大多數(shù)訪問者使用的都是PC,所以這種情況所造成的約束相當普遍。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色注意:如果采用了安全調(diào)色板以外的顏色,頁面?zhèn)鬏數(shù)竭h端時,由于瀏覽器不能顯示所有的顏色,因而模擬那些在顏色有限的調(diào)色板中不能顯示出來的顏色,從而產(chǎn)生“抖動”。在視覺上,鄰近的像素傾向于混合。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色(2)HTML語言中的顏色值。在HTML中顏色表示的方法有3種。①使用6位十六進制的整數(shù)來表示。例如,bgcolor=#ff0000,其中#用于對顏色代碼的聲明,前兩位ff表示三原色中的紅色,取值范圍是十六進制的00~ff,中間兩位表示三原色中的綠色,最后兩位表示藍色。00表示沒有顏色,ff表示顏色最強。所以#000000表示黑色,#ffffff表示白色,#ff0000表示紅色,#00ff00表示綠色,#0000ff表示藍色。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色②使用RGB(R,G,B)來表示。圓括號“()”中的R、G、B分別用0~255的十進制數(shù)或百分比表示紅、綠、藍。例如,RGB(255,0,0)或RGB(100%,0%,0%)都表示紅色。③使用顏色的關鍵字來表示。關鍵字共16個,見表2-2-1（表見下一頁）。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色同一種顏色,如紅色,在HTML中可以采用如下3種方法表示。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色(3)網(wǎng)頁配色技巧。由于大多數(shù)網(wǎng)頁設計者沒有美術功底,因此網(wǎng)頁的色彩搭配對于網(wǎng)頁設計者尤其是初學者來說是個麻煩的問題。網(wǎng)頁色彩的運用要達到獨創(chuàng)的效果,就必須對色彩進行合理的配置,把握住色調(diào)的比重,否則就會喧賓奪主。在進行網(wǎng)頁配色時可以遵循以下技巧。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色①用一種色彩(同類色的應用),即使用色彩變淡或加深產(chǎn)生一系列的色彩。②用兩種色彩,即在選用兩種顏色的時候,可選用黑白搭配方案,另外灰色是萬能色,可以和任何色彩搭配。③用一個色系,即使用一種感覺的色彩,如淡藍、淡黃、淡綠,或者土黃、土灰、土藍等。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色注意:在網(wǎng)頁配色中還要避免一些誤區(qū)。一是不要在一個網(wǎng)頁中使用過多的顏色,否則會給瀏覽者以雜亂的感覺。二是背景色和前景色的對比要大,以便突出主要文字內(nèi)容。課后習題一、填空題1.RGB色彩空間又稱為

,其中包括紅色、

和藍色3種原色。2.網(wǎng)頁版式設計以功能為主,其功能性主要體現(xiàn)在

和審美功能。3.網(wǎng)頁的版面布局必須遵循如下3條原則:

、

和

。4..對于有彩色系,任何一種顏色都包含3個基本要素,即

、

、

;而無彩色系則只具有

要素。5.明度指的是顏色的明暗或深淺程度,即顏色的相對色調(diào)或明亮程度,通常也被稱為

。課后習題6.RGB色彩空間也稱

,指由

形成的色彩空間。RGB指的是色光中的三原色,即

、

、

,由此3種色光混合即可得到任何顏色的色光。當3個原色光以一定比例混合時,可以產(chǎn)生

系的白光或灰色光。7.安全調(diào)色板就是包含

種RGB色的調(diào)色板。8.在HTML中,RGB色彩空間中blue的十六進制表示為

。9.在HTML中顏色表示的方法有3種,分別是

、

和

。課后習題二、簡答題1.簡述網(wǎng)頁的版面布局的概念。2.網(wǎng)頁版面布局的功能性主要體現(xiàn)在哪幾個方面?3.網(wǎng)頁界面的構成要素有哪些?這些要素各自的作用是什么？4.在設置網(wǎng)頁版面尺寸時應該遵循何種規(guī)律?5.網(wǎng)頁的版式設計必須遵循何種原則?6.簡述網(wǎng)頁配色的基本技巧。謝謝大家！theendDreamweaver2021模塊三模塊導讀

由于網(wǎng)絡的飛速發(fā)展,Internet已經(jīng)涉及人們生活、工作和學習的各個領域,越來越多的人希望擁有自己的網(wǎng)絡主頁。Dreamweaver2021是一款集網(wǎng)頁制作與網(wǎng)站管理于一體的網(wǎng)頁編輯軟件,它憑借強大的功能和友好的操作界面受到廣大網(wǎng)頁設計者的歡迎,已經(jīng)成為業(yè)內(nèi)網(wǎng)頁設計與制作的首選專業(yè)工具。學習目標（1）了解Dreamweaver2021。（2）掌握安裝與啟動Dreamweaver2021的步驟。（3）掌握利用Dreamweaver2021創(chuàng)建網(wǎng)頁的方法。（4）掌握利用Dreamweaver2021創(chuàng)建、管理本地站點的方法。學習目標0102創(chuàng)建并保存簡單的HTML文檔Dreamweaver2021概述03創(chuàng)建和管理站點CONTENTS本章目錄任務說明

Dreamweaver2021是一款所見即所得型的優(yōu)秀軟件,能夠創(chuàng)建并管理用戶網(wǎng)站,下面進行詳細介紹。3.1Dreamweaver2021概述本節(jié)重點講解3.1Dreamweaver2021概述Dreamweaver2021的工作界面Dreamweaver2021的主要功能Dreamweaver2021的安裝與啟動Dreamweaver2021概述3.13.1.1Dreamweaver2021的主要功能Dreamweaver2021是Dreamweaver的最新版本,它沿襲了以前版本的各種優(yōu)點,同時在功能上也做了相當大的改進,功能更加強大,易用性更強。它不僅具有同類軟件的所有功能,還擁有許多出色的設計理念,例如,包含行為、CSS樣式和資源等。Dreamweaver2021的優(yōu)勢在于它不僅是優(yōu)秀的所見即所得型網(wǎng)頁制作軟件,同時兼顧了HTML源代碼編輯,可以讓用戶方便地在兩種模式之間切換,再配合Fireworks或Photoshop等多媒體設計軟件,可以制作出視覺效果美觀的網(wǎng)