網(wǎng)頁制作實(shí)驗(yàn)指導(dǎo)書

實(shí)驗(yàn)?zāi)康模赫莆帐褂糜浭卤具M(jìn)行HTML文件編寫的過程。掌握HTML基本標(biāo)記的使用。掌握文檔格式化常用標(biāo)記的使用。掌握在網(wǎng)頁中加入圖像的功能實(shí)現(xiàn)。實(shí)驗(yàn)內(nèi)容：開始菜單啟動記事本；記事本中，錄入一個最簡合法HTML文檔;該文檔最終顯示標(biāo)題為“簡單文字處理”（提示：最簡合法HTML文檔必須包含的元素顯示以下內(nèi)容：有html、head、title、body。）顯示以下內(nèi)容：在文檔的〈body〉和〈/body〉之間，插入適當(dāng)元素使最終網(wǎng)頁中這是一段文本這是一段文本?Microsoft?Windows2007A=a+a+a123這是一段文本這是一段文本注：以上文字不涉及到文字字體、大小、顏色的設(shè)置，且并不居中顯示。提示：對于特殊字符，要使用字符實(shí)體。緊接著步驟4插入的元素插入適當(dāng)元素，使得最終網(wǎng)頁上可以顯示字號為5、顏色為紅色、字體為“華文彩云”的下列這是一段文本緊接著步驟5插入的元素插入適當(dāng)元素，使得最終網(wǎng)頁上顯示下列樣式的文字（隸書、4號、綠色）：這一段文本如果以上的每條文本之間沒有換行，則在它們之間分別插入一個換行;使用步驟1-7中的方法保存當(dāng)前HTML文檔為simpleinline.htm。新建一個網(wǎng)頁，網(wǎng)頁名字存為anchor.html在網(wǎng)頁中創(chuàng)建超級鏈接，設(shè)置該文檔最終顯示標(biāo)題為“HTML中的超級鏈接”；插入一個可以到達(dá)保存的simpleinline.htm的超級鏈接，單擊鏈接在自身窗口中打開該文件；在網(wǎng)頁中插入一個電子郵件鏈接。在網(wǎng)頁中添加HTML列表：（1）從開始菜單啟動記事本；（2）在記事本中，錄入一個最簡合法HTML文檔；（3）設(shè)置該文檔最終顯示標(biāo)題為“HTML列表”（4）在文檔的〈body〉和〈/body＞之間，插入適當(dāng)元素使最終網(wǎng)頁中顯示以下內(nèi)容：

1.2.1.2.3.4.HTML4.01CSSJavascriptJ.C.RLickliderLarryRobertsTimBerners-Lee保存當(dāng)前HTML文檔為htmllist.htm。編寫網(wǎng)頁(image.html)，并在其中創(chuàng)建一個圖片鏈接，必須滿足如下要求:圖片文件名為trees.jpg，和代碼文件處于同一目錄中；鏈接到的文件為同目錄下的expl.html文件；expl.html文件中有公式x2+y+y<a圖片加寬度為2像素的邊框；圖片寬度固定為300像素，高度固定為200像素；實(shí)驗(yàn)條件：一臺pc機(jī)，記事本軟件實(shí)驗(yàn)課時課時實(shí)驗(yàn)要求按照要求編寫網(wǎng)頁。實(shí)驗(yàn)二、HTML中使用表格實(shí)驗(yàn)?zāi)康模赫莆栈颈砀駱?biāo)記的使用；掌握表格格式的設(shè)置；掌握高級表格標(biāo)記的使用；實(shí)驗(yàn)內(nèi)容：編寫網(wǎng)頁(2T.html),高級表格應(yīng)使用到標(biāo)題、行編組、列編組:按照以下屬性設(shè)置創(chuàng)建如下圖所示的表格：表格邊框?qū)挒?像素；表格的背景顏色值為#999933；第一行的背景顏色與其他行不同，其值為#0066FF；單元格內(nèi)容的對齊方式按圖中所示來設(shè)置；為表格添加一個標(biāo)題“班級列表”，并把它置于表格底部；設(shè)置表格的寬度為width=80%,并把該表格置于瀏覽器窗口的中間。然后為整個表格、表格的第二行和第二行的第一個單元格分別設(shè)置不同的顏色；為表格的第二行的第一個單元格加入一張圖片；把單元格的對齊方式設(shè)置為right；加入語句cellspacing=5和cellpadding=10,修改表格邊框?yàn)?，并加入高級表格標(biāo)簽使上面的表格變成如下圖所示。

