WP_Query is your friend. Combined with featured images, you should be able to do this as a page template with a WP_Query call and loop.
This is the html for the top post at the moment:
<li class="">
<a href="http://dsi.sva.edu/cheryl-heller-named-in-top-100/">
<img src="http://dsi.sva.edu/wp-content/uploads/2013/01/public-interest-design.jpg" width="332px">
</a>
<span><b><p style:="" color:="" #f15c25;=""><a href="http://dsi.sva.edu/cheryl-heller-named-in-top-100/">Cheryl Heller was named one of the top 100 leaders in Public Interest Design.</a></p></b></span>
</li>
Instead you could do this:
$news = new WP_Query();
if($news->have_posts()){
while($news->have_posts()){
$news->the_post();
?>
<li class="<?php post_class(); ?>">
<a href="https://wordpress.stackexchange.com/questions/81865/<?php echo get_permalink(); ?>">
<?php the_post_thumbnail('topnewsimage'); ?>
</a>
<span><b><p style:="" color:="" #f15c25;=""><a href="https://wordpress.stackexchange.com/questions/81865/<?php echo get_permalink(); ?>"><?php the_title('',''); ?></a></p></b></span>
</li>
<?php
}
}
You can use the css classes that get added by the post_class
call to style things in your stylesheet ( remove those inline styles at once )
A final step, see how I put ‘topnewsimage’ as the size of the post thumbnail? You will need to let WordPress know about this new image size. You will need to add this to the functions.php of your theme and then regenerate your thumbnails using an appropriate plugin:
add_image_size( 'topnewsimage', 332, 248, true );
This will give you the featured images at the correct size without warping and stretching them.
Once you’ve done this, you can remove all your custom fields, you no longer need them.
You can control this further, including the number of posts, the type of posts, categories etc, by passing arguments into WP_Query. There’s an extensive list of options on the WordPress codex entry for WP_Query.