網(wǎng)站開發(fā)實訓-03_第1頁
網(wǎng)站開發(fā)實訓-03_第2頁
網(wǎng)站開發(fā)實訓-03_第3頁
網(wǎng)站開發(fā)實訓-03_第4頁
網(wǎng)站開發(fā)實訓-03_第5頁
已閱讀5頁，還剩146頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

網(wǎng)站開發(fā)實訓劉佳辦公室：8-403電話箱：liujia120103@163.com課件發(fā)送地址：kejiankejian2010@163.com密碼：222222（6個2）第3章HTML簡介

3.1HTML概述3.1.1HTML的發(fā)展歷程1．HTML的誕生2．HTML的版本發(fā)展3．HTML的未來4．學習HTML的意義

3.1.2一個簡單的HTML實例【例3-1】用HTML制作一個簡單的網(wǎng)頁。3.1.3HTML的基本概念要了解HTML語言，先來熟悉一下HTML中的一些基本概念。1．標記在HTML中用于描述功能的符號稱為“標記”，它是用來控制文字、圖像等顯示方式的符號。標記在使用時必須用“<>”括起來，標記有單標記和雙標記之分。1）單標記所謂“單標記”是指只需單獨使用就能完整地表達意思的標記。這類標記的語法是：<標記名稱>。2）雙標記所謂“雙標記”是指由“始標記”和“尾標記”兩部分構成，必須成對使用的標記。其中始標記告訴Web瀏覽器從此處開始執(zhí)行該標記所表示的功能，而尾標記告訴Web瀏覽器到這里結束該功能。始標記前加一個斜杠（/）即成為尾標記。雙標記的語法是：<標記>內(nèi)容</標記>，其中“內(nèi)容”是指要被這對標記施加作用的部分。2．標記屬性許多單標記和雙標記的始標記內(nèi)可以包含一些屬性，其語法是：<標記名稱屬性1屬性2屬性3…>，各屬性之間無先后次序，屬性也可省略（即取默認值）。例如單標記<HR>表示在文檔當前位置畫一條水平線，一般是從窗口中當前行的最左端一直畫到最右端，它可以帶這么一些屬性：<HRsize="3"align="LEFT"width="75%">。其中，size屬性定義線的粗細，屬性值取整數(shù)，缺省值為1；align屬性表示對齊方式，可取LEFT（左對齊，默認值），CENTER（居中），RIGHT（右對齊）；width屬性定義線的長度，可取相對值（由一對""號括起來的百分數(shù)，表示相對于整個窗口的百分比），也可取絕對值（用整數(shù)表示的屏幕像素點的個數(shù)，如width="300"），默認值是100%。3．注釋語句和其他計算機語言一樣，HTML語言也提供了注釋語句。注釋語句的格式為：<！--注釋文-->，“<！--”表示注釋開始，“-->”表示注釋結束，中間的所有內(nèi)容表示注釋文。注釋語句可以放在任何地方，注釋內(nèi)容不在瀏覽器中顯示出來，僅供設計人員閱讀方便。3.1.4HTML的基本結構HTML網(wǎng)頁文件主要由文件頭和文件體兩部分內(nèi)容構成。其中，文件頭是對文件進行一些必要的定義，文件體是HTML網(wǎng)頁的主要部分，它包括文件所有的實際內(nèi)容。下面是HTML網(wǎng)頁的基本結構。<HTML>HTML文件開始<HEAD>文件頭開始文件頭</HEAD>文件頭結束<BODY>文件體開始文件體</BODY>文體結束</HTML>HTML文件結束在HTML網(wǎng)頁文件的基本結構中主要包含以下幾種標記。1．HTML文件標記<HTML>和</HTML>標記放在網(wǎng)頁文檔的最外層，表示這對標記間的內(nèi)容是HTML文檔。<HTML>放在文件開頭，</HTML>放在文件結尾，中間嵌套其他標記。2．HEAD文件頭部標記文件頭用<HEAD>和</HEAD>標記，該標記出現(xiàn)在文件的起始部分，標記內(nèi)的內(nèi)容不在瀏覽器中顯示，主要用來說明文件的有關信息，如文件標題、作者、編寫時間、搜索引擎可用的關鍵詞等。

在HEAD標記內(nèi)最常用的標記是網(wǎng)頁主題標記——TITLE標記，它的格式為：<TITLE>網(wǎng)頁標題</TITLE>。網(wǎng)頁標題是提示網(wǎng)頁內(nèi)容和功能的文字，它將出現(xiàn)在瀏覽器的標題欄中，一個網(wǎng)頁只能有一個標題，并且只能出現(xiàn)在文件的頭部。3．BODY文件主體標記文件主體用<BODY>和</BODY>標記，它是HTML文檔的主體部分，網(wǎng)頁正文中的所有內(nèi)容包括文字、表格、圖像、聲音和動畫等都包含在這對標記對之間。它的格式為：<BODYbackground=“image-URL”bgcolor=“color”text=“color”link=“color”alink=“color”vlink=“color”leftmargin=“value”topmargin=“value”>…</BODY>。3.1.5HTML的語法規(guī)則HTML語言應遵循以下的語法規(guī)則。（1）HTML文件以純文本形式存放，擴展名為“*.HTM”或“*.HTML”。（2）HTML標記不區(qū)分大小寫。（3）多數(shù)HTML標記可以嵌套，但不可以交叉。（4）HTML文件一行可以寫多個標記，一個標記也可以分多行書寫，不用任何續(xù)行符號。（5）HTML源文件中的換行、回車符和空格在顯示效果中是無效的。顯示內(nèi)容如果要換行必須用<BR>標記，換段用<P>標記，<P>表示段落開始，</P>表示段落結束。頁面中的空格是通過代碼控制的，一個半角空格使用一個 表示，多個空格只需使用多次即可。與空格的表示方法有些相似，一些特殊符號是憑借特殊的符號碼來表現(xiàn)。通常由“&”前綴，加上字符對應的名稱，再加上后綴“；”而組成。如書中表3-1所示列出了一些常見的HTML特殊符號的表示方法。（6）網(wǎng)頁中所有的顯示內(nèi)容都應該受限于一個或多個標記，不應有游離于標記之外的文字或圖像等，以免產(chǎn)生錯誤。3.2HTML的文本格式標記在“<BODY>…</BODY>”標記對之間直接輸入文字就可以顯示在瀏覽器窗口中，但是要制作出真正實用的網(wǎng)頁，還必須對輸入的文字進行適當?shù)男揎棥?.2.1標題格式標記功能：用于定義文章內(nèi)章節(jié)標題的顯示格式。格式：<Hnalign=“對齊方式”>標題內(nèi)容</Hn>。屬性：n表示標題字號的級別，可以是1～6之間的任意整數(shù)，數(shù)字越小，字號越大。align表示水平對齊方式，取值可以為LEFT（左對齊）、RIGHT（右對齊）、CENTER（居中對齊）、BOTTOM（位于底端）和TOP（位于頂部）。說明：用該標記實現(xiàn)文章標題的效果有限，通常用FONT標記實現(xiàn)文章標題豐富多彩的效果?！纠?-2】標題格式標記的應用。3.2.2文字格式標記功能：設置網(wǎng)頁中普通文字的顯示效果。格式：<FONTface=“字體”size=“字號”color=“顏色”>文字</FONT>。屬性：face表示文字的字體，如“黑體”表示黑體，“宋體”表示宋體。size表示字號，用來設定文字的大小，其值為1~7的整數(shù)，值越大，字越大；若數(shù)字前面加上“+”或“—”號，則表示相對基準字號的大小，如基準字號為3號，則+3表示6號字?；鶞首痔栍萌缦聵擞浂x：<BASEFONTsize=“基準字號”>，其中“基準字號”也是1~7之間的整數(shù)。color用來設定文字的顏色，顏色的取值是十六進制RGB顏色碼或HTML語言給定的顏色常量名?！纠?-3】文字格式標記的應用。3.2.3字型設置標記功能：設置文字的風格，如黑體、斜體、帶下劃線等，這是一組標記，它們可以單獨使用，也可以混合使用產(chǎn)生復合修飾效果。常用的標記有以下一些：<B>…</B>：文字以粗體顯示。<I>…</I>：文字顯示為斜體。<U>…</U>：顯示下劃線。<STRIKE>…</STRIKE>：刪除線。<BIG>…</BIG>：使文字大小相對于前面的文字增大一級。<SMALL>…</SMALL>：使文字大小相對于前面的文字減小一級。<SUP>…</SUP>：使文字成為前一個字符的上標。<SUB>…</SUB>：使文字成為前一個字符的下標。<BLINK>…</BLINK>：使文字顯示為閃爍效果。<TT>…</TT>：以等寬體顯示西文字符。<CITE>…</CITE>：輸出引用方式的字體，通常是斜體。<EM>…</EM>：強調(diào)文字，通常用斜體加黑體。<STRONG>…</STRONG>：特別強調(diào)的文字，通常也是斜體加黑體。注：有些標記的效果必須在動態(tài)環(huán)境下才能顯示，例如<BLINK>標記。

