網(wǎng)頁制作基礎(chǔ).ppt

1、/ 56,1,第1章網(wǎng)頁設(shè)計基礎(chǔ)知識,本章主要內(nèi)容 網(wǎng)絡(luò)基礎(chǔ)知識 Dreamweaver 8基礎(chǔ)（重點(diǎn)） HTML語言（重點(diǎn)、難點(diǎn)） 本章理論授課6學(xué)時，上機(jī)操作0學(xué)時。,/ 56,2,1.1網(wǎng)絡(luò)基礎(chǔ)知識 1.1.1Internet基礎(chǔ)知識 1.什么是Internet “Inter”意即交互，“net”意即網(wǎng)絡(luò)。 Internet稱為國際互聯(lián)網(wǎng)絡(luò)。 2Internet的功能 信息的獲取與發(fā)布（WWW） 電子郵件（E-mail） 網(wǎng)上交際（BBS、新聞組、即時通訊、網(wǎng)絡(luò)電話等） 電子商務(wù)與網(wǎng)上事務(wù)處理 Internet的其它應(yīng)用(遠(yuǎn)程教育、遠(yuǎn)程醫(yī)療、遠(yuǎn)程登錄、文件傳輸、 游戲娛樂等 ),/ 56

2、,3,3Internet的發(fā)展 Internet的雛形階段1969年，美國國防部高級研究計劃管理局（ARPA-Advanced Research Projects Agency）資助建立一個名為ARPANET的網(wǎng)絡(luò)，當(dāng)時建立這個網(wǎng)絡(luò)的目的只是為了將美國的幾個軍事及研究用電腦主機(jī)連接起來，普遍認(rèn)為這就是Internet的雛形。 隨著網(wǎng)絡(luò)互連技術(shù)的發(fā)展，將大大小小同構(gòu)和異構(gòu)網(wǎng)絡(luò)連接起來，形成一個網(wǎng)絡(luò)的網(wǎng)絡(luò)，這就是我們現(xiàn)在所看到的Internet（國際互聯(lián)網(wǎng)絡(luò)）。,/ 56,4,4Internet在我國的發(fā)展 1987年至1993年，我國與Internet的連接僅僅是電子函件的轉(zhuǎn)發(fā)連接，并只在少數(shù)高

3、校和科研機(jī)構(gòu)提供電子郵件服務(wù)。 1987年9月，北京計算機(jī)應(yīng)用技術(shù)研究所與德國卡爾斯魯厄大學(xué)（Karlruhe University）合作，建成CANET中國科技網(wǎng)（China Academic Network），它是我國第一個Internet電子郵件服務(wù)結(jié)點(diǎn)，并于1990年10月正式向Internet信息中心InterNIC注冊了我國的頂級域名cn。 1994年3月，Internet管理委員會正式批準(zhǔn)中國進(jìn)入Internet，中國政府也批準(zhǔn)Internet與中國連通。 1994年，我國第一條Internet專線在中國科學(xué)院高能物理研究所正式接通。該所的IHEPNET網(wǎng)絡(luò)(Institute

4、of High Energy Physics Network)邁出了與世界數(shù)以百萬計的計算機(jī)共享信息的第一步，同年8月，在北京召開的高能物理大會第一次通過Internet向全世界發(fā)布信息。,/ 56,5,5Internet的工作原理 互聯(lián)網(wǎng)連接了世界上不同國家與地區(qū)無數(shù)不同硬件、不同操作系統(tǒng)與不同軟件的計算機(jī)，為了保證這些計算機(jī)之間能夠暢通無阻地交換信息，必須擁有統(tǒng)一的通信協(xié)議。在互聯(lián)網(wǎng)上使用TCP/IP作為標(biāo)準(zhǔn)的通信協(xié)議。 TCP/IP協(xié)議所采用的通信方式是分組交換方式。即數(shù)據(jù)在傳輸時分成若干段，每個數(shù)據(jù)段稱為一個數(shù)據(jù)包，TCP/IP協(xié)議的基本傳輸單位是數(shù)據(jù)包，TCP/IP協(xié)議簇包括兩個主要

