《計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)與應(yīng)用》課件第8章

上傳人：1*** IP屬地：廣東上傳時(shí)間：2024-07-13 格式：PPT 頁數(shù)：103 大小：1.50MB 積分：15 舉報(bào) 版權(quán)申訴

《計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)與應(yīng)用》課件第8章_第2頁

《計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)與應(yīng)用》課件第8章_第3頁

《計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)與應(yīng)用》課件第8章_第4頁

《計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)與應(yīng)用》課件第8章_第5頁

已閱讀5頁，還剩98頁未讀，繼續(xù)免費(fèi)閱讀

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

文檔簡(jiǎn)介

第8章網(wǎng)頁制作

8.1網(wǎng)頁概述 8.2HTML語言基礎(chǔ)8.3使用FrontPage制作網(wǎng)頁8.4網(wǎng)站發(fā)布與測(cè)試習(xí)題8

8.1網(wǎng)頁概述8.1.1網(wǎng)頁基本組成

1．文本

文本是網(wǎng)頁展示信息的主體，它能夠準(zhǔn)確地表達(dá)信息的內(nèi)容和含義。為了克服文字外觀單調(diào)的缺點(diǎn)，在網(wǎng)頁中通過設(shè)置文字的顏色、式樣、底紋等屬性改變其外觀，以突出要顯示的內(nèi)容。

2．圖片圖片的主要用途是對(duì)網(wǎng)頁進(jìn)行裝飾以表達(dá)制作者的個(gè)人情調(diào)或網(wǎng)站的風(fēng)格，另外也用于展示用文字難于表達(dá)或不能準(zhǔn)確表達(dá)的信息，如對(duì)產(chǎn)品的展示。網(wǎng)頁中可以直接使用的圖片格式有JPEG、PNG和GIF。

3．超鏈接超鏈接可以說是萬維網(wǎng)的靈魂，是萬維網(wǎng)得以流行的主要因素。它是從一個(gè)網(wǎng)頁的熱點(diǎn)指向目的端的指針。通過它用戶可以快速地找到并打開所需的資源，而并不需要知道此資源的具體位置(URL地址)。

4．表格表格在網(wǎng)頁中用于控制信息的布局方式。其主要用途包括兩個(gè)方面：一是用行和列的形式來布局文本和圖像以及其他列表化數(shù)據(jù)；二是使用表格來精確控制各種網(wǎng)頁元素在網(wǎng)頁中出現(xiàn)的位置以及對(duì)網(wǎng)頁進(jìn)行布局。

5．表單表單是用戶和Web服務(wù)器交互的基本工具。表單由不同功能的表單域組成，用戶可以通過這些表單域輸入文本、選擇選項(xiàng)、上傳文件等，網(wǎng)頁制作者可以通過表單來收集用戶的信息、反饋意見等。

6．視頻和音頻隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展以及用戶對(duì)網(wǎng)頁表現(xiàn)力的要求不斷提高，視頻和聲音已逐漸成為重要的網(wǎng)頁元素。通過視頻和聲音可以給用戶傳遞更為豐富的信息。

7．其他網(wǎng)頁元素網(wǎng)頁中除了以上提到的幾種元素外，還有一些其他元素，包括JavaApplet、ActiveX、CSS、JavaScript等，它們不僅能點(diǎn)綴網(wǎng)頁，使網(wǎng)頁更加活潑，而且重要的是可以擴(kuò)展網(wǎng)頁的功能，在網(wǎng)上娛樂、電子商務(wù)等方面有很重要的應(yīng)用。8.1.2常用網(wǎng)頁制作工具

1．文本編輯器網(wǎng)頁文件是一個(gè)純文本文件，因此，用任何一款文本編輯器都可以編輯網(wǎng)頁。需要注意的是，在保存網(wǎng)頁時(shí)，網(wǎng)頁擴(kuò)展名必須為?.html或?.htm。使用文本編輯器編輯網(wǎng)頁時(shí)，只有制作者對(duì)標(biāo)記的功能及其屬性非常了解，才能順利地完成網(wǎng)頁的編輯。常用的文本編輯器有Windows自帶的記事本、Editplus、UtraEdit等。

2．專用網(wǎng)頁制作工具常用的專用網(wǎng)頁制作工具有：

(1)?Microsoft公司的FrontPage。FrontPage是目前最常用的中文版網(wǎng)頁制作工具之一，它簡(jiǎn)單易學(xué)，提供網(wǎng)頁向?qū)?、網(wǎng)頁編輯、表單與框架頁技術(shù)，在音頻與視頻插件、動(dòng)態(tài)HTML技術(shù)、數(shù)據(jù)庫連接等方面表現(xiàn)得都非常出色，用戶可以在向?qū)У闹敢拢?jiǎn)單而快速地完成網(wǎng)頁的制作。

