第二講網(wǎng)頁設(shè)計(jì)基礎(chǔ)及技術(shù)

1、3/6/20223/6/2022. .1 1網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè) 3/6/20223/6/2022. .2 2學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) 掌握掌握HTMLHTML的基本語法。的基本語法。 掌握簡單的掌握簡單的HTMLHTML代碼編寫。代碼編寫。 掌握數(shù)據(jù)庫的創(chuàng)建方法。掌握數(shù)據(jù)庫的創(chuàng)建方法。 掌握連接數(shù)據(jù)庫的掌握連接數(shù)據(jù)庫的ODBCODBC方法。方法。3/6/20223/6/2022. .3 3v HTMLHTMLv 數(shù)據(jù)庫數(shù)據(jù)庫 本章將介紹本章將介紹HTML語言及其編寫，再介紹數(shù)據(jù)庫技術(shù)語言及其編寫，再介紹數(shù)據(jù)庫技術(shù)及其連接方法。及其連接方法。3/6/20223/6/2022. .4 4

2、v HTMLHTMLv 數(shù)據(jù)庫數(shù)據(jù)庫 本章將介紹本章將介紹HTML語言及其編寫，再介紹數(shù)據(jù)庫技術(shù)語言及其編寫，再介紹數(shù)據(jù)庫技術(shù)及其連接方法。及其連接方法。3/6/20223/6/2022. .5 51.1 HTML1.1 HTML語言簡介語言簡介 1.2 HTML1.2 HTML的基本語法的基本語法1.3 HTML1.3 HTML代碼的編寫代碼的編寫1.4 1.4 標(biāo)簽選擇器標(biāo)簽選擇器 HTML是一種網(wǎng)頁制作語言，通過是一種網(wǎng)頁制作語言，通過標(biāo)記標(biāo)記可以將文字、圖可以將文字、圖像、聲音等多媒體素材組合在一起，并且按照一定的格式顯像、聲音等多媒體素材組合在一起，并且按照一定的格式顯示出來。網(wǎng)頁基

3、本上都是由示出來。網(wǎng)頁基本上都是由HTML語言組成的，萬丈高樓語言組成的，萬丈高樓平地起，要精通網(wǎng)站建設(shè)必須從網(wǎng)頁的基本語言學(xué)起。平地起，要精通網(wǎng)站建設(shè)必須從網(wǎng)頁的基本語言學(xué)起。 3/6/20223/6/2022. .6 61.1 HTML1.1 HTML語言簡介語言簡介 1.2 HTML1.2 HTML的基本語法的基本語法1.3 HTML1.3 HTML代碼的編寫代碼的編寫1.4 1.4 標(biāo)簽選擇器標(biāo)簽選擇器 HTML是一種網(wǎng)頁制作語言，通過是一種網(wǎng)頁制作語言，通過標(biāo)記標(biāo)記可以將文字、圖可以將文字、圖像、聲音等多媒體素材組合在一起，并且按照一定的格式顯像、聲音等多媒體素材組合在一起，并且按照

4、一定的格式顯示出來。網(wǎng)頁基本上都是由示出來。網(wǎng)頁基本上都是由HTML語言組成的，萬丈高樓語言組成的，萬丈高樓平地起，要精通網(wǎng)站建設(shè)必須從網(wǎng)頁的基本語言學(xué)起。平地起，要精通網(wǎng)站建設(shè)必須從網(wǎng)頁的基本語言學(xué)起。 3/6/20223/6/2022. .7 7 HTMLHTML是英文是英文HyperText Markup LanguageHyperText Markup Language的縮寫，的縮寫，其含義是其含義是“超文本標(biāo)記語言超文本標(biāo)記語言”用它編寫的文件擴(kuò)展名是用它編寫的文件擴(kuò)展名是“.html.html”或或“.htm.htm”，它們都是可供瀏覽器解釋瀏覽，它們都是可供瀏覽器解釋瀏覽的文件格