5、的協(xié)議，即TCP(傳輸控制協(xié)議)和IP(網(wǎng)際協(xié)議)，它們在數(shù)據(jù)傳輸過程中主要完成以下功能：,/ 56,6,首先由TCP協(xié)議把數(shù)據(jù)分成若干數(shù)據(jù)包，給每個數(shù)據(jù)包寫上序號，以便接收端把數(shù)據(jù)還原成原來的格式。 IP協(xié)議給每個數(shù)據(jù)包寫上發(fā)送主機(jī)源地址和接收主機(jī)目的地址，數(shù)據(jù)包就可以在網(wǎng)上傳送了。 這些數(shù)據(jù)包可以通過不同的傳輸途徑(路由)進(jìn)行傳輸，由于路徑不同，加上其它的原因，可能出現(xiàn)順序顛倒、數(shù)據(jù)丟失、數(shù)據(jù)失真甚至重復(fù)的現(xiàn)象。這些問題都由TCP協(xié)議來處理，它具有檢查和處理錯誤的功能，必要時還可以請求發(fā)送端重發(fā)。換句話說，IP協(xié)議負(fù)責(zé)數(shù)據(jù)的傳輸尋址，而TCP協(xié)議保障數(shù)據(jù)的可靠傳輸。,/ 56,7,6Int

6、ranet （內(nèi)聯(lián)網(wǎng)） Intranet也叫企業(yè)內(nèi)部網(wǎng)，是指在一個單位或企業(yè)內(nèi)通過TCP/IP協(xié)議建立的網(wǎng)絡(luò)。 近年來，隨著Internet的普及和公司、企業(yè)商務(wù)應(yīng)用的需求，Intranet內(nèi)聯(lián)網(wǎng)也隨之產(chǎn)生與發(fā)展，并更受網(wǎng)絡(luò)界關(guān)注。 Intranet是基于Internet技術(shù)、TCP/IP和HTTP等通信協(xié)議以及WWW等信息服務(wù)的一種區(qū)域化的信息系統(tǒng)，它通過開放的Internet標(biāo)準(zhǔn)協(xié)議，把多種服務(wù)平臺提供給區(qū)域網(wǎng)絡(luò)上的計算機(jī)。它既給一個公司或企業(yè)提供了將其自身組織成一個完整信息系統(tǒng)的網(wǎng)絡(luò)環(huán)境，也可以根據(jù)需要通過防火墻技術(shù)提供訪問Internet的平臺。,/ 56,8,7幾個與Internet

7、有關(guān)的概念術(shù)語 IP地址 IP地址能唯一地標(biāo)識出主機(jī)在Internet中所處的網(wǎng)絡(luò)位置。 IP地址提供統(tǒng)一的地址格式，即由32個二進(jìn)制位（bit）組成。由于二進(jìn)制使用起來不方便，常用“點(diǎn)分十進(jìn)制”方式來表示。即將IP地址分為4個字節(jié)，每個字節(jié)以十進(jìn)制數(shù)來表示，各個數(shù)之間以句點(diǎn)來分隔。例如，中國人民大學(xué)網(wǎng)站的IP地址是24。,/ 56,9,域名 與IP地址相比，人們更喜歡使用具有一定含義的字符串來標(biāo)識Internet上的計算機(jī)，用戶可以用各種各樣的方式來命名自己的計算機(jī)，這樣就可能在Internet上出現(xiàn)重名。為了避免重名，Internet管理機(jī)構(gòu)采取了在主機(jī)名后加上后

8、綴名的方法，這個后綴名稱為域名(domain)，用來標(biāo)識主機(jī)的區(qū)域位置。 例如：中www為主機(jī)名，由服務(wù)器管理員命名，為域名，由服務(wù)器所屬單位向域名管理機(jī)構(gòu)申請使用。域名系統(tǒng)需要通過域名服務(wù)器（DNS）的解析服務(wù)轉(zhuǎn)換為實(shí)際的IP地址，才能實(shí)現(xiàn)最終的訪問。,/ 56,10,URL URL（Uniform Resource Locator：統(tǒng)一資源定位器）是WWW頁(資源對象)的地址，它的地址格式為： 資源類型:/域名:端口號/路徑 【資源類型】:指出WWW客戶程序用來操作的工具。 如: “http:/”表示W(wǎng)WW服務(wù)器，“ftp:/”表示FTP服務(wù)器， “new:”表示新聞組(Newgroup)

9、等。 【域名】:指出WWW頁所在的服務(wù)器域名。 【端口號】:對某些資源的訪問，有時需給出服務(wù)器提供的端口號。 【路徑】:指明服務(wù)器上某資源的位置（其格式與DOS系統(tǒng)中的格式一樣，通常是目錄/子目錄/文件名這樣的樹型結(jié)構(gòu)）。 例如: 就是一個典型的URL地址。,/ 56,11,112 WWW簡介 WWW 是Internet多媒體信息查詢工具，是 Internet 上近年才發(fā)展起來的服務(wù)，也是發(fā)展最快和目前使用最廣泛的服務(wù)。正是因為有了WWW工具，才使得近年來Internet迅速發(fā)展，用戶數(shù)飛速增長。 1什么是WWW WWW是World Wide Web（環(huán)球信息網(wǎng)）的縮寫，也可以簡稱為Web，中

