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.

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

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

<p>Visualizations using OpenLayers, MapServer and Python...</p>

</section>

<h2>Bar Chart</h2>

A chart will come here...

</div>

</article>

</section>

A map will come here...

</article>

</section>

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

/*----------------------------------------------------------------
  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;
}

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:

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

1

2

3

4

5

6

7

8

9

10

11

12

13

dotdotdot

<head>

<title>A Simple Website</title>

</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:

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

dotdotdot

<h1>A Simple Website</h1>

<p>Using HTML5 and CSS3</p>

<nav>

<ul>

<li class="active"><a href="./data-viewer.html">Data Viewer</a></li>

<li><a href="">Services</a></li>

</ul>

</nav>

</header>

</div>

<p>Visualizations using OpenLayers, MapServer and Python...</p>

</section>

dotdotdot

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

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

<h1>A Simple Website</h1>

<p>Using HTML5 and CSS3</p>

<nav>

<ul>

<li><a href="./data-viewer.html">Data Viewer</a></li>

<li><a href="">Services</a></li>

</ul>

</nav>

</header>

</div>

<p>Your source of geo-spatial information & services!</p>

</section>

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

Web Programming - Short Introduction

Data Viewer Page

Layout & Structure

Styling

Making the menu work

Exercise Sections

Page Content