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

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

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

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

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

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

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

一、

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

Internet

Corporation

for

Assigned

Namesand

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

2.域名

一、

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

2.域名

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

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

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

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

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

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

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

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

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

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

ASF具有本地或網(wǎng)絡(luò)回放、可擴(kuò)充的媒體類型、部件下載、可伸縮的媒體類型、流的優(yōu)先級化、多語言支持、環(huán)境獨(dú)立性、豐富的流間關(guān)系以及擴(kuò)展性等特點(diǎn)。(7)WMV(擴(kuò)展名為.wmv)是ASF格式的升級和延伸。在同等視頻質(zhì)量下,WMV格式的體積非常小,因此很適合在網(wǎng)上播放和傳輸。認(rèn)識網(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,超文本標(biāo)記語言)代碼,而且頁面內(nèi)容完全包含在網(wǎng)頁的代碼中并由瀏覽器解釋執(zhí)行。靜態(tài)網(wǎng)頁可以是以.htm、.html、.shtml等為后綴的文本文件認(rèn)識網(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)站服務(wù)器上,無論是否有用戶訪問,每個靜態(tài)網(wǎng)頁的內(nèi)容都是保存在網(wǎng)站服務(wù)器上的,也就是說,靜態(tài)網(wǎng)頁是實(shí)際保存在服務(wù)器上的文件,每個網(wǎng)頁都是一個獨(dú)立的文件。(3)靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定,因此容易被搜索引擎檢索。認(rèn)識網(wǎng)頁1.21.2.1網(wǎng)頁的定義(4)靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持,在網(wǎng)站制作和維護(hù)方面工作量較大,因此當(dāng)網(wǎng)站信息量很大時完全依靠靜態(tài)網(wǎng)頁制作方式比較困難。(5)靜態(tài)網(wǎng)頁的交互性較差,在功能方面有較大的局限性。認(rèn)識網(wǎng)頁1.21.2.2網(wǎng)頁類型

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

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

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

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

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

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

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

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

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

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

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

B.TCP/IP

C.FTP

D.IPX/SPX2.(

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

B.集線器

C.瀏覽器

D.服務(wù)器3.(

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

B.URL

C.服務(wù)器

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

)地址而設(shè)立的。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課后習(xí)題二、填空題1.統(tǒng)一資源定位器URL包括通信協(xié)議、

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

和

。3.HTML并不是一種程序設(shè)計語言,而是一種標(biāo)記

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

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

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

或

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

、

和

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

或

,它以

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

或

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

、

和

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

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

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

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

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

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

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

1.網(wǎng)頁版面的尺寸在進(jìn)行網(wǎng)頁版面布局時,頁面的尺寸通常用像素(px)進(jìn)行度量,并遵循如下的規(guī)律:(1)當(dāng)屏幕分辨率為800px×600px時,網(wǎng)頁寬度保持在778px以內(nèi),不會出現(xiàn)水平滾動條,高度則根據(jù)版面和內(nèi)容決定。(2)當(dāng)屏幕分辨率為1024px×768px時,網(wǎng)頁寬度保持在1002px以內(nèi),若要保持滿屏顯示,高度應(yīng)為612~615px,不會出現(xiàn)水平滾動條和垂直滾動條。網(wǎng)頁版面布局2.12.1.2網(wǎng)頁版面的尺寸和構(gòu)成要素(3)若在Photoshop中做網(wǎng)頁,并以分辨率為800px×600px顯示全屏,尺寸應(yīng)為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)頁版面的尺寸和構(gòu)成要素將多媒體元素引入網(wǎng)頁界面可以在很大程度上增強(qiáng)對瀏覽者的吸引力。

