網(wǎng)頁的工作原理網(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)絡瀏覽器,有學習的渴望,所以您已經(jīng)具備開始創(chuàng)建頁面所需要的一切。您可以學習HTML并用您的網(wǎng)絡瀏覽器來實驗,從而學會如何創(chuàng)建您能想象得出的任何種類的網(wǎng)頁。 為了能討論網(wǎng)頁和研究網(wǎng)頁的工作原理,您可能希望了解4個簡單的術(shù)語(如果您在第一次讀到這些術(shù)語時覺得晦澀難懂,不要擔心):
進行網(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標記
示例:<center>, <body> 為了告訴網(wǎng)絡瀏覽器“結(jié)束”您要它做的事,要在結(jié)束標記中使用斜杠:
示例:</center>, </body> 大多數(shù)標記都由成對的“開始”碼和“結(jié)束”碼組成,但不是絕對的。 您創(chuàng)建的任何網(wǎng)頁在開始的地方都有以下標記:
結(jié)束網(wǎng)頁所需要的標記是:
建立簡單的頁面 創(chuàng)建網(wǎng)頁的方法有很多種。成百上千的公司創(chuàng)建了各種工具,以各種方式來幫助完成這個過程。然而,我們在這里的目標是理解網(wǎng)頁的真正原理,而不是讓某個工具把頁面的創(chuàng)建過程掩蓋起來,不讓我們看到。因此,我們將使用盡可能簡單的工具,這些工具在您的計算機上已經(jīng)存在。 在您的計算機上有一個程序,可以創(chuàng)建簡單的文本文件。在Windows計算機上,該應用程序叫做記事本。在Macintosh計算機上,該程序叫做SimpleText。如果您找不到這些程序,也可以使用基本的文字處理程序,例如WordPerfect和Microsoft Word。
一旦您在屏幕上打開了適當?shù)某绦?,請在窗口中鍵入(或剪切并粘貼)以下HTML文本: <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)三個特征:
通過觀察組成您的頁面的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標記:
讓我們開始吧! 粗體、斜體和下劃線
換行和段落
<br>標記在行與行之間起換行的作用。您可以使用多個這樣的標記來創(chuàng)建空白空間。
<p> 標記能在文本的兩行之間創(chuàng)建額外的空間。如果把 <br> 標記放在一行文本中,只能斷開該行;如果使用 <p> 標記,則不僅斷開該行,而且創(chuàng)建額外的空間。
<hr> 標記能創(chuàng)建水平標尺或水平線。
沒有可以在文檔內(nèi)創(chuàng)建一個“制表符”的正式的HTML標記。許多站點設計人員創(chuàng)建表格或使用空白圖像來創(chuàng)建空間(表格和圖像將在本文后面加以說明)。使文本縮進的一種方法是使用<ul>標記,以便讓瀏覽器認為您要創(chuàng)建一個“列表”列表能自動縮進文本。結(jié)束時請使用</ul>標記來“結(jié)束”縮進。標記<blockquote>……</blockquote>也能把文本縮進。 另一個替代方法是<pre>標記。這個標記用來顯示預格式化文本,即“按原樣”顯示的文本。任何在<pre>和</pre>標記內(nèi)創(chuàng)建的空白在瀏覽器中的顯示效果將與在源代碼中顯示的一樣。
<font color="color">...</font>
大多數(shù)標準顏色都能使用。請嘗試“淺色”和“深色”,如“淺藍”或“深綠”。您還可以指定一個特定的十六進制顏色號碼,例如:<font color="#864086">.要獲得十六進制顏色代碼的列表,請訪問December.com:HTML。 如果您想為頁面的整個文本分配一種特定顏色,則把text="color" 標記添加到 <body> 標記之內(nèi)。 示例:<body text="blue"> 即使您為整個文本分配了顏色,您仍可以通過使用在上面學過的標記來改變文本中任何部分的顏色。
通過把bgcolor="color" 標記添加到<body>標記之內(nèi)來改變您的頁面背景顏色。 示例:<body bgcolor="yellow"> 與本節(jié)中說明的改變字體顏色一樣,您可以使用大多數(shù)標準顏色,或使用十六進制顏色代碼。 創(chuàng)建列表 無序列表看起來像這樣: 示例: <ul> 項目符號的類型可以改成“圓圈”、“方塊”或“圓盤”,方法是在<ul>標記之內(nèi)添加具體說明:
有序列表看起來像這樣:
示例: <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> 說明性列表創(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)建一個鏈接列表。 新窗口 target="_blank" 示例: 鏈接的顏色 Vlink代表“受訪鏈接”。當有人訪問這些鏈接時,鏈接會改變顏色。如果您不希望受訪鏈接改變顏色,只需給鏈接和受訪鏈接賦予相同的顏色屬性。 示例:<body link="green" vlink="green"> 創(chuàng)建接收電子郵件的鏈接 <a href="mailtyouremailaddress"> 然后在該標記后再次鍵入您的郵件地址(或您希望在頁面上顯示的任何鏈接文本)。用以下標記結(jié)束該字符串: </a> 示例: <a href="mailtexample@">請給我發(fā)郵件</a> 這是在您的頁面上看到的效果: 請給我發(fā)郵件 創(chuàng)建與您自己的頁面的鏈接 示例:<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”文件的同一個文件夾或目錄中。否則您的計算機在尋找您希望顯示的圖片時會遇到麻煩。還有,在鍵入圖片名稱時要確保嚴格遵守它在文件夾中保存時用的文件名,因為文件名對大小寫很敏感。 對齊 <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> 請研究以下圖表:
這里我們有3行和2列。 為了給此圖表的基本結(jié)構(gòu)編碼,應按以下順序使用以下標記:
許多設計人員喜歡把表格的各部分縮進一些,以便使編碼更易于閱讀。下面顯示的是這方面的一個示例。 現(xiàn)在我們來為表格的基本結(jié)構(gòu)添加邊框。邊框是表格的輪廓。邊框標記 (border="value")放在初始表格標記內(nèi)。您可以通過分配一個特定值(我們將分配“1”)來規(guī)定輪廓線的粗細。一個很好的做法是用不同的值來實驗,以便弄清在瀏覽器中的實際顯示效果。如果您不希望顯示邊框,則把輪廓線值分配為“0”。 (注意:即使您不打算在表格周圍出現(xiàn)邊框,開始的時候也最好有可見的邊框,并將其至少保持到您將所有可能影響表格顯示效果的“錯誤”排除掉為止。) 把以下代碼和數(shù)據(jù)鍵入(或剪切并粘貼)到您的HTML文檔中:
在瀏覽器中顯示的表格應該看起來很像早些時候顯示的圖表。 您可以為表格分配很多屬性。下面要討論的一些標記可以讓您用很多創(chuàng)造性的方式來設置表格的格式。 改變表格的背景顏色 通過在初始的“table”標記內(nèi)使用“bgcolor”標記來改變整個表格背景的顏色: 示例:<table bgcolor="yellow"> 也可以為表格內(nèi)的行或單元格分配彩色背景。只要把bgcolor="color" 添加到<tr>或<td>標記中即可為表格的特定部分著色。 示例:<tr bgcolor="yellow"> 表格大小 示例:<table width=300 height=400> 與規(guī)定整個表格相同,還可以為個別的數(shù)據(jù)單元格規(guī)定寬度和高度。要做到這一點,把width="value" 標記添加到所需單元格的<tr>或<td>標記中即可。 一個很好的做法是用不同的像素和百分比值來實驗,以便弄清在瀏覽器中的實際顯示效果。 單元格邊距 示例1:<table border=1 cellpadding=5>
示例2:<table border=1 cellpadding=15>
單元格間距 示例1: <table border=1 cellspacing=5>
示例2:<table border=1 cellspacing=15>
表格標題 示例:
<table border=1> 效果是這樣的:
對齊和單元格跨度 在默認狀態(tài)下,表格內(nèi)所有單元格的內(nèi)容(表格標題除外)均是垂直居中、左對齊。若要使單元格的內(nèi)容以不同方式對齊,應把以下標記應用到<td>、<th>或<tr>標記之內(nèi): 對于水平對齊,不同的值可以實現(xiàn)左對齊、右對齊或居中:
對于垂直對齊,不同的值可以實現(xiàn)頂部對齊、底部對齊或中間對齊:
您還可以安排整個表格的對齊方式來決定其在頁面上出現(xiàn)的位置。通過把標記<align="right">或<align="left">插入到初始的“table”標記內(nèi),無論表格在什么位置,都可以讓文本環(huán)繞表格?;蛘撸绻M砀駟为氾@示,周圍沒有文本環(huán)繞,則在整個表格前后使用“分開對齊”標記。 單元格跨度
在應用<colspan=value>標記的地方,它應放在<td>標記之內(nèi)。以下是為上面示例所寫的代碼:
<table border=1>
行跨度的示例:
在應用<rowspan=value>標記的地方,它應放在<td>標記之內(nèi)。以下是為上面示例所寫的代碼:
<table border=1>
您在表格中還可以應用我們在上一章里學過的許多屬性,例如字體的大小、類型和顏色,插入圖像,制作列表和添加鏈接。只要在您想設定格式的那個特定單元格的<td>標記后添加適當?shù)臉擞浖纯伞? 請使用您在本文中學過的各種工具和標記來做實驗和練習。人們在網(wǎng)頁上使用表格時,創(chuàng)新的可能性是無窮盡的。您可以疊加圖像和無邊框的彩色方框來創(chuàng)建天衣無縫的設計,或者在無邊框的表格中嵌套無邊框的表格,有些有顏色,有些沒有顏色,以便創(chuàng)建引人注目的布局。只要發(fā)揮一點想象力、創(chuàng)造性并使用表格,網(wǎng)頁設計就會開拓一片新天地。
一些頁面設計人員出于設計需要和為使站點顯得對用戶更加友好,在頁面上使用了框架??梢哉f,框架使瀏覽站點更方便,并且不會丟失您原先所在的位置。當單擊一個鏈接時,如果網(wǎng)頁的一部分保持靜態(tài)而同一頁面的另一部分卻改變了,就可以確定網(wǎng)頁中使用了框架。若要查閱帶框架的網(wǎng)頁的功能,請訪問The Birch Aquarium頁面。 在The Birch Aquarium頁面上,頂部和最底部保持不變,而中部可根據(jù)所選擇的鏈接而變化。該頁面分成3個框架,也就是說,3個不同的HTML文檔在同一時間顯示。您可以按照您的愿望來選擇把頁面分成幾部分,以什么方式來劃分,以及在每個框架中包括什么樣的HTML文檔。 首先要很好地規(guī)劃您的頁面,這一點很重要。應根據(jù)行和列來考慮布局。您希望顯示幾個水平部分(行)?幾個垂直部分(列)?您估計每個部分需要多少空間(像素或百分比)? 框架集文檔 您可以用通常的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> 此示例顯示了一個框架集文檔,它將把網(wǎng)頁分成兩列,或兩個框架。在左側(cè)框架中,200個像素的空間將顯示“links.htm”文檔。頁面的其余部分(即右列)將顯示“information.htm”文檔。您還可以看到用來結(jié)束一個框架集文檔的標記: </frameset>
為框架命名 為了讓瀏覽器知道把鏈接的信息放到哪一個框架中,必須為框架“命名”。如果不規(guī)定哪一個框架來接收新信息,鏈接的菜單框架將被鏈接的信息本身所取代,這會破壞頁面外觀和框架頁面的目的。 若要命名框架,只需把“name”標記放在框架集文檔的“frame src”標記內(nèi)。您可以為每個框架起您選擇的任何名稱。 示例: <frame src="links.htm" name="menu"> 在命名框架后,可以通過在框架名之前添加“target”標記來規(guī)定您希望把鏈接的信息放入哪一個框架中。 示例:<a href="http://www./company.htm" target="info">公司信息</a> 這就告訴瀏覽器在名為“info”的框架中顯示鏈接的信息。 保存和查看您的文檔 當您在瀏覽器中打開框架集文檔時,您應該能看到經(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> 要使您的網(wǎng)頁更引人注目和富有動感,框架是您可以使用的極好工具。框架使您能把頁面的某些方面始終保持在原處,即使用戶單擊一個鏈接轉(zhuǎn)到您的站點的另一部分,或干脆轉(zhuǎn)到另一站點也不影響。為了繼續(xù)構(gòu)建您夢想中的網(wǎng)頁,請閱讀下一節(jié)關于圖像的內(nèi)容。 圖像 一旦您開始創(chuàng)建頁面,您希望添加的第一樣東西就是圖形。人是有視覺的動物,圖形能完全改變頁面的特性。
要把圖形變成一個項目符號,只需在您希望顯示項目符號的地方插入圖像標記;您不必使用<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é)中討論如何將圖像對齊。 如果您的圖像不能顯示…… 當您在您的頁面上看到這個問題時,這意味著一件事:您沒有鍵入正確的圖像文件名。這里是為了糾正此問題您可以采取的一些步驟: 從簡化頁面創(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é)中說明的標記和技巧可以在您的頁面上安排圖像的水平對齊。這里是快速復習:
把這些標記插入“img src”標記之內(nèi)可以使圖像與文本垂直對齊:
在上面的每個示例中,在默認狀態(tài)下圖像靠左對齊,所以文本在右側(cè)顯示。如果您希望把文本放在左側(cè)、把圖像放在右側(cè),您可以添加上面討論過的<div align>圖像對齊標記。
創(chuàng)建動畫GIF
最終的動畫GIF: 把您的頁面放到網(wǎng)上 一旦您創(chuàng)建了一個精彩的網(wǎng)頁,您肯定想把它放到網(wǎng)絡服務器上讓全世界的人都能看到。很多擁有網(wǎng)絡服務器的服務部門和機構(gòu)提供免費的空間來張貼您的頁面。AOL向其成員提供免費的空間,很多大學向?qū)W生提供這樣的空間。很多商業(yè)站點也提供免費的空間。這些選擇的唯一缺點是您很可能必須在您頁面的頂部或其他地方顯示該站點的廣告條幅。這里是幾個免費的商業(yè)站點:
您還可以選擇向提供托管服務的部門付費購買網(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)絡上的加載時間、元標記、瀏覽器兼容性等等。 元標記 如果您計劃把頁面輸入到搜索引擎中(將在下一節(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)容屬于哪一種。如果您的站點通過了評級,您可以把下面的評級標識放在您的頁面上:
如果您注意一下網(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)您的站點,必須有一些東西引導他們來訪問。 有許多不同的技巧可以用來吸引人們訪問您的站點。這一章將教您許多可以用來增加站點流量的錦囊妙計。 在搜索引擎上登記 從站點宣傳的角度看,搜索引擎的好處是您很容易就能在其中登記您的站點。每個搜索引擎的頁面上都有一個“提交站點”鏈接或類似的功能。使用該鏈接,您可以填寫一份申請表(有的申請表比較煩瑣),申請把您的站點列入搜索引擎中。但是您的站點不會被立刻添加到搜索引擎中,有時您要提交好幾次,等待一段時間才能如愿。每個搜索引擎都各不相同。還有,一定要單獨地提交每個頁面,以確保搜索引擎能收錄每個頁面上的關鍵詞。 這里列出一些能鏈接到幾個主要搜索引擎的“提交站點”頁面的URL:
在鏈接站點上登記 這類站點之中的大多數(shù)在收錄新站點時進展非常緩慢,因為在把每個提交的站點添加到它的鏈接庫中之前,都要對新站點進行審議。您需要使用以下這些鏈接來訪問這類鏈接站點的主頁,因為在把您的URL添加到某個門戶站點之前,您必須訪問它以便確定您的提交屬于哪個類別。一旦找到合適的類別,應尋找“添加 URL”按鈕,以便添加您的站點。
網(wǎng)站排行榜服務 如果您的站點與業(yè)務有關,您應該向以下所有的站點提交。這些提供排行榜服務的站點將把您的業(yè)務列在他們的目錄上,有的是免費的,有的要收費:
在頒獎站點上登記
登記服務 要記住的關鍵的一點(特別是在考慮要不要使用這些用來登記搜索引擎的服務時)是:他們能做的您自己都能做。您也可以像他們一樣登記您的站點,本系列講座將提供您需要的一切信息。這只是如何最好地使用您的時間的問題。
互惠鏈接 建立互惠鏈接是一種“如果您幫助了我,我也幫助您”的活動。這個想法就是查找與您的站點有聯(lián)系的站點,向他們發(fā)電子郵件邀請他們與您建立鏈接。作為回報,您通常會提出與他們建立鏈接。 建立互惠鏈接的最佳方法是在網(wǎng)上瀏覽,尋找有關的站點并向他們發(fā)電子郵件。您將發(fā)現(xiàn)回應率可能是25%。嘗試一下也不會傷害誰,再說您在網(wǎng)絡上的鏈接越多,您得到的訪客量就越多。如果在正確的地方建立一個鏈接,可能會給新站點的訪客量帶來巨大的變化。 這里有一些可建立互惠鏈接的資源: 鏈接交換索引 付費廣告
大多數(shù)較大的站點(為一天大約10,000訪客或更多)有標準的廣告規(guī)定。通常的廣告費是您的廣告每展示1,000次收費15至70美元。關鍵在于要找到一個站點,它能把您的廣告有的放矢地提供給對您的消息感興趣的人群。 若要了解有關條幅廣告的大量信息,請查閱橫幅廣告面面觀。以下的鏈接提供了有關幾個較大搜索引擎的廣告規(guī)定的信息。大多數(shù)搜索引擎提供某種形式的廣告服務——請瀏覽以下各站點的主頁,通常您會找到一個有關在該站點上做廣告的信息的鏈接:
有關網(wǎng)站推廣的更多信息
創(chuàng)意 若要獲得有關網(wǎng)頁的更多信息,您可以通過使用“查看源代碼”這個工具從您覺得很漂亮的網(wǎng)頁上收集信息。如果您找到一個喜歡的網(wǎng)頁,可以查看該頁面的HTML代碼以便了解它是如何創(chuàng)建的。這是學習新的HTML技術(shù)的好方法。 如果您想查看一大批很炫很酷的站點,以便為您的頁面收集創(chuàng)意,那就試試訪問Affluent Lifestyles頁面。這個頁面能鏈接到大約100個站點,其中很多站點美不勝收。尤其值得一看的是由汽車制造商和珠寶制造商組建的站點。當您找到喜歡的內(nèi)容時,請查看該頁面的HTML源代碼。 |
|
來自: 旋風~小馬 > 《網(wǎng)絡知識》