Add layout to the sites

author: Stefan Suhren <suhren.stefan@fh-swf.de> 2015-04-27 15:13:37 +0200
committer: Stefan Suhren <suhren.stefan@fh-swf.de> 2015-04-27 15:13:37 +0200
commit: 14f4818cc4279de6e911189db718339381f03b8a (patch)
tree: f39307e26de791a2bdca4da67efe020d47f739af /Aufgabe05
parent: ca0bcb68041dcece6f611a173a8f0e730d6921ef (diff)
download: InternetTechnologien-14f4818cc4279de6e911189db718339381f03b8a.tar.gz
InternetTechnologien-14f4818cc4279de6e911189db718339381f03b8a.zip
7 files changed, 171 insertions, 94 deletions
diff --git a/Aufgabe05/categories.html b/Aufgabe05/categories.html
index c39e02b..ecf50ac 100644
--- a/Aufgabe05/categories.html
+++ b/Aufgabe05/categories.html
@@ -3,20 +3,22 @@
 <head>
 <meta charset="UTF-8">
 <title>Categories</title>
+<link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
+	<header><h1>Categories</h1></header>
 	<nav>
-		<a href="contact.html">Contact us</a>
-		<a href=".">Home</a>
-		<a href="login.html">Login</a>
+		<dl>
+			<dt><a href="contact.html">Contact us</a></dt>
+			<dt><a href=".">Home</a></dt>
+			<dt><a href="login.html">Login</a></dt>
+		</dl>
 	</nav>
-	<table border=1>
-	  <tr>
-	    <th>Categories</th>
-	  </tr>
-	  <tr>
-	    <td><a href="products.html">Furniture</a></td>
-	  </tr>
-	</table>
+	<div id="content">
+		<dl>
+			<dt><a href="products.html">Furniture</a></dt>
+		</dl>
+	</div>
+	<footer>Copyright by SomeCompany Ltd.</footer>
 </body>
 </html>
 \ No newline at end of file
diff --git a/Aufgabe05/contact.html b/Aufgabe05/contact.html
index 1ce7575..4241eb8 100644
--- a/Aufgabe05/contact.html
+++ b/Aufgabe05/contact.html
@@ -3,13 +3,20 @@
 <head>
 <meta charset="UTF-8">
 <title>Contact Us</title>
+<link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
+	<header><h1>Contact us</h1></header>
 	<nav>
-		<a href=".">Home</a>
-		<a href="categories.html">Categories</a>
-		<a href="login.html">Login</a>
+		<dl>
+			<dt><a href=".">Home</a></dt>
+			<dt><a href="categories.html">Categories</a></dt>
+			<dt><a href="login.html">Login</a></dt>
+		</dl>
 	</nav>
-	<p>Name: SomeCompany Ltd.<br>Telephone: +1-555-6383<br>Address: SomeStreet in Alamo</p>
+	<div id="content">
+		<p>Name: SomeCompany Ltd.<br>Telephone: +1-555-6383<br>Address: SomeStreet in Alamo</p>
+	</div>
+	<footer>Copyright by SomeCompany Ltd.</footer>
 </body>
 </html>
 \ No newline at end of file
diff --git a/Aufgabe05/index.html b/Aufgabe05/index.html
index 826eb4e..5b4ca7c 100644
--- a/Aufgabe05/index.html
+++ b/Aufgabe05/index.html
@@ -2,15 +2,22 @@
 <html>
 <head>
 <meta charset="UTF-8">
-<title>Prducts</title>
+<title>Home</title>
+<link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
+	<header><h1>Home</h1></header>
 	<nav>
-		<a href="contact.html">Contact us</a>
-		<a href="categories.html">Categories</a>
-		<a href="login.html">Login</a>
+		<dl>
+			<dt><a href="contact.html">Contact us</a></dt>
+			<dt><a href="categories.html">Categories</a></dt>
+			<dt><a href="login.html">Login</a></dt>
+		</dl>
 	</nav>
-	<p>This site will rock your chair. The best products from all over the world.
-	Furniture the like you have never seen. Contact us a get our catalog or login a order direct from our categories.</p>
+	<div id="content">
+		<p>This site will rock your chair. The best products from all over the world.
+		Furniture the like you have never seen. Contact us a get our catalog or login a order direct from our categories.</p>
+	</div>
+	<footer>Copyright by SomeCompany Ltd.</footer>
 </body>
 </html>
 \ No newline at end of file
diff --git a/Aufgabe05/login.html b/Aufgabe05/login.html
index 4a46b08..082f1c0 100644
--- a/Aufgabe05/login.html
+++ b/Aufgabe05/login.html
@@ -6,29 +6,35 @@
 <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
+	<header><h1>Customer login</h1></header>
 	<nav>
