WD-2A: Server Code
Last Updated: 22 March 2015
Each design must be displayed in a way that gives the client an idea of how the final website will actually look.
The image for each page is coded into a seporate html page to display the image in a way that closely resembles how a real webpage will acually look.
The method and code required to achieve this is shown below
index.html provides a menu of all the designs
design_1.php formats and displays design_1.jpg
design_2.php formats and displays design_2.jpg
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
</head>
<body>
<ul>
<li><a href="design_1.php">Design 1</a></li>
<li><a href="design_2.php">Design 2</a></li>
</ul>
</body>
</html>
design_1.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
body {text-align: center; margin: 0; padding: 0;}
img {margin: 0 auto;}
</style>
</head>
<body>
<img src="design_1.jpg" />
</body>
</html>
design_2.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
body {text-align: center; margin: 0; padding: 0;}
img {margin: 0 auto;}
</style>
</head>
<body>
<img src="design_2.jpg" />
</body>
</html>
