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

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

南海學(xué)院計(jì)算機(jī)系制作網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第1頁(yè)。15.07.2023a2第1章網(wǎng)頁(yè)制作基礎(chǔ)Web和瀏覽器WebWeb的特點(diǎn)和結(jié)構(gòu)Web最大的特點(diǎn)是使用了超文本（Hypertext）WWW采用C/S（客戶機(jī)/服務(wù)器）工作模式在瀏覽器和服務(wù)器之間應(yīng)用HTTP（HyperTextTransferProtocol，超文本傳輸協(xié)議）作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議

網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第2頁(yè)。15.07.2023a3

URLInternet上所有的資源都有一個(gè)唯一的URL地址，一般將URL地址稱為網(wǎng)址。URL的完整格式如下：協(xié)議://主機(jī)名（或IP地址）：端口號(hào)/路徑名/文件名網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第3頁(yè)。15.07.2023a4【例】幾個(gè)URL的例子.

（1），用http協(xié)議和缺省端口號(hào)（80）訪問(wèn)微軟公司服務(wù)器。這里沒(méi)有指定路徑和文件名，所以訪問(wèn)的結(jié)果是把一個(gè)缺省主頁(yè)送給瀏覽器。

（2）/pub/ms-windows/winvn926.zip，用FTP協(xié)議訪問(wèn)北京大學(xué)FTP服務(wù)器上路徑名為pub/ms-windows、文件名為winvn926.zip的文件。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第4頁(yè)。15.07.2023a5

（3）:8001///uu-gna/index.html，從運(yùn)行在端口號(hào)8001的服務(wù)器上訪問(wèn)index.html主頁(yè)。

（4)/Addressing/URL/5-BNF.html#httpaddress，訪問(wèn)

服務(wù)器上Addressing/URL目錄下的5-BNF.html網(wǎng)頁(yè)文件中錨點(diǎn)標(biāo)識(shí)為httpaddress的地方。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第5頁(yè)。15.07.2023a6瀏覽器概述分類InternetExplorerNetscapeNavigatorMosaic等專業(yè)瀏覽器以及一些以上述瀏覽器為內(nèi)核的專用瀏覽器。

其中使用最廣泛的是Microsoft出品的InternetExplorer6.0（簡(jiǎn)稱IE6）。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第6頁(yè)。15.07.2023a7IE6的界面標(biāo)題欄工具欄菜單欄地址欄狀態(tài)欄瀏覽窗口網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第7頁(yè)。15.07.2023a8IE6.0的使用瀏覽網(wǎng)頁(yè)“停止”按鈕前進(jìn)和后退刷新頁(yè)面改變文字大小選擇編碼全屏幕顯示查看源文件

網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第8頁(yè)。15.07.2023a9打開(kāi)多個(gè)窗口

用菜單欄上的“文件”→“新建”→“窗口”，會(huì)打開(kāi)一個(gè)新的瀏覽器窗口。

一般情況下，打開(kāi)四、五個(gè)窗口可以充分利用系統(tǒng)資源，而且通過(guò)調(diào)整窗口的大小和位置還可以同時(shí)瀏覽。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第9頁(yè)。15.07.2023a10主頁(yè)、臨時(shí)文件和歷史記錄

瀏覽器在打開(kāi)時(shí)自動(dòng)調(diào)入的網(wǎng)頁(yè)稱為“主頁(yè)”，主頁(yè)可以通過(guò)“工具”→“Internet選項(xiàng)”打開(kāi)Internet選項(xiàng)對(duì)話框，在“常規(guī)”選項(xiàng)卡的“主頁(yè)”欄設(shè)置.網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第10頁(yè)。15.07.2023a11收藏夾的使用

使用菜單“收藏”→“添加到收藏夾”打開(kāi)添加到收藏夾對(duì)話框。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第11頁(yè)。15.07.2023a12

使用菜單“收藏”→“整理收藏夾”打開(kāi)收藏夾整理對(duì)話框，進(jìn)行收藏夾中網(wǎng)頁(yè)的移動(dòng)、刪除、改名及創(chuàng)建新文件夾等操作。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第12頁(yè)。15.07.2023a13關(guān)閉圖片顯示

在網(wǎng)絡(luò)速度較慢時(shí)，不觀看網(wǎng)頁(yè)中的圖片和其它多媒體內(nèi)容可以得到更快的下載速度。通過(guò)“工具”→“Internet選項(xiàng)”打開(kāi)Internet選項(xiàng)對(duì)話框，在“高級(jí)”選項(xiàng)卡中可以對(duì)瀏覽器的工作方式進(jìn)行設(shè)置網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第13頁(yè)。15.07.2023a14關(guān)閉自動(dòng)完成功能

通過(guò)工具→Internet選項(xiàng)，打開(kāi)Internet選項(xiàng)對(duì)話框，在“內(nèi)容”選項(xiàng)卡的“個(gè)人信息”部分單擊“自動(dòng)完成”按鈕打開(kāi)自動(dòng)完成設(shè)置對(duì)話框。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第14頁(yè)。15.07.2023a15搜索引擎的使用1、使用瀏覽器的“搜索”按鈕2、使用專門(mén)的搜索引擎

