Layout preview
Ever wondered how I did the preview thing for my designs page? You'll need to do 3 pages:
- A page with your logo (keep it small),
- The page that will merge the 2 other pages,
- The page(s) with the layout preview, or anything else you want to use this script for.
Let's make the first page, with your logo. I'll use mine in the example:
And here we go with the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>YOUR TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="false" />
<style type="text/css">
body { background-color: #E4EDF4; background-repeat: no-repeat; margin: 0px; padding: 0px;}
</style>
</head>
<body>
<img src="LOGO-URL" alt="" border="0" />
</body>
</html>
Save this page as header.php
Now, let's make the page that will merge the 2 others, this is where the php makes its entry. We're going to use frames.
<?
$siteurl = "http://your-domain.com";
if ($url) {
$sitedir = "http://your-domain.com/layout/directory/$url";
// Don't delete $url !!!
}
else {
header("Location: $siteurl");
}
?>
<html>
<head>
<title>YOUR TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="false" />
</head>
<frameset frameborder="0" rows="LOGO IMAGE HEIGHT (a number),*">
<frame src="http://your-domain.com/header.php" scrolling="no">
<frame src="<?php echo $sitedir; ?>">
<noframes>
<body>
Viewing this page requires a browser capable of displaying frames.
</body>
</noframes>
</frameset>
</html>
Save this as view.php and voila!
Now what's left is to create your layout directory (put its url in $sitedir). Inside that folder, create a new folder for each layout (no space!), for example:
-/layout001/
-/image.jpg
-/index.html
-/layout002/
-/image.jpg
-/index.html
Your layout page must be named index.html or .htm!
To make a link to the final preview page, do this:
<a href="http://your-domain.com/view.php?url=layout001">Preview Layout 001</a>
Hope it works!
3 Responses to “Layout preview”
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)
where do we save the first and second page? in wordpad or something?
Hi, I would like to know if there's any preview of it.
:x
Thanks for the tutorial, I like it :)
i can't make a preview i tried to follow the steps but it doesn't work.. hmm I'm having a hard time following your instruction on making new folders for the layout...