第4章網(wǎng)頁(yè)制作與發(fā)布

上傳人：春*** IP屬地：天津上傳時(shí)間：2023-03-09 格式：PPT 頁(yè)數(shù)：55 大?。?39KB 積分：50 舉報(bào) 版權(quán)申訴

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

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

文檔簡(jiǎn)介

HTML教程HTML入門

HTML基本構(gòu)架頁(yè)面布局與文字設(shè)計(jì)列表TABLE表格

文件之間的鏈接

多媒體效果

多視窗口FRAMESHTML入門HTML：HypertextMarkedLanguage，即超文本標(biāo)記語言,是一種描述文檔結(jié)構(gòu)的語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)（如UNIX，WINDOWS等）。超文本：與普通文本相對(duì)應(yīng),是因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫、影視等內(nèi)容，因?yàn)樗梢詮囊粋€(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界各地主機(jī)的文件連接。HTML語言的構(gòu)成HTML文件由標(biāo)簽(記)、代碼和注釋組成。標(biāo)記：HTML中用來控制文字、圖形等顯示方式的符號(hào)。如

<fontsize=“7”color=“#0000ff”>網(wǎng)頁(yè)</font>上面的標(biāo)簽(記)FONT里面包含了屬性和值注釋：<!注釋內(nèi)容>擴(kuò)展名為：*.htm或*.html。HTML不區(qū)分大小寫。多數(shù)HTML標(biāo)記可以嵌套，但不可以交叉。HTML的基本結(jié)構(gòu)文檔頭、文檔體<HTML>

<HEAD>

頭部信息

</HEAD>

<BODY>

文檔主體，正文部分

</BODY></HTML>HTML的基本結(jié)構(gòu)(cont.)下面是一個(gè)最基本的超文本文檔的源代碼：<HTML>

<HEAD>

<TITLE>一個(gè)簡(jiǎn)單的HTML示例</TITLE>

</HEAD>

<BODY>

<H3>歡迎訪問我的主頁(yè)</H3>

<BR>

<HR>

<FONTSIZE=3>

我會(huì)努力學(xué)好HTML標(biāo)記語言的！

</FONT>

</CENTER>

</BODY>

</HTML>超文本中的標(biāo)簽單標(biāo)簽

<標(biāo)簽名稱>如:<BR>雙標(biāo)簽

<標(biāo)簽>內(nèi)容</標(biāo)簽>如:<B>粗體</B>

標(biāo)簽屬性

<標(biāo)簽名字屬性1屬性2屬性3…>如:<HRSIZE=3ALIGN=LEFTWIDTH="75%">

頁(yè)面布局及文字設(shè)計(jì)標(biāo)題換行<BR>段落標(biāo)簽<P>水平線段<HR>文字的大小設(shè)置文字的字體與樣式文字的顏色位置控制綜合示例標(biāo)題HTML中提供了相應(yīng)的標(biāo)題標(biāo)簽<Hn>,其中n為標(biāo)題的等HTML總共提供六個(gè)等級(jí)的標(biāo)題，n越小，標(biāo)題字號(hào)就越大<H1>…</H1>

第一級(jí)標(biāo)題

第二級(jí)標(biāo)題

第三級(jí)標(biāo)題

第四級(jí)標(biāo)題

第五級(jí)標(biāo)題

第六級(jí)標(biāo)題換行<BR>在HTML語言規(guī)范里，每當(dāng)瀏覽器窗口被縮小時(shí)，瀏覽器會(huì)自動(dòng)將右邊的文字轉(zhuǎn)折至下一行。所以，編寫者對(duì)于自己需要斷行的地方，應(yīng)加上<BR>標(biāo)簽段落標(biāo)簽<P>文件段落的開始由<P>來標(biāo)記，段落的結(jié)束由</P>來標(biāo)記，</P>是可以省略的，因?yàn)橄乱粋€(gè)<P>的開始就意味著上一個(gè)<P>的結(jié)束<P>標(biāo)簽還有一個(gè)屬性ALING，它用來指名字符顯示時(shí)的對(duì)齊方式，一般值有CENTER、LEFT、RIGHT三種水平線段<HR>這個(gè)標(biāo)簽可以在屏幕上顯示一條水平線，用以分割頁(yè)面中的不同部分。<HR>有四個(gè)屬性：

size

水平線的寬度

width

水平線的長(zhǎng)，用占屏幕寬度的百分比或象素值來表示

align

水平線的對(duì)齊方式，有LEFTRIGHTCENTER三種

noshade

