View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

Design Twist

The whole purpose of this assignment is to create a web based server using a login and add courses pages. Make sure you use CSS Style Sheets.

You have to have background in CSS & HTML. You can use many editors such as Adobe Dreamweaver and many other free HTML/CSS editors.

Go to this link to understand how the CSS code works –> http://coweb.cc.gatech.edu/cs2340/6710


This below is a sample CSS code. This code allows the user to login. The Small talk code has yet to be implemented. I will show the small talk code added below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>University Management System Login</title>
<style type="text/css">
<!--
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
body {
	background-color: #E9E9E9;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a {
	font-size: 12px;
	color: #7278F8;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #7278F8;
}
a:hover {
	text-decoration: underline;
	color: #0000A6;
}
a:active {
	text-decoration: none;
	color: #7278F8;
}
.styleSheet {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
}
-->
</style>
</head>

<body>
<div align="center">
  <table width="400" border="0">
    <tr>
      <td><div align="center">Login to University Management System</div></td>

    </tr>
    <tr>
      <td><form name="form1" method="post" action="">
        <label>
        <div align="center">Username: 
          <input type="text" name="Username" id="Username">
        </div>
        </label>
      </form>

      </td>
    </tr>
    <tr>
      <td><form name="form2" method="post" action="">
        <label>
        <div align="center">Password
          <input type="text" name="Password" id="Password">
        </div>
        </label>

      </form>
      </td>
    </tr>
    <tr>
      <td><form name="form3" method="post" action="">
        <label>
        <div align="center">
          <input type="submit" name="Login" id="Login" value="Login">
        </div>

        </label>
      </form>
      </td>
    </tr>
  </table>
</div>
</body>

</html>



This is the addcourse code with CSS and SmallTalk intergrated in it.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>University Management System School Dialog</title>

<link type="text/css" rel="stylesheet" href="css/reset_v1.css">
<link type="text/css" rel="stylesheet" href="css/960.css">
<link type="text/css" rel="stylesheet" href="css/style.css">

</head>
<body>

<!--#include virtual="validate.ssp" --> 
	
<div class="container_12">
	<div class="grid_12 header" align="left">
				<a href="courses.ssp"><img src="admin.png" title="Your Provider"></a>
	</div>	
		
	<div class="clear"></div>

	<div class="grid_3 login_box" align="left">
		<h2>Add a school</h2>
		<form name="form1" method="post" action="addschool_validate.ssp">
			<tr>
			  <td>
				<label>
				<div class="form_row">School: 
					<input type="text" name="school">
				</div>
				</label>
			  </td>
			</tr>
			<tr>
			  <td>
				<label>
				<div class="form_row">
				  <input type="submit" name="AddSchool" value="Add School">
				  &nbsp;&nbsp;&nbsp;<a href="courses.ssp">Cancel</a>
				</div>
				</label>
			  </td>
			</tr>
		</form>
		
		
	</div>
	
	<div class="grid_8">
		<h1>Current Schools</h1>
		<p>
			<table border="inset">
			<%
			"For every school, add it to the combo box"
			schools := University getInstance schools.
			schools do:[: e |
			response write: '<tr><td>'.
			response write: e.
			response write: '</td></tr>'.].
			%>
			</table>
		</p>		
		
	</div>
	
</div>


</body>

</html>



Link to this Page