The news page will be the first "real" dynamic page that we create. Actually it will consist of not one, but three dynamic pages:

• Overview of the seven latest news articles
• Full display of a specific article
• News archive (list of all news articles)

The following sketch illustrates this:

As you can see from the illustration, the news overview will be accessible from within the main menu of the site. The full display of an article will be shown when the user clicks the title, the thumbnail image or the "Read more" part of a specific article (also by clicking on an article title from within the archive).

The archive will be accessible from the bottom of the news overview. It will simply present a list of all the articles that have been published. The articles in the overview and the archive list will be sorted by their publishing date (recent articles will appear at the top of the list).

Adding more CSS
In order to format the news-related pages in a nice way, we need to add a bit more CSS. Simply copy and append the following CSS code to the contents of the "tscm.css" file.

.latest_news

{

   width: 75%;

   margin-left: auto;

   margin-right: auto;

}

 

.headline_link a

{

   color: #000000;

   font-family: Times New Roman, Times;

   font-size: 140%;

}

 

.headline_link a:visited

{

   color: #000000;

   font-family: Times New Roman, Times;

   font-size: 140%;

}

 

.headline_link a:hover

{

   color: #888888;

   font-family: Times New Roman, Times;

   font-size: 140%;

   text-decoration: none;

}

 

.headline

{

   color: #000000;

   font-size: 200%;

   font-family: Times New Roman, Times;

   padding-bottom: 24px;

}

 

.news_archive

{

   width: 85%;

   font-size: 80%;

   margin-left: auto;

   margin-right: auto;

}

 

.center

{

   font-size: 80%;

   text-align: center;

}