線段無陰影屬性，為實(shí)心線段文字的大小設(shè)置提供設(shè)置字號(hào)大小的是FONT，F(xiàn)ONT有一個(gè)屬性SIZE，通過指定SIZE屬性就能設(shè)置字號(hào)大小，而SIZE屬性的有效值范圍為1－7，其中缺省值為3。我們可以SIZE屬性值之前加上“＋”、“－”字符，來指定相對(duì)于字號(hào)初始值的增量或減量。文字的字體與樣式HTML4.0提供了定義字體的功能，用FACE屬性來完成這個(gè)工作。FACE的屬性值可以是本機(jī)上的任一字體類型，只有對(duì)方的電腦中裝有相同的字體才可以在他的瀏覽器中出現(xiàn)你預(yù)先設(shè)計(jì)的風(fēng)格。

<fontface=“字體”>文字的字體與樣式(cont.)為了讓文字富有變化，或者為了著意強(qiáng)調(diào)某一部分，HTML提供了一些標(biāo)簽產(chǎn)生這些效果，現(xiàn)將常用的標(biāo)簽列舉如下：<B>

</B>

粗體HTML語言<I>

</I>

斜體HTML語言<U>

</U>

加下劃線HTML語言<TT>

<TT>

打字機(jī)字體HTML語言<BIG>

</BIG>

大型字體HTML語言<SMALL>

</SMALL>

小型字體HTML語言<BLINK>

</BLINK>

閃爍效果HTML語言<EM>

</EM>表示強(qiáng)調(diào)，一般為斜體HTML語言<STRONG></STRONG>表示特別強(qiáng)調(diào)，一般為粗體HTML語言<CITE></CITE>用于引證、舉例，一般為斜體HTML語言文字的顏色文字顏色設(shè)置格式如下：

<fontcolor=color_value>…</font>

這里的顏色值可以是一個(gè)十六進(jìn)制數(shù)(用“#”作為前綴)，也可以是以下16種顏色名稱

如：Black="#000000“Green="#008000"Red="#FF0000“Blue="#0000FF“Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua位置控制通過ALIGN屬性可以選擇文字或圖片的對(duì)齊方式，LEFT表示向左對(duì)齊，RIGHT表示向右對(duì)齊，CENTER表示居中。基本語法如下：

<DIVALIGN=#>

#＝left／right／center另外，ALIGN屬性也常常用在其它標(biāo)簽中，引起其內(nèi)容位置的變動(dòng)。如：<PALIGN=#>

<HRALIGN=#>

#＝left／right／center

<H1ALIGN=#〉綜合示例前面我們所講是單獨(dú)使用一個(gè)標(biāo)簽的方法，在實(shí)際的編寫中，許多標(biāo)簽和一些屬性是結(jié)合起來使用的，

比如：

<FONTCOLOR=“#”SIZE=#>文字</FONT>

或:

<B><U>文字</U></B>列表無序號(hào)列表序號(hào)列表定義性列表無序號(hào)列表無序號(hào)列表使用的一對(duì)標(biāo)簽是<ul></ul>，每一個(gè)列表項(xiàng)前使用<LI>。其結(jié)構(gòu)如下所示：

<UL>

<LI>第一項(xiàng)

<LI>第二項(xiàng)

<LI>第三項(xiàng)

</UL>序號(hào)列表序號(hào)列表和無序號(hào)列表的使用方法基本相同，它使用標(biāo)簽<OL></OL>，每一個(gè)列表項(xiàng)前使用<LI>。每個(gè)項(xiàng)目都有前后順序之分，多數(shù)用數(shù)字表示。其結(jié)構(gòu)如下所示：

<OL>

<LI>第一項(xiàng)

<LI>第二項(xiàng)

<LI>第三項(xiàng)

</OL>定義性列表定義性列表可以用來給每一個(gè)列表項(xiàng)再加上一段說明性文字，說明獨(dú)立于列表項(xiàng)另起一行顯示。在應(yīng)用中，列表項(xiàng)使用標(biāo)簽<DT>標(biāo)明，說明性文字使用<DD>表示。在定義性列表中，還有一個(gè)屬性是COMPACT,使用這個(gè)屬性后，說明文字和列表項(xiàng)將顯示在同一行。其結(jié)構(gòu)如下所示：<DL>

<DT>第一項(xiàng)<DD>敘述第一項(xiàng)的定義

<DT>第二項(xiàng)<DD>敘述第二項(xiàng)的定義

<DT>第三項(xiàng)<DD>敘述第三項(xiàng)的定義

</DL>TABLE表格

表格的基本結(jié)構(gòu)表格的標(biāo)題表格的尺寸設(shè)置表格內(nèi)文字的對(duì)齊、布局跨多行、多列的表元表格的顏色表格的基本結(jié)構(gòu)<table>...</table>

定義表格

定義標(biāo)題

<tr>

定義表行

<th>

定義表頭

<td>

定義表元(表格的具體數(shù)據(jù))

表格的標(biāo)題表格標(biāo)題的位置，可由ALIGN屬性來設(shè)置，其位置分別由表格上方和表格下方。下面為表格標(biāo)題位置的設(shè)置格式。設(shè)置標(biāo)題位于表格上方：

<captionalign=top>...</caption>

設(shè)置標(biāo)題位于表格下方：

<captionalign=bottom>...</caption>

表格尺寸設(shè)置表格的大小

一般情況下，表格的總長(zhǎng)度和總寬度是根據(jù)各行和各列的總和自動(dòng)調(diào)整的，如果我們要直接固定表格的大小，可以使用下列方式：

<tablewidth=n1height=n2>

width和height屬性分別指定表格一個(gè)固定的寬度和長(zhǎng)度，n1和n2可以用像素來表示，也可以用百分比（與整個(gè)屏幕相比的大小比例）來表示表格尺寸設(shè)置（cont.）邊框尺寸設(shè)置邊框是用border屬性來體現(xiàn)的，它表示表格的邊框邊厚度和框線。將border設(shè)成不同的值，有不同的效果。如：

<tableborder=10

width=250>

</table>表格尺寸設(shè)置（cont.）格間線寬度

格與格之間的線為格間線，它的寬度可以使用<TABLE>中的CELLSPACING屬性加以調(diào)節(jié)。格式是：

<TABLE

CELLSPACING=#>

#表示要取用的像素值例：

<tableborder=3

cellspacing=5>

</table>表格尺寸設(shè)置（cont.）內(nèi)容與格線之間的寬度

我們還可以在<TABLE>中設(shè)置CELLPADDING屬性，用來規(guī)定內(nèi)容與格線之間的寬度。格式為：

<TABLE

CELLPADDING=#>

#表示要取用的像素值例：

<tableborder=3

cellpadding=5>

</table>

表格內(nèi)文字的對(duì)齊/布局表格中數(shù)據(jù)的排列方式有兩種，分別是左右排列和上下排列。左右排列是以ALIGN屬性來設(shè)置，而上下排列則由VALIGN屬性來設(shè)置。其中左右排列的位置可分為三種：居左（left)、居右(right)和居中(center)；而上下排列基本上比較常用的有四種：上齊(top)、居中(middle)、下齊(bottom)和基線(baseline)。<tralign=#>

