《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)課件.ppt_第1頁
《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)課件.ppt_第2頁
《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)課件.ppt_第3頁
《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)課件.ppt_第4頁
《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)課件.ppt_第5頁
已閱讀5頁,還剩27頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ),1.什么是網(wǎng)頁?,瀏覽Web時(shí)所看到的文件稱為Web頁,又稱為網(wǎng)頁。網(wǎng)頁可以將不同類型的多媒體信息(包括文字、圖像、動(dòng)畫、聲音、視頻等)組合在一個(gè)文檔中。由于這些文檔是用超文本標(biāo)記語言表示的,其文件名一般是以.html或.htm結(jié)尾,因此又稱為HTML文檔或超文本。,2.什么是主頁?,當(dāng)我們?yōu)g覽網(wǎng)站時(shí)看到的第一個(gè)頁面。它是整個(gè)站點(diǎn)的入口和門面,通常這樣命名:index.html。,3.什么是超文本?,包含文字、圖像、視頻、聲音等媒體的文本,網(wǎng)頁就是一個(gè)超文本文件,并且可以實(shí)現(xiàn)鏈接操作。 超文本可以給瀏覽者帶來視覺和聽覺的享受,所以Web技術(shù)又稱為超媒體技術(shù)。,注意,

2、在網(wǎng)頁上點(diǎn)擊鼠標(biāo)右鍵,選擇“查看源文件”,就能很清楚地看到網(wǎng)頁的代碼結(jié)構(gòu)。用戶可以使用記事本對網(wǎng)頁中的文字、圖片、表格、多媒體等頁面內(nèi)容進(jìn)行編輯,并通過標(biāo)記語言HTML對這些元素進(jìn)行描述和控制,最后由瀏覽器對這些標(biāo)記進(jìn)行解釋并生成最終呈現(xiàn)在用戶眼前豐富多彩的網(wǎng)頁。,4.什么是網(wǎng)站?,根據(jù)提供服務(wù)的不同,通常把提供網(wǎng)頁服務(wù)的服務(wù)器稱為Web服務(wù)器,相關(guān)網(wǎng)站稱為Web站點(diǎn)。一個(gè)Web站點(diǎn)由一個(gè)或多個(gè)Web頁組成,這些Web頁相互連接在一起,存放在Web服務(wù)器上,以供瀏覽者訪問。 網(wǎng)站是提供各種信息和服務(wù)的基地,如用戶熟悉的搜狐、新浪、雅虎等。網(wǎng)站是由很多網(wǎng)頁鏈接在一起組成的。用戶瀏覽到一個(gè)網(wǎng)站時(shí)看

3、到的第一個(gè)頁面叫做主頁。從主頁出發(fā),可以訪問到本網(wǎng)站的每一個(gè)頁面,也可以鏈接到其他網(wǎng)站,方便地共享網(wǎng)站資源。,注意,網(wǎng)站由若干網(wǎng)頁組合而成。實(shí)質(zhì)上就是一個(gè)文件夾,用來存放站點(diǎn)相關(guān)信息資源的文件夾。,5.網(wǎng)頁基本元素有哪些?都有什么作用?設(shè)計(jì)的時(shí)候要注意什么?,網(wǎng)頁包括的主要元素有:文本、圖像、動(dòng)畫、導(dǎo)航欄、超鏈接、表格、表單等。,文本是人類最重要的信息載體和交流工具,網(wǎng)頁的主體一般以文本為主。制作網(wǎng)頁時(shí),可以根據(jù)需要設(shè)置文本的字體、字號(hào)、顏色、樣式等屬性,風(fēng)格獨(dú)特的網(wǎng)頁文本設(shè)置會(huì)給瀏覽者賞心悅目的感覺。 提示:在網(wǎng)頁中應(yīng)用了某種字體樣式后,如果瀏覽者的計(jì)算機(jī)中沒有安裝該種樣式的字體,字體就以計(jì)

4、算機(jī)系統(tǒng)默認(rèn)的字體顯示出來,此時(shí)就無法顯示出網(wǎng)頁的效果了。,圖像在網(wǎng)頁中可以起到提供信息、展示作品、美化網(wǎng)頁以及體現(xiàn)風(fēng)格等功效。圖像可以用作網(wǎng)頁的標(biāo)題、網(wǎng)站Logo、網(wǎng)頁背景、鏈接按鈕、導(dǎo)航欄、網(wǎng)頁主圖等。圖像給人的視覺效果要比文字強(qiáng)烈得多,在網(wǎng)頁中靈活應(yīng)用圖像可以起到點(diǎn)綴的效果。雖然圖像在網(wǎng)頁中不可或缺,但也不能太多,因?yàn)閳D像的下載速度較慢,而且網(wǎng)頁上如果放置了過多的圖片,會(huì)顯得很亂,有喧賓奪主之勢。 網(wǎng)頁上的圖像文件大部分都是使用JPG和GIF格式,因?yàn)?,它們除了具有壓縮比例高外,還具有跨平臺(tái)特性。,動(dòng)畫是網(wǎng)頁上最活躍的元素,通常制作優(yōu)秀、創(chuàng)意出眾的動(dòng)畫是吸引瀏覽者的最有效的方法。如果網(wǎng)頁

