Creating the Template

Table of content

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> </td> <td align="center">© 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).

Table of content

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

Crystal Reports 9 on Oracle (Database Professionals)

Cisco CallManager Fundamentals (2nd Edition)

Lotus Notes Developers Toolbox: Tips for Rapid and Successful Deployment

Web Systems Design and Online Consumer Behavior

Microsoft Office Visio 2007 Step by Step (Step By Step (Microsoft))

Python Programming for the Absolute Beginner, 3rd Edition

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net