PHPBuilder - Create An Online Photo Gallery



RSS Twitter
Articles Application Architecture

Create An Online Photo Gallery

by: Brett Patterson
|
November 21, 2005

The HTML Layout
To set things up we need to decide which format we're using, whether to use CSS or not and how to display our images. I chose to use CSS mixed with a table. The layout is CSS, and the table is used to display the gallery. Obviously you can choose to use what you wish, but I used a table for a simple reason: it's simple and effective. Plus, it's more universal, so anyone can adapt it to their pages.

Here's what I have currently for my HTML code:

Code For: photos.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> PHP Image Gallery </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Brett Patterson">
<META NAME="Keywords" CONTENT="PHP Image Gallery PHPBuilder Builder">
<META NAME="Description" CONTENT="A simple PHP Builder Article overviewing an Image Gallery">
<link type="text/css" rel="stylesheet" href="phpbstyle.css">
</HEAD>

<BODY>
<div id="wrap">
  <div id="header">
    <img src="http://phpbuilder.com/images/new-logo.gif">
    <span class="tag">Image Gallery for PHP Builder</span>
  </div>
  <div id="main">
    <p>
      <table>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #999;">&lt;!-- This is where our main stuff will go --></span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/table>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p>
&nbsp;&nbsp;&lt;/div>
&nbsp;&nbsp;&lt;div id="clear">&lt;/div>
&lt;/div>
&lt;/BODY>
&lt;/HTML>

Things you'll notice
At this point I'm sure you are familiar with this sort of code. What you may have noticed is that I referenced a CSS document called "phpbstyle.css" in the head. This stylesheet contains all the information needed to display the page and links properly. The code is simple:


Code For: phpbstyle.css


body{
  text-align: center;
  padding: 0;
  margin: 0;
}

body img{
  border: 0;
  padding: 0;
  margin: 0;
}

body a,
body a:link,
body a:visted{
  text-decoration: none;
  cursor: default;
  color: #090;
}

body a:hover,
body a:active{
  color: #abd;
  font-variant: small-caps;
}

#wrap{
  width: 750px;
  margin: 10px auto;
  padding: 0;
  border: 2px groove #ccc;
}

#header{
  width: 750px;
  height: 56px;
  background: url('http://phpbuilder.com/images/background.gif') top left repeat;
  padding: 0;
  margin: 0;
  border-bottom: 2px groove #ccc;
}

#header img{
  float: left;
  margin: 0;
  padding: 0;
  height: 56px;
  width: 300px;
}

#header .tag{
  float: right;
  width: auto;
  margin: 32px 5px 0 0;
  padding: 0;
  font-weight: bold;
  color: #fff;
  font-size: 14px;
}

#main{
  width: 740px;
  margin: 5px 5px;
  padding: 0;
  float: left;
  text-align: left;
}

#main table{
  width: 740px;
  border: 1px solid #ccc;
  float: left;
}

#main table tr,
#main table td,
#main table th{
  width: auto;
  border: 1px solid #ccc;
  color: #000;
}

#footer{
  width: 750px;
  margin: 0;
  padding: 0;
  float: left;
  border-top: 2px groove #ccc;
}

#footer .text{
  width: 740px;
  margin: 0 5px;
  padding: 0;
  float: left;
}

#clear{
  content: "";
  width: 750px;
  height: 0px;
  clear: both;
}


A Page is Born
Copy the code into a new document and save it in the same place as the other files, and name it "phpbstyle.css". If you view it in your browser, you should have an idea of what it will look like. Now we'll add some PHP to our HTML!!


1
|
2
|
3
|
4
Next Page »

Comment and Contribute

Your comment has been submitted and is pending approval.

Author:
Brett Patterson

Comment:



Comment:

(Maximum characters: 1200). You have characters left.