5、中存有太多的動(dòng)畫,會(huì)使瀏覽者眼花繚亂,無心細(xì)看。所以,對動(dòng)畫制作的要求越來越高。在網(wǎng)頁中加入的動(dòng)畫一般是GIF格式的動(dòng)畫和Flash(.swf)動(dòng)畫等。,導(dǎo)航欄是網(wǎng)站設(shè)計(jì)者在規(guī)劃網(wǎng)站結(jié)構(gòu)時(shí)必須考慮的一個(gè)問題,站點(diǎn)的每個(gè)網(wǎng)頁上均應(yīng)設(shè)置導(dǎo)航欄,并且應(yīng)將其放置在網(wǎng)頁中比較明顯的位置。設(shè)置導(dǎo)航欄的目的是使瀏覽者能夠順利地瀏覽網(wǎng)頁,方便地返回主頁或繼續(xù)下一頁的訪問。導(dǎo)航欄可以是文本、按鈕或圖像的樣式。,超鏈接是網(wǎng)頁中最為有用的功能之一。超鏈接是從一個(gè)網(wǎng)頁指向另一個(gè)網(wǎng)頁的鏈接,該鏈接既可以指向本地網(wǎng)站的另一個(gè)網(wǎng)頁,也可以指向世界各地的其他網(wǎng)頁。 無論是文本還是圖像都可以加上超鏈接標(biāo)記,當(dāng)鼠標(biāo)指上超鏈接對象

6、時(shí)會(huì)變成小手形狀,單擊鼠標(biāo)左鍵即可鏈接到相應(yīng)地址(URL)的網(wǎng)頁。超鏈接包括站內(nèi)鏈接和站外鏈接。 站內(nèi)鏈接:若網(wǎng)站規(guī)劃了多個(gè)主題版塊,需要給網(wǎng)站的首頁加入超鏈接,讓瀏覽者可以快速地轉(zhuǎn)到感興趣的頁面。在各個(gè)子頁面也要有超級(jí)鏈接,并設(shè)有能夠回到主頁的鏈接。 站外鏈接:在個(gè)人網(wǎng)站上放置一些與網(wǎng)站主題有關(guān)的對外鏈接,不但可以把好的網(wǎng)站介紹給瀏覽者,而且能使瀏覽者樂意再度光臨該網(wǎng)站。(友情鏈接),表格是網(wǎng)頁中的一種用于控制網(wǎng)頁頁面布局的有效方法。為了達(dá)到理想的視覺效果,通常不顯示表格的邊框。使用表格輔助布局,可以實(shí)現(xiàn)網(wǎng)頁橫豎分明的風(fēng)格。 表單是一種特殊的網(wǎng)頁元素,通常用于收集信息或?qū)崿F(xiàn)一些交互式的效果。

7、表單的主要功能是接收瀏覽者在瀏覽器的輸入信息,然后將這些信息發(fā)送到服務(wù)器端。,6.動(dòng)態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁的區(qū)別,在網(wǎng)站設(shè)計(jì)中,純粹HTML格式的網(wǎng)頁通常稱為“靜態(tài)網(wǎng)頁”,它運(yùn)行于客戶端,以.htm、.html、.shtml和.xml等為擴(kuò)展名。靜態(tài)網(wǎng)頁的內(nèi)容僅僅是標(biāo)準(zhǔn)的HTML代碼,靜態(tài)網(wǎng)頁上也可以出現(xiàn)各種動(dòng)態(tài)效果,如GIF格式的動(dòng)畫、Flash動(dòng)畫等,這些“動(dòng)態(tài)效果”只是視覺上的,與下面將要介紹的動(dòng)態(tài)網(wǎng)頁是不同的概念。,采用了動(dòng)態(tài)網(wǎng)頁技術(shù),在服務(wù)器端運(yùn)行的網(wǎng)頁和程序?qū)儆趧?dòng)態(tài)網(wǎng)頁,它們會(huì)根據(jù)編寫的程序訪問數(shù)據(jù)庫動(dòng)態(tài)地生成頁面。動(dòng)態(tài)網(wǎng)頁文件的后綴一般都是.asp、.aspx、.php、.jsp。動(dòng)態(tài)

8、網(wǎng)頁的優(yōu)點(diǎn)是效率高、更新快、移植性強(qiáng),可以根據(jù)先前所制定好的程序頁面,根據(jù)用戶的不同請求返回其相應(yīng)的數(shù)據(jù),從而達(dá)到資源的最大利用和節(jié)省服務(wù)器上的物理資源。,動(dòng)態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁不是從視覺上區(qū)分的,比如動(dòng)畫效果,網(wǎng)頁中包含可以動(dòng)的元素并不意味著就是動(dòng)態(tài)網(wǎng)頁,靜態(tài)網(wǎng)頁也可以有動(dòng)畫。 請自行閱讀課本中它們各自的特點(diǎn),7.常用的網(wǎng)頁設(shè)計(jì)軟件有哪些?,FrontPage Dreamweaver,8.網(wǎng)頁圖像與網(wǎng)頁動(dòng)畫制作軟件,Photoshop Fireworks(.gif) Flash(.swf),9.HTML的基本結(jié)構(gòu),9.HTML的基本結(jié)構(gòu),:告訴瀏覽器HTML文檔開始和結(jié)束的位置,其中包括head

