web前端开发技术实验报告实验一

1、长春大学20 15 2016学年第 二 学期web前端开发技术课程实验报告学院：计算机科学技术专业：软件工程班级：软件14402学号：041440211姓名：武嘉琪任课教师：车娜实验一构建html页面一、实验目的熟悉html制作网页的基础知识，并能熟练运用学过的内容制作、设计图文 混排的网页。二、内容及要求运用学过的代码设计一个图文混排网页，满足如下要求：1既冇图像又冇文字，并月呈左右排列。2.文字部分由标题和段落文本组成，它们的字休和字号不同。3在段落文本屮，段落前冇2字符留白，一些文字以特殊的颜色加以突出 显不o三、实验原理文木：font可以跟color、size face等属性根据不同的

2、值对文本进行修 改；图片：img 标i己可以住艮 border、 height、 width> align、 vspace、 hspace 等属性根据不同的值对滚动字进行设置；其他相关内容：各级标签、标题设置、背景图等。四、实验步骤1、确立自己的网页主题选择传智博客设计学院作为本次网页设计的主题。2、网页基本设计(1) 应用h2标记设计标题样式。(2) 应用font标记及其facc> size、color等屈性设计文本字体样式。(3) 应用p标记设计文本段落格式。(4) 应用 img 标记及其 sre、alt> align> hspace> height>

3、width 等屈性设计图片排版样式。五、实验代码及网页效果图1. 搭建基本结构使用iing/>标记插入图像。使用h2>标记和p>标记分別设置标题和段 落-文本。并对img />标记应用align属性和hspace属性实现图像居左文 字居右、且图像和文字z间有一定距离的排列效果。关键代码如下：<img src=/z作业/logo, gif" alt=/，网页设计、平面设计、ui设计align=，/left" hspacc=，z30，z height二150" width二250"/>宀2>传智播客设计学院</

4、h2>p>传智播客设计学院/p >ktftitw.传智播客效果如图1-1所示。传罟播客设计学院.专江十平akh卄飢财处时恢齐捌iimu号业的种费团职. 4个号 的宁力循序耳逬.充实t8満.从1hkb的设计软件pholoshoplolll曲moe幵童疗辰习透秽（13天系.口程捋合刘絢段例#0 宾砂口，4个月関年传isnttrtaitybmk恰你的血卜11如何屈 qj|ymmiloat*?wm .宰业之jg ,的!成力平血.wk. u1q计ibm罰仝也今为止传iffihr时fdei竝18齐出了上万名tmti旨布丹个大中口介业4 .从传询咅汪出？;的亨艮也猬到了各个金业的一jjma

5、呵评.图1-1效果图2. 设置文本样式和首行缩进效果使用文木样式标记<font>控制标题和段落文本的样式。并通过color.size屈性设置颜色和粗细。最后使用首行缩进两个字符实现留口效果。关键代码如2<img stc二作业/logo, gif" alt二网页设计、平而设计、ui设计align二left" hspace二30" height二150" width二2507><h2xfont face二"微软雅黑 size二5" color二"#545454>传智播客设计学院</fon

6、t></h2><p><font color=，#0c5c9c，>传智播客设计学院</font></p>style type二text/css">p text-indent:2cm</stylc>0传智歸效果如下图1-2所示。传扫播客设计学院传设计于mi* .钿殳于平“航悴!. r5«itw.用祝，个刃韵丁刁片愷.m.*a . m的5ixupbo«zopl8luttratorwe孚咒. 0w畤心童"g妙 u .处匕曲刖u当丹特f fw*.传停如汪越歹±»砂. 38加仃的设计.ifeftzfi.你删6顶 r5. u设计级sa的叙聞俑.土今止怜"盘计*&£时迄了上万名血佛.个人“越辿.隔.从怜龙迄去e貝它锯了咎个金竝_孜认甄*1时.图1-2效果图六、实验总结在实验过程中，遇到了一些问题，例如图片在标题文字的上方，而不是居 左，在翻阅过课本后，在标题标签里加上了 align这个属性来控制图片的位置。通过这次实验，让我学会了以下儿点：1. 学会了如何运用title,