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

1、3/6/20223/6/2022. .1 1網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè) 3/6/20223/6/2022. .2 2學習目標學習目標 掌握掌握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 標簽選擇器標簽選擇器 HTML是一種網(wǎng)頁制作語言，通過是一種網(wǎng)頁制作語言，通過標記標記可以將文字、圖可以將文字、圖像、聲音等多媒體素材組合在一起，并且按照一定的格式顯像、聲音等多媒體素材組合在一起，并且按照一定的格式顯示出來。網(wǎng)頁基

3、本上都是由示出來。網(wǎng)頁基本上都是由HTML語言組成的，萬丈高樓語言組成的，萬丈高樓平地起，要精通網(wǎng)站建設(shè)必須從網(wǎng)頁的基本語言學起。平地起，要精通網(wǎng)站建設(shè)必須從網(wǎng)頁的基本語言學起。 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 標簽選擇器標簽選擇器 HTML是一種網(wǎng)頁制作語言，通過是一種網(wǎng)頁制作語言，通過標記標記可以將文字、圖可以將文字、圖像、聲音等多媒體素材組合在一起，并且按照一定的格式顯像、聲音等多媒體素材組合在一起，并且按照

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

5、式。的文件格式。 在制作網(wǎng)頁時，大都采用一些專門的網(wǎng)頁制作軟件，在制作網(wǎng)頁時，大都采用一些專門的網(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 標簽選擇器標簽選擇器 HTML是一種網(wǎng)頁制作語言，通過是一種網(wǎng)頁制作語言，通過標記標記可以將文字、圖可以將文字、圖像、聲音等多媒體素材組合在一起，并且按照一定的格式顯像、聲音等多媒體素材組合在一起，

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

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

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

10、相對值，（由一對“”“”號括起來的號括起來的百百分數(shù)分數(shù)，表示相對于，表示相對于充滿整個窗口的百分比充滿整個窗口的百分比），也可取），也可取絕對值（用整數(shù)表示的絕對值（用整數(shù)表示的屏幕像素點屏幕像素點的個數(shù)，如的個數(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 標簽選擇器標簽選擇器 HTML是一種網(wǎng)頁制作語言，通過是一種網(wǎng)頁制作語言，通過標記標記

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

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

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

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

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

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

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

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

19、表格定義表格. ：表格行表格行. ：表格列表格列標記比較重要的參數(shù)有：標記比較重要的參數(shù)有：border=border=邊框線寬度邊框線寬度，可以顯示表格邊框線。，可以顯示表格邊框線。width=width=表格寬度表格寬度，如果是一個，如果是一個正整數(shù)正整數(shù)，表示以，表示以屏幕點數(shù)屏幕點數(shù)為為單位單位的表的表格寬度；如果是一個格寬度；如果是一個百分數(shù)百分數(shù)，表示表格寬度占瀏覽器寬度的，表示表格寬度占瀏覽器寬度的百百分比分比。3/6/20223/6/2022. .2020 表格標記表格標記 下面是表格標記的示例：下面是表格標記的示例： 左上格左上格 右上格右上格 左下格左下格 右下格右下格 帶有帶有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 標簽選擇器標簽選擇器 HTML是一種網(wǎng)頁制作語言，通過是一種網(wǎng)頁制作語言，通過標記標記可以將文字、圖可以將文字、圖像、聲音等多媒體素材組合在一起，并且按照一定的格式顯像、聲音等多媒體素材組合在一起