(2)?MacroMedia公司的Dreamweaver。Dreamweaver是一款非常優(yōu)秀的所見即所得的網(wǎng)頁編輯工具。它是第一套針對(duì)專業(yè)Web頁設(shè)計(jì)師的視覺化Web頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和瀏覽器限制的充滿動(dòng)感的Web頁。它支持最新的CSS(層疊樣式表)、層(Layer)和XML(可擴(kuò)展標(biāo)記語言)。它附有站點(diǎn)管理功能，通過這個(gè)功能可以方便地設(shè)計(jì)、管理多個(gè)站點(diǎn)；另外還有FTP功能，可以方便地將站點(diǎn)上傳或下載。8.1.3網(wǎng)站所謂網(wǎng)站(WebSite)，就是作者或網(wǎng)站管理員根據(jù)一定的規(guī)則，將內(nèi)容相關(guān)的網(wǎng)頁、圖片、視頻和音頻等信息集合在一起，存放在一臺(tái)Web服務(wù)器中供用戶瀏覽。簡(jiǎn)單地說，網(wǎng)站就是相關(guān)網(wǎng)頁的集合，就像一個(gè)報(bào)亭供讀者來瀏覽信息，而報(bào)亭中的報(bào)紙就好比網(wǎng)站中的網(wǎng)頁。網(wǎng)站通過Internet為用戶提供瀏覽網(wǎng)頁的服務(wù)。8.2HTML語言基礎(chǔ)8.2.1HTML概述

HTML的全稱是HyperTextMarkupLanguage，即“超文本標(biāo)記語言”，它是用于建立網(wǎng)頁的一種語言，其目的是將存放在一臺(tái)計(jì)算機(jī)中的文本或圖形與另一臺(tái)計(jì)算機(jī)中的文本或圖形方便而有機(jī)地聯(lián)系在一起，形成有機(jī)的整體，而不用考慮具體信息是在本地計(jì)算機(jī)還是在網(wǎng)絡(luò)上的其他計(jì)算機(jī)中。

1．HTML標(biāo)記語法

HTML是一種描述語言，用于描述網(wǎng)頁內(nèi)容的顯示格式。標(biāo)記就是進(jìn)行格式描述的最基本元素，HTML通過不同的標(biāo)記及其屬性來告訴瀏覽器指定的內(nèi)容如何顯示。在HTML中，所有的標(biāo)記符都用尖括號(hào)括起來，并且一般都成對(duì)出現(xiàn)，即包括開始標(biāo)記符和結(jié)束標(biāo)記符，其目的是定義標(biāo)記符所影響的范圍。結(jié)束符和開始符的區(qū)別是結(jié)束符的前面有一個(gè)斜線。例如：<B>黑體顯示</B>，標(biāo)記的作用范圍只影響<B>和</B>之間的文字，而不會(huì)影響標(biāo)記符以外的文字。標(biāo)記的一般格式：

<標(biāo)記名[屬性名1=屬性值1屬性名2=屬性值2...]>格式化對(duì)象</標(biāo)記名>說明：

·標(biāo)記名：由一個(gè)或多個(gè)英文字母組成，指明“格式化對(duì)象”基本的顯示格式。

·屬性：更詳細(xì)地控制“格式化對(duì)象”的顯示格式。屬性可以指定多個(gè)，每組屬性名和屬性值之間用一個(gè)或多個(gè)空格分隔；也可以不指定，而使用默認(rèn)屬性值。

2．網(wǎng)頁的基本結(jié)構(gòu)一個(gè)Web頁實(shí)際上對(duì)應(yīng)于一個(gè)HTML文件，HTML文件以?.html或?.htm為擴(kuò)展名，它是一個(gè)純文本文件。一個(gè)Web頁的基本結(jié)構(gòu)如下：<HTML><HEAD> <TITLE>Web頁基本架構(gòu)</TITLE> … </HEAD> <BODY> … </BODY></HTML>

3．制作一個(gè)簡(jiǎn)單的網(wǎng)頁下面介紹使用記事本創(chuàng)建第一個(gè)簡(jiǎn)單的網(wǎng)頁。例8-1創(chuàng)建第一個(gè)網(wǎng)頁。啟動(dòng)記事本軟件，在記事本中輸入如下代碼：

<html>

<head>

<title>我的第一個(gè)網(wǎng)頁</title>

</head>

<body><h1align="center">靜夜思</h1><fontcolor="green"><h2align="center">床前明月光，<br>疑是地上霜。<br>舉頭望明月，<br>低頭思故鄉(xiāng)。<br></h2></font></body></html>在保存文件的對(duì)話框的“保存類型(T)：”中選擇“所有文件”，“文件名”設(shè)定為“first.htm”，保存到桌面上，然后雙擊此文件便會(huì)看到如圖8-1所示的結(jié)果。圖8-1第一個(gè)簡(jiǎn)單網(wǎng)頁8.2.2HTML標(biāo)記

1．頁面屬性設(shè)置頁面屬性主要指網(wǎng)頁的背景顏色或背景圖片、網(wǎng)頁中整體字體的顏色及超鏈接的顏色等。這些項(xiàng)目通過<body>標(biāo)記的屬性來設(shè)置，具體屬性使用方法如下：

