davin.50webs.com/webdesign a GNU world order – your home of everything that is free        Main Menu          Research Projects         Photo Album            Curriculum Vitae      The Greatest Artists     Email Address       Computer Games          Web Design          Java Training Wheels      The Fly (A Story)      Political Activism   Scruff the Cat       My Life Story          Smoking Cessation          Other Links             Tutorial 1             Tutorial 2               Tutorial 3                   Tutorial 4                 Tutorial 5             Tutorial 6             Tutorial 7               Tutorial 8                   Tutorial 9                 Tutorial 10             Tutorial 11         Dec/Hex Codes   H.T.M.L. ASCII Codes         Using Emacs           Download Links

§ 9.1 Uploading your Website to Ripway

1. Open an MS-DOS command prompt
2. Change directory to the tutorial-8 folder using the cd command.
3. Start FTP by entering the command ftp ftphost.ripway.com.
4. Enter your Ripway user name and password that you created in the last tutorial.
5. Enable "Binary Transfer Mode" using the command binary (or bin for short). Binary transfer mode is essential for images to be transmitted successfully.
6. Turn "Interactive Mode" to off using the command prompt (or pro for short).
7. Transfer all files using the command mput *
8. Wait for the files to be transmitted.
9. Leave the FTP program running so you can upload files at a later time.
10. Load your Website into a Web browser to make sure your Website has been transfered successfully.

When you have finished doing this, you should browse your Ripway Website to verify that all files (P.H.P. and image) have been uploaded successfully.

§ 9.2 Sub-menus and sub-sub-menus

§ 9.2.1 How to create sub-menus of a given page

1. Let the file of the page that you want to create sub-menus of be denoted by X.php.
2. Let the title of the page that you want to create sub-menus of be denoted by TITLE_X.
3. Let M.inc denote the menu page of X.php.
4. Let COLOR denote the colour of the sub menus inside the page X.php in the form #RRGGBB, for example #ff8844. It is cosmetically important that the colours of your sub-menus differ from the colours of all other menus in your Website.
5. Suppose you want to create N sub-menus in the page X.php.
6. Suppose the sub-menu files are FILE₁,FILE₂,FILE₃, . . .  ,FILE_N. Note that the files will be prefixed with X- so that you know that they are sub-pages of X.php.
7. Suppose the sub-menu titles are TITLE₁,TITLE₂,TITLE₃, . . .  ,TITLE_N.
8. Create a file X.inc containing the following:

   <?php
   
   include "M.inc";
   
   $button_col_bglo = "COLOR";
   
   for each sub-menu I in the set 1,2,3,...,N add a line that says: button("X-FILEI.php","TITLEI");
   
   $back_to = "<a href=X.php>Back to TITLEX Page</a>";
   
   ?>
       

9. For each I in the set 1,2,3,...,N Create a page X-FILE_I.php containing the following:

   <?php
   
   $file = "X-FILEI.php";
   $title = "TITLEI";
   include "X.inc";
   include "root-second.inc";
   
   ?>
   
   Your text for each page goes here
   
   <?php
   include "root-last.inc";
   ?>
   
       

10. Change the first include in X.php to: include "X.inc";
11. Let the parent title of the page that you want to create sub-menus of be denoted by TITLE_P.
12. Change the $backto setting near the bottom of X.php to: $backto = "<a href=M.php>Back to TITLE_P</a>";

§ 9.2.2 How to delete sub-menus of a given page

1. Let the file of the page that you want to delete sub-menus from be denoted by X.php.
2. Suppose there are N sub-menus of the page X.php.
3. Suppose the sub-menu files are FILE₁,FILE₂,FILE₃, . . .  ,FILE_N.
4. Delete the file X.inc. This will delete the menu buttons for the sub-pages that you want to delete.
5. Delete the files X-FILE_I.php for each I in the set 1,2,3,...,N. This will delete the sub-pages from your Website.
6. Delete the $backto= command in X.php.
7. Change the first include in X.php from X.inc to the value at the top of X.inc.

• Replace $button_col_fglo with $button_col_bglo
• Replace $button_col_fghi with $button_col_bghi
• Replace $button_col_bglo with $button_col_fglo
• Replace $button_col_bghi with $button_col_fglo

Save the files that you have edited and upload your changes to Ripway using the FTP command mput *.inc. View your Website in a Web browser and verify that the background and foreground colours of all of the menu buttons have been reversed.

§ 9.3 How to answer the following questions

