一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

網(wǎng)頁的工作原理1

 旋風~小馬 2010-02-23

網(wǎng)頁的工作原理

作者:佚名  來源:本站整理  發(fā)布時間:2009-8-4 9:42:56  [收 藏] [評 論]


網(wǎng)頁的工作原理

引言

您曾經(jīng)對網(wǎng)頁的原理感到好奇嗎?您曾經(jīng)想過要創(chuàng)建自己的有標題、文本和圖形圖標的完整網(wǎng)頁嗎?您曾經(jīng)聽說過“HTML”這個詞并想知道是什么意思嗎?如果是這樣,請往下閱讀……

在本文中,我們將探討網(wǎng)頁的科學和藝術(shù),并用一些技巧來實驗一番,今天在您自己的計算機上就可以試用這些技巧。我們已經(jīng)創(chuàng)建一個工具,可讓您試用HTML并立即查看其效果。原來,創(chuàng)建網(wǎng)頁是件很容易的事情,同時又非常有趣,根本不是高不可攀。到您讀完這篇文章時,您就能胸有成竹地開始構(gòu)建您自己的頁面了!

基礎準備知識

此時,以下幾點您已經(jīng)做好了準備:

  • 您正坐在計算機前。
  • 您正在使用網(wǎng)絡瀏覽器閱讀本頁,瀏覽器可能是Microsoft Internet Explorer、Firefox或Netscape。
  • 您希望學習網(wǎng)頁的工作原理,也許您希望學習創(chuàng)建自己頁面的藝術(shù)。

因為您正坐在計算機前,您有網(wǎng)絡瀏覽器,有學習的渴望,所以您已經(jīng)具備開始創(chuàng)建頁面所需要的一切。您可以學習HTML并用您的網(wǎng)絡瀏覽器來實驗,從而學會如何創(chuàng)建您能想象得出的任何種類的網(wǎng)頁。

為了能討論網(wǎng)頁和研究網(wǎng)頁的工作原理,您可能希望了解4個簡單的術(shù)語(如果您在第一次讀到這些術(shù)語時覺得晦澀難懂,不要擔心):

  • 網(wǎng)頁——網(wǎng)頁是一個簡單的文本文件,它不僅包含文本,而且包含一套HTML標記,這些標記說明了當瀏覽器在屏幕上顯示頁面時,該文本應該有什么樣的格式。標記是一些簡單的指令,能告訴網(wǎng)絡瀏覽器在顯示頁面時該頁面看起來應該是什么樣的。標記能告訴瀏覽器做一些事,諸如改變字體大小或顏色,或在欄目中安排內(nèi)容。網(wǎng)絡瀏覽器能解釋這些標記,從而判斷如何格式化文本并在屏幕上顯示。
  • HTML——HTML代表“超文本標記語言”。“標記語言”是一種計算機語言,它說明如何格式化頁面。如果您想做的一切僅僅是顯示一長串黑白文本,沒有任何格式,那就不需要HTML。但是如果您想改變字體、添加顏色、創(chuàng)建標題和在頁面中鑲嵌圖形,那么HTML就是用來實現(xiàn)這一切的語言。
  • 網(wǎng)絡瀏覽器——網(wǎng)絡瀏覽器,例如Netscape Navigator或Microsoft Internet Explorer,是一個計算機程序(也稱為軟件應用程序,或簡稱應用程序),它能做兩件事:

    • 網(wǎng)絡瀏覽器知道如何訪問互聯(lián)網(wǎng)上的網(wǎng)絡服務器并請求一個頁面,它能夠通過網(wǎng)絡將該頁面拉到您的計算機上。
    • 網(wǎng)絡瀏覽器知道如何解釋頁面內(nèi)的一整套HTML標記,以便按照頁面創(chuàng)建者的意圖把該頁面顯示在您的屏幕上。

    網(wǎng)絡瀏覽器工作流程示意圖


  • 網(wǎng)絡服務器——網(wǎng)絡服務器是一個計算機軟件,它能對瀏覽器索要頁面的請求做出回應,并通過互聯(lián)網(wǎng)向網(wǎng)絡瀏覽器提供該頁面。您可以把網(wǎng)絡服務器想象成一座公寓大樓,在每個公寓房間里存放著某人的網(wǎng)頁。為了在公寓大樓里存儲您的頁面,您需要支付房租。存放在公寓大樓里的頁面可以向全世界的任何人展示,供他們查閱。您的房東稱為主機,而您的房租通常稱為托管費。每天都有成百上千萬臺網(wǎng)絡服務器通過我們稱為互聯(lián)網(wǎng)的網(wǎng)絡向千千萬萬的人的瀏覽器提供頁面。有關這個過程的詳細信息,請參閱Web 服務器工作原理一文。

進行網(wǎng)頁效果實驗是一件非常容易的事情,不需要使用服務器。瀏覽器能在您的個人計算機上顯示您創(chuàng)建的網(wǎng)頁。一旦您了解了如何創(chuàng)建自己的頁面,很可能您希望把頁面“放到服務器上”,以便全世界的人都能下載和閱讀您的頁面。我們將在本文最后討論如何做到這一點。

查看源代碼

讓我們觀察一番網(wǎng)頁的“內(nèi)臟”。這是頁面作者鍵入的原始文本和HTML標記,瀏覽器能解釋這些標記并生成您在互聯(lián)網(wǎng)上實際看到的網(wǎng)頁?,F(xiàn)在用您的鼠標右擊此頁面的任何空白部分并選擇“查看”。這時會出現(xiàn)一個新的窗口,顯示一些單詞和字符,有些可能看起來很專業(yè)和奇怪。這些單詞和字符統(tǒng)稱HTML編程代碼,就是您將要學的東西。代碼中的每個元素稱為HTML標記。無論這些代碼看起來有多復雜,都不要害怕,您將驚訝地發(fā)現(xiàn)實際上它們是多么簡單。如果您看著頁面的源代碼覺得一頭霧水,那就干脆關閉源代碼頁,返回本文好了。

用這種方式,您可以在互聯(lián)網(wǎng)上看到幾乎任何頁面“幕后”的東西。隨著對頁面設計的研究逐步深入,您可能發(fā)現(xiàn)您愿意查看復雜網(wǎng)頁的源代碼,以便弄清作者或頁面設計者究竟使用了什么代碼創(chuàng)建出如此巧妙的構(gòu)思。

現(xiàn)在讓我們學習許多標記的含義并開始創(chuàng)建簡單的頁面。

HTML標記


HTML標記是一個代碼元素,它告訴頁面瀏覽器如何處理您的文本。每個標記看上去就是放在<(小于號)和>(大于號)之間的字母或單詞。

示例:<center>, <body>

為了告訴網(wǎng)絡瀏覽器“結(jié)束”您要它做的事,要在結(jié)束標記中使用斜杠:

示例:</center>, </body>

大多數(shù)標記都由成對的“開始”碼和“結(jié)束”碼組成,但不是絕對的。

您創(chuàng)建的任何網(wǎng)頁在開始的地方都有以下標記:

  • <HTML>:告訴瀏覽器這是一個HTML文檔的開始
  • <HEAD>:告訴瀏覽器這是頁面的頁眉(以后您將學到兩個“HEAD”標記之間是什么內(nèi)容)
  • <TITLE>:告訴網(wǎng)絡瀏覽器這是頁面的標題
  • <BODY>:告訴網(wǎng)絡瀏覽器這是網(wǎng)頁內(nèi)容的起點,您想在頁面上說和看的內(nèi)容都跟在這個標記之后。

結(jié)束網(wǎng)頁所需要的標記是:

  • </BODY>
  • </HTML>

建立簡單的頁面

