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

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