第三章靜態(tài)網(wǎng)頁制作_第1頁
第三章靜態(tài)網(wǎng)頁制作_第2頁
第三章靜態(tài)網(wǎng)頁制作_第3頁
第三章靜態(tài)網(wǎng)頁制作_第4頁
第三章靜態(tài)網(wǎng)頁制作_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1、第二章 靜態(tài)網(wǎng)頁制作基礎(chǔ) 預(yù)備知識(shí)：靜態(tài)網(wǎng)頁概述初期的網(wǎng)站都是由靜態(tài)網(wǎng)頁組成的，網(wǎng)頁中只有文字、圖形、圖像等，用戶只能被動(dòng)地接受這些信息。那時(shí)的Web頁面的核心是HTML(一種標(biāo)記語言)，它編寫很方便，不要求有特定的語言環(huán)境，可以用任何一種編輯器寫好，便可以放到瀏覽器觀看結(jié)果?，F(xiàn)在HTML已經(jīng)有許多專門的編輯軟件，如FrontPage、Hotdog、Dreamweaver等。最初的Web是完全的靜態(tài)，僅僅提供大量的信息服務(wù)，沒有服務(wù)器端客戶端的概念?！办o態(tài)”指的就是網(wǎng)站的網(wǎng)頁內(nèi)容“固定不變”。當(dāng)用戶瀏覽器通過互聯(lián)網(wǎng)的 (Hyper text Transfer Protocol)協(xié)議向Web服務(wù)

2、器請(qǐng)求提供網(wǎng)頁內(nèi)容時(shí)，服務(wù)器僅僅是將原已設(shè)計(jì)好的靜態(tài)HTML文檔傳送給用戶瀏覽器。其頁面的內(nèi)容使用的是標(biāo)準(zhǔn)HTML代碼，再加上GIF格式的動(dòng)態(tài)圖片。二、工作內(nèi)容靜態(tài)網(wǎng)頁制作概括起來，有如下幾個(gè)部分：1、網(wǎng)頁素材搜集與制作（圖像處理與動(dòng)畫制作）經(jīng)常需要在網(wǎng)頁中應(yīng)用一些圖像與動(dòng)畫，一方面是由于實(shí)際內(nèi)容的需要，一方面是為了增加網(wǎng)頁吸引力。在WWW上通常采用jpeg、GIF格式的圖片和gif89a、flash等格式的動(dòng)畫。2、網(wǎng)頁版式設(shè)計(jì)規(guī)劃各元素在網(wǎng)頁中的位置關(guān)系和表現(xiàn)方法，合理安排圖像、文本等元素，使網(wǎng)頁布局合理、美觀大方。3、文本編寫自己的網(wǎng)頁中需要大量的文字材料，這就要在網(wǎng)頁編輯器中用HTML

3、語言中的標(biāo)簽編寫。也可以利用網(wǎng)頁編輯工具的“所見即所得”功能，直接寫入文字。4、處理網(wǎng)頁之間的關(guān)聯(lián)這主要是建立合理、高效的網(wǎng)頁導(dǎo)航系統(tǒng)。 5、網(wǎng)頁發(fā)布主要是將建設(shè)好的網(wǎng)頁上傳到服務(wù)器中供用戶瀏覽。三、靜態(tài)網(wǎng)頁的制作工具1、圖像處理與動(dòng)畫制作工具：Photoshop、Flash等。2、網(wǎng)頁編輯工具：1）純文本編輯工具，如Notepad等；2）轉(zhuǎn)換工具，如word等；3）專用工具，如FrontPage、Dreamweaver等。3、網(wǎng)頁上傳工具：1)FTP工具，如WS-FTP，CuteFTP等；2)專用網(wǎng)頁編輯軟件的文件傳輸功能。4、網(wǎng)頁優(yōu)化工具：網(wǎng)頁減肥茶、網(wǎng)頁優(yōu)化大師等。四、網(wǎng)頁制作工作步驟1

