網(wǎng)頁設(shè)計(jì)與制作第一章網(wǎng)頁制作基礎(chǔ)

《網(wǎng)頁設(shè)計(jì)與制作第一章網(wǎng)頁制作基礎(chǔ)》由會(huì)員分享，可在線閱讀，更多相關(guān)《網(wǎng)頁設(shè)計(jì)與制作第一章網(wǎng)頁制作基礎(chǔ)（37頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級(jí),第三級(jí),第四級(jí),第五級(jí),*,*,第1章 網(wǎng)頁制作基礎(chǔ),網(wǎng)頁設(shè)計(jì)與制作,南海學(xué)院計(jì)算機(jī)系制作,10/22/2024,1,第1章 網(wǎng)頁制作基礎(chǔ),Web,和瀏覽器,Web,Web,的特點(diǎn)和結(jié)構(gòu),Web,最大的特點(diǎn)是使用了超文本（,Hypertext,）,WWW,采用,C/S,（,客戶機(jī),/,服務(wù)器）工作模式,在瀏覽器和服務(wù)器之間應(yīng)用,HTTP,（,Hyper Text Transfer Protocol,，,超文本傳輸協(xié)議）作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議,10/22/2024,2,URL,Internet上所有的資源都有一個(gè)唯一的URL地址，一般將

2、URL地址稱為網(wǎng)址。,URL的完整格式如下：,協(xié)議:/主機(jī)名（或IP地址）：端口號(hào)/路徑名/文件名,10/22/2024,3,【,例】幾個(gè)URL的例子.,（1）http:/，用http協(xié)議和缺省端口號(hào)（80）訪問微軟公司服務(wù)器。這里沒有指定路徑和文件名，所以訪問的結(jié)果是把一個(gè)缺省主頁送給瀏覽器。,（,2）,ftp:/ 服務(wù)器上Addressing/URL目錄下的5-BNF.html 網(wǎng)頁文件中錨點(diǎn)標(biāo)識(shí)為httpaddress的地方。,10/22/2024,5,瀏覽器,概述,分類,Internet Explorer,Netscape Navigator,Mosaic,等專業(yè)瀏覽器以及一些以上述瀏

3、覽器為內(nèi)核的專用瀏覽器。,其中使用最廣泛的是,Microsoft,出品的,Internet Explorer 6.0（,簡稱,IE6）。,10/22/2024,6,IE6,的界面,標(biāo)題欄,工具欄,菜單欄,地址欄,狀態(tài)欄,瀏覽窗口,10/22/2024,7,IE6.0,的使用,瀏覽網(wǎng)頁,“停止”按鈕,前進(jìn)和后退,刷新頁面,改變文字大小,選擇編碼,全屏幕顯示,查看源文件,10/22/2024,8,打開多個(gè)窗口,用菜單欄上的“文件”“新建”“窗口”，會(huì)打開一個(gè)新的瀏覽器窗口。,一般情況下，打開四、五個(gè)窗口可以充分利用系統(tǒng)資源，而且通過調(diào)整窗口的大小和位置還可以同時(shí)瀏覽。,10/22/2024,9,主

4、頁、臨時(shí)文件和歷史記錄,瀏覽器在打開時(shí)自動(dòng)調(diào)入的網(wǎng)頁稱為“主頁”，主頁可以通過“工具”“Internet選項(xiàng)”打開Internet選項(xiàng)對(duì)話框，在“常規(guī)”選項(xiàng)卡的“主頁”欄設(shè)置.,10/22/2024,10,收藏夾的使用,使用菜單“收藏”“添加到收藏夾”打開添加到收藏夾對(duì)話框。,10/22/2024,11,使用菜單“收藏”,“,整理收藏夾”打開收藏夾整理對(duì)話框，進(jìn)行收藏夾中網(wǎng)頁的移動(dòng)、刪除、改名及創(chuàng)建新文件夾等操作。,10/22/2024,12,關(guān)閉圖片顯示,在網(wǎng)絡(luò)速度較慢時(shí)，不觀看網(wǎng)頁中的圖片和其它多媒體內(nèi)容可以得到更快的下載速度。通過“工具”“Internet選項(xiàng)”打開Internet選項(xiàng)對(duì)

5、話框，在“高級(jí)”選項(xiàng)卡中可以對(duì)瀏覽器的工作方式進(jìn)行設(shè)置,10/22/2024,13,關(guān)閉自動(dòng)完成功能,通過工具Internet選項(xiàng)，打開Internet選項(xiàng)對(duì)話框，在“內(nèi)容”選項(xiàng)卡的“個(gè)人信息”部分單擊“自動(dòng)完成”按鈕打開自動(dòng)完成設(shè)置對(duì)話框。,10/22/2024,14,搜索引擎的使用,1、使用瀏覽器的“搜索”按鈕,2、使用專門的搜索引擎,http:/n,(Google),http:/,(擺渡),(雅虎),(搜狐),10/22/2024,15,認(rèn)識(shí)網(wǎng),站,1.,門戶網(wǎng)站,2.,個(gè)人網(wǎng)站,3.,專業(yè)網(wǎng)站,4.,職能網(wǎng)站,10/22/2024,16,1.門戶網(wǎng)站,這類網(wǎng)站是一種綜合性網(wǎng)站，涉及領(lǐng)域

