Data Viewer Page
We will now focus our attention to the Data Viewer
page. According to our design, this page will allow visitors to the site to interact with some of the datasets that you have produced.
Layout & Structure
For this particular page we use the same the common elements as on the landing page: the Header, Spacer and Footer sections. To that we will add two content sections. The Chart
section will be used to present a graphs of statistical data. The Map
section will be used to present a map viewer that shows spatial data with some basic level of user interaction.
Let's begin with the implementation of the Data Viewer
page. Using the file explorer, navigate to the simple-website folder and copy the index.html file. Name the copy data-viewer.html. Open the simple-website/data-viewer.html file and change/add the sections highlighted below in figure 1.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
dotdotdot <section id="spacer"> <!-- Info Bar --> <p>Visualizations using OpenLayers, MapServer and Python...</p> </section> <!-- Chart Section --> <section class="one-column"> <article id="bar_chart"> <h2>Bar Chart</h2> <div id="chart_container"> A chart will come here... </div> </article> <br class="clear"/> </section> <!-- Map Section --> <section class="one-column"> <article id="web_map"> <h2>Web Map</h2> <div id="map_container"></div> A map will come here... </article> <!-- web_map --> <br class="clear"/> </section> <footer> dotdotdot |
We have simply included a new message in the spacer
section, line 5, and in place of the featured-content
section we have created two new sections, lines 7-16 and 18–26.
Styling
We are going to create an independent style file for this page to make it easier to extend this page in the future. Create a new file inside the styles folder and name it viewer.css. Open the simple-website/styles/viewer.css file for editing and add the code in Listing 2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/*---------------------------------------------------------------- Name: viewer.css Date: January 2024 Description: [simplified] styles for the Web Programming exercise (data viewer page) Version: 3.0 ----------------------------------------------------------------*/ /*-------------*/ /* Viewer Page */ /*-------------*/ .one-column { width:auto; max-width:1200px; clear:both; margin:0 auto; } .one-column article { font-size:14px; } #web_map, #bar_chart { font-size:14px; line-height:25px; width:100%; } #web_map h2, #bar_chart h2 { font-size:20px; padding:20px 0 10px; } |
Since the new sections are going to use the full width of the page (as a single column), in lines 12–21 we specify the required style rules for that. The last part is styling the titles of the two new sections.
To connect the style file to the page update the simple-website/data-viewer.html file as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
dotdotdot <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>A Simple Website</title> <!-- styles --> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans|Baumans' type='text/css'> <link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" /> <link rel="stylesheet" href="styles/viewer.css" type="text/css" media="screen" /> </head> dotdotdot |
Note that we now load two CSS files: main.css
loads all styles common to all pages and viewer.css
refines those rules for this specific page. Reload the page to check the result.
Making the menu work
There is now only one thing wrong: We can only change from the landing page to the data-viewer page by loading them 'by hand', the menu is not actually working as such... We need to add URLs to the href
parameters in the links for that. Add those URLs in the two html files as indicated in the listings 4 and 5 below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
dotdotdot <div class="container header"> <header> <h1>A Simple Website</h1> <p>Using HTML5 and CSS3</p> <nav> <ul> <li><a href="./index.html">Home</a></li> <li class="active"><a href="./data-viewer.html">Data Viewer</a></li> <li><a href="">Services</a></li> </ul> </nav> </header> </div> <section id="spacer"> <!-- Info Bar --> <p>Visualizations using OpenLayers, MapServer and Python...</p> </section> dotdotdot |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
dotdotdot <div class="container header"> <header> <h1>A Simple Website</h1> <p>Using HTML5 and CSS3</p> <nav> <ul> <li class="active"><a href="./index.html">Home</a></li> <li><a href="./data-viewer.html">Data Viewer</a></li> <li><a href="">Services</a></li> </ul> </nav> </header> </div> <section id="spacer"> <!-- Info Bar --> <p>Your source of geo-spatial information & services!</p> </section> <section id="featured_content"> <article> <a href="./data-viewer.html"> <img src="images/dataviewerlogo.png" alt="data viewer"/> <h3>Data Viewer</h3> <p>This will link to a page of data viewers.</p> </a> </article> dotdotdot |
Reload the pages and check the result. You should be able to figure out why we included the class="active"
parameter to the <li>
elements in the way we did... ;-)