《網頁設計與制作》第一章網頁制作基礎

1、第1章 網頁制作基礎,網頁設計與制作,南海學院計算機系制作,,2024/4/1,2,第1章 網頁制作基礎,Web和瀏覽器WebWeb的特點和結構Web最大的特點是使用了超文本（Hypertext）WWW采用C/S（客戶機/服務器）工作模式在瀏覽器和服務器之間應用HTTP（Hyper Text Transfer Protocol，超文本傳輸協(xié)議）作為網絡應用層通信協(xié)議,,2024/4/1,3,URL,Internet上所有的

2、資源都有一個唯一的URL地址，一般將URL地址稱為網址。,URL的完整格式如下：,協(xié)議://主機名（或IP地址）：端口號/路徑名/文件名,2024/4/1,4,【例】幾個URL的例子.,（1）http://www.microsoft.com，用http協(xié)議和缺省端口號（80）訪問微軟公司服務器www.microsoft.com。這里沒有指定路徑和文件名，所以訪問的結果是把一個缺省主頁送給瀏覽器。,（2）ftp://ftp.pku.edu

3、.cn/pub/ms-windows/winvn926.zip，用FTP協(xié)議訪問北京大學FTP服務器上路徑名為pub/ms-windows、文件名為winvn926.zip的文件。,2024/4/1,5,（3）http://gnacademy.org: 8001///uu-gna/index.html，從運行在端口號8001的gnacademy.org服務器上訪問index.html主頁。,（4)http://www.w3.org/Ad

4、dressing/URL/5-BNF.html#httpaddress，訪問www.w3.org 服務器上Addressing/URL目錄下的5-BNF.html 網頁文件中錨點標識為httpaddress的地方。,2024/4/1,6,瀏覽器,,概述分類 Internet ExplorerNetscape NavigatorMosaic等專業(yè)瀏覽器以及一些以上述瀏覽器為內核的專用瀏覽器。 其中使用

5、最廣泛的是Microsoft出品的Internet Explorer 6.0（簡稱IE6）。,2024/4/1,7,IE6的界面,2024/4/1,8,IE6.0的使用,瀏覽網頁,“停止”按鈕前進和后退刷新頁面改變文字大小選擇編碼全屏幕顯示查看源文件,2024/4/1,9,打開多個窗口,用菜單欄上的“文件”→“新建”→“窗口”，會打開一個新的瀏覽器窗口。,一般情況下，打開四、五個窗口可以充分利用系統(tǒng)資源，而且通過調整窗口的大

6、小和位置還可以同時瀏覽。,2024/4/1,10,主頁、臨時文件和歷史記錄,瀏覽器在打開時自動調入的網頁稱為“主頁”，主頁可以通過“工具”→“Internet選項”打開Internet選項對話框，在“常規(guī)”選項卡的“主頁”欄設置.,2024/4/1,11,收藏夾的使用,使用菜單“收藏”→“添加到收藏夾”打開添加到收藏夾對話框。,2024/4/1,12,使用菜單“收藏”→“整理收藏夾”打開收藏夾整理對話框，進行收藏夾中網頁的移動、刪除、改

7、名及創(chuàng)建新文件夾等操作。,2024/4/1,13,關閉圖片顯示,在網絡速度較慢時，不觀看網頁中的圖片和其它多媒體內容可以得到更快的下載速度。通過“工具”→“Internet選項”打開Internet選項對話框，在“高級”選項卡中可以對瀏覽器的工作方式進行設置,2024/4/1,14,關閉自動完成功能,通過工具→Internet選項，打開Internet選項對話框，在“內容”選項卡的“個人信息”部分單擊“自動完成”按鈕打開自動完成設置對話

8、框 。,2024/4/1,15,搜索引擎的使用,1、使用瀏覽器的“搜索”按鈕2、使用專門的搜索引擎 http://www.google.cn (Google) http://www.baidu.com (擺渡) http://www.yahoo.com (雅虎) http://www.sohu.com (搜狐),2024/4/1

9、,16,認識網站,1.門戶網站2.個人網站3.專業(yè)網站4.職能網站,2024/4/1,17,1.門戶網站,這類網站是一種綜合性網站，涉及領域非常廣泛，包含文學、音樂、影視、體育、新聞和娛樂等方方面面的內容，具有論壇、搜索和短信等功能。現(xiàn)在國內較著名的門戶網站有搜狐（www.sohu.com）、網易（www.163.com）等。,2024/4/1,18,2.個人網站,個人網站具有較強個性化，是以個人名義開發(fā)創(chuàng)建的網站，其內容、樣式、

10、風格等都是非常有個性的。,2024/4/1,19,3.專業(yè)網站,這類網站具有很強的專業(yè)性，通常只涉及某一個領域，內容專業(yè)。如榕樹下網站（www.rongshuxia.com）即是一個專業(yè)文學網站。,2024/4/1,20,4.職能網站,職能網站具有專門的功能，如政府職能網站等。目前逐漸興起的電子商務網站也屬于這類網站，較有名的電子商務網站有阿里巴巴（china.alibaba.com）、卓越網（www.joyo.com）和當當網上書店（

