計(jì)算機(jī)第8章課件_第1頁(yè)
計(jì)算機(jī)第8章課件_第2頁(yè)
計(jì)算機(jī)第8章課件_第3頁(yè)
計(jì)算機(jī)第8章課件_第4頁(yè)
計(jì)算機(jī)第8章課件_第5頁(yè)
已閱讀5頁(yè)，還剩32頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第八章

網(wǎng)頁(yè)制作

第八章網(wǎng)頁(yè)制作8.1概述8.2HTML簡(jiǎn)介8.3網(wǎng)頁(yè)制作8.4網(wǎng)頁(yè)布局8.5創(chuàng)建表單頁(yè)面8.6網(wǎng)頁(yè)的發(fā)布

8.1概述

8.1.1網(wǎng)站8.1.2服務(wù)器與瀏覽器8.1.3網(wǎng)頁(yè)8.1.4網(wǎng)頁(yè)制作工具8.1.5網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)計(jì)算機(jī)語(yǔ)言8.1.4網(wǎng)頁(yè)制作工具

1.網(wǎng)頁(yè)制作三劍客Dreamweaver、Flash、Fireworks被稱為網(wǎng)頁(yè)制作“三劍客”。（1）Dreamweaver是美國(guó)著名的軟件開發(fā)商Macromedia公司推出的一個(gè)所見即所得的可視化網(wǎng)站開發(fā)工具，該軟件同時(shí)適用于初學(xué)者和專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師。（2）Fireworks也是由Macromedia公司開發(fā)的一種工具，它以處理網(wǎng)頁(yè)圖片為特長(zhǎng)，并可以輕松創(chuàng)造GIF動(dòng)畫。（3）Flash是當(dāng)今Internet最流行的動(dòng)畫作品的制作工具，并成為事實(shí)上的交互式矢量動(dòng)畫標(biāo)準(zhǔn)。8.1.4網(wǎng)頁(yè)制作工具2.MicrosoftFrontPage2003

FrontPage2003是微軟公司推出的MicrosoftOffice2003家族的成員之一，與Office的其他組件高度融合，界面友好，功能強(qiáng)大，易學(xué)易用。FrontPage2003的主要功能是設(shè)計(jì)、制作、管理網(wǎng)頁(yè)或站點(diǎn)。8.1.5網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)計(jì)算機(jī)語(yǔ)言

1.HTML

HTML是HypertextMarkupLanguage的縮寫，是WWW技術(shù)的基礎(chǔ)，它使用一些約定的標(biāo)記（Tag）對(duì)文本進(jìn)行標(biāo)注，定義網(wǎng)頁(yè)的數(shù)據(jù)格式，描述Web頁(yè)中的信息，控制文本的顯示。把用HTML語(yǔ)言編寫的文件稱為HTML文件，把HTML文檔稱為網(wǎng)頁(yè)（WebPage）。用HTML語(yǔ)言編寫的網(wǎng)頁(yè)實(shí)際上是一種文本文件，它以.htm或.html為擴(kuò)展名。8.1.5網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)計(jì)算機(jī)語(yǔ)言2.XML

XML是ExtensibleMarkupLanguage的縮寫，中文名為可擴(kuò)展標(biāo)記語(yǔ)言。其主要用途是在Internet上傳遞或處理數(shù)據(jù)。XML與HTML不是并列的概念，它可以說是HTML的補(bǔ)丁，以彌補(bǔ)HTML的不足。比如，在HTML中不允許用戶自定義控制標(biāo)識(shí)符，而在XML中允許用戶這樣做。XML文件的擴(kuò)展名為.xml。8.1.5網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)計(jì)算機(jī)語(yǔ)言3.CSS

CSS是CascadingStyleSheets的縮寫，中文名為層疊樣式表，主要用來對(duì)網(wǎng)頁(yè)數(shù)據(jù)進(jìn)行編排、格式化、顯示、特效等。傳統(tǒng)的HTML不能對(duì)網(wǎng)頁(yè)數(shù)據(jù)進(jìn)行隨心所欲的格式化，而CSS語(yǔ)言卻滿足了這種要求，它對(duì)網(wǎng)頁(yè)的特殊顯示、特殊效果提供了很大的幫助。目前，大多數(shù)網(wǎng)頁(yè)都用了CSS。8.1.5網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)計(jì)算機(jī)語(yǔ)言4.DHTML