4、、步驟：1）制作網(wǎng)頁-> 2）瀏覽器預(yù)覽-（滿意）-> 4）發(fā)布個(gè) L-(不滿意)-| 2、工作臺(tái)： 網(wǎng)頁編輯器<=>網(wǎng)頁瀏覽器第二章 靜態(tài)網(wǎng)頁制作基礎(chǔ) 第一節(jié) HTML基本知識(shí)第二節(jié) HTML重要標(biāo)簽第三節(jié) URL、路徑、圖像及超級(jí)鏈接一、HTML簡(jiǎn)介HTML是Hypertext Markup Language(超文本標(biāo)志語言)的縮寫，它是構(gòu)成Web頁面(Page)的主要工具，是用來表示網(wǎng)上信息的符號(hào)標(biāo)志語言。在網(wǎng)上，如果要向全球范圍內(nèi)出版和發(fā)布信息，需要有一種能夠被廣泛理解的語言，即所有的計(jì)算機(jī)都能夠理解的一種用于出版的"母語"。WWW(Worl

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

6、ML或HTM。它們是供瀏覽器解釋瀏覽文件的格式。可以使用記事本、寫字板等編輯工具來編寫HTML文件。HTML語言使用標(biāo)志對(duì)(標(biāo)簽)的方法來編寫文件，既簡(jiǎn)單又方便。它通常使用<標(biāo)志名></標(biāo)志名>來表示標(biāo)志的開始和結(jié)束(例如<HTML></HTML>標(biāo)志對(duì))，因此在HTML文檔中這樣的標(biāo)志對(duì)都必須是成對(duì)使用的。 在今天，做網(wǎng)頁的工具到處都是,只要?jiǎng)訋紫率髽?biāo)，一個(gè)精彩的網(wǎng)頁就出來了，HTML是否要學(xué)呢？答案是肯定的，因?yàn)楣ぞ呔褪枪ぞ撸鼈兩傻拇a是機(jī)械的，不夠簡(jiǎn)潔，使網(wǎng)頁打開的速度減慢。還有很多新的功能，工具是生成不了的。必需對(duì)代碼進(jìn)行編輯。HTM

7、L文件的本質(zhì)HTML文件的實(shí)質(zhì)是以.htm或.html為擴(kuò)展名的純文本文件。html文件的格式查看網(wǎng)頁源文件，可見html文件的格式如下：<html><head><title>網(wǎng)頁的標(biāo)題</title></head><body></body></html>其中省略號(hào)部份是網(wǎng)頁的內(nèi)容,其實(shí)每個(gè)標(biāo)記都是一一對(duì)應(yīng)的。每個(gè)網(wǎng)頁文件都是以<html>開始和以</html>結(jié)束。<title>與</title>之間的內(nèi)容是網(wǎng)頁的標(biāo)題。會(huì)顯示在瀏覽器的標(biāo)題欄上。&l

8、t;body>與</body>之間放的是網(wǎng)頁內(nèi)容。標(biāo)志（tag）的結(jié)構(gòu)特點(diǎn) 1、用<>包圍。2、多數(shù)成對(duì)出現(xiàn)。3、結(jié)束標(biāo)記用/。4、標(biāo)簽是嵌入式的。5、標(biāo)簽可有多種屬性和屬性值。 6、標(biāo)簽用西文半角字符，對(duì)大小寫不敏感。HTML文件的組成頭部和主體標(biāo)志和普通文本 文件標(biāo)題標(biāo)志文件標(biāo)題標(biāo)志為<title></title>。使用過瀏覽器的人可能都會(huì)注意到瀏覽器窗口最上邊的藍(lán)色部分顯示的文本信息，那些信息一般是網(wǎng)頁的"主題"。要將網(wǎng)頁的主題顯示到瀏覽器的頂部其實(shí)很簡(jiǎn)單，只要在<title></title>

9、;標(biāo)志對(duì)之間加入要顯示的文本即可。顏色表示方法HTML用#RRGGBB字符串代表色彩，成為RGB值。RGB值中的RR、GG和BB分別代表紅綠藍(lán)三原色的兩位十六進(jìn)制整數(shù)值。每種原色的取值范圍在00和FF（即十進(jìn)制的0和255）之間，即一個(gè)字節(jié)存儲(chǔ)一種原色。每種原色都有256種由淺至深的色彩變化，網(wǎng)頁中呈現(xiàn)的色彩都是由這三種原色調(diào)配出來的。rgb值可以表示出（256*256*256）種顏色。常用顏色舉例黑色白色綠色黃色紅色藍(lán)色#000000#FFFFFF#00FF00#FFFF00#FF0000#0000FF二、HTML基礎(chǔ)頁面格式標(biāo)志在網(wǎng)頁設(shè)置中，會(huì)用到HTML頁面設(shè)置、列表設(shè)置等格式標(biāo)志。段落

