在HTML中，可以通过使用<iframe>标签来创建顶部框架和左右框架，框架（Frame）是一种HTML页面布局方式，它允许在一个页面中嵌入其他HTML页面，从而实现在一个浏览器窗口中显示多个页面的效果，这种布局方式在早期的网页设计中非常流行，但随着HTML5和CSS布局技术的发展，框架的使用已经逐渐减少，在某些特定场景下，使用框架仍然具有一定的实用价值。
我们需要创建一个包含顶部框架和左右框架的HTML页面，这可以通过在HTML文档中使用<frameset>标签来实现。<frameset>标签定义了一个框架集，其中可以包含多个框架，接下来，我们将详细介绍如何设置顶部框架和左右框架。
1、创建一个HTML文件，例如frames.html，并在文件中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<style>
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<frameset cols="200, *">
<frame src="left_frame.html" name="left_frame" />
<frame src="main_content.html" name="main_frame" />
</frameset>
</html>
在上面的代码中，我们首先定义了一个<frameset>标签，其cols属性设置为"200, *"，表示左右框架的宽度比例，左侧框架的宽度固定为200像素，右侧框架的宽度占据剩余空间，接着，我们使用两个<frame>标签分别定义了左右框架，并设置了src属性为对应的HTML文件。
接下来，我们需要创建左右框架中的HTML文件，这里我们创建两个简单的示例文件：left_frame.html和main_content.html。
left_frame.html:
<!DOCTYPE html> <html> <head> <title>左侧框架</title> </head> <body> <h1>左侧框架内容</h1> <p>这里是左侧框架的示例内容。</p> </body> </html>
main_content.html:
<!DOCTYPE html> <html> <head> <title>主要内容</title> </head> <body> <h1>主要内容区域</h1> <p>这里是主要内容区域的示例内容。</p> </body> </html>
我们可以在浏览器中打开frames.html文件，查看顶部框架和左右框架的效果。
常见问题与解答：
Q1: 如何调整框架的大小？
A1: 可以通过设置<frameset>标签的cols或rows属性来调整框架的大小，设置cols="150, *"将左侧框架的宽度设置为150像素，右侧框架占据剩余空间。
Q2: 如何为框架设置滚动条？
A2: 框架默认会根据内容自动显示滚动条，如果需要隐藏滚动条，可以通过CSS样式来实现，为<iframe>标签添加overflow: hidden;样式。
Q3: 如何在框架之间进行通信？
A3: 可以通过JavaScript和窗口对象（window）来实现框架之间的通信，在左侧框架中获取右侧框架的内容，可以使用parent.frames["right_frame"].document.getElementById("element_id")，同样，右侧框架也可以访问左侧框架的内容，需要注意的是，出于安全考虑，现代浏览器对跨域框架通信有较多限制。