DHTML是動(dòng)態(tài)的HTML，這種技術(shù)要求網(wǎng)頁(yè)具備動(dòng)態(tài)功能，如動(dòng)態(tài)交互、動(dòng)態(tài)更新等。事實(shí)上，這是要求我們應(yīng)該掌握Web中所包含的對(duì)象、對(duì)象集，以及對(duì)象的屬性、方法、事件等，然后用程序處理這些對(duì)象相關(guān)的屬性、方法，讓事件去完成一定的處理程序，以達(dá)到網(wǎng)頁(yè)的動(dòng)態(tài)效果。8.1.5網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)計(jì)算機(jī)語(yǔ)言5.腳本語(yǔ)言腳本（Script）語(yǔ)言是嵌入到HTML代碼中的程序，根據(jù)運(yùn)行的位置不同把它分為客戶端腳本和服務(wù)器端腳本?？蛻舳四_本是運(yùn)行在客戶端的程序，服務(wù)器端腳本是運(yùn)行在服務(wù)器端的程序。這里所說的客戶端指的是瀏覽器，服務(wù)器端指的是Web服務(wù)器。目前較為流行的腳本語(yǔ)言有JavaScript和VBScript。8.2HTML簡(jiǎn)介

HTML文件是一種純文本文件，我們可以使用任何文本處理軟件（如記事本）來創(chuàng)建或處理HTML文件。

8.2.1HTML語(yǔ)言概述

8.2.2常用的HTML標(biāo)記8.2.1HTML語(yǔ)言概述HTML語(yǔ)言是由世界性的標(biāo)準(zhǔn)化組織W3C（WorldWideWebConsortium）制定的，通過瀏覽可以了解到HTML標(biāo)準(zhǔn)的最新動(dòng)態(tài)。下面介紹HTML文件的基本構(gòu)成和層次結(jié)構(gòu)。1.HTML文件標(biāo)記Internet中的每一個(gè)HTML文件都包括文本內(nèi)容和HTML標(biāo)記兩部分。其中，HTML標(biāo)記負(fù)責(zé)控制文本顯示的外觀和版式，并為瀏覽器指定各種鏈接的圖像、聲音和其他對(duì)象的位置。多數(shù)HTML標(biāo)記的書寫格式如下：<標(biāo)記名>文本內(nèi)容</標(biāo)記名>標(biāo)記名寫在“<>”內(nèi)。多數(shù)HTML標(biāo)記同時(shí)具有起始和結(jié)束標(biāo)記，并且成對(duì)出現(xiàn)，但也有些HTML標(biāo)記沒有結(jié)束標(biāo)記。另外，HTML標(biāo)記不區(qū)分大小寫。8.2.1HTML語(yǔ)言概述某些HTML標(biāo)記還具有一些屬性，這些屬性指定對(duì)象的特性，如背景顏色、文本字體及大小、對(duì)齊方式等。屬性一般放在“起始標(biāo)記”中，格式如下：<標(biāo)記名屬性1=值1屬性2=值2…>文本內(nèi)容</標(biāo)記名>

其中標(biāo)記名和屬性之間用空格分隔。如果標(biāo)記有多種屬性，屬性之間也要用空格分隔。8.2.1HTML語(yǔ)言概述2.HTML網(wǎng)頁(yè)的結(jié)構(gòu)現(xiàn)在我們先看一個(gè)簡(jiǎn)單的HTML文件，從中體會(huì)用HTML語(yǔ)言編寫網(wǎng)頁(yè)時(shí)的層次結(jié)構(gòu)。

【例8-1】用HTML語(yǔ)言編寫一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。<html><head><title>我的第一個(gè)Web頁(yè)</title></head><body><h1>歡迎進(jìn)入HTML世界！</h1><p>這里我們首先介紹HTML語(yǔ)言的基本知識(shí)和語(yǔ)法。然后，講授如何使用HTML語(yǔ)言編寫您的Web頁(yè)面。</p></body></html>8.2.1HTML語(yǔ)言概述將上述代碼用文本編輯器編輯并保存為一個(gè)擴(kuò)展名為.htm的文件，雙擊該文件圖標(biāo)，在瀏覽器中看到如下圖所示的結(jié)果。圖9-18.2.1HTML語(yǔ)言概述

從上例可以看出，一般HTML文件都是以<html>開頭，以</html>結(jié)束。其文件結(jié)構(gòu)由以下兩部分組成：1）頭部（Head）