【例3-4】字型設置標記的應用。3.2.4段落標記功能：設置文章段落的開始和結束。瀏覽器在解釋HTML文檔時，會自動忽略文檔中的回車、空格以及其他一些符號，所以在文檔中輸入回車，并不意味著在瀏覽器內(nèi)將看到一個不同的段落，當需要在網(wǎng)頁中插入新的段落時，可以使用段落標記，它可以將標記后面的內(nèi)容另起一段。格式：<Palign=“水平對齊方式”>…</P>。屬性：align是水平對齊方式，取值可以為LEFT（左對齊）、RIGHT（右對齊）和CENTER（居中對齊）。3.2.5強制換行標記功能：另起一行顯示文字。格式：<BR>說明：這是一個單標記，與段落標記在顯示效果上都是另起一行書寫，但它們的不同之處是：段落標記的行距要寬。在<BR>使用上還有一定的技巧，如果把<BR>加在<P></P>標記對的外邊，將創(chuàng)建一個大的回車換行，即<BR>前邊和后邊文本的行與行之間的距離比較大，若放在<P></P>的里邊則<BR>前邊和后邊文本的行與行之間的距離將比較小?！纠?-5】段落標記和強制換行標記的應用。3.2.6預排格式標記功能：保留文字在純文字編輯器中的格式，原樣顯示，不受前面的文字格式和段落格式的影響。格式：<Pre>預排格式的文本</Pre>。說明：若用其他文本編輯器編好了一段文本，如果把它放進網(wǎng)頁文件，常常需要加許多標記才能達到原來的顯示效果，否則瀏覽器會自動忽略文檔中的回車、空格以及其他一些符號。如果在文本開頭加上<Pre>，在末尾加上</Pre>，那么中間就不用加其他標記了，這時中間的回車換行符等就起作用了，可以原樣顯示?！纠?-6】預排格式標記的應用。3.2.7插入水平線標記功能：在頁面上畫橫線，可用于頁面上內(nèi)容的分割。格式：<HRwidth=“value1”size=“value2”align=“value3”color=“color1”noshade>。屬性：width用來設置水平線的寬度長度，value1可以是點數(shù)，如50、100、200等，窗口改變時，橫線寬度不變；也可以是相對窗口的百分比，如50%、100%,默認是100%。size用來設置水平線的厚度，value2的值可以是絕對點數(shù)，也可以是（相對長度的）百分比，默認高度為1。align用來設置水平線的對齊方式，value3的值可以是LEFT（居左）、RIGHT(居右)、CENTER（居中），默認是居中。color用來設置水平線的顏色，顏色的取值是十六進制RGB顏色碼或HTML語言給定的顏色常量名。noshade屬性不用賦值，而是直接加入標記即可使用，它表示加入一條沒有陰影的水平線(不加入此屬性水平線將有陰影)。

3.2.8文本縮排標記功能：使用縮排標記，可以實現(xiàn)頁面文字的段落縮排，實現(xiàn)多次縮排可以使用多次縮排標記。格式：<Blockquote>文本</Blockquote>。

【例3-7】文本縮排標記的應用。3.2.9列表標記分段排列出一組級別相同的項目稱為列表。如果在每段前面加上一個相同的符號，則稱為無序列表；如果每段前面加上一個序號，則稱為有序列表。1．無序列表功能：設置無序列表。格式：<ULtype=“加重符號類型”><LItype=“加重符號類型”>列表項目1<LItype=“加重符號類型”>列表項目2……</UL>。

屬性：在無序列表的開始和結束處，分別是<UL>和</UL>標記，每一項列表條目之前必須加上<LI>標記。type屬性表示在每個項目前顯示加重符號的類型，共有三種選擇：type=“disc”時，列表符號為“●”（實信圓），type=“circle”時，列表符號為“○”（空心圓），type=“square”時，列表符號為“■”（實心方塊）。<UL>和<LI>標記都可以定義type參數(shù)，使得在一個列表中，不同的列表項目可以用不同的列表符號，但一般情況下不要這樣設置。

【例3-8】無序列表標記的應用。2．有序列表功能：設置有序列表。格式：<OLtype=“序號類型”start=“起始號碼”><LItype=“序號類型”>列表項目1<LItype=“序號類型”>列表項目2……</OL>。

屬性：在有序列表的開始和結束處，分別是<OL>和</OL>標記，每一項列表條目之前必須加上<LI>標記。type屬性表示在每個項目前顯示的序號類型，其值可以為1（阿拉伯數(shù)字）、A（大寫英文字母）、a（小寫英文字母）、I（大寫羅馬字母）、i（小寫羅馬字母）。start用于設置編號的開始值，默認值為1，<LI>標記設定該條目的編號，其后的條目將以此作起始數(shù)目逐漸遞增。說明：無序列表和有序列表可以嵌套，產(chǎn)生縮進的、有層次的列表項目?！纠?-9】有序列表標記的應用?！纠?-10】無序列表和有序列表標記的應用對比。3．定義列表功能：用于需要對列表條目進行簡短說明的場合。格式：<DL><DT>列表條目1<DD>條目1的說明<DT>列表條目2<DD>條目2的說明……</DL>。屬性：在定義列表的開始和結束處，分別是<DL>和</DL>標記，每一項列表條目之前必須加上<DT>標記，用<DD>標記定義的條目說明文字自動向右縮進。

