學習靜態(tài)網(wǎng)頁制作全攻略

1、制作人：正元設計 個人作品網(wǎng)站： / 郵箱： 靜態(tài)網(wǎng)頁制作基礎(chǔ) 預備知識：靜態(tài)網(wǎng)頁概述初期的網(wǎng)站都是由靜態(tài)網(wǎng)頁組成的，網(wǎng)頁中只有文字、圖形、圖像等，用戶只能被動地接受這些信息。那時的web頁面的核心是html(一種標記語言)，它編寫很方便，不要求有特定的語言環(huán)境，可以用任何一種編輯器寫好，便可以放到瀏覽器觀看結(jié)果?，F(xiàn)在html已經(jīng)有許多專門的編輯軟件，如frontpage、hotdog、dreamweaver等。最初的web是完全的靜態(tài)，僅僅提供大量的信息服務，沒有服務器端客戶端的概念?！办o態(tài)”指的就是網(wǎng)站的網(wǎng)頁內(nèi)容“固定不變

2、”。當用戶瀏覽器通過互聯(lián)網(wǎng)的http (hyper text transfer protocol)協(xié)議向web服務器請求提供網(wǎng)頁內(nèi)容時，服務器僅僅是將原已設計好的靜態(tài)html文檔傳送給用戶瀏覽器。其頁面的內(nèi)容使用的是標準html代碼，再加上gif格式的動態(tài)圖片。二、工作內(nèi)容靜態(tài)網(wǎng)頁制作概括起來，有如下幾個部分：1、網(wǎng)頁素材搜集與制作（圖像處理與動畫制作）經(jīng)常需要在網(wǎng)頁中應用一些圖像與動畫，一方面是由于實際內(nèi)容的需要，一方面是為了增加網(wǎng)頁吸引力。在www上通常采用jpeg、gif格式的圖片和gif89a、flash等格式的動畫。2、網(wǎng)頁版式設計規(guī)劃各元素在網(wǎng)頁中的位置關(guān)系和表現(xiàn)方法，合理安排圖像

3、、文本等元素，使網(wǎng)頁布局合理、美觀大方。3、文本編寫自己的網(wǎng)頁中需要大量的文字材料，這就要在網(wǎng)頁編輯器中用html語言中的標簽編寫。也可以利用網(wǎng)頁編輯工具的“所見即所得”功能，直接寫入文字。4、處理網(wǎng)頁之間的關(guān)聯(lián)這主要是建立合理、高效的網(wǎng)頁導航系統(tǒng)。 5、網(wǎng)頁發(fā)布主要是將建設好的網(wǎng)頁上傳到服務器中供用戶瀏覽。三、靜態(tài)網(wǎng)頁的制作工具1、圖像處理與動畫制作工具：photoshop、flash等。2、網(wǎng)頁編輯工具：1）純文本編輯工具，如notepad等；2）轉(zhuǎn)換工具，如word等；3）專用工具，如frontpage、dreamweaver等。3、網(wǎng)頁上傳工具：1)ftp工具，如ws-ftp，cute

4、ftp等；2)專用網(wǎng)頁編輯軟件的文件傳輸功能。4、網(wǎng)頁優(yōu)化工具：網(wǎng)頁減肥茶、網(wǎng)頁優(yōu)化大師等。四、網(wǎng)頁制作工作步驟1、步驟：1）制作網(wǎng)頁- 2）瀏覽器預覽-（滿意）- 4）發(fā)布個 l-(不滿意)-| 2、工作臺： 網(wǎng)頁編輯器網(wǎng)頁瀏覽器第二章 靜態(tài)網(wǎng)頁制作基礎(chǔ) 第一節(jié) html基本知識第二節(jié) html重要標簽第三節(jié) url、路徑、圖像及超級鏈接一、html簡介html是hypertext markup language(超文本標志語言)的縮寫，它是構(gòu)成web頁面(page)的主要工具，是用來表示網(wǎng)上信息的符號標志語言。在網(wǎng)上，如果要向全球范圍內(nèi)出版和發(fā)布信息，需要有一種能夠被廣泛理解的語言，即所有

