網(wǎng)頁設(shè)計(jì)與開發(fā)實(shí)驗(yàn)課件《網(wǎng)頁設(shè)計(jì)與開發(fā)實(shí)驗(yàn)教學(xué)大綱》

《網(wǎng)頁設(shè)計(jì)與開發(fā)》實(shí)驗(yàn)教學(xué)大綱一、課程簡(jiǎn)介《網(wǎng)頁設(shè)計(jì)與開發(fā)》是高等院校計(jì)算機(jī)及其相關(guān)專業(yè)的一門重要的基礎(chǔ)課程，也是是一門實(shí)踐性和技能性要求都很強(qiáng)的學(xué)科。其實(shí)驗(yàn)課程主要圍繞網(wǎng)頁基本元素、css和Javascript、頁面布局和整站建設(shè)等理論內(nèi)容的實(shí)踐實(shí)訓(xùn)進(jìn)行開展。其主要內(nèi)容包括練習(xí)網(wǎng)頁設(shè)計(jì)的基本概念和文檔結(jié)構(gòu)，完成相關(guān)工具的安裝，練習(xí)網(wǎng)頁元素在實(shí)際應(yīng)用中的使用，包含文字與段落涉及的圖文混排方式、列表涉及的導(dǎo)航制作、表格布局局部頁面等，練習(xí)div+css的頁面布局，javascript在交互式網(wǎng)頁開發(fā)中的基本應(yīng)用，以及目前流行的HTML5技術(shù)的應(yīng)用，練習(xí)從需求分析到欄目設(shè)計(jì)最終進(jìn)行布局和細(xì)節(jié)處理以及發(fā)布的整站建設(shè)過程。二、實(shí)驗(yàn)教學(xué)的總體目標(biāo)和要求實(shí)驗(yàn)教學(xué)應(yīng)充分考慮學(xué)生對(duì)理論知識(shí)的鞏固和實(shí)踐技能的提升要求，從培養(yǎng)學(xué)生面向商業(yè)化網(wǎng)頁開發(fā)的角度出發(fā)，通過典型頁面案例，講述和示范逐步分解其中的技術(shù)實(shí)現(xiàn)，使學(xué)生能夠?qū)夹g(shù)在具體設(shè)計(jì)中的靈活使用有深刻的感受。通過本實(shí)驗(yàn)課程的學(xué)習(xí)，使學(xué)生掌握各種網(wǎng)頁元素的使用。例如，表格、文本、圖像、超級(jí)鏈接、層和表單等。熟悉一些網(wǎng)頁布局方法。掌握網(wǎng)站的開發(fā)流程，如建站規(guī)劃、頁面制作、優(yōu)化及發(fā)布等相關(guān)知識(shí)。課程完成后學(xué)生應(yīng)能夠理解網(wǎng)頁設(shè)計(jì)的基本原則，掌握網(wǎng)頁基本制作方法和技巧，并自主設(shè)計(jì)開發(fā)各種網(wǎng)頁、完成一定規(guī)模的網(wǎng)站開發(fā)。在此技術(shù)之上，了解并嘗試使用HTML5技術(shù)來實(shí)現(xiàn)之前的基礎(chǔ)網(wǎng)頁效果。三、實(shí)驗(yàn)項(xiàng)目與學(xué)時(shí)分配（39個(gè)實(shí)驗(yàn)項(xiàng)目，共計(jì)36學(xué)時(shí)）實(shí)驗(yàn)項(xiàng)目與學(xué)時(shí)分配序號(hào)實(shí)驗(yàn)項(xiàng)目學(xué)時(shí)必開/選開實(shí)驗(yàn)類型備注1優(yōu)秀網(wǎng)站賞析 1必開基礎(chǔ)2體會(huì)超鏈接在網(wǎng)頁中的廣泛應(yīng)用1必開基礎(chǔ)3多種url資源的訪問方法。 必開基礎(chǔ)4使用記事本編寫網(wǎng)頁 必開基礎(chǔ)5了解EditPlus編輯器 必開基礎(chǔ)6了解瀏覽工具的安裝 選開基礎(chǔ)7HTML文件的編寫規(guī)則 1必開基礎(chǔ)8標(biāo)記元素的屬性 必開基礎(chǔ)9利用style標(biāo)記定義樣式 1必開基礎(chǔ)10唐詩頁面設(shè)計(jì) 1必開設(shè)計(jì)11文章排版 1必開設(shè)計(jì)12新聞列表的實(shí)現(xiàn) 1必開設(shè)計(jì)13利用無序列表制作頁面垂直導(dǎo)航和水平導(dǎo)航 2選開綜合14電子相冊(cè)的實(shí)現(xiàn) 3必開設(shè)計(jì)15新聞列表的超鏈接制作 必開設(shè)計(jì)16電子相冊(cè)的超鏈接制作選開綜合17利用書簽鏈接制作幫助文檔 1選開設(shè)計(jì)18在網(wǎng)頁中實(shí)現(xiàn)圖文混排 1必開基礎(chǔ)19成績(jī)登記表的制作 1必開基礎(chǔ)20產(chǎn)品介紹頁面的制作1選開綜合21會(huì)員登陸 1必開設(shè)計(jì)22調(diào)查問卷 1必開設(shè)計(jì)23在線預(yù)訂客房表單 1選開綜合24常用頁面布局設(shè)計(jì) 1必開基礎(chǔ)25css文件的四種引用方式 1必開基礎(chǔ)26利用CSS定位頁面元素1必開設(shè)計(jì)27用DIV+CSS布局網(wǎng)頁結(jié)構(gòu) 2選開綜合28認(rèn)識(shí)JavaScript 1必開基礎(chǔ)29創(chuàng)建自定義函數(shù) 1必開基礎(chǔ)30建立外部js文件 必開基礎(chǔ)31對(duì)象創(chuàng)建與復(fù)制 1必開基礎(chǔ)32表單驗(yàn)證 1必開設(shè)計(jì)33動(dòng)態(tài)改變樣式 1選開綜合34Canvas的使用并繪圖1必開基礎(chǔ)35HTML5中新增表單開技術(shù)1必開基礎(chǔ)36HTML5中多媒體開發(fā)技術(shù)1必開基礎(chǔ)37Cookie操作 1必開基礎(chǔ)38網(wǎng)站設(shè)計(jì)規(guī)劃 1選開綜合39IIS服務(wù)器安裝及站點(diǎn)本地發(fā)布1必開基礎(chǔ)四、教學(xué)方法本課程教學(xué)由簡(jiǎn)入深，主要采用以下教學(xué)方法：（1）模仿精彩優(yōu)秀的網(wǎng)站，了解其效果實(shí)現(xiàn)方法，并將其應(yīng)用到實(shí)驗(yàn)中。（2）指定配套實(shí)驗(yàn)教材中的精典實(shí)例，讓學(xué)生操作實(shí)現(xiàn)。（3）綜合運(yùn)用基本知識(shí)點(diǎn)，實(shí)現(xiàn)復(fù)雜綜合功能。四、實(shí)驗(yàn)教學(xué)內(nèi)容實(shí)驗(yàn)一、優(yōu)秀網(wǎng)站賞析1.實(shí)驗(yàn)?zāi)康囊笸ㄟ^對(duì)不同類型、不同風(fēng)格、不同特色的優(yōu)秀網(wǎng)站的欣賞，使學(xué)生對(duì)網(wǎng)站制作課程有一個(gè)初步了解，誘發(fā)學(xué)生的學(xué)習(xí)興趣。同時(shí)指導(dǎo)學(xué)生分析各類網(wǎng)站的總體布局、色彩搭配、內(nèi)容規(guī)劃等，為后面的學(xué)習(xí)打基礎(chǔ)。2.實(shí)驗(yàn)主要內(nèi)容各種不同類型和風(fēng)格的網(wǎng)站地址如下：綜合門戶網(wǎng)站：新浪網(wǎng)政府網(wǎng)站：中華人民共和國(guó)中央人民政府/教育網(wǎng)站：清華大學(xué)/商業(yè)網(wǎng)站：淘寶網(wǎng)：3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)二、體會(huì)超鏈接在網(wǎng)頁中的廣泛應(yīng)用1.實(shí)驗(yàn)?zāi)康囊笸ㄟ^在瀏覽器地址欄中輸入，打開新浪網(wǎng)主頁面。點(diǎn)擊圖片，欄目等進(jìn)入下一個(gè)頁面，體會(huì)超鏈接的應(yīng)用。理解網(wǎng)頁可以通過字體，圖片等不同的形式進(jìn)行鏈接的方法。2.實(shí)驗(yàn)主要內(nèi)容打開美的官網(wǎng)/，使用超級(jí)鏈接功能找到微波爐產(chǎn)品的具體信息，體會(huì)使用文字和圖片等不同的超鏈接方式。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)三、多種URL資源的訪問方法1.實(shí)驗(yàn)?zāi)康囊笸ㄟ^對(duì)各種資源網(wǎng)站的訪問，理解統(tǒng)一資源定位符的定位方法及服務(wù)類型。掌握不同url資源的訪問方法2.實(shí)驗(yàn)主要內(nèi)容訪問如下url資源地址如下：百度搜索：FTP://.hk/香港中文大學(xué)FTP站點(diǎn)3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)四、使用記事本編寫網(wǎng)頁1.實(shí)驗(yàn)?zāi)康囊笫褂肳indows操作系統(tǒng)中自帶的記事本進(jìn)行編輯，創(chuàng)建第一個(gè)網(wǎng)頁，體會(huì)網(wǎng)頁設(shè)計(jì)的基本方法。2.實(shí)驗(yàn)主要內(nèi)容步驟1：打開記事本程序依次點(diǎn)擊“開始菜單程序附件記事本”找到該程序。步驟2：輸入代碼在記事本的輸入?yún)^(qū)，將如下代碼粘貼到程序的工作區(qū)中。<html><head><title>我的個(gè)人主頁</title></head><body><h2align=“center”>歡迎來到我的個(gè)人主頁</h2><hr><p>這是我開發(fā)的第一個(gè)網(wǎng)頁</p></body></html>3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)五、了解EditPlus編輯器1.實(shí)驗(yàn)?zāi)康囊蟀惭b專業(yè)的文本編輯器EditPlus，體會(huì)其自動(dòng)添加標(biāo)記、高亮顯示一些代碼和英文拼字檢查等功能。2.實(shí)驗(yàn)主要內(nèi)容創(chuàng)建新文件。點(diǎn)擊工具欄中的“文件新建”創(chuàng)建一個(gè)新文件，將實(shí)驗(yàn)四代碼寫入空白工作區(qū)。EditPlus自動(dòng)將不同屬性的內(nèi)容使用不同顏色區(qū)別顯示，并能夠有效顯示錯(cuò)誤標(biāo)簽。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求選開實(shí)驗(yàn)六、了解瀏覽工具的安裝1.實(shí)驗(yàn)?zāi)康囊笫煜な袌?chǎng)上常用的瀏覽工具。了解其安裝過程。2.實(shí)驗(yàn)主要內(nèi)容微軟（Microsoft）公司的InternetExplorer（俗稱“IE”），Opera、MozillaFirefox（俗稱“火狐貍”或“火狐”）、騰訊TT等瀏覽器的安裝。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)七、HTML文件的編寫規(guī)則1.實(shí)驗(yàn)?zāi)康囊笳莆站帉懞?jiǎn)單HTML文件的方法。設(shè)計(jì)一個(gè)具有HTML基本結(jié)構(gòu)的頁面，并顯示出來。2.實(shí)驗(yàn)主要內(nèi)容在一個(gè)頁面上顯示下面一首詩。早發(fā)白帝城李白朝辭白帝彩云間，千里江陵一日還。兩岸猿聲啼不住，輕舟已過萬重山。創(chuàng)建頁面2-1.html，完成內(nèi)容的基本布局，在<body>內(nèi)添加需要顯示的元素。顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)八、標(biāo)記元素的屬性1.實(shí)驗(yàn)?zāi)康囊笸ㄟ^對(duì)文本的修飾，熟悉標(biāo)記元素的屬性設(shè)置方法。2.實(shí)驗(yàn)主要內(nèi)容針對(duì)實(shí)驗(yàn)七中的頁面進(jìn)行修飾，要求將內(nèi)容居中排列該詩標(biāo)題的顏色改為#B22222的色值，適當(dāng)修飾該詩內(nèi)容的字間距和行間距。修飾詩的標(biāo)題樣式；修飾內(nèi)容的字間距和行間距。運(yùn)行效果如下。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)九、利用style標(biāo)記定義樣式1.實(shí)驗(yàn)?zāi)康囊笳莆绽?lt;head>標(biāo)記內(nèi)嵌入<style>標(biāo)記的方法，并定義通用的樣式體會(huì)這種方法與直接使用標(biāo)記屬性的不同及其優(yōu)缺點(diǎn)。2.實(shí)驗(yàn)內(nèi)容利用實(shí)驗(yàn)八的程序進(jìn)行修改，在<head>內(nèi)嵌入<style>標(biāo)記；在<style>標(biāo)記內(nèi)添加樣式，并在正文中引用。顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)十、唐詩頁面設(shè)計(jì)1.實(shí)驗(yàn)?zāi)康囊髮W(xué)習(xí)如何通過對(duì)文字與段落屬性的設(shè)置，來提高文字的藝術(shù)表現(xiàn)力。2.實(shí)驗(yàn)主要內(nèi)容利用一首唐詩的素材，要求綜合運(yùn)用字體、字號(hào)、字間距、行間距、顏色和對(duì)齊方式等屬性的設(shè)計(jì)，用一個(gè)獨(dú)立的頁面設(shè)計(jì)一個(gè)有良好視覺效果和閱讀效果的網(wǎng)頁。達(dá)到如下顯示效果3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)十一、文章排版1.實(shí)驗(yàn)?zāi)康囊笸ㄟ^對(duì)一篇文章的標(biāo)題、來源、內(nèi)容簡(jiǎn)介和正文四個(gè)不同的部分的設(shè)置，掌握字體、顏色、行間距、頁面布局等標(biāo)記和屬性的綜合運(yùn)用。2.實(shí)驗(yàn)主要內(nèi)容利用海倫凱勒的《假如給我三天光明》中的一節(jié)文章的部分內(nèi)容（全文參見實(shí)驗(yàn)指導(dǎo)書），利用掌握的有關(guān)文本型頁面設(shè)計(jì)的基本規(guī)則，用一個(gè)獨(dú)立的網(wǎng)頁把它表現(xiàn)出來。顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)十二、新聞列表的實(shí)現(xiàn)1.實(shí)驗(yàn)?zāi)康囊笳莆樟斜順?biāo)記及其常用樣式屬性。理解有序列表與無序列表的使用場(chǎng)景。掌握常見新聞列表的實(shí)現(xiàn)方法。2.實(shí)驗(yàn)主要內(nèi)容用列表實(shí)現(xiàn)一個(gè)新聞顯示版塊，要求利用列表方法，適當(dāng)運(yùn)用字體、字號(hào)間距等的修飾完成新聞列表的定義。顯示結(jié)果如下3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)十三、利用無序列表制作頁面垂直導(dǎo)航和水平導(dǎo)航1.實(shí)驗(yàn)?zāi)康囊笫煜こＲ妼?dǎo)航形式，并能夠利用無序列表完成簡(jiǎn)單的導(dǎo)航設(shè)計(jì)。2.實(shí)驗(yàn)主要內(nèi)容采用無序列表實(shí)現(xiàn)一個(gè)班級(jí)網(wǎng)站的導(dǎo)航，并添加樣式進(jìn)行修飾，實(shí)現(xiàn)班級(jí)網(wǎng)站的水平和垂直導(dǎo)航。顯示如下結(jié)果。頁面垂直導(dǎo)航頁面水平導(dǎo)航3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求選開實(shí)驗(yàn)十四、電子相冊(cè)的實(shí)現(xiàn)1.實(shí)驗(yàn)?zāi)康囊罄昧斜韺?shí)現(xiàn)網(wǎng)頁中常見的圖片瀏覽模式。體會(huì)列表的不同用途。2.實(shí)驗(yàn)主要內(nèi)容定義頁面結(jié)構(gòu)，完成內(nèi)容的基本布局；利用無序列表標(biāo)記添加所需顯示的圖片；對(duì)無序列表定義樣式。顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)十五、新聞列表的超鏈接制作1.實(shí)驗(yàn)?zāi)康囊笳莆粘Ｒ娦侣劻斜淼逆溄臃椒?，修改不同鏈接形式的樣式?.實(shí)驗(yàn)主要內(nèi)容對(duì)新聞列表添加鏈接，鏈接的形式是文字鏈接，鏈接打開后的目標(biāo)是一篇新聞頁面。并設(shè)定鏈接的四種狀態(tài)發(fā)生時(shí)的顯示樣式。顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)十六、電子相冊(cè)鏈接的制作實(shí)驗(yàn)?zāi)康囊笳莆粘Ｒ妶D片的鏈接方法，修改不同鏈接形式的樣式。2.實(shí)驗(yàn)主要內(nèi)容為電子相冊(cè)中的圖片加上超鏈接，按照提供的素材，單擊第一幅圖片時(shí)，在新窗口顯示內(nèi)容。顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求選開實(shí)驗(yàn)十七、利用書簽鏈接制作幫助文檔1.實(shí)驗(yàn)?zāi)康囊笳莆斟^點(diǎn)鏈接的創(chuàng)建方法和相關(guān)設(shè)置，利用書簽鏈接制作幫助文檔。2.實(shí)驗(yàn)主要內(nèi)容根據(jù)提供的素材faq.doc，利用書簽鏈接制作一個(gè)常見問題回答頁面。顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求選開實(shí)驗(yàn)十八、在網(wǎng)頁中實(shí)現(xiàn)圖文混排1.實(shí)驗(yàn)?zāi)康囊蟛迦雸D片及進(jìn)行圖片排版，掌握?qǐng)D文混排的基本方法。理解常見的圖片在左文字在右或者圖片在右文字在左、文字環(huán)繞在圖片的周圍、或者上邊、右邊、下邊，單個(gè)圖片與單行文字的排版、單個(gè)圖片與多行文字的排版、多個(gè)圖片之間實(shí)現(xiàn)的排版方法。2.實(shí)驗(yàn)主要內(nèi)容實(shí)現(xiàn)一個(gè)在線銷售圖書網(wǎng)站中一本教材的圖文混排。顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)十九、成績(jī)登記表的制作1.實(shí)驗(yàn)?zāi)康囊笳莆毡砀竦膭?chuàng)建、結(jié)構(gòu)調(diào)整與美化方法；熟悉表格與單元格的主要屬性及其設(shè)置方法。設(shè)計(jì)一個(gè)成績(jī)登記表結(jié)構(gòu)的頁面，并顯示出來。2.實(shí)驗(yàn)主要內(nèi)容設(shè)計(jì)一個(gè)基本的成績(jī)登記表，數(shù)據(jù)包括：ID序號(hào)、學(xué)號(hào)、姓名、平時(shí)成績(jī)、期末成績(jī)、總評(píng)成績(jī)。顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)二十、產(chǎn)品介紹頁面的制作1.實(shí)驗(yàn)?zāi)康囊笳莆胀ㄟ^表格來進(jìn)行網(wǎng)頁頁面的布局方法；理解利用表格展示信息的方法及其優(yōu)勢(shì)。2.實(shí)驗(yàn)主要內(nèi)容利用表格布局的方式完成一個(gè)產(chǎn)品介紹頁面的設(shè)計(jì)。顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求選開實(shí)驗(yàn)二十一、會(huì)員登陸1.實(shí)驗(yàn)?zāi)康囊笳莆毡韱蔚膭?chuàng)建、編輯、處理方法。熟悉文本輸入框和密碼輸入框的使用。2.實(shí)驗(yàn)主要內(nèi)容設(shè)計(jì)一個(gè)簡(jiǎn)單的用戶登陸頁面，會(huì)員需要填寫用戶名，密碼，并能夠通過下拉列表選擇自己的身份。顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)二十二、調(diào)查問卷1.實(shí)驗(yàn)?zāi)康囊笳莆毡韱螌?duì)象的功能、特點(diǎn)和用途。熟悉單選框和復(fù)選框的使用。熟悉提交按鈕、重置按鈕、圖像按鈕的使用。熟悉文件選擇輸入框的使用。熟悉多行文本輸入框和下拉列表框的使用。2.實(shí)驗(yàn)主要內(nèi)容完成一個(gè)網(wǎng)站的在線問卷調(diào)查，表單元素要用到下拉菜單、復(fù)選框、單選框、多行文本輸入框獲取調(diào)查的目的。在表單的結(jié)構(gòu)設(shè)計(jì)中，使用標(biāo)簽左對(duì)齊布局，使用戶的視覺的重心放在調(diào)查的問題上。在用戶輸入表單時(shí)，按鍵盤TAB鍵進(jìn)入下一步表單元素的輸入。顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)二十三、在線預(yù)訂客房表單1.實(shí)驗(yàn)?zāi)康囊笫炀氄莆丈虡I(yè)網(wǎng)站的表單使用方法；綜合運(yùn)用表單元素進(jìn)行。2.實(shí)驗(yàn)主要內(nèi)容綜合運(yùn)用各種表單元素，制作酒店的客房在線預(yù)定系統(tǒng)，顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求選開實(shí)驗(yàn)二十四、常用頁面布局設(shè)計(jì)1.實(shí)驗(yàn)?zāi)康囊笳莆誄SS定義文字、背景圖片、超鏈接控制、列表、DIV等常用屬性。完成簡(jiǎn)單CSS+DIV頁面設(shè)計(jì)。2.實(shí)驗(yàn)主要內(nèi)容利用div+css設(shè)計(jì)網(wǎng)站的主體布局一個(gè)標(biāo)準(zhǔn)的網(wǎng)站頁面應(yīng)該有l(wèi)ogo區(qū)，導(dǎo)航區(qū)，內(nèi)容區(qū)和版權(quán)區(qū)幾個(gè)部分。其中，內(nèi)容區(qū)又可以分為多種靈活的布局劃分模式，比如常見的左右欄，左中右欄等形式。實(shí)現(xiàn)如下四種的頁面布局，具體如下。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)二十五、css文件的四種引用方式1.實(shí)驗(yàn)?zāi)康囊笳莆赵诰W(wǎng)頁中添加CSS樣式表的四種方式:標(biāo)簽內(nèi)的CSS、網(wǎng)頁內(nèi)的CSS、link引用的CSS和import引用的CSS。2.實(shí)驗(yàn)主要內(nèi)容利用配套源代碼，使用四種方法引用CSS的方法。體會(huì)效果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)二十六、利用CSS定位頁面元素1.實(shí)驗(yàn)?zāi)康囊笳莆誄SS各種屬性的使用。熟悉利用CSS定位頁面元素的方法。2.實(shí)驗(yàn)主要內(nèi)容在使用css進(jìn)行頁面元素的定位中，通過調(diào)整content（內(nèi)容）、border（邊框）、padding（間隙）和margin（間隔）這4個(gè)屬性，完成油畫欣賞的頁面設(shè)計(jì)。顯示效果如下。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)二十七、用DIV+CSS布局網(wǎng)頁結(jié)構(gòu)1.實(shí)驗(yàn)?zāi)康囊笳莆丈虡I(yè)網(wǎng)站的頁面布局方式。體會(huì)使用DIV+CSS布局網(wǎng)頁的方法。2.實(shí)驗(yàn)主要內(nèi)容使用div+css布局方法布局的一家企業(yè)網(wǎng)站的主頁面。創(chuàng)建頁面結(jié)構(gòu)，完成內(nèi)容的基本布局；定義全局的css樣式；定義各div層的css樣式。添加正文，在細(xì)化新聞顯示的css樣式。顯示如下結(jié)果。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求選開實(shí)驗(yàn)二十八、認(rèn)識(shí)JavaScript1.實(shí)驗(yàn)?zāi)康囊笳莆認(rèn)avascript程序編寫的基本語法知識(shí)，以及如何在頁面中嵌入JavaScript代碼。能夠編寫出符合要求的程序。2.實(shí)驗(yàn)主要內(nèi)容利用一個(gè)用表格實(shí)現(xiàn)的登陸表格，在加載頁面時(shí)，將頁面內(nèi)容定位在瀏覽器窗口中央。初始的靜態(tài)頁面顯示如下。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)二十九、創(chuàng)建自定義函數(shù)1.實(shí)驗(yàn)?zāi)康囊笳莆談?chuàng)建自定義函數(shù)的方法，理解其在頁面運(yùn)行中的優(yōu)勢(shì)。并熟悉常用對(duì)象的屬性和方法，能應(yīng)用到程序當(dāng)中解決問題。2.實(shí)驗(yàn)主要內(nèi)容第一步，利用實(shí)驗(yàn)二十八，使表格居中的代碼全部放入了一個(gè)名為init的函數(shù)中，而且位置移到了<head>標(biāo)記內(nèi)。在<body>標(biāo)記中定義了onload事件句柄，表示當(dāng)頁面加載完成后執(zhí)行init函數(shù)。這樣的改動(dòng)，使得頁面的結(jié)構(gòu)更加清晰。第二步，將init()函數(shù)分成了多個(gè)函數(shù)。其中g(shù)etViewWidth()函數(shù)和getViewHieght()函數(shù)用于獲得當(dāng)前瀏覽器可用窗口的尺寸，通過把它們獨(dú)立成為函數(shù)，雖然代碼簡(jiǎn)單，但是函數(shù)的職責(zé)更加清晰，而另一個(gè)centerObject(id)函數(shù)則集中于使一個(gè)對(duì)象居中顯示，這樣不同的函數(shù)各司其職，共同完成了使一個(gè)頁面元素居中的要求。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)三十、建立外部js文件1.實(shí)驗(yàn)?zāi)康囊笳莆战⑼獠縥s文件并進(jìn)行引用的方法。理解其在實(shí)際設(shè)計(jì)中的優(yōu)勢(shì)。2.實(shí)驗(yàn)主要內(nèi)容建立一個(gè)后綴為js的文本文件，把實(shí)驗(yàn)二十九中<script>標(biāo)簽中的代碼復(fù)制過來，保存到和頁面一個(gè)目錄下面。然后在<script>上通過src屬性引入這個(gè)文件就可以了。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)三十一、對(duì)象創(chuàng)建與復(fù)制1.實(shí)驗(yàn)?zāi)康囊笳J(rèn)識(shí)核心語言對(duì)象，掌握核心語言對(duì)象的方法和屬性的使用；理解事件響應(yīng)機(jī)制，掌握頁面事件編程；2.實(shí)驗(yàn)主要內(nèi)容通過一個(gè)簡(jiǎn)單的事件處理實(shí)驗(yàn)，練習(xí)JavaScript在事件處理中的基本應(yīng)用方法。事件為完成當(dāng)點(diǎn)擊“>>”按鈕時(shí)，將左邊列表框中選中的元素復(fù)制到右邊列表框中，同時(shí)從左邊列表框中刪除；程序運(yùn)行結(jié)果如下。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)三十二、表單驗(yàn)證1.實(shí)驗(yàn)?zāi)康囊竽軌蚶肑avaScript語言完成對(duì)文檔內(nèi)容的交互。2.實(shí)驗(yàn)主要內(nèi)容下面的實(shí)驗(yàn)針對(duì)一個(gè)簡(jiǎn)單的用戶注冊(cè)要求進(jìn)行驗(yàn)證，界面如下圖。必填項(xiàng)驗(yàn)證：用戶名、密碼、重復(fù)密碼、郵箱是必填項(xiàng)。有效性驗(yàn)證：用戶名不能以數(shù)字字符開始，只能以字母開始，且長(zhǎng)度大于等于6個(gè)字符，小于等于20個(gè)字符；密碼和重復(fù)密碼不能和用戶名相同，且長(zhǎng)度大于等于6個(gè)字符，小于等于20個(gè)字符；郵箱地址符合電子郵件地址的基本語法。語義驗(yàn)證：密碼和重復(fù)密碼必須相同。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)三十三、動(dòng)態(tài)改變樣式1.實(shí)驗(yàn)?zāi)康囊笳莆談?dòng)態(tài)改變頁面元素顯示樣式的基本方法。2.實(shí)驗(yàn)主要內(nèi)容要求對(duì)指定的表格對(duì)象能夠?qū)崿F(xiàn)斑馬表格。實(shí)現(xiàn)斑馬表格的關(guān)鍵是要知道表格的某一行是奇數(shù)或偶數(shù)。表格對(duì)象有一個(gè)集合屬性rows包含了所有的TR對(duì)象，訪問它是從索引號(hào)0開始的，因此可以通過對(duì)這個(gè)rows集合的元素逐個(gè)訪問來判斷每個(gè)元素在集合內(nèi)的索引值的奇偶性，進(jìn)而完成目標(biāo)。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求選開

