a GNU world order – your home of everything that is free
Web design course tutorial 9 : sub-menus and CSS
Question 9.1: Unzip the archive
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:
- Open an MS-DOS command prompt
- Change directory to the tutorial-8 folder using the cd command.
- Start FTP by entering the command ftp ftphost.ripway.com.
- Enter your Ripway user name and password that you created in the last tutorial.
- Enable "Binary Transfer Mode" using the command binary (or bin for short).
Binary transfer mode is essential for images to be transmitted successfully.
- Turn "Interactive Mode" to off using the command prompt (or prom for short).
- Transfer all files using the command mput *
- Wait for the files to be transmitted.
- Leave the FTP program running so you can upload files at a later time.
- 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
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
- Let the file of the page that you want to create sub-menus of be
denoted by X.php.
- Let the title of the page that you want to create sub-menus of be
denoted by TITLEX.
- Let M.inc denote the menu page of X.php.
- 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.
- Suppose you want to create N sub-menus in the page X.php.
- 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.
- Suppose the sub-menu titles are
TITLE1,TITLE2,TITLE3, . . . ,TITLEN.
- Create a file X.inc containing the following:
$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>";
- For each I in the set 1,2,3,...,N Create a page
X-FILEI.php containing the following:
$file = "X-FILEI.php";
$title = "TITLEI";
Your text for each page goes here
- Change the first include in X.php to: include "X.inc";
- Let the parent title of the page that you want to create
sub-menus of be denoted by TITLEP.
- 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
- Let the file of the page that you want to delete sub-menus from
be denoted by X.php.
- Suppose there are N sub-menus of the page X.php.
- Suppose the sub-menu files are
FILE1,FILE2,FILE3, . . . ,FILEN.
- Delete the file X.inc. This will delete the menu
buttons for the sub-pages that you want to delete.
- Delete the files X-FILEI.php for each I in the
set 1,2,3,...,N. This will delete the sub-pages from your
- Delete the $backto= command in X.php.
- 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
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
- 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
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
| Main Menu
| Research Projects
| Photo Album
| Curriculum Vitae
| The Greatest Artists
This page has the following hit count:
| 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
Last modified: Sat 20 Aug 2022 16:54:12 NZST
Best viewed at 1024x768 or above resolution.
© Copyright 1998-2022
Please report any broken links to