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

下載本文檔

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

文檔簡介

1、第二章 靜態(tài)網(wǎng)頁制作基礎(chǔ) 預(yù)備知識：靜態(tài)網(wǎng)頁概述 初期的網(wǎng)站都是由靜態(tài)網(wǎng)頁組成的， 網(wǎng)頁中只有文字、 圖形、 圖像等， 用戶只能被動地接受這些信息。 那時的 Web 頁面的核心是 HTML(一種標(biāo)記語言)，它編寫很方便，不要求有特定的語言環(huán)境，可以用任 何一種編輯器寫好， 便可以放到瀏覽器觀看結(jié)果。 現(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)的 HTTP (Hyper text

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

3、，使網(wǎng)頁布局合理、美觀大 方。 3、文本編寫 自己的網(wǎng)頁中需要大量的文字材料，這就要在網(wǎng)頁編輯器中用 HTML 語言中的標(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、圖像處理與動畫制作工具：Photoshop、Flash 等。 2、 網(wǎng)頁編輯工具： 純文本編輯工具， Notepad 等； 轉(zhuǎn)換工具， word 等； 專用工具， FrontPage、 1） 如 2） 如 3） 如 Dreamweaver 等。 3、網(wǎng)頁

4、上傳工具：1)FTP 工具，如 WS-FTP，CuteFTP 等；2)專用網(wǎng)頁編輯軟件的文件傳輸功能。 4、網(wǎng)頁優(yōu)化工具：網(wǎng)頁減肥茶、網(wǎng)頁優(yōu)化大師等。 四、網(wǎng)頁制作工作步驟 1、步驟：1）制作網(wǎng)頁-> 2）瀏覽器預(yù)覽-（滿意）-> 4）發(fā)布 個 L-(不滿意)-| 2、工作臺： 網(wǎng)頁編輯器<=>網(wǎng)頁瀏覽器 第二章 靜態(tài)網(wǎng)頁制作基礎(chǔ) 第一節(jié) HTML 基本知識 第二節(jié) HTML 重要標(biāo)簽 第三節(jié) URL、路徑、圖像及超級鏈接 一、HTML 簡介 HTML 是 Hypertext Markup Language(超文本標(biāo)志語言)的縮寫， 它是構(gòu)成 Web 頁面(Page)的

5、主要工具， 是用來表示網(wǎng)上信息的符號標(biāo)志語言。 在網(wǎng)上，如果要向全球范圍內(nèi)出版和發(fā)布信息，需要有一種能夠被廣泛理 解的語言，即所有的計算機 都能夠理解的一種用于出版的"母語"。 WWW(World Wide Web)所使用的出版語言就是 HTML 語言。 通過 HTML， 將所需要表達(dá)的信息按某種規(guī)則寫成 HTML 文件，通過專用的瀏覽器來識別，并將這些 HTML"翻譯"成可以 識別的信息，就是現(xiàn)在所見到的網(wǎng)頁。 HTML 的功能 1)出版在線的文檔，其中包含了標(biāo)題、文本、表格、列表以及照片等內(nèi)容。 2)通過超鏈接檢索在線的信息。 3)為獲取遠(yuǎn)程服務(wù)而設(shè)

6、計表單，可用于檢索信息、定購產(chǎn)品等。 4)在文檔中直接包含表格數(shù)據(jù)、視頻剪輯、聲音剪輯以及其他的一些應(yīng)用。 學(xué)習(xí) HTML 的意義 便于優(yōu)化專用工具生成的代碼；為編寫 ASP 等網(wǎng)絡(luò)程序奠定基礎(chǔ)。 HTML 的編寫工具 用 HTML 編寫的文件(文檔)的擴展名是HTML 或HTM。它們是供瀏覽器解釋瀏覽文件的格式?？梢?使用記事本、寫字板等編輯工具來編寫 HTML 文件。HTML 語言使用標(biāo)志對(標(biāo)簽)的方法來編寫文件，既簡 單又方便。 它通常使用<標(biāo)志名></標(biāo)志名>來表示標(biāo)志的開始和結(jié)束(例如<HTML></HTML>標(biāo)志對)， 因此在 HT