5、的計算機都能夠理解的一種用于出版的母語。www(world wide web)所使用的出版語言就是html語言。通過html，將所需要表達的信息按某種規(guī)則寫成html文件，通過專用的瀏覽器來識別，并將這些html翻譯成可以識別的信息，就是現(xiàn)在所見到的網(wǎng)頁。html的功能1)出版在線的文檔，其中包含了標題、文本、表格、列表以及照片等內(nèi)容。2)通過超鏈接檢索在線的信息。3)為獲取遠程服務而設計表單，可用于檢索信息、定購產(chǎn)品等。4)在文檔中直接包含表格數(shù)據(jù)、視頻剪輯、聲音剪輯以及其他的一些應用。學習html的意義便于優(yōu)化專用工具生成的代碼；為編寫asp等網(wǎng)絡程序奠定基礎(chǔ)。html的編寫工具用html

6、編寫的文件(文檔)的擴展名是html或htm。它們是供瀏覽器解釋瀏覽文件的格式。可以使用記事本、寫字板等編輯工具來編寫html文件。html語言使用標志對(標簽)的方法來編寫文件，既簡單又方便。它通常使用來表示標志的開始和結(jié)束(例如標志對)，因此在html文檔中這樣的標志對都必須是成對使用的。 在今天，做網(wǎng)頁的工具到處都是,只要動幾下鼠標，一個精彩的網(wǎng)頁就出來了，html是否要學呢？答案是肯定的，因為工具就是工具，它們生成的代碼是機械的，不夠簡潔，使網(wǎng)頁打開的速度減慢。還有很多新的功能，工具是生成不了的。必需對代碼進行編輯。html文件的本質(zhì)html文件的實質(zhì)是以.htm或.html為擴展名的

7、純文本文件。html文件的格式查看網(wǎng)頁源文件，可見html文件的格式如下：網(wǎng)頁的標題其中省略號部份是網(wǎng)頁的內(nèi)容,其實每個標記都是一一對應的。每個網(wǎng)頁文件都是以開始和以結(jié)束。與之間的內(nèi)容是網(wǎng)頁的標題。會顯示在瀏覽器的標題欄上。與之間放的是網(wǎng)頁內(nèi)容。標志（tag）的結(jié)構(gòu)特點 1、用包圍。2、多數(shù)成對出現(xiàn)。3、結(jié)束標記用/。4、標簽是嵌入式的。5、標簽可有多種屬性和屬性值。 6、標簽用西文半角字符，對大小寫不敏感。html文件的組成頭部和主體標志和普通文本 文件標題標志文件標題標志為。使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊的藍色部分顯示的文本信息，那些信息一般是網(wǎng)頁的主題。要將網(wǎng)頁的主題顯示

8、到瀏覽器的頂部其實很簡單，只要在標志對之間加入要顯示的文本即可。顏色表示方法html用#rrggbb字符串代表色彩，成為rgb值。rgb值中的rr、gg和bb分別代表紅綠藍三原色的兩位十六進制整數(shù)值。每種原色的取值范圍在00和ff（即十進制的0和255）之間，即一個字節(jié)存儲一種原色。每種原色都有256種由淺至深的色彩變化，網(wǎng)頁中呈現(xiàn)的色彩都是由這三種原色調(diào)配出來的。rgb值可以表示出（256*256*256）種顏色。常用顏色舉例黑色白色綠色黃色紅色藍色#000000#ffffff#00ff00#ffff00#ff0000#0000ff二、html基礎(chǔ)頁面格式標志在網(wǎng)頁設置中，會用到html頁面

9、設置、列表設置等格式標志。段落標志預處理文本換行標志列表標志1、定義列表用來創(chuàng)建一個定義列表，用來創(chuàng)建列表中的上層項目，用來創(chuàng)建列表中最下層項目，和都必須放在標志對之間。源代碼效果 一個普通列表中國城市北京上海廣州美國城市華盛頓芝加哥紐約 中國城市 北京 上海 廣州 美國城市 華盛頓 芝加哥 紐約 2、有序列表和無序列表標志對用來創(chuàng)建一個有序列表；標志對用來創(chuàng)建一個無序列表；標志對只能在或標志對之間使用，此標志對用來創(chuàng)建一個列表項。源代碼效果 中國城市 北京上海廣州美國城市 華盛頓芝加哥紐約中國城市1. 北京 2. 上海 3. 廣州 美國城市 華盛頓 芝加哥 紐約 標題格式標志html語言提供