【例3-11】定義列表標記的應用。3.2.10文字滾動標記功能：在頁面中制作文字滾動的效果。格式：<MARQUEEbehavior=“value”bgcolor=“color”direction=“value”height=“value”width=“value”loop=“value”scrollamount=“value”scrolldelay=“value”hspace=“value”vspace=“value”>滾動文字</MARQUEE>。屬性如下。（1）behavior：設置文字滾動方式。共有三種滾動方式供選擇：behavior=“alternate”時，文字將交替進行滾動；behavior=“scroll”時，文字將循環(huán)往復滾動；behavior=“slide”時，文字將只進行一次滾動。（2）bgcolor：為滾動文字添加背景顏色。（3）direction：設置文字滾動的方向，value的取值可以為up、down、left和right四種，分別表示滾動文字的方向向上、向下、向左和向右。

（4）height和width：設置文字滾動的區(qū)域，取值為點數(shù)或相對于窗口的百分比。（5）loop：設置文字滾動的循環(huán)次數(shù)。默認值為-1，-1表示無限次循環(huán)次數(shù)。（6）scrollamount：調(diào)整文字滾動的速度，數(shù)值越大速度越快。（7）scrolldelay：設置在每一次滾動的間隔產(chǎn)生一段時間的延遲，數(shù)值越大延遲越長。（8）hspace和vspace：設置文字滾動的水平垂直空間。

【例3-12】文字滾動標記的應用。

3.3HTML的表格標記表格可以將文本和圖像按一定的行和列規(guī)則進行排列，以便更好地表示長信息，有利于快速查找信息。表格內(nèi)的格子稱為單元格。表格標記對于制作網(wǎng)頁是很重要的，現(xiàn)在很多網(wǎng)頁都使用多重表格，主要是因為表格不但可以固定文本或圖像的輸出，而且還可以任意的進行背景和前景顏色的設置，使頁面有很多意想不到的效果，使頁面更加整齊美觀。表格標記的構成如下：

功能：建立基本表格。格式：<TABLEsummary=“文字”bgcolor=“color1”background=“Image-URL”border=“n”bordercolor=“color2”width=“x或x%”height=“x或x%”align=“LEFT/RIGHT/CENTER”><CAPTIONalign=“TOP/BOTTOM/LEFT/RIGHT”>表題（表格說明）</CAPTION><TR><TH>表頭1</TH><TH>表頭2</TH>……….<TH>表頭n</TH></TR><TR><TD>表項1</TD><TD>表項2</TD>……….<TD>表項n</TD></TR><TR><TD>表項1</TD><TD>表項2</TD>……….<TD>表項n</TD></TR>……</TABLE>。屬性如下。（1）<TABLE></TABLE>標記對用來創(chuàng)建一個表格。①summary：對表格格式或內(nèi)容的簡要說明，它不在網(wǎng)頁上顯示，相當于表格的注釋。②bgcolor：設置表格的背景顏色，取值同BODY標記中的顏色屬性。③background：設置表格的背景圖像，取值為圖像的URL地址。④border：設置表格線的寬度（粗細），n取整數(shù)，單位為像素數(shù)，n=0表示無線。⑤bordercolor：設置表格線的顏色，取值同BODY標記中的顏色屬性。⑥width：設置表格寬度，取值為點數(shù)或相對于窗口的百分比。⑦height：設置表格高度，取值為點數(shù)或相對于寬度的百分比。⑧align：設置表格在頁面中的相對位置，取值為LEFT、RIGHT或CENTER，分別表示居左、居右或居中。

（2）<CAPTION>…</CAPTION>表示對表格標題的說明，如“奧運會男子足球比賽時間表”等。align表示標題相對表格的位置，取值為LEFT、RIGHT、CENTER、TOP或BOTTOM分別表示標題在表格上部左邊、表格上部右邊、表格上部居中、表格上面或表格底部。（3）<TR>…</TR>定義行，該標記中的內(nèi)容顯示在一行，此標記對只能放在<TABLE></TABLE>標記對之間使用，而在此標記對之間加入文本將是無用的，因為在<TR></TR>之間只能緊跟<TD></TD>標記對才是有效的語法；<TD></TD>標記對用來創(chuàng)建表格中一行中的每一個格子，此標記對也只有放在<TR></TR>標記對之間才是有效的，輸入的文本也只有放在<TD></TD>標記對中才有效。（4）<TH>…</TH>用來設置表格頭，表頭的每一列需用一個<TH>標記，通常是黑體居中文字。（5）<TD>…</TD>用來定義表格內(nèi)容的一列，與<TH>的區(qū)別是內(nèi)容不加黑顯示。說明：（1）<TABLE>中bgcolor、background、align、height、width等屬性可以放在TD標記中，作為單元格的屬性。（2）一行的開始表示前一行的結束，一列的開始表示前一列的結束，所以<TR>、<TH>、<TD>均可以作單標記使用。（3）<TH>標記還可以用于每行的第一列，設置列標題。（4）<CAPTION>、<TH>、<TD>標記之間可以嵌套其他格式標記，如<P>、<FONT>等。（5）單元格內(nèi)容可以是文字，也可以是圖像。

（6）表格可以嵌套，通過表格嵌套可以產(chǎn)生復雜的表格。（7）<TR>還有align和valign屬性。align是水平對齊方式，取值為LEFT(左對齊)、CENTER(居中)、RIGHT(右對齊)；而valign是垂直對齊方式，取值為TOP(靠頂端對齊)、MIDDLE(居中間對齊)或BOTTOM(靠底部對齊)。<TD>還有width和nowrap屬性，width是單元格的寬度，單位用絕對像素值或總寬度的百分比；nowrap表示禁止表格單元格內(nèi)的內(nèi)容自動換行。另<TR>、<TH>、<TD>中還可以使用rowspan和colspan屬性實現(xiàn)單元格的合并，rowspan設置一個表格單元格跨占的行數(shù)(缺省值為1)，rowspan=n表示將n行作為一行；colspan設置一個表格單元格跨占的列數(shù)(缺省值為1)，colspan=n表示將n列作為一列。

【例3-13】表格標記單元格合并屬性的應用?！纠?-14】表格標記的簡單應用?！纠?-15】表格標記的復雜應用。3.4HTML的圖像與多媒體標記在網(wǎng)頁中加入圖像和多媒體元素可以使網(wǎng)頁更加生動活潑。3.4.1圖像標記再簡單樸素的網(wǎng)頁如果只有文字而沒有圖像將失去許多活力，圖像在網(wǎng)頁制作中是非常重要的元素，HTML語言提供了<IMG>標記來處理圖像的輸出，當然用<IMG>標記還可以播放視頻，下面也順便介紹一下。

1．<IMG>的圖像標記功能功能：在當前位置插入圖像。格式：<IMGsrc=“image-URL”alt=“簡單說明”longdesc=“詳細說明”width=“x”height=“y”border=“邊框長度”hspace=“x”vspace=“y”align=“對齊方式”>。屬性如下。（1）src：設置要加入的圖像文件的URL地址，通常圖像格式為gif或jpg。（2）alt：設置圖像文件的替代說明，當圖像無法顯示時，顯示“簡單說明”。（3）longdesc：設置圖像的詳細說明。（4）width：設置圖像的寬度，可以為點數(shù)或相對窗口寬度的百分比。（5）height：設置圖像的高度，可以為點數(shù)或相對窗口高度的百分比。

