GNU   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   Bob Dylan Quotes+       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  


Web design course tutorial 9 : sub-menus and CSS


Question 9.1: Unzip the archive file webdesign-tutorial-09.tar.gz using Winzip or the tar command for the purposes of completing this tutorial.


§ 9.1 Uploading your Website to Ripway.com


Question 9.2: Use the program FTP (Note that F.T.P. stands for File Transfer Protocol) to transfer all of the files in the folder tutorial-9 to your 50webs.com account. To do this you will need to follow the following steps:

  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 prom 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 50webs.com Website to verify that all files (P.H.P. and image) have been uploaded successfully.


Question 9.3: Then check that the sub-menus of the page inner work propertly.


Question 9.4: Change the variable $logo in the file tutorial-9/index.inc to something more appropriate to your Website. Also change the file tutorial-9/index.php so that it says: Welcome to Your Name's Website! and displays an image that is more appropriate to your Website.


§ 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 TITLEX.
  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 FILE1,FILE2,FILE3, . . .  ,FILEN. 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 TITLE1,TITLE2,TITLE3, . . .  ,TITLEN.
  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-FILEI.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 TITLEP.
  12. Change the $backto setting near the bottom of X.php to: $backto = "<a href=M.php>Back to TITLEP</a>";


Question 9.5: Add sub-menus apple-1.php, apple-2.php and apple-3.php to the page apple.php. Upload your changes using the command mput *.php *.inc and use a Web browser to check that the sub-menus have been added successfully.


Question 9.6: Add sub-menus apple-1-1.php, apple-1-2.php and apple-1-3.php to the page apple-1.php. Upload your changes using the FTP command mput *.php *.inc and use a Web browser to check that the sub-menus have been added successfully.


§ 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 FILE1,FILE2,FILE3, . . .  ,FILEN.
  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-FILEI.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.


Question 9.7: Delete sub-menus inner-1.php, inner-2.php and inner-3.php from the page inner.php. Upload your changes using the FTP commands mdelete *.php *.inc and mput *.php *.inc and use a Web browser to check that the sub-menus has been deleted successfully.


Question 9.8: After you have answered the previous question and verified that it did delete the sub-menus, delete the page inner.php. Go back to Section § 8.5.4 if you cannot remember how to do this. Upload your changes using the FTP commands mdelete inner.php and mput inner.* and use a Web browser to check that the page has been deleted successfully.


Question 9.9: Swap the following variables at the top of the files *.inc:

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

Every file that you edit will need to be transmitted using the program FTP before you can load your Website into a Web browser. For example, if you edit stylesheet.css and index.php, then you will need to issue the command: mput stylesheet.css index.php.

§ 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:


<span class="rb">I have a red foreground and a black background.</span>

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.


Question 9.10: Add code to stylesheet.css to create a span tag with class name myspan with no bold, no italics, Helvetica font, green background and yellow foreground. Add some H.T.M.L. code to tutorial-9/index.php so that some text is shown with the span class myspan and finally open index.php in a Web browser to verify that <span> tags are correctly rendered.


§ 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.


Question 9.11: Using similar code to the above, write a C.S.S. definition so that <h2> tags show up with center alignment and green foreground and no other styles. Change index.php so that it contains an <h2> tag and finally open index.php in a Web browser to verify that <h2> tags are correctly rendered.


Question 9.12: Write a C.S.S. definition so that <h3> tags show up with left alignment, green foreground and a yellow background and no other styles. Change index.php so that it contains an <h3> tag and finally open index.php in a Web browser to verify that <h3> tags are correctly rendered.


Question 9.13: Write a C.S.S. definition so that <h4> tags show up with left alignment, green foreground, yellow background, orange left borders, orange bottom borders and no other styles. The following code will help you to achieve this:

 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

Here are some attributes that you can apply to default text:
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.


Question 9.14: Make it so that default text appears with a red colour, in the Helvetica face with no bold and no italic.


Question 9.15: Visit the following Website www.w3schools.com/css/tryit.asp?filename=trycss_text-transform to find out how to uppercase, lowercase and capitalise text.


Question 9.16: Visit the following www.w3schools.com/css/tryit.asp?filename=trycss_text-indent to find out how to set the amount of paragraph indent.


§ 9.4.4 Removing the underlining of hyperlinks

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

a {text-decoration: none}


Question 9.17: Add this code to the C.S.S. page of your Website stylesheet.css and check that it does indeed remove the underlining of hyperlinks.


§ 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
}


Question 9.18: Write some C.S.S. code so that the background image in your Website is different to the one above, and does repeat, but is not fixed, so that it scrolls whenever you scroll the screen. See the following Website: www.w3schools.com/css/css_background.asp for more information.


Back to Web Design Course
This page has the following hit count:
| 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 | Bob Dylan Quotes+ | 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
Last modified: Sun Oct 9 14:46:30 NZDT 2016
Best viewed at 800x600 or above resolution.
© Copyright 1999-2016 Davin Pearson.
Please report any broken links to