HTML文件的頭部由<head>和</head>標(biāo)記定義。通常情況下，文件的標(biāo)題、語(yǔ)言字符集信息等都放在頭部信息中。最常用到的標(biāo)記是<title>…</title>，它用于定義網(wǎng)頁(yè)文件的標(biāo)題，當(dāng)該網(wǎng)頁(yè)文件被打開后，網(wǎng)頁(yè)文件的標(biāo)題將出現(xiàn)在瀏覽器的標(biāo)題欄中。8.2.1HTML語(yǔ)言概述2）正文主體（Body）正文主體是HTML文件的核心內(nèi)容，由<body>和</body>標(biāo)記定義。<body>標(biāo)記具有一些常用的屬性，格式如下：<bodybgcolor=#ncolor=#n>…</body>其中，bgcolor為背景顏色，color為文本顏色。n為六位十六進(jìn)制數(shù)。如果網(wǎng)頁(yè)使用背景圖像，格式如下：<bodybackground="路徑/圖片文件名">…</body>

HTML對(duì)格式的要求并不嚴(yán)格，當(dāng)HTML文件被瀏覽器掃描時(shí)，所有包含在文件中的空格、回車等均被忽略。因此你可以將一行寫成兩行或多行，在瀏覽器中結(jié)果是相同的。8.2.1HTML語(yǔ)言概述8.2.2常用的HTML標(biāo)記

1.文本布局1）段落標(biāo)記<p><p>…</p>標(biāo)記指定文檔中一個(gè)獨(dú)立的段落。通過設(shè)置align屬性，控制段落的對(duì)齊方式，其值可以是left、center、right、justify，分別表示左對(duì)齊、居中、右對(duì)齊和兩端對(duì)齊，默認(rèn)值為左對(duì)齊。使用格式如下：<palign=對(duì)齊方式>…</p>2）換行標(biāo)記<br><br>標(biāo)記可以強(qiáng)制文本換行。該標(biāo)記只有起始標(biāo)記。3）水平線標(biāo)記<hr>水平線標(biāo)記<hr>用于在網(wǎng)頁(yè)中插入一條水平線。2.文字格式

HTML語(yǔ)言中用于文字格式化的標(biāo)記有：

1）標(biāo)題標(biāo)記<hn>格式為：<hn

屬性=屬性值>標(biāo)題文字內(nèi)容</hn>其中n說明大小級(jí)別，取值范圍為1到6的數(shù)字。把標(biāo)題分為6級(jí)，即h1~h6，其中h1文字最大，h6文字最小。2）字體標(biāo)記<font>

字體標(biāo)記用來對(duì)文字格式進(jìn)行設(shè)置，主要具有以下屬性：（1）size屬性：控制文字的大小，格式如下：<fontsize=n>…</font>

其中n的取值范圍為1～7的數(shù)字，默認(rèn)值為3。

<font>標(biāo)記和<hn>標(biāo)記都可以控制文字的大小。一般情況下，文章的標(biāo)題最好由<hn>標(biāo)記控制，而其余的文字由<font>標(biāo)記控制。相比較而言，<font>對(duì)字體的控制更加靈活。（2）color屬性：控制文字的顏色，格式如下：

<fontcolor=#n或英文表示的顏色>…</font>

其中n是一個(gè)十六進(jìn)制的六位數(shù)。（3）face屬性：指明文字使用的字體，格式如下：

<fontface=字體名>…</font>

其中字體名的選擇由Windows操作系統(tǒng)安裝的字體決定。如：宋體、楷體_GB2312、TimesNewRoman、Arial等。3）字形標(biāo)記字形標(biāo)記用于設(shè)置文字的粗體、斜體、下劃線、上標(biāo)、下標(biāo)等，如表所示：標(biāo)記格式字形<b>…</b>粗體<i>…</i>斜體<u>…</u>下劃線<sup>…</sup>上標(biāo)<sub>…</sub>下標(biāo)3.圖片

<img>標(biāo)記將圖片插入網(wǎng)頁(yè)中，用于設(shè)置圖片的大小以及相鄰文字的排列方式。該標(biāo)記具有以下屬性：（1）src屬性：指明圖片文件所在的位置。格式如下：

<img

src=URL>

其中URL指圖片文件存放的位置。（2）alt屬性：圖片的文字說明，當(dāng)鼠標(biāo)指針指向圖片時(shí)，該圖片的說明性文字彈出。格式如下：

