網頁制作實驗指導書

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

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

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

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

實驗條件：一臺pc機，記事本軟件實驗課時3課時實驗要求1．按照要求編寫網頁；2．按照指定的格式完成實驗報告。實驗目的：1．掌握多媒體的使用。2．理解并掌握Javascript的使用。3．練習區(qū)域組件布局。實驗內容：1.編寫個人站點首頁（6-l.html）,頁面上應該帶有一些網頁的鏈接，如“介紹自