The FTP Application - PHP

The application that we are going to create will implement the FTP protocol in a way that is as capable as possible using the functions listed in the previous section. The main purpose of an FTP client is to enable file transfer on a network. This includes downloading, uploading, removing, and traversing the directory structure of a drive. Our application will do all of this. Below is the code for the cascading style sheet that I designed for the FTP client application:

/* CSS Document */

body {

background-color: #FFFFFF;

margin:0px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 24px;

}

a {

color: #cc0000;

text-decoration:none;

font-weight:bold;

}

a:hover {

color: #990000;

text-decoration:underline;

}

h1 {

color: #006699;

font-size: 14px;

font-weight: bold;

margin: 0px 0px 5px 0px;

border-bottom: 2px solid #006699;

}

h2 {

color: #006699;

font-size: 13px;

font-weight: bold;

margin: 0px 0px 0px 0px;

}

td {

font-size: 12px;

color: #333333;

}

.bar_central {

background-image: url("img/bg_central.png");

height: 28px;

font-size: 12px;

color: #FFFFFF;

padding-bottom: 3px;

background-repeat: repeat-x;

}

.bar_central a {

color: #FFFFFF;

font-size: 12px;

text-decoration: none;

}

.bar_central a:hover {

text-decoration: underline;

}

.navhead_text {

font-size: 12px;

color: #FFFFFF;

padding-bottom: 2px;

padding-left: 10px;

background-repeat: repeat-x;

}

.navblock {

border-left: 1px solid #006699;

border-right: 1px solid #006699;

border-bottom: 1px solid #CCCCCC;

background-image: url("img/bg_nav.png");

background-repeat: repeat-y;

padding-left: 5px;

height: 23px;

color: #006699;

text-align: left;

}

.navblock a {

text-decoration: none;

color: #006699;

}

.navblock a:hover {

text-decoration: none;

color: #FE9900;

}

.tooltip {

color: #006699;

font-style: italic;

font-size: 10px;

}

.tooltipblack {

color: #333333;

font-style: italic;

font-size: 10px;

}

.navholder {

padding-left: 8px;

padding-top: 20px;

}

.contentholder {

padding-top: 20px;

}

.bottom {

border-top: 1px solid #999999;

padding-top: 10px;

color: #ccc;

}

.subbox {

background-color: #F0F0f0;

border-left: 1px solid #CCCCCC;

padding-left: 7px;

padding-right: 7px;

padding-top: 4px;

border-right: 1px solid #CCCCCC;

}

#mainarea {

margin-top: 15px;

}

.dottedline {

background-image: url("img/bg_horizdots.gif");

background-repeat: repeat-x;

padding: 0px;

height: 1px;

}

.input100 {

border: 1px solid #999999;

font-family: Tahoma, Arial, Verdana;

font-size: 11px;

color: #333333;

background-color: #FFFFFF;

padding-left: 4px;

padding-right: 4px;

width: 100px;

height: 20px;

}

.input200 {

border: 1px solid #999999;

font-family: Tahoma, Arial, Verdana;

font-size: 11px;

color: #333333;

background-color: #FFFFFF;

padding-left: 4px;

padding-right: 4px;

width: 200px;

height: 20px;

}

.input300 {

border: 1px solid #999999;

font-family: Tahoma, Arial, Verdana;

font-size: 11px;

color: #333333;

background-color: #FFFFFF;

padding-left: 4px;

padding-right: 4px;

width: 300px;

height: 20px;

}

.textarea200 {

border: 1px solid #999999;

font-family: Tahoma, Arial, Verdana;

font-size: 11px;

color: #333333;

background-color: #FFFFFF;

padding: 4px;

width: 200px;

height: 125px;

}

.textarea300 {

border: 1px solid #999999;

font-family: Tahoma, Arial, Verdana;

font-size: 11px;

color: #333333;

background-color: #FFFFFF;

padding: 4px;

width: 300px;

height: 250px;

}

.tableheader1 {

background-color: #006699;

color: #FFFFFF;

font-family: Tahoma, Arial, Verdana;

font-weight: bold;

font-size: 13px;

}

.tableshading1a {

background-color: #B1D3ED;

}

.tableshading1b {

background-color: #D0E2F2;

}

.tableheader2 {

background-color: #CC0000;

color: #FFFFFF;

font-family: Tahoma, Arial, Verdana;

font-weight: bold;

font-size: 13px;

}

.tableshading2a {

background-color: #D59299;

}

.tableshading2b {

background-color: #DBB5BC;

}

.tableheader3 {

background-color: #555555;

color: #FFFFFF;

font-family: Tahoma, Arial, Verdana;

font-weight: bold;

font-size: 13px;

}

.tableshading3a {

background-color: #DDDDDD;

}

.tableshading3b {

background-color: #EEEEEE;

}

.headertxt{

font-size:24px;

color:#FFFFFF;

background-color:#669999;

}

.copyright{

font-family:Tahoma, Arial, Verdana;

text-align:right;

font-size:11px;}

.smallheader{

background-color:#669999;

font-weight:bold;}

.tdr{

background-color:#a4c2c2;}

.logo {

font:19px times new roman;

color: #333300;

letter-spacing:.4em;

font-weight:bold;

}

/**divs*/

.block{

background-color:#CCCCCC;

border: 1px solid #ccc;

left: 659px;

top: 7px;

height: 10px;

width:80px;

overflow:scroll;

}

Copy and paste this code into a new document and save it as ftp.css . Don’t worry if you don’t understand the code; it is just styles that I’ve put together to make the presentation of the FTP user interface easier to read and understand.