§ 9.4 Introduction to Cascading Style Sheets

Recall from Section § 1.4 that you cannot specify the background colour of text using <font> tags. To do this you will need to use Cascading Style Sheets (or C.S.S. for short). Cascading Style Sheets are also useful because it allows you to separate the logic of your H.T.M.L. code from the layout (which is purely cosmetic). .

Although C.S.S. code can legally be put in every P.H.P. file, it is better to factor it out of the P.H.P. file and have one C.S.S. file that applies to all P.H.P. files. This is the approach that is taken in the Website associated with this tutorial. Therefore when you want to change the C.S.S. file, you only need to do it in one place: tutorial-9/stylesheet.css and the changes will be reflected in every Web page of the Website.

To access the file stylesheet.css in every Web page of your Website each H.T.M.L. Web page will need to look like this:

<html>
<head>
   <link rel="stylesheet" href="m4_home/stylesheet.css" type="text/css">
</head>
<body>
   Web page code goes here...
</body>
</html>

For the purposes of this tutorial, you don't need to add this code to every page of your Website because it is automatically included. See the file index.inc for one of the echo commands. The information in this section is given in case you are using plain H.T.M.L. documents, in which case you will have to manually add this code to the top of every page in your Website..

Visit the following Website for more detailed tutorials on how to use Cascading Style Sheets: www.w3schools.com/css/default.asp.

§ 9.4.1 Span tags

Span tags provide a way for you to specify the background colours of text. Here is an example of the definition of a span tag in the file stylesheet.css:

span.rb
{
   font-family: courier;
   font-weight: bold
   font-style: italic;
   color: #ff0000;
   background: #000000;
}

With this code in place you can create text which is in the courier font, with bold and italics turned on, has a black background and a red foreground. You cannot do this with the <font> tag. Here is how to use this font in an H.T.M.L. document:

Note that all of the entries in the definition of the span tag are optional. When specifying colours such as the color: or background: attributes, you can use hexadecimal RGB colour triplets (as is done above), or you can name colours explicitly using a colour name such as red. The third way to do this is by using a RGB decimal triplet such as rgb(255,0,0);. Legal values for the font-family: attribute include: Times, Courier, San-Serif (also known as Helvetica) and Comic Sans MS.

§ 9.4.1.1 Multiple values for the font-family: attribute

When specifying a font like Comic Sans MS which may not exist in non-Windows computers, it is wise to give one or more alternative fonts in case the first one doesn't exist. Consider the following C.S.S. code.

span.comic
{
   font-family: 'Comic Sans MS', Helvetica;
}

In the above, note that Comic Sans MS needs to be quoted as it has spaces in it. Then consider the following H.T.M.L. code:

<span class="comic">I might be in the Comic Sans MS font.</span>

The above sentence will appear in the Comic Sans MS font, and if that font doesn't exist, it will appear in the Helvetica font.

§ 9.4.2 <h1> - <h6> tags

Here is a definition of the <h1> tag to go in stylesheet.css:

h1 {
   font-family: courier;
   font-weight: bold
   font-style: italic;
   color: #ff0000;
   background: #ffffff;
   text-align: right;
   font-size: 40pt
}

With the above definition in place, whenever you write a pair of tags <h1>  . . .  </h1> it will show up in courier face, bold, italic, red foreground, black background, right text alignment and font size 40pt.

 border-bottom:   medium solid rgb(255, 128, 0);
 border-left:     medium solid rgb(255, 128, 0);

and finally open index.php in a Web browser to verify that <h4> tags are correctly rendered..

§ 9.4.3 <p> tags

p {
   font-family: courier;
   font-weight: bold
   font-style: italic;
   color: #ff0000;
   background: #ffffff;
   text-align: right;
   font-size: 40pt
}

Note that you will need to use </p> tags to get this feature to work. In these tutorials I have only taught you to use <p> tags by themselves.

www.w3schools.com/css/tryit.asp?filename=trycss_text-transform

www.w3schools.com/css/tryit.asp?filename=trycss_text-indent

§ 9.4.4 Removing the underlining of hyperlinks

The following C.S.S. code removes the underlining of hyperlinks:

a {text-decoration: none}

§ 9.4.5 Background tags

Here is some code to add to the C.S.S. to give you a stationary background image:

body
{
   background-color: #ffffff;
   background-image: url('dolphin.jpg');
   background-repeat: no-repeat;
   background-attachment: fixed
}

www.w3schools.com/css/css_background.asp