下载掌阅APP，畅读海量书库
立即打开
文本、图像和超链接是HTML页面中使用最多的3种元素，掌握这些元素的使用方法，就可以创建一个有模有样的HTML页面。本节内容主要根据前面所学知识，创建一个用户信息展示的HTML页面，最终效果如图4.26所示。详细操作步骤如下：
图4.26
在Dreamweaver中新建一个空白的HTML页面。
分析如图4.25所示效果，我们可以用<img>标记插入图片，用于展示用户照片。基本信息的分类标题可以用<h3>标记展示，如“基本信息”“学校信息”和“个人信息”。照片下面与用户互动的文字可以设置为超链接，当击这些超链接的时候，跳转到其他页面。其余的文字信息可以用段落标记<p>或者文本格式化标记。
页面基础布局。该页面整体可以分为左右结构两部分，左侧又可以再分为上中下结构3部分，我们分别用div标记表示各个部分。为了让各个部分看的更清晰，我们为每个div标记设置了背景颜色，相关代码如下所示：
在浏览器中查看效果，如图4.27所示。
用img元素在左侧插入图像，相关代码如下所示：
在浏览器中查看效果，如图4.28所示。
图4.27
图4.28
在img元素下面创建一个div元素，这个div元素内嵌了两个超链接和一个邮件地址，并用b标记加粗这些字体，相关代码如下：
在浏览器中查看效果，如图4.29所示。
在超链接的下面添加一个table标记，用于显示一些基本信息，相关代码如下：
在浏览器中查看效果，如图4.30所示。
（7）在右侧的div元素中添加一个table元素，使用th标记显示用户信息分类的标题，使用td标记显示用户基本信息，相关代码如下：
在浏览器中查看效果，如图4.31所示。
图4.29
图4.30
图4.31
（8）将左侧背景色修改成与右侧背景色相同的样式，相关代码如下：
页面最终效果如图4.26所示。