創(chuàng)建網(wǎng)頁的方法有很多種。成百上千的公司創(chuàng)建了各種工具,以各種方式來幫助完成這個過程。然而,我們在這里的目標是理解網(wǎng)頁的真正原理,而不是讓某個工具把頁面的創(chuàng)建過程掩蓋起來,不讓我們看到。因此,我們將使用盡可能簡單的工具,這些工具在您的計算機上已經(jīng)存在。

在您的計算機上有一個程序,可以創(chuàng)建簡單的文本文件。在Windows計算機上,該應用程序叫做記事本。在Macintosh計算機上,該程序叫做SimpleText。如果您找不到這些程序,也可以使用基本的文字處理程序,例如WordPerfect和Microsoft Word。

    注意:
  • 在Windows 95/98環(huán)境中,依次單擊“開始”按鈕、“程序”、“附件”和“記事本”。
  • 在Windows 3.1環(huán)境中,單擊“附件”(在“程序管理器”中),再單擊“記事本”。
  • 在Macintosh環(huán)境中,依次單擊“Macintosh HD”、“應用程序”和“SimpleText”。

一旦您在屏幕上打開了適當?shù)某绦?,請在窗口中鍵入(或剪切并粘貼)以下HTML文本:

<html> 
<head>
<title>My First Page</title>
</head>
<body>
大家好。這是我的第一個頁面!
</body>
</html>

無論您把這些標記和文本逐個排列、逐行排列還是縮進排列,都不影響文本在瀏覽器窗口的顯示方式。在您的標記中,無論使用大寫字母還是小寫字母,都不會造成什么差別。

現(xiàn)在您需要把這個文件保存在某個地方,以便能很快找到它。把它保存到桌面上,如果能保存到您專門為存放即將創(chuàng)建的頁面而創(chuàng)建的那個目錄中,則更好。用first.html文件名來保存。

下一步,在您的網(wǎng)絡瀏覽器中(即Microsoft Internet Explorer或Netscape Navigator)打開此頁面。所有的網(wǎng)絡瀏覽器都有打開存儲在本地計算機中的文件的方法。在Internet Explorer和Netscape中,從窗口頂部的“文件”菜單中選擇“打開文件”。打開first.html文件。當您在瀏覽器中打開該文件時,它看起來像這樣:

瀏覽器打開頁面截圖

在這幅圖中可以發(fā)現(xiàn)三個特征:

  • 您可以看到該頁面有標題“我的第一個頁面”。
  • 您可以看到該頁面的正文包含文字“大家好。這是我的第一個頁面!”
  • 您可以看到在地址窗口中顯示的URL是來自本地硬盤的C:WINDOWSDESKTOPfirst.html,而不是通常從互聯(lián)網(wǎng)上的服務器收到頁面時所顯示的http://...。

通過觀察組成您的頁面的HTML文本,您可以確切地了解頁面是如何獲得標題和正文的。

現(xiàn)在您已經(jīng)創(chuàng)建和查看了您的第一個網(wǎng)頁,并走上了成為頁面高手的成功之路。學會有關網(wǎng)頁制作的全部知識的關鍵是掌握越來越多的HTML標記,這些標記能讓您自定義您的頁面。您可能還想學習幫助您為頁面創(chuàng)建表格、框架和圖形的工具。本網(wǎng)頁知識系列講座將引導您學習所有您需要的信息。

基本HTML格式標記

您將經(jīng)常使用本頁上的基本HTML標記,它們能完成您在大多數(shù)網(wǎng)頁上看到的格式設置任務的90%。一旦您學會這些標記,您就走上了成為HTML高手的成功之路!

在學習過程中,您用如下方法檢驗您所使用的HTML標記:

  • 如果您喜歡我們在上一頁中討論過的“first.htm”文件,您可以把HTML鍵入其中并創(chuàng)建完整的網(wǎng)頁。請記住,要把您希望在網(wǎng)頁上顯示的所有信息放在<body>和</body>標記之間。請通過添加新的標記并查看其結(jié)果來實驗您的頁面。

讓我們開始吧!

粗體、斜體和下劃線

  • 通過添加以下標記把任何一段文本變成粗體:

    <b>

    該標記要放在文本的開始,并在文本結(jié)尾添加以下標記:

    </b>

    粗體屬性就到此結(jié)束。

    這是<b>粗體</b>。
    這是粗體。

     

  • 若要設置斜體,則以同樣方式使用這對標記:

    <i>.....</i>

    這是<i>斜體</i>。
    這是斜體。

     

  • 若要設置下劃線,則使用這對標記:

    <u>.....</u>

    這是<u>下劃線</u>。 這是下劃線。

換行和段落

雖然您鍵入的文本可能包含回車、制表符和額外的空格,但是瀏覽器看不見它們。您必須使用標記才能在HTML文檔中創(chuàng)建空白空間。

<br>標記在行與行之間起換行的作用。您可以使用多個這樣的標記來創(chuàng)建空白空間。

    這一行<br>被斷開。 這一行
    被斷開。

<p> 標記能在文本的兩行之間創(chuàng)建額外的空間。如果把 <br> 標記放在一行文本中,只能斷開該行;如果使用 <p> 標記,則不僅斷開該行,而且創(chuàng)建額外的空間。

    這一行<p>被空白隔開。 這一行

    被空白隔開。

