Creating the Template

Previous page
Table of content
Next page

The first step in developing this application is to create a template system to handle the HTML design. The end result (Figure 12.1) will use tables and some Cascading Style Sheets (CSS).

Figure 12.1. The default layout used by the application in this chapter.


To make header.html

1.

Create a new HTML document in your text editor (Script 12.1).

 <!DOCTYPE html PUBLIC "-//W3C//DTD  XHTML 1.0 Transitional//EN "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-transitional.dtd> <html xmlns="http://www.w3.org/1999/  xhtml xml:lang="en" lang="en"> <head>   <meta http-equiv="content-type"    content="text/html; charset=    iso-8859-1 />   <title><?php echo $page_title;    ?></title>

Script 12.1. The header file begins the HTML layout and includes the necessary CSS code.


Notice that, once again, I'll use PHP to print out a page-specific title between the HTML title tags.

2.

Create the CSS code.

 <style type="text/css" media=  "screen>   body {background-color: #ffffff; }   .content {     background-color: #f5f5f5;     padding-top: 10px;      padding-right: 10px;      padding-bottom: 10px;      padding-left: 10px;     margin-top: 10px; margin-right:      10px; margin-bottom: 10px;      margin-left: 10px; }   a.navlink:link {color: #003366;    text-decoration: none; }   a.navlink:visited {color:    #003366; text-decoration: none; }   a.navlink:hover {color: #cccccc;  text-decoration: none; }   td {      font-family: Verdana, Arial,    Helvetica, sans-serif; font-size:    13px;     vertical-align: top;   }   .title {      font-size: 24px; font-weight:       normal; color: #ffffff;      margin-top: 5px; margin-bottom:       5px; margin-left: 20px;      padding-top: 5px;       padding-bottom: 5px      ; padding-left: 20px;   } </style>

For this application, I'm going to use some CSS to adjust the formatting of the text. Because there's not a lot of CSS data to consider, I'll store it directly in the HEAD of the HTML code, rather than in a separate file.

3.

Complete the HTML head and create the first row of the layout table.

 </head> <body> <table width="90%" border="0"  cellspacing="10 cellpadding="0"  align="center> <tr>   <td colspan="2" bgcolor=    "#003366><p >    Content Management Site</p></td>   </ tr>

The basic layout of the site will be a table with three rows: the title row, another row containing the navigation links and the content, and a third row for the copyright (Figure 12.2).

Figure 12.2. The same layout (see Figure 12.1), displayed using borders to indicate the rows and columns of the table.


4.

Create the navigation section and begin the content cell.

 <tr>   <td valign="top" nowrap="nowrap"> <b><a href="index.php" class=  "navlink>Home</a><br /> <a href="view_urls.php" class=  "navlink>View URLs</a><br /> <a href="add_url.php" class=  "navlink>Add a URL</a><br /> <a href="view_files.php" class=  "navlink>View Files</a><br /> <a href="add_file.php" class=  "navlink>Add a File</a></b>   </td> <td valign="top" >   <!-- Script 12.1 - header.html -->

5.

Save the file as header.html and upload to your Web server (into an includes directory).

To preview the Web document structure, see Figure 12.3.

Figure 12.3. The structure of the Web application, with the html folder as the root directory (www.address.com will point there).


To make footer.html

1.

Create a new HTML document in your text editor (Script 12.2).

 <!-- Script 12.2 - footer.html -->

Script 12.2. The footer file concludes the layout and the HTML page as a whole.


2.

Complete the middle table row.

   </td> </tr>

All of the page's content is stored in the middle row, which was begun in header.html. This code will complete that row before creating the third, final row.

3.

Make the bottom row and complete the HTML page.

   <tr>      <td>&nbsp;</td>      <td align="center">&copy; 2005       Larry E. Ullman and DMC       Insights, Inc.</td>   </tr> </table> </body> </html>

4.

Save the file as footer.html and upload to your Web server (into the includes directory).


    Previous page
    Table of content
    Next page
    PHP and MySQL for Dynamic Web Sites. Visual QuickPro Guide
    PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (2nd Edition)
    ISBN: 0321336577
    EAN: 2147483647
    Year: 2005
    Pages: 166
    Authors: Larry Ullman
    BUY ON AMAZON
    Professional Java Native Interfaces with SWT/JFace (Programmer to Programmer)
    C++ How to Program (5th Edition)
    Visual C# 2005 How to Program (2nd Edition)
    Logistics and Retail Management: Emerging Issues and New Challenges in the Retail Supply Chain
    Oracle SQL*Plus: The Definitive Guide (Definitive Guides)
    Visual Studio Tools for Office(c) Using C# with Excel, Word, Outlook, and InfoPath
    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net
    Privacy policy