網(wǎng)頁設(shè)計 Dreamweaver教案第三章

1、第三章 HTML語言,本章要點,HTML結(jié)構(gòu) 文本格式標(biāo)記 超鏈接標(biāo)記 表格標(biāo)記 表單標(biāo)記,HTML文件是標(biāo)記的ASCII文件，它是由標(biāo)記元素,字母和文字組成的純文本文件.它可以用任何一種文字編輯器編輯,如記事本,寫字板和Word等，并以擴展名為.htm,.html的文件形式存儲。 HTML標(biāo)記一般用一對尖括號”括起來，以示區(qū)別.,可以使用HTML語言直接編寫網(wǎng)頁文件并在瀏覽器中瀏覽。使用任何網(wǎng)頁編輯軟件制作網(wǎng)頁文件,都以HTML文件的形式存儲.任何一種網(wǎng)頁制作軟件都有它的優(yōu)點和特色,也會存在不足之處,可以使用HTML語言來進行修改和完善.,3.1 HTML文件結(jié)構(gòu),HTML的標(biāo)記元素有下列三

2、種表示方法: 文件或超文本 文本或超文本 如: 分段標(biāo)記 標(biāo)題標(biāo)記 字體標(biāo)記,3.1.1 HTML文件結(jié)構(gòu),下面是一個簡單的網(wǎng)頁的HTML文件的結(jié)構(gòu) 一個簡單的網(wǎng)頁 我的個人網(wǎng)頁 ,- HTML文件開始標(biāo)記 -文件頭開始標(biāo)記,文件頭 -文件頭結(jié)束標(biāo)記 -文件體開始標(biāo)記,文件體, HTML文件的正文寫在這里 -文件體結(jié)束標(biāo)記 - HTML文件結(jié)束標(biāo)記,3.1.2標(biāo)題標(biāo)記,TITLE元素是文件頭中唯一一個必須出現(xiàn)的元素,它也只能出現(xiàn)在文件頭中。 格式:文件題目 功能:設(shè)置在瀏覽器標(biāo)題欄中顯示的文件標(biāo)題 例: 我的個人主頁 說明:在瀏覽器標(biāo)題欄中顯示”我的個人主頁”.,3.1.3主體標(biāo)記,格式: 頁

3、面元素 功能:設(shè)置文字色彩和鏈接對象色彩，設(shè)置頁面的背景色彩和圖象(見chap3_1.htm).,說明: Bgcolor-背景色彩 Background-背景圖象 Text-可鏈接文字 Link-可鏈接文字的色彩 Alink-正被單擊的可鏈接文字的色彩 Vlink-已經(jīng)點擊過的可鏈接文字的色彩 #=rrggbb 色彩是用十六進制的紅-綠-藍值來表示.十六進制的數(shù)碼有:0.1.2.3.4.5.6.7.8.9.A.B.C.D.E.F,設(shè)置背景圖象的格式: 其中“image-url”是背景圖象的文件地址. 例如: 背景用圖片平鋪,文字用黃色顯示 例如: 大紅背景色,3.2文本格式標(biāo)記,3.2.1標(biāo)題

4、字體標(biāo)記 (見chap3_2.htm) 功能:標(biāo)題元素有六種,分別為h1,h2.h6,用于表示文章中的各種題目。標(biāo)題號越小,字體越大.一般情況下,一律黑體. 說明:hn可以有對齊屬性;align=#,#分別表示left標(biāo)題居左,center標(biāo)題居中,right標(biāo)題居右.-這些標(biāo)記顯示黑體字. -這些標(biāo)記自動插入一個空行,不必用標(biāo)記再加空行.因此在一行中無法使用不同大小的字體. 例如:手機價格表,3.2.2字體大小標(biāo)記,格式: . #1=1,2,3,4,5,6,7 or +#,-# 功能:設(shè)置字體的大小和顏色(見chap3_3.htm) 說明:HTML有7種字號,1號最小，7號最大,默認(rèn)字號為3

