教你從0開始學(xué)習(xí)制作網(wǎng)頁1課件_第1頁
教你從0開始學(xué)習(xí)制作網(wǎng)頁1課件_第2頁
教你從0開始學(xué)習(xí)制作網(wǎng)頁1課件_第3頁
教你從0開始學(xué)習(xí)制作網(wǎng)頁1課件_第4頁
教你從0開始學(xué)習(xí)制作網(wǎng)頁1課件_第5頁
已閱讀5頁，還剩17頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第一章：

HTML入門基礎(chǔ)邱江濤1.1.HTML的基本概念HTML的英文全稱是HyperTextMarkupLanguage，即超文本標(biāo)記語言。它是用于制作網(wǎng)頁的基礎(chǔ)。通過HTML語言可以將文本、表格、圖片等組織成一個(gè)網(wǎng)頁。由HTML語言編寫的文件稱為HTML文件，即以.htm或者.html為擴(kuò)展名的文件（知道文件命名規(guī)則嗎？），也即一篇網(wǎng)頁?？梢允褂萌我獾奈谋揪庉嬈鳎ㄅe例文本編輯器）編寫HTML文件，然后以html和htm的擴(kuò)展名來存儲該文件。編寫好的文件可以在瀏覽器中查看效果（知道怎樣查看嗎？）練習(xí)：使用記事本創(chuàng)建文件，另存文件。2.2.一個(gè)簡單的HTML案例1.在記事本中新建一個(gè)文件。寫入右邊的文字，然后將該文件另存為一個(gè)html文件。雙擊該文件看看效果2.將右邊的代碼拷貝粘貼到一個(gè)html文件中。保存后，雙擊該文件試一試。<HTML><HEAD><TITLE>我的第一個(gè)網(wǎng)頁</TITLE></HEAD><BODY><center><fontsize=5>歡迎來到計(jì)科系！<p>這是我的第一個(gè)網(wǎng)頁</font></center></BODY></HTML>歡迎來到計(jì)科系這是我的第一個(gè)網(wǎng)頁兩個(gè)html文件運(yùn)行后有什么不同的效果？說明了什么？3.3.HTML文件中的標(biāo)記參考上面的例子，可以看到HTML語言中有很多<…>符號，如<html>、<head>。它們稱之為標(biāo)記。標(biāo)記是HTML語言的控制語句，HTML語言的本質(zhì)就是使用這些標(biāo)記對文本、圖片、多媒體等信息組織，形成網(wǎng)頁。我們可以從前面的例子中發(fā)現(xiàn)標(biāo)記有些什么特點(diǎn)？4.3.HTML文件中的標(biāo)記大部分標(biāo)記是成對出現(xiàn)的，一對標(biāo)記中<標(biāo)記名稱>成為開始標(biāo)記，</標(biāo)記名稱>稱為結(jié)束標(biāo)記。在一對標(biāo)記之間的內(nèi)容受標(biāo)記控制。標(biāo)記字母大小寫無關(guān)。由標(biāo)記控制的在瀏覽器中顯示的內(nèi)容稱為HTML元素，例如<h1>hello</h1>,中的hello標(biāo)記可以嵌套使用<HTML><HEAD><TITLE>我的第一個(gè)網(wǎng)頁</TITLE></HEAD><BODY>

<center><fontsize=5>歡迎來到計(jì)科系！<p>這是我的第一個(gè)網(wǎng)頁</font></center></BODY></HTML>5.標(biāo)記可以帶有屬性參數(shù)，格式如下注釋標(biāo)記<!--注釋內(nèi)容-->，注釋內(nèi)容不出現(xiàn)在瀏覽器中顯示。（試一下）<標(biāo)記名稱屬性1=“屬性值1”屬性2=“屬性值2”…>內(nèi)容</標(biāo)記名稱>例如：<fontsize=5>helloworld</font>6.4.HTML文件的結(jié)構(gòu)HTML文件是有一定結(jié)構(gòu)的:HTML文件總是以<html>開始，以</html>結(jié)束。用標(biāo)記<head></head>與<body></body>把文檔分為兩部分。<head></head>之間的是文件頭，文件頭包含關(guān)于文件的說明信息，他們不和文件一起顯示。<body></body>之間是文件要顯示的內(nèi)容。<HTML><HEAD><TITLE>我的第一個(gè)網(wǎng)頁</TITLE></HEAD><BODY> ……</BODY></HTML>文件體文件頭HTML文檔7.實(shí)驗(yàn)：創(chuàng)建自己的第一個(gè)HTML文檔8.第二章：

