Web Programming - Short Introduction

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.

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

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:

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:

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... ;-)