I think it would be better practice if you made your "mock" system in HTML. But I'm not a teacher.
<form method="" action="">
<h4> Employee Login </h4>
Username: <input type="text" name="username" size="20" /><br />
Password: <input type="password" name="passwort" size="20" /><br />
<p><input type="submit" value="Login" /></p></div>
<form method="post" action="">
<h4> Find Employee Records </h4>
<textarea name="search" cols="25" rows="1">
<input type="submit" value="Fined Employee" />
The above code shows a simple login system and a search box when click it would bring up employee information.
For the output you could be lazy, just open up Microsoft access every uni/college has it. Make some fields e.g. ID(Primary), First Name...
What ever you want in your report and use the report wizard simply print screen it and your works done. I don't see a problem in your print screening a login system or the search box either.
To display it within a browser you will need to use code.
Save your images. e.g. ( imageone.jpg)
<img border="0" src="imageone.jpg" alt="">
You can use any software to edit images. I'd download GIMP it's free and like photoshop.
Best of Luck.