2.使用表格編寫網(wǎng)頁(2-2.html)，效果如下圖:實(shí)驗(yàn)條件：一臺pc機(jī)，記事本軟件實(shí)驗(yàn)課時4課時實(shí)驗(yàn)要求按照要求編寫網(wǎng)頁；按照指定的格式完成實(shí)驗(yàn)報告(在課件中下載《計算機(jī)類課程實(shí)驗(yàn)報告模板》，完成后上傳至相應(yīng)位置)。實(shí)驗(yàn)三、HTML中框架布局實(shí)驗(yàn)?zāi)康模菏煜た蚣艿母拍?。掌握HTML中設(shè)計框架的方法以及所使用的標(biāo)記。掌握框架的格式化。實(shí)驗(yàn)內(nèi)容：1.編寫網(wǎng)頁(3-l.html)：創(chuàng)造一個帶有兩個水平框架的主頁面。第一個框架的高度是100像素值，第二個框架進(jìn)一步地分成兩個垂直的框架。第一個垂直的框架寬150像素。頂部框架為橫幅框架，左邊的框架為導(dǎo)航框架，右邊的框架為內(nèi)容框架。導(dǎo)航鏈接為某書的各章標(biāo)題，包含不同的鏈接。這些鏈接的目標(biāo)框架為內(nèi)容框架。內(nèi)容框架的初始內(nèi)容為第6章開始的內(nèi)容頁面，其他頁面可以自由指定。以上框架需包含如下特征：橫幅框架沒有滾動條；整個頁面沒有框架邊界；為沒有框架功能的瀏覽器使用可選文本。加入5像素的灰色框架邊界；同樣在第6章頁面中使用marginwidth=20和marginheight=5。拖動框架邊界來觀察效果。然后使用noresize屬性來防止改變框架大?。辉趦?nèi)容框加中使用內(nèi)嵌框架，輸出結(jié)果應(yīng)如下圖所示。