（6）border：設置圖像外圍邊框寬度，其值為正整數(shù)。（7）hspace：設置水平方向空白（圖像左右留多少空白）。（8）vspace：設置垂直方向空白（圖像上下留多少空白）。（9）align：設置在頁面中的位置，可以為LEFT，RIGHT或CENTER。說明：圖像的寬度和高度指圖像顯示時的大小，與圖像的真實大小無關。<IMG>標記并不是真正地把圖像加入到HTML文檔中，而是給標記對的src屬性賦值，這個值是圖像文件的文件名，當然包括路徑，這個路徑可以是相對路徑，也可以是網(wǎng)址。實際上就是通過路徑將圖像文件嵌入到HTML文檔中。設置圖像文件地址時用到的路徑一般建議使用相對路徑，所謂相對路徑是指所要鏈接或嵌入到當前HTML文檔的文件與當前文件的相對位置所形成的路徑。假如HTML文件與圖像文件(文件名假設是logo.gif)在同一個目錄下，則可以將代碼寫成<IMGsrc=“l(fā)ogo.gif”>；假如圖像文件放在當前的HTML文檔所在目錄的一個子目錄(子目錄名假設是images)下，則代碼應為<IMGsrc=“images/logo.gif”>；假如圖像文件放在當前的HTML文檔所在目錄的上層目錄(目錄名假設是home)下，則相對路徑就必須是準網(wǎng)址了，即用“../”表示網(wǎng)站，然后在后邊緊跟文件在網(wǎng)站中的路徑，假設home是網(wǎng)站下的一個目錄，則代碼應為<IMGsrc=“../home/logo.gif”>，若home是網(wǎng)站下的目錄king下的一個子目錄，則代碼應該變?yōu)?lt;IMGsrc=“../king/home/logo.gif”>了?！纠?-16】圖像標記的應用。2．<IMG>的視頻標記功能利用<IMG>還可以變相的插入視頻，下面簡單介紹一下該功能。功能：在網(wǎng)頁中加入視頻信息，格式一般為*.AVI。格式：<IMGsrc=“image-URL”dynsrc=“avi-URL”loop=“n”start=“開始時間”controlsloopdelay=“時間間隔”>。屬性如下。（1）scr：設置一幅靜態(tài)圖像的URL地址，在未載入.AVI文件時，先在.AVI的播放區(qū)域顯示該圖像。（2）dynsrc：設置視頻文件存放的路徑和文件名。

（3）loop：設置視頻文件播放的次數(shù)，如果其值為INFINITE，則表示反復播放直到瀏覽者離開該網(wǎng)頁。（4）start：設置何時開始播放視頻文件，它有兩個屬性值fileopen和mouseover。fileopen是指在鏈接到含本標記的頁面時開始播放，mouseover是指將鼠標移動到.AVI播放區(qū)時開始播放，默認值為fileopen。另外，當鼠標在AVI播放區(qū)單擊時，也可使瀏覽器開始播放。（5）controls：在視頻窗口下附加Windows的AVI文件播放控制條。（6）loopdelay：設置兩次播放的間隔時間，單位是毫秒。此外，還有IMG的常見屬性，如width、height、align等，也可以使用。

3.4.2背景音樂標記功能：在網(wǎng)頁中加入聲音，聲音文件格式可以為*.wav或*.mid。格式：<BGSOUNDsrc=“聲音文件的URL地址”loop=“value”>。屬性：src指明聲音文件的URL地址。loop控制播放次數(shù)，取-1或INFINITE時，聲音將一直播放到瀏覽者離開該網(wǎng)頁為止。3.4.3多媒體標記功能：在頁面中放置如SWF動畫（即Flash動畫）、MP3音樂、電影等多種多媒體內(nèi)容。格式：<EMBEDsrc=“file_URL”height=“value”width=“value”hidden=“hidden_value”autostart=“auto_value”loop=“l(fā)oop_value”></EMBED>屬性如下。（1）src：指明多媒體文件所在的路徑，可以插入的常見的多媒體文件包括SWF動畫、MP3音樂、MPEG格式的視頻和AVI格式的視頻。

（2）height和width：設置多媒體播放的區(qū)域，取值為點數(shù)或相對于窗口的百分比。（3）hidden：用于控制播放面板的顯示和隱藏。當hidden=“True”時，隱藏面板；當hidden=“False”時，顯示面板。（4）autostart：用于控制多媒體內(nèi)容是否自動播放。當auto=“True”時，自動播放；當auto=“False”時，不自動播放。（5）loop：用于控制多媒體內(nèi)容是否循環(huán)播放。當loop=“True”時，無限次循環(huán)次數(shù)；當loop=“False”時，僅播放一次。3.5HTML的超鏈接標記超鏈接是網(wǎng)頁頁面中最重要的元素之一，是一個網(wǎng)站的靈魂。一個網(wǎng)站是由多個頁面組成的，頁面之間依靠超鏈接確定相互的導航關系，超鏈接使得網(wǎng)頁的瀏覽非常方便。功能：建立超鏈接。格式：<Ahref=“file-URL”target=“value”>顯示的文本或圖像</A>。屬性如下。（1）href：設置要鏈接到的目標的URL地址。（2）target：指定打開鏈接的目標窗口。當target=“＿self”時，表示在原窗口顯示鏈接頁面；當target=“＿blank”時，表示在新開窗口顯示鏈接頁面；target=“＿parent”時，表示在上一級窗口中打開，一般使用分幀的框架會經(jīng)常使用；當target=“＿top”時，表示在瀏覽器的整個窗口中打開，忽略任何框架。默認時指在原窗口中打開鏈接。

【例3-17】超鏈接標記的應用。3.6HTML的表單標記表單是實現(xiàn)動態(tài)網(wǎng)頁的一種主要的外在形式，是HTML頁面與瀏覽器端實現(xiàn)交互的重要手段。表單的主要功能是收集信息，具體說是收集瀏覽者的信息。例如在網(wǎng)上要申請一個電子信箱，就必須按要求填寫完成網(wǎng)站提供的表單頁面，其主要內(nèi)容是姓名、年齡、聯(lián)系方式等個人信息。

表單信息處理的過程為：當單擊表單中的提交按紐時，輸入在表單中的信息就會從客戶端的瀏覽器上傳到服務器中，然后由服務器中的有關表單處理程序（ASP、CGI等程序）進行處理，處理后或者將用戶提交的信息儲存在服務器端的數(shù)據(jù)庫中，或者將有關的信息返回到客戶端瀏覽器中，這樣網(wǎng)頁就具有了交互性。這里只介紹如何使用HTML的表單標記來設計表單。1．表單標記<FORM>表單是網(wǎng)頁上的一個特定區(qū)域，這個區(qū)域由<FORM></FORM>標記對來定義，這一步有兩方面的作用。第一，限定表單的范圍。其他的表單對象，都要插入到<FORM></FORM>表單標記對之中才有效。單擊提交按鈕時，提交的也是表單范圍之內(nèi)的內(nèi)容。第二，攜帶表單的相關信息，例如處理表單的腳本程序的位置、提交表單的方法等。這些信息對于瀏覽者是不可見的，但對于處理表單卻有著決定性的作用。格式：<FORMname="form＿name"method="method"action="url"enctype="value"target="target＿win">…</FORM>。屬性如下。（1）name：設置表單的名稱。