(1)?Bgcolor=色彩單詞或色彩值，用于設(shè)置背景的顏色。

(2)?Background=圖片所在路徑及圖片名，用于設(shè)置背景的圖片。

(3)?Text=色彩單詞或色彩值，用于設(shè)置網(wǎng)頁中文字的整體顏色在設(shè)置背景圖片后，背景色將不再起作用。背景圖片的大小不能控制，當(dāng)圖片較小時(shí)，瀏覽器會(huì)在水平和垂直方向重復(fù)圖片，使其充滿整個(gè)瀏覽器的窗口。網(wǎng)頁中可以使用的圖片格式有JPG、PNG和GIF。如圖8-2所示的效果由例8-2產(chǎn)生，圖8-3為背景圖片。圖8-2頁面設(shè)置圖8-3背景圖片

2．文本標(biāo)記

(1)段落標(biāo)記<p>…</p>。<p>標(biāo)記用于創(chuàng)建一個(gè)段落，在<p>和</p>之間的內(nèi)容將以段落的格式顯示。

(2)標(biāo)題標(biāo)記<hn>…</hn>。<hn>用于在正文中顯示不同級(jí)別的標(biāo)題，n取值為1～6的整數(shù)表示6級(jí)標(biāo)題，<h1>為最大號(hào)標(biāo)題，向下依次遞減。每個(gè)標(biāo)題為一個(gè)段落。

(3)水平線標(biāo)記<hr>。<hr>的作用是在標(biāo)記所在的位置插入一條水平線，將上下文內(nèi)容分為兩部分。<hr>標(biāo)記的屬性及功能如表8-1所示，它用于控制水平線的顯示效果。表8-1<hr>標(biāo)記的屬性及功能

(4)對(duì)齊屬性align。align屬性用來設(shè)定段落<p>、標(biāo)題<hn>及水平線的對(duì)齊方式，其取值為left(左對(duì)齊)、center(居中對(duì)齊)和right(右對(duì)齊)，缺省為左對(duì)齊。

(5)行標(biāo)記<br>。<br>的作用是在段內(nèi)插入一個(gè)換行符，產(chǎn)生一個(gè)新行。<br>沒有結(jié)束標(biāo)記。

(6)字體標(biāo)記<font>…</font>。<font>標(biāo)記用于設(shè)定標(biāo)記之間的文本的字號(hào)(size)、顏色(color)及字體(face)。字號(hào)的取值為1～7的整數(shù)，值越大字越大；字體直接指定字體的名稱即可，如“宋體”、“TimeNewRoman”等。例8-3文本標(biāo)記及其屬性示例。其效果如圖8-4所示。圖8-4文本標(biāo)記及屬性示例

3．使用圖像圖像標(biāo)記<img>的作用是在網(wǎng)頁中插入一個(gè)圖片，它沒有結(jié)束標(biāo)記，一般格式為：

<imgsrc="圖片路徑及圖片名">

src屬性是必選的，它用來指定待插入圖片的位置及其名稱。其他可選的幾個(gè)屬性如表8-2所述。表8-2<img>標(biāo)記的屬性及功能在網(wǎng)頁中可以使用的圖像格式有以下三種：

(1)?GIF格式：圖形交換格式，采用無損壓縮；當(dāng)保存時(shí)可以決定是否保留圖片的透明區(qū)域；還可以保存動(dòng)畫。它所表示的色彩數(shù)較低，只有16色或256色。

(2)?JPEG格式：聯(lián)合圖形專家組圖片格式，使用有損壓縮，壓縮率很高；但是表示的色彩數(shù)很高，可以表示24位真彩色，是最常用的圖片格式。

(3)?PNG格式：可移植的網(wǎng)絡(luò)圖形格式，可以適應(yīng)于任何類型、任何顏色深度的圖片；采用無損壓縮，是現(xiàn)在最好的圖片格式，已經(jīng)開始逐漸流行。

4．超級(jí)鏈接

1)?URL簡(jiǎn)介

HTML利用統(tǒng)一資源定位器(UniversalResourceLocator，URL)定位Web頁上的文檔信息。一個(gè)URL包括3個(gè)部分：協(xié)議代碼、所需文件的計(jì)算機(jī)地址(或一個(gè)電子郵件地址或一個(gè)新聞組名稱)、包含有信息的文件地址和文件名。其中協(xié)議表明應(yīng)使用何種方法獲得所需的信息，常用的協(xié)議及URL格式如表8-3所示。表8-3常用的協(xié)議及URL格式

2)絕對(duì)URL和相對(duì)URL絕對(duì)URL是指Internet上資源的完全地址，包括協(xié)議種類、計(jì)算機(jī)域名和包含路徑的文檔名。例如，/index.htm就表示一個(gè)絕對(duì)URL。絕對(duì)URL一般用于鏈接本站點(diǎn)以外的文件。