5、式。的文件格式。 在制作網(wǎng)頁時(shí)，大都采用一些專門的網(wǎng)頁制作軟件，在制作網(wǎng)頁時(shí)，大都采用一些專門的網(wǎng)頁制作軟件，如如FrontPageFrontPage，DreamweaverDreamweaver等。這些軟件都是所見即所等。這些軟件都是所見即所得的，非常方便。使用這些編輯軟件可以像使用得的，非常方便。使用這些編輯軟件可以像使用wordword一一樣來制作網(wǎng)頁，而樣來制作網(wǎng)頁，而不用編寫代碼不用編寫代碼。在不熟悉。在不熟悉HTMLHTML語言的語言的情況下，照樣可以制作網(wǎng)頁，這是網(wǎng)頁編輯軟件的最大情況下，照樣可以制作網(wǎng)頁，這是網(wǎng)頁編輯軟件的最大成功之處；但它們的最大成功之處；但它們的最大不足不足

6、之處是受軟件自身的約束，之處是受軟件自身的約束，將產(chǎn)生一些將產(chǎn)生一些垃圾代碼垃圾代碼，這些垃圾代碼將會增大網(wǎng)頁體積，這些垃圾代碼將會增大網(wǎng)頁體積，降低網(wǎng)頁的下載速度。降低網(wǎng)頁的下載速度。 3/6/20223/6/2022. .8 81.1 HTML1.1 HTML語言簡介語言簡介 1.2 HTML1.2 HTML的基本語法的基本語法1.3 HTML1.3 HTML代碼的編寫代碼的編寫1.4 1.4 標(biāo)簽選擇器標(biāo)簽選擇器 HTML是一種網(wǎng)頁制作語言，通過是一種網(wǎng)頁制作語言，通過標(biāo)記標(biāo)記可以將文字、圖可以將文字、圖像、聲音等多媒體素材組合在一起，并且按照一定的格式顯像、聲音等多媒體素材組合在一起，

7、并且按照一定的格式顯示出來。網(wǎng)頁基本上都是由示出來。網(wǎng)頁基本上都是由HTML語言組成的，萬丈高樓語言組成的，萬丈高樓平地起，要精通網(wǎng)站建設(shè)必須從網(wǎng)頁的基本語言學(xué)起。平地起，要精通網(wǎng)站建設(shè)必須從網(wǎng)頁的基本語言學(xué)起。 3/6/20223/6/2022. .9 9 HTML HTML的任何標(biāo)記都由的任何標(biāo)記都由“ ”圍起來。圍起來。v 單標(biāo)記單標(biāo)記只需單獨(dú)使用就能完整地表達(dá)意思，這類標(biāo)記的語法是：只需單獨(dú)使用就能完整地表達(dá)意思，這類標(biāo)記的語法是： 最常用的單標(biāo)記是最常用的單標(biāo)記是，它表示，它表示換行換行。 v 雙標(biāo)記雙標(biāo)記它由它由“始標(biāo)記始標(biāo)記”和和“尾標(biāo)記尾標(biāo)記”兩部分構(gòu)成，必須成對使用，始標(biāo)記兩

8、部分構(gòu)成，必須成對使用，始標(biāo)記前加一個(gè)斜杠（前加一個(gè)斜杠（/ /）即成為尾標(biāo)記。這類標(biāo)記的語法是：）即成為尾標(biāo)記。這類標(biāo)記的語法是： 內(nèi)容內(nèi)容/ 其中其中“內(nèi)容內(nèi)容” 部分就是要被這對標(biāo)記施加作用的部分。例如你想部分就是要被這對標(biāo)記施加作用的部分。例如你想突出突出對某段文字的顯示，就將此段文字放在對某段文字的顯示，就將此段文字放在 標(biāo)記中：標(biāo)記中：第一：第一： 3/6/20223/6/2022. .1010v 標(biāo)記屬性標(biāo)記屬性 許多單標(biāo)記和雙標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性：許多單標(biāo)記和雙標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性： 3 各屬性之間無先后次序，屬性也可省略（即取默認(rèn)各屬性之間無先后次序，屬性