實(shí)驗(yàn)條件：一臺pc機(jī)，記事本軟件實(shí)驗(yàn)課時4課時實(shí)驗(yàn)要求1．按照要求編寫網(wǎng)頁；實(shí)驗(yàn)四、HTML中使用表單實(shí)驗(yàn)?zāi)康模?.掌握表單元素標(biāo)記的使用。掌握表單標(biāo)記的訪問控制。掌握表單的設(shè)計方法。實(shí)驗(yàn)內(nèi)容：1.編寫網(wǎng)頁(4-l.html),按以下要求設(shè)計表單，完成后如下圖所示：在六個復(fù)選框中，All所對應(yīng)的復(fù)選框?yàn)槟J(rèn)選項(xiàng)；姓名，地址和城市所對應(yīng)的文本框至多可以包含25個字符；郵件域?qū)?yīng)的文本框的大小為30個字符，最多可以輸入35個字符；“您在未來多長時間想購買新車”所對應(yīng)的單選按鈕以“0~6月”為默認(rèn)選項(xiàng)。其余的單元框沒有默認(rèn)選項(xiàng)；使用〈pre〉或＜table〉標(biāo)簽為表單組件定位；對每一個表單組件設(shè)定快捷鍵。實(shí)驗(yàn)條件：一臺pc機(jī)，記事本軟件實(shí)驗(yàn)課時課時實(shí)驗(yàn)要求1.按照要求編寫網(wǎng)頁；實(shí)驗(yàn)五、HTML中使用樣式表實(shí)驗(yàn)?zāi)康模?.掌握樣式表的使用方法。掌握樣式表的設(shè)計規(guī)則。掌握樣式表屬性的使用。掌握外部樣式表的設(shè)計和使用方法。實(shí)驗(yàn)內(nèi)容：1.編寫網(wǎng)頁（5T.html）,女口下圖所示:竊樣式表一licrosoftInternetExplorer口回可文件（F）編輯（E）查看迫收藏工具（X）幫助QI）地址ID.J超］F：11emp1匚eer>zise.htrnlV目轉(zhuǎn)到捱接”樣式表概念樣式表是規(guī)范瀏覽器如何顯示HTML特定標(biāo)記的一組規(guī)則°所有這些規(guī)則都包含兩上部分。一個部分是標(biāo)記名稱，它告訴瀏覽器貢面中的哪些標(biāo)記受到樣式規(guī)則的控制；另外一個部分是標(biāo)記屬性，它告訴瀏覽器如何顯示這些受控制的標(biāo)記。有了樣式表，設(shè)計者可以更扣靈活地控制頁面顯示效果：首先，可以將格式和結(jié)構(gòu)分離，即使HTML簡單明T，又讓樣式表能夠獨(dú)立岀來控制頁面外觀其次，可以制作體積更小下載更快的網(wǎng)頁，因?yàn)閷ν活悇e標(biāo)記的控制只需要一段共同的代碼；第三，可以同時更新大量網(wǎng)貞，比以前更快更容易；最后，可以使瀏覽器成為更友好的界面。聯(lián)系我們：清華大學(xué)岀版社回到頂部引完畢 M我的電腦 使用嵌入式樣式表，按以下基本要求實(shí)現(xiàn)效果，完成后效果如下圖：a） 所有的文本都修改為紫色（purple）,而且不允許有任何縮進(jìn)。字體樣式采用normal，并應(yīng)用于整個頁面。字體大小為medium，粗細(xì)程度為normal。字體類型使用“華文新魏”；b） 為頁面選擇一個合適的背景圖片，并且沿水平和豎直方向平鋪；c） 文字“所有這些規(guī)則都包含兩個部分。一個部分是標(biāo)記名稱，它告訴瀏覽器頁面中的哪些標(biāo)記受到樣式規(guī)則的控制；另外一部分部是標(biāo)記屬性，它告訴瀏覽器如何顯示這些受控制的標(biāo)記?！睘榫G色（green）,并添加上劃線。文字間距為5像素，行間距為45像素。使用斜體并加粗。字體類型為“宋體”；d） 最上方的標(biāo)題要添加下劃線，居中顯示，藍(lán)色（blue）字體，大寫。字體樣式、權(quán)重以及大小分別為italic、bold和xx-large。該塊元素要添加背景色為#FFFFFF。該元素的四個邊要有相同的頁白的填充值，各為10像素。邊框的寬度、顏色和模式分別為medium、紅色、ridge；e） 為倒數(shù)第二段文本定義一個類，居中對齊，字體樣式為italic，字體為宋體。其余的格式和全文相同；f） 最后一段的鏈接不要加下劃線，四種狀態(tài)顏色相同（blue）。

實(shí)驗(yàn)條件：一臺pc機(jī)，記事本軟件實(shí)驗(yàn)課時3課時實(shí)驗(yàn)要求1．按照要求編寫網(wǎng)頁；2．按照指定的格式完成實(shí)驗(yàn)報告。實(shí)驗(yàn)?zāi)康模?．掌握多媒體的使用。2．理解并掌握J(rèn)avascript的使用。3．練習(xí)區(qū)域組件布局。實(shí)驗(yàn)內(nèi)容：1.編寫個人站點(diǎn)首頁（6-l.html）,頁面上應(yīng)該帶有一些網(wǎng)頁的鏈接，如“介紹自