(Google)

(擺渡)

(雅虎)

(搜狐)

網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第15頁(yè)。15.07.2023a16認(rèn)識(shí)網(wǎng)站1.門(mén)戶網(wǎng)站2.個(gè)人網(wǎng)站3.專業(yè)網(wǎng)站4.職能網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第16頁(yè)。15.07.2023a171.門(mén)戶網(wǎng)站

這類網(wǎng)站是一種綜合性網(wǎng)站，涉及領(lǐng)域非常廣泛，包含文學(xué)、音樂(lè)、影視、體育、新聞和娛樂(lè)等方方面面的內(nèi)容，具有論壇、搜索和短信等功能?，F(xiàn)在國(guó)內(nèi)較著名的門(mén)戶網(wǎng)站有搜狐（）、網(wǎng)易（）等。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第17頁(yè)。15.07.2023a182.個(gè)人網(wǎng)站個(gè)人網(wǎng)站具有較強(qiáng)個(gè)性化，是以個(gè)人名義開(kāi)發(fā)創(chuàng)建的網(wǎng)站，其內(nèi)容、樣式、風(fēng)格等都是非常有個(gè)性的。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第18頁(yè)。15.07.2023a193.專業(yè)網(wǎng)站這類網(wǎng)站具有很強(qiáng)的專業(yè)性，通常只涉及某一個(gè)領(lǐng)域，內(nèi)容專業(yè)。如榕樹(shù)下網(wǎng)站（）即是一個(gè)專業(yè)文學(xué)網(wǎng)站。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第19頁(yè)。15.07.2023a204.職能網(wǎng)站職能網(wǎng)站具有專門(mén)的功能，如政府職能網(wǎng)站等。目前逐漸興起的電子商務(wù)網(wǎng)站也屬于這類網(wǎng)站，較有名的電子商務(wù)網(wǎng)站有阿里巴巴（）、卓越網(wǎng)（）和當(dāng)當(dāng)網(wǎng)上書(shū)店（）等。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第20頁(yè)。15.07.2023a21認(rèn)識(shí)網(wǎng)頁(yè)Flash動(dòng)畫(huà)導(dǎo)航欄GIF動(dòng)畫(huà)文字表單圖片超級(jí)鏈接網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第21頁(yè)。15.07.2023a22網(wǎng)頁(yè)中的元素1.文字2.圖像3.表單4.Flash動(dòng)畫(huà)5.表格6.超級(jí)鏈接7.視頻、音頻8.POP窗口9.標(biāo)題欄和狀態(tài)欄文字

網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第22頁(yè)。15.07.2023a231.2網(wǎng)頁(yè)制作的相關(guān)知識(shí)HTML語(yǔ)言概述

是一種超文本標(biāo)記語(yǔ)言，作為一種網(wǎng)頁(yè)編輯語(yǔ)言，易學(xué)易懂。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第23頁(yè)。15.07.2023a241、HTML網(wǎng)頁(yè)

HTML網(wǎng)頁(yè)通常是由三部分內(nèi)容組成的：版本信息、網(wǎng)頁(yè)標(biāo)題（HEAD）和文檔主體（BODY）。

下面就是網(wǎng)頁(yè)結(jié)構(gòu)的總體框架：<!HTML網(wǎng)頁(yè)版本信息說(shuō)明><HTML><HEAD><!標(biāo)題標(biāo)記、屬性及其內(nèi)容></HEAD><BODY><!主體標(biāo)記、屬性及其內(nèi)容></BODY></HTML>網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第24頁(yè)。15.07.2023a25（1）版本信息版本信息位于HTML網(wǎng)頁(yè)文件的第一行（2）HTML文件標(biāo)記大部分網(wǎng)頁(yè)文件都是以<HTML>標(biāo)記開(kāi)始的，在文件的結(jié)尾處又以</HTML>結(jié)束

（3）頭部信息

HEAD標(biāo)記之間是HTML文檔的頭部，用來(lái)標(biāo)明當(dāng)前文檔的有關(guān)信息

在HEAD標(biāo)記之間，使用頻率最高的標(biāo)記就是TITLE，它用于定義顯示在瀏覽器標(biāo)題欄的文檔標(biāo)題。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第25頁(yè)。15.07.2023a26【例】給網(wǎng)頁(yè)設(shè)置“勵(lì)志學(xué)社”的文檔標(biāo)題，可在頭部輸入以下代碼：<TITLE>勵(lì)志學(xué)社</TITLE>網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第26頁(yè)。15.07.2023a27（4）主體標(biāo)記網(wǎng)頁(yè)的主體是“<BODY>……</BODY>”標(biāo)記對(duì)作用的范圍