10、文名字為“萬維網(wǎng)”。通過萬維網(wǎng)，人們只要通過簡單的方法，就可以迅速地獲得世界范圍豐富的信息資料。 由于用戶在通過Web瀏覽器訪問信息資源的過程中，無需關(guān)心一些技術(shù)細(xì)節(jié)，且界面友好，因而Web服務(wù)在Internet上一推出就受到了熱烈的歡迎，得到迅速發(fā)展。,/ 56,12,2WWW的工作原理 WWW中的信息資源主要由一篇篇的Web文檔(Web頁)為基本元素構(gòu)成。這些Web頁采用超文本（Hyper Text）的格式，即可以含有指向其它Web頁或其本身內(nèi)部特定位置的超級鏈接。 可以將鏈接理解為指向其它Web頁的“指針”。鏈接使得Web頁交織為網(wǎng)狀，使Internet成為一個巨大的信息網(wǎng)。 當(dāng)用戶從W

11、WW服務(wù)器取到一個文件后，要能在自己的屏幕上正確無誤地顯示出來。由于將文件放入WWW服務(wù)器的人并不知道將來閱讀這個文件的人到底會使用哪一種類型的計算機(jī)或終端，要保證每個人在屏幕上都能讀到正確顯示的文件，必須用某種各類型的計算機(jī)都能“看懂”的方式來描述文件，于是就產(chǎn)生了HTML超文本標(biāo)記語言。,/ 56,13,3WWW的核心HTTP協(xié)議 WWW服務(wù)器使用的主要協(xié)議是HTTP協(xié)議，即超文本傳輸協(xié)議。 （1）HTTP協(xié)議簡介 HTTP是一個屬于應(yīng)用層的面向?qū)ο蟮膮f(xié)議，適用于分布式超媒體信息系統(tǒng)。它于1990年提出，經(jīng)過幾年的使用與發(fā)展，得到不斷地完善和擴(kuò)展。 （2）HTTP協(xié)議的運(yùn)作方式,/ 56,

12、14,113 什么是ASP和ASP.NET ASP(Active Server Page)是由微軟提出的一種動態(tài)網(wǎng)頁構(gòu)架。具體來看它是一種包含了使用VBScript或JavaScript腳本程序代碼的網(wǎng)頁。當(dāng)瀏覽器瀏覽ASP網(wǎng)頁時，Web服務(wù)器就會根據(jù)請求生成相應(yīng)的HTML代碼然后再返回給瀏覽器，這樣瀏覽器端看到的就是動態(tài)生成的網(wǎng)頁。ASP可以比較簡單地與數(shù)據(jù)庫和其它程序進(jìn)行交互。在了解了VBScript或JavaScript的基本語法后，只需要清楚各個組件的用途、屬性、方法，就可以輕松編寫出自己的ASP系統(tǒng)。ASP的網(wǎng)頁文件的擴(kuò)展名是“.ASP”。,/ 56,15,ASP.Net和ASP的區(qū)

13、別不僅在于功能的增強(qiáng)，更在于編程思維的轉(zhuǎn)換。ASP使用VBScript及JavaScript這樣的腳本語言混合html來編程，這些腳本語言屬于面向結(jié)構(gòu)的編程語言，而非面向?qū)ο?，會產(chǎn)生以下問題： 1. 代碼邏輯混亂，難于管理：ASP是腳本語言混合html編程，所以很難看清代碼的邏輯關(guān)系，且隨著程序的復(fù)雜性增加，使得代碼的管理十分困難，從而造成出錯或這樣那樣的問題。 2. 代碼的可重用性差：由于是面向結(jié)構(gòu)的編程方式，并且混合html，所以可能頁面原型修改一點(diǎn)，整個程序都需要修改，無法實(shí)現(xiàn)代碼重用。,/ 56,16,而ASP.Net則擺脫了ASP使用腳本語言來編程的缺點(diǎn)，理論上可以使用任何編程語言包

14、括C#,VB,JavaScript等等。ASP.Net支持面向?qū)ο蟮囊磺刑匦裕热绶庋b性、繼承性、多態(tài)性等等，這就解決了剛才談到的ASP的弱點(diǎn)。 封裝性使得代碼邏輯清晰，易于管理，并且應(yīng)用到ASP.Net上就可以使業(yè)務(wù)邏輯和Html頁面分離，這樣無論頁面原型如何改變，業(yè)務(wù)邏輯代碼都不做任何改動； 繼承性和多態(tài)性使得代碼的可重用性大大提高，可以通過繼承已有的對象最大限度保護(hù)以前的投資。,/ 56,17,12 Dreamweaver 8 入門 (1學(xué)時) 121 Dreamweaver 8 簡介 Dreamweaver8是一款專業(yè)的網(wǎng)頁編輯器，主要特點(diǎn)如下: 能對Web站點(diǎn)、Web頁和Web應(yīng)用程

