Implementing Internet Protocols with PHP - The FTP Application (
Page 2 of 4 )
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.
/ 6 