-		<a href="contact.html">Contact us</a>
-		<a href="categories.html">Categories</a>
-		<a href=".">Home</a>
+		<dl>
+			<dt><a href="contact.html">Contact us</a></dt>
+			<dt><a href="categories.html">Categories</a></dt>
+			<dt><a href=".">Home</a></dt>
+		</dl>
 	</nav>
-	<form action="http://www-in.fh-swf.de/fbp-cgi/showenv.pl" method="post">
-		<h1>User</h1>
-		<div class="row">
-			<label for="username"><u>U</u>sername:</label><input class="formw" type="text"
-				placeholder="Username" id="username" name="username" accesskey="u"
-				maxlength="100">
-		</div>
-		<div class="row">
-			<label for="password"><u>P</u>assword:</label><input class="formw" type="password"
-				placeholder="Password" id="password" name="password" accesskey="p">
-		</div>
-		<div class="spacer">&nbsp;</div>
-		<button type="submit" accesskey="l">
-			<u>L</u>ogin
-		</button>
-		<button type="reset" accesskey="r">
-			<u>R</u>eset
-		</button>
-	</form>
+	<div id="content">
+		<form action="http://www-in.fh-swf.de/fbp-cgi/showenv.pl" method="post">
+			<h1>User</h1>
+			<div class="row">
+				<label for="username"><u>U</u>sername:</label><input class="formw" type="text"
+					placeholder="Username" id="username" name="username" accesskey="u"
+					maxlength="100">
+			</div>
+			<div class="row">
+				<label for="password"><u>P</u>assword:</label><input class="formw" type="password"
+					placeholder="Password" id="password" name="password" accesskey="p">
+			</div>
+			<div class="spacer">&nbsp;</div>
+			<button type="submit" accesskey="l">
+				<u>L</u>ogin
+			</button>
+			<button type="reset" accesskey="r">
+				<u>R</u>eset
+			</button>
+		</form>
+	</div>
+	<footer>Copyright by SomeCompany Ltd.</footer>
 </body>
 </html>
 \ No newline at end of file
diff --git a/Aufgabe05/productdetails.html b/Aufgabe05/productdetails.html
index 546a77b..16434fa 100644
--- a/Aufgabe05/productdetails.html
+++ b/Aufgabe05/productdetails.html
@@ -6,45 +6,50 @@
 <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
+	<header><h1>Chair</h1></header>
 	<nav>
-		<a href="contact.html">Contact us</a>
-		<a href=".">Home</a>
-		<a href="categories.html">Categories</a>
-		<a href="products.html">Furniture</a>
-		<a href="login.html">Login</a>
+		<dl>
+			<dt><a href="contact.html">Contact us</a></dt>
+			<dt><a href=".">Home</a></dt>
+			<dt><a href="categories.html">Categories</a></dt>
+			<dt><a href="products.html">Furniture</a></dt>
+			<dt><a href="login.html">Login</a></dt>
+		</dl>
 	</nav>
-	<form>
-		<h1>Chair</h1>
-		<div class="row">
-			<label for="name"><u>N</u>ame:</label>
-			<input class="formw" type="text"
-				placeholder="Name" id="name" name="name" accesskey="n"
-				maxlength="100" disabled value="Chair">
-		</div>
-		<div class="row">
-			<label for="price"><u>P</u>rice (Euro):</label>
-			<input class="formw" type="text"
-				placeholder="Price (Euro)" id="price" name="price" accesskey="p"
-				maxlength="13" disabled value="20.00">
-		</div>
-		<div class="row">
-			<label for="width"><u>W</u>idth (mm):</label>
-			<input class="formw" type="text"
-				placeholder="Width (mm)" id="width" name="width" accesskey="w"
-				maxlength="11" disabled value="500">
-		</div>
-		<div class="row">
-			<label for="height"><u>H</u>eight (mm):</label>
-			<input class="formw" type="text"
-				placeholder="Height (mm)" id="height" name="height" accesskey="h"
-				maxlength="11" disabled value="500">
-		</div>
-		<div class="row">
-			<label for="desc"><u>D</u>escription:</label>
-			<textarea class="formw" placeholder="Description" id="desc" name="desc"
-				accesskey="d" maxlength="1000" disabled rows="5">A chair you can sit in, maybe. Quite comfy, I guess. Probably made of wood or a wood like material.</textarea>
-		</div>
-		<div class="spacer">&nbsp;</div>
-	</form>
+	<div id="content">
+		<form>
+			<div class="row">
+				<label for="name"><u>N</u>ame:</label>
+				<input class="formw" type="text"
+					placeholder="Name" id="name" name="name" accesskey="n"
+					maxlength="100" readonly value="Chair">
+			</div>
+			<div class="row">
+				<label for="price"><u>P</u>rice (Euro):</label>
+				<input class="formw" type="text"
+					placeholder="Price (Euro)" id="price" name="price" accesskey="p"
+					maxlength="13" readonly value="20.00">
+			</div>
+			<div class="row">
+				<label for="width"><u>W</u>idth (mm):</label>
+				<input class="formw" type="text"
+					placeholder="Width (mm)" id="width" name="width" accesskey="w"
+					maxlength="11" readonly value="500">
+			</div>
+			<div class="row">
+				<label for="height"><u>H</u>eight (mm):</label>
+				<input class="formw" type="text"
+					placeholder="Height (mm)" id="height" name="height" accesskey="h"
+					maxlength="11" readonly value="500">
+			</div>
+			<div class="row">
+				<label for="desc"><u>D</u>escription:</label>
+				<textarea class="formw" placeholder="Description" id="desc" name="desc"
+					accesskey="d" maxlength="1000" readonly rows="5">A chair you can sit in, maybe. Quite comfy, I guess. Probably made of wood or a wood like material.</textarea>
+			</div>
+			<div class="spacer">&nbsp;</div>
+		</form>
+	</div>
+	<footer>Copyright by SomeCompany Ltd.</footer>
 </body>
 </html>
 \ No newline at end of file
