Building the User Interface for a Web Site Indexing Application with Prototype - Completing the front-end of the application: Putting the CSS styles and structural markup together
(Page 4 of 4 )
In consonance with the concepts that I deployed in the previous section, it's time to integrate the set of CSS styles that I defined before with the corresponding (X)HTML markup. In this way, the presentation layer of this web site indexing application can finally be completed.
As you can imagine, this integration is really simple to achieve. Have a look at the following code listing, which now shows the complete source code that creates the front-end of this application, as was depicted in the two images that you saw in a previous section. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Web Site Indexing System using Prototype</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
width: 550px;
padding: 10px;
background: #ccf;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
font: bold 22px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
border: 1px solid #999;
}
#sitecontainer{
width: 550px;
height: 400px;
background: #ccf;
padding: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border: 1px solid #999;
overflow: auto;
}
#sitecontainer p{
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
}
#sitecontainer a:link,#sitecontainer a:visited{
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color: #00f;
text-decoration: underline;
}
#sitecontainer a:hover{
color: #c30;
}
#formcontainer{
width: 550px;
height: 300px;
background: #ccf;
padding: 10px;
margin-left: auto;
margin-right: auto;
border: 1px solid #999;
}
#formcontainer p{
text-align: right;
margin-right: 100px;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
}
.inputbox{
width: 300px;
padding: 2px;
background: #eee;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
border: 1px solid #999;
}
.submitbox{
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
padding: 2px;
}
textarea{
width: 300px;
height: 150px;
padding: 2px;
background: #eee;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
border: 1px solid #999;
}
</style>
</head>
<body>
<h1>WEB SITE INDEXING SYSTEM</h1>
<div id="sitecontainer"></div>
<div id="formcontainer">
<form id="siteform">
<p>Your website's URL: <input type="text" id="url"
value="http://" class="inputbox" title="Enter your site's
URL" /></p>
<p>Your website's Title: <input type="text" id="title"
class="inputbox" title="Enter your site's Title" /></p>
<p>Enter a short description for your website below (max.
256 chars.)</p><p><textarea id="description" title="Enter a
description for your site"></textarea></p>
<p><input type="submit" value="Submit Web Site"
class="submitbox" title="Submit Web Site" /></p>
</form>
</div>
</body>
</html>
In short, that's all the client-side code that you need to create the user interface of this application. Of course, there's plenty of room here to introduce changes to the original source code, just in case you wish to modify the visual appearance and the layout of the different web page elements included with the program in question. As with many other cases, creativity is up to you.
In addition, if you don't want to wait for the upcoming articles of the series, you may want to download this ZIP file containing all the supporting material, in order to have at your disposal a fully-functional version of this web site indexing system (link to site_indexing_system.zip goes here). Logically, you'll also have to download the Prototype library from the official web site, which is located at: http://www.prototype.conio.net.
To wrap up
Finally, you learned how the look and feel of this web site indexing application was created by a few easy steps. However, there's a module of the system that hasn't been developed yet. The module in question uses the capacity of Prototype to insert web site data into a specific MySQL database table, as well as display the complete index of all the web sites that were properly submitted.
Nonetheless, this and other interesting topics will be covered in the next article of the series, so you don't have any excuses to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