<thalign=#>

#=left,center,right

<tdalign=#><trvalign=#>

<thvalign=#>

#=top，middle，bottom，baseline

<tdvalign=#>

表格內(nèi)文字的對(duì)齊/布局(cont.)左右排列<tableborder=1width="200">

<tr>

<tr>

<tdalign=left>A</td><tdalign=center>B</td><tdalign=right>C</td>

</table>表格內(nèi)文字的對(duì)齊/布局(cont.)上下排列<tableborder=1width="250"height="100">

<tr>

<tr>

<tdvalign=top>A</td>

<tdvalign=middle>B</td>

<tdvalign=bottom>C</td>

<tdvalign=baseline>D</td>

</table>跨多行、多列的表元要?jiǎng)?chuàng)建跨多行、多列的表元，只需在<TH>或<TD>中加入ROWSPAN或COLSPAN屬性，這兩個(gè)屬性的值，表明了表元中要跨越的行或列的個(gè)數(shù)?？缍嗔械谋碓?lt;thcolspan=#>

<tdcolspan=#>

colspan表示跨越的列數(shù)，例如colspan=2表示這一格的寬度為兩個(gè)列的寬度。跨多行的表元<throwspan=#>

<tdrowspan=#>

rowspan所要表示的意義是指跨越的行數(shù)，例如rowspan=2就表示這一格跨越表格兩個(gè)行的高度。如:<tableborder><tr><tdrowspan=2>MorningMenu</td></tr><tr><th>Food</th><th>Drink</th><th>Sweet</th></tr><tr><td>A</td><td>B</td><td>C</td></tr></table>

表格的顏色在表格中，既可以對(duì)整個(gè)表格填入底色，也可以對(duì)任何一行、一個(gè)表元使用背景色。表格的背景色彩<tablebgcolor=#>

行的背景色彩<trbgcolor=#>