10、了一系列對文本中的標題進行操作的標志對：，即一共有6對標題的標志對。是最大的標題，而則是最小的標題，也即是標志中h后面的數(shù)字越大標題文本就越小。如果html文檔中需要輸出標題文本，就可以使用這6對標題標志對中的任何一對。文本標志用來使文本以黑體字的形式輸出。用來使文本以斜體字的形式輸出。用來使文本以下加一劃線的形式輸出。下標上標用來輸出打字機風格字體的文本。用來輸出引用方式的字體，通常是斜體。用來輸出需要強調(diào)的文本(通常是斜體加黑體)。則用來輸出加重文本(通常也是斜體加黑體)。設定文本的字體大小、顏色、字體名等，通過屬性size、color、face的控制來實現(xiàn)。size屬性用來改變字體的大小

11、，它可以取值：-n、n和+n；而color屬性則用來改變文本的顏色；face屬性值為系統(tǒng)中現(xiàn)有的字體，如“楷體_gb2312”。為保證在客戶端瀏覽器中顯示正確字體的網(wǎng)頁，不要使用非系統(tǒng)自帶的特殊字體，如“華文彩云繁”等。特殊字符copy；®；153;plusmn;空格nbsp;yen;網(wǎng)頁圖像格式jpeg、gif、png格式。1、可交換圖像文件格式 (gif)由于幾乎所有的 web 瀏覽器都支持 gif 格式（文件擴展名為 .gif），因而該格式是萬維網(wǎng)上最常用的兩個圖像文件格式之一。由于此格式最多僅可以顯示 256 種顏色，因而最適于黑白線條圖形、彩色剪輯圖片和具有大塊實心顏色的圖片。

12、gif89a 格式也同時支持透明和動畫。gif 文件用于：包含透明區(qū)域的圖像。 有限的彩色，例如 256 色或更少。 離散區(qū)域中的彩色。 黑白圖像。 小尺寸圖像，例如站點上的按鈕。 清晰度和邊緣清晰度很重要的圖形，例如線條圖形或卡通。 包含文本的圖像。 動畫。2、聯(lián)合攝影專家組 (jpeg)jpeg 格式（文件擴展名為 .jpg 或 .jpeg）是 web 上的另一個最常用的圖像文件格式。它不局限于 256 色，因此您可以使用它來顯示高質(zhì)量的照片或包含上百萬種顏色的圖片。由于它被設計為圖像存儲格式，因而可以有效地將高質(zhì)量的大照片壓縮為非常緊密的文件，這在您用電子郵件發(fā)送大圖像時很有用。然而，您

13、將圖像文件的大小壓縮的越多（或修改并重新保存圖像），圖像信息的丟失也越多并且質(zhì)量也會下降。此外，該格式不支持透明和動畫。jpeg 文件用于：照片。 自然視覺效果圖像。 大數(shù)量的顏色，例如上百萬。 具有大量細節(jié)的圖像，例如房地產(chǎn)站點上房屋的照片。 大尺寸的圖像。3、可移植網(wǎng)絡圖形 (png)png 格式（文件擴展名為 .png）可以顯示上百萬種顏色。然而，由于它是一種新的格式，當前只有很少的瀏覽器可以支持（盡管它正快速獲得支持）。以這種格式保存的圖像，即便將文件壓縮，其質(zhì)量也不會降低。它支持透明，但不支持動畫（因為它不能包含多個圖像）。圖像標志圖像在網(wǎng)頁制作中擔任著非常重要的角色。html語言也

14、專門提供了標志來處理圖像的輸出。標志并非真正地將圖像融入到html文檔中，而是標明圖像文件的存放位置。src屬性是標志中不可缺少的一部分,必須賦值，其值是圖形文件的存放位置和文件名。align是圖像的對齊方式。border屬性是圖像的邊框，可以取大于或者等于的整數(shù)，默認單位是像素。width和height屬性是圖像的寬和高，默認單位也是像素。alt屬性是當鼠標移動到圖像上時顯示的文本。圖像實例水平線標志標志是在html文檔中加入一條水平線，它可以直接使用，具有size、color、width和noshade屬性：size是設置水平線的厚度。width是設定水平線的寬度，默認單位是像素。nosh