15、序進(jìn)行集成的設(shè)計開發(fā) 能快速創(chuàng)建頁面而無需編寫代碼(可視化能力強(qiáng)) 能查看和管理站點(diǎn)元素或資源 能與Fireworks或Flash交換信息并優(yōu)化工作流程 可導(dǎo)入 HTML文檔而不需重新設(shè)置代碼格式。 可使用服務(wù)器技術(shù)（如 ASP.NET、ASP、JSP 和 PHP等）生成由動態(tài)數(shù)據(jù)庫支持的 Web 應(yīng)用程序。 可以創(chuàng)建自己的對象和命令，修改快捷鍵，編寫JavaScript 代碼來擴(kuò)展自身的功能。,/ 56,18,122 了解Dreamweaver 8工作區(qū) 要方便使用Dreamweaver 8就應(yīng)該對它的工作環(huán)境有全面認(rèn)識。應(yīng)了解 Dreamweaver 工作區(qū)的基本概念，了解如何選擇選項、如

16、何使用檢查器和面板以及如何設(shè)置適合您工作風(fēng)格的參數(shù)等。 Dreamweaver 工作區(qū)使您可以查看文檔和對象屬性。工作區(qū)還將許多常用操作放置于工具欄中，使您可以快速更改文檔。 1. 工作區(qū)布局 Windows下，Dreamweaver 提供了一個將全部元素置于一個窗口中的集成布局。在集成的工作區(qū)中，全部窗口和面板都被集成到一個更大的應(yīng)用程序窗口中。,/ 56,19,Dreamweaver 8工作區(qū)布局：,視圖選擇,/ 56,20,123 創(chuàng)建一個簡單網(wǎng)頁 下面介紹創(chuàng)建一個簡單網(wǎng)頁的步驟。 (1) 啟動Dreamweaver，選擇【文件】菜單/【新建】，彈出【新建文檔】對話框，如下圖示。 (2)

17、 在“類別”列表中，選擇【基本頁】，在“基本頁”列表框內(nèi)選擇【HTML】，再點(diǎn) 按鈕，如下圖所示。然后在文檔窗口中對新頁面進(jìn)行編輯。,/ 56,21,1.3HTML語言 1.3.1HTML概述 1. 簡介 HTML即超文本標(biāo)記語言。所謂標(biāo)記語言(Markup Language),是用標(biāo)記來表示文本或其他媒體對象(如圖像、聲音等)，從而制作成超文本文件(網(wǎng)頁)。 標(biāo)記是描述HTML文件結(jié)構(gòu)的標(biāo)識符。它規(guī)定了HTML文件的邏輯結(jié)構(gòu)，并且控制網(wǎng)頁的顯示方式。HTML的標(biāo)記不區(qū)分大小寫，例如和等價。 （1）標(biāo)記的功能 HTML標(biāo)記的功能是，標(biāo)記文件結(jié)構(gòu)，設(shè)定文字、圖像、表格、表單等在瀏覽器上的顯示風(fēng)格

18、和位置，嵌入腳本，實(shí)現(xiàn)動態(tài)網(wǎng)頁及多媒體等。 （2）標(biāo)記的構(gòu)成 標(biāo)記是由符號、和括在其中的命令字符串組成。標(biāo)記有雙標(biāo)記和單標(biāo)記兩種。 雙標(biāo)記有開始標(biāo)記和結(jié)束標(biāo)記，且須成對出現(xiàn)。例如，、是文件的開始標(biāo)記和結(jié)束標(biāo)記；、是網(wǎng)頁內(nèi)容的開始和結(jié)束標(biāo)記。單標(biāo)記只有開始標(biāo)記而沒有結(jié)束標(biāo)記。例如，標(biāo)尺線標(biāo)記等。另外，有的標(biāo)記例如（分段標(biāo)記）可以寫為雙標(biāo)記、，也可以寫為單標(biāo)記。,/ 56,22,（3）標(biāo)記的表示方法 HTML的標(biāo)記有3種表示方法： a）文本 b）文本 c） 第3種表示方法（單標(biāo)記）僅用于一些特殊的標(biāo)記。例如，表示強(qiáng)制換行，它沒有與之對應(yīng)的。 （4）標(biāo)記的屬性 屬性用來進(jìn)一步說明標(biāo)記，放在開始標(biāo)記內(nèi)