6、非常廣泛，包含文學(xué)、音樂、影視、體育、新聞和娛樂等方方面面的內(nèi)容，具有論壇、搜索和短信等功能?，F(xiàn)在國內(nèi)較著名的門戶網(wǎng)站有搜狐（）、網(wǎng)易（）等。,10/22/2024,17,2.個(gè)人網(wǎng)站,個(gè)人網(wǎng)站具有較強(qiáng)個(gè)性化，是以個(gè)人名義開發(fā)創(chuàng)建的網(wǎng)站，其內(nèi)容、樣式、風(fēng)格等都是非常有個(gè)性的。,10/22/2024,18,3.專業(yè)網(wǎng)站,這類網(wǎng)站具有很強(qiáng)的專業(yè)性，通常只涉及某一個(gè)領(lǐng)域，內(nèi)容專業(yè)。如榕樹下網(wǎng)站（）即是一個(gè)專業(yè)文學(xué)網(wǎng)站。,10/22/2024,19,4.職能網(wǎng)站,職能網(wǎng)站具有專門的功能，如政府職能網(wǎng)站等。目前逐漸興起的電子商務(wù)網(wǎng)站也屬于這類網(wǎng)站，較有名的電子商務(wù)網(wǎng)站有阿里巴巴（）、卓越網(wǎng)（）和當(dāng)當(dāng)網(wǎng)上

7、書店（）等。,10/22/2024,20,認(rèn)識(shí)網(wǎng)頁,Flash動(dòng)畫,導(dǎo)航欄,GIF動(dòng)畫,文字,表單,圖片,超級(jí)鏈接,10/22/2024,21,網(wǎng)頁中的元素,1.,文字,2.圖像,3.表單,4.Flash動(dòng)畫,5.表格,6.超級(jí)鏈接,7.視頻、音頻,8.POP窗口,9.標(biāo)題欄和狀態(tài)欄文字,10/22/2024,22,1.2網(wǎng)頁制作的相關(guān)知識(shí),HTML,語言概述,是一種超文本標(biāo)記語言，作為一種網(wǎng)頁編輯語言，易學(xué)易懂。,10/22/2024,23,1、HTML網(wǎng)頁,HTML網(wǎng)頁通常是由三部分內(nèi)容組成的：版本信息、網(wǎng)頁標(biāo)題（HEAD）和文檔主體（BODY）。,下面就是網(wǎng)頁結(jié)構(gòu)的總體框架：,10/22

8、/2024,24,（1）版本信息,版本信息位于HTML網(wǎng)頁文件的第一行,（2）HTML文件標(biāo)記,大部分網(wǎng)頁文件都是以標(biāo)記開始的，在文件的結(jié)尾處又以結(jié)束,（3）頭部信息,HEAD標(biāo)記之間是HTML文檔的頭部，用來標(biāo)明當(dāng)前文檔的有關(guān)信息,在HEAD標(biāo)記之間，使用頻率最高的標(biāo)記就是TITLE，它用于定義顯示在瀏覽器標(biāo)題欄的文檔標(biāo)題。,10/22/2024,25,【例】給網(wǎng)頁設(shè)置“勵(lì)志學(xué)社”的文檔標(biāo)題，可在頭部輸入以下代碼：,勵(lì)志學(xué)社,10/22/2024,26,（4）主體標(biāo)記,網(wǎng)頁的主體是“”標(biāo)記對(duì)作用的范圍,標(biāo)記用于定義HTML文檔主體的開始，它能夠設(shè)置網(wǎng)頁的背景圖像、背景顏色、鏈接顏色和網(wǎng)頁邊距

9、等屬性，其基本用法如下所示：,Bgcolor為背景顏色。關(guān)于顏色的值后面會(huì)詳細(xì)介紹。Text為不包含超級(jí)鏈接的文字顏色。,Link為超級(jí)鏈接文字的顏色。,Alink為正被點(diǎn)擊的超級(jí)鏈接文字的顏色。,10/22/2024,27,Leftmargin、Topmargin用于設(shè)置網(wǎng)頁的左邊距和上邊框，它們是以像素為單位,【例1】將網(wǎng)頁的上邊距和左邊距分別設(shè)置為40和30個(gè)像素的寬度，使用黑色文本、白色背景，未訪問的鏈接源采用藍(lán)色，已訪問的鏈接源標(biāo)記為暗紅色。,Vlink為已經(jīng)點(diǎn)擊過的超級(jí)鏈接文字的顏色。,Background設(shè)置，如果設(shè)置了背景圖片，圖片會(huì)覆蓋已經(jīng)設(shè)置的顏色。,10/22/2024,

