图文混排网页制作实验报告

深圳大学

实验报告

课程名称：网页设计与制作

实验序号：

实验名称：图文混排网页制作

班级：临床一班姓名：张

同组人：实验日期：2014 年4月21 日

教师签字：

一、实验目的

(1)掌握网页布局的方法。

(2)掌握在网页中插人图片的方法。

(3)掌握网页中图文混排的排版方法

二、实验环境

制作秋天的思念网页效果

三、实验步骤

(1)新建html，在页面属性中设置，背景颜色设置为“#313884” ,页面标题设置为“秋天的思念”。如下图

(2)插人一个3行1列的表格,将表格宽度设置为“558”像素.边框扭细、单元格边距、

单元格间距均设置为“0”像素,如图所示。鼠标右键可以再自动弹出的“属性”面板中设置表格的对齐方式为“居中对齐”。

(3)在“代码”视图中使用代码将第1行单元格的背景设置为图片“bg.gif”（光标插到在

并设置为左对齐,效果如图所示。

(4)将第2行和第3行单元格的背景颜色均设置为“#FFA200” ,在第3行的单元格内插人图片“blank.gif” ,并将其宽度设置为“1”像素、高度设置为“10”像素。

注意:blank.gif是一个宽和高均为1像素的透明图片,在网页制作中经常利用这种透明图片来

“撑开”表格,使其处于固定的宽度和高度。

(5)在第2行单元格内插人一个1行、3列的表格,将其宽度设置为100%,边框粗细、单元格边距、单元格间距均设置为“0”像素,对齐方式设置为“居中对齐”。

(6)在新插人表格的第2列单元格内插人图片“autu.jpg” ,将第1列至第3列单元格的宽度分别设置为2%、96%、2%,同时单击代码视图,将第1列和第3列单元格内的“ ”删除,效果如图5-4所示。

(7)在表格的下面输人以下版杈信息:

关于我们/网站地图/广告指南/联系我们/招聘精英技术支持：信息学院计算机/网络协会

Rll Rights Reserved

四、结果与分析

算是

成功完成。

五、思考题解答

1、“& nbsp” &是转义符，nbsp就是代码，全称就是空格转义符。作用是html语言里面用来表示空格的一个代码。

2、长度单位:分为绝对长度和相对长度.

绝对长度：em相对于父对象的大小，ex相对于特定字体中的字母x的高度，px相对于特定设备的分辨率，这是最最常用的单位，也是我们一直坚守的单位。从技术角度来说，px像素其实是一种相对大小的度量单位，它于特定设备的显示或打印的分辨率有关。例如，一个像素在被显示在计算机屏幕上与被打印在纸张上的大小是不同的。

绝对长度单位在打印时或在屏幕显示设备的物理尺寸已知时才比较有用。in英寸cm厘米mm 毫米pt点pc12点活字。

一般使用绝对长度中的pt点和相对长度里的px

3、这个问题我在上次实验就发现了，问了老师，老老师说Dreamweaver本身是没有调节背景图片的属性功能。这次有空我上网搜搜了发现网上有两个解决办法【（1）可以直接在代码框中编写，（如图片是123.jpg，默认是平铺，改为不平铺的代码是：background="ima ges/123.jpg" style=background-repeat:no-repeat>；（2）也可以就在页面属性里可以找到重复和不重复的选择进行设置。（3）还有人用插入】

前两个页面属性设置原理一样所以亲测一个如下图亲测后发现

是下图的结果。

插入亲测也不可以，效果如下图

所以要么通过ps把图片分辨率改大，或者直接选一张大图，便可以在Dreamweaver中看到。

六、心得体会

这个实验有点难，觉得有些都不怎么会，比如文本插入，后来仔细看了下实验书和网上的教程，才算完成（ps：后来又回顾了ppt发现就在2章就讲了，哎！）。可能是上课老师有演示但是自己忘了吧，所以做得有点慢。不过后来成功完成后小有成就感。