<img

src=URLalt=說明文字>（3）width和height屬性：設(shè)置圖片顯示區(qū)域的寬度和高度。格式如下：

<img

src=URLwidth=n1height=n2>

其中width和height屬性的取值n1和n2，可以是像素?cái)?shù)或百分比。（4）border屬性：設(shè)置圖片文件的邊框。格式如下：

<img

src=URLborder=n>

其中n為像素?cái)?shù)。（5）align屬性：設(shè)置圖片相對(duì)于文本的位置關(guān)系。格式為：<img

src=URLalign=對(duì)齊方式>

對(duì)齊方式可以是：top（頂端對(duì)齊）、middle（相對(duì)垂直居中）、bottom（相對(duì)底邊對(duì)齊）、left（左對(duì)齊）、right（右對(duì)齊）、texttop（文本上方）等。4.超鏈接

在HTML語(yǔ)言中，<a>和</a>標(biāo)記用于設(shè)置網(wǎng)頁(yè)中的超鏈接，href屬性指明被超鏈接的文件地址。格式如下：

<ahref=URL>超鏈接文本</a>

用于表示超鏈接的文本一般顯示為藍(lán)色并且加下劃線。在瀏覽器中，當(dāng)鼠標(biāo)指針指向該文本時(shí)，箭頭變?yōu)槭中?，并在瀏覽器的狀態(tài)欄中顯示該超鏈接的地址。若使用圖片做超鏈接，可使用如下格式完成：

<ahref=URL1><img

src=URL2></a>5.表格在網(wǎng)頁(yè)中插入一個(gè)表格，需要用到一組HTML標(biāo)記。定義表格的有關(guān)標(biāo)記如下：

<table>…</table> 定義表格區(qū)域。

<caption>…</caption>定義表格標(biāo)題。

<th>…</th> 定義表格頭。

<tr>…</tr> 定義表格行。

<td>…</td> 定義表格單元格。8.3網(wǎng)

頁(yè)

制

作8.3.1FrontPage2003概述8.3.2創(chuàng)建站點(diǎn)8.3.3網(wǎng)頁(yè)編輯8.3.4插入對(duì)象8.3.5創(chuàng)建超鏈接8.3.1FrontPage2003概述

FrontPage2003可以按下列方法啟動(dòng)：?jiǎn)螕簟伴_始”按鈕，在“開始”菜單中指向“程序”→“MicrosoftOffice”→“MicrosoftOfficeFrontPage2003”；通過創(chuàng)建FrontPage2003的快捷方式啟動(dòng)。

FrontPage2003的退出可以使用以下幾種方式：選取“文件”菜單中的“退出”；單擊窗口右上角的“關(guān)閉”按鈕；按快捷鍵Alt+F4等。8.3.1FrontPage2003概述啟動(dòng)FrontPage2003后，可以看到以下幾種視圖，用戶可以在不同的視圖中進(jìn)行相應(yīng)的操作。1.網(wǎng)頁(yè)視圖網(wǎng)頁(yè)視圖是FrontPage2003中最常用的工作界面，網(wǎng)頁(yè)的創(chuàng)建、編輯、預(yù)覽等基本操作都是在此視圖中進(jìn)行的。FrontPage2003提供了四種網(wǎng)頁(yè)視圖模式，即設(shè)計(jì)、拆分、代碼、預(yù)覽。2.文件夾視圖文件夾視圖用于管理文件和文件夾，使用它可以直接處理文件和文件夾以及組織網(wǎng)站內(nèi)容。在此視圖中，可以創(chuàng)建、刪除、復(fù)制和移動(dòng)文件夾，具體操作與在Windows資源管理器中類似。3.遠(yuǎn)程網(wǎng)站視圖遠(yuǎn)程網(wǎng)站視圖用于站點(diǎn)和站點(diǎn)內(nèi)文件的發(fā)布。在遠(yuǎn)程網(wǎng)站視圖中查看文件時(shí)，文件將用圖標(biāo)和描述性文字進(jìn)行標(biāo)記以表示發(fā)布狀態(tài)。8.3.1FrontPage2003概述4.報(bào)表視圖報(bào)表視圖用于查看站點(diǎn)的各種情況，如文件內(nèi)容、更新鏈接、文件列表及變化情況等。

