web前端開發(fā)技術實驗報告 實驗一

1、 長 春 大 學 20 15 2016學年第 二 學期 Web前端開發(fā)技術 課程實 驗 報 告學 院： 計算機科學技術專 業(yè)： 軟件工程 班 級： 軟件14402 學 號： 041440211 姓 名： 武嘉琪 任課教師： 車 娜 實驗一 構建HTML頁面一、實驗目的熟悉HTML制作網頁的基礎知識，并能熟練運用學過的內容制作、設計圖文混排的網頁。二、內容及要求運用學過的代碼設計一個圖文混排網頁，滿足如下要求：1.既有圖像又有文字，并且呈左右排列。2.文字部分由標題和段落文本組成，它們的字體和字號不同。3.在段落文本中，段落前有2字符留白，一些文字以特殊的顏色加以突出顯示。三、實驗原理 文本：f

2、ont可以跟color、size、face等屬性根據(jù)不同的值對文本進行修改； 圖片：img標記可以跟border、height、width、align、vspace、hspace等屬性根據(jù)不同的值對滾動字進行設置；其他相關內容：各級標簽、標題設置、背景圖等。四、實驗步驟1、 確立自己的網頁主題選擇傳智博客設計學院作為本次網頁設計的主題。 2、網頁基本設計(1) 應用h2標記設計標題樣式。(2) 應用font標記及其face、size、color等屬性設計文本字體樣式。(3) 應用p標記設計文本段落格式。(4) 應用img標記及其src、alt、align、hspace、height、width

3、等屬性設計圖片排版樣式。五、實驗代碼及網頁效果圖 1搭建基本結構使用<img/>標記插入圖像。使用<h2>標記和<p>標記分別設置標題和段落文本。并對< img />標記應用align屬性和hspace屬性實現(xiàn)圖像居左文字居右、且圖像和文字之間有一定距離的排列效果。關鍵代碼如下：<img src="作業(yè)/logo.gif" alt="網頁設計、平面設計、UI設計" align="left" hspace="30" height="150" w

4、idth="250"/><h2>傳智播客設計學院</h2> <p>傳智播客設計學院</p > 效果如圖1-1所示。圖1-1 效果圖2.設置文本樣式和首行縮進效果使用文本樣式標記<font>控制標題和段落文本的樣式。并通過color、size屬性設置顏色和粗細。最后使用首行縮進兩個字符實現(xiàn)留白效果。 關鍵代碼如下：<img src="作業(yè)/logo.gif" alt="網頁設計、平面設計、UI設計" align="left" hspace=&qu

5、ot;30" height="150" width="250"/><h2><font face="微軟雅黑" size="5" color="#545454">傳智播客設計學院</font></h2><p><font color="#0e5c9e">傳智播客設計學院</font></p> <style type="text/css">p text-indent:2em</style>效果如下圖1-2所示。圖1-2 效果圖六、實驗總結在實驗過程中，遇到了一些問題，例如圖片在標題文字的上方，而不是居左，在翻閱過課本后，在標題標簽里加上了align這個屬性來控制圖片的位置。通過這次實驗，讓我學會了以下幾點：1 學會了如何運用title,font,p,hn,等標簽。2