Q:

Header Links load into the "header" area

I am writing a Sinatra app w/ HTML pages.  I have created a .htm header that is loaded into each page.  This is the code for the header and how I load it into each page:
Header
<html>
  <head>
    <link type="text/css" rel="Stylesheet" href="/stylesheets/center.css" />
  </head>
  <body>
    <div>
      <div style="height:80%">
        <div style="height:75%">
        </div>
        <div style="height:25%;">
          <a href="/" style="padding-right:20px;padding-left:20px;vertical-align:bottom;">Home</a>
          <a href="/page1" style="padding-right:20px;padding-left:20px;">Page 1</a>
          <a href="/page2" style="padding-right:20px;padding-left:20px;">Page 2</a>
          <a href="/page3" style="padding-right:20px;padding-left:20px;">Page 3</a>
          <a href="/page4" style="padding-right:20px;padding-left:20px;">Page 4</a>
          <a href="/page5" style="padding-right:20px;padding-left:20px;">Page 5</a>
          <a href="/page6" style="padding-right:20px;padding-left:20px;">Page 6</a>
          <div style="90%;">
          </div>
      </div>
      <div style="height:10%">
        <hr>
      </div>
    </div>
  </body>
</html>

Index
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/stylesheets/background.css">
  </head>
  <body>
    <div>
      <iframe name='header' id="header" src="header" frameborder="0" border="0" cellspacing="0" width="100%"></iframe>
    </div>
    "Something is coming!!"
  </body>
</html>

My web.rb file has the following for each page:
get '/page2' do
  send_file 'views/page2.html'
end

However, with this current setup.  When I click the link it loads the entire new page in the "header" region.  I expect it to load the entire new page.  I am new to Sinatra and web programming in general.  Any ideas on why it would load in the header region instead of replacing the page would be extremely helpful.
Thanks!

A:

It looks like you want to use a Templates like erb or haml.
They have a concept of layouts, this mean you can create a Layout file.
For erb you can create a file called layout.erb
$cat views/layout.erb
<html>
  <head>
     somethings
  </head>
  <body>
    your navigation
    <div id="content">
      <%= yield %>
    </div>
  </body>
<html>

When you now create a view like index.erb 
$cat views/index.erb
<span>Something is coming!!</span>

Which you can render with erb instead of send_file
get '/page2' do
  erb :index
end

What now happens is that your layout engine take care of it and combine your view with you layout. So simple explained they take care of copy your view to the place in your layout where the <%= yield %> tag is.
I recommend to check out the sinatra doc for views.

