 |
 |
| ... For example this Web site haves a complete "spatiale" form | ... This web site present the classical "table on the left" with some enhancements. |
| Goals for this chapter:" | rpm packages covered in this chapter:
|
This chapter is about Web site design. Some guides and books prefer
to speak about Web site design in Chapter 1. We prefer to introduce to
you the HTML concepts and then speak about Web site design. We will cover
WebMaster Advanced Programming techniques in Part II, chapters: 9-14.
One of the goals of this training is to learn to build a Web site: design, ideas, goals, techniques, etc.
Now, that you know what is a frame, a table, a tag, a link, is the right moment to cover Web site design. Before to start the design is important to have in mind an idea about the final Web site and its main page.
There are an universe of possibilities:
|
|
| ... For example this Web site haves a complete "spatiale" form | ... This web site present the classical "table on the left" with some enhancements. |
A Classical Web site, with the "table on the left", "search button" and "menu" is CNN.COM
In this chapter we will teach how to obtain this type of pages: Section Design your own pages. Try to go to the Web to capture attention on the web sites that you like and want to reproduce or to adopt.
A Web site is a clear and effective look inside the company ideas and the mode the company works. In any case is a virtual opinion.
We present here the minimal requeriments that are necessary to fullfill a Web design strategy.
Fixing Company Goals
A Customer needs to know that products you offer as well as what are the company goals. Web sites may be created by Organizations, Banks, Schools, Universities or commercial business.
We list here some questions that the reader may solve to fix its strategy:
Your logo.
Your logo represent the company and its an original image. Like for MICHAEL JACKSON, ELIZABETH TAYLOR, FRANK SINATRA, CHER, ARNOLD SCHWARZENEGGER, or any other Hollywood star have its own look, the company logo is the image that represent the company.
Changes a logo may means changes business. List, reproduce or try to
use without permission is an illegal matter.
Your color.
Each company haves its own color: IBM have its special blue, RedHat have its Red, SuSE have its green, etc.
In the same way a company haves a logo, they must choose a color and does not change.
Change the color company or does not have an effective and fixed choice may create serious damages in company image.
Therefore fix your color: Blue, Green, Black, Cyan or any other.
Your background.
You must choose to have a background. The background may be the same
color company on the left.
Therefore the Website strategy may be resumed as follows:
In this section we will built some "standard" HTML pages.
"Table on the left" type
To build a Table on the left we reproduce the examples introduced in
Chapter 5.
 |
 |
| Choose, File -> New -> Blank Page ... and fix the background color | ... then create a table with 2 columns and 1 row. Fix also a background color in the left cell. |
 |
| Complete the links on the left and the images on the right. Complete the page. |
In this case is possible to create web sites like: http://www.sec.gov
Another similar look is the following:
Using Tables is possible to create any page with your favorite aligment.
Is possible to have
|
"Spatial Design" type
The Spatial Design, like for example we use at futuretg.com, was obtained
working with Macromedia DreamWeaver and using layers. Layers was introduced
in serie 4.X of browsers and for this reason we transform the layers in
simple tables.
Trying to obtain a similar look from scratch is possible ... but not easy. You can start developing the page using the "Table on left" type and add tables and columns to reach the right look.
Add a "Menu" to change pages.
Generally Menus are located in the top of the main window. However is
possible to locate the menu, that belong to a form, in any position.
| <form action="../bin/add.cgi" method="get">
<div align="right"> <select name="idarticle"> <option value="CBb30ENRH71c1" selected>Complete 3.0.3 Box - English - 3CD (Personal License) - US$249.95 </option> <option value="CBE30ENRH71c1">Complete 3.0.3 Box - English - Educational (Personal) - US$ 199.94</option> </select> <br> <input type="image" src="../img/Eput_in_cart.gif" width="217" height="37" border="0" name="image"> </div> </form> |
Search tool will be covered in CGI Chapter.
Using Frames
Some famous Websites like Macromedia.com and other, uses frames to present its pages.
Frames was introduced in serie 3.X of browser. Today, we have
Now, that you wrote the preliminary pages
In Caldera 2.X or RedHat 6.2, the home directory where the HTML files are installed, is "/home/httpd/html". In any SuSE Linux after 6.4, including RedHat 7.1 the home directory for HTML files is: "/var/www/html/"
However this choice may be updated in the Apache httpd.conf,
located in "/etc/httpd/conf/" to any other
directory.
|
 |