9、也可省略（即取默認(rèn)值），例如單標(biāo)記值），例如單標(biāo)記表示在文檔當(dāng)前位置表示在文檔當(dāng)前位置畫一條水畫一條水平線平線，一般是從窗口中當(dāng)前行的最左端一直畫到最右，一般是從窗口中當(dāng)前行的最左端一直畫到最右端。帶一些屬性：端。帶一些屬性： 其中其中SIZESIZE屬性屬性定義線定義線的的粗細(xì)粗細(xì)，屬性值取整數(shù)，缺為，屬性值取整數(shù)，缺為1 1；ALIGNALIGN屬性表示屬性表示對齊方式對齊方式，可取，可取LEFTLEFT（左對齊左對齊），），CENTERCENTER（居中居中），），RIGHTRIGHT（右對齊右對齊）；）；WIDTHWIDTH 屬性屬性定義定義線線的的長度長度，可取相對值，（由一對，可取

10、相對值，（由一對“”“”號括起來的號括起來的百百分?jǐn)?shù)分?jǐn)?shù)，表示相對于，表示相對于充滿整個(gè)窗口的百分比充滿整個(gè)窗口的百分比），也可?。?，也可取絕對值（用整數(shù)表示的絕對值（用整數(shù)表示的屏幕像素點(diǎn)屏幕像素點(diǎn)的個(gè)數(shù)，如的個(gè)數(shù)，如WIDTH=300WIDTH=300），），缺省值是缺省值是100%100%。3/6/20223/6/2022. .11111.1 HTML1.1 HTML語言簡介語言簡介 1.2 HTML1.2 HTML的基本語法的基本語法1.3 HTML1.3 HTML代碼的編寫代碼的編寫1.4 1.4 標(biāo)簽選擇器標(biāo)簽選擇器 HTML是一種網(wǎng)頁制作語言，通過是一種網(wǎng)頁制作語言，通過標(biāo)記標(biāo)記

11、可以將文字、圖可以將文字、圖像、聲音等多媒體素材組合在一起，并且按照一定的格式顯像、聲音等多媒體素材組合在一起，并且按照一定的格式顯示出來。網(wǎng)頁基本上都是由示出來。網(wǎng)頁基本上都是由HTML語言組成的，萬丈高樓語言組成的，萬丈高樓平地起，要精通網(wǎng)站建設(shè)必須從網(wǎng)頁的基本語言學(xué)起。平地起，要精通網(wǎng)站建設(shè)必須從網(wǎng)頁的基本語言學(xué)起。 3/6/20223/6/2022. .1212HTMLHTML的基本結(jié)構(gòu)分為三部分：的基本結(jié)構(gòu)分為三部分：v HTMLHTML標(biāo)記標(biāo)記 標(biāo)記用于標(biāo)記用于HTMLHTML文檔的最前邊，用來標(biāo)識文檔的最前邊，用來標(biāo)識HTMLHTML文檔的開始。而文檔的開始。而標(biāo)記恰恰相反，它放

12、在標(biāo)記恰恰相反，它放在HTMLHTML文檔的最后邊，用來標(biāo)識文檔的最后邊，用來標(biāo)識HTMLHTML文檔的結(jié)束，兩個(gè)文檔的結(jié)束，兩個(gè)標(biāo)記必須一起使用。標(biāo)記必須一起使用。 事實(shí)上，現(xiàn)在事實(shí)上，現(xiàn)在常用的常用的WebWeb瀏覽器都可以自動識別瀏覽器都可以自動識別HTMLHTML文檔，并不要求有文檔，并不要求有標(biāo)簽，也不對該標(biāo)簽做標(biāo)簽，也不對該標(biāo)簽做任何操作任何操作。但是，為了提高文檔的。但是，為了提高文檔的適用性適用性，使編寫的，使編寫的HTMLHTML文檔能適應(yīng)日新月異的文檔能適應(yīng)日新月異的WebWeb瀏覽器，還是應(yīng)該養(yǎng)成瀏覽器，還是應(yīng)該養(yǎng)成使用這個(gè)標(biāo)簽的習(xí)慣。使用這個(gè)標(biāo)簽的習(xí)慣。3/6/2022