表元的背景色彩<thbgcolor=#>或<tdbgcolor=#>

#=rrggbb16進(jìn)制RGB數(shù)碼,或者是下列預(yù)定義色彩名稱：

Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua

文件之間的鏈接超文本中的鏈接是其最重要的特性之一，使用者可以從一個(gè)頁(yè)面直接跳轉(zhuǎn)到其他的頁(yè)面、圖象或者服務(wù)器。一個(gè)鏈接的基本格式如：

<AHREF="資源地址">鏈接文字</A>

·標(biāo)簽<A>表示一個(gè)鏈接的開始，</A>表示鏈接的結(jié)束；

·屬性“HREF”定義了這個(gè)鏈接所指的地方；

·通過點(diǎn)擊“鏈接文字”可以到達(dá)指定的文件。

<AHREF=“http://”>寧波大學(xué)</A>本地鏈接URL鏈接目錄鏈接本地鏈接以絕對(duì)路徑表示：<AHREF=“c:\study\HTML教程\link01.htm”>文件的鏈接</A>

以相對(duì)路徑表示：<AHREF=“l(fā)ink01.htm”>文件的鏈接</A>

鏈接上一目錄中的文件：<AHREF="../../Internet.htm">IP地址</A>URL鏈接URL鏈接的形式是：協(xié)議名：//主機(jī).域名／路徑／文件名

其中協(xié)議包括：

file

本地系統(tǒng)文件

http

WWW服務(wù)器

ftp

ftp服務(wù)器

telnet

基于TELNET的協(xié)議

mailto

電子郵件

news

Usenet新聞組

gopher

GOPHER服務(wù)器

wais

WAIS服務(wù)器寫在HTML文件中，鏈接其他主機(jī)上的文件時(shí)，格式如下：

<AHREF=“http:///index.htm”>寧波大學(xué)</A>

<AHREF=“ftp://”>寧大FTP</A>目錄鏈接直接指到某文件上部、下部或是中央部分制作目錄鏈接方法是：

·首先把把某段落設(shè)置為鏈接位置，格式是：〈ANAME="鏈接位置名稱"></A>

·在調(diào)用此鏈接部分的文件，定義連接：<AHREF="文件名＃鏈接位置名稱">鏈接文字</A>

如果是在一個(gè)文件內(nèi)跳轉(zhuǎn)，文件名可以省略不寫。多媒體效果插入圖象播放音樂播放視頻插入圖形超文本支持的圖象格式一般有XBitmap(XBM)、GIF、JPEG三種，所以我們對(duì)圖片處理后要保存為這三種格式中的任何一種，這樣才可以在瀏覽器中看到。

插入圖象的標(biāo)簽是<IMG>，其格式為：

<IMGSRC="圖形文件地址">播放音樂點(diǎn)播音樂將音樂做成一個(gè)鏈接：<A

HREF="音樂地址">樂曲名</A>自動(dòng)載入音樂

基本語法：

<EMBEDSRC="音樂文件地址">

IE中的背景音樂<bgsoundsrc="音樂文件地址"loop=#>

#=循環(huán)數(shù)播放視頻鏈接一個(gè)視頻文件將視頻文件做成一個(gè)鏈接的方法：

HREF="視頻地址">視頻名稱</A>自動(dòng)載入視頻與音樂的播放一樣，我們可以使用EMBED標(biāo)簽播放視頻：

<EMBEDSRC=“視頻文件地址”>多視窗口FRAMES使用Frames結(jié)構(gòu)設(shè)計(jì)的HTML文件，能夠?qū)⒄麄€(gè)窗口分成幾個(gè)獨(dú)立的小窗口，每一個(gè)窗口可分別載入不同的文件，令人高興的是，每個(gè)窗口是可以相互溝通的。Frames結(jié)構(gòu)的基本格式各窗口的尺寸設(shè)置各窗口間相互操作FRAME的其它屬性Frames結(jié)構(gòu)的基本格式<frameset>

<framesrc="url">

...

</frameset>

在有Frames結(jié)構(gòu)的HTML文件中，F(xiàn)rames文件的整體結(jié)構(gòu)為：<HTML>

<HEAD>

</HEAD>

<FRAMESRC="url">

</FRAMESET>

</HTML>各窗口的尺寸設(shè)置我們將窗口分割為幾塊，橫向分用ROWS屬性，縱向分用COLS屬性，每一塊的大小可以由這兩個(gè)屬性的值來實(shí)現(xiàn)。

<framesetcols=#>

例：<framesetcols="100,200,300">