5、. 字體顏色:字體顏色用指定#可以是6位十六進制數(shù),分別指定紅，綠，藍的值,也可以是以上16種顏色之一. 例如: 今天天氣真好!,3.2.3字體風(fēng)格標(biāo)記,格式: 功能:設(shè)置字體的風(fēng)格(見chap3_4.htm). 說明:-黑體,-斜體,-下劃線 例如: 今天天氣真好! 今天天氣真好! 今天天氣真好!,3.2.4段落標(biāo)記與換行標(biāo)記,1.段落標(biāo)記 格式: 功能:換行并空一行(見chap3_5.htm) 2.換行標(biāo)記 格式: 功能:僅換行不空行,3.2.5列表標(biāo)記(list),列表用于列舉事實,常用的列表有兩種格式,即無序列表,有序列表. 1.無序列表(ul) 格式:, 功能:創(chuàng)建一個無序的列表(見

6、chap3_6.htm). 說明:無序列表用開始，每一個列表條目用引導(dǎo),最后是,注意列表條目不需要結(jié)尾鏈接簽.輸出時每一列表條目縮進,并且以黑點標(biāo)示. 例如: today tomorrow ,2.有序列表 格式:, 功能:創(chuàng)建一個有序的列表(見chap3_7.htm). 說明:和無序列表相比,只是在輸出列表條目用數(shù)字標(biāo)示,下面是一個例子及其輸出. 例如: today tomorrow ,3.2.6水平線標(biāo)記和分行標(biāo)記,1.水平線標(biāo)記 格式: 功能:插入一條水平線(見chap3_8.htm). 說明:size=# width=# color=# align=#,#代表的數(shù)值分別表示水平線的寬度，

7、長度，顏色和對齊方式; width=#代表水平線的長寬,可以指定絕對線長(單位像素),也可以指定橫線長度占窗口寬度的百分比.,例如:, color=# -水平線的顏色 align=# -水平線的位置. 例如:插入紅色的水平線,線長占80%,線寬為8個像素點. ,2.分行標(biāo)記 格式: 功能: 表示在此處分行. 3.禁止分行標(biāo)記 格式: 功能:禁止分行，其中的內(nèi)容在一行內(nèi)顯示不了，則超出部分被裁掉.,3.2.7轉(zhuǎn)義字符與特殊字符,HTML中和顯示為若直接寫為則被認(rèn)為是一個鏈接簽.,3.3圖象標(biāo)記,3.3.1圖象的基本格式 格式: 功能:插入圖象(見chap3_9.htm). 說明: image-u

8、rl是圖象文件的url,alt屬性表示當(dāng)鼠標(biāo)指向圖形在圖象位置顯示的文字. 例如: ,格式: #=top,middle,bottom 功能:設(shè)置圖象與文本的對齊方式 說明:圖象在窗口中會占據(jù)一塊空間,在圖象的左右可能會有空白,不加說明時,瀏覽器將隨后的文本顯示在這些空白中，顯示的位置由align屬性指定. 用align=left,right時,圖象是一個浮動圖象，比如align=left,圖象必須挨著左邊框,它把原來占據(jù)該塊空白的文本”擠走”,或擠到右邊，或擠到它上下. 例如:My face! My face! My face!,3.3.2圖象與文本的間距,格式: 功能:設(shè)置圖象與文本之間的間

9、距 說明:文本與圖象的間距用vspace=# hspace=#,#用整數(shù)表示，單位是像素,前者指定縱向間距,后者指向橫向間距. 例如: My face! It is always Smiling Hahaha,3.3.3圖象的邊框,格式: 功能:設(shè)置圖象的邊框線的粗細 說明:當(dāng)#=0時無邊框 例如:,3.4超鏈接標(biāo)記,一個超文本鏈接標(biāo)記由兩部分組成.一部分是被指向的目標(biāo)，它可以是同一文件的另一部分,也可以是世界另一端的一個文件,還可以是動畫或音樂;另一部分是指向目標(biāo)的鏈接指針.,3.4.1鏈接指針,1.字符串作為鏈接指針 格式:字符串 (見chap3_10.htm). 功能:在HTML文件中用

