計算機網(wǎng)絡(luò)與應(yīng)用

1、計算機網(wǎng)絡(luò)與應(yīng)用,中國醫(yī)科大學(xué)信息管理與信息系統(tǒng)系 田大軍,HTML語言基礎(chǔ),初期的網(wǎng)站都是由靜態(tài)網(wǎng)頁組成的，網(wǎng)頁中只有文字、圖形、圖像等，用戶只能被動地接受這些信息。那時的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)的HTTP (Hyper text Transf

2、er Protocol)協(xié)議向Web服務(wù)器請求提供網(wǎng)頁內(nèi)容時，服務(wù)器僅僅是將原已設(shè)計好的靜態(tài)HTML文檔傳送給用戶瀏覽器。其頁面的內(nèi)容使用的是標(biāo)準(zhǔn)HTML代碼，再加上GIF格式的動態(tài)圖片。,靜態(tài)網(wǎng)頁制作： 1、網(wǎng)頁素材搜集與制作（圖像處理與動畫制作） 2、網(wǎng)頁版式設(shè)計 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、圖像處理與動畫制作工具：P

3、hotoshop、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)化大師等。,HTML簡介 HTML是Hypertext Markup Language(超文本標(biāo)志語言)的縮寫，它是構(gòu)成Web頁面(Page)的主要工具，是用來表示網(wǎng)上信息的符號標(biāo)志語言。 在網(wǎng)上，如果要向全球范圍內(nèi)出版和發(fā)布信息，需要有一種能夠被廣泛理解的語言，即所有的計

4、算機都能夠理解的一種用于出版的母語。WWW(World Wide Web)所使用的出版語言就是HTML語言。通過HTML，將所需要表達的信息按某種規(guī)則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML翻譯成可以識別的信息，就是現(xiàn)在所見到的網(wǎng)頁。,HTML的功能 1)出版在線的文檔，其中包含了標(biāo)題、文本、表格、列表以及照片等內(nèi)容。 2)通過超鏈接檢索在線的信息。 3)為獲取遠(yuǎn)程服務(wù)而設(shè)計表單，可用于提交數(shù)據(jù)、檢索信息、定購產(chǎn)品等。 4)在文檔中直接包含表格數(shù)據(jù)、視頻剪輯、聲音剪輯以及其他的一些應(yīng)用。,HTML文件的實質(zhì)是以.htm或.html為擴展名的純文本文件。,是供瀏覽器解釋的格式。

5、可以使用記事本、寫字板等編輯工具來編寫HTML文件。HTML語言使用標(biāo)志(標(biāo)簽)的方法來編寫文件。它通常使用來表示標(biāo)志的開始和結(jié)束(例如標(biāo)志) 。,HTML文件的組成 頭部和主體 標(biāo)簽和普通文本,html文件的格式 查看網(wǎng)頁源文件，可見html文件的格式如下： 網(wǎng)頁的標(biāo)題 其中省略號部份是網(wǎng)頁的內(nèi)容,其實每個標(biāo)記都是一一對應(yīng)的。每個網(wǎng)頁文件都是以開始和以結(jié)束。與之間的內(nèi)容是網(wǎng)頁的標(biāo)題。會顯示在瀏覽器的標(biāo)題欄上。與之間放的是網(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)簽用半角字符，對大小寫

6、不敏感。,文檔標(biāo)題 文檔標(biāo)題為。使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊的藍(lán)色部分顯示的文本信息，那些信息一般是網(wǎng)頁的主題。要將網(wǎng)頁的主題顯示到瀏覽器的頂部其實很簡單，只要在標(biāo)志對之間加入要顯示的文本即可。,例： 中國醫(yī)科大學(xué) ,顏色表示方法 HTML用#RRGGBB字符串代表色彩，成為RGB值。RGB值中的RR、GG和BB分別代表紅綠藍(lán)三原色的兩位十六進制整數(shù)值。每種原色的取值范圍在00和FF（即十進制的0和255）之間，即一個字節(jié)存儲一種原色。每種原色都有256種由淺至深的色彩變化，網(wǎng)頁中呈現(xiàn)的色彩都是由這三種原色調(diào)配出來的。rgb值可以表示出（256*256*256）種顏色。,頁面