2.網(wǎng)頁版面的構(gòu)成要素網(wǎng)頁版面布局2.12.1.2網(wǎng)頁版面的尺寸和構(gòu)成要素網(wǎng)頁作為一種新興媒體,其版面包含了更多的構(gòu)成要素。除了文字、圖形和色彩以外,還有聲音、視頻圖像和動畫等多媒體元素,以及由Java、ActiveX控件等制作的特殊效果及交互功能。(1)文字。文字是網(wǎng)頁界面的主體,是用以傳達(dá)信息的主要元素。雖然利用網(wǎng)絡(luò)多媒體的影音效果也可以達(dá)到同樣的目的,但文字在網(wǎng)頁中的優(yōu)勢很難被取代。這首先是由于以文字傳達(dá)信息符合常人的接受習(xí)慣,其次是因?yàn)槲淖炙嫉拇鎯臻g極小,利于瀏覽及下載,許多網(wǎng)頁提供純文字頁面形式以節(jié)省瀏覽者的時間和費(fèi)用。網(wǎng)頁界面中的文字主要有標(biāo)題、文字信息和文字鏈接。網(wǎng)頁版面布局2.12.1.2網(wǎng)頁版面的尺寸和構(gòu)成要素(2)圖形。圖形在網(wǎng)頁界面中有著十分重要的作用。在網(wǎng)上瀏覽頁面時,瀏覽者常常會因?yàn)榭吹揭环忠俗⒛康膱D形而去了解相關(guān)內(nèi)容。圖形必須完全符合網(wǎng)頁的主題,并具有創(chuàng)新的構(gòu)思和強(qiáng)烈的個性,使主題與內(nèi)容較好地統(tǒng)一,有利于信息的傳達(dá)。頁面中的圖形可以用作標(biāo)題、背景、主圖和鏈接按鈕等。網(wǎng)頁版面布局2.12.1.2網(wǎng)頁版面的尺寸和構(gòu)成要素(3)色彩。色彩在網(wǎng)頁界面設(shè)計中起著重要的作用。首先,彩色網(wǎng)頁比單色網(wǎng)頁更具吸引力;其次,彩色網(wǎng)頁可通過色彩傳達(dá)信息,是增強(qiáng)可理解性和易識別性的有效手段;再次,色彩本身具有象征作用,通過帶有主題傾向的色彩語言,可以更加有效地與瀏覽者進(jìn)行情感溝通;最后,彩色網(wǎng)頁具有悅目、裝飾性強(qiáng)的特點(diǎn),使瀏覽者愿意花更長的時間了解相關(guān)信息。網(wǎng)頁版面布局2.12.1.2網(wǎng)頁版面的尺寸和構(gòu)成要素(4)多媒體。將多媒體元素引入網(wǎng)頁界面可以在很大程度上增強(qiá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)生條理性,用悅目的組織來更好地突出主題,以達(dá)到最佳的效果,它有助于增強(qiáng)用戶對版面的注意,增進(jìn)用戶對內(nèi)容的理解。在進(jìn)行版面布局時應(yīng)做到:(1)按照主從關(guān)系的順序使放大的主體形象成為視覺中心,以此來表達(dá)主題思想。(2)將文案中多種信息做整體編排設(shè)計,有助于主體形象的建立。(3)在主體形象四周增加空白量,使被強(qiáng)調(diào)的主體形象更加鮮明。2.1.3網(wǎng)頁版面布局原則網(wǎng)頁版面布局2.1

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

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

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

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

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

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

