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

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

3、g/標記插入圖像。使用h2卡記和p標記分別設置標題和段落文本。并對img/標記應用align屬性和hspace屬性實現圖像居左文字居右、且圖像和文字之間有一定距離的排列效果。關鍵代碼如下：<imgsrc="作業/logo.gif"alt="網頁設計、平面設計、UI設計”align="left"hspace="30"height="150"width="250"/><h2>>智播客設計學院</h2><p>傳智播客設計學院</p&

4、gt;效果如圖1-1所示。借甘榴害謝怦戰牛知嬌右桁E母鐘Ed手前1段.專注于FfiRrHrt.0由母HI.5圻宵函雪大工學1音餐業肌前西國”坦帳餐時的烹*個月7日惟谷1和耳.2源砧2.腫.1審Jg十就K2i»hO|MDIIunMgRgiM的咖葷富享口誨RW）美高星用中t&g才財3國,IEI蝸而目，4十月的畢3相當于兩年工根援.WWWItCBSlCDISIWMiBiHMifK用的JiT'BHI倆,4市單伸職*即可出整LMtr叫,旺力才后,.口與，MIBM田*H力J庭IWl&rEE號吩附了5宮陽姆.齊于餐中士中學企業r曰4.4意者3客a出去的*員加不門*1寸業囪一

5、改U可利好EL圖1-1效果圖2.設置文本樣式和首行縮進效果使用文本式標記<font>控制標題和段落文本的樣式。并通過color、size屬性設置顏色和粗細。最后使用首行縮進兩個字符實現留白效果。關鍵代碼如下：<imgsrc="作業/logo.gif"alt="網頁設計、平面設計、UI設計”align="left"hspace="30"height="150"width="250"/><h2><fontface="微軟雅黑"s

6、ize="5"color="#545454">傳智播客設計學院</font></h2><p><fontcolor="#0e5c9e”>傳智播客設計學院</font></p><styletype="text/css">ptext-indent:2em</style>效果如下圖1-2所示。傳言擢客曲講學院訪底療.m+y世r*MtrAfLurihraiMPmTflMiivHrzL1.:版.十=小/皿進五五芯:gUW*V*Pl

7、71;聲媼孫u5Pi中子*唾制風修士康gtTTOa/iBffifilfP*iien牛外市仁加岬*1而w”.»wKait，wcE0rl籍IQShiifnQOM<itVffirAiwiU停算*f而耳而mniniuvim.:f此*|*白1大9|屈就等柝了上方趙曲IffSKFflrT1大青型.U*JJkMlB*±編期<1界由HrillfJ奇皿*Uft9s*妹司圖1-2效果圖六、實驗總結在實驗過程中，遇到了一些問題，例如圖片在標題文字的上方，而不是居左，在翻閱過課本后，在標題標簽里加上了align這個屬性來控制圖片的位置。通過這次實驗，讓我學會了以下幾點：1 .學會了如何運用