7、ML 文檔中這樣的標(biāo)志對都必須是成對使用的。 在今天，做網(wǎng)頁的工具到處都是,只要動幾下鼠標(biāo)，一個精彩的網(wǎng)頁就出來了，HTML 是否要學(xué)呢？答 案是肯定的，因為工具就是工具，它們生成的代碼是機械的，不夠簡潔，使網(wǎng)頁打開的速度減慢。還有很 多新的功能，工具是生成不了的。必需對代碼進行編輯。 HTML 文件的本質(zhì) HTML 文件的實質(zhì)是以.htm 或.html 為擴展名的純文本文件。 html 文件的格式 查看網(wǎng)頁源文件，可見 html 文件的格式如下： <html> <head> <title>網(wǎng)頁的標(biāo)題</title> </head>

8、<body> </body> </html> 其中省略號部份是網(wǎng)頁的內(nèi)容,其實每個標(biāo)記都是一一對應(yīng)的。每個網(wǎng)頁文件都是以<html>開始和以 </html>結(jié)束。<title>與</title>之間的內(nèi)容是網(wǎng)頁的標(biāo)題。會顯示在瀏覽器的標(biāo)題欄上。<body>與 </body>之間放的是網(wǎng)頁內(nèi)容。 標(biāo)志（tag）的結(jié)構(gòu)特點 1、用<>包圍。 2、多數(shù)成對出現(xiàn)。 3、結(jié)束標(biāo)記用/。 4、標(biāo)簽是嵌入式的。 5、標(biāo)簽可有多種屬性和屬性值。 6、標(biāo)簽用西文半角字符，對大小寫不敏感。 HT

9、ML 文件的組成 頭部和主體 標(biāo)志和普通文本 文件標(biāo)題標(biāo)志 文件標(biāo)題標(biāo)志為<title></title>。使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊的藍(lán)色部分顯示 的文本信息，那些信息一般是網(wǎng)頁的"主題"。要將網(wǎng)頁的主題顯示到瀏覽器的頂部其實很簡單，只要在 <title></title>標(biāo)志對之間加入要顯示的文本即可。 顏色表示方法 HTML 用#RRGGBB 字符串代表色彩，成為 RGB 值。RGB 值中的 RR、GG 和 BB 分別代表紅綠藍(lán)三原色的兩 位十六進制整數(shù)值。每種 原色的取值范圍在 00 和 FF（即十進制

10、的 0 和 255）之間，即一個字節(jié)存儲一種 原色。每種原色都有 256 種由淺至深的色彩變化，網(wǎng)頁中呈現(xiàn)的色彩都是由這三種原色調(diào)配出來的。rgb 值可以表示出（256*256*256）種顏色。 常用顏色舉例 黑色 #000000 白色 #FFFFFF 綠色 #00FF00 黃色 #FFFF00 紅色 #FF0000 藍(lán)色 #0000FF 二、HTML 基礎(chǔ) 頁面格式標(biāo)志 在網(wǎng)頁設(shè)置中，會用到 HTML 頁面設(shè)置、列表設(shè)置等格式標(biāo)志。 段落標(biāo)志<p></p> 預(yù)處理文本<pre></pre> 換行標(biāo)志<br> 列表標(biāo)志 1、定義列表

11、<dl></dl>用來創(chuàng)建一個定義列表，<dt></dt>用來創(chuàng)建列表中的上層項目，<dd></dd>用來創(chuàng)建列表中 最下層項目，<dt></dt>和<dd></dd>都必須放在<dl></dl>標(biāo)志對之間。 源代碼 <HTML> 效果 中國城市 <head> 北京 <title>一個普通列表</title> 上海 </head> 廣州 <body> 美國城市 <dl>

12、 華盛頓 <dt>中國城市</dt> 芝加哥 <dd>北京</dd> 紐約 <dd>上海</dd> <dd>廣州</dd> <dt>美國城市</dt> <dd>華盛頓</dd> <dd>芝加哥</dd> <dd>紐約</dd> </dl> </body> </HTML> 2、有序列表和無序列表 <ol></ol>標(biāo)志對用來創(chuàng)建一個有序列表；<