3)創(chuàng)建超鏈接

HTML通過標(biāo)記<a>來創(chuàng)建超鏈接，其格式為：

<ahref="URL">鏈接觸發(fā)對(duì)象</a>“觸發(fā)對(duì)象”可以是文本或圖片，當(dāng)用戶單擊觸發(fā)對(duì)象時(shí)，瀏覽器就會(huì)打開URL指向的文件。通過超鏈接可以將網(wǎng)頁和網(wǎng)頁之間、網(wǎng)站和網(wǎng)站之間鏈接起來。整個(gè)WWW就是通過超鏈接連接起來的。

5．表格表格一般是用于組織信息，以便使信息更有條理、更加清晰。表格在網(wǎng)頁中的另外一個(gè)作用就是進(jìn)行頁面布局，也是最常用的一種布局方法。一般通過單元格的背景色或背景圖片來區(qū)分網(wǎng)頁中的不同區(qū)域，并對(duì)網(wǎng)頁進(jìn)行美化。在網(wǎng)頁中通過標(biāo)記<table>…</table>創(chuàng)建表格，然后在<table>和</table>之間用標(biāo)記<tr>和<td>創(chuàng)建表格的行與列(單元格)。注意：表格中的內(nèi)容，只能出現(xiàn)在<td>和</td>之間，在其他地方不可以出現(xiàn)。有關(guān)表格、行和單元格的屬性如表8-4所示。表8-4表格、行和單元格的屬性例8-6表格示例，結(jié)果如圖8-5所示。圖8-5表格示例

<html>

<body>下面創(chuàng)建一個(gè)5行6列的表格，寬400，高200，整體背景色為?#9FDBEF，第一行背景色為藍(lán)色(blue)。

<tablebgcolor="#9FDBEF"width=400height=200border=5>

<tralign="center">>

</tr>

<tr>

</tr>

<tr>

<td>

</td><td>

</td>

</tr>

<tr>

</td><td>

</td><td>體育</td>

<td>

</td>

</tr>

</table>

</body>

</html>8.3使用FrontPage制作網(wǎng)頁

8.3.1FrontPage簡(jiǎn)介

FrontPage是微軟辦公系統(tǒng)套件中的一員，因此它和常用的Word、Excel有類似的界面和操作。對(duì)于用戶來說，用FrontPage編寫網(wǎng)頁就和用Word寫文章一樣簡(jiǎn)單易用，尤其對(duì)初學(xué)者更容易上手。本節(jié)以FrontPage2003為例，講解使用FrontPage來編寫網(wǎng)頁的一般方法和過程。

FrontPage的工作界面如圖8-6所示。圖8-6FrontPage的工作界面

1．站點(diǎn)文件夾站點(diǎn)是網(wǎng)頁及其資源文件的集合，在計(jì)算機(jī)中站點(diǎn)的所有資源文件要求存放在同一個(gè)文件夾中以便于發(fā)布。因此一個(gè)站點(diǎn)一般對(duì)應(yīng)一個(gè)文件夾，“站點(diǎn)文件夾”就是用來展示和存放站點(diǎn)資源的地方。

2．標(biāo)簽欄

FrontPage2003支持多文件標(biāo)簽頁顯示，在不同的標(biāo)簽頁中顯示不同的網(wǎng)頁，以便于同時(shí)對(duì)多個(gè)網(wǎng)頁進(jìn)行編輯。通過“標(biāo)簽欄”可以在不同網(wǎng)頁之間進(jìn)行快速切換。

3．標(biāo)記選擇器標(biāo)記選擇器是FrontPage2003新增的功能，?通過它可以快速選擇某個(gè)標(biāo)簽所包含的內(nèi)容或修改標(biāo)簽的屬性。

4．視圖選擇器

FrontPage2003支持四種視圖模式來顯示網(wǎng)頁的內(nèi)容。

·“設(shè)計(jì)”視圖：供用戶以所見即所得的方式編輯網(wǎng)頁。若沒有對(duì)網(wǎng)頁元素屬性進(jìn)行具體的設(shè)置，網(wǎng)頁的顯示效果在編輯窗口和瀏覽器中的顯示將會(huì)有細(xì)微的差別。

·“代碼”視圖：類似于文本編輯器，用于直接查看和編輯HTML代碼。

·“拆分”視圖：同時(shí)顯示“設(shè)計(jì)”視圖和“代碼”視圖。

·“預(yù)覽”視圖：在不啟動(dòng)瀏覽器的情況下查看網(wǎng)頁的大致效果。?許多網(wǎng)頁特效在“設(shè)計(jì)”視圖中是不能看到結(jié)果的，只有在瀏覽器或“預(yù)覽”視圖中才能看到?！耙晥D選擇器”就是用于在這些視圖之間進(jìn)行快速切換的工具。