9、部分和body部分。HTML文檔中所有的內(nèi)容都應(yīng)該在這兩個(gè)標(biāo)記之間,一個(gè)HTML文檔總是以開始,以結(jié)束。,:HTML文件的頭部標(biāo)記,頭部主要提供文檔的描述信息,head部分的所有內(nèi)容都不會(huì)顯示在瀏覽器窗口中,在其中可以放置頁面的標(biāo)題以及頁面的類型、使用的字符集、鏈接的其它腳本或樣式文件等內(nèi)容,:用來指明文檔的主體區(qū)域,網(wǎng)頁所要顯示的內(nèi)容都放在這個(gè)標(biāo)記內(nèi),其結(jié)束標(biāo)記指明主體區(qū)域的結(jié)束,9.HTML的基本結(jié)構(gòu),:告訴瀏覽器HTML文檔開始和結(jié)束的位置,其中包括head部分和body部分。HTML文檔中所有的內(nèi)容都應(yīng)該在這兩個(gè)標(biāo)記之間,一個(gè)HTML文檔總是以開始,以結(jié)束。,:HTML文件的頭部標(biāo)記,

10、頭部主要提供文檔的描述信息,head部分的所有內(nèi)容都不會(huì)顯示在瀏覽器窗口中,在其中可以放置頁面的標(biāo)題以及頁面的類型、使用的字符集、鏈接的其它腳本或樣式文件等內(nèi)容,:用來指明文檔的主體區(qū)域,網(wǎng)頁所要顯示的內(nèi)容都放在這個(gè)標(biāo)記內(nèi),其結(jié)束標(biāo)記指明主體區(qū)域的結(jié)束,9.HTML的基本結(jié)構(gòu),:告訴瀏覽器HTML文檔開始和結(jié)束的位置,其中包括head部分和body部分。HTML文檔中所有的內(nèi)容都應(yīng)該在這兩個(gè)標(biāo)記之間,一個(gè)HTML文檔總是以開始,以結(jié)束。,:HTML文件的頭部標(biāo)記,頭部主要提供文檔的描述信息,head部分的所有內(nèi)容都不會(huì)顯示在瀏覽器窗口中,在其中可以放置頁面的標(biāo)題以及頁面的類型、使用的字符集、鏈

11、接的其它腳本或樣式文件等內(nèi)容,:用來指明文檔的主體區(qū)域,網(wǎng)頁所要顯示的內(nèi)容都放在這個(gè)標(biāo)記內(nèi),其結(jié)束標(biāo)記指明主體區(qū)域的結(jié)束,10.如何使用HTML編寫網(wǎng)頁文件?,使用記事本,代碼編好之后,保存時(shí)這樣命名:文件名.html,保存類型選擇:所有文件 使用Dreamweaver新建一個(gè)html文件 演示,11.標(biāo)簽,標(biāo)簽是HTML文檔中一些有特定意義的符號(hào),這些符號(hào)指明內(nèi)容的含義或結(jié)構(gòu)。標(biāo)簽總是放在三角括號(hào)中,大多數(shù)標(biāo)簽都是成對出現(xiàn)的,表示開始和結(jié)束。,標(biāo)簽的內(nèi)容,標(biāo)簽名稱,起始標(biāo)簽,結(jié)束標(biāo)簽,標(biāo)簽可以有屬性,賦值的時(shí)候用“=”,多個(gè)屬性中間用空格隔開 屬性要寫在開始標(biāo)簽里,并且標(biāo)簽符號(hào)和中間不可以有空格,如是錯(cuò)誤的 結(jié)束的標(biāo)簽一定要加“/”,12.body標(biāo)簽常見屬性介紹,bgcolor屬性:用于設(shè)置HTML網(wǎng)頁的背景顏色,例如,表示背景顏色設(shè)置為紅色。 background屬性:用于設(shè)置HTML網(wǎng)頁的背景圖片,例如,表示將圖片tu.jpg設(shè)置為HTML網(wǎng)頁的背景。,text屬性:用于設(shè)置HTML網(wǎng)頁的文本顏色。使用text定義的顏色將應(yīng)用于整篇文檔。例如,表示文本顏色設(shè)置為紅色。 link、alink、vlink屬性:用于分別設(shè)置普通超鏈接、當(dāng)前活動(dòng)的超鏈接、已訪問的超鏈接文本的顏色。例如,,topmargin、leftmargin屬性:用于設(shè)置網(wǎng)頁主體內(nèi)容與網(wǎng)頁頂端、

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論