Building the User Interface for an AJAX-Based Network Processor - Polishing the networking application's look and feel
(Page 4 of 5 )
As you can imagine, improving the visual appearance of this application's front-end is really a straightforward process that can be achieved with minor hassles. The mentioned procedure is reduced only to including some CSS declarations to lay out the different areas that comprise the corresponding user interface. These declarations also apply a more pleasant format to the respective query buttons.
That being said, here is the group of CSS declarations that I decided to attach to the previous (X)HTML document to improve the overall look and feel of this networking application:
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
margin: 10px;
}
#maincontainer{
width: 500px;
height: 400px;
background: #eee;
padding: 5px;
margin-left: auto;
margin-right: auto;
border: 1px solid #000;
}
#paramcontainer{
padding: 5px;
margin-bottom: 5px;
background: #f5ebb1;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000;
border: 1px solid #999;
}
#leftpanel{
float: left;
width: 100px;
height: 350px;
padding: 5px;
background: #f5ebb1;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000;
border: 1px solid #999;
}
#centerpanel{
float: left;
width: 254px;
height: 350px;
padding: 5px;
margin-left: 5px;
background: #ccc;
overflow: auto;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000;
border: 1px solid #999;
}
#rightpanel{
float: right;
width: 100px;
height: 350px;
padding: 5px;
background: #f5ebb1;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000;
border: 1px solid #999;
}
.databox{
width: 348px;
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
.controlbutton{
width: 100px;
margin: 3px 0 3px 0;
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
</style>
If you spend a short time studying the above CSS declarations, then you'll realize that they're indeed easy to grasp. Basically, all that these style rules do is create the layout for all the distinct containing areas of the mentioned web interface, in addition to improving the look and feel of the different query buttons. Also, I styled a <h1> element to format the title of the application, but you can easily skip over this step and pay attention to more important topics.
All right, at this point you saw how the different pieces that comprise the front-end of this AJAX-based networking application have been created separately. Therefore, I think that it's time to move forward and see how both the previous (X)HTML and CSS declarations can be integrated into the same file, in this way getting the user interface completed.
Logically, this interesting topic will be discussed in the last section of this article, thus keep reading to learn more.
Next: Listing the full client-side code that corresponds to the networking application >>
More JavaScript Articles
More By Alejandro Gervasio
/ 3 