13、3/6/2022. .1313v headhead標(biāo)記標(biāo)記 和和構(gòu)成構(gòu)成HTMLHTML文檔的開頭部分，在此文檔的開頭部分，在此標(biāo)記對之間可以使用標(biāo)記對之間可以使用 ， 等標(biāo)記對，這些標(biāo)記對，這些標(biāo)記對都是描等標(biāo)記對，這些標(biāo)記對，這些標(biāo)記對都是描述述HTMLHTML文檔相關(guān)信息的標(biāo)記對，兩個(gè)標(biāo)記必須一塊使文檔相關(guān)信息的標(biāo)記對，兩個(gè)標(biāo)記必須一塊使用。用。v BodyBody標(biāo)記標(biāo)記 是是HTMLHTML文檔的主體部分，在此標(biāo)記文檔的主體部分，在此標(biāo)記對之間可包含對之間可包含、 、等眾等眾多標(biāo)記，它們所定義的文本、圖像等將會在瀏覽器內(nèi)多標(biāo)記，它們所定義的文本、圖像等將會在瀏覽器內(nèi)顯示出來，兩個(gè)標(biāo)記

14、必須一塊使用。顯示出來，兩個(gè)標(biāo)記必須一塊使用。3/6/20223/6/2022. .1414從上述講解中可以看出從上述講解中可以看出HTMLHTML文檔的基本結(jié)構(gòu)如下圖所示：文檔的基本結(jié)構(gòu)如下圖所示：3/6/20223/6/2022. .1515v 區(qū)段格式標(biāo)記區(qū)段格式標(biāo)記 此類標(biāo)記的主要用途是將此類標(biāo)記的主要用途是將HTMLHTML文件中得某個(gè)區(qū)段文件中得某個(gè)區(qū)段文字，以特定格式顯示，增加文件的可看度。主要的文字，以特定格式顯示，增加文件的可看度。主要的有：有：.：網(wǎng)頁標(biāo)題網(wǎng)頁標(biāo)題。.：i=1,2,.,6, i=1,2,.,6, 標(biāo)題標(biāo)題。：產(chǎn)生：產(chǎn)生水平線水平線。：強(qiáng)迫換行強(qiáng)迫換行。.：文

15、件段落文件段落。.：以原始格式顯示以原始格式顯示。.：標(biāo)注聯(lián)絡(luò)人：標(biāo)注聯(lián)絡(luò)人姓名姓名、電話電話、地址地址等信息。等信息。.：區(qū)段引用標(biāo)記這部分內(nèi)：區(qū)段引用標(biāo)記這部分內(nèi)容表示引用文字，一般每一行會容表示引用文字，一般每一行會向內(nèi)縮進(jìn)向內(nèi)縮進(jìn)一定的距離。一定的距離。引用可以嵌套使用，造成多層縮進(jìn)的效果。引用可以嵌套使用，造成多層縮進(jìn)的效果。3/6/20223/6/2022. .1616v 字符格式標(biāo)記字符格式標(biāo)記 用來改變用來改變HTMLHTML文件文字的外觀，增加文件的美觀程文件文字的外觀，增加文件的美觀程度。主要有：度。主要有：.：粗體字粗體字。.：斜體字斜體字。：下劃線下劃線。.：改變：改變

16、字體字體設(shè)置。設(shè)置。.：居中居中對齊。對齊。.：標(biāo)記內(nèi)的文字比前邊：標(biāo)記內(nèi)的文字比前邊大一號大一號的字體顯示。的字體顯示。.：標(biāo)記內(nèi)文字比前邊：標(biāo)記內(nèi)文字比前邊小一號小一號字體顯示。字體顯示。.：引文引文內(nèi)容一般用內(nèi)容一般用斜體斜體表示。表示。和和：上標(biāo)上標(biāo)和和下標(biāo)下標(biāo)。3/6/20223/6/2022. .1717v 鏈接標(biāo)記鏈接標(biāo)記 鏈接可以說是鏈接可以說是htmlhtml超文本文件的命脈，超文本文件的命脈，htmlhtml通過鏈接標(biāo)記來通過鏈接標(biāo)記來整合分散在世界各地的圖、文、影、音等信息。此類標(biāo)記的主整合分散在世界各地的圖、文、影、音等信息。此類標(biāo)記的主要用途為標(biāo)示超文本文件鏈接：要用

