Web Programming with html5, css, and JavaScript

enhanced home page with Website Navigation
Although it’s not a disaster, the previous subsection’s proposal produces a result that is not as user-
friendly as it might be. It would be friendlier if the overall website name and navigation buttons 
were visible and accessible on every web page. This would help the user remember the context and 
enable the user to visit any subset of the website’s pages in any order. And it would preserve the 
user’s ability to retrace steps using the browser’s back arrows. How might you get this friendlier 
presentation?
Conceptually, it’s pretty simple. Just copy the 
header
element in Figure 6.25 from the top of 
the 
body
element in the new 
index.html
 file, and insert it at the same place (as the first item in 
the 
body
element) in each of the other files in the website directory.
For an additional user benefit, you might also insert the 
footer
element in 
FIGUre 6.28
as 
the last item in each file’s 
body
element. This puts two more navigation buttons at the bottom of 
each page. The first button’s 
href="#"
attribute tells the browser to jump to the top of the current 
page. The second button tells the browser to jump to the home page. Because they are embedded 
in the same types of elements as the header buttons, these additional buttons automatically utilize 
the same common CSS rules as the buttons at the tops of the web pages.
FIGUre 6.28 
Insert this footer at the bottom of each web page’s 

 element
263
6.13 Case Study: Local Energy and Home Page with Website Navigation

• Top

Home
• Home

---

FIGUre 6.29
shows the result. Although this enhanced website navigation is indeed user-
friendly, it still leaves something to be desired. There is substantial duplication of headers and foot-
ers. And it’s not just the duplication. Do you remember those 
href="#"
destination addresses for 
the last four buttons in Figure 6.25? Each time a new page is added to the website, the developer 
must remember to replace that 
#
with the address of the new page on 
all
previous pages. You’ll 
see how to solve this problem later in the case study section at the end of Chapter 10. Meanwhile, 
the case study section at the end of Chapter 7 will introduce an alternative approach that does not 
exhibit the current redundancy problem.