19、。例如顏色、對齊方式、高度和寬度等。各屬性間以空格分隔。標(biāo)記的常用屬性如下： a）對齊屬性align align=left 左對齊（默認(rèn)） align=center居中對齊 align=right 右對齊 align=justify 兩端對齊,/ 56,23,b)外觀屬性 width=像素值或百分比 對象寬度 height=像素值或百分比對象高度 c)色彩屬性 color=#RRGGBB 前景色 bgcolor=#RRGGBB背景色 其中，顏色值可用英文顏色名或十六進(jìn)制（紅綠藍(lán)）的顏色值，如下表所示。,/ 56,24,2. HTML文件結(jié)構(gòu) HTML文件是以版本聲明開始，主要由頭部（HEAD）

20、和主體（BODY）兩部分組成。頭部用于文件命名及文件的相關(guān)說明；主體（BODY）定義瀏覽器上頁面的顯示內(nèi)容。HTML文件的構(gòu)成骨架如下表所示。,/ 56,25,（1）文件頭部 在文件標(biāo)記之后，用和定義頭部。 頭部中又可以包括，等標(biāo)記。 用來定義網(wǎng)頁的標(biāo)題，在瀏覽器最上方的標(biāo)題欄中顯示。網(wǎng)頁的標(biāo)題應(yīng)盡量使用直接、概括性的文字。標(biāo)題一般用來作為搜索引擎搜尋網(wǎng)頁的線索。如果無標(biāo)題，瀏覽器用文件名或Untitled(無標(biāo)題)等字樣代替。 基點(diǎn)標(biāo)記指定了HTML文檔的基地址，用來定義其后所有鏈接的起點(diǎn)。對文檔中引用的其他文件的表示形式就可以從這個基點(diǎn)開始。 說明一些與文檔有關(guān)的信息，如文檔的作者、關(guān)鍵內(nèi)

21、容、所用語言等。它會被搜索引擎等程序使用。 用來連接外部文件。,/ 56,26,（2）文件主體 文件主體位于頭部之后，以開始，以結(jié)束。它用來定義網(wǎng)頁上顯示的內(nèi)容和顯示格式，是整個網(wǎng)頁的核心。 在和之間，可以包含，等標(biāo)記。 標(biāo)記中還可以有以下常用屬性： background 設(shè)置網(wǎng)頁背景圖案。 bgcolor 設(shè)置網(wǎng)頁背景色。默認(rèn)為白色。 text 設(shè)置文本顏色。默認(rèn)為黑色。 link 設(shè)置尚未被訪問過的超文本鏈接的顏色，默認(rèn)為藍(lán)色。 vlink 設(shè)置已被訪問過的超文本鏈接的顏色，默認(rèn)為紫色。 例如: 將背景圖像設(shè)為photo6.gif，背景色設(shè)為綠色。 （3）注釋 HTML使用“”表示注釋部分

22、，注釋可以有多行，注釋的內(nèi)容不會被執(zhí)行。,/ 56,27,1.3.2 網(wǎng)頁中的文本使用 網(wǎng)頁中文本的文字風(fēng)格和布局設(shè)計在網(wǎng)頁設(shè)計中非常重要。例如，標(biāo)題字的大小，是否居中及各級標(biāo)題的設(shè)置，文字字體及顏色的設(shè)定，文章分段及段落的風(fēng)格，頁面的整體布局等，都是在網(wǎng)頁設(shè)計中必須考慮的問題。 1. 標(biāo)題 標(biāo)題是一篇文章或一段文本的題目，是以某種方式被加強(qiáng)、被突出的詞組或短語。在網(wǎng)頁設(shè)計中，使用標(biāo)記設(shè)定標(biāo)題，格式為： 標(biāo)題 是一個雙標(biāo)記。標(biāo)記中的 n 值可取16的整數(shù)，取1時文字最大，取6時最小，默認(rèn)為。這樣，共有6級標(biāo)題可供使用。,/ 56,28,【例1.1】標(biāo)記的應(yīng)用(運(yùn)行結(jié)果如下圖所示) 軟件學(xué)院教授

23、簡介 定義一條標(biāo)尺線,線粗為4 張光明教授 張光明教授，男，1940年10月誕生于河北省石家莊市。 張光明教授研究方向 張光明教授研究成果 注： 為空格符。,/ 56,29,2. 文字大小和顏色 （1）使用標(biāo)記文字大小和顏色 使用標(biāo)記的size屬性可以設(shè)定一段文本的文字大小。格式為： 文本 size的取值范圍為17，中n取值范圍為16。字的大小兩者差不多。但size取7時最大，而中n取1時最大。 標(biāo)記的color屬性設(shè)定一段文本的文字顏色。格式為： 文本 例如，文字顏色為白色 或 文字顏色為紅色 （2）使用標(biāo)記的text屬性設(shè)置整個文檔的文字顏色 標(biāo)記中的text屬性可用來設(shè)定整個網(wǎng)頁