<BODY>標(biāo)記用于定義HTML文檔主體的開(kāi)始，它能夠設(shè)置網(wǎng)頁(yè)的背景圖像、背景顏色、鏈接顏色和網(wǎng)頁(yè)邊距等屬性，其基本用法如下所示：<BODYBackground="URL"Bgclolr=ColorBgpropeties=FixedLeftmargin=nLink=ColorAlink=ColorText=ColorTopmargin=nVlink=Color>

Bgcolor為背景顏色。關(guān)于顏色的值后面會(huì)詳細(xì)介紹。Text為不包含超級(jí)鏈接的文字顏色。

Link為超級(jí)鏈接文字的顏色。

Alink為正被點(diǎn)擊的超級(jí)鏈接文字的顏色。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第27頁(yè)。15.07.2023a28

Leftmargin、Topmargin用于設(shè)置網(wǎng)頁(yè)的左邊距和上邊框，它們是以像素為單位【例1】將網(wǎng)頁(yè)的上邊距和左邊距分別設(shè)置為40和30個(gè)像素的寬度，使用黑色文本、白色背景，未訪問(wèn)的鏈接源采用藍(lán)色，已訪問(wèn)的鏈接源標(biāo)記為暗紅色。<BODYBackground="moom.gif"Bgcolor="White"Bgproperties=FixedLeftmargin=30Link="Blue"Text="Black"Topmargin=40Vlink="Maroon">

Vlink為已經(jīng)點(diǎn)擊過(guò)的超級(jí)鏈接文字的顏色。

Background設(shè)置，如果設(shè)置了背景圖片，圖片會(huì)覆蓋已經(jīng)設(shè)置的顏色。

網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第28頁(yè)。15.07.2023a292、XML語(yǔ)言

XML（eXtensibleMarkupLanguage）被稱作是下一代的網(wǎng)頁(yè)標(biāo)記語(yǔ)言，也是采用各種標(biāo)記來(lái)形成網(wǎng)頁(yè)的源代碼。

XML中包括可擴(kuò)展格式語(yǔ)言XSL(ExtensibleStyleLanguage)和可擴(kuò)展鏈接語(yǔ)言XLL(ExtensibleLinkingLanguage)。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第29頁(yè)。15.07.2023a301.22靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)靜態(tài)網(wǎng)頁(yè)指基本上全部使用HTML語(yǔ)言制作的網(wǎng)頁(yè)，頁(yè)面的內(nèi)容是固定不變的。動(dòng)態(tài)網(wǎng)頁(yè)（DynamicHTML，DHTML）利用JavaScript，CSS(層疊樣式表)及其它類似的語(yǔ)言如VBScript等與HTML進(jìn)行有機(jī)的結(jié)合來(lái)使靜態(tài)的HTML網(wǎng)頁(yè)變成動(dòng)態(tài)。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第30頁(yè)。15.07.2023a311.23Web服務(wù)器端程序

專業(yè)的網(wǎng)站都是建立在使用數(shù)據(jù)庫(kù)的基礎(chǔ)上的，要將這些數(shù)據(jù)庫(kù)變成可以通過(guò)瀏覽器顯示和操作的Web頁(yè)面，就需要編寫(xiě)服務(wù)器端的程序。用戶向服務(wù)器傳送提交的表單（個(gè)人信息、選擇結(jié)果等）需要在服務(wù)器端進(jìn)行記錄、篩選等處理。大量的數(shù)據(jù)庫(kù)查詢、修改處理也需要服務(wù)器端程序的支持。目前常用的服務(wù)器端編程技術(shù)主要有CGI、ASP、PHP、JSP等，不同的技術(shù)需要不同的系統(tǒng)環(huán)境支持。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第31頁(yè)。15.07.2023a321.3網(wǎng)頁(yè)制作的基本方法制作網(wǎng)頁(yè)的基本步驟

1、確定網(wǎng)頁(yè)的內(nèi)容

2、設(shè)計(jì)網(wǎng)頁(yè)的組織結(jié)構(gòu)

3、資料的收集與整理

4、選擇網(wǎng)頁(yè)的設(shè)計(jì)方法

常用的網(wǎng)頁(yè)制作工具有Frontpage、Dreamweaver等。服務(wù)器端的ASP程序可以使用VisualInterdev、UltraDEV等編輯。網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第32頁(yè)。15.07.2023a33開(kāi)始網(wǎng)頁(yè)制作構(gòu)建頁(yè)面框架創(chuàng)建導(dǎo)航條填充內(nèi)容創(chuàng)建返回主頁(yè)連接網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第33頁(yè)。15.07.2023a34網(wǎng)頁(yè)制作的原則站點(diǎn)要有創(chuàng)意整體規(guī)劃動(dòng)畫(huà)不能過(guò)多導(dǎo)航要明朗制作通用網(wǎng)頁(yè)主題鮮明優(yōu)化圖象定時(shí)更新網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)制作基礎(chǔ)全文共37頁(yè)，當(dāng)前為第34頁(yè)。15.07.2023a35制作網(wǎng)頁(yè)時(shí)要注意的問(wèn)題1、網(wǎng)頁(yè)的標(biāo)題要簡(jiǎn)潔，明確。

2、在文本中要使用水平線，以