10、鏈接指針指向一個目標(biāo) 說明:href屬性中的統(tǒng)一資源定位器url是被指向的目標(biāo),隨后的”字符串”在HTML文件中充當(dāng)指針的角色,它一般顯示為蘭色.當(dāng)讀者用鼠標(biāo)點這個字符串時,瀏覽器就會將url處的資源顯示在屏幕上. 例如:網(wǎng)易,2.圖象鏈接指針(見chap3_11.htm) 格式: 功能:圖象也可以作為鏈接指針 說明:”是圖象元素,它表明顯示url代表的圖象文件.上例中用取代了鏈接指針中的text位置. 例如: 搜狐,3.4.2被指向的目標(biāo),(1)鏈接到本機另一個頁面 鏈接到另一頁面 (2)鏈接到另一臺機器的web頁面 搜狐 (3)鏈接到同一頁面的另一段落,方法如下: 必須先做一個”錨”標(biāo)記:

11、 第一章 再做鏈接: 從這里可以鏈接到第一章處,(4)鏈接到不同文件的另一段落,方法如下: 必須先做一個”錨”標(biāo)記: 第一章 再做鏈接: 從這里可以鏈接到第一章處,3.5表格標(biāo)記,格式: 表格開始 表格標(biāo)題; 表格欄(字段名)標(biāo)題 定義表行 定義表格單元數(shù)據(jù) 表格結(jié)束,3.5.1表格定義標(biāo)記,格式: 功能: 說明: border=#-設(shè)置表格邊框線尺寸 cellspacing=#-設(shè)置表格單元間隙 width=# or %-設(shè)置表格寬度,#表示表格寬度數(shù)值,%表示表格占屏幕的百分比., 手機價格表 型號名稱價格 a188 三星 1200.00 a288 三星 1300.00 ,3.5.2表格標(biāo)

12、題標(biāo)記,格式:#:top/bottom 功能:定義表格標(biāo)題 說明: align=top-表格標(biāo)題在表格上部,默認(rèn)值 align=bottom-表格標(biāo)題在表格下部,3.5.3表格字段名標(biāo)記,格式:字段名 功能:定義表格第一行中各單元格內(nèi)的信息 說明:表格中的第一行經(jīng)常是表格欄目名,3.5.4表格行標(biāo)記,格式: 功能:定義表格行 說明:中包括有表格一個或多個表格數(shù)據(jù)單元, 可以省略.,3.5.5表格數(shù)據(jù)標(biāo)記,格式: 功能:定義表格單元格中的數(shù)據(jù) 說明:中包括有表格一個或多個表格數(shù)據(jù)單元, 可以省略(見chap3_12.htm).,3.5.6跨多行,多列的表(table span),1.跨多列的表

13、格式: 功能:設(shè)置跨多列的行 說明:中的#表示行數(shù)(見chap3_13.htm),例如:跨多列的表示例 三星 a188 a288 a388 1100 1200 1300 ,2.跨多行的表格 格式: 功能:設(shè)置跨多行的列 說明:中的#表示列數(shù) 例如:跨多行的表示例 三星價格 a188 1100 , a288 1200 a388 1300 ,3.6表單標(biāo)記 (見chap3_14.htm),3.6.1表單的基本語法,1.表單的基本格式 格式: . 說明: action=“url” -用于設(shè)定表單處理程序的url地址 method=get|post-指定提交信息時數(shù)據(jù)的處理方式,2.常用表單元素 (1

14、)簡單元素: #1=text|password|checkbox|radio|submit|reset|buttom Text=單行文本框;password=口令文本框;checkbox=復(fù)選框;radio=單選框;submit=提交按鈕;reset=重置按鈕;button=普通按鈕. #2=名稱,#3=尺寸,#4=初值 (2)多行文本框 (3)列表框 (4)框架 ,3.6.2單行文本框,格式: 說明:#3為口令的最大長度,用字節(jié)表示;輸入字符在文本框中用星號顯示. 例如:口令文本框示例, 您的姓名: 您的主頁的網(wǎng)址: 密碼: ,3.6.4多行的文本框,格式: 說明:#2=文本框的高度(行數(shù)),帶有滾動條;#3=文本框的寬度(每行內(nèi)的文字?jǐn)?shù)) 例如 :請留下意見和建議!,3.6.5提交及重置按鈕,格式: 說明: Submit:提交;reset:重置;value值為按鈕上的值;默認(rèn)值分別為submit和reset. 例如: ,3.6.6單選框組,格式: 說明