17、途為標(biāo)示超文本文件鏈接：.：建立超級鏈接。：建立超級鏈接。 本標(biāo)記對的本標(biāo)記對的hrefhref屬性屬性是必不可少的。是必不可少的。hrefhref的值可以是的值可以是URLURL形形式，即網(wǎng)址或相對路徑。式，即網(wǎng)址或相對路徑。例：例：哈爾濱工程大學(xué)哈爾濱工程大學(xué)表示點(diǎn)擊表示點(diǎn)擊“哈爾濱工程大學(xué)哈爾濱工程大學(xué)”鏈接則進(jìn)入鏈接則進(jìn)入http:/http:/這個(gè)網(wǎng)頁中。這個(gè)網(wǎng)頁中。例：例：a href=.html我的主頁我的主頁3/6/20223/6/2022. .1818v 多媒體標(biāo)記多媒體標(biāo)記此類標(biāo)記用來顯示圖像數(shù)據(jù)。主要有：此類標(biāo)記用來顯示圖像數(shù)據(jù)。主要有：嵌入：嵌入圖像圖像。：嵌入：嵌入多

18、媒體對象多媒體對象。：背景音樂背景音樂。例：例：img src=baby.JPG alt=height=228altalt：無法顯示圖片時(shí)的替代文字無法顯示圖片時(shí)的替代文字。例：例：embed src= height=700 例：例： bgsound src= .mp3 loop=3 3/6/20223/6/2022. .1919v 表格標(biāo)記表格標(biāo)記 最后要講的是表格，這也是一組十分重要的標(biāo)記，一方面最后要講的是表格，這也是一組十分重要的標(biāo)記，一方面可以制作列表形式的輸出，另一方面可用作屏幕區(qū)域的劃分?？梢灾谱髁斜硇问降妮敵?，另一方面可用作屏幕區(qū)域的劃分。表格的標(biāo)記是：表格的標(biāo)記是：. ：定義

19、表格定義表格. ：表格行表格行. ：表格列表格列標(biāo)記比較重要的參數(shù)有：標(biāo)記比較重要的參數(shù)有：border=border=邊框線寬度邊框線寬度，可以顯示表格邊框線。，可以顯示表格邊框線。width=width=表格寬度表格寬度，如果是一個(gè)，如果是一個(gè)正整數(shù)正整數(shù)，表示以，表示以屏幕點(diǎn)數(shù)屏幕點(diǎn)數(shù)為為單位單位的表的表格寬度；如果是一個(gè)格寬度；如果是一個(gè)百分?jǐn)?shù)百分?jǐn)?shù)，表示表格寬度占瀏覽器寬度的，表示表格寬度占瀏覽器寬度的百百分比分比。3/6/20223/6/2022. .2020 表格標(biāo)記表格標(biāo)記 下面是表格標(biāo)記的示例：下面是表格標(biāo)記的示例： 左上格左上格 右上格右上格 左下格左下格 右下格右下格 帶有帶有width、height屬性屬性3/6/20223/6/2022. .21211.1 HTML1.1 HTML語言簡介語言簡介 1.2 HTML1.2 HTML的基本語法的基本語法1.3 HTML1.3 HTML代碼的編寫代碼的編寫1.4 1.4 標(biāo)簽選擇器標(biāo)簽選擇器 HTML是一種網(wǎng)頁制作語言，通過是一種網(wǎng)頁制作語言，通過標(biāo)記標(biāo)記可以將文字、圖可以將文字、圖像、聲音等多媒體素材組合在一起，并且按照一定的格式顯像、聲音等多媒體素材組合在一起