HTML網(wǎng)頁設(shè)計(jì)基礎(chǔ)實(shí)驗(yàn)指導(dǎo)書2016WORD_第1頁
HTML網(wǎng)頁設(shè)計(jì)基礎(chǔ)實(shí)驗(yàn)指導(dǎo)書2016WORD_第2頁
HTML網(wǎng)頁設(shè)計(jì)基礎(chǔ)實(shí)驗(yàn)指導(dǎo)書2016WORD_第3頁
HTML網(wǎng)頁設(shè)計(jì)基礎(chǔ)實(shí)驗(yàn)指導(dǎo)書2016WORD_第4頁
HTML網(wǎng)頁設(shè)計(jì)基礎(chǔ)實(shí)驗(yàn)指導(dǎo)書2016WORD_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、文檔可能無法思考全面，請瀏覽后下載! HTML網(wǎng)頁設(shè)計(jì)基礎(chǔ)實(shí)驗(yàn)指導(dǎo)書序號實(shí)驗(yàn)項(xiàng)目名稱學(xué)時(shí)實(shí)驗(yàn)類型選修類別每組學(xué)生數(shù)1網(wǎng)頁設(shè)計(jì)基礎(chǔ)及HTML基本標(biāo)簽2驗(yàn)證性必修12HTML文本格式的應(yīng)用2驗(yàn)證性必修13HTML 鏈接的應(yīng)用4驗(yàn)證性必修14HTML 表格和列表的應(yīng)用4驗(yàn)證性必修15HTML 表單與框架的應(yīng)用4驗(yàn)證性必修16HTML和CSS綜合應(yīng)用2設(shè)計(jì)性必修17個(gè)人主頁設(shè)計(jì)2設(shè)計(jì)性必修110 / 10實(shí)驗(yàn)一網(wǎng)頁設(shè)計(jì)基礎(chǔ)及HTML基本標(biāo)簽【實(shí)驗(yàn)?zāi)康摹?掌握利用因特網(wǎng)進(jìn)行信息游覽、搜索，下載網(wǎng)頁、圖片、文字和文件； 2對給定的網(wǎng)站，能指出網(wǎng)站的鏈接結(jié)構(gòu)、目錄結(jié)構(gòu)、頁面布局方式； 3掌握HTML的基本標(biāo)

2、簽<HTML><HEAD> <BODY><TITLE><META>標(biāo)記；【實(shí)驗(yàn)環(huán)境】Window xp操作系統(tǒng)，機(jī)器聯(lián)網(wǎng)?！緦?shí)驗(yàn)重點(diǎn)及難點(diǎn)】熟練使用瀏覽器進(jìn)行瀏覽、搜索、下載。【實(shí)驗(yàn)內(nèi)容】1、根據(jù)網(wǎng)站制作的需要，從網(wǎng)上下載網(wǎng)頁制作時(shí)需要的文字、小圖片、動畫及flash。 2、上網(wǎng)訪問實(shí)際若干網(wǎng)站，了解各網(wǎng)站的風(fēng)格（主題圖形形象、導(dǎo)航是否清晰，整體色調(diào)的搭配是否協(xié)調(diào)，主題是否突出等）、頁面布局方式；在網(wǎng)上找出下列版面布局的結(jié)構(gòu)形式： “T”結(jié)構(gòu)布局“口”型（“國”字型）布局 對稱對比布局 海報(bào)型布局3、利用搜索引擎，瀏覽因特網(wǎng)上較為著名

3、的5個(gè)網(wǎng)站，記錄這些網(wǎng)站的名稱、網(wǎng)站地址和以及相應(yīng)的網(wǎng)頁文件格式（擴(kuò)展名）； 4、查看我院WWW網(wǎng)站主頁的源代碼，收藏到收藏夾中，將其設(shè)為主頁，并指出該網(wǎng)站的鏈接結(jié)構(gòu)、目錄結(jié)構(gòu)和頁面布局方式。 5、構(gòu)建HTML文檔“我的第一個(gè)網(wǎng)頁”：（1）從開始菜單啟動記事本；（2）在記事本中，錄入一個(gè)HTML文檔；（3）設(shè)置該文檔在最終在瀏覽器中顯示的標(biāo)題為“我的第一個(gè)網(wǎng)頁”；（4）在頁面添加可見的文本“我的第一個(gè)網(wǎng)頁”；（5）使用記事本的菜單“文件”“保存”，在“另存為”對話框中，在“保存類型”下拉列表中選擇“所有文件”，錄入“文件名”myfirstpage.htm，單擊“保存”按鈕將該頁面保存到實(shí)驗(yàn)文件