HTML基本標(biāo)記邱江濤9.1.頭部標(biāo)記--<head>HTML語言的頭元素中，一般需要包括標(biāo)題，元信息等。HTML的文件頭以標(biāo)記<head>開始以</head>結(jié)束。頭部信息不會在網(wǎng)頁上直接顯示。，它用于包含當(dāng)前文檔的相關(guān)信息。文件頭中包含的幾種重要標(biāo)記如下：1.1標(biāo)題標(biāo)記<title>標(biāo)題標(biāo)記以<title>開始，以</title>結(jié)束。標(biāo)記之間的內(nèi)容就是標(biāo)題內(nèi)容，它顯示在瀏覽器的標(biāo)題欄中。試一試：10.1.2.元標(biāo)記--<meta>meta標(biāo)記用于定義頁面信息的名稱關(guān)鍵字等。meta標(biāo)記不是成對出現(xiàn)的。它通過屬性方式來定義頁面信息，例如：meta標(biāo)記中的屬性設(shè)置可以完成不同功能：1.2.1設(shè)置頁面關(guān)鍵字：設(shè)置頁面關(guān)鍵字的屬性是“keyword”，它是為了向搜索引擎說明該網(wǎng)頁的關(guān)鍵詞，從而幫助搜索引擎對該網(wǎng)頁進(jìn)行查找和分類，它可以提高被搜索到的幾率。一般可以設(shè)置多個(gè)關(guān)鍵詞，之間用逗號隔開。見上例。<metaname=“keyword”content=“搜索，java”>11.1.2.2設(shè)置頁面描述設(shè)置頁面描述也是為了便于搜索引擎的查找，它用來描述網(wǎng)頁的主題。其屬性是“description”1.2.3設(shè)置網(wǎng)頁的文字及語言瀏覽器可以根據(jù)此設(shè)置正確的選擇語言。對于內(nèi)容是中文的html文檔，有時(shí)在瀏覽器中顯示亂碼，此時(shí)需要正確設(shè)置網(wǎng)頁的語言<metaname=“description”content=“關(guān)于html學(xué)習(xí)的網(wǎng)頁”><metahttp-equiv=“content-type”content=“text/html;charset=字符集類型”>中文常用的字符集是GBK或gb_231212.1.2.4設(shè)置網(wǎng)頁的定時(shí)跳轉(zhuǎn)經(jīng)常會在網(wǎng)頁上看到一些歡迎信息的界面，在經(jīng)過一段時(shí)間后，會自動跳轉(zhuǎn)到其他頁面。（見例子）語法如下：<metahttp-equiv=“refresh”content=“跳轉(zhuǎn)時(shí)間;url=鏈接地址”>跳轉(zhuǎn)時(shí)間的單位是秒實(shí)驗(yàn)：注：當(dāng)上述自動跳轉(zhuǎn)的語法中，將鏈接地址省略時(shí)，就變成了刷新頁面本身。這在一些不斷更新數(shù)據(jù)的頁面中經(jīng)常會遇到。13.當(dāng)上述自動跳轉(zhuǎn)的語法中，將鏈接地址省略時(shí)，就變成了刷新頁面本身。這在一些不斷更新數(shù)據(jù)的頁面中經(jīng)常會遇到。1.2.5設(shè)置頁面的過渡效果(例子)從一個(gè)網(wǎng)頁切換到另一個(gè)網(wǎng)頁時(shí)，使用過渡效果可以使網(wǎng)頁更生動。通過在meta標(biāo)記的屬性中設(shè)置，就可以實(shí)現(xiàn)。語法如下：<metahttp-equiv=“過渡事件”content=“revealtrans(duration=過渡效果持續(xù)時(shí)間，transition=過渡方式)”>14.其中過渡事件有兩個(gè)選項(xiàng)：enter,進(jìn)入頁面時(shí)出現(xiàn)過渡效果exit,退出頁面時(shí)出現(xiàn)過渡效果過渡效果持續(xù)時(shí)間的單位是秒。過渡方式的編號見下表例子：<metahttp-equiv=“exit”content=“revealtrans(duration=4，transition=12)”>表示該頁面在退出時(shí)出現(xiàn)過渡效果，持續(xù)時(shí)間4秒，過渡效果方式是溶解方式（下頁）15.效果Transition效果Transition盒狀收縮0溶解12

