HTML網(wǎng)頁設計基礎(chǔ)實驗指導書2016WORD_第1頁
HTML網(wǎng)頁設計基礎(chǔ)實驗指導書2016WORD_第2頁
HTML網(wǎng)頁設計基礎(chǔ)實驗指導書2016WORD_第3頁
HTML網(wǎng)頁設計基礎(chǔ)實驗指導書2016WORD_第4頁
HTML網(wǎng)頁設計基礎(chǔ)實驗指導書2016WORD_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

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

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

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

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

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

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

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

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

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論