10、標(biāo)志<p></p>預(yù)處理文本<pre></pre>換行標(biāo)志<br>列表標(biāo)志1、定義列表<dl></dl>用來創(chuàng)建一個(gè)定義列表，<dt></dt>用來創(chuàng)建列表中的上層項(xiàng)目，<dd></dd>用來創(chuàng)建列表中最下層項(xiàng)目，<dt></dt>和<dd></dd>都必須放在<dl></dl>標(biāo)志對(duì)之間。源代碼效果 <HTML><head><title>一個(gè)普通列表<

11、;/title></head><body><dl><dt>中國(guó)城市</dt><dd>北京</dd><dd>上海</dd><dd>廣州</dd><dt>美國(guó)城市</dt><dd>華盛頓</dd><dd>芝加哥</dd><dd>紐約</dd></dl></body></HTML> 中國(guó)城市 北京 上海 廣州 美國(guó)城市 華盛頓 芝加哥

12、 紐約 2、有序列表和無序列表<ol></ol>標(biāo)志對(duì)用來創(chuàng)建一個(gè)有序列表；<ul></ul>標(biāo)志對(duì)用來創(chuàng)建一個(gè)無序列表；<li></li>標(biāo)志對(duì)只能在<ol></ol>或<ul></ul>標(biāo)志對(duì)之間使用，此標(biāo)志對(duì)用來創(chuàng)建一個(gè)列表項(xiàng)。源代碼效果 <HTML><head><title></title></head><body><p>中國(guó)城市</p><ol> <li&

13、gt;北京</li><li>上海</li><li>廣州</li></ol><p>美國(guó)城市</p><ul> <li>華盛頓</li><li>芝加哥</li><li>紐約</li></ul></body></HTML>中國(guó)城市1. 北京 2. 上海 3. 廣州 美國(guó)城市· 華盛頓 · 芝加哥 · 紐約 標(biāo)題格式標(biāo)志HTML語言提供了一系列對(duì)文本中的標(biāo)題進(jìn)行

14、操作的標(biāo)志對(duì)：<h1></h1><h6></h6>，即一共有6對(duì)標(biāo)題的標(biāo)志對(duì)。<h1></h1>是最大的標(biāo)題，而<h6></h6>則是最小的標(biāo)題，也即是標(biāo)志中h后面的數(shù)字越大標(biāo)題文本就越小。如果HTML文檔中需要輸出標(biāo)題文本，就可以使用這6對(duì)標(biāo)題標(biāo)志對(duì)中的任何一對(duì)。文本標(biāo)志<b></b>用來使文本以黑體字的形式輸出。<i></i>用來使文本以斜體字的形式輸出。<u></u>用來使文本以下加一劃線的形式輸出。<sub>

15、</sub>下標(biāo)<sup></sup>上標(biāo)<tt></tt>用來輸出打字機(jī)風(fēng)格字體的文本。<cite></cite>用來輸出引用方式的字體，通常是斜體。<em></em>用來輸出需要強(qiáng)調(diào)的文本(通常是斜體加黑體)。<strong></strong>則用來輸出加重文本(通常也是斜體加黑體)。<font></font>設(shè)定文本的字體大小、顏色、字體名等，通過屬性size、color、face的控制來實(shí)現(xiàn)。size屬性用來改變字體的大小，它可以取

16、值：-N、N和+N；而color屬性則用來改變文本的顏色；face屬性值為系統(tǒng)中現(xiàn)有的字體，如“楷體_GB2312”。為保證在客戶端瀏覽器中顯示正確字體的網(wǎng)頁，不要使用非系統(tǒng)自帶的特殊字體，如“華文彩云繁”等。特殊字符©copy；®&reg；153;±plusmn; 空格nbsp;¥yen;網(wǎng)頁圖像格式JPEG、GIF、PNG格式。1、可交換圖像文件格式 (GIF)由于幾乎所有的 Web 瀏覽器都支持 GIF 格式（文件擴(kuò)展名為 .gif），因而該格式是萬維網(wǎng)上最常用的兩個(gè)圖像文件格式之一。由于此格式最多僅可以顯示 256 種顏色，因而