5．編輯區(qū)“編輯區(qū)”的功能取決于當(dāng)前的視圖模式，在不同的模式下顯示內(nèi)容不同。具體功能見“視圖選擇器”中的視圖模式介紹。8.3.2網(wǎng)頁設(shè)計(jì)流程網(wǎng)站有大有小，規(guī)模不盡相同，內(nèi)容和表現(xiàn)形式千變?nèi)f化，但不管規(guī)模、內(nèi)容和表現(xiàn)形式如何，創(chuàng)建一個(gè)網(wǎng)站大都應(yīng)包括以下幾個(gè)步驟：

(1)建立概念。網(wǎng)站的建立開始于一個(gè)想法、一些設(shè)想或基于某種目的而要將一些信息資源發(fā)布到網(wǎng)上。

(2)資料收集和內(nèi)容組織。網(wǎng)頁所展現(xiàn)的內(nèi)容是網(wǎng)站的主要元素，不論技術(shù)如何先進(jìn)、表現(xiàn)形式如何多樣，信息內(nèi)容仍然是網(wǎng)站的主題和核心。信息設(shè)計(jì)階段的成果是一個(gè)描述網(wǎng)站總體結(jié)構(gòu)的框圖，它可以讓網(wǎng)站設(shè)計(jì)與制作人員了解網(wǎng)站的規(guī)模、各模塊(網(wǎng)頁)的相關(guān)性，也為導(dǎo)航設(shè)計(jì)提供了依據(jù)。圖8-7所示是“我的家鄉(xiāng)”網(wǎng)站的結(jié)構(gòu)框圖。圖8-7“我的家鄉(xiāng)”網(wǎng)站結(jié)構(gòu)框圖

(3)建立站點(diǎn)和制作網(wǎng)頁。設(shè)計(jì)方案確定后，且所需資料已經(jīng)收集完成，就可以進(jìn)入網(wǎng)頁制作階段。若使用專業(yè)網(wǎng)頁制作工具(如FrontPage、Dreamweaver等)建設(shè)網(wǎng)站，首先要建立站點(diǎn)，創(chuàng)建站點(diǎn)內(nèi)的目錄結(jié)構(gòu)，然后將所需的各種資料文件(主要是圖片和視頻)復(fù)制到站點(diǎn)內(nèi)相應(yīng)的文件夾中，最后制作網(wǎng)頁并保存到相應(yīng)的文件夾中。

(4)本地測(cè)試。在網(wǎng)頁的制作過程中或制作完成后，首先在本地計(jì)算機(jī)上從網(wǎng)站的首頁開始依次單擊所有的鏈接，測(cè)試所有鏈接是否可用、是否指向預(yù)期的網(wǎng)頁、網(wǎng)頁是否能正常顯示，對(duì)存在問題的網(wǎng)頁應(yīng)進(jìn)行修改后再測(cè)試，直到滿足設(shè)計(jì)要求。

(5)網(wǎng)站上傳與遠(yuǎn)程測(cè)試。當(dāng)本地測(cè)試完成后，就可以將網(wǎng)頁上傳到Web服務(wù)器，這樣任何人都可以訪問你的網(wǎng)站了。但在最終發(fā)布網(wǎng)站之前，還要進(jìn)行最后一輪測(cè)試——遠(yuǎn)程測(cè)試，即測(cè)試上傳到服務(wù)器上的網(wǎng)頁是否可以像在本地計(jì)算機(jī)上一樣正常訪問，并且所有的鏈接及內(nèi)容顯示是否正確。8.3.3以“我的家鄉(xiāng)”為例創(chuàng)建一個(gè)網(wǎng)站

1．站點(diǎn)結(jié)構(gòu)規(guī)劃及素材準(zhǔn)備站點(diǎn)結(jié)構(gòu)如圖8-7所示，網(wǎng)站共包括四個(gè)欄目：家鄉(xiāng)歷史、交通旅游、歷史名人和關(guān)于自己，其中交通旅游中包括家鄉(xiāng)地圖及景點(diǎn)介紹兩個(gè)子欄目。假定已經(jīng)收集好了相關(guān)的資料，包括文字、圖片等，如家鄉(xiāng)歷史資料、景點(diǎn)介紹及圖片等。

2．創(chuàng)建站點(diǎn)啟動(dòng)FrontPage2003，選擇“文件”菜單中的“新建”菜單項(xiàng)，然后選擇“任務(wù)窗格”中“新建網(wǎng)站”下的“其他網(wǎng)站”命令，彈出如圖8-8所示的“網(wǎng)站模板”對(duì)話框。選擇“常規(guī)”中的“空白網(wǎng)站”，在“指定新網(wǎng)站的位置(S)：”中指定網(wǎng)站位置為“D:\Hometown”，單擊“確定”按鈕完成站點(diǎn)創(chuàng)建，F(xiàn)rontPage顯示類似于圖8-6所示的界面。圖8-8“網(wǎng)站模板”對(duì)話框