實(shí)驗(yàn)三十四、Canvas的使用并繪圖1.實(shí)驗(yàn)?zāi)康囊罄斫獠僮鰿anvas的原理和方法。2.實(shí)驗(yàn)主要內(nèi)容Canvas是HTML5中新增的一個(gè)重要元素，該元素可以被腳本語言（通常為JavaScript）控制用來繪制各種圖形顯示效果。Canvas元素本身并不具備繪圖功能，其僅僅作為圖形依賴的容器而已。本實(shí)驗(yàn)通過使用js來操作頁面，實(shí)現(xiàn)畫布的繪制字符串功能。部分代碼參考如下：<canvasid="mycanvas"width="600"height="100"style="border:1pxsolid#c3c3c3;">對(duì)不起，當(dāng)前瀏覽器不支持畫布元素！請(qǐng)更換瀏覽器或升級(jí)該瀏覽器版本！</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.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)三十五、HTML5中新增表單開發(fā)技術(shù)1.實(shí)驗(yàn)?zāi)康囊罄斫獠僮鱄TML5中新增的表單使用方法。2.實(shí)驗(yàn)主要內(nèi)容對(duì)于企業(yè)級(jí)Web應(yīng)用來說，表單控件是最重要的頁面元素之一。在HTML5之前，各種類型的表單只能由開發(fā)人員通過復(fù)雜的屬性設(shè)置和限制條件（通過腳本計(jì)算）來完成。HTML5標(biāo)準(zhǔn)引入了一系列分類清晰、功能完善的表單控件標(biāo)記，包括email、url、number、range、search、color、tel等輸入類型，還有表單屬性autocomplete、autofocus等，以及一些新增的表單元素。該實(shí)驗(yàn)嘗試實(shí)現(xiàn)新增表單元素的部分功能，通過新增表單嘗試感受方便之處，并理解和運(yùn)用該技術(shù)。通過采用不同類型的表單元素，來提高開發(fā)效率和顯示效果。實(shí)現(xiàn)表單運(yùn)行如下：該效果顯示在Firefox上，支持大多數(shù)新增屬性。已經(jīng)可以看出date和color以及range比較明顯的效果，不用再使用js控制表單的驗(yàn)證等。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)三十六、HTML5中多媒體開發(fā)技術(shù)1.實(shí)驗(yàn)?zāi)康囊罄斫獠僮鱄TML5中多媒體技術(shù)開發(fā)的原理和方法，區(qū)分原有的多媒體開發(fā)技術(shù)。2.實(shí)驗(yàn)主要內(nèi)容在HTML中播放音頻和視頻的方法有很多種。然而，在HTML中播放音頻視頻并不容易！為了可以播放多種格式的音頻、視頻，需要諳熟大量技巧，以確保您的音頻、視頻文件在所有瀏覽器中（InternetExplorer,Chrome,Firefox,Safari,Opera）和所有硬件上（PC,Mac,iPad,iPhone）都能夠播放。本實(shí)驗(yàn)通過<audio>和<video>標(biāo)簽來實(shí)現(xiàn)音頻和視頻的引用，實(shí)現(xiàn)網(wǎng)頁中播放多媒體的統(tǒng)一。其根據(jù)不同編碼的多媒體文件設(shè)置不同的類型方式。在網(wǎng)頁中body主體部分進(jìn)行多媒體的嵌入，通過設(shè)置對(duì)應(yīng)類型和路徑，來判斷是否可以支持當(dā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">對(duì)不起，當(dāng)前瀏覽器不支持視頻標(biāo)簽元素！請(qǐng)更換瀏覽器或升級(jí)該瀏覽器版本！</video>如果是音頻文件可以修改對(duì)應(yīng)的標(biāo)簽元素audio即可，并設(shè)置type屬性。3.實(shí)驗(yàn)類別專業(yè)基礎(chǔ)4.實(shí)驗(yàn)要求必修實(shí)驗(yàn)三十七、Cookie操作1.實(shí)驗(yàn)?zāi)康囊罄斫獠僮鰿ookie的原理和方法。2.實(shí)驗(yàn)主要內(nèi)容Cookie就是瀏覽器用來保存短信息的一種機(jī)制，服務(wù)器和瀏覽器兩端均可創(chuàng)建。實(shí)驗(yàn)主要包括練習(xí)如何保存一個(gè)Cookie，如何讀取Cookie，如何更新C