13、;ul></ul>標(biāo)志對用來創(chuàng)建一個無序列表；<li></li>標(biāo)志對只 能在<ol></ol>或<ul></ul>標(biāo)志對之間使用，此標(biāo)志對用來創(chuàng)建一個列表項。 源代碼 <HTML> <head> <title></title> </head> <body> <p>中國城市</p> <ol> <li>北京</li> <li>上海</li> <li

14、>廣州</li> </ol> <p>美國城市</p> <ul> <li>華盛頓</li> <li>芝加哥</li> 效果 中國城市 1. 北京 2. 上海 3. 廣州 美國城市 華盛頓 芝加哥 紐約 <li>紐約</li> </ul> </body> </HTML> 標(biāo)題格式標(biāo)志 HTML 語言提供了一系列對文本中的標(biāo)題進行操作的標(biāo)志對：<h1></h1><h6></h6>，

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

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

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

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

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

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

21、ot; width="101" height="22" alt="中國醫(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)志對于制作網(wǎng)頁是

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

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

24、是有 效的語法。<td></td>標(biāo)志對用來創(chuàng)建單元格，此標(biāo)志對只有放在<tr></tr>標(biāo)志對之間才是有效的，輸入 的文本也只有放在<td></td>標(biāo)志對中才有效(即才能夠顯示出來)。 <td>具有 width、colspan、rowspan 和 nowrap 屬性： width 是單元格的寬度，單位用絕對像素值或總寬度的百分比。 colspan 設(shè)置一個表格單元格跨占的列數(shù)(缺省值為 1)。 rowspan 設(shè)置一個表格單元格跨占的行數(shù)(缺省值為 1)。 表格實例： <table border=&q

25、uot;1"> <tr> <td rowspan="2" bgcolor="#0033FF"><font color="#FFFFFF">1 單元格跨越多行</font></td> <td bgcolor="#999999"><font color="#FFFFFF">1</font></td> <td bgcolor="#0066FF">&

26、lt;font color="#FFFFFF">2</font></td> </tr> <tr> <td bgcolor="#990000"><font color="#FFFFFF">4</font></td> <td bgcolor="#009900"><font color="#FFFFFF">5</font></td> </tr>

27、; <tr> <td bgcolor="#006600"><font color="#FFFFFF">6</font></td> <td colspan="2" bgcolor="#996600"><font color="#FFFFFF">7 單元格跨越多列</font></td> </tr> </table> 單元格跨越多行 單元格跨越多列 超級鏈接重點 1、網(wǎng)

28、頁內(nèi)部鏈接 點擊鏈接熱點，網(wǎng)頁跳轉(zhuǎn)到資源片段： 定義鏈接熱點<a href="#資源片段名">到資源片段</a> 定義資源片段<a name="資源片段名"></a>資源片段 2、相對路徑、站內(nèi)絕對路徑、絕對路徑 相對路徑：相對于當(dāng)前文檔 ./的用法 站 內(nèi)絕對路徑：相對于網(wǎng)站根 /的用法 絕對路徑：資源在網(wǎng)上完整的存放地址，網(wǎng)址。 3、網(wǎng)頁間鏈接 <a href="文檔位置+文件名">鏈接文字</a> 例：<a href="/chn/index.

29、htm">中文主頁</a> 4、網(wǎng)站間鏈接 網(wǎng)站間的鏈接， 必須使用目標(biāo)資源的絕對路徑， 從協(xié)議開始。 如<a href=""> 新浪網(wǎng)</a> 5、鏈接到電子郵件地址 語法格式：<a href="mailto:djtian">給我寫信</a>，打開客戶瀏覽器設(shè)定的默認(rèn) 電子郵件程序，收件人為 mailto 后的地址。 將圖像作為超級鏈接的錨點 語法：<a href="cat.jpg"><img src="/images/cat.gif"></a> 活動字幕標(biāo)記marquee參考資料 活動字幕，也稱為滾動看板、滾動字幕。活動字幕的使用使得整個網(wǎng)頁更有動感，顯得很有生氣?，F(xiàn) 在的網(wǎng)站中也越來越多地使用活動字幕來加強網(wǎng)頁的互動性。用 Javascript 編程可以實現(xiàn)活動字幕效果； 用 Dreamweaver

溫馨提示

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

評論

0/150

提交評論