<hr> 標記能創(chuàng)建水平標尺或水平線。

    這是一條水平標尺:<hr> 這是一條水平標尺:
    制表符
    沒有可以在文檔內(nèi)創(chuàng)建一個“制表符”的正式的HTML標記。許多站點設計人員創(chuàng)建表格或使用空白圖像來創(chuàng)建空間(表格和圖像將在本文后面加以說明)。使文本縮進的一種方法是使用<ul>標記,以便讓瀏覽器認為您要創(chuàng)建一個“列表”列表能自動縮進文本。結(jié)束時請使用</ul>標記來“結(jié)束”縮進。標記<blockquote>……</blockquote>也能把文本縮進。
    另一個替代方法是<pre>標記。這個標記用來顯示預格式化文本,即“按原樣”顯示的文本。任何在<pre>和</pre>標記內(nèi)創(chuàng)建的空白在瀏覽器中的顯示效果將與在源代碼中顯示的一樣。
    改變字體顏色、類型和大小
    通過使用以下標記來改變?nèi)魏挝谋镜念伾?

    <font color="color">...</font>

    這是<font color="red">紅色</font>。 這是紅色。
    這是<font color="green">綠色</font>。 這是綠色。

    大多數(shù)標準顏色都能使用。請嘗試“淺色”和“深色”,如“淺藍”或“深綠”。您還可以指定一個特定的十六進制顏色號碼,例如:<font color="#864086">.要獲得十六進制顏色代碼的列表,請訪問December.com:HTML。

    如果您想為頁面的整個文本分配一種特定顏色,則把text="color" 標記添加到 <body> 標記之內(nèi)。

    示例:<body text="blue">

    即使您為整個文本分配了顏色,您仍可以通過使用在上面學過的標記來改變文本中任何部分的顏色。

    • 通過使用以下標記來改變字體類型:

      <font face="font type"> ... </font>

      This is <font face="arial">arial</font>. 這是Arial字體。
      這是 <font face="geneva">geneva</font> 字體。 這是Geneva字體。

      (注意:如果您規(guī)定的字體在用戶的計算機中不能用,字體類型會自動改為瀏覽器的默認字體,通常是Courier或Times New Roman字體,所以如果您希望控制在用戶瀏覽器中顯示的內(nèi)容,最好堅持使用標準字體。)

       

    • 通過使用以下標記來改變?nèi)魏挝谋镜拇笮。?

      <font size=value>...</font>

      示例:<font size=4>

      在大多數(shù)瀏覽器上默認的字體大小是“3”,所以任何比3大的值將使文本變大,而任何比3小的值將使文本變小。

      您還可以通過增大或減小默認字體的大小來改變字體大小。

      示例:<font size=+4>,或 <font size=-2>

      此字體大小<font size=+2>增加 2</font>。 此字體大小增加 2。
      此字體大小<font size=+1>增加 1</font>。 此字體大小增加 1。
      此字體大小<font size=-2>減少 2</font>。 此字體大小減少 2。
      此字體大小<font size=-1>減少 1</font>。 此字體大小減少 1。

      您還可以通過使用標記 <small> 和 <big> 來改變字體大?。?

      這是<small>小</small>文本。 這是小文本。
      這是<big>大</big> 文本。 這是大文本。

      標題標記也會改變字體大小,為段落或文章創(chuàng)建粗體“標題”:

      <h1>這是一個H1標題。</h1> 這是一個H1標題。
      <h2>這是一個H2標題。</h2> 這是一個H2標題。
      <h3>這是一個H3標題。</h3> 這是一個H3標題。

      使用以下標記可結(jié)束任何字體元素更改:

        </font>

         

      或者使用您為特定標記而使用的成對的終止標記:
        示例:</small>,</big>, </H2>
        創(chuàng)建背景顏色

          通過把bgcolor="color" 標記添加到<body>標記之內(nèi)來改變您的頁面背景顏色。

          示例:<body bgcolor="yellow">

          與本節(jié)中說明的改變字體顏色一樣,您可以使用大多數(shù)標準顏色,或使用十六進制顏色代碼。

          創(chuàng)建列表
          您可以創(chuàng)建3種類型的列表:無序列表、有序列表和說明性列表

          無序列表看起來像這樣:

          • 加利福尼亞
          • 俄勒岡
          • 北卡羅萊納
          無序列表是帶項目符號的列表,以標記<ul>開始。標記<li>(是List Item的縮寫)用于列表中每個項目之前。結(jié)束標記</ul>可結(jié)束列表。

          示例:

          <ul>
          <li>加利福尼亞
          <li>俄勒岡
          <li>北卡羅萊納
          </ul>

          項目符號的類型可以改成“圓圈”、“方塊”或“圓盤”,方法是在<ul>標記之內(nèi)添加具體說明:

          <ul type="circle">
          <li>加利福尼亞
          <li>俄勒岡
          <li>北卡羅來納
          </ul>
          • 加利福尼亞
          • 俄勒岡
          • 北卡羅萊納

          有序列表看起來像這樣:

          1. 柑桔
          2. 葡萄
          3. 櫻桃
          有序列表是各個項目按有邏輯性的、帶編號的順序來排列的列表。使用標記<ol>和</ol>可開始和結(jié)束這種列表。同上所述,標記<li>用于每一個項目之前。

          示例:

          <ol>
          <li>柑桔
          <li>葡萄
          <li>櫻桃
          </ol>

          您可以改變組織的類型,方法是在<ol>標記之內(nèi)添加一個“類型”名稱。

          <ol type="A"> 讓列表按大寫字母排序:(A, B, C...)

          <ol type="a"> 讓列表按小寫字母排序:(a, b, c...)

          <ol type="I"> 讓列表按羅馬數(shù)字排序:(I, II, III...)

          <ol type="i"> 讓列表按小羅馬數(shù)字排序:(i, ii, iii...)

          如果您希望用一個指定值(例如“6”)來開始您的有序列表,可使用以下“開始”和“值”標記:

          <ol start=5>
          <li value=6>

          說明性列表創(chuàng)建文本項目的列表,第二行縮進:

          Marshall Brain
          HowStuffWorks公司的創(chuàng)始人

          請以這種方式使用以下標記:

          <dl>
          <dt>Marshall Brain
          <dd>HowStuffWorks公司的創(chuàng)始人
          </dl>

          <dt>標記應該與您希望在頁邊排列的文本對應;而<dd>標記則與您希望縮進的行對應。

          與其他站點鏈接

          網(wǎng)頁的最重要的優(yōu)點之一是它能夠創(chuàng)建與網(wǎng)上的其他頁面的鏈接。如果使用以下的錨定標記,您可以引用其他人的作品、指向您喜歡的其他頁面,等等:

          <a href="URL">

          在錨定標記后鍵入該頁面的名稱,然后用以下標記結(jié)束錨定:

          </a>

          示例:

          <a href="http://www.">博聞網(wǎng)</a>

          這是在您的頁面上看到的效果:

          博聞網(wǎng)

          您還可以很容易地把帶項目符號的列表與鏈接結(jié)合起來,創(chuàng)建一個鏈接列表。

          新窗口
          如果您不希望您的訪客單擊了轉(zhuǎn)向另一個站點的鏈接后離開您的頁面,可在您的錨定標記上添加以下標記。這樣當單擊該鏈接時就不會讓訪客離開您的站點而轉(zhuǎn)向別人的站點,而是僅僅打開一個新的空白窗口顯示該鏈接的目的地:

          target="_blank"

          示例:
          <a href="http://www." target="_blank">

          鏈接的顏色
          藍色是鏈接用的標準默認顏色。但是您可以改變頁面上所鏈接信息的顏色,方法是把以下標記插入到您的 <body> 標記之內(nèi):

          • link="color"
          • vlink="color"

          Vlink代表“受訪鏈接”。當有人訪問這些鏈接時,鏈接會改變顏色。如果您不希望受訪鏈接改變顏色,只需給鏈接和受訪鏈接賦予相同的顏色屬性。

          示例:<body link="green" vlink="green">

          創(chuàng)建接收電子郵件的鏈接
          如果您希望收到閱讀您的頁面的人發(fā)來的電子郵件,可使用以下錨定標記:

          <a href="mailtyouremailaddress">

          然后在該標記后再次鍵入您的郵件地址(或您希望在頁面上顯示的任何鏈接文本)。用以下標記結(jié)束該字符串:

          </a>

          示例:

          <a href="mailtexample@">請給我發(fā)郵件</a>

          這是在您的頁面上看到的效果:

          請給我發(fā)郵件

          創(chuàng)建與您自己的頁面的鏈接
          錨定標記不僅用于與互聯(lián)網(wǎng)上的頁面鏈接。您還可以用錨定標記與您自己頁面上的信息建立鏈接。在以下示例中,您可以省略前綴“http://www”,而只包括html文檔的文件名:

          示例:<a href="company.htm">公司信息</a>

          若要鏈接到您的頁面的特定部分,則需要為您所指的那個部分命名,并把該名稱包括在鏈接的錨定標記之內(nèi)。具體的實現(xiàn)方法如下:

          為您的頁面的某個部分命名,方法是把以下標記插入到您希望鏈接指向的部分之前。您可以選擇任何單詞、字母或字符作為該部分的名稱:

          <a name="名稱">

          示例:<a name="5">

          在錨定標記中,可通過在名稱前加一個“#”來指向您的頁面的這一部分。如果已命名的鏈接指向頁面中包含此鏈接的位置,與該已命名部分鏈接的錨定標記看起來將是這樣:

          <a href="http://www./#5">公司信息</a>

          如果已命名的鏈接指向一個html文檔,且該文檔獨立于鏈接所在的頁面,則也應包括該html文檔的文件名。

          示例:<a href="http://www./company.htm#5">公司信息</a>

          添加圖像和圖形

          可使用以下標記把任何數(shù)字圖像放到您的頁面上:

          <img src="圖片文件名.擴展名">

          網(wǎng)頁上的圖像或者是GIF文件(英文發(fā)音是“jiff”)或者是JPG文件(英文發(fā)音是“jay-peg”)。任何圖像都會包含這兩種擴展名中的一個,所以如果您有一個圖像名叫“logo”,它的文件名將是“logo.gif”或“logo.jpg”。

          一定要把您打算在網(wǎng)頁上顯示的圖像和圖形存儲在您存儲“html”文件的同一個文件夾或目錄中。否則您的計算機在尋找您希望顯示的圖片時會遇到麻煩。還有,在鍵入圖片名稱時要確保嚴格遵守它在文件夾中保存時用的文件名,因為文件名對大小寫很敏感。

          對齊
          在默認情況下,文本和圖像在瀏覽器中顯示時使用左對齊,即文本和圖形自動靠左側(cè)頁邊上對齊。如果您希望把頁面的任何部分“居中”,可使用以下標記:

          <center>

          若要結(jié)束居中,可以使用相應的結(jié)束標記:

          </center>

          您還可以為各種“片段”(即從一個詞、一行文本到整個頁面的任何內(nèi)容)進行編碼,讓這些片段按一定的方式對齊。

          在片段的開始處放片段對齊標記,包括您希望的或圖像要采取的對齊方式(即右對齊、左對齊、居中):

          示例:<div align="center">

          用以下標記結(jié)束片段對齊:

          </div>

          使用您在本文中剛學到的信息,您可以開始創(chuàng)建很有趣、很吸引人的網(wǎng)頁了。嘗試一下,用我們剛討論過的工具和標記來創(chuàng)建一兩個網(wǎng)頁。如果您急于讓全世界的人欣賞您的杰作,可以跳到“把您的頁面放到網(wǎng)上”一文來學習如何發(fā)布您的新網(wǎng)頁。

          創(chuàng)建表格

          目前,為了創(chuàng)建編排得富有藝術(shù)性的網(wǎng)頁,有一個廣泛使用的HTML工具,那就是表格。如果掌握了表格,您就不再是“創(chuàng)建”頁面,您是在“設計”頁面。

          表格的種類繁多,從簡單的方框到很復雜的設計布局,任您挑選。在本文中,我們將討論表格的基礎知識,并在您探索如何設計出人們喜愛訪問的漂亮頁面的過程中,為您提供幾個竅門供您實驗。

          與您希望在瀏覽器窗口顯示的所有信息一樣,要確保在HTML文檔中把表格放在<body>和</body>這對標記之間。表格應從以下標記開始:

          <table>

          表格中的每個水平行應從以下標記開始:

          <tr>

          而行內(nèi)的每條數(shù)據(jù)應從以下標記開始:

          <td>

          請研究以下圖表:

          A1 A2
          B1 B2
          C1 C2

          這里我們有3行和2列。

          為了給此圖表的基本結(jié)構(gòu)編碼,應按以下順序使用以下標記:

          <table> 開始畫表格
          <tr> 開始畫第一行
          <td> 開始畫數(shù)據(jù)的第一個“單元格”(A1)
          </td> 結(jié)束A1單元格
          <td> 開始畫第二個單元格(A2)
          </td> 結(jié)束A2單元格
          </tr> 結(jié)束第一行
          <tr> 開始畫第二行
          <td> 開始畫第二行的第一個數(shù)據(jù)單元格(B1)
          </td> 結(jié)束B1單元格
          <td> 開始畫B2單元格
          </td> 結(jié)束B2單元格
          </tr> 結(jié)束第二行
          <tr> 開始畫第三行
          <td> 開始畫第三行的第一個數(shù)據(jù)單元格(C1)
          </td> 結(jié)束C1單元格
          <td> 開始畫C2單元格
          </td> 結(jié)束C2單元格
          </tr> 結(jié)束第三行
          </table> 結(jié)束表格

          許多設計人員喜歡把表格的各部分縮進一些,以便使編碼更易于閱讀。下面顯示的是這方面的一個示例。

          現(xiàn)在我們來為表格的基本結(jié)構(gòu)添加邊框。邊框是表格的輪廓。邊框標記 (border="value")放在初始表格標記內(nèi)。您可以通過分配一個特定值(我們將分配“1”)來規(guī)定輪廓線的粗細。一個很好的做法是用不同的值來實驗,以便弄清在瀏覽器中的實際顯示效果。如果您不希望顯示邊框,則把輪廓線值分配為“0”。

          (注意:即使您不打算在表格周圍出現(xiàn)邊框,開始的時候也最好有可見的邊框,并將其至少保持到您將所有可能影響表格顯示效果的“錯誤”排除掉為止。)

          把以下代碼和數(shù)據(jù)鍵入(或剪切并粘貼)到您的HTML文檔中:

           
          <table border=1>
          <tr>
          <td>A1
          </td>
          <td>A2
          </td>
          </tr>
          <tr>
          <td>B1
          </td>
          <td>B2
          </td>
          </tr>
          <tr>
          <td>C1
          </td>
          <td>C2
          </td>
          </tr>
          </table>

          在瀏覽器中顯示的表格應該看起來很像早些時候顯示的圖表。

          您可以為表格分配很多屬性。下面要討論的一些標記可以讓您用很多創(chuàng)造性的方式來設置表格的格式。

          改變表格的背景顏色

          通過在初始的“table”標記內(nèi)使用“bgcolor”標記來改變整個表格背景的顏色:

          示例:<table bgcolor="yellow">

          也可以為表格內(nèi)的行或單元格分配彩色背景。只要把bgcolor="color" 添加到<tr>或<td>標記中即可為表格的特定部分著色。

          示例:<tr bgcolor="yellow">

          表格大小
          表格中的行和列的寬度和高度會自動擴大,以便與數(shù)據(jù)的長度或瀏覽器窗口的空間大小相匹配。若要規(guī)定表格的寬度和高度,把像素或百分比值包括在開始的“table”標記中即可:

          示例:<table width=300 height=400>

          與規(guī)定整個表格相同,還可以為個別的數(shù)據(jù)單元格規(guī)定寬度和高度。要做到這一點,把width="value" 標記添加到所需單元格的<tr>或<td>標記中即可。

          一個很好的做法是用不同的像素和百分比值來實驗,以便弄清在瀏覽器中的實際顯示效果。

          單元格邊距
          “cellpadding”標記規(guī)定了每個單元格的邊線與單元格內(nèi)的數(shù)據(jù)之間空白的大小(以像素為單位)。在開始的“table”標記內(nèi)使用該標記:

          示例1:<table border=1 cellpadding=5>

          此表格的單元格邊距為 “5”個像素

          示例2:<table border=1 cellpadding=15>

          此表格的單元格邊距為 “15”個像素

          單元格間距
          “cellspacing”標記規(guī)定各個單元格之間的空間大?。ㄒ韵袼貫閱挝唬?。在“table”標記內(nèi)使用該標記:

          示例1: <table border=1 cellspacing=5>

          此表格的單元格邊距為 “5”個像素。

          示例2:<table border=1 cellspacing=15>

          此表格的單元格邊距為 “15”個像素。

          表格標題
          若要為表格內(nèi)的列或行創(chuàng)建一個粗體和居中的“標題”,可使用<th>標記來代替為第一行編碼的<td>標記。

          示例:

          <table border=1> 
          <tr>
          <th>列1
          </th>
          <th>列2
          </th>
          </tr>
          <tr>
          <td>A
          </td>
          <td>B
          </td>
          </tr>
          <tr>
          <td>C
          </td>
          <td>D
          </td>
          </tr>
          </table>

          效果是這樣的:

          列1 列2
          A B
          C D

          對齊和單元格跨度

          在默認狀態(tài)下,表格內(nèi)所有單元格的內(nèi)容(表格標題除外)均是垂直居中、左對齊。若要使單元格的內(nèi)容以不同方式對齊,應把以下標記應用到<td>、<th>或<tr>標記之內(nèi):

          對于水平對齊,不同的值可以實現(xiàn)左對齊、右對齊或居中:

            示例:<tr align="center">

          對于垂直對齊,不同的值可以實現(xiàn)頂部對齊、底部對齊或中間對齊:

            示例:<td valign="top">

          您還可以安排整個表格的對齊方式來決定其在頁面上出現(xiàn)的位置。通過把標記<align="right">或<align="left">插入到初始的“table”標記內(nèi),無論表格在什么位置,都可以讓文本環(huán)繞表格?;蛘撸绻M砀駟为氾@示,周圍沒有文本環(huán)繞,則在整個表格前后使用“分開對齊”標記。

          單元格跨度
          當表格中一個單元格跨越兩個或更多的其他單元格時,就發(fā)生“單元格跨度”。列跨度的一個示例:

          此單元格跨越兩列 此單元格跨越一列
          A B C

          在應用<colspan=value>標記的地方,它應放在<td>標記之內(nèi)。以下是為上面示例所寫的代碼:

          <table border=1> 
          <tr>
          <td colspan=2>此單元格跨越兩列
          </td>
          <td>此單元格跨越一列
          </td>
          </tr>
          <tr align="center">
          <td>A
          </td>
          <td>B
          </td>
          <td>C
          </td>
          </tr>
          </table>

          行跨度的示例:

          此單元格跨越兩行 A B
          C D

          在應用<rowspan=value>標記的地方,它應放在<td>標記之內(nèi)。以下是為上面示例所寫的代碼:

          <table border=1> 
          <tr>
          <td rowspan=2>此單元格跨越兩行
          </td>
          <td>A
          </td>
          <td>B
          </td>
          </tr>
          <tr>
          <td>C
          </td>
          <td>D
          </td>
          </tr>
          </table>

          您在表格中還可以應用我們在上一章里學過的許多屬性,例如字體的大小、類型和顏色,插入圖像,制作列表和添加鏈接。只要在您想設定格式的那個特定單元格的<td>標記后添加適當?shù)臉擞浖纯伞?

          請使用您在本文中學過的各種工具和標記來做實驗和練習。人們在網(wǎng)頁上使用表格時,創(chuàng)新的可能性是無窮盡的。您可以疊加圖像和無邊框的彩色方框來創(chuàng)建天衣無縫的設計,或者在無邊框的表格中嵌套無邊框的表格,有些有顏色,有些沒有顏色,以便創(chuàng)建引人注目的布局。只要發(fā)揮一點想象力、創(chuàng)造性并使用表格,網(wǎng)頁設計就會開拓一片新天地。


          創(chuàng)建框架

          一些頁面設計人員出于設計需要和為使站點顯得對用戶更加友好,在頁面上使用了框架??梢哉f,框架使瀏覽站點更方便,并且不會丟失您原先所在的位置。當單擊一個鏈接時,如果網(wǎng)頁的一部分保持靜態(tài)而同一頁面的另一部分卻改變了,就可以確定網(wǎng)頁中使用了框架。若要查閱帶框架的網(wǎng)頁的功能,請訪問The Birch Aquarium頁面。

          在The Birch Aquarium頁面上,頂部和最底部保持不變,而中部可根據(jù)所選擇的鏈接而變化。該頁面分成3個框架,也就是說,3個不同的HTML文檔在同一時間顯示。您可以按照您的愿望來選擇把頁面分成幾部分,以什么方式來劃分,以及在每個框架中包括什么樣的HTML文檔。

          首先要很好地規(guī)劃您的頁面,這一點很重要。應根據(jù)行和列來考慮布局。您希望顯示幾個水平部分(行)?幾個垂直部分(列)?您估計每個部分需要多少空間(像素或百分比)?

          框架集文檔
          框架集文檔是一個HTML文檔,它指示瀏覽器按特定的方式安排網(wǎng)頁的內(nèi)容。在框架集文檔中,“frameset”標記取代了“body”標記。

          您可以用通常的HTML格式開始編寫框架集文檔:

          <html><head><title>標題</title></head>

          下一步,插入“frameset”標記:

          示例:<frameset rows="20%, 80%">

          此標記表示該頁面將按照標記內(nèi)的兩個值分成兩部分,即上部和下部。如果需要3部分,則應包括 3 個值:

          示例:<frameset rows="10%, 50%, 40%">

          這些數(shù)值告訴瀏覽器每個部分在瀏覽器窗口中要占多大空間??梢允褂冒俜直戎祷蛳袼刂?。值也可以用“*”代替,這指示某個部分可以使用瀏覽器窗口中所有可用的空間:

          示例:<frameset rows="100, *, 50">

          此標記表示該頁面將分成3行。第一個(頂部)框架占100個像素的空間,底部的框架占50個像素的空間,而中間的框架占瀏覽器窗口中所有剩余的空間。

          如果您的頁面分成多個列,則使用帶數(shù)值的用于列的框架集標記:

          示例:<frameset cols="200, *">

          此標記告訴瀏覽器把頁面分成兩列。左列占200個像素的空間。右列占瀏覽器窗口中所有剩余的空間。

          您還可以把框架集的行與框架集的列結(jié)合起來以創(chuàng)建相當復雜的布局??蚣芗臋n的“嵌套”將在本文后面部分討論。

          添加框架源代碼

          如果您還沒有做完頁面,那就接著創(chuàng)建幾個HTML文檔來占據(jù)頁面的每個框架。您可以使用在前面幾章中創(chuàng)建的HTML文檔。

          現(xiàn)在您將為框架集文檔添加“frame src”標記,它能告訴瀏覽器在每個框架中放置哪個HTML文檔:

          示例:

          <html><head><title>Frameset Test</title></head> 
          <frameset cols="200, *">
          <frame src="links.htm">
          <frame src="information.htm">
          </frameset>
          </html>

          此示例顯示了一個框架集文檔,它將把網(wǎng)頁分成兩列,或兩個框架。在左側(cè)框架中,200個像素的空間將顯示“links.htm”文檔。頁面的其余部分(即右列)將顯示“information.htm”文檔。您還可以看到用來結(jié)束一個框架集文檔的標記:

          </frameset>
          </html>

          為框架命名
          通常,網(wǎng)頁包含幾個框架是為了顯示(或鏈接到)位于同一站點的其他信息。The Birch Aquarium站點是使用框架以與同一站點內(nèi)的信息鏈接的示例。當單擊鏈接時,鏈接的菜單欄會把信息拉到網(wǎng)頁中間框架中,而不會干擾頁面的外側(cè)框架。

          為了讓瀏覽器知道把鏈接的信息放到哪一個框架中,必須為框架“命名”。如果不規(guī)定哪一個框架來接收新信息,鏈接的菜單框架將被鏈接的信息本身所取代,這會破壞頁面外觀和框架頁面的目的。

          若要命名框架,只需把“name”標記放在框架集文檔的“frame src”標記內(nèi)。您可以為每個框架起您選擇的任何名稱。

          示例:

          <frame src="links.htm" name="menu">
          <frame src="information.htm" name="info">

          在命名框架后,可以通過在框架名之前添加“target”標記來規(guī)定您希望把鏈接的信息放入哪一個框架中。

          示例:<a href="http://www./company.htm" target="info">公司信息</a>

          這就告訴瀏覽器在名為“info”的框架中顯示鏈接的信息。

          保存和查看您的文檔
          像常規(guī)的HTML文檔一樣,框架集文檔保存時帶有.htm或.html的擴展名。一定要把框架集文件與將在框架中出現(xiàn)的HTML文檔放在同一個文件夾中。

          當您在瀏覽器中打開框架集文檔時,您應該能看到經(jīng)過劃分的屏幕,在每個框架中有單獨的HTML文檔。

          消除滾動條和邊框

          如果在其他框架集文檔中創(chuàng)建框架集文檔,則可以把各種不同的行和列結(jié)合起來。為了實現(xiàn)這種效果而把必要的標記組織起來可能是很復雜的事。這里有一個帶有“嵌套”框架的簡單頁面的示例:

          為這種布局而創(chuàng)建的框架集文檔是:

          <html><head><title>Frame Test</title></head> 
          <frameset rows="20%, 80%">

          <frameset cols="70%, 30%">
          <frame src="logo.htm">
          <frame src="address.htm">
          </frameset>

          <frameset cols="85%, 15%>
          <frame src="info.htm">
          <frame src="links.htm">
          </frameset>

          </frameset>
          <html>

          把它分解一下,“框架”標記的每一行的含義是:

          <frameset rows="20%, 80%">
          此文檔內(nèi)有兩行。上面的行占可用的垂直空間的20%。下面的行占80%。實際上這些值規(guī)定了每個行的高度。

          <frameset cols="70%, 30%">
          在第一行內(nèi)有兩列。左列占可用的水平空間的70%,右列占30%。實際上這些值規(guī)定了每個列的寬度。

          <frame src="logo.htm">
          HTM文檔“logo”將出現(xiàn)在第一行的第一列中。

          <frame src="address.htm">
          HTM文檔“address”將出現(xiàn)在第一行的第二列中。

          </frameset>
          第一列的框架集是完整的。

          <frameset cols="85%, 15%>
          在第二行中有兩列。左列占可用的水平空間的85%。右列占15%。

          <frame src="info.htm">
          HTM文檔“info”將出現(xiàn)在第二行的第一列中。

          <frame src="links.htm">
          HTM文檔“links”將出現(xiàn)在第二行的第二列中。

          </frameset>
          第二列框架集結(jié)束。

          </frameset>
          整個框架集結(jié)束。

          要使您的網(wǎng)頁更引人注目和富有動感,框架是您可以使用的極好工具。框架使您能把頁面的某些方面始終保持在原處,即使用戶單擊一個鏈接轉(zhuǎn)到您的站點的另一部分,或干脆轉(zhuǎn)到另一站點也不影響。為了繼續(xù)構(gòu)建您夢想中的網(wǎng)頁,請閱讀下一節(jié)關于圖像的內(nèi)容。

          圖像

          一旦您開始創(chuàng)建頁面,您希望添加的第一樣東西就是圖形。人是有視覺的動物,圖形能完全改變頁面的特性。

          您可以使用很小的圖形:

           

           

          細長的圖形:

           

           

          較大的圖像:

           

          HowStuffWorks

           

          甚至使用動畫:

           

           

          您可以使用很小的圖形作為自定義的項目符號,如圖所示:

           

          第一行
          第二行
          第三行

          要把圖形變成一個項目符號,只需在您希望顯示項目符號的地方插入圖像標記;您不必使用<ul>標記。

          細長的圖形可以用作分隔符。較大的圖形可以用作標識或插圖,以及您能想出的任何用途。

          您有兩種獲得圖形圖像的方法:既可以從網(wǎng)上各種各樣的“免費剪貼板”站點下載,也可以自己創(chuàng)作。某些站點能提供免費圖形和動畫,包括Page Works、A-1 All Free Clip Art和Free Graphics Store。您還可以訪問免費站點、網(wǎng)絡空間和免費圖形以獲取有關免費圖像站點的指導。

          假設您訪問一個免費的圖形站點并看到一幅您喜歡的圖像。如果您在該圖像上右擊,會彈出一個菜單,其中有一個選項是“圖片另存為...”。您應該把該圖像保存在您的網(wǎng)頁所在的目錄中。

          如果您希望創(chuàng)作自己的圖像,您需要一個能編輯GIF和JPG文件的程序。有一個能在網(wǎng)上找到的很受歡迎的圖像編輯程序叫做Paint Shop Pro。只要稍做練習,有一點點藝術(shù)細胞,您很快就能像專業(yè)人員一樣創(chuàng)作圖像!

          就像在“基本HTML格式標記”中說明的那樣,可以使用此標記把圖像插入網(wǎng)頁中:

          <img src="name of file">

          您也可以把圖像用作與另一個頁面或元素的鏈接。若要這樣做,只需在錨定標記后插入“img src”標記。一定要包括 "border=0",否則會在您的圖像周圍出現(xiàn)難看的邊框。

          示例:<a href="http://www."><img src="hswlogo.jpg" border=0></a>

          在這個示例中,如果用戶在圖像“hswlogo.jpg”上單擊,他們就會看到博聞網(wǎng)的主頁,其網(wǎng)址是http://www.。

          任何數(shù)字圖像都可用作您的頁面的背景。若要這樣做,您需要把background="image file name" 添加到<body>標記內(nèi)。

          示例:<body background="hsw-logo.jpg>

          我們將在下一節(jié)中討論如何為您的圖像貼上標簽。

          貼標簽

          另一個有用的(但不是強制性的)可以添加到您的圖像上的標記是“alt”。該標記能給您的圖像提供一個標簽,當用戶的鼠標滑過該圖形時就會顯示該標簽。當瀏覽器加載您的頁面時,圖像的標簽比圖像先顯示,這樣就能在圖形傳輸過程中讓用戶保持興趣。使用“alt”標記時,您可以在標簽中插入任何消息。

          示例:<img src="hswlogo.jpg" alt="博聞網(wǎng)公司信息">

          我們將在下一節(jié)中討論如何將圖像對齊。

          如果您的圖像不能顯示……
          我們收到相當數(shù)量的電子郵件,說在向頁面添加圖像時遇到麻煩。當GIF和JPG圖像不能顯示時,通常會顯示一個紅色的小X,就像這樣:

          當您在您的頁面上看到這個問題時,這意味著一件事:您沒有鍵入正確的圖像文件名。這里是為了糾正此問題您可以采取的一些步驟:

          從簡化頁面創(chuàng)建過程開始。把HTML文件和圖像文件放在同一個目錄內(nèi)。把圖像文件重命名為xyz.gif(或xyz.jpg)。在您的HTML頁面上創(chuàng)建一個標記,內(nèi)容是 <img src="xyz.gif">。用您的瀏覽器顯示該頁面。如果您仍然看到紅色的X而不是圖像,那么...

          檢查一番,確保重命名的文件名確實是xyz.gif。在UNIX計算機上區(qū)分大小寫,所以要確保應該大寫的字母是大寫的,應該小寫的字母是小寫的。對于UNIX計算機而言,Xyz.gif與xyz.gif是完全不同的。

          在Windows計算機上,操作系統(tǒng)有時會在文件名上添加后綴而不做通知。例如,在Explorer中您可能看到xyz.gif,但是Windows可能已經(jīng)把該文件命名為xyz.gif.gif。弄清是否發(fā)生這種情況的最容易的方法,是在MS-DOS提示符下使用dir命令,以便看到真實的文件名。如果Windows確實添加了后綴,您只需使用資源管理器中的選項對話框來關閉該行為即可。

          圖像的對齊

          使用在對齊一節(jié)中說明的標記和技巧可以在您的頁面上安排圖像的水平對齊。這里是快速復習:

          • 把<div align=."..">標記放在圖像標記之前可使圖像居中、靠右對齊或靠左對齊。
          • 把</div>標記放在圖像標記之后可結(jié)束對齊。
          • 把<align=."..">標記放在“img src”標記之內(nèi)可使文本環(huán)繞圖像。

          把這些標記插入“img src”標記之內(nèi)可以使圖像與文本垂直對齊:

          • align="bottom"
            文本與圖像底部對齊。

            HowStuffWorks 文本

            <img src="gif/hsw-logo3.gif" alt="HowStuffWorks" border=0 align="bottom">

          • align="top"
            文本與圖像頂部對齊。

            HowStuffWorks 文本

            <img src="gif/hsw-logo3.gif" alt="HowStuffWorks" border=0 align="top">

          • align="middle"
            文本與圖像中間對齊。

            HowStuffWorks 文本

            <img src="gif/hsw-logo3.gif" alt="HowStuffWorks" border=0 align="middle">

          在上面的每個示例中,在默認狀態(tài)下圖像靠左對齊,所以文本在右側(cè)顯示。如果您希望把文本放在左側(cè)、把圖像放在右側(cè),您可以添加上面討論過的<div align>圖像對齊標記。

          創(chuàng)建動畫GIF


          動畫GIF為您的頁面添加動作和閃爍的效果。用于創(chuàng)建動畫GIF的優(yōu)秀工具是GIF 制作工具集。使用這個或與此類似的工具,可以在一個動畫序列中創(chuàng)建不同的幀,然后把多個幀合并到單一的圖像中。這里有一個示例,包括5個幀和由這些幀創(chuàng)建的動畫GIF:

          GIF動畫示例
          GIF動畫示例
          GIF動畫示例
          GIF動畫示例
          GIF動畫示例

          最終的動畫GIF:

          GIF動畫示例

          把您的頁面放到網(wǎng)上

          一旦您創(chuàng)建了一個精彩的網(wǎng)頁,您肯定想把它放到網(wǎng)絡服務器上讓全世界的人都能看到。很多擁有網(wǎng)絡服務器的服務部門和機構(gòu)提供免費的空間來張貼您的頁面。AOL向其成員提供免費的空間,很多大學向?qū)W生提供這樣的空間。很多商業(yè)站點也提供免費的空間。這些選擇的唯一缺點是您很可能必須在您頁面的頂部或其他地方顯示該站點的廣告條幅。這里是幾個免費的商業(yè)站點:

          • Geocities
          • Tripod

          您還可以選擇向提供托管服務的部門付費購買網(wǎng)絡空間。大多數(shù)專業(yè)站點走這條路。提供托管服務的公司能為其客戶提供龐大的空間、特殊的選項和很好的可靠性。使用托管服務還使您有能力使用域名,即您自己專用的URL。

          如果您對獲得自己的域名感興趣,請訪問ICANN.org站點的Accredited Registrars頁面,這是一家代理商,可以辦理IP地址和域名的注冊。在上面列舉的任何一個網(wǎng)站,您都能核查您考慮的域名是否可用,并購買一個對您有吸引力的域名。如果您已經(jīng)從某站點獲得了托管服務,那么簽訂一個為期一年的域名使用合同的費用通常會少一些,所以如果您當真要購買域名,首先應與提供托管服務的公司簽訂合同。大多數(shù)提供托管服務的公司將為您注冊域名,提供帶IP號碼的網(wǎng)絡解決方案和其他所需信息。

          托管服務的種類很多,費用相差也很大。要提防“言過其實”的承諾。您可能會遇到一些這樣的公司:他們的服務器速度很慢、經(jīng)常出故障、沒有技術(shù)支持,公司可能像曇花一現(xiàn)般短命。

          優(yōu)秀的工具
          一旦您把自己的頁面放到一臺服務器上了,您就會想知道訪客量是多少。一些網(wǎng)站如Show Stat、Hit Box、或Site Meter可免費提供此項服務,為您做很完全的統(tǒng)計。如果您只是希望在頁面上安裝一個簡單的訪客計數(shù)器,F(xiàn)astCounter是一個很好用的工具。

          您可以使用很多工具將站點做得更精彩。例如,這個免費的工具能檢查您的站點上的拼寫錯誤、在網(wǎng)絡上的加載時間、元標記、瀏覽器兼容性等等。

          元標記

          如果您計劃把頁面輸入到搜索引擎中(將在下一節(jié)說明),以便其他人能找到,您需要把元標記添加到您的頁面上。兩個最常用的元標記能讓您為頁面分別指定一段說明和一組關鍵詞,您還可以聲明各種其他內(nèi)容。元標記總是出現(xiàn)在HTML源代碼的<HEAD>和</HEAD>這兩個標記之間。這是出現(xiàn)在HowStuffWorks公司主索引頁頂部的元標記:

          <Meta Name="Description" Content="The index to over 50 fantastic 'HowStuffWorks' articles!">

          <Meta Name="keywords" Content="how stuff works, how things work, the way things work, information, tutorials, explanation, explains, underst&, underst&ing, tell me, students, teachers, study, educational">

          <Meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www./ratingsv01.html" l gen true comment "RSACi North America Server" for "http://www." on "1998.09.23T01:29-0800" r (n 0 s 0 v 0 l 0))'>

          第一個標記是對頁面的說明。搜索引擎把這段文本直接用于其列表。如果您沒有一個說明性元標記,則搜索引擎將把說明顯示為空白,或者使用您的頁面的第一個句子或前兩個句子作為說明。

          第二個標記為頁面指示一組額外的關鍵詞。搜索引擎通常把頁面上的每個詞編入索引,但是在很多情況下,您在實際文本中不使用某個詞,而有人可能使用那個詞來搜索您的頁面。如果您知道人們經(jīng)常把某個詞寫錯,您也可以把這個寫錯的詞放在關鍵詞列表中。

          第三個標記是RSAC評級標記。這是關于RSAC評級系統(tǒng)的功能的說明(摘自RSAC網(wǎng)站,其網(wǎng)址是www.):

          “娛樂軟件咨詢委員會(RSAC)是一個設在華盛頓市的獨立的非盈利組織,旨在通過一個公開、客觀的站點內(nèi)容咨詢系統(tǒng)為公眾(特別是家長)提供對電子媒體做出明智決定的能力。RSACi系統(tǒng)告訴客戶軟件游戲和網(wǎng)站中涉及性、裸體、暴力、攻擊性(粗俗的或由仇恨激發(fā)的)語言的程度。迄今為止,RSACi已經(jīng)集成到Microsoft 的瀏覽器Internet Explorer和MicroSystem的Cyber Patrol軟件中。CompuServe公司(美國和歐洲)也已承諾用RSACi系統(tǒng)對其站點的所有內(nèi)容進行評級。”

          一些瀏覽器已配置成能夠阻止人們訪問未經(jīng)評級的頁面,所以通過對您的站點做出評級,可以避免在瀏覽器方面出問題。通過讓RSAC對您的站點評級,還可使人們確切地了解您提供的內(nèi)容屬于哪一種。如果您的站點通過了評級,您可以把下面的評級標識放在您的頁面上:

          RSAC評級標識

          如果您注意一下網(wǎng)上其他頁面的HTML源代碼,還有一些標記是經(jīng)常會看見的。許多HTML工具能自動插入標記。例如,如果您使用Microsoft Word來創(chuàng)建HTML,Microsoft Word能自動把以下兩個標記應用到頁面上:

          <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">

          <META NAME="Generator" CONTENT="Microsoft Word 97">

          在所有情況下,元標記不影響您的頁面在瀏覽器上的顯示方式。說明標記和關鍵詞標記是最常用的標記。

          宣傳您的站點

          在您花費好幾個小時創(chuàng)建了站點并把它張貼到服務器上以后,您肯定熱切盼望人們來訪問。但是要想吸引人們訪問您的站點,您必須進行宣傳。很少有人會碰巧發(fā)現(xiàn)您的站點,必須有一些東西引導他們來訪問。

          有許多不同的技巧可以用來吸引人們訪問您的站點。這一章將教您許多可以用來增加站點流量的錦囊妙計。

          在搜索引擎上登記
          搜索引擎能讀取網(wǎng)頁并把頁面上所有的詞語編成索引。搜索引擎的用戶通過搜索關鍵詞能找到您的頁面。搜索引擎的優(yōu)點是能讓您找到包含某個詞或某組詞的所有頁面。搜索引擎的缺點是它們搜索來的頁面通常魚龍混雜、良莠不齊。

          從站點宣傳的角度看,搜索引擎的好處是您很容易就能在其中登記您的站點。每個搜索引擎的頁面上都有一個“提交站點”鏈接或類似的功能。使用該鏈接,您可以填寫一份申請表(有的申請表比較煩瑣),申請把您的站點列入搜索引擎中。但是您的站點不會被立刻添加到搜索引擎中,有時您要提交好幾次,等待一段時間才能如愿。每個搜索引擎都各不相同。還有,一定要單獨地提交每個頁面,以確保搜索引擎能收錄每個頁面上的關鍵詞。

          這里列出一些能鏈接到幾個主要搜索引擎的“提交站點”頁面的URL:

          • Alta Vista
          • AOL Search
          • Google
          • HotBot
          • Lycos
          • WebCrawler

          在鏈接站點上登記
          鏈接站點以某種層次結(jié)構(gòu)列出各種各樣的站點。它把每個站點放到某一類別中,并為該站點做一簡短說明。Yahoo是這種站點的最佳范例,但是現(xiàn)在有很多其他站點也在試圖用不同的方式做同樣的事。

          這類站點之中的大多數(shù)在收錄新站點時進展非常緩慢,因為在把每個提交的站點添加到它的鏈接庫中之前,都要對新站點進行審議。您需要使用以下這些鏈接來訪問這類鏈接站點的主頁,因為在把您的URL添加到某個門戶站點之前,您必須訪問它以便確定您的提交屬于哪個類別。一旦找到合適的類別,應尋找“添加 URL”按鈕,以便添加您的站點。

          • Jayde Online Directory
          • LookSmart
          • Nerd World
          • Northern Light
          • Open Directory
          • Yahoo!

          網(wǎng)站排行榜服務

          如果您的站點與業(yè)務有關,您應該向以下所有的站點提交。這些提供排行榜服務的站點將把您的業(yè)務列在他們的目錄上,有的是免費的,有的要收費:

          • AllSearchEngines
          • SuperPages
          • Business Search Engines
          • EZDirectory
          • SmallBiz

          在頒獎站點上登記
          頒獎站點將把您的站點作為一個獨特的或特別“酷”的站點向全世界展示(通常為期1小時或1天),或者為您的站點頒發(fā)某種獎項,您可以把這個獎項以徽標的形式粘貼在您的站點上進行展示。在所有情況下,您都必須在這些站點上登記才能得到認可。以下是一些最熱門的頒獎站點:

          • Cool Site of the Day
          • Seven Wonders of the Web
          • Web 100
          • Webby Awards

          登記服務
          以下列出的公司將在幾百個搜索引擎上登記您的站點,有時要收費。大多數(shù)這類公司也提供網(wǎng)絡推廣服務。這些站點中有不少可提供有關您自己怎樣做推廣的信息,所以您不妨訪問這些站點,看看是否能發(fā)現(xiàn)一些好主意。

          要記住的關鍵的一點(特別是在考慮要不要使用這些用來登記搜索引擎的服務時)是:他們能做的您自己都能做。您也可以像他們一樣登記您的站點,本系列講座將提供您需要的一切信息。這只是如何最好地使用您的時間的問題。

          • Add Me!
          • SiteAdd
          • URL Submitter
          • 123 Add URL
          • Register
          • Submit It

          互惠鏈接

          建立互惠鏈接是一種“如果您幫助了我,我也幫助您”的活動。這個想法就是查找與您的站點有聯(lián)系的站點,向他們發(fā)電子郵件邀請他們與您建立鏈接。作為回報,您通常會提出與他們建立鏈接。

          建立互惠鏈接的最佳方法是在網(wǎng)上瀏覽,尋找有關的站點并向他們發(fā)電子郵件。您將發(fā)現(xiàn)回應率可能是25%。嘗試一下也不會傷害誰,再說您在網(wǎng)絡上的鏈接越多,您得到的訪客量就越多。如果在正確的地方建立一個鏈接,可能會給新站點的訪客量帶來巨大的變化。

          這里有一些可建立互惠鏈接的資源: 鏈接交換索引

          付費廣告
          如果您需要迅速提高訪客量,最好的方法之一是給訪客量大的站點支付費用,讓他們?yōu)槟姆兆鰪V告。付費廣告通常是出現(xiàn)在網(wǎng)頁頂部的狹長的閃爍廣告條,因此也叫做橫幅廣告(當然還有許多其他形式的廣告;有關詳細信息,請查看網(wǎng)絡廣告詳解)。這里有3個條幅廣告的示例:

          廣告Banner

          廣告Banner

          廣告Banner

          大多數(shù)較大的站點(為一天大約10,000訪客或更多)有標準的廣告規(guī)定。通常的廣告費是您的廣告每展示1,000次收費15至70美元。關鍵在于要找到一個站點,它能把您的廣告有的放矢地提供給對您的消息感興趣的人群。

          若要了解有關條幅廣告的大量信息,請查閱橫幅廣告面面觀。以下的鏈接提供了有關幾個較大搜索引擎的廣告規(guī)定的信息。大多數(shù)搜索引擎提供某種形式的廣告服務——請瀏覽以下各站點的主頁,通常您會找到一個有關在該站點上做廣告的信息的鏈接:

          • Lycos Advertising
          • MSN Advertising
          • Yahoo!Web Launch
          • Webcrawler Advertising

          有關網(wǎng)站推廣的更多信息
          在了解有關網(wǎng)站推廣的更多信息時,以下文章可能對您有用:

          • Web Digest for Marketers
          • NETrageous

          創(chuàng)意

          若要獲得有關網(wǎng)頁的更多信息,您可以通過使用“查看源代碼”這個工具從您覺得很漂亮的網(wǎng)頁上收集信息。如果您找到一個喜歡的網(wǎng)頁,可以查看該頁面的HTML代碼以便了解它是如何創(chuàng)建的。這是學習新的HTML技術(shù)的好方法。

          如果您想查看一大批很炫很酷的站點,以便為您的頁面收集創(chuàng)意,那就試試訪問Affluent Lifestyles頁面。這個頁面能鏈接到大約100個站點,其中很多站點美不勝收。尤其值得一看的是由汽車制造商和珠寶制造商組建的站點。當您找到喜歡的內(nèi)容時,請查看該頁面的HTML源代碼。 

          本站是提供個人知識管理的網(wǎng)絡存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
          轉(zhuǎn)藏 分享 獻花(0

          0條評論

          發(fā)表

          請遵守用戶 評論公約

          類似文章 更多

          女人精品内射国产99| 又大又长又粗又黄国产| 九九热精品视频免费观看| 久久本道综合色狠狠五月| 伊人色综合久久伊人婷婷| 日韩在线视频精品视频| 在线观看视频日韩成人| 丝袜视频日本成人午夜视频| 欧美午夜色视频国产精品| 午夜福利网午夜福利网| 99热九九在线中文字幕| 日本午夜乱色视频在线观看| 日韩一区二区三区四区乱码视频| 欧美国产日本免费不卡| 久久99国产精品果冻传媒| 国产午夜福利在线免费观看| 在线观看视频成人午夜| 热久久这里只有精品视频| 中文字幕亚洲视频一区二区| 精品国模一区二区三区欧美| 日本99精品在线观看| 亚洲一区二区三区在线免费 | 国产精品丝袜美腿一区二区| 午夜福利激情性生活免费视频| 国产精品日韩精品一区| 亚洲精品中文字幕在线视频| 国产成人高清精品尤物| 精品综合欧美一区二区三区| 九九九热视频最新在线| 一区二区三区日韩在线| 国产永久免费高清在线精品| 国产一区二区不卡在线视频| 免费大片黄在线观看日本| 91久久精品在这里色伊人| 亚洲专区中文字幕视频| 国产精品熟女在线视频| 91精品日本在线视频| 开心五月激情综合婷婷色| 大香蕉精品视频一区二区| 我想看亚洲一级黄色录像| av一区二区三区天堂|