（2）method：定義處理程序從表單中獲得信息的方式，其取值為GET或POST。GET方式表示處理程序從當前HTML文檔中獲取數(shù)據(jù)，但通過這種方式傳送的數(shù)據(jù)量是有所限制的，一般限制在1KB以下。POST方式與GET方式相反，它表示當前的HTML文檔把數(shù)據(jù)傳送給處理程序，傳送的數(shù)據(jù)量要比使用GET方式的大的多。（3）action：用來定義表單處理程序（ASP、CGI等程序）的位置（相對地址或絕對地址）。如：<FORMaction=“/counter.cgi”>，當用戶提交表單時，服務器將執(zhí)行網(wǎng)址/上的名為counter.cgi的CGI程序。（4）enctype：設置表單資料的編碼方式。（5）target：設置返回信息的顯示窗口。2．輸入標記<INPUT>輸入標記<INPUT>是表單中最常用的標記之一。該標記用來定義一個輸入?yún)^(qū)，可在其中輸入信息，此標記必須放在<FORM></FORM>標記對之間。格式：<INPUTname="field＿name"type="type＿name">。屬性如下。（1）name：設置輸入?yún)^(qū)域的名稱。服務器就是通過調(diào)用某一輸入?yún)^(qū)域名字來獲得該區(qū)域數(shù)據(jù)的。（2）type：設置輸入?yún)^(qū)域的類型。常用的type屬性值有10種，下面分別介紹。

①文本域TextText用來設定單行的輸入文本區(qū)域。格式：<INPUTtype=“Text”maxlength=“value”size=“value”value=“field＿value”>其中：maxlength為文本域的最大輸入字符數(shù)；size為文本域的寬度（以字符為單位）；value設置文本域的初始默認值。②密碼域Password在表單中還有一種文本域的形式為密碼域，輸入到文本域中的文字均以星號“*”或圓點顯示。格式：<INPUTtype="Password"maxlength="value"size="value">其中：maxlength為密碼域的最大輸入字符數(shù)；size為密碼域的寬度。③文件域File文件域可以讓用戶在域的內(nèi)部填寫自己硬盤中的文件路徑，然后通過表單上傳，這是文件域的基本功能。如在線發(fā)送E-mail時常見的附件功能。文件域的外觀是一個文本框加一個瀏覽按鈕，用戶既可以直接將要上傳給網(wǎng)站的文件的路徑寫在文本框內(nèi)，也可以單擊瀏覽按鈕，在自己的電腦中找到要上傳的文件。格式：<INPUTtype="File">④復選框Checkbox復選框能夠讓瀏覽者進行項目的多項選擇，一般以一個方框表示。格式：<INPUTtype=“Checkbox”checkedvalue=“value”>其中：checked表示此項被默認選中；value表示選中項目后傳送到服務器端的值。⑤單選框Radio單選框能夠讓瀏覽者進行項目的單項選擇，以一個圓框選擇。格式：<INPUTtype=“Radio”checkedvalue=“value”>其中：checked表示此項被默認選中；value表示選中項目后傳送到服務器端的值。⑥普通按鈕Button普通按鈕主要是用來配合程序（如JavaScript腳本）的需要來進行表單處理的。格式：<INPUTtype=“Button”value=“Button＿text”>其中：value值代表顯示在按鈕上面的文字。⑦提交按鈕Submit單擊提交按鈕后，可以實現(xiàn)表單內(nèi)容的提交。格式：<INPUTtype="Submit"value="Button＿text">⑧重置按鈕Reset單擊重置按鈕后,可以清除表單的內(nèi)容,恢復默認的表單內(nèi)容設定。格式：<INPUTtype=“Reset”value=“Button＿text”>其中：value值代表顯示在按鈕上面的文字。⑨圖像域IMAGE圖像域是指可以用在提交按鈕上的圖片，這幅圖片具有按鈕的功能。如果網(wǎng)頁使用了較為豐富的色彩，或稍微復雜的設計，再使用表單默認的按鈕形式往往會讓人覺得單調(diào)，甚至會破壞整體的美感。這時，就可以使用圖像域來創(chuàng)建和網(wǎng)頁整體效果相統(tǒng)一的圖像提交按鈕。格式：<INPUTtype=“IMAGE”src=“Image＿URL”>其中：src設置圖片的路徑。⑩隱藏域Hidden隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候，隱藏域的信息也被一起發(fā)送到瀏覽器。格式：<INPUTtype="Hidden">

【例3-18】表單輸入標記的綜合應用。

3．菜單和列表標記<SELECT>和<OPTION>假設現(xiàn)在要在表單中添加這樣一項內(nèi)容：瀏覽所在的城市。這里不說全國的城市，只說省會以上的城市，就有幾十個。如果按上面講過的單選按鈕的形式，將這些城市全部羅列在網(wǎng)頁上，將是一件不堪設想的事情。于是，在表單的對象中出現(xiàn)了菜單和列表。說到底，菜單和列表主要是為了節(jié)省網(wǎng)頁的空間而產(chǎn)生的。菜單是一種最節(jié)省空間的方式，正常狀態(tài)下只能看到一個選項，單擊按鈕打開菜單后才能看到全部的選項；列表可以顯示一定數(shù)量的選項，如果超出了這個數(shù)量，會自動出現(xiàn)滾動條，瀏覽者可以通過拖動滾動條來觀看各選項。通過<SELECT>和<OPTION>標記可以設計頁面中的菜單和列表效果，此標記對必須放在<FORM></FORM>標記對之間。格式：<SELECTname="name"size="value"multiple><OPTIONvalue="value"selected>選項一<optionvalue="value">選項二…</select>。<SELECT>標記用來定義菜單和列表，屬性如下。（1）name：設置菜單和列表的名稱。（2）size：設置顯示的選項數(shù)目。（3）multiple：該屬性不用賦值可直接加入到標記中，加入此屬性后列表框就成了可多選的了。若沒有加入multiple屬性，顯示的將是一個彈出式的列表框。

<OPTION>標記用來指定菜單和列表中的一個選項，它放在<SELECT></SELECT>標記對之間。屬性如下。（1）value：該屬性用來給<OPTION>指定的那一個選項賦值，這個值是要傳送到服務器上的，服務器正是通過調(diào)用<SELECT>區(qū)域名字的value屬性來獲得該區(qū)域選中的數(shù)據(jù)項。（2）selected：指定初始默認的選項。

【例3-19】表單菜單和列表標記的應用。4．文本框標記<TEXTAREA><TEXTAREA></TEXTAREA>表示創(chuàng)建一個可以輸入多行的文本框，可以在其中輸入更多的文本，此標記對放在<FORM></FORM>標記對之間。格式：<TEXTAREAname="name"rows="value"cols="value"></TEXTAREA>。屬性如下。（1）name：設置文本框的名稱。（2）rows：設置文本框的行數(shù)，以字符數(shù)為單位。（3）cols：設置文本框的列數(shù)，以字符數(shù)為單位。

