版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rè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)進(jì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è)計最終進(jìn)行布局和細(xì)節(jié)處理以及發(fā)布的
整站建設(shè)過程。
二、實驗教學(xué)的總體目標(biāo)和要求
實驗教學(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標(biāo)記元素的屬性必開基礎(chǔ)
9利用style標(biāo)記定義樣式1必開基礎(chǔ)
10唐詩頁面設(shè)計1必開設(shè)計
11文章排版1必開設(shè)計
12新聞列表的實現(xiàn)1必開設(shè)計
13利用無序列表制作頁面垂直導(dǎo)航2選開綜合
和水平導(dǎo)航
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認(rèn)識JavaScript1必開基礎(chǔ)
29創(chuàng)建自定義函數(shù)必開基礎(chǔ)
1
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)康囊?/p>
通過對不同類型、不同風(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)http：//www.sina.com.cn
政府網(wǎng)站：中華人民共和國中央人民政府http：//www.gov.cn/
教育網(wǎng)站:清華大學(xué)http：//www.tsinghua.edu.cn/
商業(yè)網(wǎng)站：淘寶網(wǎng)：http：//www.taobao.com
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗二、體會超鏈接在網(wǎng)頁中的廣泛應(yīng)用
1.實驗?zāi)康囊?/p>
通過在瀏覽器地址欄中輸入www.sina.com.cn,打開新浪網(wǎng)
主頁面。點擊圖片，欄目等進(jìn)入下一個頁面，體會超鏈接的應(yīng)用。
理解網(wǎng)頁可以通過字體，圖片等不同的形式進(jìn)行鏈接的方法。
2.實驗主要內(nèi)容
打開美的官網(wǎng)http：//www.midea.com.cn/,使用超級鏈接功
能找到微波爐產(chǎn)品的具體信息，體會使用文字和圖片等不同的超鏈接
方式。
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗三、多種URL資源的訪問方法
1.實驗?zāi)康囊?/p>
通過對各種資源網(wǎng)站的訪問，理解統(tǒng)一資源定位符的定位方法
及服務(wù)類型。掌握不同url資源的訪問方法
2.實驗主要內(nèi)容
訪問如下url資源地址如下：
百度搜索：http：//WWAV.baidu.com
FTP：//ftp.cuhk.edu.hk/香港中文大學(xué)FTP站點
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗四、使用記事本編寫網(wǎng)頁
1.實驗?zāi)康囊?/p>
使用Windows操作系統(tǒng)中自帶的記事本進(jìn)行編輯，創(chuàng)建第一
個網(wǎng)頁，體會網(wǎng)頁設(shè)計的基本方法。
2.實驗主要內(nèi)容
步驟1：打開記事本程序
依次點擊”開始菜單今程序今附件今記事本”找到該程序。
步驟2：輸入代碼
在記事本的輸入?yún)^(qū)，將如下代碼粘貼到程序的工作區(qū)中。
<html>
<head>
我的個人主頁</title>
</head>
<body>
<h2align=''center”>歡迎來到我的個人主頁</h2>
<hr>
<p>這是我開發(fā)的第一個網(wǎng)頁</p>
</body>
</html>
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗五、了解EditPlus編輯器
1.實驗?zāi)康囊?/p>
安裝專業(yè)的文本編輯器EditPlus,體會其自動添加標(biāo)記、高亮
顯示一些代碼和英文拼字檢查等功能。
2.實驗主要內(nèi)容
創(chuàng)建新文件。點擊工具欄中的“文件f新建”創(chuàng)建一個新文件，
將實驗四代碼寫入空白工作區(qū)。EditPlus自動將不同屬性的內(nèi)容使
用不同顏色區(qū)別顯示，并能夠有效顯示錯誤標(biāo)簽。
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
選開
實驗六、了解瀏覽工具的安裝
1.實驗?zāi)康囊?/p>
熟悉市場上常用的瀏覽工具。了解其安裝過程。
2.實驗主要內(nèi)容
微軟（Microsoft）公司的InternetExplorer（俗稱"IE"）,Opera,
MozillaFirefox（俗稱"火狐貍"或"火狐〃）、騰訊TT等瀏覽器的安
裝。
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗七、HTML文件的編寫規(guī)則
1.實驗?zāi)康囊?/p>
掌握編寫簡單HTML文件的方法。設(shè)計一個具有HTML基本結(jié)構(gòu)的
頁面，并顯示出來。
2.實驗主要內(nèi)容
在一個頁面上顯示下面一首詩。
早發(fā)白帝城
李白
朝辭白帝彩云間，千里江陵一日還。
兩岸猿聲啼不住，輕舟已過萬重山。
創(chuàng)建頁面2-1.html,完成內(nèi)容的基本布局，在＜body＞內(nèi)添加需
要顯示的元素。顯示如下結(jié)果。
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗八、標(biāo)記元素的屬性
1.實驗?zāi)康囊?/p>
通過對文本的修飾，熟悉標(biāo)記元素的屬性設(shè)置方法。
2.實驗主要內(nèi)容
針對實驗七中的頁面進(jìn)行修飾，要求將內(nèi)容居中排列該詩標(biāo)題
的顏色改為#B22222的色值，適當(dāng)修飾該詩內(nèi)容的字間距和行間距。
修飾詩的標(biāo)題樣式；修飾內(nèi)容的字間距和行間距。運行效果如下。
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗九、利用style標(biāo)記定義樣式
1.實驗?zāi)康囊?/p>
掌握利用＜head＞標(biāo)記內(nèi)嵌入〈style》標(biāo)記的方法，并定義通用
的樣式體會這種方法與直接使用標(biāo)記屬性的不同及其優(yōu)缺點。
2.實驗內(nèi)容
利用實驗八的程序進(jìn)行修改，在＜head＞內(nèi)嵌入＜style＞標(biāo)記；
在＜style＞標(biāo)記內(nèi)添加樣式，并在正文中引用。顯示如下結(jié)果。
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗十、唐詩頁面設(shè)計
1.實驗?zāi)康囊?/p>
學(xué)習(xí)如何通過對文字與段落屬性的設(shè)置，來提高文字的藝術(shù)表現(xiàn)
力。
2.實驗主要內(nèi)容
利用一首唐詩的素材，要求綜合運用字體、字號、字間距、行間
距、顏色和對齊方式等屬性的設(shè)計，用一個獨立的頁面設(shè)計一個有良
好視覺效果和閱讀效果的網(wǎng)頁。達(dá)到如下顯示效果
早發(fā)白帝城
李白
朝辭白帝彩云間，千里江陵一日還。
兩岸猿聲啼不住，輕舟已過萬重山。
【危析】詩是寫景的.通那宗箜元二年(759),詩人布放衣郎，行至白帝遇敕?秉
舟東還江陵時而作此詩.詩意在描里自白帝至江陵一段長江，水息版速，舟行若飛的
情況.百句寫白帝城之高，二句號江陵路遙，舟行迅速，三句以山影象聲烘托行舟飛
13.四句寫行舟輕如無趣,森明水勢如雪.全詩佟接挺拔?-SHT.快船快意.，令
人1?遠(yuǎn).難怪乎明人楊慎贊日I"驚風(fēng)雨而泣鬼神矣！”
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗十一、文章排版
1.實驗?zāi)康囊?/p>
通過對一篇文章的標(biāo)題、來源、內(nèi)容簡介和正文四個不同的部分
的設(shè)置，掌握字體、顏色、行間距、頁面布局等標(biāo)記和屬性的綜合運
用。
2.實驗主要內(nèi)容
利用海倫?凱勒的《假如給我三天光明》中的一節(jié)文章的部分內(nèi)
容（全文參見實驗指導(dǎo)書），利用掌握的有關(guān)文本型頁面設(shè)計的基本
規(guī)則，用一個獨立的網(wǎng)頁把它表現(xiàn)出來。顯示如下結(jié)果。
圣誕節(jié)
【內(nèi)容弟介】供三是海尼?IW#的貌文代衰件，,1?多茂省?金田木一子在利
布..13主的f*.—匕桿王Cl于-tn,此夕卜..心中收，的ATWi是
涉蔚文小蛆來勤培慚甘比登后的有一4'英因力成為我的空的空■.安定的每個人州在為
我相備一線不馴的扎相.而更令人興有的1:我和方拜文小姐也在為耳他人洽備■外的禮
物.
建X興售不禽了.票19■人們到底蛉我什么禮府.女人們也裳息亦注逗引我.曲意給他
一星半點兒"呆，戰(zhàn)營一旬平句不逐蟆劣話備，讓我震測.我孫莎禮文小想就玩者追■謎街
5W.我從中宇會了訐雷面的用!￡?比上謖季到第還梅齡.
嗎天戲上，我們要詼郁圉坐在膜煥笊的火爐前玩?殘謎而戲.圣逸的一夭天18近，我們
也急來IS興譽.
一天早上?我把9蘢放在S?臺上，伏后去打水除它流爆.BDJR-ffn.感覺到一只大能
從我刖腳底下鉆了出去.起初我并沒在惠?可是當(dāng)我把一只手但避蘢子，沒有瘦料小格第83
??.也沒有1*51它關(guān)關(guān)的小府時?我心里使明白了，欣再也見不封我那可愛的小款手了.
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗十二、新聞列表的實現(xiàn)
1.實驗?zāi)康囊?/p>
掌握列表標(biāo)記及其常用樣式屬性。理解有序列表與無序列表的
使用場景。掌握常見新聞列表的實現(xiàn)方法。
2.實驗主要內(nèi)容
用列表實現(xiàn)一個新聞顯示版塊，要求利用列表方法，適當(dāng)運用字
體、字號間距等的修飾完成新聞列表的定義。顯示結(jié)果如下
暴雪：商業(yè)藝術(shù)與技術(shù)的平衡之道
?點選名將搶禮包《千軍破》首服開啟
?戰(zhàn)國新游《王者天下》開啟搶禮包
?快來玩《德州撲克》與人斗其樂無窮
?《十年一劍》真武俠一區(qū)開啟搶禮包
?可買賣游戲代碼傳魔獸大災(zāi)變過審批
?兒時游戲50年變遷00后迷動畫愛網(wǎng)游
?監(jiān)獄強迫犯人打網(wǎng)游徐州禁少年進(jìn)網(wǎng)吧
?ipa誠為最賺錢的移動游戲平臺
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗十三、利用無序列表制作頁面垂直導(dǎo)航和水平導(dǎo)航
1.實驗?zāi)康囊?/p>
熟悉常見導(dǎo)航形式，并能夠利用無序列表完成簡單的導(dǎo)航設(shè)計。
2.實驗主要內(nèi)容
采用無序列表實現(xiàn)一個班級網(wǎng)站的導(dǎo)航，并添加樣式進(jìn)行修飾,
實現(xiàn)班級網(wǎng)站的水平和垂直導(dǎo)航。顯示如下結(jié)果。
班級首頁班級首頁班級日志個人風(fēng)采
班級日F
個人風(fēng)采
頁面垂直導(dǎo)航頁面水平導(dǎo)航
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
選開
實驗十四、電子相冊的實現(xiàn)
1.實驗?zāi)康囊?/p>
利用列表實現(xiàn)網(wǎng)頁中常見的圖片瀏覽模式。體會列表的不同用
途。
2.實驗主要內(nèi)容
定義頁面結(jié)構(gòu)，完成內(nèi)容的基本布局；利用無序列表標(biāo)記添加所
需顯示的圖片；對無序列表定義樣式。顯示如下結(jié)果。
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗十五、新聞列表的超鏈接制作
1.實驗?zāi)康囊?/p>
掌握常見新聞列表的鏈接方法，修改不同鏈接形式的樣式。
2.實驗主要內(nèi)容
對新聞列表添加鏈接，鏈接的形式是文字鏈接，鏈接打開后的目
標(biāo)是一篇新聞頁面。并設(shè)定鏈接的四種狀態(tài)發(fā)生時的顯示樣式。顯示
如下結(jié)果。
暴看：商心藝術(shù)與枝術(shù)的平衡之遒
■良詵名將搶禮包《千軍破》首服開啟
■戰(zhàn)國新潞《千者天下》開啟檢禮包
?快來玩《德州撲克》與人斗其樂無窮
■《十年一僉||》直就俠一區(qū)開啟搶禮包
■可買麥潞戲代碼傳魔獸大災(zāi)變i寸審批
?兒時潞戲50年變訐0Q后1米動畫帶咫I流
?監(jiān)獄強迫兩人打網(wǎng)游徐州禁少年講網(wǎng)吧
，it>ad成為最賺錢的移動潞戲平臺
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗十六、電子相冊鏈接的制作
1.實驗?zāi)康囊?/p>
掌握常見圖片的鏈接方法，修改不同鏈接形式的樣式。
2.實驗主要內(nèi)容
為電子相冊中的圖片加上超鏈接，按照提供的素材，單擊第一幅
圖片時，在新窗口顯示內(nèi)容。顯示如下結(jié)果。
海底花用雪域菸岸
花采□
沙直海鑫
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
選開
實驗十七、利用書簽鏈接制作幫助文檔
1.實驗?zāi)康囊?/p>
掌握錨點鏈接的創(chuàng)建方法和相關(guān)設(shè)置，利用書簽鏈接制作幫助文
檔。
2.實驗主要內(nèi)容
根據(jù)提供的素材faq.doc,利用書簽鏈接制作一個常見問題回答
頁面。顯示如下結(jié)果。
布配向珈X谷
?ft遼
?MilAmt31PIT
-Itusa.rItraGuvulKM.W3APIaHUULHGuaOKMaaLaitL&ffidJa上,
?2?a.t><uii&.Mxa?ueicu^niim?
?aoonSM-M■lfunnlAFS*Y
?c-)，0》J—aAPI，，-c?B，*>?1”！*?nraanSMK2
?B01F3M>6網(wǎng)?1*人，tent5>。3?SuuAir/
?rurrrtrain卜n?a*mc?>w-MaxATMY
?/janmi_>uu,xa
fibItfOooglaM?paAPI
?3￡-1l&waij4iu2.MlStKS￡lTDMMmiaHtKo二Kl&lltuMIBAJafflAifLSiinY.
?XtTMMS*.Qa?ul?LM?nZSHt<4lAnK>!K?
?4也,.正ln.l?”qln士m-irw-fmM.X
?AIVtXMTvFICU&M八r-IZR3為MAAMFUVht
?stuzjMbflAajgtr^Q<iDd*MMu.zsrii.
-x*0M■?<?<?AFIs”.TnatA，K3>?v
?niXMUaunHiir-sjihwuoum>IA?P?A?IT
?ILKEL33LIHTrrslHMXlEIriMlU&JB.ttSA&niU.KMQIMKMMa??AnAFfh1>t
?Xia.r1????/<rt???atnaw—aD。..uu?r<L>esxmHAuueutM^>Aia?r
?BtTW?JooaUA，，中WVlltY
?it比m-T?a，utnat&ME
GooQlaiM?”?AIM，
OooQtoMap*AnXlMMAflltmT*(?MOooqMMa?nKAROS>XCt*nA?X""R**HII>：L：WE6|tR火-BlISa*gClTIt*AT>liOoo。，.Mag
■QvogleM?ua/\P(JR>?l?*Qvuulo^vm/>py-OovuieMavptel^Pl-njRTMMft>>uvute
k??儂用6WV，“忸口?H>aF?FWAf>“?\51，<8自“所今?AP?-
UooolaM-t?AIMaMOtfHiV/MBOC*
oooQtaMapsn)rAv,7a*s?A?ienifiK)??M-ir^trA■mm-wr?nt*MHM7nMo'iWMmnB>>ainK-ikaiMfrniiKMmrM*i?nt*ik.-r
<m*n.C<-?iMno<>>ac<H>na-?in-F>??t1?>t>M?'Va?'.*?1?OKn*a*t?mMMED?-M<rrI.l?t■.COMh<?(M>*MMHIUotIlkIMW*
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
選開
實驗十八、在網(wǎng)頁中實現(xiàn)圖文混排
1.實驗?zāi)康囊?/p>
插入圖片及進(jìn)行圖片排版，掌握圖文混排的基本方法。理解常見
的圖片在左文字在右或者圖片在右文字在左、文字環(huán)繞在圖片的周
圍、或者上邊、右邊、下邊，單個圖片與單行文字的排版、單個圖片
與多行文字的排版、多個圖片之間實現(xiàn)的排版方法。
2.實驗主要內(nèi)容
實現(xiàn)一個在線銷售圖書網(wǎng)站中一本教材的圖文混排。顯示如下結(jié)
果。
Jav魂程思想（第4版）
作者：（美）埃克爾著，陳...
出版社：機械工業(yè)出版社
出版時間：2007年06月
定價：￥108.00
當(dāng)當(dāng)價：￥81.00
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗十九、成績登記表的制作
1.實驗?zāi)康囊?/p>
掌握表格的創(chuàng)建、結(jié)構(gòu)調(diào)整與美化方法；熟悉表格與單元格的主
要屬性及其設(shè)置方法。設(shè)計一個成績登記表結(jié)構(gòu)的頁面，并顯示出來。
2.實驗主要內(nèi)容
設(shè)計一個基本的成績登記表，數(shù)據(jù)包括：ID序號、學(xué)號、姓名、
平時成績、期末成績、總評成績。顯示如下結(jié)果。
成績登記表
序號學(xué)號姓名平時成績期末成績學(xué)期總成績
12010300201張小麗959595
22010300202李寧908889
32010300203劉梅989295
42010300204王剛989094
52010300205鄭軍908587
62010300206楊波808080
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗二十、產(chǎn)品介紹頁面的制作
1.實驗?zāi)康囊?/p>
掌握通過表格來進(jìn)行網(wǎng)頁頁面的布局方法；理解利用表格展示信
息的方法及其優(yōu)勢。
2.實驗主要內(nèi)容
利用表格布局的方式完成一個產(chǎn)品介紹頁面的設(shè)計。顯示如下結(jié)
果。
產(chǎn)扉名體.隹能IXUS130
佳能IXUS130（含方蟒配）
松下理較SD卡2G（高邃正吊）
佳能IXUS不列干用皮包
索尼2.7英寸LCD保護(hù)貼（防制/高燭光/和電唳闡》
強影擊南
主＞0f參JR
理號：PMP169B
內(nèi)存容量：B12M
屏《1尺葉：2.12英寸（?佳視覺比列16，9的寬屏）
廨而侍■性：LTPSTFT（720x240）
視城功能：支持ASF格貳的MPG明就通過軟件轉(zhuǎn)換成ASF擢放.摘戲效果:320X420,
30fp”視頻蜻出，賄入/電W!F"日定時呆知。
功能Nt
S熔功N日支持曾加格武：MP3.WMA.VAV/內(nèi)置安克內(nèi).支持LIMEIN尋罩:/收備功能/內(nèi)
wwm.
染南格式,44.IKHz,128Kbps,MP3,支押MIC/LIHE-IW■隸
附加功版?文特03片格式；JPEG（BXIF2.1）/電干書汶（究/多語/（中/英）諛量.
接o.usB?a,AVOUTSa,AV】臉口
tr屣卡,可獷充2GSD,MMC卡
電池，內(nèi)置使電池
尺寸，105.2*47.6x15.6加》
Stffi.90t
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
選開
實驗二十一、會員登陸
1.實驗?zāi)康囊?/p>
掌握表單的創(chuàng)建、編輯、處理方法。熟悉文本輸入框和密碼輸入
框的使用。
2.實驗主要內(nèi)容
設(shè)計一個簡單的用戶登陸頁面，會員需要填寫用戶名，密碼，并
能夠通過下拉列表選擇自己的身份。顯示如下結(jié)果。
會員登陸
確定I重置
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗二十二、調(diào)查問卷
1.實驗?zāi)康囊?/p>
掌握表單對象的功能、特點和用途。熟悉單選框和復(fù)選框的使用。
熟悉提交按鈕、重置按鈕、圖像按鈕的使用。熟悉文件選擇輸入框的
使用。熟悉多行文本輸入框和下拉列表框的使用。
2.實驗主要內(nèi)容
完成一個網(wǎng)站的在線問卷調(diào)查，表單元素要用到下拉菜單、復(fù)選
框、單選框、多行文本輸入框獲取調(diào)查的目的。在表單的結(jié)構(gòu)設(shè)計中，
使用標(biāo)簽左對齊布局，使用戶的視覺的重心放在調(diào)查的問題上。在用
戶輸入表單時，按鍵盤TAB鍵進(jìn)入下一步表單元素的輸入。顯示如下
結(jié)果。
■同城禍在建調(diào)查
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗二十三、在線預(yù)訂客房表單
1.實驗?zāi)康囊?/p>
熟練掌握商業(yè)網(wǎng)站的表單使用方法；綜合運用表單元素進(jìn)行。
2.實驗主要內(nèi)容
綜合運用各種表單元素，制作酒店的客房在線預(yù)定系統(tǒng)，顯示
如下結(jié)果。
房間預(yù)訂
姓名
人數(shù)
旅館名廠中州快捷廠愛家廠溫蜃之家廠奢華
房間類型「單人「雙人「任意
信用卡類型.
備注
確定I重置
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
選開
實驗二十四、常用頁面布局設(shè)計
1.實驗?zāi)康囊?/p>
掌握CSS定義文字、背景圖片、超鏈接控制、列表、DIV等常用
屬性。完成簡單CSS+DIV頁面設(shè)計。
2.實驗主要內(nèi)容
利用div+css設(shè)計網(wǎng)站的主體布局一個標(biāo)準(zhǔn)的網(wǎng)站頁面應(yīng)該有
logo區(qū)，導(dǎo)航區(qū)，內(nèi)容區(qū)和版權(quán)區(qū)幾個部分。其中，內(nèi)容區(qū)又可以
分為多種靈活的布局劃分模式，比如常見的左右欄，左中右欄等形式。
實現(xiàn)如下四種的頁面布局，具體如下。
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗二十五、CSS文件的四種引用方式
1.實驗?zāi)康囊?/p>
掌握在網(wǎng)頁中添加CSS樣式表的四種方式：標(biāo)簽內(nèi)的CSS、網(wǎng)頁
內(nèi)的CSS、link引用的CSS和import引用的CSS。
2.實驗主要內(nèi)容
利用配套源代碼，使用四種方法引用CSS的方法。體會效果。
3.實驗類別
專業(yè)基礎(chǔ)
4.實驗要求
必修
實驗二十六、利用CSS定位頁面元素
1.實驗?zāi)康囊?/p>
掌握CSS各種屬性的使用。熟悉利用CSS定位頁面元素的方法。
2.實驗主要內(nèi)容
在使用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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 傳染病及食源性疾病培訓(xùn)后測試題試題(+答案)
- 普通獸醫(yī)學(xué)題庫及答案
- 針灸學(xué)考試筆試試題及答案
- 職業(yè)病防治考試試卷(及答案)
- 銀行專業(yè)考試題庫及答案
- 2025院感理論考試題附有答案
- 廣東省幼兒園教師招聘筆試真題及答案詳解
- 物流服務(wù)師真題及答案
- 九級名著考試題及答案
- 環(huán)境監(jiān)測試題配答案解析
- DB21-T 4279-2025 黑果腺肋花楸農(nóng)業(yè)氣象服務(wù)技術(shù)規(guī)程
- 2026年上海高考英語真題試卷+解析及答案
- 2024-2025學(xué)年湖北省咸寧市高二生物學(xué)上冊期末達(dá)標(biāo)檢測試卷及答案
- 初會經(jīng)濟(jì)法真題
- 池塘承包權(quán)合同
- JTG F40-2004 公路瀝青路面施工技術(shù)規(guī)范
- 三片飲料罐培訓(xùn)
- 副園長個人發(fā)展規(guī)劃
- 第九屆、第十屆大唐杯本科AB組考試真總題庫（含答案）
- 統(tǒng)編部編版九年級下冊歷史全冊教案
- 商業(yè)地產(chǎn)策劃方案+商業(yè)地產(chǎn)策劃方案基本流程及-商業(yè)市場調(diào)查報告(購物中心)
評論
0/150
提交評論