11、www.dangdang.com）等。,2024/4/1,21,認識網頁,,2024/4/1,22,網頁中的元素,1.文字2.圖像3.表單4.Flash動畫5. 表格6. 超級鏈接7. 視頻、音頻8. POP窗口9. 標題欄和狀態(tài)欄文字,2024/4/1,23,1.2　網頁制作的相關知識,HTML語言概述 是一種超文本標記語言，作為一種網頁編輯語言，易學易懂。,2024/4/1,24,1、HTML網頁,HTM

12、L網頁通常是由三部分內容組成的：版本信息、網頁標題（HEAD）和文檔主體（BODY）。,下面就是網頁結構的總體框架：, ,2024/4/1,25,（1）版本信息 版本信息位于HTML網頁文件的第一行,（2）HTML文件標記 大部分網頁文件都是以標記開始的，在文件的結尾處又以結束,（3）頭部信息

13、 HEAD標記之間是HTML文檔的頭部，用來標明當前文檔的有關信息,在HEAD標記之間，使用頻率最高的標記就是TITLE，它用于定義顯示在瀏覽器標題欄的文檔標題。,2024/4/1,26,【例】給網頁設置 “勵志學社”的文檔標題，可在頭部輸入以下代碼：勵志學社,2024/4/1,27,（4）主體標記 　　網頁的主體是“……”標記對作用的范圍,標記用于定義HTML文檔主體的開始，它能夠設置網頁的背景圖像、背景顏色、鏈接顏

14、色和網頁邊距等屬性，其基本用法如下所示：　　 Bgcolor為背景顏色。關于顏色的值后面會詳細介紹。Text為不包含超級鏈接的文字顏色。　　Link為超級鏈接文字的顏色?！　link為正被點擊的超級鏈接文字的顏色。,2024/4/1,28,Leftmargin、Topmargin用于設置網頁的左邊距和上邊框，它們是以像素為單位,【例1】將網頁的上邊距和左邊距分別設置為40和30個像素的寬度，使用黑色文本、白色背

15、景，未訪問的鏈接源采用藍色，已訪問的鏈接源標記為暗紅色。,Vlink為已經點擊過的超級鏈接文字的顏色?！　ackground設置，如果設置了背景圖片，圖片會覆蓋已經設置的顏色。,2024/4/1,29,2、XML語言,XML（eXtensible Markup Language）被稱作是下一代的網頁標記語言，也是采用各種標記來形成網頁的源代碼。,XML中包括可擴展格式語言XSL(Extensible Style Language

16、) 和可擴展鏈接語言XLL(Extensible Linking Language)。,2024/4/1,30,1.22 靜態(tài)網頁和動態(tài)網頁,靜態(tài)網頁指基本上全部使用HTML語言制作的網頁，頁面的內容是固定不變的。,動態(tài)網頁（DynamicHTML，DHTML）利用JavaScript，CSS (層疊樣式表) 及其它類似的語言如VBScript等與HTML進行有機的結合來使靜態(tài)的HTML網頁變成動態(tài)。,2024/4/1,31,1.23

17、 Web服務器端程序,專業(yè)的網站都是建立在使用數(shù)據(jù)庫的基礎上的，要將這些數(shù)據(jù)庫變成可以通過瀏覽器顯示和操作的Web頁面，就需要編寫服務器端的程序。用戶向服務器傳送提交的表單（個人信息、選擇結果等）需要在服務器端進行記錄、篩選等處理。大量的數(shù)據(jù)庫查詢、修改處理也需要服務器端程序的支持。　　目前常用的服務器端編程技術主要有CGI、ASP、PHP、JSP等，不同的技術需要不同的系統(tǒng)環(huán)境支持。,2024/4/1,32,1.3 網頁制作的基本方

18、法,制作網頁的基本步驟,1、確定網頁的內容,2、設計網頁的組織結構,3、資料的收集與整理,4、選擇網頁的設計方法,常用的網頁制作工具有Frontpage、Dreamweaver等。服務器端的ASP程序可以使用Visual Interdev、UltraDEV等編輯。,2024/4/1,33,開始網頁制作,構建頁面框架創(chuàng)建導航條填充內容創(chuàng)建返回主頁連接,2024/4/1,34,網頁制作的原則,站點要有創(chuàng)意整體規(guī)劃動畫不能過多導航

19、要明朗制作通用網頁主題鮮明優(yōu)化圖象定時更新,2024/4/1,35,制作網頁時要注意的問題,1、網頁的標題要簡潔，明確。 2、在文本中要使用水平線，以分割不同部分。 3、對重點段落要強調顯示。 4、網頁中插入的圖片要盡量的小。 5、圖形要附加文字說明，以便關閉圖像時查看。 6、網頁中引用的資料及商標（或圖標），不能侵犯版權。,2024/4/1,36,1.4 Macromedia Studio MX2004,Macrom

20、edia Studio MX2004是目前應用最廣泛的網頁制作工具組件，使用方便、功能齊全，Dreamweaver、Flash、Fireworks被稱作“網頁三劍客”。,在Dreamweaver 里用豐富的層疊樣式表制作耐看，專業(yè)的網站。,Macromedia Flash 工具可較快的制作 SWF 文件。,Fireworks通過自動變形，用動的效果，圖片編輯工具和拖拽工具能傳送較精彩的 Fireworks 圖片。,2024/4/1,37