diff --git a/Aufgabe05/products.html b/Aufgabe05/products.html
index 63656b7..91c1d37 100644
--- a/Aufgabe05/products.html
+++ b/Aufgabe05/products.html
@@ -3,21 +3,23 @@
 <head>
 <meta charset="UTF-8">
 <title>Products</title>
+<link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
+	<header><h1>Furniture</h1></header>
 	<nav>
-		<a href="contact.html">Contact us</a>
-		<a href=".">Home</a>
-		<a href="categories.html">Categories</a>
-		<a href="login.html">Login</a>
+		<dl>
+			<dt><a href="contact.html">Contact us</a></dt>
+			<dt><a href=".">Home</a></dt>
+			<dt><a href="categories.html">Categories</a></dt>
+			<dt><a href="login.html">Login</a></dt>
+		</dl>
 	</nav>
-	<table border=1>
-	  <tr>
-	    <th>Furniture</th>
-	  </tr>
-	  <tr>
-	    <td><a href="productdetails.html">Chair</a></td>
-	  </tr>
-	</table>
+	<div id="content">
+		<dl>
+			<dt><a href="productdetails.html">Chair</a></dt>
+		</dl>
+	</div>
+	<footer>Copyright by SomeCompany Ltd.</footer>
 </body>
 </html>
 \ No newline at end of file
diff --git a/Aufgabe05/style.css b/Aufgabe05/style.css
index 27cd8b8..ef2ecf2 100644
--- a/Aufgabe05/style.css
+++ b/Aufgabe05/style.css
@@ -5,11 +5,12 @@ u {
 }
 
 form {
+	float: left;
 	width: 450px;
 	background-color: #ccc;
 	border: 1px dotted #333;
 	padding: 5px;
-	margin: 0px auto;
+	margin: 5px auto;
 }
 
 form h1 {
@@ -35,4 +36,51 @@ div.row .formw {
 
 div.spacer {
 	clear: both;
+}
+
+body {
+	width: 90%;
+	margin: 10px auto;
+	background-color: #fff;
+	color: #333;
+	border: 1px solid gray;
+	line-height: 130%;
+}
+
+header {
+	padding: .5em;
+	background-color: #ddd;
+	border-bottom: 1px solid gray;
+}
+
+header h1 {
+	padding: 0;
+	margin: 0;
+}
+
+nav {
+	float: left;
+	width: 160px;
+	margin: 0;
+	padding: 1em;
+}
+
+#content {
+	margin-left: 200px;
+	border-left: 1px solid gray;
+	padding: 1em;
+	max-width: 36em;
+}
+
+footer {
+	clear: both;
+	margin: 0;
+	padding: .5em;
+	color: #333;
+	background-color: #ddd;
+	border-top: 1px solid gray;
+}
+
+#content h2 {
+	margin: 0 0 .5em 0;
 }
 \ No newline at end of file
author	Stefan Suhren <suhren.stefan@fh-swf.de>	2015-04-27 15:13:37 +0200
committer	Stefan Suhren <suhren.stefan@fh-swf.de>	2015-04-27 15:13:37 +0200
commit	14f4818cc4279de6e911189db718339381f03b8a (patch)
tree	f39307e26de791a2bdca4da67efe020d47f739af /Aufgabe05
parent	ca0bcb68041dcece6f611a173a8f0e730d6921ef (diff)
download	InternetTechnologien-14f4818cc4279de6e911189db718339381f03b8a.tar.gz InternetTechnologien-14f4818cc4279de6e911189db718339381f03b8a.zip