盒狀展開1左右向中部收縮13

圓形收縮2中部向左右展開14

圓形展開3上下向中部收縮15

向上擦除4中部向上下展開16

向下擦除5階梯狀向左下展開17

向左擦除6階梯狀向左上展開18

向右擦除7階梯狀向右下展開19

垂直百葉窗8階梯狀向右上展開20

水平百葉窗9隨機(jī)水平線21

橫向棋盤式10隨機(jī)垂直線22

縱向棋盤式11隨機(jī)2316.實(shí)驗(yàn)大家修改我給的三個(gè)文件（t1.html、t2.html和t3.html）中，關(guān)于過渡效果的設(shè)置。來體會一下過渡效果。賬戶：swufeqjt密碼：swufe201017.2.頁面主體標(biāo)記--body網(wǎng)頁的主體部分以<body>標(biāo)記開始，以</body>標(biāo)記結(jié)束。在網(wǎng)頁的主題標(biāo)記中可以設(shè)置很多屬性，包括頁面的背景設(shè)置、鏈接設(shè)置、文字屬性設(shè)置、邊距等。2.1設(shè)置頁面背景顏色–bgcolor設(shè)置整個(gè)頁面的背景需要用到bgcolor屬性，它使用#加上6位的16進(jìn)制值來表示顏色，其中#FFFFFF為白色，#000000為黑色。#FF0000為紅色，#00FF00為綠色，#0000FF為藍(lán)色。例子：<bodybgcolor=“#3399cc”>實(shí)驗(yàn)：將一個(gè)網(wǎng)頁的背景演示更改為任意顏色18.2.2設(shè)置背景圖片：網(wǎng)頁可以以一些圖片作為背景。這時(shí)需要使用background屬性。語法如下：<bodybackground=“文件鏈接地址”>補(bǔ)充：文件的鏈接地址有相對地址和絕對地址之分。絕對地址：一個(gè)文件所在的目錄的完全路徑+文件名d:\test\html\1.jpg相對地址：是一個(gè)文件相對于當(dāng)前運(yùn)行的這個(gè)文件（例如：我們在創(chuàng)建一個(gè)html文件1.html）所在的位置。假設(shè)當(dāng)前文件在目錄d:\test\html，圖片文件1.jpg與1.html在同一個(gè)文件夾下。那么我們在1.html文件中的body標(biāo)簽可以是<bodybackground=“1.jpg”>如果圖片是在d:\test\html\test\1.jpg文件夾下，那么body標(biāo)簽可以是<bodybackground=“test\1.jpg”>19.2.3設(shè)置文字的顏色對于文字的默認(rèn)顏色可以通過text屬性來設(shè)置。語法：<bodytext=“顏色代碼”>20.2.4設(shè)置鏈接文字屬性–link此部分內(nèi)容在后面講超鏈接時(shí)再講。2.5設(shè)置邊距在網(wǎng)頁的制作過程中，還可以定義頁面的空白，也就是內(nèi)容與瀏覽器邊框之間的距離。其中包括上邊框和左邊框。（見例子）語法：<bodytopmargin=上邊距l(xiāng)eftmargin=左邊距>21.實(shí)驗(yàn)：創(chuàng)建一個(gè)html文檔，要求1.標(biāo)題為“我的第一個(gè)網(wǎng)頁”，網(wǎng)頁的字符集為GBK2.設(shè)置網(wǎng)頁10秒中后自動跳轉(zhuǎn)到財(cái)大主頁。3.以藍(lán)色為網(wǎng)頁背景顏色。4.網(wǎng)頁中寫入下面的文字，設(shè)置網(wǎng)頁

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論