24、的文字顏色，格式為： 例如，,/ 56,30,3換行和分段 （1）強(qiáng)制換行 強(qiáng)制改行使用標(biāo)記，位于行的末尾，無結(jié)束標(biāo)記。 （2）段落 段落標(biāo)記用于分段，位于前段的末尾，并使前段與后段之間加一行空白。段落標(biāo)記可以省略結(jié)束標(biāo)記。 （3）標(biāo)尺線 標(biāo)尺線標(biāo)記在前、后兩個段落之間插入一條標(biāo)尺線。標(biāo)記中的width屬性用來控制標(biāo)尺線的長度。 例如， 線長為50像素寬 線長為屏幕寬度的50% 標(biāo)記的size屬性控制標(biāo)尺線的粗細(xì)；noshade屬性將標(biāo)尺線設(shè)置為黑色；align屬性指定標(biāo)尺線的位置。例如： 右對齊 左對齊 居中（默認(rèn)） 的color屬性控制標(biāo)尺線的顏色。如,/ 56,31,4文本(或圖像)的布

25、局 （1）居中對齊( 或標(biāo)記中使用align屬性，或者使用標(biāo)記 ) 文本或圖像 或 文本或圖像 （n=1,2,3,4,5,6） 或 文本或圖像 （2）右對齊( 或標(biāo)記中使用align屬性 ) 文本或圖像 或 文本或圖像 （3）左對齊( 或標(biāo)記中使用align屬性 ) 文本或圖像 或 文本或圖像 （4）使用標(biāo)記 要在許多段落中設(shè)置對齊方式時，常使用（層）標(biāo)記。 文本或圖像 居中 文本或圖像 左對齊 文本或圖像 右對齊,/ 56,32,1.3.3 網(wǎng)頁中的圖像使用 1. 網(wǎng)頁中加入圖像，使用標(biāo)記，src屬性指示圖像文件，格式如下： 其中，“圖像文件名”可以用絕對路徑也可以用相對路徑，文件可以是gi

26、f、jpg或png類型。 “圖像文本性說明”用在不能顯示圖像的瀏覽器，或瀏覽器顯示圖像時間太長時先顯示此文字內(nèi)容。 “xxx.htm”指明關(guān)于圖的詳細(xì)說明以補(bǔ)充alt屬性的簡單說明。 2.圖像的尺寸設(shè)定，使用標(biāo)記的width和height屬性設(shè)定，格式為： 其中，x和y可以是像素值，也可以取百分?jǐn)?shù)。例如， ,/ 56,33,3.圖像和文本布局 與文本布局一樣，圖文混排時，圖文在垂直方向的對齊及相互間的左右位 置關(guān)系也使用align屬性。格式為: 文本文本 其中，位置參數(shù)可以是：top(頂對齊)、middle(中央對齊)、bottom(底邊 對齊)、left(圖像在文本左邊)和right(圖像在

27、文本右邊)。 【例1.2】圖像與文本混排。 圖像和文本混排 文字與圖像垂直方向中央對齊； 文字與圖像垂直方向底部對齊； 文字與圖像垂直方向頂部對齊；,/ 56,34,1.3.4 網(wǎng)頁中的列表使用 在網(wǎng)頁中使用列表，可以清楚地看到定義順序、信息排序及信息的相對重要性。HTML提供了豐富的列表元素，用于在HTML文檔中建立列表。 列表中并列的信息(數(shù)據(jù))稱為項。項前可以添加符號或序號，也可以各項并列而不加任何記號。帶序號的列表稱為有序列表，帶符號的列表稱為無序列表，各項并列而不加任何記號的列表稱為定義列表。 1.無序列表 建立無序列表可以使用標(biāo)記和項目標(biāo)記，格式為 項目 項目 項目標(biāo)記是一個單標(biāo)記

28、。 【例1.3】設(shè)定無序列表。 WWW Browser HTML Home Page 注：無序列表可以嵌套,/ 56,35,2有序列表 （1）創(chuàng)建有序列表 在應(yīng)用中，人們更多地使用帶序號的列表，以便清楚地表達(dá)并列信息的順序。使用標(biāo)記，可以實(shí)現(xiàn)有序列表。格式為 項目1 項目2 【例1.4】有序列表。 WWW Browser HTML Home Page ,/ 56,36,（2）有序列表序號的種類 有序列表序號可以設(shè)定，在或標(biāo)記內(nèi)使用type屬性可以設(shè)定5種序號，即阿拉伯?dāng)?shù)字(1)、大小寫英文字母(A)和(a)、大小寫羅馬數(shù)字(I)和(i)。 格式為 或 說明： 省略 type 屬性時自動設(shè)定為阿

