web前端開發(fā)技術(shù)實(shí)驗(yàn)報(bào)告實(shí)驗(yàn)

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

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

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

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

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

6、ize="5"color="#545454">傳智播客設(shè)計(jì)學(xué)院</font></h2><p><fontcolor="#0e5c9e”>傳智播客設(shè)計(jì)學(xué)院</font></p><styletype="text/css">ptext-indent:2em</style>效果如下圖1-2所示。傳言擢客曲講學(xué)院訪底療.m+y世r*MtrAfLurihraiMPmTflMiivHrzL1.:版.十=小/皿進(jìn)五五芯: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效果圖六、實(shí)驗(yàn)總結(jié)在實(shí)驗(yàn)過程中，遇到了一些問題，例如圖片在標(biāo)題文字的上方，而不是居左，在翻閱過課本后，在標(biāo)題標(biāo)簽里加上了align這個(gè)屬性來控制圖片的位置。通過這次實(shí)驗(yàn)，讓我學(xué)會(huì)了以下幾點(diǎn)：1 .學(xué)會(huì)了如何運(yùn)用