Final Project Page 6




Projects

2 | 3 | 4 | 7 | 10 | 12 | 13 | 17 | 18 | 19 | 20 | Final



Registration Form Tutorial
Part 3: Header Script


Copy the following script into another blank document in a text editor, Netscape Composer, Dreamweaver, etc. and save the script as header.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Elliott Smith Fan Club</title>
   
<style type="text/css">

    body {
        margin:0px 0px 0px 0px;
        background: #9F9;
        }
   
    #leftcontent {
        float:left;
        width:67%;
        background:#fff;
        border-right:2px solid #000;
        border-bottom:2px solid #000;
        margin-right:15px;
        padding-bottom:20px;
        }

    p,h1,pre {
        margin:0px 30px 10px 30px;
        }
       
    h1 {
        font-size:14px;
        padding-top:10px;
        }
   
    #rightcontent p {
        font-size:14px;
        margin-left:0px;
        }
   
</style>
</head>
<body>

<!-- BEGIN CHANGEABLE CONTENT. -->
<!-- Script 8.2 - header.html -->

Script Explanation:

The script primarily contains the Cascading Style Sheet (CSS) information and the beginning html for a web page.  More information about CSS can be obtained at W3 Schools.
Modifications:

Delete:
     Lines 16-22
Change the information in the following lines:
     Line  6: change Elliott Smith Fan Club to (your site name)
Add the following:
    background-color: #663366; at the body section;  this will change the color of the background
    font-size:18px; and margin-left:0px; in #leftcontent section;

    body,td,th {
       font-family: Arial, Helvetica, sans-serif;
       color: #FFFFFF;
    }   before </style>
Copy all h1 information and paste above #rightcontent section
     In pasted area, change h1 to h2
                              change
font-size to 16px and padding-top to 10px
Save the script.

Now, create a new table which will divide the navigation and screen content.
Copy the following and paste it at the bottom of this script.  Change the information in the header to reflect the name of your site.

<table style="width: 100%; text-align: left;" border="1" cellpadding="6"
 cellspacing="2">
  <tbody>
    <tr align="center">
      <td colspan="2" rowspan="1" style="vertical-align: top;"><span
 style="font-weight: bold;">
      <h1>DA Secret Society of DaZone<br>
      </h1>
      </span></td>
    </tr>
    <tr>
      <td style="width: 20%; vertical-align: top;">
      <h1>Navigation</h1>
&nbsp;<a href="index.php">Home</a><br>
&nbsp;<a href="login.php">Login</a><br>
&nbsp;<a href="register.php">Register</a><br>
      <br>
      <h2>(Temporary Navigation)</h2>
        </span></div>&nbsp;<a href="create_db.php">Create Database</a><br>
&nbsp;<a href="create_table.php">Create Table</a><br>
&nbsp;<a href="view_members.php">View Database Entries</a><br>
&nbsp;<a href="edit_entry.php">Edit Database Entries</a><br>
&nbsp;<a href="delete_entry.php">Delete Database Entries</a>
      </td><td>

Save the script.



Tutorial
<---  1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  --->


Home Resume Page Hobbies Page InfoSec Page Projects Page Advanced Web Communications Page
Top of Page
 
©
Beth Zuber, 2005