7、格式標(biāo)簽 在網(wǎng)頁設(shè)置中，會用到HTML頁面設(shè)置、列表設(shè)置等格式標(biāo)簽。 段落標(biāo)簽 預(yù)處理文本 換行標(biāo)簽,標(biāo)題格式標(biāo)簽 HTML語言提供了一系列對文本中的標(biāo)題進行操作的標(biāo)志對：，即一共有6對標(biāo)題的標(biāo)志對。是最大的標(biāo)題，而則是最小的標(biāo)題，也即是標(biāo)志中h后面的數(shù)字越大標(biāo)題文本就越小。如果HTML文檔中需要輸出標(biāo)題文本，就可以使用這6對標(biāo)題標(biāo)志對中的任何一對。,一號標(biāo)題 六號標(biāo)題,文本標(biāo)志 用來使文本以黑體字的形式輸出。 用來使文本以斜體字的形式輸出。 用來使文本以下加一劃線的形式輸出。 下標(biāo) 上標(biāo) 用來輸出打字機風(fēng)格字體的文本。 用來輸出引用方式的字體，通常是斜體。 用來輸出需要強調(diào)的文本(通常是斜體

8、加黑體)。 則用來輸出加重文本(通常也是斜體加黑體)。,設(shè)定文本的字體大小、顏色、字體名等，通過屬性size、color、face的控制來實現(xiàn)。 size屬性：改變字體的大小，它可以取值：-N、N和+N； color屬性：改變文本的顏色； face屬性：字體名。值為系統(tǒng)中現(xiàn)有的字體，如“楷體_GB2312”。 為保證在客戶端瀏覽器中顯示正確字體的網(wǎng)頁，不要使用非系統(tǒng)自帶的特殊字體，如“華文彩云繁”等。,例： 宋體紅色2號字,特殊字符,網(wǎng)頁圖像格式：JPEG、GIF、PNG格式。,可交換圖像文件格式 (GIF) 由于幾乎所有的 Web 瀏覽器都支持 GIF 格式（文件擴展名為 .gif），因而該

9、格式是萬維網(wǎng)上最常用的兩個圖像文件格式之一。由于此格式最多僅可以顯示 256 種顏色，因而最適于黑白線條圖形、彩色剪輯圖片和具有大塊實心顏色的圖片。GIF89a 格式也同時支持透明和動畫。GIF 文件用于： 包含透明區(qū)域的圖像。 有限的彩色，例如 256 色或更少。 離散區(qū)域中的彩色。 黑白圖像。 小尺寸圖像，例如站點上的按鈕。 清晰度和邊緣清晰度很重要的圖形，例如線條圖形或卡通。 包含文本的圖像。 動畫。,聯(lián)合攝影專家組 (JPEG) JPEG 格式（文件擴展名為 .jpg 或 .jpeg）是 Web 上的另一個最常用的圖像文件格式。它不局限于 256 色，因此您可以使用它來顯示高質(zhì)量的照片

10、或包含上百萬種顏色的圖片。由于它被設(shè)計為圖像存儲格式，因而可以有效地將高質(zhì)量的大照片壓縮為非常緊密的文件，這在您用電子郵件發(fā)送大圖像時很有用。然而，您將圖像文件的大小壓縮的越多（或修改并重新保存圖像），圖像信息的丟失也越多并且質(zhì)量也會下降。此外，該格式不支持透明和動畫。 JPEG 文件用于： 照片。 自然視覺效果圖像。 大數(shù)量的顏色，例如上百萬。 需要大量細(xì)節(jié)的圖像。 大尺寸的圖像。,可移植網(wǎng)絡(luò)圖形 (PNG) PNG 格式（文件擴展名為 .png）可以顯示上百萬種顏色。然而，由于它是一種新的格式，當(dāng)前只有很少的瀏覽器可以支持（盡管它正快速獲得支持）。以這種格式保存的圖像，即便將文件壓縮，其質(zhì)

11、量也不會降低。它支持透明，但不支持動畫（因為它不能包含多個圖像）。,圖像標(biāo)志標(biāo)志來處理圖像的輸出。 標(biāo)志并非真正地將圖像融入到HTML文檔中，而是標(biāo)明圖像文件的存放位置。 src屬性必須賦值，其值是圖形文件的存放位置和文件名。 align是圖像的對齊方式。 border屬性是圖像的邊框，可以取大于或者等于的整數(shù)，默認(rèn)單位是像素。 width和height屬性是圖像的寬和高，默認(rèn)單位也是像素。 alt屬性是當(dāng)鼠標(biāo)移動到圖像上時顯示的文本。,圖像實例,水平線標(biāo)志 標(biāo)志是在HTML文檔中加入一條水平線，具有size、color、width和noshade屬性： size是設(shè)置水平線的厚度。 widt