3．建立文件夾和新網(wǎng)頁當(dāng)創(chuàng)建新站點(diǎn)時(shí)，F(xiàn)rontPage會(huì)自動(dòng)創(chuàng)建?_private和images兩個(gè)文件夾以及一個(gè)名為index.htm的網(wǎng)頁文件。文件夾?_private是FrontPage用來保存一些備份或臨時(shí)文件的，用戶一般不用去管它。對(duì)于一個(gè)網(wǎng)站來說一般默認(rèn)約定index.htm為網(wǎng)站的首頁(主頁)。images用于保存網(wǎng)站中用到的圖片。為了便于管理，可以按設(shè)計(jì)好的站點(diǎn)結(jié)構(gòu)再創(chuàng)建一些文件夾，將相關(guān)的網(wǎng)頁及其圖片、聲音等文件分門別類地放在不同的文件夾中。如圖8-9所示是“我的家鄉(xiāng)”網(wǎng)站的文件夾列表，其中introduce保存“家鄉(xiāng)歷史”欄目的相關(guān)文件，tour保存“交通旅游”欄目的相關(guān)文件，aboutme保存“關(guān)于我”欄目的相關(guān)文件，celebrity保存“歷史名人”欄目的相關(guān)文件。建立好文件夾后，再在各自的文件夾中創(chuàng)建相應(yīng)的網(wǎng)頁。圖8-9網(wǎng)站文件夾列表創(chuàng)建文件和網(wǎng)頁的方法為：鼠標(biāo)右擊任一文件夾，選擇“新建”菜單中的“空白網(wǎng)頁”或“文件夾”命令，便在此文件中創(chuàng)建了一個(gè)網(wǎng)頁或文件夾，然后重命名即可。注意：網(wǎng)站中所有的文件夾和文件的名稱必須用英文字母或數(shù)字，不能用其他字符或漢字，否則可能引起網(wǎng)頁不能正確顯示。

4．編輯網(wǎng)頁

1)編輯文本文本的插入和編輯比較簡(jiǎn)單，操作方法和Word基本相同，文字的格式化也和Word基本類似，在此不再贅述。

2)插入圖片方法一：首先選擇插入位置，然后選擇“插入”菜單中的“圖片”→“來自文件”命令，在彈出的對(duì)話框中選擇待插入的圖片，最后單擊“確定”按鈕即可。方法二：打開“文件夾列表”，在文件列表中選擇待插入的圖片文件，將其拖到待插入的位置即可。圖片插入完成后，可以對(duì)其編輯以達(dá)到預(yù)期的效果，方法與Word編輯圖片相同。

3)插入超鏈接在FrontPage中創(chuàng)建超鏈接非常容易，首先選擇要作為“觸發(fā)點(diǎn)”的文字或圖片，然后選擇“插入”菜單中的“超鏈接”命令或右鍵單擊“觸發(fā)點(diǎn)”并在快捷菜單中選擇“超鏈接”命令，在彈出的對(duì)話框中選擇單擊此“觸發(fā)點(diǎn)”時(shí)待打開的網(wǎng)頁或輸入待打開的網(wǎng)址。下面以在“我的家鄉(xiāng)”網(wǎng)站首頁的導(dǎo)航欄中建立鏈接為例，介紹創(chuàng)建超鏈接的方法。首先選擇“觸發(fā)點(diǎn)”，這里選擇“家鄉(xiāng)歷史”作為“觸發(fā)點(diǎn)”創(chuàng)建鏈接，如圖8-10所示。然后通過“插入”菜單中“超鏈接”命令打開“插入超鏈接”對(duì)話框，選擇“introduce”文件夾中的“history.htm”網(wǎng)頁文件，如圖8-11所示，單擊“確定”按鈕后，超鏈接創(chuàng)建完成。圖8-10選擇“觸發(fā)點(diǎn)”圖8-11“插入超鏈接”對(duì)話框

4)設(shè)置網(wǎng)頁屬性通過“網(wǎng)頁屬性”可以設(shè)置網(wǎng)頁自身的一些屬性，如網(wǎng)頁的標(biāo)題、網(wǎng)頁背景(背景色和背景圖片)、背景音樂和字體顏色等。常見的網(wǎng)頁屬性設(shè)置方法為：在正在編輯的網(wǎng)頁中單擊右鍵，在彈出的快捷菜單中選擇“網(wǎng)頁屬性”命令，然后在此對(duì)話框中進(jìn)行相應(yīng)設(shè)置。打開“網(wǎng)頁屬性”對(duì)話框，如圖8-12所示。圖8-12“網(wǎng)頁屬性”對(duì)話框

(1)“常規(guī)”選項(xiàng)卡：用來設(shè)置網(wǎng)頁的標(biāo)題和背景音樂。

·標(biāo)題：設(shè)置網(wǎng)頁的標(biāo)題，將來會(huì)顯示在瀏覽器的標(biāo)題欄中。

·背景音樂/位置：設(shè)置打開網(wǎng)頁時(shí)要播放的音樂文件。注意：指定的文件必須在站點(diǎn)文件夾中。

