




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
《網(wǎng)頁設(shè)計與開發(fā)》實驗教學(xué)大綱一、課程簡介《網(wǎng)頁設(shè)計與開發(fā)》是高等院校計算機及其相關(guān)專業(yè)的一門重要的基礎(chǔ)課程,也是是一門實踐性和技能性要求都很強的學(xué)科。其實驗課程主要圍繞網(wǎng)頁基本元素、css和Javascript、頁面布局和整站建設(shè)等理論內(nèi)容的實踐實訓(xùn)進行開展。其主要內(nèi)容包括練習(xí)網(wǎng)頁設(shè)計的基本概念和文檔結(jié)構(gòu),完成相關(guān)工具的安裝,練習(xí)網(wǎng)頁元素在實際應(yīng)用中的使用,包含文字與段落涉及的圖文混排方式、列表涉及的導(dǎo)航制作、表格布局局部頁面等,練習(xí)div+css的頁面布局,javascript在交互式網(wǎng)頁開發(fā)中的基本應(yīng)用,以及目前流行的HTML5技術(shù)的應(yīng)用,練習(xí)從需求分析到欄目設(shè)計最終進行布局和細節(jié)處理以及發(fā)布的整站建設(shè)過程。二、實驗教學(xué)的總體目標和要求實驗教學(xué)應(yīng)充分考慮學(xué)生對理論知識的鞏固和實踐技能的提升要求,從培養(yǎng)學(xué)生面向商業(yè)化網(wǎng)頁開發(fā)的角度出發(fā),通過典型頁面案例,講述和示范逐步分解其中的技術(shù)實現(xiàn),使學(xué)生能夠?qū)夹g(shù)在具體設(shè)計中的靈活使用有深刻的感受。通過本實驗課程的學(xué)習(xí),使學(xué)生掌握各種網(wǎng)頁元素的使用。例如,表格、文本、圖像、超級鏈接、層和表單等。熟悉一些網(wǎng)頁布局方法。掌握網(wǎng)站的開發(fā)流程,如建站規(guī)劃、頁面制作、優(yōu)化及發(fā)布等相關(guān)知識。課程完成后學(xué)生應(yīng)能夠理解網(wǎng)頁設(shè)計的基本原則,掌握網(wǎng)頁基本制作方法和技巧,并自主設(shè)計開發(fā)各種網(wǎng)頁、完成一定規(guī)模的網(wǎng)站開發(fā)。在此技術(shù)之上,了解并嘗試使用HTML5技術(shù)來實現(xiàn)之前的基礎(chǔ)網(wǎng)頁效果。三、實驗項目與學(xué)時分配(39個實驗項目,共計36學(xué)時)實驗項目與學(xué)時分配序號實驗項目學(xué)時必開/選開實驗類型備注1優(yōu)秀網(wǎng)站賞析 1必開基礎(chǔ)2體會超鏈接在網(wǎng)頁中的廣泛應(yīng)用1必開基礎(chǔ)3多種url資源的訪問方法。 必開基礎(chǔ)4使用記事本編寫網(wǎng)頁 必開基礎(chǔ)5了解EditPlus編輯器 必開基礎(chǔ)6了解瀏覽工具的安裝 選開基礎(chǔ)7HTML文件的編寫規(guī)則 1必開基礎(chǔ)8標記元素的屬性 必開基礎(chǔ)9利用style標記定義樣式 1必開基礎(chǔ)10唐詩頁面設(shè)計 1必開設(shè)計11文章排版 1必開設(shè)計12新聞列表的實現(xiàn) 1必開設(shè)計13利用無序列表制作頁面垂直導(dǎo)航和水平導(dǎo)航 2選開綜合14電子相冊的實現(xiàn) 3必開設(shè)計15新聞列表的超鏈接制作 必開設(shè)計16電子相冊的超鏈接制作選開綜合17利用書簽鏈接制作幫助文檔 1選開設(shè)計18在網(wǎng)頁中實現(xiàn)圖文混排 1必開基礎(chǔ)19成績登記表的制作 1必開基礎(chǔ)20產(chǎn)品介紹頁面的制作1選開綜合21會員登陸 1必開設(shè)計22調(diào)查問卷 1必開設(shè)計23在線預(yù)訂客房表單 1選開綜合24常用頁面布局設(shè)計 1必開基礎(chǔ)25css文件的四種引用方式 1必開基礎(chǔ)26利用CSS定位頁面元素1必開設(shè)計27用DIV+CSS布局網(wǎng)頁結(jié)構(gòu) 2選開綜合28認識JavaScript 1必開基礎(chǔ)29創(chuàng)建自定義函數(shù) 1必開基礎(chǔ)30建立外部js文件 必開基礎(chǔ)31對象創(chuàng)建與復(fù)制 1必開基礎(chǔ)32表單驗證 1必開設(shè)計33動態(tài)改變樣式 1選開綜合34Canvas的使用并繪圖1必開基礎(chǔ)35HTML5中新增表單開技術(shù)1必開基礎(chǔ)36HTML5中多媒體開發(fā)技術(shù)1必開基礎(chǔ)37Cookie操作 1必開基礎(chǔ)38網(wǎng)站設(shè)計規(guī)劃 1選開綜合39IIS服務(wù)器安裝及站點本地發(fā)布1必開基礎(chǔ)四、教學(xué)方法本課程教學(xué)由簡入深,主要采用以下教學(xué)方法:(1)模仿精彩優(yōu)秀的網(wǎng)站,了解其效果實現(xiàn)方法,并將其應(yīng)用到實驗中。(2)指定配套實驗教材中的精典實例,讓學(xué)生操作實現(xiàn)。(3)綜合運用基本知識點,實現(xiàn)復(fù)雜綜合功能。四、實驗教學(xué)內(nèi)容實驗一、優(yōu)秀網(wǎng)站賞析1.實驗?zāi)康囊笸ㄟ^對不同類型、不同風(fēng)格、不同特色的優(yōu)秀網(wǎng)站的欣賞,使學(xué)生對網(wǎng)站制作課程有一個初步了解,誘發(fā)學(xué)生的學(xué)習(xí)興趣。同時指導(dǎo)學(xué)生分析各類網(wǎng)站的總體布局、色彩搭配、內(nèi)容規(guī)劃等,為后面的學(xué)習(xí)打基礎(chǔ)。2.實驗主要內(nèi)容各種不同類型和風(fēng)格的網(wǎng)站地址如下:綜合門戶網(wǎng)站:新浪網(wǎng)政府網(wǎng)站:中華人民共和國中央人民政府/教育網(wǎng)站:清華大學(xué)/商業(yè)網(wǎng)站:淘寶網(wǎng):3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗二、體會超鏈接在網(wǎng)頁中的廣泛應(yīng)用1.實驗?zāi)康囊笸ㄟ^在瀏覽器地址欄中輸入,打開新浪網(wǎng)主頁面。點擊圖片,欄目等進入下一個頁面,體會超鏈接的應(yīng)用。理解網(wǎng)頁可以通過字體,圖片等不同的形式進行鏈接的方法。2.實驗主要內(nèi)容打開美的官網(wǎng)/,使用超級鏈接功能找到微波爐產(chǎn)品的具體信息,體會使用文字和圖片等不同的超鏈接方式。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗三、多種URL資源的訪問方法1.實驗?zāi)康囊笸ㄟ^對各種資源網(wǎng)站的訪問,理解統(tǒng)一資源定位符的定位方法及服務(wù)類型。掌握不同url資源的訪問方法2.實驗主要內(nèi)容訪問如下url資源地址如下:百度搜索:FTP://.hk/香港中文大學(xué)FTP站點3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗四、使用記事本編寫網(wǎng)頁1.實驗?zāi)康囊笫褂肳indows操作系統(tǒng)中自帶的記事本進行編輯,創(chuàng)建第一個網(wǎng)頁,體會網(wǎng)頁設(shè)計的基本方法。2.實驗主要內(nèi)容步驟1:打開記事本程序依次點擊“開始菜單程序附件記事本”找到該程序。步驟2:輸入代碼在記事本的輸入?yún)^(qū),將如下代碼粘貼到程序的工作區(qū)中。<html><head><title>我的個人主頁</title></head><body><h2align=“center”>歡迎來到我的個人主頁</h2><hr><p>這是我開發(fā)的第一個網(wǎng)頁</p></body></html>3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗五、了解EditPlus編輯器1.實驗?zāi)康囊蟀惭b專業(yè)的文本編輯器EditPlus,體會其自動添加標記、高亮顯示一些代碼和英文拼字檢查等功能。2.實驗主要內(nèi)容創(chuàng)建新文件。點擊工具欄中的“文件新建”創(chuàng)建一個新文件,將實驗四代碼寫入空白工作區(qū)。EditPlus自動將不同屬性的內(nèi)容使用不同顏色區(qū)別顯示,并能夠有效顯示錯誤標簽。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求選開實驗六、了解瀏覽工具的安裝1.實驗?zāi)康囊笫煜な袌錾铣S玫臑g覽工具。了解其安裝過程。2.實驗主要內(nèi)容微軟(Microsoft)公司的InternetExplorer(俗稱“IE”),Opera、MozillaFirefox(俗稱“火狐貍”或“火狐”)、騰訊TT等瀏覽器的安裝。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗七、HTML文件的編寫規(guī)則1.實驗?zāi)康囊笳莆站帉懞唵蜨TML文件的方法。設(shè)計一個具有HTML基本結(jié)構(gòu)的頁面,并顯示出來。2.實驗主要內(nèi)容在一個頁面上顯示下面一首詩。早發(fā)白帝城李白朝辭白帝彩云間,千里江陵一日還。兩岸猿聲啼不住,輕舟已過萬重山。創(chuàng)建頁面2-1.html,完成內(nèi)容的基本布局,在<body>內(nèi)添加需要顯示的元素。顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗八、標記元素的屬性1.實驗?zāi)康囊笸ㄟ^對文本的修飾,熟悉標記元素的屬性設(shè)置方法。2.實驗主要內(nèi)容針對實驗七中的頁面進行修飾,要求將內(nèi)容居中排列該詩標題的顏色改為#B22222的色值,適當修飾該詩內(nèi)容的字間距和行間距。修飾詩的標題樣式;修飾內(nèi)容的字間距和行間距。運行效果如下。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗九、利用style標記定義樣式1.實驗?zāi)康囊笳莆绽?lt;head>標記內(nèi)嵌入<style>標記的方法,并定義通用的樣式體會這種方法與直接使用標記屬性的不同及其優(yōu)缺點。2.實驗內(nèi)容利用實驗八的程序進行修改,在<head>內(nèi)嵌入<style>標記;在<style>標記內(nèi)添加樣式,并在正文中引用。顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗十、唐詩頁面設(shè)計1.實驗?zāi)康囊髮W(xué)習(xí)如何通過對文字與段落屬性的設(shè)置,來提高文字的藝術(shù)表現(xiàn)力。2.實驗主要內(nèi)容利用一首唐詩的素材,要求綜合運用字體、字號、字間距、行間距、顏色和對齊方式等屬性的設(shè)計,用一個獨立的頁面設(shè)計一個有良好視覺效果和閱讀效果的網(wǎng)頁。達到如下顯示效果3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗十一、文章排版1.實驗?zāi)康囊笸ㄟ^對一篇文章的標題、來源、內(nèi)容簡介和正文四個不同的部分的設(shè)置,掌握字體、顏色、行間距、頁面布局等標記和屬性的綜合運用。2.實驗主要內(nèi)容利用海倫凱勒的《假如給我三天光明》中的一節(jié)文章的部分內(nèi)容(全文參見實驗指導(dǎo)書),利用掌握的有關(guān)文本型頁面設(shè)計的基本規(guī)則,用一個獨立的網(wǎng)頁把它表現(xiàn)出來。顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗十二、新聞列表的實現(xiàn)1.實驗?zāi)康囊笳莆樟斜順擞浖捌涑S脴邮綄傩?。理解有序列表與無序列表的使用場景。掌握常見新聞列表的實現(xiàn)方法。2.實驗主要內(nèi)容用列表實現(xiàn)一個新聞顯示版塊,要求利用列表方法,適當運用字體、字號間距等的修飾完成新聞列表的定義。顯示結(jié)果如下3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗十三、利用無序列表制作頁面垂直導(dǎo)航和水平導(dǎo)航1.實驗?zāi)康囊笫煜こR妼?dǎo)航形式,并能夠利用無序列表完成簡單的導(dǎo)航設(shè)計。2.實驗主要內(nèi)容采用無序列表實現(xiàn)一個班級網(wǎng)站的導(dǎo)航,并添加樣式進行修飾,實現(xiàn)班級網(wǎng)站的水平和垂直導(dǎo)航。顯示如下結(jié)果。頁面垂直導(dǎo)航頁面水平導(dǎo)航3.實驗類別專業(yè)基礎(chǔ)4.實驗要求選開實驗十四、電子相冊的實現(xiàn)1.實驗?zāi)康囊罄昧斜韺崿F(xiàn)網(wǎng)頁中常見的圖片瀏覽模式。體會列表的不同用途。2.實驗主要內(nèi)容定義頁面結(jié)構(gòu),完成內(nèi)容的基本布局;利用無序列表標記添加所需顯示的圖片;對無序列表定義樣式。顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗十五、新聞列表的超鏈接制作1.實驗?zāi)康囊笳莆粘R娦侣劻斜淼逆溄臃椒?,修改不同鏈接形式的樣式?.實驗主要內(nèi)容對新聞列表添加鏈接,鏈接的形式是文字鏈接,鏈接打開后的目標是一篇新聞頁面。并設(shè)定鏈接的四種狀態(tài)發(fā)生時的顯示樣式。顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗十六、電子相冊鏈接的制作實驗?zāi)康囊笳莆粘R妶D片的鏈接方法,修改不同鏈接形式的樣式。2.實驗主要內(nèi)容為電子相冊中的圖片加上超鏈接,按照提供的素材,單擊第一幅圖片時,在新窗口顯示內(nèi)容。顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求選開實驗十七、利用書簽鏈接制作幫助文檔1.實驗?zāi)康囊笳莆斟^點鏈接的創(chuàng)建方法和相關(guān)設(shè)置,利用書簽鏈接制作幫助文檔。2.實驗主要內(nèi)容根據(jù)提供的素材faq.doc,利用書簽鏈接制作一個常見問題回答頁面。顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求選開實驗十八、在網(wǎng)頁中實現(xiàn)圖文混排1.實驗?zāi)康囊蟛迦雸D片及進行圖片排版,掌握圖文混排的基本方法。理解常見的圖片在左文字在右或者圖片在右文字在左、文字環(huán)繞在圖片的周圍、或者上邊、右邊、下邊,單個圖片與單行文字的排版、單個圖片與多行文字的排版、多個圖片之間實現(xiàn)的排版方法。2.實驗主要內(nèi)容實現(xiàn)一個在線銷售圖書網(wǎng)站中一本教材的圖文混排。顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗十九、成績登記表的制作1.實驗?zāi)康囊笳莆毡砀竦膭?chuàng)建、結(jié)構(gòu)調(diào)整與美化方法;熟悉表格與單元格的主要屬性及其設(shè)置方法。設(shè)計一個成績登記表結(jié)構(gòu)的頁面,并顯示出來。2.實驗主要內(nèi)容設(shè)計一個基本的成績登記表,數(shù)據(jù)包括:ID序號、學(xué)號、姓名、平時成績、期末成績、總評成績。顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗二十、產(chǎn)品介紹頁面的制作1.實驗?zāi)康囊笳莆胀ㄟ^表格來進行網(wǎng)頁頁面的布局方法;理解利用表格展示信息的方法及其優(yōu)勢。2.實驗主要內(nèi)容利用表格布局的方式完成一個產(chǎn)品介紹頁面的設(shè)計。顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求選開實驗二十一、會員登陸1.實驗?zāi)康囊笳莆毡韱蔚膭?chuàng)建、編輯、處理方法。熟悉文本輸入框和密碼輸入框的使用。2.實驗主要內(nèi)容設(shè)計一個簡單的用戶登陸頁面,會員需要填寫用戶名,密碼,并能夠通過下拉列表選擇自己的身份。顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗二十二、調(diào)查問卷1.實驗?zāi)康囊笳莆毡韱螌ο蟮墓δ堋⑻攸c和用途。熟悉單選框和復(fù)選框的使用。熟悉提交按鈕、重置按鈕、圖像按鈕的使用。熟悉文件選擇輸入框的使用。熟悉多行文本輸入框和下拉列表框的使用。2.實驗主要內(nèi)容完成一個網(wǎng)站的在線問卷調(diào)查,表單元素要用到下拉菜單、復(fù)選框、單選框、多行文本輸入框獲取調(diào)查的目的。在表單的結(jié)構(gòu)設(shè)計中,使用標簽左對齊布局,使用戶的視覺的重心放在調(diào)查的問題上。在用戶輸入表單時,按鍵盤TAB鍵進入下一步表單元素的輸入。顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗二十三、在線預(yù)訂客房表單1.實驗?zāi)康囊笫炀氄莆丈虡I(yè)網(wǎng)站的表單使用方法;綜合運用表單元素進行。2.實驗主要內(nèi)容綜合運用各種表單元素,制作酒店的客房在線預(yù)定系統(tǒng),顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求選開實驗二十四、常用頁面布局設(shè)計1.實驗?zāi)康囊笳莆誄SS定義文字、背景圖片、超鏈接控制、列表、DIV等常用屬性。完成簡單CSS+DIV頁面設(shè)計。2.實驗主要內(nèi)容利用div+css設(shè)計網(wǎng)站的主體布局一個標準的網(wǎng)站頁面應(yīng)該有l(wèi)ogo區(qū),導(dǎo)航區(qū),內(nèi)容區(qū)和版權(quán)區(qū)幾個部分。其中,內(nèi)容區(qū)又可以分為多種靈活的布局劃分模式,比如常見的左右欄,左中右欄等形式。實現(xiàn)如下四種的頁面布局,具體如下。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗二十五、css文件的四種引用方式1.實驗?zāi)康囊笳莆赵诰W(wǎng)頁中添加CSS樣式表的四種方式:標簽內(nèi)的CSS、網(wǎng)頁內(nèi)的CSS、link引用的CSS和import引用的CSS。2.實驗主要內(nèi)容利用配套源代碼,使用四種方法引用CSS的方法。體會效果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗二十六、利用CSS定位頁面元素1.實驗?zāi)康囊笳莆誄SS各種屬性的使用。熟悉利用CSS定位頁面元素的方法。2.實驗主要內(nèi)容在使用css進行頁面元素的定位中,通過調(diào)整content(內(nèi)容)、border(邊框)、padding(間隙)和margin(間隔)這4個屬性,完成油畫欣賞的頁面設(shè)計。顯示效果如下。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗二十七、用DIV+CSS布局網(wǎng)頁結(jié)構(gòu)1.實驗?zāi)康囊笳莆丈虡I(yè)網(wǎng)站的頁面布局方式。體會使用DIV+CSS布局網(wǎng)頁的方法。2.實驗主要內(nèi)容使用div+css布局方法布局的一家企業(yè)網(wǎng)站的主頁面。創(chuàng)建頁面結(jié)構(gòu),完成內(nèi)容的基本布局;定義全局的css樣式;定義各div層的css樣式。添加正文,在細化新聞顯示的css樣式。顯示如下結(jié)果。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求選開實驗二十八、認識JavaScript1.實驗?zāi)康囊笳莆認avascript程序編寫的基本語法知識,以及如何在頁面中嵌入JavaScript代碼。能夠編寫出符合要求的程序。2.實驗主要內(nèi)容利用一個用表格實現(xiàn)的登陸表格,在加載頁面時,將頁面內(nèi)容定位在瀏覽器窗口中央。初始的靜態(tài)頁面顯示如下。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗二十九、創(chuàng)建自定義函數(shù)1.實驗?zāi)康囊笳莆談?chuàng)建自定義函數(shù)的方法,理解其在頁面運行中的優(yōu)勢。并熟悉常用對象的屬性和方法,能應(yīng)用到程序當中解決問題。2.實驗主要內(nèi)容第一步,利用實驗二十八,使表格居中的代碼全部放入了一個名為init的函數(shù)中,而且位置移到了<head>標記內(nèi)。在<body>標記中定義了onload事件句柄,表示當頁面加載完成后執(zhí)行init函數(shù)。這樣的改動,使得頁面的結(jié)構(gòu)更加清晰。第二步,將init()函數(shù)分成了多個函數(shù)。其中g(shù)etViewWidth()函數(shù)和getViewHieght()函數(shù)用于獲得當前瀏覽器可用窗口的尺寸,通過把它們獨立成為函數(shù),雖然代碼簡單,但是函數(shù)的職責(zé)更加清晰,而另一個centerObject(id)函數(shù)則集中于使一個對象居中顯示,這樣不同的函數(shù)各司其職,共同完成了使一個頁面元素居中的要求。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗三十、建立外部js文件1.實驗?zāi)康囊笳莆战⑼獠縥s文件并進行引用的方法。理解其在實際設(shè)計中的優(yōu)勢。2.實驗主要內(nèi)容建立一個后綴為js的文本文件,把實驗二十九中<script>標簽中的代碼復(fù)制過來,保存到和頁面一個目錄下面。然后在<script>上通過src屬性引入這個文件就可以了。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗三十一、對象創(chuàng)建與復(fù)制1.實驗?zāi)康囊笳J識核心語言對象,掌握核心語言對象的方法和屬性的使用;理解事件響應(yīng)機制,掌握頁面事件編程;2.實驗主要內(nèi)容通過一個簡單的事件處理實驗,練習(xí)JavaScript在事件處理中的基本應(yīng)用方法。事件為完成當點擊“>>”按鈕時,將左邊列表框中選中的元素復(fù)制到右邊列表框中,同時從左邊列表框中刪除;程序運行結(jié)果如下。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗三十二、表單驗證1.實驗?zāi)康囊竽軌蚶肑avaScript語言完成對文檔內(nèi)容的交互。2.實驗主要內(nèi)容下面的實驗針對一個簡單的用戶注冊要求進行驗證,界面如下圖。必填項驗證:用戶名、密碼、重復(fù)密碼、郵箱是必填項。有效性驗證:用戶名不能以數(shù)字字符開始,只能以字母開始,且長度大于等于6個字符,小于等于20個字符;密碼和重復(fù)密碼不能和用戶名相同,且長度大于等于6個字符,小于等于20個字符;郵箱地址符合電子郵件地址的基本語法。語義驗證:密碼和重復(fù)密碼必須相同。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗三十三、動態(tài)改變樣式1.實驗?zāi)康囊笳莆談討B(tài)改變頁面元素顯示樣式的基本方法。2.實驗主要內(nèi)容要求對指定的表格對象能夠?qū)崿F(xiàn)斑馬表格。實現(xiàn)斑馬表格的關(guān)鍵是要知道表格的某一行是奇數(shù)或偶數(shù)。表格對象有一個集合屬性rows包含了所有的TR對象,訪問它是從索引號0開始的,因此可以通過對這個rows集合的元素逐個訪問來判斷每個元素在集合內(nèi)的索引值的奇偶性,進而完成目標。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求選開
實驗三十四、Canvas的使用并繪圖1.實驗?zāi)康囊罄斫獠僮鰿anvas的原理和方法。2.實驗主要內(nèi)容Canvas是HTML5中新增的一個重要元素,該元素可以被腳本語言(通常為JavaScript)控制用來繪制各種圖形顯示效果。Canvas元素本身并不具備繪圖功能,其僅僅作為圖形依賴的容器而已。本實驗通過使用js來操作頁面,實現(xiàn)畫布的繪制字符串功能。部分代碼參考如下:<canvasid="mycanvas"width="600"height="100"style="border:1pxsolid#c3c3c3;">對不起,當前瀏覽器不支持畫布元素!請更換瀏覽器或升級該瀏覽器版本!</canvas><scripttype="text/javascript">window.onload=function(){varcanvas=document.getElementById("mycanvas");varcontext2D=canvas.getContext("2d");context2D.font="30pxTimesNewRoman"; context2D.fillStyle="#ff0000";context2D.fillText("HelloCanvas,mynameisHTML5!",60,60);}</script>效果可參照下圖所示:3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗三十五、HTML5中新增表單開發(fā)技術(shù)1.實驗?zāi)康囊罄斫獠僮鱄TML5中新增的表單使用方法。2.實驗主要內(nèi)容對于企業(yè)級Web應(yīng)用來說,表單控件是最重要的頁面元素之一。在HTML5之前,各種類型的表單只能由開發(fā)人員通過復(fù)雜的屬性設(shè)置和限制條件(通過腳本計算)來完成。HTML5標準引入了一系列分類清晰、功能完善的表單控件標記,包括email、url、number、range、search、color、tel等輸入類型,還有表單屬性autocomplete、autofocus等,以及一些新增的表單元素。該實驗嘗試實現(xiàn)新增表單元素的部分功能,通過新增表單嘗試感受方便之處,并理解和運用該技術(shù)。通過采用不同類型的表單元素,來提高開發(fā)效率和顯示效果。實現(xiàn)表單運行如下:該效果顯示在Firefox上,支持大多數(shù)新增屬性。已經(jīng)可以看出date和color以及range比較明顯的效果,不用再使用js控制表單的驗證等。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗三十六、HTML5中多媒體開發(fā)技術(shù)1.實驗?zāi)康囊罄斫獠僮鱄TML5中多媒體技術(shù)開發(fā)的原理和方法,區(qū)分原有的多媒體開發(fā)技術(shù)。2.實驗主要內(nèi)容在HTML中播放音頻和視頻的方法有很多種。然而,在HTML中播放音頻視頻并不容易!為了可以播放多種格式的音頻、視頻,需要諳熟大量技巧,以確保您的音頻、視頻文件在所有瀏覽器中(InternetExplorer,Chrome,Firefox,Safari,Opera)和所有硬件上(PC,Mac,iPad,iPhone)都能夠播放。本實驗通過<audio>和<video>標簽來實現(xiàn)音頻和視頻的引用,實現(xiàn)網(wǎng)頁中播放多媒體的統(tǒng)一。其根據(jù)不同編碼的多媒體文件設(shè)置不同的類型方式。在網(wǎng)頁中body主體部分進行多媒體的嵌入,通過設(shè)置對應(yīng)類型和路徑,來判斷是否可以支持當前類型編碼的文件播放。其中視頻采用video,參考如下代碼:<videowidth="320"height="240"preload="auto"controls="controls" style="margin:10px50px;border:1pxsolid#ff0000;"><sourcesrc="test.ogg"type="video/ogg"><sourcesrc="test.mp4"type="video/mp4">對不起,當前瀏覽器不支持視頻標簽元素!請更換瀏覽器或升級該瀏覽器版本!</video>如果是音頻文件可以修改對應(yīng)的標簽元素audio即可,并設(shè)置type屬性。3.實驗類別專業(yè)基礎(chǔ)4.實驗要求必修實驗三十七、Cookie操作1.實驗?zāi)康囊罄斫獠僮鰿ookie的原理和方法。2.實驗主要內(nèi)容Cookie就是瀏覽器用來保存短信息的一種機制,服務(wù)器和瀏覽器兩端均可創(chuàng)建。實驗主要包括練習(xí)如何保存一個Cookie,如何讀取Cookie,如何更新C
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 提高CPMM學(xué)習(xí)效率的試題及答案
- 保護自己防拐防騙課件
- 物流師專業(yè)素養(yǎng)試題及答案分析
- 物流行業(yè)的挑戰(zhàn)與機遇試題與答案
- 2025年大型無菌包裝機項目投資風(fēng)險評估報告
- 強化2024年CPSM考試核心試題及答案
- 2024年CPSM考試概念解析試題及答案
- 2024國際物流師個人經(jīng)驗試題及答案
- 統(tǒng)編版語文五年級下冊第15課《自相矛盾》精美課件
- 2024年CPMM考后總結(jié)及試題及答案
- 2024年人工智能訓(xùn)練師(初級)職業(yè)鑒定理論考試題庫及答案
- 2024無油懸浮離心式冷水(熱泵)機組
- 2024玻璃鋼儲罐工程
- 第二單元 音樂故事(二)-《大海與辛巴達的船》教學(xué)設(shè)計 2023-2024學(xué)年人教版初中音樂 九年級上冊教案1000字
- 2024年湖北省十堰市行政職業(yè)能力測驗題庫附答案(綜合卷)
- 網(wǎng)絡(luò)空間安全導(dǎo)論智慧樹知到期末考試答案章節(jié)答案2024年成都信息工程大學(xué)
- 湖北省石首楚源“源網(wǎng)荷儲”一體化項目可研報告
- 小班安全《咬人的縫隙》教案
- 《生活垃圾填埋場開挖篩分技術(shù)規(guī)范》編制說明
- 浙江商業(yè)職業(yè)技術(shù)學(xué)院招聘人員考試試題及答案
- 2024年湖南中煙工業(yè)招聘筆試參考題庫含答案解析
評論
0/150
提交評論