| ... running http://www.futuretg.com
...
Check that your |
... the original file in "/var/www/html/index.html" |
This is a common file hierarchy organization:
[root@www html]# cd
[root@www html]# l
./
../ Ad/
anlgform.html Conferences/ Consulting/
Contact.html Courses_on_site/ Expos/
FT/
FTLC_Private/ FTLinuxCourse/
FTOSX/ FTYellowPages/
Iindex.html images/
img/
index.html
MailingLists/ man.html*
mansearchhelp.html* mansearch.html* missing.html
missing.html.bak mkmap*
news/
.pics/
Products/ Search/
Sindex.html Store/
Support/ transparent.gif
welcome.msg
[root@www html]#
Add the company logo with the "favicon.ico" feature
Linux user that browse the web with "konqueror" (or user of MS Explorer),
may note a small icon before the URL. For example the Philips logo 
appears as follows:
( Click to enlarge )
This logo, is called the "favicon" feature. Create it is very simply. You need to create MS Window ICO file (is a BMP 16x16 with some special characteritics; no all BMP are ICO). The most easy mode to create this is to visit favicon.ico and download a MS Window software your "favicon.ico" ICO file. After created copy the file to the "root directory" on the Website.
FutureTG.COM appears as follows:
Is is very frequent on the Web, in bank ... and in any place.
 |
 |
 |
 |
 |
 |
Using Linux links instead of HTML Links
Linux and UNIX systems support links.
A Linux link is a link between files. A file or a directory may be linked
to another place.
[root@www FTLC_Base_Professional_GOLD_3.0.1]# ls -al
total 7
drwxr-xr-x 3 root
root 129 May 18 12:27
.
drwxrwxr-x 21 gorlando users
1811 May 20 19:39 ..
drwxr-xr-x 4 root
root 72 May
18 12:27 FTLinuxCourse
lrwxrwxrwx 1 root
root 10 May
18 12:26 index_gold_america.html -> index.html
-rw-r--r-- 1 root
root 2324 Mar 17 20:34
index.html
[root@www FTLC_Base_Professional_GOLD_3.0.1]#
Using Linux links inside a Web site may be usefull to save space and can help to create a better organization.
For example suppose that a specific directory tree takes a high capacity.
[root@www FTLC_Complete]# ls -al
total 55
drwxrwxr-x 5 gorlando users
429 May 19 16:47 .
drwxrwxr-x 21 gorlando users
1811 May 20 19:39 ..
drwxrwxrwx 81 root root
2475 May 13 2002 ExternalContribs
drwxrwxrwx 16 root root
611 Dec 31 11:56 FTContribs
drwxrwxrwx 8 root
root 778 May 19 16:47
FTLinuxCourse
-r--r--r-- 1 root
root 2386 Apr 30 08:12
index.html
-r-xr-xr-x 1 root
root 5815 Oct 10
1999 mkmap_shell.txt
-r--r--r-- 1 root
root 279 Feb
4 06:05 README_de.txt
-r--r--r-- 1 root
root 264 Feb
4 06:05 README_es.txt
-r--r--r-- 1 root
root 249 Feb
4 06:05 README_fr.txt
-r--r--r-- 1 root
root 299 Feb
4 06:09 README_FTLC30.txt
-r--r--r-- 1 root
root 247 Feb
4 06:06 README_it.txt
-r--r--r-- 1 root
root 889 Feb
4 06:47 README_Manual_OnLine.txt
-r--r--r-- 1 root
root 220 Feb
4 06:07 README_us.txt
-r--r--r-- 1 root
root 6274 May 2 07:27
What_is_new.html
[root@www FTLC_Complete]# du -s -h ExternalContribs/
467M ExternalContribs
You can link the entire directory tree to another location ... and therefore
save 467M on your hard disk!.
[root@www FTLC_Complete]# ln -s ExternalContribs/ ..
[root@www FTLC_Complete]#
Using refresh tag
The HTML offers different tags to link or to move the customer from an old page to a new page. This is the goal of the "refresh" tag.
For example, suppose that your product page was: "http://www.futuretg.com/Products/index.html"
for about three months. After you publish a page is not important if is
linked to other. Web Motors like Altavista,
Yahoo
and other find the page and add
inside its "cache" or Database.
Any user or Web user, finding information in the Web inside these motors will find the pages that you publish three months ago. If you change the location of this page to another location for example from:
http://www.futuretg.com/Products/index.html
to
and you don't update or "do something" to update the old page, the customer will not find the page.
Therefore the better mode is to create a simple page including a refresh tag that update a moves the customer to the new page.
We list here the HTML info:
| <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Refresh" content="0; URL=http://www.FutureTG.com/Store/index.html"> <meta name="GENERATOR" content="Mozilla/4.7 [en] (X11; I; Linux 2.2.5 i686) [Netscape]"> <title>Distributors</title> </head> <body bgcolor="#FFFFFF" link="#339999" vlink="#999999" alink="#000000" leftmargin="5"> <h3>
<h3>
|
Check the effect clicking here. |
You can delay the seconds: 5 seconds, 10 seconds, 20 seconds or more.
We advice zero seconds to transfer immediately the page to the remote page.
Read the answers to
the exercises.
Check the Interactive Exam Cram WebMaster: 
Internet Resources for this Chapter.