17、最適于黑白線條圖形、彩色剪輯圖片和具有大塊實(shí)心顏色的圖片。GIF89a 格式也同時(shí)支持透明和動(dòng)畫。GIF 文件用于：包含透明區(qū)域的圖像。 有限的彩色，例如 256 色或更少。 離散區(qū)域中的彩色。 黑白圖像。 小尺寸圖像，例如站點(diǎn)上的按鈕。 清晰度和邊緣清晰度很重要的圖形，例如線條圖形或卡通。 包含文本的圖像。 動(dòng)畫。2、聯(lián)合攝影專家組 (JPEG)JPEG 格式（文件擴(kuò)展名為 .jpg 或 .jpeg）是 Web 上的另一個(gè)最常用的圖像文件格式。它不局限于 256 色，因此您可以使用它來顯示高質(zhì)量的照片或包含上百萬種顏色的圖片。由于它被設(shè)計(jì)為圖像存儲(chǔ)格式，因而可以有效地將高質(zhì)量的大照片壓縮為非

18、常緊密的文件，這在您用電子郵件發(fā)送大圖像時(shí)很有用。然而，您將圖像文件的大小壓縮的越多（或修改并重新保存圖像），圖像信息的丟失也越多并且質(zhì)量也會(huì)下降。此外，該格式不支持透明和動(dòng)畫。JPEG 文件用于：照片。 自然視覺效果圖像。 大數(shù)量的顏色，例如上百萬。 具有大量細(xì)節(jié)的圖像，例如房地產(chǎn)站點(diǎn)上房屋的照片。 大尺寸的圖像。3、可移植網(wǎng)絡(luò)圖形 (PNG)PNG 格式（文件擴(kuò)展名為 .png）可以顯示上百萬種顏色。然而，由于它是一種新的格式，當(dāng)前只有很少的瀏覽器可以支持（盡管它正快速獲得支持）。以這種格式保存的圖像，即便將文件壓縮，其質(zhì)量也不會(huì)降低。它支持透明，但不支持動(dòng)畫（因?yàn)樗荒馨鄠€(gè)圖像）。圖

19、像標(biāo)志圖像在網(wǎng)頁制作中擔(dān)任著非常重要的角色。HTML語言也專門提供了<img>標(biāo)志來處理圖像的輸出。<img>標(biāo)志并非真正地將圖像融入到HTML文檔中，而是標(biāo)明圖像文件的存放位置。src屬性是<img>標(biāo)志中不可缺少的一部分,必須賦值，其值是圖形文件的存放位置和文件名。align是圖像的對(duì)齊方式。border屬性是圖像的邊框，可以取大于或者等于的整數(shù)，默認(rèn)單位是像素。width和height屬性是圖像的寬和高，默認(rèn)單位也是像素。alt屬性是當(dāng)鼠標(biāo)移動(dòng)到圖像上時(shí)顯示的文本。圖像實(shí)例<img src="cmu_cname.gif" wi

20、dth="101" height="22" alt="中國(guó)醫(yī)科大學(xué)" border="1">水平線標(biāo)志<hr>標(biāo)志是在HTML文檔中加入一條水平線，它可以直接使用，具有size、color、width和noshade屬性：size是設(shè)置水平線的厚度。width是設(shè)定水平線的寬度，默認(rèn)單位是像素。noshade屬性不用賦值，而是直接加入標(biāo)志即可使用，它是用來加入一條沒有陰影的水平線(不加入此屬性，水平線將有陰影)。表格標(biāo)志表格標(biāo)志對(duì)于制作網(wǎng)頁是很重要的，現(xiàn)在很多網(wǎng)頁都是使用多重表格，主要是因?yàn)楸砀癫?/p>

21、但可以固定文本或圖像的輸出，而且還可以任意地進(jìn)行背景和前景顏色的設(shè)置。可見表格在網(wǎng)頁排版中的作用。<table></table>標(biāo)志對(duì)用來創(chuàng)建一個(gè)表格，有如下屬性：屬性用途bgcolor設(shè)置表格的背景色border設(shè)置邊框的寬度，若不設(shè)置此屬性，則邊框?qū)挾饶J(rèn)為0bordercolor設(shè)置邊框的顏色bordercolorlight設(shè)置邊框明亮部分的顏色(當(dāng)border的值大于等于1時(shí)才有用)bordercolordark設(shè)置邊框昏暗部分的顏色(當(dāng)border的值大于等于1時(shí)才有用)cellspacing設(shè)置表格的單元格之間的空間大小cellpadding設(shè)置表格的單元格