29、拉伯?dāng)?shù)字。 的作用范圍為整個列表。 的作用范圍是當(dāng)前項(行)。 （3）設(shè)定起始序號 有序列表的序號可以從任意數(shù)字開始。方法是，在標(biāo)記內(nèi)使用start屬性或在標(biāo)記內(nèi)加入value屬性。格式為 或 其中，x為任意整數(shù)。 注意，的作用域為當(dāng)前標(biāo)記，的作用域為從當(dāng)前項開始直到當(dāng)前的標(biāo)記為止的各項。,/ 56,37,【例1.5】設(shè)定序號的種類。 大字 HTML入門 WWW Browser HTML 網(wǎng)頁 HTML案例教程 斜體 WWW網(wǎng)頁 網(wǎng)頁文本的布局 在網(wǎng)頁中插入圖像 列表 表格 ,/ 56,38,1.3.5 超文本鏈接 瀏覽Web頁時，我們能快速從一個Web網(wǎng)頁跳到另一個相關(guān)的Web網(wǎng)頁，就是 在

30、這些文件之間建立了超文本鏈接。 1.創(chuàng)建網(wǎng)頁間的鏈接 創(chuàng)建鏈接前，先準(zhǔn)備好鏈接資源，即制作好目標(biāo)文檔，并存放在相應(yīng)的位 置，有確切的URL。鏈接資源包括HTML文件、圖像文件、聲音文件及視頻文件 等。在網(wǎng)頁上建立的超文本鏈接也稱為錨點(diǎn)(anchor)，由標(biāo)記定義。 錨點(diǎn)用于定義HTML文檔段落間或文件間的超級鏈接，同時也定義了包含超 文本鏈接目標(biāo)的命名位置。 建立超文本鏈接語法格式為: 文本或圖像 注意，必須使用結(jié)束標(biāo)記。格式中，href意為超文本引用，URL是一個 有效的鏈接資源的地址，“文本或圖像”是在瀏覽器上顯示的熱點(diǎn)區(qū)域。 格式中Href屬性定義一個URL，作為有效的鏈接資源的地址。,

31、/ 56,39,注意，依鏈接資源存放位置不同，鏈接可分為全局鏈接和局部鏈接。如果資源文件存放在服務(wù)器自己的目錄中，稱為局部鏈接；與本服務(wù)器以外文件的鏈接稱全局鏈接。在全局鏈接中，http寫入的URL稱為絕對路徑。例如， 熱點(diǎn)文本 文件之間的局部鏈接（站內(nèi)鏈接）有下面種情況： 鏈接同一目錄內(nèi)的文件。 鏈接下一級目錄內(nèi)的文件。 鏈接上一級目錄內(nèi)的文件。 鏈接平級目錄內(nèi)的文件。 鏈接同一個目錄內(nèi)的文件時僅寫目標(biāo)文件名即可，不用帶路徑： 熱點(diǎn)文本 創(chuàng)建文件間的鏈接的步驟如下： (1)編寫網(wǎng)頁并在網(wǎng)頁中設(shè)定熱點(diǎn)區(qū)域； (2)編寫其他欲鏈接的網(wǎng)頁文件，即建立好目標(biāo)資源； (3)在網(wǎng)頁文件中，使用熱點(diǎn)文本

32、建立到目標(biāo)網(wǎng)頁的鏈接； (4)在被鏈接的網(wǎng)頁文件中，可以使用返回 建立到源網(wǎng)頁的鏈接。,/ 56,40,【例1.6】鏈接同一目錄內(nèi)的文件。 網(wǎng)頁文件2-8.htm 上一頁Internet是當(dāng)前世界上最大的計算機(jī)網(wǎng)絡(luò)。Internet是冷戰(zhàn)時代美國軍方開發(fā)使用的網(wǎng)絡(luò)，而后作為學(xué)術(shù)間使用，近年來Internet迅速拓展，成為擁有一億多用戶的世界性網(wǎng)絡(luò)。 返回 ,/ 56,41,文件間的鏈接,/ 56,42,注：標(biāo)記用來控制文字的移動,例如: 文字在移動 標(biāo)記的主要屬性有: direction: 控制移動方向,可取left, right, up, down四個值 behavior: 移動方式,可取s