<framesetrows=#>

例：<framesetrows="10%,20%,70%">

#的值為一對(duì)用引號(hào)括起來的字符串，字符串中的數(shù)字表示每個(gè)分窗口所占的尺寸，數(shù)字中間用逗號(hào)隔開，有幾個(gè)數(shù)字就表示分出了幾個(gè)窗口。當(dāng)然，這其中的任何一個(gè)數(shù)字也可以由“*”來代替，這樣表示由瀏覽器自動(dòng)設(shè)置其大小。

如：<framesetcols="100,200,*">

<framesetcols="100,*,*">將100像素以外的窗口平均分配

<framesetcols="*,*,*">

將窗口分為三等份各窗口間相互操作(FrameTarget)由Frames分出來的幾個(gè)窗口的內(nèi)容并不是靜止不變的，往往一個(gè)窗口的內(nèi)容隨著另一個(gè)窗口的要求而不斷變化，這就提高了Frames的利用價(jià)值。為了完成各窗口之間的相互操作，我們必須為每一個(gè)窗口起一個(gè)名字，這個(gè)名字用屬性Name來定義。窗口標(biāo)識(shí)(FrameName)

<framesrc=urlname=“窗口名”>

例如：<framesrc="frame/a.html"name=“l(fā)eft”>

定義了窗口名稱，還應(yīng)該有Target來配合使用，Target屬性指定了所鏈接的文件出現(xiàn)在哪一窗口。Target的值可以是name定義的名稱，也可以是以下四類值：

<ahref=urltarget=_blank>

顯示一個(gè)新窗口

<ahref=urltarget=_self>

顯示在同一個(gè)窗口

<ahref=urltarget=_parent>

顯示在Frameset的前一份文件的窗口

<ahref=urltarget=_top>

顯示在整個(gè)瀏覽器窗口Frame的其它屬性frameframeborder=#>#=yes,no

各窗口邊框的設(shè)置，yes表示有邊框，no表示沒有邊框<framemarginwidth=#marginheight=#>

#的值為像素點(diǎn)設(shè)置各窗口的上下左右邊界寬度，如不設(shè)置，由瀏覽器自動(dòng)決定。<framescrolling=#>#=yes,no,auto

滾動(dòng)條設(shè)置，yes表示有，no表示沒有，auto表示由瀏覽器自動(dòng)設(shè)置，#=缺省值是auto<framenoresize>noresize屬性來設(shè)置不可變動(dòng)的框邊學(xué)習(xí)HTML的方法對(duì)于難記的屬性不必強(qiáng)行記憶，在用到的時(shí)候翻一下語法手冊(cè)，多用幾次就會(huì)熟練掌握了。剛開始，可以先選擇幾個(gè)不錯(cuò)的網(wǎng)頁(yè)形式加以模仿，照貓畫虎的完成自己的Homepages.看到好的網(wǎng)頁(yè)，可以在瀏覽器的“編輯”菜單中選擇“源文件”，這時(shí)我們就可以看到源程序，

學(xué)習(xí)別人制作網(wǎng)頁(yè)的一些方法和技巧了，有時(shí)候通過這種辦法可以學(xué)到書本上沒有的東西，一些新出現(xiàn)的功能也可以率先出現(xiàn)在你的網(wǎng)頁(yè)中了。練習(xí)1.用HTML語言編輯一個(gè).htm文件，使其在瀏覽器上顯示的效果如下圖所示：網(wǎng)頁(yè)設(shè)計(jì)的基本原則要預(yù)選籌劃要盡量精簡(jiǎn)要善用圖像要使主頁(yè)易于漫游保持新鮮感貫徹諾言寫出來的HTML不要有誤不要使用已經(jīng)泛濫的技術(shù)JavaScript腳本語言JavaScript是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(EventDriven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標(biāo)記語言、Java腳本語言（Java小程序）一起實(shí)現(xiàn)在一個(gè)Web頁(yè)面中鏈接多個(gè)對(duì)象，與Web客戶交互作用。從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了HTML語言的缺陷。JavaScript腳本語言（cont）示例：<html><body><scriptlanguage="JavaScript">functiongo(){alert(“歡迎光臨”);}</script>

人人文庫(kù)> 全部分類> 應(yīng)用文書 > 事務(wù)文書

溫馨提示

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ì)自己和他人造成任何形式的傷害或損失。

第4章網(wǎng)頁(yè)制作與發(fā)布

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

第4章 網(wǎng)頁(yè)制作與發(fā)布

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔

第4章網(wǎng)頁(yè)制作與發(fā)布