10、28,2、XML語言,XML（eXtensible Markup Language）被稱作是下一代的網(wǎng)頁標(biāo)記語言，也是采用各種標(biāo)記來形成網(wǎng)頁的源代碼。,XML中包括可擴(kuò)展格式語言XSL(Extensible Style Language)和可擴(kuò)展鏈接語言XLL(Extensible Linking Language)。,10/22/2024,29,1.22 靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁,靜態(tài)網(wǎng)頁指基本上全部使用HTML語言制作的網(wǎng)頁，頁面的內(nèi)容是固定不變的。,動(dòng)態(tài)網(wǎng)頁（DynamicHTML，DHTML）利用JavaScript，CSS(層疊樣式表)及其它類似的語言如VBScript等與HTML進(jìn)行有機(jī)

11、的結(jié)合來使靜態(tài)的HTML網(wǎng)頁變成動(dòng)態(tài)。,10/22/2024,30,1.23 Web服務(wù)器端程序,專業(yè)的網(wǎng)站都是建立在使用數(shù)據(jù)庫的基礎(chǔ)上的，要將這些數(shù)據(jù)庫變成可以通過瀏覽器顯示和操作的Web頁面，就需要編寫服務(wù)器端的程序。用戶向服務(wù)器傳送提交的表單（個(gè)人信息、選擇結(jié)果等）需要在服務(wù)器端進(jìn)行記錄、篩選等處理。大量的數(shù)據(jù)庫查詢、修改處理也需要服務(wù)器端程序的支持。,目前常用的服務(wù)器端編程技術(shù)主要有CGI、ASP、PHP、JSP等，不同的技術(shù)需要不同的系統(tǒng)環(huán)境支持。,10/22/2024,31,1.3 網(wǎng)頁制作的基本方法,制作網(wǎng)頁的基本步驟,1,、確定網(wǎng)頁的內(nèi)容,2,、設(shè)計(jì)網(wǎng)頁的組織結(jié)構(gòu),3,、資料的

12、收集與整理,4,、選擇網(wǎng)頁的設(shè)計(jì)方法,常用的網(wǎng)頁制作工具有Frontpage、Dreamweaver等。服務(wù)器端的ASP程序可以使用Visual Interdev、UltraDEV等編輯。,10/22/2024,32,開始網(wǎng)頁制作,構(gòu)建頁面框架,創(chuàng)建導(dǎo)航條,填充內(nèi)容,創(chuàng)建返回主頁連接,10/22/2024,33,網(wǎng)頁制作的原則,站點(diǎn)要有創(chuàng)意,整體規(guī)劃,動(dòng)畫不能過多,導(dǎo)航要明朗,制作通用網(wǎng)頁,主題鮮明,優(yōu)化圖象,定時(shí)更新,10/22/2024,34,制作網(wǎng)頁時(shí)要注意的問題,1,、網(wǎng)頁的標(biāo)題要簡潔，明確。,2,、在文本中要使用水平線，以分割不同部分。,3,、對(duì)重點(diǎn)段落要強(qiáng)調(diào)顯示。,4,、網(wǎng)頁中插入

13、的圖片要盡量的小。,5,、圖形要附加文字說明，以便關(guān)閉圖像時(shí)查看。,6,、網(wǎng)頁中引用的資料及商標(biāo)（或圖標(biāo)），不能侵犯版權(quán)。,10/22/2024,35,1.4 Macromedia Studio MX2004,Macromedia Studio MX2004是目前應(yīng)用最廣泛的網(wǎng)頁制作工具組件，使用方便、功能齊全，Dreamweaver、Flash、Fireworks被稱作“網(wǎng)頁三劍客”。,在Dreamweaver 里用豐富的層疊樣式表制作耐看，專業(yè)的網(wǎng)站。,Macromedia Flash 工具可較快的制作 SWF 文件。,Fireworks通過自動(dòng)變形，用動(dòng)的效果，圖片編輯工具和拖拽工具能傳送較精彩的 Fireworks 圖片。,10/22/2024,36,思考題,1.1 什么是WWW？什么是網(wǎng)頁？,1.2 一個(gè)完整的URL由哪幾部分組成？舉出幾個(gè)URL的例子。,1.3 如何設(shè)置IE的主頁？如何用IE收藏一個(gè)網(wǎng)頁？,1.4 網(wǎng)頁中一般都使用了哪些技術(shù)？,1.5 Macromedia Studio MX2004有哪幾部分組成？,10/22/2024,37,