4、夾。實(shí)驗(yàn)二 HTML文本格式的應(yīng)用【實(shí)驗(yàn)?zāi)康摹?掌握使用<body>標(biāo)記設(shè)置網(wǎng)頁背景顏色和文本顏色。學(xué)習(xí)使用分段標(biāo)記<p></p>；2掌握使用<font>標(biāo)記設(shè)置文字的屬性；3掌握在網(wǎng)頁中插入背景圖片；4掌握在網(wǎng)頁中插入水平線，并設(shè)置水平線的屬性；5掌握在網(wǎng)頁中插入背景音樂。 【實(shí)驗(yàn)環(huán)境】Windows xp【實(shí)驗(yàn)重點(diǎn)及難點(diǎn)】掌握字體、水平線等常用標(biāo)記?！緦?shí)驗(yàn)內(nèi)容】1、使用簡單內(nèi)聯(lián)元素進(jìn)行文字處理：（1）從開始菜單啟動記事本；（2）在記事本中，錄入HTML文檔；（3）設(shè)置該文檔最終顯示標(biāo)題為“簡單文字處理”；（4）在文檔的<body>

5、和</body>之間，插入適當(dāng)元素使最終網(wǎng)頁中顯示以下內(nèi)容：這是一段文本這是一段文本© Microsoft® Windows 2007 A = a1 + a2 + a3 這是一段文本 這是一段文本 提示 ：1、以上文字不涉及到文字字體、大小、顏色的設(shè)置，且并不居中顯示。 2、對于特殊字符，要使用字符實(shí)體。©&copy;版權(quán) ® &reg;注冊商標(biāo)（5）緊接著步驟（4）插入的元素插入適當(dāng)元素，使得最終網(wǎng)頁上可以顯示字號為5、顏色為紅色、字體為“華文彩云”的下列樣式文字：這是一段文本（6）緊接著步驟（5）插入的元素插入適當(dāng)元素，使

6、得最終網(wǎng)頁上顯示下列樣式的文字（隸書、4號、綠色）：這是一段文本（7）如果以上的每條文本之間沒有換行，則在它們之間分別插入一個(gè)換行；（8）使用步驟1-（5）中的方法保存當(dāng)前HTML文檔為simpleinline.htm。2、制作一個(gè)簡單的網(wǎng)頁sy2-1.htm，用記事本編輯，內(nèi)容為個(gè)人簡介信息。 要求：l 搜索關(guān)鍵字為“個(gè)人”“主頁”“簡介”，標(biāo)題為我的個(gè)人簡介。 l 背景為#33ccff,文本顏色為黑色，文本需分段表示。 3、用記事本編輯網(wǎng)頁sy2-2.htm，內(nèi)容為李白的詩“靜夜思”。要求：每行詩為一個(gè)段落，四行文字顏色不同，字體不同。 4、通過記事本編輯網(wǎng)頁sy2-3.htm，實(shí)現(xiàn)如圖頁

7、面。 5、通過記事本編輯網(wǎng)頁sy2-4.htm，實(shí)現(xiàn)如下頁面。圖片自選，插入背景音樂“浮云.mp3”。 6、通過記事本編輯網(wǎng)頁sy2-5.htm，實(shí)現(xiàn)如下頁面。實(shí)驗(yàn)三 HTML超鏈接的應(yīng)用【實(shí)驗(yàn)?zāi)康摹?掌握給文字添加絕對超級鏈接，例如：<a href=></a>和相對超級鏈接，例如：<a href=/images/1.jpg></a>；2掌握使用圖像映像鏈接<AREA><MAP>；【實(shí)驗(yàn)環(huán)境】Windows xp【實(shí)驗(yàn)重點(diǎn)及難點(diǎn)】掌握使用超級鏈接HTML常用標(biāo)記。【實(shí)驗(yàn)內(nèi)容】1、制作一個(gè)網(wǎng)頁sy3-1.htm，用記事本編輯