33、croll(循環(huán)移動), slide(只走一圈), alternate(來回移動) loop: 循環(huán)次數(shù),不輸入表示無限次循環(huán) scrollamount: 移動快慢,數(shù)值越大越快 scrolldelay: 每移動一步之后的延時,單位是毫秒 height,width: 移動區(qū)域的高和寬,單位像素 bgcolor: 移動區(qū)域的背景色 實(shí)例: 滾動文字,/ 56,43,2.圖像鏈接 圖像鏈接是將圖像設(shè)定為熱區(qū)，單擊圖像則轉(zhuǎn)移到被鏈接的文本或 其他文件。 建立圖像鏈接的格式為： 例如， 單擊圖像book1.gif轉(zhuǎn)移到網(wǎng)頁ddd1.htm。,/ 56,44,1.3.6 表格 將文本或圖像按一定的行、列

34、規(guī)則進(jìn)行排列稱為表格。在網(wǎng)頁中使用表格，可以使一些數(shù)據(jù)信息更容易瀏覽。HTML有極強(qiáng)的表格能力，可以把文字、圖像、聲音甚至視頻組織在表格中，也可以使用表格實(shí)現(xiàn)對文本、圖像或其他對象的頁面布局。 1. 創(chuàng)建表格 網(wǎng)頁中建立一個表格的基本格式為 表項1表項2表項n 表項1表項2表項n （1）標(biāo)記 使用標(biāo)記和定義表格，表內(nèi)容放在開始標(biāo)記和結(jié)束標(biāo)記之間。定義表格內(nèi)容的標(biāo)記有行定義標(biāo)記和列定義標(biāo)記。,/ 56,45,標(biāo)記內(nèi)常用以下屬性定義表格的外觀風(fēng)格: border=”n” 定義表格邊框的粗細(xì)，n取整數(shù)，單位為像素。 bordercolor=”顏色值” 定義表格邊框的顏色。 summary=”簡要說明

35、” 對表格的格式和內(nèi)容簡要說明。 bgcolor 設(shè)定表格的背景色。 background 設(shè)定表格的背景圖像。 width=“n | n%” 設(shè)定表格的寬度。 height=”n” 設(shè)定表格的高度。 align=”left | right | center” 定義表格的水平對齊方式。 cellpadding 調(diào)節(jié)表單元線和數(shù)據(jù)之間的距離。 cellspacing 調(diào)節(jié)表單元與邊框間的空白。 rules=”參數(shù)” 設(shè)定有無表格線。 align=”left | right | all” 設(shè)定表格與文本的相互位置。,/ 56,46,（2）標(biāo)記 表示表格的一行開始，可以是單標(biāo)記，也可以是雙標(biāo)記。標(biāo)記

36、的屬性主要如下： bgcolor 設(shè)定表格一行的背景色。 align=”left | right | center” 定義表格一行的表數(shù)據(jù)項的水平對齊方式。 （3）標(biāo)記 為列定義標(biāo)記，表格的數(shù)據(jù)寫在列和之間。標(biāo)記的屬性主要如下： bgcolor 設(shè)定背景色。 align=”left|right|center” 定義表數(shù)據(jù)項水平對齊方式。 bodercolordark=”顏色值” 定義表格單元邊框的顏色。 width=“n | n%” 設(shè)定表格單元的寬度。 height=”n” 設(shè)定表格單元的高度。,/ 56,47,【例1.7】建立表格。 序號ID姓名性別年齡業(yè)務(wù)專長技術(shù)職稱評聘年月 101李大

37、力男55計算機(jī)網(wǎng)絡(luò)教授1990.1 102張芝蘭女45計算機(jī)硬件系統(tǒng)教授1996.11 ,說明信息,/ 56,48,2.表題 表題是表格的內(nèi)容聲明。HTML使用標(biāo)記給表格添加表題，并使用align屬性定義表題的位置。格式為 表題 其屬性值如下： top - 表題放在表的上部 bottom - 表題放在表的下部 left - 表題放在表上部的左側(cè) right - 表題放在表上部的右側(cè),/ 56,49,3.表頭 使用標(biāo)記可以在表的第1行或第1列加表頭。表頭寫在開始標(biāo)記和結(jié)束標(biāo)記之間，并用醒目的粗體字顯示。 在表的第1行加表頭的格式為 表頭1表頭2表頭3 表項1表項2表項3 表項4表項5表項6 在表的第1列加表頭的格式為 表頭1表項1表項2 表頭2表項3表項4 表頭3表項5表項6 ,/ 56,50,4.表格邊框 通過給表格加上有立體感的表邊框，調(diào)節(jié)表元素邊線和元素內(nèi)的數(shù)據(jù)之間 的空白間距、變化表格元素邊線的寬度，可以把表格制作得更生動、