(2)格式選項(xiàng)卡：設(shè)置網(wǎng)頁的背景色或背景圖片、文本字體顏色及超鏈接的顏色。

5．在網(wǎng)頁中插入特效通過FrontPage不但可以輕松地編輯文字、插入圖片，還可以在網(wǎng)頁中插入一些特效，如滾動(dòng)字幕、交換式按鈕等。

1)插入滾動(dòng)字幕滾動(dòng)字幕是不斷滾動(dòng)或來回振蕩的文字，用于顯示網(wǎng)站的歡迎詞、提示信息或滾動(dòng)新聞等，不僅可以引起瀏覽者的關(guān)注，而且可以增加網(wǎng)頁的動(dòng)態(tài)效果。插入滾動(dòng)字幕的方法為：首先將光標(biāo)定位到待插入字幕的位置，選擇“插入”菜單中的“Web組件”命令，打開“插入Web組件”對(duì)話框。然后在該對(duì)話框的“組件類型”欄中選擇“動(dòng)態(tài)效果”，在“選擇一種效果”欄中選擇“字幕”，單擊“完成”按鈕，打開“字幕屬性”對(duì)話框，對(duì)字幕進(jìn)行設(shè)置，如圖8-13所示。圖8-13“字幕屬性”對(duì)話框?qū)傩詫?duì)話框中各屬性含義如下：

·文本：用于輸入要插入的滾動(dòng)文字。

·方向：指定文字滾動(dòng)的方向。

·速度：“延遲”用于設(shè)置每次滾動(dòng)的時(shí)間間隔，單位為毫秒；“數(shù)量”設(shè)置每次滾動(dòng)的距離，單位為像素。

表現(xiàn)方式：設(shè)置字幕的滾動(dòng)方式。有三種滾動(dòng)方式：“滾動(dòng)條”方式——字幕沿一個(gè)方向循環(huán)滾動(dòng)；“幻燈片”方式——字幕文字在碰到邊界時(shí)自動(dòng)消失，然后在另一邊出現(xiàn)并重新滾動(dòng)；“交替”方式——文字在字幕框中來回振蕩滾動(dòng)。

·大?。涸O(shè)置字幕框的大小。

·重復(fù)：設(shè)置字幕滾動(dòng)的循環(huán)次數(shù)，若選擇“連續(xù)”選項(xiàng)，則字幕無限制循環(huán)滾動(dòng)。

背景色：設(shè)置字幕框的背景。設(shè)置完所有屬性后，保存網(wǎng)頁，在瀏覽器中就可以看到滾動(dòng)字幕的效果。

2)插入交互式按鈕交互式按鈕是一種外觀可以隨用戶的不同操作而改變的按鈕。使用交互式按鈕可以制作很漂亮、具有動(dòng)感的導(dǎo)航欄。創(chuàng)建交換式按鈕的方法為：?jiǎn)螕簟安迦搿辈藛沃械摹敖粨Q式按鈕”命令，打開“交互式按鈕”對(duì)話框，如圖8-14所示。其中包括以下三個(gè)選項(xiàng)卡：圖8-14“交互式按鈕”對(duì)話框

(1)“按鈕”選項(xiàng)卡：設(shè)置按鈕的樣式以及在按鈕上顯示的文字等。

·預(yù)覽：用來預(yù)覽按鈕的樣式和效果。

·按鈕：用來選擇按鈕的樣式。

·文本：設(shè)置在按鈕上顯示的文字。

·鏈接：設(shè)置當(dāng)用戶單擊按鈕時(shí)打開網(wǎng)頁的URL地址。

(2)“字體”選項(xiàng)卡：設(shè)置按鈕文本的字體以及文字正常時(shí)、鼠標(biāo)懸停時(shí)和鼠標(biāo)按下時(shí)的顏色。

(3)“圖像”選項(xiàng)卡：設(shè)置創(chuàng)建交互式按鈕時(shí)所產(chǎn)生的圖片的大小及保存時(shí)所采用的格式。下面以為“歷史名人”為例，說明創(chuàng)建一個(gè)交互式按鈕的基本步驟。

(1)在“交互式按鈕”對(duì)話框“按鈕”選項(xiàng)卡的“文本”欄中輸入“歷史名人”，“鏈接”欄中輸入“celebrity/LiBai.htm”。

(2)在“字體”選項(xiàng)卡中設(shè)置“初始字體顏色”(正常色)為黑色、“懸停時(shí)字體顏色”為綠色、“按下時(shí)字體顏色”為紅色。

(3)在“圖像”選項(xiàng)卡中的欄目使用默認(rèn)值，最后單擊“確定”按鈕，在彈出的“保存”對(duì)話框中指定產(chǎn)生的圖片保存的位置(最好保存到統(tǒng)一的圖片文件夾中)，創(chuàng)建完成，在瀏覽器中就可以查看效果了。8.4網(wǎng)站發(fā)布與測(cè)試

8.4.1確認(rèn)發(fā)布位置

