思源培訓(xùn)_網(wǎng)頁(yè)設(shè)計(jì)入門.doc

第82頁(yè) 共82頁(yè)網(wǎng)頁(yè)設(shè)計(jì)入門鹽城師范學(xué)院思源驛站2010.10目錄第1章 HTML概述1.1 簡(jiǎn)介1.2 HTML基本元素1.3 元素簡(jiǎn)介1.4 標(biāo)簽簡(jiǎn)介 1.4.1 標(biāo)簽列表 1.4.2 常用標(biāo)簽1.5 圖像標(biāo)簽 1.5.1 基本語(yǔ)法 1.5.2 圖標(biāo)align屬性 1.5.3 圖片的大小1.6 HTML實(shí)體1.7 總結(jié)第2章 框架與超鏈接2.1 框架 2.1.1 框架基本概念 2.1.2 frame分割2.2 超鏈接 2.2.1 href屬性 2.2.2 name屬性 2.2.3 target屬性 2.2.4 title屬性 2.2.5 鏈接到email地址 2.2.6 HTML相對(duì)路徑和絕對(duì)路徑2.3 總結(jié)第3章 HTML表格和層3.1 簡(jiǎn)介3.2 表格基本元素3.3 邊界屬性3.4 表格的表頭3.5 空的單元格3.6 跨多行多列的表格3.7 層3.8 總結(jié)第4章 表單4.1 簡(jiǎn)介4.2 表單 4.2.1 三個(gè)要點(diǎn) 4.2.2 表單的控件4.3 總結(jié)第5章 CSS樣式表5.1 簡(jiǎn)介5.2 樣式表的基本語(yǔ)法及規(guī)則5.3 常用的樣式屬性 5.3.1 文本屬性 5.3.2 背景屬性 5.3.3 方框?qū)傩裕ê凶幽Ｐ停?.4 樣式表的3類應(yīng)用方式 5.4.1 內(nèi)嵌樣式 5.4.2 行內(nèi)嵌樣式 5.4.3 外部引用5.5 總結(jié)第6章 JavaScript基本語(yǔ)法6.1 簡(jiǎn)介6.2 為什么要學(xué)習(xí)JavaScript6.3 什么是JavaScript 6.3.1 腳本的基本結(jié)構(gòu) 6.3.2 腳本的執(zhí)行原理6.4 JavaScript的基本語(yǔ)法 6.4.1 變量的聲明和賦值 6.4.2 運(yùn)算符號(hào) 6.4.3 邏輯控制語(yǔ)句 6.4.4 注釋 6.4.5 類型轉(zhuǎn)換6.5 JavaScript的高級(jí)語(yǔ)法自定義函數(shù)function 6.5.1 什么是函數(shù) 6.5.2 如何使用函數(shù)6.6 常見錯(cuò)誤6.7 總結(jié)第7章 DOM對(duì)象（一）7.1 簡(jiǎn)介7.2 DOM模型介紹 7.2.1 HTML文檔的樹形結(jié)構(gòu) 7.2.2 DOM 7.2.3 瀏覽器對(duì)象7.3 window對(duì)象常用的屬性、方法、事件的介紹 7.3.1 常用屬性 7.3.2 常用方法 7.3.3 常用事件7.4 date對(duì)象和setTimeout()方法做時(shí)鐘顯示 7.4.1 date對(duì)象常用的方法 7.4.2 setTimeout()方法7.5 history和location對(duì)象 7.5.1 history對(duì)象 7.5.2 location對(duì)象7.6 總結(jié)第8章 DOM對(duì)象（二）8.1 簡(jiǎn)介8.2 document對(duì)象的常用屬性和方法介紹 8.2.1 屬性 8.2.2 方法8.3 網(wǎng)頁(yè)選項(xiàng)卡效果8.4 全選/全不選/反選效果8.5 常見錯(cuò)誤8.6 總結(jié)第9章 基本的表單驗(yàn)證技術(shù)9.1 簡(jiǎn)介9.2 為什么需要表單驗(yàn)證9.3 表單驗(yàn)證的內(nèi)容9.4 表單驗(yàn)證思路 9.4.1 字符串對(duì)象簡(jiǎn)介 9.4.2 電子郵件格式驗(yàn)證9.5 文本框控件 9.5.1 文本框?qū)ο蠛?jiǎn)介 9.5.2 電子郵件格式驗(yàn)證的改進(jìn)9.6 總結(jié)第10章 表單驗(yàn)證的高級(jí)應(yīng)用 10.1 簡(jiǎn)介10.2 下拉列表框簡(jiǎn)介10.3 數(shù)字簡(jiǎn)介 10.3.1 數(shù)組用法介紹 10.3.2 創(chuàng)建數(shù)組 10.3.3 為數(shù)組元素賦值 10.3.4 訪問數(shù)組元素 10.3.5 數(shù)組的常用屬性和方法10.4 復(fù)選框數(shù)組的應(yīng)用10.5 綜合10.6 總結(jié)第1章 HTML概述目標(biāo) 會(huì)使用HTML的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁(yè)會(huì)使用文本相關(guān)標(biāo)簽實(shí)現(xiàn)頁(yè)面文字修飾和布局1.1 簡(jiǎn)介HTML的英文全稱是Hyper Text Markup Language，中文叫做“超文本（字）標(biāo)記語(yǔ)言”。HTML跟一般的文字處理器不同的地方在于，它具有超文字（Hyper Text）、超鏈接（Hyper Link）、超媒體（Hyper Media）的特性，通過HTTP（Hyper Text Transfer Protocol）協(xié)議，便能夠在世界各地通過WWW（World Wide Web）的架構(gòu)進(jìn)行跨平臺(tái)的交流。HTML是創(chuàng)建網(wǎng)頁(yè)的基礎(chǔ)語(yǔ)言，也是創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)語(yǔ)言。網(wǎng)頁(yè)由網(wǎng)頁(yè)元素構(gòu)成，網(wǎng)頁(yè)元素是由HTML標(biāo)記（標(biāo)簽）加上屬性和內(nèi)容構(gòu)成。本章將介紹HTML的基本結(jié)構(gòu)，文本相關(guān)標(biāo)簽，圖像標(biāo)簽，鏈接標(biāo)簽，滾動(dòng)標(biāo)簽等。本章重點(diǎn)是文本、圖像、鏈接標(biāo)簽的運(yùn)用，難點(diǎn)是各種標(biāo)簽的綜合應(yīng)用。1.2 HTML基本元素打開Notepad，新建一個(gè)文件，輸入以下代碼，保存為first.html。 我的第一個(gè)網(wǎng)頁(yè) Hello,World！ 打開網(wǎng)頁(yè)，查看顯示效果：例解：這個(gè)文件的第一標(biāo)簽是，這個(gè)標(biāo)簽告訴你的瀏覽器這是HTML文件的開始，最后一個(gè)標(biāo)簽是，告訴瀏覽器這是文件的結(jié)束。在和之間的內(nèi)容，是網(wǎng)頁(yè)的Head信息（頭信息）。Head信息是不顯示在網(wǎng)頁(yè)中，但不表示它不重要。你可以在Head信息中添加網(wǎng)頁(yè)關(guān)鍵詞，網(wǎng)頁(yè)描述，網(wǎng)頁(yè)的樣式，腳本語(yǔ)言等等。在和之間的內(nèi)容，是網(wǎng)頁(yè)的標(biāo)題，顯示在瀏覽器的標(biāo)題欄。在和之間的內(nèi)容，是網(wǎng)頁(yè)的主體部分。在和之間的文字會(huì)被加粗，即bold。HTML源文件是文本文件，里面包含HTML標(biāo)簽，告訴網(wǎng)頁(yè)如何顯示這個(gè)文件。1.3 元素簡(jiǎn)介HTML元素（HTML Element）由HTML標(biāo)簽、內(nèi)容和標(biāo)簽的屬性構(gòu)成。HTML標(biāo)簽分為成對(duì)標(biāo)簽和獨(dú)立標(biāo)簽。成對(duì)標(biāo)簽以“”開始，以“”結(jié)束，屬性寫在開始標(biāo)簽里標(biāo)簽名的后面，內(nèi)容寫在開始標(biāo)簽與結(jié)束標(biāo)簽之間。獨(dú)立標(biāo)簽寫成“”，屬性寫在標(biāo)簽名的后面。HTML代碼不區(qū)分大小寫，但是我們今天處在HTML向XML過渡的XHTML時(shí)期，作為初學(xué)者一定要嚴(yán)格要求自己，養(yǎng)成良好的習(xí)慣，遵循代碼小寫、標(biāo)簽閉合等規(guī)范，注意代碼縮進(jìn)。標(biāo)簽屬性擴(kuò)展了HTML元素的能力，比如你可以通過改變標(biāo)簽的bgcolor屬性值來改變網(wǎng)頁(yè)背景顏色。 我的第一個(gè)網(wǎng)頁(yè) Hello,World！ 顯示效果：1.4 標(biāo)簽簡(jiǎn)介1.4.1 標(biāo)簽列表類型名稱內(nèi)容說明總類（所有HTML文件都有的）文件放在文檔的開頭和結(jié)尾文件標(biāo)題必須放在文件頭文件頭網(wǎng)頁(yè)的描述信息文件主體網(wǎng)頁(yè)的主體內(nèi)容結(jié)構(gòu)性定義（由瀏覽器控制顯示風(fēng)格）標(biāo)題?的值從1到6，有六層選擇層如今網(wǎng)頁(yè)中最常見的標(biāo)簽，通常與CSS使用引文區(qū)塊通常會(huì)縮進(jìn)強(qiáng)調(diào)通常以斜體顯示特別強(qiáng)調(diào)通常加粗顯示引文通常以斜體顯示代碼顯示原始碼樣本鍵盤輸入變數(shù)定義有些瀏覽器不識(shí)別地址大字小字與外觀相關(guān)的標(biāo)簽加粗斜體下劃線有些瀏覽器不識(shí)別刪除線有些瀏覽器不識(shí)別下標(biāo)上標(biāo)打字機(jī)字體用單空格字型顯示預(yù)定格式保留代碼中的空格劇中文字和圖片都適用閃耀有些瀏覽器不識(shí)別字體鏈接與圖片鏈接圖片站點(diǎn)地圖內(nèi)嵌物件將物件插入頁(yè)面文檔標(biāo)簽（分隔）段落段落與段落之間通常是雙倍行距換行單倍行距水平線不可換行可換行處如果需要，可在此斷行無(wú)序列表有序列表定義式列表項(xiàng)目，定義1.4.2 常用標(biāo)簽下面是一些常用標(biāo)簽組成的網(wǎng)頁(yè)的代碼。 我的第一個(gè)網(wǎng)頁(yè) Hello,WorldHello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World! 顯示效果：在HTML文件里，你可以寫代碼的注釋，解釋說明你的代碼，這樣有助于你和他人更好地理解代碼。注釋寫在“”之間，注釋內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)里。HTML文件會(huì)自動(dòng)截取多余的空格，不管你有多少個(gè)空格，都會(huì)被瀏覽器解釋成一個(gè)。有些標(biāo)簽?zāi)軌驅(qū)⑽谋咀猿梢欢?，不需要使用?biāo)簽分段，例如。1.5 圖像標(biāo)簽適當(dāng)?shù)厥褂脠D像能給網(wǎng)頁(yè)增添無(wú)限生機(jī)，吸引更多的瀏覽者。圖像格式有很多，網(wǎng)頁(yè)上常見的有4種，即jpg、gif、bmp、png。1.5.1 基本語(yǔ)法標(biāo)簽用于在HTML文檔中插入圖像。 我的第一個(gè)網(wǎng)頁(yè) 顯示效果：1.5.1 圖片align屬性用align屬性可以改變圖片的垂直對(duì)齊方式和水平對(duì)齊方式。 我的第一個(gè)網(wǎng)頁(yè) 圖片的垂直對(duì)齊方式 圖片的水平對(duì)齊方式 顯示效果：1.5.3 圖片的大小在缺省情況下，圖片顯示原有大小，你可以通過的width和height屬性來設(shè)置圖片的顯示大小。 我的第一個(gè)網(wǎng)頁(yè)   顯示效果：圖片相對(duì)文字所占的字節(jié)數(shù)較多，一個(gè)頁(yè)面不要包含過多的圖片，否則影響顯示速度。1.6 HTML實(shí)體HTML中有一些特殊的符號(hào)和實(shí)體：實(shí)體類型實(shí)體號(hào)實(shí)體作用空格 < >注冊(cè)商標(biāo) ®著作權(quán) ©雙引號(hào) ”"位與運(yùn)算符 &左單引號(hào) ‘右單引號(hào) ’1.7 總結(jié)HTML的英文全稱是Hyper Text Markup Language。HTML網(wǎng)頁(yè)由HTML元素構(gòu)成，HTML元素又由HTML標(biāo)簽、內(nèi)容及屬性構(gòu)成。、標(biāo)簽可以分別實(shí)現(xiàn)分段和換行。標(biāo)簽可以在網(wǎng)頁(yè)中插入圖片，并可通過align屬性調(diào)整圖像相對(duì)位置，通過width和height屬性調(diào)整圖像顯示大小。第二章 框架與超鏈接目標(biāo) 會(huì)使用框架會(huì)使用超鏈接標(biāo)簽實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)2.1 框架2.1.1 框架基本概念這個(gè)是一個(gè)典型的框架集頁(yè)面，index.html，包含left、top、main框架，分別鏈向left.html、top.html、main.html。2.1.2 frame分割frame分割就好像是切蛋糕，要一步步來。 Frameset 先用標(biāo)簽取代標(biāo)簽，然后把頁(yè)面分成左右兩塊，左邊寬度為120像素，右邊自動(dòng)。左框架鏈接left.html頁(yè)面，name為left，右框架鏈接right.html頁(yè)面，name為main。 Frameset 顯示效果： 再把網(wǎng)頁(yè)右塊分成上下兩塊，上塊高100像素。 Frameset 顯示效果：一個(gè)簡(jiǎn)單的框架集頁(yè)面就這樣“切”好了。2.2 超鏈接2.2.1 href屬性HTML用來表示超鏈接，英文叫anchor。它可以鏈到任何一個(gè)文件源：當(dāng)前網(wǎng)頁(yè)的某個(gè)位置，一個(gè)html網(wǎng)頁(yè)，一個(gè)圖片，一個(gè)視頻，等等。其基本語(yǔ)法如下：鏈接的顯示文字URL（Uniform/Universal Resource Locator）叫做統(tǒng)一資源定位，或全球資源定位，表示要鏈接的文件位置，也就通常說的網(wǎng)站。 HyperLink About SYYZgoogle顯示效果：“About SYYZ”鏈到同目錄下的about.html頁(yè)面，“google”鏈到網(wǎng)站。2.2.2 name屬性用name屬性，可以讓某個(gè)鏈接跳到頁(yè)面中設(shè)置了name屬性的位置。name屬性通常用于給一個(gè)大的文件創(chuàng)建章節(jié)目錄。 HyperLink 請(qǐng)參照第3章第1章這是第1章內(nèi)容第2章這是第2章內(nèi)容第3章這是第3章內(nèi)容第4章這是第4章內(nèi)容第5章這是第5章內(nèi)容第6章這是第6章內(nèi)容如果瀏覽器找不到制定的name位置，則顯示文章開頭，不報(bào)錯(cuò)。鏈接的顯示文字2.2.3 target屬性使用target屬性可以設(shè)置顯示網(wǎng)頁(yè)的目標(biāo)。鏈接的顯示文字鏈接的顯示文字鏈接的顯示文字鏈接的顯示文字鏈接的顯示文字鏈接的顯示文字另外，點(diǎn)擊鏈接時(shí)按下ctrl鍵會(huì)在新選項(xiàng)卡中打開頁(yè)面，按下shift會(huì)在新窗口中打開頁(yè)面。2.2.4 title屬性使用title屬性可以設(shè)置鼠標(biāo)懸停文本，給超鏈接添加注釋。 HyperLink About SYYZgoogle 顯示效果：2.2.5 鏈接到Email地址聯(lián)系我們?nèi)绻omailto添加更多功能，第一個(gè)功能要以?開始，每個(gè)功能之間用&連接。cc為抄送地址，bcc為暗送（密送）地址，subject為郵件主題，body為郵件內(nèi)容。聯(lián)系我們2.2.6 HTML相對(duì)路徑和絕對(duì)路徑鏈接的顯示文字鏈接的顯示文字 鏈接的顯示文字鏈接的顯示文字鏈接的顯示文字2.3 總結(jié)一個(gè)框架結(jié)構(gòu)由兩部分組成：框架集frameset和框架frame?？蚣芗痜rameset頁(yè)面被劃分的區(qū)域多少是通過屬性rows和cols來設(shè)置的。設(shè)置打開超鏈接的目標(biāo)的方式有5種，可以通過target屬性來設(shè)置。HTML鏈接文檔或引用文檔有相對(duì)路徑和絕對(duì)路徑兩種方式。第3章 HTML表格和層目標(biāo) 會(huì)使用表格的基本結(jié)構(gòu)實(shí)現(xiàn)簡(jiǎn)單表格會(huì)設(shè)置表格的相關(guān)屬性實(shí)現(xiàn)跨行跨列的復(fù)雜表格會(huì)使用表格的相關(guān)屬性對(duì)表格進(jìn)行美化認(rèn)識(shí)到層（div）的重要性3.1 簡(jiǎn)介本章主要講解表格和層的基礎(chǔ)知識(shí)，重點(diǎn)是表格的基本結(jié)構(gòu)和層的基本用法，難點(diǎn)是跨行跨列的復(fù)雜表格的實(shí)現(xiàn)，以及層在當(dāng)今網(wǎng)頁(yè)設(shè)計(jì)中的重要性。3.2 表格的基本元素HTML表格用標(biāo)簽表示，一個(gè)表格可以分成許多行，用表示，一行可以分成許多單元，用來表示。這三個(gè)標(biāo)簽是創(chuàng)建表格最常用的標(biāo)簽。 表格 一行一列的表格 100 一行三列的表格 100200300 兩行三列的表格 100200300 400500600 顯示效果：3.3 邊界屬性在缺省情況下，不設(shè)置表格的邊界（邊框）屬性，表格的邊框是不顯示的。 表格 一行一列的表格 100 一行三列的表格 100200300 兩行三列的表格 100200300 400500600 顯示效果：邊框boder屬性的值越大，邊框就越粗。 表格 邊框?yàn)?的表格 100 邊框?yàn)?的表格 100200300 邊框?yàn)?的表格 100200300 400500600 顯示效果：3.4 表格的表頭 用表示表格的表頭，表頭文字默認(rèn)為粗體顯示。代碼及效果（注意表格嵌套）： 表格 橫向表頭 學(xué)院班級(jí)姓名 黃海學(xué)院101李曉明 數(shù)科院102張風(fēng) 教科院103黃蕾蕾 文學(xué)院104董樂 體育學(xué)院105王慶外語(yǔ)學(xué)院106劉千易 信息學(xué)院107周凡 縱向表頭 單位思源驛站電話051588233240 郵箱 3.5 空的單元格下面表格中的單元格在頁(yè)面上會(huì)顯示麼？ 表格 顯示效果：如果表格的單元格之間沒有內(nèi)容，那么這個(gè)單元格的邊框是不會(huì)顯示出來的，盡管整個(gè)表格已設(shè)置了邊界值。要顯示這個(gè)單元格的邊框，可以在單元格中插入字符實(shí)體 。 表格   顯示效果：3.6 跨多行多列的表格colspan屬性用于創(chuàng)建跨多列的單元格，rowspan屬性用于創(chuàng)建跨多行的單元格。 表格 跨多列的單元格 100200300100200300 400500 跨多行的單元格 100200300200300 400500600 跨多行多列的單元格 100200300200300 400500 顯示效果：3.7 層和標(biāo)簽用于組織文檔結(jié)構(gòu)，通常要設(shè)置它們的class或id屬性。合理使用和，將使得用CSS控制網(wǎng)頁(yè)表現(xiàn)樣式變得非常靈活。3.8 總結(jié)創(chuàng)建表格至少需要、3對(duì)標(biāo)簽。創(chuàng)建跨多行多列的表格要分別使用rowspan和clospan屬性。、是如今組織網(wǎng)頁(yè)的主要標(biāo)簽。第4章 表單目標(biāo) 會(huì)使用表單的基本元素制作表單頁(yè)面能夠理解post和get兩種提交方式的區(qū)別4.1 簡(jiǎn)介本章主要介紹表單，重點(diǎn)是表單里面的各種控件的使用方法，和post、get兩種提交方式的區(qū)別。4.2 表單表單是網(wǎng)頁(yè)設(shè)計(jì)的重要內(nèi)容之一，主要用來采集和提交用戶輸入的信息，比如用戶注冊(cè)信息、留言信息、發(fā)布文章等。 form Please input your name:顯示效果：4.2.1 三個(gè)要點(diǎn)學(xué)習(xí)HTML表單form的三個(gè)要點(diǎn)：要點(diǎn)說明舉例表單控件通過HTML表單的各種控件，用戶可以進(jìn)行輸入文字，選擇選項(xiàng)，以及提交等操作。action指明處理表單的頁(yè)面。action=”add.asp”methodget表單控件的name或value經(jīng)過編碼后，由URL發(fā)送。用get方法提取。post表單控件的name或value，由http發(fā)送，URL中看不到。用post方法提取。4.2.2 表單的控件常用表單控件： form 、 、 表單控件的綜合應(yīng)用：form 基本信息 姓名 密碼 性別 男 女 個(gè)性介紹 系科信息 系科 計(jì)算機(jī) 數(shù)學(xué) 外語(yǔ) 體育 編程語(yǔ)言 C C+ C# Java 其他 上傳頭像 顯示效果：4.3 總結(jié)表單主要用于動(dòng)態(tài)頁(yè)面，方便用戶和網(wǎng)站交互。第5章 CSS樣式表目標(biāo) 理解CSS樣式表的在網(wǎng)頁(yè)設(shè)計(jì)中的地位和作用熟練掌握div層和CSS樣式表5.1 簡(jiǎn)介CSS樣式表（Cascading Style Sheets）讓網(wǎng)頁(yè)設(shè)計(jì)師們能夠靈活控制網(wǎng)頁(yè)的表現(xiàn)樣式，同時(shí)實(shí)現(xiàn)了表現(xiàn)、內(nèi)容和行為的分離，方便團(tuán)隊(duì)合作。5.2 樣式表的基本語(yǔ)法及規(guī)則樣式表由樣式規(guī)則構(gòu)成，這些規(guī)則告訴瀏覽器如何顯示網(wǎng)頁(yè)。定義樣式規(guī)則的基本語(yǔ)法如下：selectorattribe:value;selector是選擇器，可