【例3-20】表單文本框標記的應用。3.7HTML的框架標記框架的運用就是把瀏覽器窗口劃分成幾個子窗口，每個子窗口可以調(diào)入各自的HTML文檔形成不同的頁面，也可以按照一定的方式組合在一起完成特殊的效果?？蚣芡ǔ５氖褂梅椒ㄊ窃谝粋€框架中放置目錄并設置鏈接，點擊鏈接，內(nèi)容顯示在另一個框架中；或者有時一個網(wǎng)頁的不同部分由不同的人員制作，可以每人完成一個子窗口，然后利用框架技術將它們合并在一起形成一個完整的頁面。

1．框架集標記<FRAMESET>框架主要包括兩個部分，一個是框架集，另一個就是框架。框架集是在一個文檔內(nèi)定義的一組框架結構的HTML網(wǎng)頁?？蚣芗x了在一個窗口中顯示的框架數(shù)、框架的尺寸、載入到框架的網(wǎng)頁等。而框架則是指在網(wǎng)頁上定義的一個顯示區(qū)域。在使用了框架集的頁面中，頁面的<BODY>標記被<FRAMESET>標記所取代，然后通過<FRAME>標記定義每一個框架。功能：定義分割窗口，用來定義主文檔中有幾個框架并且各個框架是如何排列的。格式：<FRAMESETcols="value，value，…"rows="value，value，…"framespacing="value"bordercolor="Color＿value">…</FRAMESET>。屬性如下。（1）cols：左右分割窗口（用“，”分割，value為定義各個框架的寬度值，單位可以是百分數(shù)、絕對像素值或星號(“*”)，其中星號表示剩余部分）。（2）rows：上下分割窗口（用“，”分割，value為定義各個框架的寬度值，單位可以是百分數(shù)、絕對像素值或星號(“*”)，其中星號表示剩余部分）。（3）framespacing：設定框架集的邊框寬度。（4）bordercolor：設定框架集邊框顏色?？蚣芗瘶擞洃萌鐣系谋?-2所示。2．框架標記<FRAME>每一個框架都有一個顯示的頁面，這個頁面文件稱為框架頁面。通過<FRAME>標記可以定義框架頁面的內(nèi)容，<FRAME>標記放在<FRAMESET></FRAMESET>之間。功能：定義某一個具體的框架。格式：<FRAMEsrc=“File＿NAME”name=“Frame＿NAME”scrolling=“value”noresize>…</FRAME>。

屬性如下。（1）src：設置框架顯示的文件路徑。（2）name：定義此框架的名字，這個名字是供超文本鏈接標記<Ahref=“”target=“”>中的target屬性用來指定鏈接的目標HTML文件將顯示在哪一個框架中。框架的命名有一定的規(guī)則，框架名稱必須是單個單詞，可以使用下劃線（＿），但不允許使用連字符（-）、句號（。）和空格?？蚣苊Q必須以字母開始?？蚣苊Q區(qū)分大小寫。（3）scrolling：設定滾動條是否顯示，值可以是yes(顯示)、no(不顯示)或auto(若需要則會自動顯示,不需要則自動不顯示)。（4）noresize：禁止改變框架的尺寸大小。

3．不支持框架標記<NOFRAMES>格式：<NOFRAMES>…</NOFRAMES>功能：<NOFRAMES></NOFRAMES>標記對放在<FRAMESET></FRAMESET>標記對之間，用來在那些不支持框架的瀏覽器中顯示文本或圖像信息。

【例3-21】框架標記的綜合應用。3.8CSS3.8.1CSS概述CSS是英文CascadingStyleSheet的縮寫，稱為“層疊樣式表”或“級聯(lián)樣式表”，它是用來控制一個文檔中某一文本區(qū)域外觀的一組格式屬性。CSS樣式可以定義在HTML文檔中的標記里，也可以在外部附加文檔作為外加文檔。這樣，一個樣式表就可以用于多個頁面，甚至整個站點，當CSS樣式有所更新或被修改之后，所有應用了該樣式表的文檔都會被自動更新，所以CSS具有更好的易用性和擴展性。

概括一下，CSS有以下特點：（1）可以將格式和結構分離；（2）可以以前所未有的能力控制頁面布局；（3）可以制作體積更小、下載更快的網(wǎng)頁；（4）可以將許多網(wǎng)頁同時更新，比以前更快更容易；（5）瀏覽器的界面更友好。3.8.2CSS的基本語法CSS樣式表的基本語法為：HTML標志{標志屬性：屬性值；標志屬性：屬性值；標志屬性：屬性值；……}。在編寫CSS樣式表時要注意以下問題：（1）在使用樣式表的過程中，經(jīng)常會有幾個標志用到同一屬性，例如規(guī)定HTML頁面中凡是粗體字、斜體字、1號標題字均顯示為紅色，按照語法方式應書寫為：B{color：red}I{color：red}H1{color：red}顯然這樣書寫十分麻煩，可以采用一種簡潔明了的方式寫成：B?I?H1{color：red}用逗號分隔各個HTML標志，把三行代碼合并成一行。（2）同一個HTML標志，可以定義多種屬性，例如把從H1~H6各級標題定義為紅色黑體字，帶下劃線，則應寫為：H1?H2?H3?H4?H5?H6{color：red﹔text–decoration：underline﹔font–family：＂黑體＂}（3）一種樣式在一個頁面中需要出現(xiàn)很多次，這種情況會經(jīng)常發(fā)生，例如網(wǎng)頁中需要經(jīng)常出現(xiàn)紅色的文本，而又不希望每次給文本加上一個樣式，可以定義如下樣式：.red{color:red;}。在頁面設計中，一旦需要出現(xiàn)紅色文本，只需要通過名稱的指派就可以使當前對象中的文本應用樣式，例如<pclass="red">…</p>。（4）在CSS中，注釋以“/*”開始，以“*/”結束，注釋里面的內(nèi)容對于瀏覽器來說是沒有意義的。3.8.3CSS的實現(xiàn)方式CSS的實現(xiàn)方式有3種。1.在HEAD內(nèi)實現(xiàn)用這種實現(xiàn)方式的CSS也叫內(nèi)部樣式表(InternalStyleSheet)，它是寫在HTML的<head></head>里面的，只對所在的網(wǎng)頁有效。內(nèi)部樣式表要用到Style這個標記，寫法如下：<Styletype="text/css">┅┅</Style>例如：<Styletype="text/css">H1{font-family:"黑體";color:red}</Style>其中，<Style>和</Style>之間的是樣式的內(nèi)容。type一項表示使用的是text中的層疊樣式表書寫的代碼。{}前面的是樣式類型和名稱，{}中的是樣式的屬性。上述代碼定義了<H1>標記使用的字體和顏色?！纠?-22】內(nèi)部樣式表的應用。2.在BODY內(nèi)實現(xiàn)用這種實現(xiàn)方式的CSS也叫內(nèi)嵌樣式(InlineStyle)，它是在BODY中實現(xiàn)，主要是在標記中引用，只對所在的標記有效。例如要讓H3標記的字體的大小為10pt，可以使用下面的語法：<h3style="font-size:10pt">，這樣的寫法雖然直觀，但是無法體現(xiàn)出CSS的優(yōu)勢，因此并不推薦使用。