1.?ISP提供商提供的Web站點(diǎn)空間在Internet中有許多ISP提供免費(fèi)的Web空間供初學(xué)者使用。通過百度搜索“免費(fèi)Web空間”便可以找到。下面以“常來網(wǎng)免費(fèi)空間”()為例介紹如何申請(qǐng)注冊(cè)Web空間。在瀏覽器中輸入網(wǎng)址“”，進(jìn)入網(wǎng)站首頁，如圖8-15所示。圖8-15“常來網(wǎng)免費(fèi)空間”首頁單擊“馬上注冊(cè)”按鈕，在新的頁面中單擊“我同意”按鈕，表示同意網(wǎng)站協(xié)議。在接下來的頁面中輸入登錄網(wǎng)站的用戶名、密碼、聯(lián)系方式等信息按鈕，單擊“注冊(cè)”按鈕，若沒有出錯(cuò)將會(huì)進(jìn)入最后的頁面，單擊“單擊這里激活你的帳號(hào)”按鈕，即可注冊(cè)成功?，F(xiàn)在便可以回到首頁通過剛才注冊(cè)的帳號(hào)登錄并管理你的網(wǎng)站了。

2.自己架設(shè)Web服務(wù)器具體架設(shè)Web服務(wù)器的方法參見6.4.1節(jié)“WWW服務(wù)配置與管理”部分的內(nèi)容。在架設(shè)好的Web服務(wù)器中為將要發(fā)布的網(wǎng)站創(chuàng)建一個(gè)新的站點(diǎn)或一個(gè)虛擬目錄，并記錄其在文件系統(tǒng)中的位置(路徑)，便于下一步進(jìn)行站點(diǎn)發(fā)布。8.4.2發(fā)布站點(diǎn)網(wǎng)站設(shè)計(jì)完成并確認(rèn)了發(fā)布的位置后，就可以選擇適合的發(fā)布方法將網(wǎng)站發(fā)布到Web服務(wù)器上。通常有兩種途徑：一是使用FTP軟件將網(wǎng)站內(nèi)容上傳到Web服務(wù)器；二是應(yīng)用FrontPage提供的發(fā)布網(wǎng)站功能，通過此功能既可以將網(wǎng)站發(fā)布到遠(yuǎn)程ISP提供的Web空間，也可以將網(wǎng)站發(fā)布到本地的Web服務(wù)器(自己架設(shè)的服務(wù)器)上。站點(diǎn)發(fā)布方法為：選擇“文件”菜單中的“發(fā)布網(wǎng)站”命令，彈出如圖8-16所示的“遠(yuǎn)程站點(diǎn)屬性”對(duì)話框。通過此對(duì)話框就可以將當(dāng)前編輯的站點(diǎn)發(fā)布到Web服務(wù)器上。圖8-16“遠(yuǎn)程網(wǎng)站屬性”對(duì)話框“遠(yuǎn)程網(wǎng)站屬性”對(duì)話框中各選項(xiàng)卡的功能如下：

(1)“遠(yuǎn)程網(wǎng)站”選項(xiàng)卡：選擇遠(yuǎn)程Web服務(wù)器類型、設(shè)置遠(yuǎn)程網(wǎng)站位置。其中“遠(yuǎn)程Web服務(wù)器類型”包括了現(xiàn)在流行的四種Web服務(wù)器類型：

·FrontPage或SharePointServices：指Web服務(wù)器支持FrontPage服務(wù)器擴(kuò)展的Web服務(wù)器，IIS支持FrontPage擴(kuò)展。

·WebDAV：WebDAV是HTTP1.1通信協(xié)議的擴(kuò)展，支持WebDAV的Web服務(wù)器就可以通過WebDAV客戶端應(yīng)用程序直接對(duì)Web服務(wù)器進(jìn)行讀/寫，因此通過此協(xié)議就可以將網(wǎng)站發(fā)布到Web服務(wù)器，IIS也支持WebDAV協(xié)議。

·FTP：這是Internet中最為流行的文件傳輸方法，只要提供正確的用戶名和口令就可以將網(wǎng)站上傳到服務(wù)器上。

·文件系統(tǒng)：用于將網(wǎng)頁發(fā)布到本地的Web服務(wù)器(自己架設(shè)的Web服務(wù)器)上。

(2)“優(yōu)化HTML”選項(xiàng)卡：用于在網(wǎng)站發(fā)布時(shí)對(duì)其中的網(wǎng)頁進(jìn)行優(yōu)化，如清除網(wǎng)頁文件中的注釋、網(wǎng)頁中的一些無用空格等，減小網(wǎng)頁的大小以加速網(wǎng)頁的傳輸。

(3)“發(fā)布”選項(xiàng)卡：設(shè)定發(fā)布網(wǎng)站方式，如是全部上傳還是只上傳被修改的部分等。8.4.3測(cè)試站點(diǎn)將網(wǎng)站發(fā)布到Web

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(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ǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

《計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)與應(yīng)用》課件第8章

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

《計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)與應(yīng)用》課件第8章

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