5.導(dǎo)航視圖利用導(dǎo)航視圖可以清晰地看到當(dāng)前站點(diǎn)的主頁(yè)和其他網(wǎng)頁(yè)的鏈接關(guān)系，也可以設(shè)置站點(diǎn)的導(dǎo)航結(jié)構(gòu)或添加、刪除網(wǎng)頁(yè)。6.超鏈接視圖超鏈接視圖將當(dāng)前站點(diǎn)顯示為鏈接文件的一個(gè)網(wǎng)絡(luò)，它們表示了站點(diǎn)中各個(gè)網(wǎng)頁(yè)之間的相互鏈接關(guān)系。利用超鏈接視圖可以管理站點(diǎn)中各個(gè)網(wǎng)頁(yè)的超鏈接。7.任務(wù)視圖任務(wù)視圖主要用于創(chuàng)建和管理任務(wù)。任務(wù)視圖以列格式顯示網(wǎng)站中的所有任務(wù)，并在各個(gè)標(biāo)題下提供有關(guān)各項(xiàng)任務(wù)的當(dāng)前信息。

8.3.4插入對(duì)象

1.插入水平線在網(wǎng)頁(yè)中輸入文本內(nèi)容后，還可在不同的段落、行之間添加水平線，水平線將網(wǎng)頁(yè)分割成幾個(gè)部分，使得網(wǎng)頁(yè)更具條理性。具體操作步驟如下：（1）在準(zhǔn)備插入水平線的位置設(shè)置插入點(diǎn)；（2）單擊“插入”菜單的“水平線”命令，插入水平線。要修改水平線的外觀，可以雙擊水平線，打開“水平線屬性”對(duì)話框。“寬度”框用于設(shè)置水平線的寬度，“高度”框用于設(shè)置水平線的高度，“對(duì)齊方式”用于設(shè)置水平線在網(wǎng)頁(yè)內(nèi)水平對(duì)齊的方式，“顏色”列表框用于設(shè)置水平線的顏色，選中“實(shí)線（無陰影）”復(fù)選框時(shí)，水平線將被設(shè)成實(shí)心線。要為線條指定自定義樣式或其他格式，可以使用“樣式”按鈕進(jìn)行設(shè)置。返回8.3.4插入對(duì)象

2.插入圖片圖片可以使網(wǎng)頁(yè)變得生動(dòng)活潑，并能吸引用戶的注意。1）圖片文件的格式在WWW上常用的圖像文件格式是JPEG和GIF，它們都是壓縮的圖像格式，文件的信息量小，適合于網(wǎng)絡(luò)傳輸，因此被廣泛地應(yīng)用在Web站點(diǎn)的設(shè)計(jì)中。GIF（GraphicalInterchangeFormat，圖形交換格式）采用無損壓縮方式，其主要特征是支持動(dòng)畫、透明度、圖形漸進(jìn)，但GIF圖像包含的顏色不能超過256種。JPEG（JointPhotographExpertGroup，聯(lián)合圖像專家組）格式是專為有幾百萬(wàn)種顏色的照片和圖形設(shè)計(jì)的，它采用有損壓縮方式，以犧牲圖片質(zhì)量換取大的壓縮比例。JPEG格式支持真彩色（24位色），并且在壓縮大的圖像方面已被證明很有效。2.插入圖片2）插入圖片和設(shè)置圖片屬性（方法同Word）3）編輯圖片利用“圖片”工具欄能夠完成一些常用的圖像編輯功能。4）保存圖片插入圖片后保存網(wǎng)頁(yè)，如果圖片不在網(wǎng)站文件夾中，將出現(xiàn)“保存嵌入式文件”對(duì)話框。如果圖片在網(wǎng)站文件夾中，就不會(huì)出現(xiàn)此對(duì)話框。

8.3.4插入對(duì)象3.插入字幕在制作網(wǎng)頁(yè)時(shí)，可以將網(wǎng)頁(yè)中的文字做成由左至右，或由右至左移動(dòng)的動(dòng)態(tài)效果，使網(wǎng)頁(yè)更加形象生動(dòng)。具體操作步驟如下：（1）將插入點(diǎn)設(shè)置在要插入移動(dòng)字幕的位置或者選中作為移動(dòng)字幕的文本，單擊“插入”菜單的“Web組件”命令，彈出“插入Web組件”對(duì)話框，在對(duì)話框的“組件類型”列表框中選擇“動(dòng)態(tài)效果”，在“選擇一種效果”列表

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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ì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論