【例3-23】內(nèi)嵌樣式的應用。3.在文件外實現(xiàn)用這種實現(xiàn)方式的CSS也叫外部樣式表(ExternalStyleSheet)，如果很多網(wǎng)頁需要用到同樣的樣式，可以將樣式寫在一個以.css為后綴的CSS文件里，然后在每個需要用到這些樣式的網(wǎng)頁里引用這個CSS文件。外部樣式表調(diào)用格式是：<linkhref="style.css"rel="stylesheet"type="text/css">。

【例3-24】外部樣式表的應用。4．3種CSS的實現(xiàn)方式的比較樣式的優(yōu)先級依次是內(nèi)嵌樣式、內(nèi)部樣式表、外部樣式表。使用外部樣式表，相對于內(nèi)嵌樣式和內(nèi)部樣式表，有以下優(yōu)點：（1）樣式代碼可以復用。一個外部CSS文件，可以被多個網(wǎng)頁共用。（2）便于修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個網(wǎng)頁。（3）提高網(wǎng)頁顯示的速度。如果樣式寫在網(wǎng)頁里，會降低網(wǎng)頁顯示的速度，如果網(wǎng)頁引用一個CSS文件，這個CSS文件一般已經(jīng)在緩存區(qū)(其它網(wǎng)頁早已經(jīng)引用過它)，網(wǎng)頁顯示的速度就比較快。

3.9HTML綜合實例

【例3-25】用HTML語言編寫如圖3-25所示的一個簡單網(wǎng)站的首頁。3.10其他網(wǎng)頁設計語言簡介除了HTML，與網(wǎng)頁設計相關的程序語言主要有以下幾種。1．XML語言2．VRML語言3．CSS語言4．瀏覽器Script腳本語言5．服務器端的Script腳本語言6．DHTML語言第2章創(chuàng)建本地虛擬站點準備工作2.1站點管理器2.2定義新站點2.3創(chuàng)建文件夾和空白頁面2.4站點管理器的其他功能2.52.1準備工作2.1.1了解網(wǎng)站的服務群體2.1.2確定網(wǎng)站的主題2.1.3畫出結構草圖2.1.4確定網(wǎng)站命名規(guī)則2.1.1了解網(wǎng)站的服務群體作為網(wǎng)站的設計者，首先要了解網(wǎng)站的服務群體。網(wǎng)站的服務群體包括兩個方面：擁有者和訪問者。擁有者可能是公司、學校、醫(yī)院、政府或個人等，網(wǎng)站的設計者必須了解他們的目的以及如何達到他們的目的；同時還要考慮訪問者，這是網(wǎng)站的生存條件。使網(wǎng)站易于訪問，除了鮮明的主題、漂亮的外觀、豐富的內(nèi)容外，還要注意創(chuàng)建清晰的導航，使訪問者通過單擊鼠標就能夠看到想要看的信息。只有把上述內(nèi)容體現(xiàn)在網(wǎng)站的設計理念中，所創(chuàng)建的網(wǎng)站才會是一個成功的網(wǎng)站。2.1.2確定網(wǎng)站的主題不論制作何類網(wǎng)頁，主題的確定一般應遵循以下幾方面的原則。（1）網(wǎng)站的名稱要切題、有特色、好記。（2）題材要專而精。2.1.3畫出結構草圖畫結構圖時一般要參考以下3個因素。（1）首頁：首頁一般包括網(wǎng)站的名稱及標記、各分支的導航按鈕、內(nèi)容要點提示、電子郵件、地址等內(nèi)容。（2）分支頁面：分支頁面的內(nèi)容要相對獨立，切忌重復。（3）不要遺漏內(nèi)容。2.1.4確定網(wǎng)站命名規(guī)則文件的命名一般遵循以下4個原則。（1）漢語拼音。（2）拼音縮寫。（3）英文縮寫。（4）英文原義。2.2站點管理器

2.3定義新站點

通過定義站點可以設置是直接在服務器端編輯，還是采用在本地計算機中存放網(wǎng)頁文件的根目錄并設置與遠程服務器進行數(shù)據(jù)傳遞的方式等。定義站點就像是為一個即將開始的項目命名，并做好基礎工作，使各項工作按部就班有序進行。2.4創(chuàng)建文件夾和空白頁面2.4.1創(chuàng)建文件夾2.4.2創(chuàng)建首頁文件2.4.3在站點地圖中新建文件2.4.4在文件列表窗口中新建文件2.4.1創(chuàng)建文件夾網(wǎng)站內(nèi)每個分支的所有文件被統(tǒng)一存放在單獨的文件夾內(nèi)，根據(jù)包含文件的多少，又可以細分到子文件夾里。圖像文件、數(shù)據(jù)庫文件都分別存放于特定的文件夾里?？傊?，合理地使用文件夾來管理網(wǎng)站內(nèi)的文件，可以使網(wǎng)站有條不紊，易于維護管理。2.4.1創(chuàng)建文件夾2.4.2創(chuàng)建首頁文件2.4.3在站點地圖中新建文件2.4.4在文件列表窗口中新建文件2.5站點管理器的其他功能2.5.1站點地圖布局2.5.2保存站點地圖2.5.1站點地圖布局2.5.2保存站點地圖小結