12、h是設(shè)定水平線的寬度，默認(rèn)單位是像素。 noshade屬性不用賦值，而是直接加入標(biāo)志即可使用，它是用來加入一條沒有陰影的水平線(不加入此屬性，水平線將有陰影)。,表格【重點】 表格標(biāo)志對于制作網(wǎng)頁是很重要的，現(xiàn)在很多網(wǎng)頁都是使用多重表格，主要是因為表格不但可以固定文本或圖像的輸出，而且還可以任意地進行背景和前景顏色的設(shè)置?？梢姳砀裨诰W(wǎng)頁排版中的作用。,？想想表格在網(wǎng)頁中有哪些作用。,屬性用途 bgcolor設(shè)置表格的背景色 border設(shè)置邊框的寬度，若不設(shè)置此屬性，則邊框?qū)挾饶J(rèn)為0 bordercolor設(shè)置邊框的顏色 bordercolorlight設(shè)置邊框明亮部分的顏色(當(dāng)border

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

14、效的，輸入的文本也只有放在標(biāo)志對中才有效(即才能夠顯示出來)。 具有width、colspan、rowspan和nowrap屬性： width是單元格的寬度，單位用絕對像素值或總寬度的百分比。 colspan設(shè)置一個表格單元格跨占的列數(shù)(缺省值為1)。 rowspan設(shè)置一個表格單元格跨占的行數(shù)(缺省值為1)。,表格實例： 1單元格跨越多行 2 3 4 5 6 7單元格跨越多列 ,相對路徑：相對于當(dāng)前文檔 ./的用法 站內(nèi)絕對路徑：相對于網(wǎng)站根 /的用法 絕對路徑：資源在網(wǎng)上完整的存放地址，網(wǎng)址。,超鏈接 重點,網(wǎng)頁內(nèi)部鏈接 點擊鏈接熱點，網(wǎng)頁跳轉(zhuǎn)到資源片段： 定義鏈接熱點到資源片段 定義資源

15、片段資源片段,網(wǎng)頁間鏈接 鏈接文字 例：中文主頁 網(wǎng)站間鏈接 網(wǎng)站間的鏈接，必須使用目標(biāo)資源的絕對路徑，從協(xié)議開始。 例：新浪網(wǎng),鏈接到電子郵件地址 給我寫信，打開客戶瀏覽器設(shè)定的默認(rèn)電子郵件程序，收件人為mailto后的地址。 將圖像作為超級鏈接的錨點 語法：,網(wǎng)頁內(nèi)嵌窗口 說明： src屬性為窗口載入的初始網(wǎng)頁； name屬性指明窗口的名稱，它和標(biāo)簽的target屬性相對應(yīng)。,網(wǎng)頁表單 重點,表單是網(wǎng)頁上的一組特殊對象標(biāo)簽，是接受用戶輸入數(shù)據(jù)的窗口，是用戶與服務(wù)器之間信息數(shù)據(jù)交互的橋梁?？梢越邮苡脩糨斎氲男畔?shù)據(jù)，并提交給服務(wù)器端預(yù)定的程序等來接收并處理數(shù)據(jù)。,表單技術(shù)的應(yīng)用，使得基于網(wǎng)頁

16、的編程得以實現(xiàn)。 含有表單的網(wǎng)頁稱作表單網(wǎng)頁，表單對象中包含有若干表單域，每一個表單域也稱表單控件，是表單的基本元素，用戶可以在表單域中輸入信息或作出選擇。,表單標(biāo)簽：設(shè)定表單的起止位置，并指定處理表單數(shù)據(jù)程序的url地址。基本語法結(jié)構(gòu)： 表單元素,action：用于設(shè)定處理表單數(shù)據(jù)程序url的地址。 method：指定數(shù)據(jù)傳送到服務(wù)器的方式。有兩種主要的方式，當(dāng)method=get時，將輸入數(shù)據(jù)加在action指定的地址后面?zhèn)魉偷椒?wù)器；當(dāng)method=post時則將輸入數(shù)據(jù)按照HTTP傳輸協(xié)議中的post傳輸方式傳送到服務(wù)器。 name：用于設(shè)定表單的名稱。 onreset和onsubmit是主要針對“reset”按鈕和“submit”按鈕來說的，分別設(shè)定了在按下相應(yīng)的按鈕之后要執(zhí)行的子程序。,表單輸入域（控件） 此標(biāo)記在表單中使用頻繁，大部分表單內(nèi)容需要用到此標(biāo)記。其語法如下： ,多行文本輸入標(biāo)簽 參數(shù)： name：文本框名稱；clos：寬度；rows：高度（行數(shù)）；wrap：換行控制，off：不自動換行；hard：自動硬回車換行，換行標(biāo)記