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

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

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

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

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

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

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

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