diff options
| 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 | |
| parent | ca0bcb68041dcece6f611a173a8f0e730d6921ef (diff) | |
| download | InternetTechnologien-14f4818cc4279de6e911189db718339381f03b8a.tar.gz InternetTechnologien-14f4818cc4279de6e911189db718339381f03b8a.zip | |
Add layout to the sites
| -rw-r--r-- | Aufgabe05/categories.html | 24 | ||||
| -rw-r--r-- | Aufgabe05/contact.html | 15 | ||||
| -rw-r--r-- | Aufgabe05/index.html | 19 | ||||
| -rw-r--r-- | Aufgabe05/login.html | 50 | ||||
| -rw-r--r-- | Aufgabe05/productdetails.html | 81 | ||||
| -rw-r--r-- | Aufgabe05/products.html | 26 | ||||
| -rw-r--r-- | Aufgabe05/style.css | 50 |
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"> </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"> </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"> </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"> </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 |