本章主要介紹了設計網(wǎng)站的一些準備工作及與站點管理有關的各項功能的使用，按步驟定義了一個新站點，然后在站點地圖中創(chuàng)建了各分支頁面。如果能夠得到一個與事先畫出的結構草圖結構相一致的站點地圖，就說明準備工作是成功的，否則要對照結構草圖查找問題。單元2制作基本頁面操作演練1.2技術提升1.3操作準備1.1考核評價1.4操作準備1.1操作準備1.1操作準備1.1操作準備1.1操作準備2.1操作演練1.2操作演練1.2操作演練1.2操作演練1.2操作演練1.2操作演練2.2技術提升1.3技術提升1.3技術提升2.3考核評價1.4考核評價2.4網(wǎng)頁中的基本組成元素有文字、圖像和動畫等，網(wǎng)站中的基本頁面主要包括文本網(wǎng)頁、圖文混排網(wǎng)頁和、文混排網(wǎng)頁等。本單元通過制作文本網(wǎng)頁、圖文混排網(wǎng)頁和表文混排網(wǎng)頁，學會新建網(wǎng)頁文檔、設置網(wǎng)頁的頁面屬性、在網(wǎng)頁中輸入與編輯文本、對網(wǎng)頁文本進行格式化處理、添加編輯列表、插入與編輯圖像、插入與設置表格等操作?！窘虒W導航】教學目標（1）學會新建網(wǎng)頁文檔和設置網(wǎng)頁的頁面屬性（2）學會在網(wǎng)頁中輸入文字、編輯文本、設置文本屬性（3）學會在網(wǎng)頁中插入空格、文本換行符和特殊字符（4）學會在網(wǎng)頁中添加與編輯項目列表、編號列表和定義列表（5）學會在網(wǎng)頁中插入與編輯圖像、設置圖像屬性（6）熟悉制作圖文混排網(wǎng)頁的技巧（7）學會正確地插入表格，并合理地設置表格的屬性（8）學會單元格的合并、拆分、插入和刪除等操作（9）學會正確地設置表格中行和列的屬性（10）學會正確設置表格、單元格的背景圖像和背景顏色（11）學會正確地在表格中輸入文字、插入圖像并定位（12）了解網(wǎng)頁中文本、列表、圖像等網(wǎng)頁元素樣式屬性的定義（13）了解網(wǎng)頁中Div標簽的插入方法，了解網(wǎng)頁中CSS樣式的簡單應用（14）了解在網(wǎng)頁中插入Flash動畫的方法【2.1操作準備】1．創(chuàng)建所需的文件夾，拷貝所需的資源。2．創(chuàng)建站點。3．熟悉新建網(wǎng)頁文檔的方法?！?.2操作演練】【任務2-1】新建網(wǎng)頁文檔0201.html與設置頁面屬性【任務描述】（1）新建一個網(wǎng)頁文檔，保存在文件夾“2-1”中，命名為“0201.html”。（2）網(wǎng)頁的“外觀”屬性設置要求如下所示。網(wǎng)頁的“頁面字體”設置為“宋體”?！按笮　痹O置為“12px”；“文本顏色”設置為“#333”，“背景顏色”設置為“#ccf2f1”；“左邊距”和“右邊距”設置為“30px”，“上邊距”和“下過距”設置為“10px”。（3）網(wǎng)頁的“標題”屬性設置要求如下所示。網(wǎng)頁的標題字體設置為“黑體”，標題1的大小為“24px”，顏色為“#0000ff”；標題2的大小為“18px”，顏色為“#ff00ff”；標題3的大小為“14px”，顏色為“black”。（4）網(wǎng)頁的“標題/編碼”屬性設置要求如下所示。網(wǎng)頁的標題設置為“標準快遞-配送方式-幫助中心-易購網(wǎng)”，文檔類型為“XHTML1.0Transitional”，編碼為“簡體中文(GB2312)”。【任務實施】1．創(chuàng)建網(wǎng)頁文檔且保存2．打開【頁面屬性】對話框3．設置“外觀”屬性（1）在【頁面屬性】對話框左邊“分類”列表中選擇“外觀（CSS）”。（2）設置頁面字體。（3）設置頁面字體大小。從字體大小列表框中單擊選擇12，其單位為“像素(px)”。（4）設置網(wǎng)頁的文本顏色。（5）設置網(wǎng)頁的背景顏色。（6）設置頁面邊距。4．設置“標題”屬性（1）打開【頁面屬性】”對話框，左邊“分類”列表中選擇“標題”。（2）在“標題字體”列表框中選擇“黑體”，如果字體下拉列表框中沒有列出所需的字體，可以單擊列表框中的最后一項“編輯字體列表…”，添加所需的字體。（3）在“標題3”的“大小”列表框中選擇“14”，單位默認為“像素(px)”，顏色文本框中輸入“black”。5．設置“標題/編碼”屬性（1）打開【頁面屬性】對話框，左邊“分類”列表中選擇“標題/編碼”。（2）在“標題”文本框中輸入“標準快遞-配送方式-幫助中心-易購網(wǎng)”。（3）在“文檔類型”列表框中選擇“XHTML1.0Transitional”。（4）在“編碼”列表框中選擇“簡體中文(GB2312)”，將網(wǎng)頁的文字編碼設置成中文。6．保存網(wǎng)頁的屬性設置單擊“標準”工具欄中的【保存】按鈕或【全部保存】按鈕，保存網(wǎng)頁的屬性設置?！救蝿?-2】在網(wǎng)頁中輸入與編輯文本【任務描述】（1）在網(wǎng)頁0201.html中輸入如圖2-12所示的多個標題和多行文本。圖2-12網(wǎng)頁0201.html中的文本內(nèi)容（2）將網(wǎng)頁中的文本標題“標準快遞收費標準”和“服務說明”設置為“標題3”。（3）將網(wǎng)頁中第2行的文字“標準快遞”設置為粗體。網(wǎng)頁0201.html的瀏覽效果如圖2-13所示。圖2-13網(wǎng)頁0201.html的瀏覽效果【任務實施】1．在網(wǎng)頁0201.html中輸入文本（1）確定文字輸入位置（2）輸入標題文本（3）輸入空格和文本（4）插入特殊字符（5）保存所輸入的文本2．編輯網(wǎng)頁中的文本在網(wǎng)頁中輸入的文本與Word一樣，也能進行編輯，常見的文本編輯操作有：（1）拖動鼠標選中一個或多個文字、一行或多行文本，也可以選中網(wǎng)頁中的全部文本。（2）按BackSpace鍵或Delete鍵實現(xiàn)刪除文本操作。（3）將光標移動到需要插入文本的位置，輸入新的文本。（4）實現(xiàn)復制、剪切、粘貼等操作。（5）實現(xiàn)查找與替換操作。（6）實現(xiàn)撤消或重做操作。

3．格式化網(wǎng)頁中的文本（1）顯示【屬性】面板。（2）設置網(wǎng)頁文本標題的格式屬性。（3）設置網(wǎng)頁中第2行的文字“標準快遞”為粗體。（4）保存對網(wǎng)頁文本的格式設置。4．瀏覽網(wǎng)頁效果

按快捷鍵F12，網(wǎng)頁的瀏覽效果如圖2-13所示。【任務2-3】在網(wǎng)頁中添加與編輯列表【任務描述】（1）新建1個網(wǎng)頁0202.html，在該網(wǎng)頁中輸入多行文字，且設置其格式。（2）將網(wǎng)頁中“新手指南”的相關內(nèi)容設置為項目列表。（3）將網(wǎng)頁中“配送方式”的相關內(nèi)容設置為定義列表。網(wǎng)頁0202.html的瀏覽效果如圖2-20所示。圖2-20網(wǎng)頁0202.html的瀏覽效果【任務實施】1．創(chuàng)建網(wǎng)頁文檔且進行保存。2．在網(wǎng)頁0202.html中輸入文本且進行編輯。3．設置文本格式。選擇網(wǎng)頁0202.html中的第1行文字“幫助信息helpinfo”，將其設置為“標題3”，然后將第2行文字“新手指南”設置為“標題4”。4．設置項目列表。選中網(wǎng)頁中第3行（會員注冊）至第8行中的文字（會員協(xié)議），單擊菜單命令【格式】→【列表】→【項目列表】，如圖2-22所示，將所選中的文本設置為項目列表。5．設置定義列表。選中網(wǎng)頁中的第10行至第14行的項目列表文字，在【文本】插入工具欄中單擊【dd定義說明】按鈕，將所選中的文本設置為“定義說明”。6．保存網(wǎng)頁與瀏覽網(wǎng)頁效果。保存網(wǎng)頁0202.html，然后按快捷鍵F12，網(wǎng)頁的瀏覽效果如圖2-20所示?！救蝿?-4】在網(wǎng)頁中插入與編輯圖像【任務描述】（1）新建1個網(wǎng)頁0203.html.。（2）設置網(wǎng)頁0203.html的背景圖像為“02bg.gif”。（3）在網(wǎng)頁0203.html中輸入必要的文字。（4）在網(wǎng)頁0203.html中插入圖像logo.jpg，且設置其屬性：寬為183px，高為57px，

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論