长 春 大 学   
20 15 —  2016学年第  二  学期
Web前端开发技术 课程
实 验 报 告
学    院：  计算机科学技术
专    业：  软件工程       
班    级：  软件14402   
学    号：  041440211   
        姓    名：    武嘉琪     
任课教师：    车 娜     
实验一  构建HTML页面
一、实验目的
熟悉HTML制作网页的基础知识，并能熟练运用学过的内容制作、设计图文
混排的网页。
二、内容及要求
运用学过的代码设计一个图文混排网页，满足如下要求：
1.既有图像又有文字，并且呈左右排列。
2.文字部分由标题和段落文本组成，它们的字体和字号不同。
3.在段落文本中，段落前有2字符留白，一些文字以特殊的颜加以突出显示。
三、实验原理
    文本：font可以跟color、size、face等属性根据不同的值对文本进行修改；
    图片：img标记可以跟border、height、width、align、vspace、hspace
等属性根据不同的值对滚动字进行设置；
其他相关内容：各级标签、标题设置、背景图等。
四、实验步骤
1、 确立自己的网页主题
选择传智博客设计学院作为本次网页设计的主题。
    2、网页基本设计
(1) 应用h2标记设计标题样式。
(2) 应用font标记及其face、size、color等属性设计文本字体样式。
(3) 应用p标记设计文本段落格式。
(4) 应用img标记及其src、alt、align、hspace、height、width
等属性设计图片排版样式。
五、实验代码及网页效果图
 
1．搭建基本结构
使用<img/>标记插入图像。使用<h2>标记和<p>标记分别设置标题和段
落文本。并对< img />标记应用align属性和hspace属性实现图像居左文
字居右、且图像和文字之间有一定距离的排列效果。
关键代码如下：
<img src="作业/logo.gif" alt="网页设计、平面设计、UI设计" align="left" hspace="30" height="150" width="250"/>
<h2>传智播客设计学院</h2>
<p>传智播客设计学院</p >
效果如图1-1所示。
图1-1  效果图
2.设置文本样式和首行缩进效果
使用文本样式标记<font>控制标题和段落文本的样式。并通过color、size属性设置颜和粗细。最后使用首行缩进两个字符实现留白效果。
  关键代码如下：
<img src="作业/logo.gif" alt="网页设计、平面设计、UI设计" align="left" hspace="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．学会了如何在每个标签中添加属于本标签的属性及其属性值。
3．让我了解到了网站的实质性的内容。让我知道做网站并不是很难，但也并不是很容易，在网站的制作过程中需要的是细心和耐心。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。