15、ade屬性不用賦值，而是直接加入標志即可使用，它是用來加入一條沒有陰影的水平線(不加入此屬性，水平線將有陰影)。表格標志表格標志對于制作網(wǎng)頁是很重要的，現(xiàn)在很多網(wǎng)頁都是使用多重表格，主要是因為表格不但可以固定文本或圖像的輸出，而且還可以任意地進行背景和前景顏色的設置?？梢姳砀裨诰W(wǎng)頁排版中的作用。標志對用來創(chuàng)建一個表格，有如下屬性：屬性用途bgcolor設置表格的背景色border設置邊框的寬度，若不設置此屬性，則邊框?qū)挾饶J為0bordercolor設置邊框的顏色bordercolorlight設置邊框明亮部分的顏色(當border的值大于等于1時才有用)bordercolordark設置邊框

16、昏暗部分的顏色(當border的值大于等于1時才有用)cellspacing設置表格的單元格之間的空間大小cellpadding設置表格的單元格邊框與其內(nèi)部內(nèi)容之間的空間大小width設置表格的寬度，單位用絕對像素值或總寬度的百分比align表格在網(wǎng)頁中的位置表格的定義順序是先定義行，再定義該行中的單元格。標志對用來創(chuàng)建表格中的每一行。此標志對只能放在標志對之間使用，而在此標志對之間加入文本將是無用的，因為在之間只能緊跟標志對才是有效的語法。標志對用來創(chuàng)建單元格，此標志對只有放在標志對之間才是有效的，輸入的文本也只有放在標志對中才有效(即才能夠顯示出來)。具有width、colspan、row

17、span和nowrap屬性：width是單元格的寬度，單位用絕對像素值或總寬度的百分比。colspan設置一個表格單元格跨占的列數(shù)(缺省值為1)。rowspan設置一個表格單元格跨占的行數(shù)(缺省值為1)。表格實例： 1單元格跨越多行12 45 67單元格跨越多列單元格跨越多行單元格跨越多列超級鏈接重點1、網(wǎng)頁內(nèi)部鏈接 點擊鏈接熱點，網(wǎng)頁跳轉(zhuǎn)到資源片段：定義鏈接熱點到資源片段 定義資源片段資源片段2、相對路徑、站內(nèi)絕對路徑、絕對路徑相對路徑：相對于當前文檔 ./的用法站內(nèi)絕對路徑：相對于網(wǎng)站根 /的用法絕對路徑：資源在網(wǎng)上完整的存放地址，網(wǎng)址。3、網(wǎng)頁間鏈接鏈接文字例：中文主頁 4、網(wǎng)站間鏈接網(wǎng)

18、站間的鏈接，必須使用目標資源的絕對路徑，從協(xié)議開始。如新浪網(wǎng)5、鏈接到電子郵件地址語法格式：給我寫信，打開客戶瀏覽器設定的默認電子郵件程序，收件人為mailto后的地址。將圖像作為超級鏈接的錨點語法： 活動字幕標記marquee參考資料活動字幕，也稱為滾動看板、滾動字幕?；顒幼帜坏氖褂檬沟谜麄€網(wǎng)頁更有動感，顯得很有生氣?，F(xiàn)在的網(wǎng)站中也越來越多地使用活動字幕來加強網(wǎng)頁的互動性。用javascript編程可以實現(xiàn)活動字幕效果；用dreamweaver的圖層再用其時間線功能可以做出非常漂亮的滾動看板。而用html的活動字幕標記所需的代碼最少，確實能夠以較少的下載時間換來較好的效果。該標記語法格式如下： 字母內(nèi)容各參數(shù)的含義： align：是設定活動字幕的位置，不過除了居左、居中、居右三種位置外，又增加靠上（align=top）和靠下（align=bottom）兩種位置。 bgcolor：用于設定活動字幕的背景顏色，一般是十六進制數(shù)。 direction：用于設定活動字幕的滾動方向是向左、向右、向上、向下。 behavior：用于設定滾動的方式，主要由三種方式：behavior=scroll表示由一端滾動到另一端；behavior=slide:表示由一端快速滑動到另一端，且不再重復；