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

长春大学

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 />标记应用align属性和hspace属性实现图像居左文

字居右、且图像和文字之间有一定距离的排列效果。

关键代码如下：

align="left" hspace="30" height="150" width="250"/>

传智播客设计学院

传智播客设计学院

效果如图1-1所示。

图1-1 效果图

2.设置文本样式和首行缩进效果

使用文本样式标记控制标题和段落文本的样式。并通过color、size属性设置颜色和粗细。最后使用首行缩进两个字符实现留白效果。

关键代码如下：

align="left" hspace="30" height="150" width="250"/>

传智播客设计学院

传智播客设计学院

效果如下图1-2所示。

图1-2 效果图

六、实验总结

在实验过程中，遇到了一些问题，例如图片在标题文字的上方，而不是居

左，在翻阅过课本后，在标题标签里加上了align这个属性来控制图片的位置。

通过这次实验，让我学会了以下几点：

1．学会了如何运用title,font,p,hn,等标签。

2．学会了如何在每个标签中添加属于本标签的属性及其属性值。

3．让我了解到了网站的实质性的内容。让我知道做网站并不是很难，但也并不是很容易，在网站的制作过程中需要的是细心和耐心。