1.光與色彩日本的小林秀雄曾經(jīng)說過:“色彩是破碎的光。太陽光與地球相撞,四分五裂,因而形成了美麗的色彩?！边@表明物體本身是沒有色彩的,色彩是由光的刺激而產(chǎn)生的視覺效應(yīng)。(1)光譜與原色光。從物理意義上講,光是電磁波的一部分,波長范圍是380~780nm,被稱為可見光。不同波長的可見光在人們的視覺中形成各種色彩。英國物理學(xué)家牛頓曾做過實(shí)驗(yàn)證明紅、橙、黃、綠、青、藍(lán)、紫七色光譜是由光的色散形成的,同時驗(yàn)證了光譜中的單色光聚合后就會形成白光,即太陽光是由單色光混合而成的。網(wǎng)頁色彩搭配2.22.2.1色彩的基本理論(2)物理色與固有色。①物理色。物體本身雖然沒有色彩,但它能夠通過對不同波長色光的吸收、反射、遠(yuǎn)視,反映出某種色彩的面貌,這就是物理色。人們?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)在它強(qiáng)烈的象征意義和現(xiàn)實(shí)性的表現(xiàn)價值上。當(dāng)設(shè)計作品中的色彩以固有色存在時,往往給人以現(xiàn)實(shí)主義的印象,而固有色被抽象出來使用時,則具有象征的含義。網(wǎng)頁色彩搭配2.22.2.1色彩的基本理論(3)色彩的種類。客觀世界中成千上萬的色彩,歸納起來只有兩個范疇,即無彩色系和有彩色系。當(dāng)投照光、反射光與透過光在視知覺中并未顯示某種單色光的特征時,看到的就是無彩色。無彩色系包括黑、白和各種明度的灰,也被稱為中性色。除無彩色系以外的所有色彩,無論其灰艷、明暗程度如何,均屬于有彩色系。無彩色從物理光學(xué)角度來講,并未包括在可視光譜中,但在心理效應(yīng)上無彩色具有完整的色彩性質(zhì),與有彩色同樣具有重要的意義。因此,無彩色屬于色彩體系的一部分。網(wǎng)頁色彩搭配2.22.2.1色彩的基本理論

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

1.網(wǎng)頁色彩的作用任何網(wǎng)頁界面設(shè)計都離不開色彩的使用,色彩是網(wǎng)頁界面設(shè)計中最基本的元素,在網(wǎng)頁設(shè)計中起著至關(guān)重要的作用。(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)容與傳遞方式應(yīng)該是相互統(tǒng)一的,這是設(shè)計作品成功的必要條件。網(wǎng)頁界面中不同的內(nèi)容需要有不同的色彩來表現(xiàn)。利用不同色彩自身的表現(xiàn)力、情感效應(yīng)以及審美心理感受,可以使網(wǎng)頁的內(nèi)容與形式有機(jī)地結(jié)合起來,以色彩的內(nèi)在力量來烘托主題。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色(3)吸引視線。由于色彩設(shè)計的特殊性能,越來越多的網(wǎng)頁界面設(shè)計人員認(rèn)識到,好的色彩設(shè)計對于網(wǎng)站的生存起著至關(guān)重要的作用。因此,網(wǎng)頁設(shè)計人員利用色彩的力量,不斷設(shè)計出各式各樣悅目的界面。網(wǎng)頁界面中的色彩應(yīng)用,或含蓄優(yōu)雅,或動感強(qiáng)烈,或時尚新穎,或單純有力,無論哪種形式都是為了一個明確的目標(biāo),即引起更多瀏覽者的關(guān)注。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色(4)增強(qiáng)藝術(shù)性。色彩既是視覺信息傳達(dá)的方式,又是藝術(shù)設(shè)計的語言。色彩設(shè)計對界面設(shè)計作品的藝術(shù)品位起著舉足輕重的作用,不僅在視覺上,而且在心理作用和象征作用中都可以得到充分的體現(xiàn)。以色彩的科學(xué)知識為基礎(chǔ),進(jìn)而從美學(xué)的角度去探討色彩設(shè)計的表現(xiàn)形式,可以大大增強(qiáng)網(wǎng)頁界面設(shè)計作品的藝術(shù)性,創(chuàng)造出更加富有審美情趣的作品。網(wǎng)頁色彩搭配2.22.2.2網(wǎng)頁中的色彩及配色

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

,其中包括紅色、

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

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

、

和

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

、

、

;而無彩色系則只具有

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

。課后習(xí)題6.RGB色彩空間也稱

,指由

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

、

、

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

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

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

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

、

和

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

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

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