8、。要求：l 網(wǎng)頁名稱為：超級鏈接練習(xí)l 以一張圖片作為背景，并且設(shè)置圖片固定。合理設(shè)置文字的顏色，和超級鏈接的顏色。 l 插入絕對鏈接至長春工業(yè)大學(xué)軟件學(xué)院主頁。2、利用預(yù)格式化標(biāo)簽，輸出如下圖一段文字，在頁面的頂部設(shè)置相對超級鏈接至頁面底部，在頁面的底部設(shè)置相對超級鏈接至頂部。3、在下圖上實(shí)現(xiàn)圖像映像鏈接，要求點(diǎn)擊各省對應(yīng)區(qū)域彈出該省政府網(wǎng)站（各省政府網(wǎng)址：www.省名簡拼 如吉林省政府網(wǎng)站：）實(shí)驗(yàn)四： HTML 表格和列表的應(yīng)用【實(shí)驗(yàn)?zāi)康摹?掌握表格相關(guān)標(biāo)記的使用2掌握3種列表的定義和屬性設(shè)置【實(shí)驗(yàn)環(huán)境】Windows xp【實(shí)驗(yàn)重點(diǎn)及難點(diǎn)】掌握表格和列表相關(guān)標(biāo)記的使用【實(shí)驗(yàn)內(nèi)容】1、使用

9、表格標(biāo)簽,制作如下圖所示的頁面。要求:l 表格內(nèi)容水平居中對齊,垂直居中對齊，頁面標(biāo)題為音樂網(wǎng)站。.l 設(shè)置超級鏈接顏色l 點(diǎn)擊播放,即可播放對應(yīng)的音樂,音樂在網(wǎng)上下載。2、使用表格標(biāo)簽,制作如下圖所示的頁面3、用記事本編輯網(wǎng)頁sy3-4.htm.htm，實(shí)現(xiàn)如下頁面。要求：網(wǎng)頁的名稱為“列表練習(xí)”；網(wǎng)頁有一個(gè)背景音樂，音樂自選。實(shí)驗(yàn)五 HTML表單和框架的應(yīng)用【實(shí)驗(yàn)?zāi)康摹?掌握表單相關(guān)標(biāo)記的使用； 2掌握3個(gè)頁面的框架的定義和屬性設(shè)置。 【實(shí)驗(yàn)環(huán)境】Windows xp。【實(shí)驗(yàn)重點(diǎn)及難點(diǎn)】掌握表單相關(guān)標(biāo)記的使用，框架頁面的定義?！緦?shí)驗(yàn)內(nèi)容】1、建立如下表單頁面： 2、建立如下框架頁面，相關(guān)圖片建議試著自己制作，也可從網(wǎng)上下載。 實(shí)驗(yàn)六HTML和CSS綜合應(yīng)用【實(shí)驗(yàn)?zāi)康摹?掌握CSS的基本語法規(guī)則。2掌握CSS的常用選擇符。3掌握在網(wǎng)頁上應(yīng)用CSS的方法。4理解CSS的常用屬性及其各項(xiàng)值的含義?！緦?shí)驗(yàn)環(huán)境】Windows xp。【實(shí)驗(yàn)重點(diǎn)及難點(diǎn)】掌握CSS相關(guān)標(biāo)記的使用?！緦?shí)驗(yàn)內(nèi)容】1CSS屬性定義的縮寫方法。2利用CSS對字體屬性的設(shè)置完成下圖顯示樣式。3利用CSS對文本屬性的設(shè)置完成下圖顯示樣式。4利用CSS對邊框?qū)傩缘脑O(shè)置完成下圖顯示樣式。5利用CSS對浮動屬性的設(shè)置完成下圖顯示樣式。6利用CSS對定位屬性的設(shè)置完成下圖顯示樣式。實(shí)驗(yàn)七 個(gè)人主頁設(shè)計(jì)

溫馨提示

  • 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論