22、邊框與其內(nèi)部?jī)?nèi)容之間的空間大小width設(shè)置表格的寬度，單位用絕對(duì)像素值或總寬度的百分比align表格在網(wǎng)頁中的位置表格的定義順序是先定義行，再定義該行中的單元格。<tr></tr>標(biāo)志對(duì)用來創(chuàng)建表格中的每一行。此標(biāo)志對(duì)只能放在<table></table>標(biāo)志對(duì)之間使用，而在此標(biāo)志對(duì)之間加入文本將是無用的，因?yàn)樵?lt;tr></tr>之間只能緊跟<td></td>標(biāo)志對(duì)才是有效的語法。<td></td>標(biāo)志對(duì)用來創(chuàng)建單元格，此標(biāo)志對(duì)只有放在<tr></tr&g

23、t;標(biāo)志對(duì)之間才是有效的，輸入的文本也只有放在<td></td>標(biāo)志對(duì)中才有效(即才能夠顯示出來)。<td>具有width、colspan、rowspan和nowrap屬性：width是單元格的寬度，單位用絕對(duì)像素值或總寬度的百分比。colspan設(shè)置一個(gè)表格單元格跨占的列數(shù)(缺省值為1)。rowspan設(shè)置一個(gè)表格單元格跨占的行數(shù)(缺省值為1)。表格實(shí)例：<table border="1"><tr> <td rowspan="2" bgcolor="#0033FF"&

24、gt;<font color="#FFFFFF">1單元格跨越多行</font></td><td bgcolor="#999999"><font color="#FFFFFF">1</font></td><td bgcolor="#0066FF"><font color="#FFFFFF">2</font></td></tr><tr> <

25、;td bgcolor="#990000"><font color="#FFFFFF">4</font></td><td bgcolor="#009900"><font color="#FFFFFF">5</font></td></tr><tr> <td bgcolor="#006600"><font color="#FFFFFF">6&l

26、t;/font></td><td colspan="2" bgcolor="#996600"><font color="#FFFFFF">7單元格跨越多列</font></td></tr></table>單元格跨越多行單元格跨越多列超級(jí)鏈接重點(diǎn)1、網(wǎng)頁內(nèi)部鏈接 點(diǎn)擊鏈接熱點(diǎn)，網(wǎng)頁跳轉(zhuǎn)到資源片段：定義鏈接熱點(diǎn)<a href="#資源片段名">到資源片段</a> 定義資源片段<a name="

27、;資源片段名"></a>資源片段2、相對(duì)路徑、站內(nèi)絕對(duì)路徑、絕對(duì)路徑相對(duì)路徑：相對(duì)于當(dāng)前文檔 ./的用法站內(nèi)絕對(duì)路徑：相對(duì)于網(wǎng)站根 /的用法絕對(duì)路徑：資源在網(wǎng)上完整的存放地址，網(wǎng)址。3、網(wǎng)頁間鏈接<a href="文檔位置+文件名">鏈接文字</a>例：<a href="/chn/index.htm">中文主頁</a> 4、網(wǎng)站間鏈接網(wǎng)站間的鏈接，必須使用目標(biāo)資源的絕對(duì)路徑，從協(xié)議開始。如<a href=" :/ sina ">新浪網(wǎng)</a&

28、gt;5、鏈接到電子郵件地址語法格式：<a href="mailto:djtianmail ">給我寫信</a>，打開客戶瀏覽器設(shè)定的默認(rèn)電子郵件程序，收件人為mailto后的地址。將圖像作為超級(jí)鏈接的錨點(diǎn)語法：<a href="cat.jpg"><img src="/images/cat.gif"></a> 活動(dòng)字幕標(biāo)記marquee參考資料活動(dòng)字幕，也稱為滾動(dòng)看板、滾動(dòng)字幕?；顒?dòng)字幕的使用使得整個(gè)網(wǎng)頁更有動(dòng)感，顯得很有生氣?，F(xiàn)在的網(wǎng)站中也越來越多地使用活動(dòng)字幕來加強(qiáng)網(wǎng)頁的互動(dòng)性。用Javascript編程可以實(shí)現(xiàn)活動(dòng)字幕效果；用Dreamweaver的

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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ì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論