Add web design files

2025-11-20 21:37:53 +02:00
parent 258f24570a
commit 9192716bfb
510 changed files with 12551 additions and 0 deletions
--- a/web-design/сайт/Advertising/Advertising.css
+++ b/web-design/сайт/Advertising/Advertising.css
@@ -0,0 +1,54 @@
+@charset "utf-8";
+
+/* CSS Document */
+
+.verh {
+    background-image: url(img02.jpg);
+    height: 98px;
+}
+
+.verh2 {
+    height: 59px;
+    background-image: url(img03.gif);
+}
+
+.nazvanie {
+    color: navy;
+    font-size: 23;
+    font-weight: bold;
+}
+
+.nav {
+    color: white;
+}
+
+.boka {
+    width: 15%;
+}
+
+.zagolovok {
+    color: dimgrey;
+    font-weight: bold;
+    font-size: 17px;
+}
+
+.text {
+    color: grey;
+}
+
+.left {
+    width: 15%;
+}
+
+.copy {
+    font-size: 12px;
+    color: white;
+}
+
+.kartinka {
+    height: 122;
+}
+
+a {
+    color: DodgerBlue;
+}
--- a/web-design/сайт/Advertising/Advertising.html
+++ b/web-design/сайт/Advertising/Advertising.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>ADVERTISING</title>
+    <link href="Advertising.css" type="text/css" rel="stylesheet">
+</head>
+
+<body>
+    <table width="100%" border="0" cellspacing="0" cellpadding="0">
+
+        <tr>
+            <td class="verh"></td>
+            <td class="verh" colspan="4">
+                <p class="nazvanie">ADVERTISING<br>
+                    &nbsp; <font size="2">BY FREE CSS TEMPLATES</font>
+                </p>
+            </td>
+            <td class="verh"></td>
+        </tr>
+
+        <tr>
+            <td class="verh2"></td>
+            <td class="verh2" colspan="4">
+                <p class="nav">HOME &nbsp; <img src="img04.gif"> &nbsp; PRODUCTS &nbsp; <img src="img04.gif"> &nbsp; SERVICES &nbsp; <img src="img04.gif"> &nbsp; ABOUT US &nbsp; <img src="img04.gif"> &nbsp; CONTACT US</p>
+            </td>
+            <td class="verh2"></td>
+        </tr>
+
+        <tr>
+            <td rowspan="3" class="boka"></td>
+            <td valign="top" class="left" rowspan="3"><br>
+                <p class="zagolovok">Lorem Ipsum Dolor</p>
+                <p class="text">Nunc pellentesque amorsit. Sed vestibulum blandit nisl. Quisque elementum convallis purus.<a href="#">More...</a></p>
+                <p class="zagolovok">Pellentesque Semper</p>
+                <p class="text">Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit sagittis bibendum erat.</p>
+                <img src="img01.gif"><a href="#">Suspendisse quis massa</a><br>
+                <img src="img01.gif"><a href="#">Vivamus sagittis bibendum</a><br>
+                <img src="img01.gif"><a href="#">Nullam erat vuverra ornare</a><br>
+                <p class="zagolovok">Curabitur Malesuadas</p>
+                <p class="text">Nunc pellentesque amorsit. Sed vestibulum blandit nisl. Quisque elementum convallis purus.<a href="#">More...</a></p>
+                <p class="zagolovok">Lorem Ipsum Dolor</p>
+                <p class="text">Nunc pellentesque amorsit. Sed vestibulum blandit nisl. <a href="#">More...</a></p><br>
+            </td>
+            <td rowspan="3" width="14"></td>
+            <td colspan="2" valign="top"><br>
+                <p class="zagolovok">Welcome to Sitename.com</p>
+                <p class="text">Advertising is a free template from <a href="#">Free CSS Templates</a> released under a <a href="#">Creative Commons Attribution 2.5 License</a>. You're free to use it for both commercial or personal use. I only ask that you link back to <a href="#">my site</a> in some way. Enjoy :)</p>
+            </td>
+            <td class="boka" rowspan="3"></td>
+        </tr>
+
+        <tr>
+            <td class="kartinka"><img src="img04.jpg"></td>
+            <td>
+                <dl>
+                    <dd class="text">Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec justo odio, eleifend varius, volutpat venenatis.</dd>
+                </dl>
+            </td>
+        </tr>
+
+        <tr>
+            <td colspan="2">
+                <p class="text">Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p>
+                <ul type="square">
+                    <li><a href="#">Suspendisse quis gravida massa felis.</a></li>
+                    <li><a href="#">Vivamus sagittis bibendum erat.</a></li>
+                    <li><a href="#">Nullam et orci in erat viverra ornare</a></li>
+                    <li><a href="#">Suspendisse quis gravida massa felis.</a></li>
+                    <li><a href="#">Curabitur malesuada turpis nec ante</a></li>
+                </ul>
+                <p class="text">Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec ante. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec justo odio, eleifend varius, volutpat venenatis Aliquam gravida massa eu arcu</p>
+            </td>
+        </tr>
+
+        <tr>
+            <td class="verh2" colspan="3"></td>
+            <td class="verh2" colspan="2">
+                <p class="copy">Copyright &copy; Sitename.com. Designed by <a class="copy" href="#">Free CSS Templates</a></p>
+            </td>
+            <td class="verh2"></td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/web-design/сайт/Advertising/img01.gif
+++ b/web-design/сайт/Advertising/img01.gif
--- a/web-design/сайт/Advertising/img02.jpg
+++ b/web-design/сайт/Advertising/img02.jpg
--- a/web-design/сайт/Advertising/img03.gif
+++ b/web-design/сайт/Advertising/img03.gif
--- a/web-design/сайт/Advertising/img04.gif
+++ b/web-design/сайт/Advertising/img04.gif
--- a/web-design/сайт/Advertising/img04.jpg
+++ b/web-design/сайт/Advertising/img04.jpg
--- a/web-design/сайт/BreakFast.png
+++ b/web-design/сайт/BreakFast.png
--- a/web-design/сайт/BreakFast/BreakFast.css
+++ b/web-design/сайт/BreakFast/BreakFast.css
@@ -0,0 +1,102 @@
+@charset "utf-8";
+
+/* CSS Document */
+.verh {
+    height: 80px;
+    width: 770px;
+}
+
+.FL {
+    float: left;
+}
+
+.FR {
+    float: right;
+}
+
+.top1 {
+    margin-left: 75px;
+    width: 160px;
+    height: 80px;
+}
+
+.tops {
+    width: 92px;
+    height: 80px;
+}
+
+.breakfast {
+    font-family: Arial;
+    margin-bottom: 0;
+}
+
+.credits {
+    font-size: 8px;
+    font-family: Arial;
+    color: #7B7B7B;
+    margin: 0;
+}
+
+.top_text:hover {
+    color: red;
+}
+
+.top_text {
+    text-decoration: none;
+    color: black;
+}
+
+.base {
+    width: 770px;
+    height: 350px;
+}
+
+.leftbase {
+    width: 500px;
+    margin-left: 20px;
+}
+
+.rightbase {
+    width: 200px;
+    margin-right: 20px;
+}
+
+.text {
+    color: #8A8A8A;
+    font-size: 13px;
+}
+
+.dates {
+    background-color: #000000;
+    height: 20px;
+}
+
+.dates_text {
+    color: #FFFFFF;
+    font-size: 13px;
+    padding-top: 2px;
+    margin-left: 10px;
+}
+
+.link_text {
+    font-size: 13px;
+}
+
+.right_line {
+    border-bottom: 1px dashed #000000;
+    margin-top: 17px;
+}
+
+.bottom_text {
+    color: #8A8A8A;
+    font-size: 12px;
+}
+
+.bottom_right_text {
+    color: #8A8A8A;
+    font-size: 12px;
+}
+
+a {
+    color: #00C7F0
+}
--- a/web-design/сайт/BreakFast/BreakFast.html
+++ b/web-design/сайт/BreakFast/BreakFast.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>BreakFast</title>
+<link href="BreakFast.css" rel="stylesheet" type="text/css">
+</head>
+
+<body>
+<div align="center">
+  <div class="verh">
+		<div class="FL top1">
+			<h2 class="breakfast">BreakFast</h2><p class="credits">BY FREE CSS TEMPLATES</p>
+		</div>
+		<img class="FL" src="images/img1.gif" width="7" height="80" alt=""/>
+		<div class="FL tops">
+			<div style="margin-top: 30px;"><a href="#" class="top_text">About Us</a></div>
+		</div>
+		<img class="FL" src="images/img1.gif" width="7" height="80" alt=""/>
+		<div class="FL tops">
+			<div style="margin-top: 30px;"><a href="#" class="top_text">Products</a></div>
+		</div>
+		<img class="FL" src="images/img1.gif" width="7" height="80" alt=""/>
+		<div class="FL tops">
+			<div style="margin-top: 30px;"><a href="#" class="top_text">Services</a></div>
+		</div>
+		<img class="FL" src="images/img1.gif" width="7" height="80" alt=""/>
+		<div class="FL tops">
+		  <div style="margin-top: 30px;"><a href="#" class="top_text">Clients</a></div>
+		</div>
+		<img class="FL" src="images/img1.gif" width="7" height="80" alt=""/>
+		<div class="FL tops">
+		  <div style="margin-top: 30px;"><a href="#" class="top_text">Support</a></div>
+		</div>
+  </div>
+	<div>
+    	<img src="images/img3.jpg" width="770" height="190" alt=""/>
+    </div>
+	<div class="base">
+      <div class="leftbase FL" align="left">
+		<h2 class="">Welcome to BreakFast!</h2>
+      	<p class="text">"BreakFast is a free template from <a href="#">Free CSS Tcmplates</a> released under a <a href="#">Creative Commons Attribution 2.5 License</a>. The photo is from <a href="#">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)"</p>
+      	
+      	<p class="text">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nist risus, sagittis convallis, rutrum id, congue, and nibh. Fusce mattis viverra elit. Fusce rutrum tempus velit. Nulla quis elit a dui pharetra venenatis. Vestibulum pellentesque, justo mollis pretium suscipit, justo nula blandit libero, in blandit justo quis nisl</p>
+      	<ol class="text">
+			<li><a href="#">Integer sit amet pede vel arcu aliquet pretium.</a></li>
+			<li><a href="#">Pellentesque quis elit non lectus pravida blandit.</a></li>
+			<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
+			<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
+			<li><a href="#">Cras vitae metus aliquam ritus pellentesque pharetra.</a></li>
+      	</ol>
+      </div>
+      <div class="rightbase FR" align="left">
+      	<h3 style="margin-top: 25px;">Integer Gravida Nibh</h3>
+      	<div class="dates"><p class="dates_text">December 14th - Lorem Ipsum</p></div>
+      	<a href="#" class="link_text">In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula...</a>
+		<div class="right_line"></div>
+      	<div class="dates"><p class="dates_text">December 9th - Blandit Justo</p></div>
+      	<a href="#" class="link_text">Donec leo, vivamus fermentum nibh in augue praesent a lacus...</a>
+		<div class="right_line"></div>
+      	<div class="dates"><p class="dates_text">December 3rd - Pretum Suscipit</p></div>
+      	<a href="#" class="link_text">Quisque dictum integer nisl risus sagittis convallis rutrum id conque...</a>
+	 	<div class="right_line"></div>
+      </div>
+    </div>
+	<div>
+		<hr width="770" color="#000000" size="6">
+	</div>
+	<div style="width: 770px;">
+		<div class="FL"><p class="bottom_text">Copyright &copy; 2007 BreakFast. All Rights Reserved. Designed by <a href="#">Free CSS Templates</a></p></div>
+		<div class="FR"><p class="bottom_right_text"><a href="#">Privacy Policy</a> | <a href="#">Terms of use</a></p></div>
+	</div>
+</div>
+</body>
+</html>
--- a/web-design/сайт/BreakFast/images/img1.gif
+++ b/web-design/сайт/BreakFast/images/img1.gif
--- a/web-design/сайт/BreakFast/images/img3.jpg
+++ b/web-design/сайт/BreakFast/images/img3.jpg
--- a/web-design/сайт/Clover
+++ b/web-design/сайт/Clover
--- a/web-design/сайт/Clover
+++ b/web-design/сайт/Clover
@@ -0,0 +1,205 @@
+@charset "utf-8";
+/* CSS Document */
+
+.FL {
+    float: left;
+}
+
+.FR {
+    float: right;
+}
+
+.CB {
+    clear: both;
+}
+
+.container {
+    width: 765px;
+    height: 800px;
+    margin: auto;
+}
+
+.top {
+    margin-bottom: 15px;
+    width: 765px;
+    height: 249px;
+}
+
+.top_left {
+    width: 260px;
+    height: 249px;
+    background-image: url(images/img1.gif);
+}
+
+.clover {
+    color: white;
+    font-family: Arial;
+    letter-spacing: -1px;
+    font-size: 20px;
+    margin-top: 106px;
+    margin-left: 30px;
+    margin-right: 5px;
+    margin-bottom: 0px;
+}
+
+.templates {
+    color: white;
+    font-family: Arial;
+    font-size: 10px;
+    font-weight: bold;
+    margin-top: 0;
+    margin-left: 30px;
+}
+
+.leaf {
+    margin-top: 90px;
+}
+
+.top_right {
+    width: 505px;
+    height: 249px;
+    background-image: url(images/img2.gif);
+}
+
+.adv {
+    margin-top: 51px;
+    margin-left: 4px;
+}
+
+.menu {
+    list-style: none;
+    margin-right: 26px;
+    margin-top: 30px;
+    margin-bottom: 0;
+}
+
+.menu li {
+    display: inline;
+    font-size: 9px;
+    font-family: Arial;
+    margin-left: 8px;
+    padding-left: 12px;
+}
+
+.menu_border {
+    border-left: 2px dashed #0D6DFF;
+}
+
+.menu li a {
+    text-decoration: none;
+    color: #0D6DFF;
+    font-weight: bold;
+}
+
+.content {
+    width: 765px;
+    height: 351px;
+}
+
+.text {
+    color: #797979;
+    font-family: Arial;
+    font-size: 12px;
+}
+
+.image_text {
+    color: white;
+    font-family: Arial;
+    font-weight: 600;
+    font-size: 13px;
+    padding-left: 20px;
+    padding-top: 14px;
+    letter-spacing: -1px;
+}
+
+.content_left {
+    width: 223px;
+    margin-left: 20px;
+    height: 351px;
+}
+
+.left_image {
+    background-image: url(images/img5.gif);
+    width: 223px;
+    height: 44px;
+}
+
+.left_list {
+    width: 170px;
+}
+
+.left_list li {
+    margin: 0;
+    padding: 0;
+    color: #666;
+}
+
+.link {
+    color: black;
+    font-family: Arial;
+    font-size: 12px;
+}
+
+.content_right {
+    width: 503px;
+    height: 351px;
+}
+
+.otstup {
+    padding-top: 15px;
+}
+
+.text_on_right_from_image {
+    width: 320px;
+    margin-right: 40px;
+    line-height: 20px;
+}
+
+.right_image {
+    background-image: url(images/img6.gif);
+    width: 503px;
+    height: 44px;
+}
+
+.right_list {
+    width: 170px;
+}
+
+.right_list li {
+    margin: 0;
+    padding: 0;
+    color: #666;
+}
+
+.right_list li p {
+    margin: 0;
+    padding: 0;
+}
+
+.bottom {
+    width: 765px;
+    height: 59px;
+    background-image: url(images/img7.gif)
+}
+
+.copy {
+    color: white;
+    font-size: 11px;
+    font-family: Arial;
+    text-align: center;
+    padding-top: 17px;
+}
+
+.bottom_link {
+    color: white;
+}
+
+.last {
+    text-align: center;
+    font-family: Arial;
+    font-size: 11px;
+}
+
+.last a {
+    color: black;
+}
--- a/web-design/сайт/Clover
+++ b/web-design/сайт/Clover
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <link href="Clover Leaf.css" rel="stylesheet" type="text/css">
+    <title>CLOVER LEAF</title>
+</head>
+
+<body>
+    <div class="container">
+        <div class="top">
+            <div class="top_left FL">
+                <div class="FL">
+                    <h2 class="clover">CLOVER LEAF</h2>
+                    <p class="templates">BY FREE CSS TEMPLATES</p>
+                </div>
+                <img class="leaf" src="images/img3.gif" width="44" height="47" />
+            </div>
+            <div class="top_right FR">
+                <ul class="menu FR">
+                    <li><a href="#">ABOUT US</a></li>
+                    <li class="menu_border"><a href="#">PRODUCTS</a></li>
+                    <li class="menu_border"><a href="#">SERVICES</a></li>
+                    <li class="menu_border"><a href="#">CLIENTS</a></li>
+                    <li class="menu_border"><a href="#">SUPPORT</a></li>
+                </ul>
+                <img class="adv" src="images/ad468x60.jpg" width="468" height="60" />
+            </div>
+        </div>
+        <div class="content">
+            <div class="content_left FL">
+                <div class="left_image">
+                    <p class="image_text">LOREM IPSUM DOLOR</p>
+                </div>
+                <ul class="left_list">
+                    <li>
+                        <p class="text">In posuere eleifend odio quisque semper augue mattis wisi. <a class="link" href="#">Maecenas ligula...</a></p>
+                    </li>
+                    <li>
+                        <p class="text">Donec leo, vivamus fermentum nibh in augue praesent a lacus at. <a class="link" href="#">Urna congue rutrum...</a></p>
+                    </li>
+                    <li>
+                        <p class="text">Quisque dictum integer nisl risus, sagittis convallis, rutrum id. <a href="#" class="link">Congue and nibh...</a></p>
+                    </li>
+                </ul>
+            </div>
+            <div class="content_right FR">
+                <div class="right_image">
+                    <p class="image_text">WELCOME TO CLOVER LEAF</p>
+                </div>
+                <img class="FL" src="images/img8.jpg" width="122" height="123" />
+                <p class="text FR text_on_right_from_image"><strong>Clover Leaf</strong> is a <a href="#" class="link">Free CSS Templates</a> released under a <a href="#" class="link">Creative Commons Attribution 2.5 License.</a>. The photo is from <a href="#" class="link">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
+                <p class="text CB otstup">An unordered list example:</p>
+                <ul class="right_list">
+                    <li>
+                        <p class="text">List item number one</p>
+                    </li>
+                    <li>
+                        <p class="text">List item number two</p>
+                    </li>
+                    <li>
+                        <p class="text">List item number three</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="bottom">
+            <p class="copy">Copyright &copy; 2007 Clover Leaf. All Right Reserved. Designed by <a href="#" class="bottom_link">Free CSS Templates</a>.</p>
+        </div>
+        <p class="last"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
+    </div>
+</body>
+</html>
--- a/web-design/сайт/Clover
+++ b/web-design/сайт/Clover
--- a/web-design/сайт/Clover
+++ b/web-design/сайт/Clover
--- a/web-design/сайт/Clover
+++ b/web-design/сайт/Clover
--- a/web-design/сайт/Clover
+++ b/web-design/сайт/Clover
--- a/web-design/сайт/Clover
+++ b/web-design/сайт/Clover
--- a/web-design/сайт/Clover
+++ b/web-design/сайт/Clover
--- a/web-design/сайт/Clover
+++ b/web-design/сайт/Clover
--- a/web-design/сайт/Clover
+++ b/web-design/сайт/Clover
--- a/web-design/сайт/God
+++ b/web-design/сайт/God
--- a/web-design/сайт/God
+++ b/web-design/сайт/God
@@ -0,0 +1,48 @@
+@charset "utf-8";
+/* CSS Document */
+
+table {
+    width: 740px;
+}
+
+.trkartinka {
+    height: 140px;
+}
+
+.kartinka {
+    background-image: url(img1.jpg);
+    width: 740px;
+}
+
+.nadpiskartinka {
+    color: white;
+    font-weight: bold;
+}
+
+.tdblack {
+    background-color: black;
+    height: 14px;
+}
+
+.trgreen {
+    background-color: olivedrab;
+    width: 240px;
+    color: white;
+}
+
+.small {
+    font-size: 12;
+}
+
+.twhite {
+    color: white;
+    font-size: 12;
+}
+
+a {
+    color: olivedrab;
+}
+
+.awhite {
+    color: white;
+}
--- a/web-design/сайт/God
+++ b/web-design/сайт/God
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+
+<head>
+    <title>God of Gates by Free Css Templates</title>
+    <link href="God%20of%20Gates.css" type="text/css" rel="stylesheet">
+</head>
+
+<body>
+    <table align="center" border="0">
+
+        <tr>
+            <td class="tdblack" colspan="2"></td>
+        </tr>
+
+        <tr class="trkartinka">
+            <td valign="bottom" colspan="2" class="kartinka">
+                <p class="nadpiskartinka">&nbsp; God of Gates &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; by Free Css Templates</p>
+            </td>
+        </tr>
+
+        <tr>
+            <td class="tdblack" colspan="2"></td>
+        </tr>
+
+        <tr>
+            <td valign="top">
+                <br>
+                <h2>Welcome to God of Gates!</h2>
+
+                <p class="small">January 4th, 2007 by Author</p>
+
+                <p>God of Gates is a free template from <a href="#">Free CSS Templates</a> released under a <a href="#">Creative Commons Attribution 2.5 License</a>. The header photo is from <a href="#">PDPhoto.org</a>. You're free to use it for both commercial of personal use. I only ask that you link back to <a href="#">my site</a> in some way. Enjoy :)</p>
+
+                Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. <p>Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Nullam et orci in erat viverra ornare. Nunc pellentesque.</p>
+
+                <p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p>
+
+                <ul>
+                    <li><a href="#">Suspendisse quis gravida massa felis</a></li>
+                    <li><a href="#">Vivamus sagittis bibendum erat</a></li>
+                    <li><a href="#">Nullam et orci in erat viverra ornare.</a></li>
+                    <li><a href="#">Suspendisse quis gravida massa felis</a></li>
+                    <li><a href="#">Curabitur malesuada turpis nec ante.</a></li>
+                </ul>
+
+                <p>Posted in <a href="#">Quisque vestibulum</a> | <a href="#">Edit</a> | <a href="#">1 Comment <20></a></p>
+
+                <br>
+                <h2>Lorem Ipsum Dolore</h2>
+
+                <p class="small">January 3rd, 2007 by Author</p>
+
+                <p>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros impediet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec ante. Suspendisse quis felis. Suspendisse potenti. Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus.</p>
+
+                <p>Posted in <a href="#">Suspendisse iaculis</a> | <a href="#">Edit</a> | <a href="#">23 Comment <20></a></p>
+            </td>
+            <td valign="top" class="trgreen">
+                <br><br>
+                &nbsp; <input type="text"><input type="submit" value="Search"><br><br>
+                &nbsp; <b>Pages</b><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">My Blog</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">My Photos</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">My Favorites</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">About Me</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">Contact Me</a><br><br>
+                &nbsp; <b>Archives</b><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">January 2007</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">December 2006</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">November 2006</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">October 2006</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">September 2006</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">August 2006</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">July 2006</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">June 2006</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">May 2006</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">April 2006</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">March 2006</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">February 2006</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">January 2006</a><br><br>
+                &nbsp; <b>Categories</b><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">Quisque vestibulum (23)</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">Sed a nisl a lacus (78)</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">Quisque sagittis (11)</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">Etiam volutpat (34)</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">In aliquet hendrerit (65)</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">Suspendisse iaculis (35)</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">Nam vel risus at (22)</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">Praesent sit amet (54)</a><br><br>
+                &nbsp; <b>Blogroll</b><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">WebGod of Gates</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">AnotherFriendlySite.net</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">CoolSite.com</a><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">MyBestFriend.com</a><br><br>
+                &nbsp; <b>Meta</b><br>
+                &nbsp; &nbsp; <a class="awhite" href="#">Valid XHTML</a><br><br><br>
+            </td>
+        </tr>
+
+        <tr>
+            <td class="tdblack" colspan="2" align="center">
+                <p class="twhite">Copyright &copy; 2007 God of Gates. Designed by <a class="twhite" href="#">Free CSS Templates</a>
+            </td>
+        </tr>
+
+    </table>
+</body>
+</html>
--- a/web-design/сайт/God
+++ b/web-design/сайт/God
--- a/web-design/сайт/InstitutionName.png
+++ b/web-design/сайт/InstitutionName.png
--- a/web-design/сайт/InstitutionName/InstitutionName.css
+++ b/web-design/сайт/InstitutionName/InstitutionName.css
@@ -0,0 +1,104 @@
+@charset "utf-8";
+/* CSS Document */
+
+*{
+	padding: 0;
+	margin: 0;
+	border: 0;
+}
+.FL{float: left;}
+.FR{float: right;}
+.clearL{clear:left;}
+.clearR{clear: right;}
+.clearB{clear: both;}
+
+.container{
+	width: 770px;
+	height: 710px;
+}
+.nav{
+	width: 468px;
+	height: 51px;
+	background-image: url(images/index_02.gif);
+}
+.navOtstup{
+	margin-top: 12px;
+	color: #FFFFFF;
+}
+a{
+	text-decoration: none;
+	color: #FFFFFF;
+	font-family: Arial;
+	font-size: 18px;
+}
+a:hover{
+	color: aquamarine;
+	text-decoration: underline;
+}
+.levo{
+	width: 168px;
+	height: 395px;
+}
+.pravo{
+	margin-left: 15px;
+	width: 587px;
+	height:395px;
+}
+.zagolovok{
+	color: #ADADAD;
+	font-family: Arial;
+	font-size: 22px;
+}
+.zagolovok2{
+	margin-top: 12px;
+	margin-bottom: 9px;
+	color: #2C00C3;
+	font-size: 17px;
+	font-family: Arial;
+	font-weight: bold;	
+}
+.text{
+	font-family: Arial;
+	font-size: 11px;
+}
+.niz{
+	width: 255px;
+	height: 51px;
+	background-image: url(images/index_23.gif);
+}
+.niz2{
+	margin-left: 1px;
+}
+.niztext{
+	color: #FFFFFF;
+	font-family: Arial;
+	font-size: 14px;
+	font-weight: bold;
+	margin-top: 16px;
+}
+.final{
+	width: 730px;
+	background-image: url(images/index_26.gif);
+	height: 26px;
+}
+.finaltext{
+	font-family: Arial;
+	font-size: 11px;
+	color: #2C00C3;
+	font-weight: bold;
+	margin-top: 4px;
+}
+
+.about{padding-top: 1px;}
+.textlevo{width: 356px;}
+.textDIV{width:566px;}
+.textniz{margin-top:10px;}
+.belii{color: #FFFFFF;}
+
+.Visota51{height: 51px;}
+.Visota50{height: 50px;}
+.Visota48{height: 48px;}
+.Visota49{height: 49px;}
+.Visota198{height: 198px;}
+.Visota29{height: 29px;}
+.Visota395{height: 395px;}
--- a/web-design/сайт/InstitutionName/InstitutionName.html
+++ b/web-design/сайт/InstitutionName/InstitutionName.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Institution Name</title>
+    <link href="InstitutionName.css" rel="stylesheet" type="text/css">
+</head>
+
+<body>
+    <div align="center">
+        <div class="container">
+            <div class="FL Visota198"><img src="images/index_01.gif" width="282" height="198" alt="" /></div>
+            <div class="FL nav">
+                <div class="navOtstup">
+                    <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Destinations</a> | <a href="#">Career</a> | <a href="#">News</a> | <a href="#">Contacts</a>
+                </div>
+            </div>
+            <div class="FR Visota51"><img src="images/index_03.gif" width="20" height="51" alt="" /></div>
+            <div class="FR Visota50"><img src="images/index_04.gif" width="488" height="50" alt="" /></div>
+            <div class="FL Visota48"><img src="images/index_05.gif" width="367" height="48" alt="" /></div>
+            <div class="FL Visota48"><img src="images/index_06.gif" width="121" height="48" alt="" /></div>
+            <div class="FL Visota49"><img src="images/index_07.gif" width="488" height="49" alt="" /></div>
+            <div class="Visota29 clearB"><img src="images/index_08.gif" width="770" height="29" alt="" /></div>
+
+            <div class="levo FL">
+                <img class="FL" src="images/index_09.gif" width="19" height="395" alt="" />
+                <img class="FL" src="images/index_10.gif" width="149" height="395" alt="" />
+            </div>
+
+            <div class="pravo FR">
+
+                <div class="FL textDIV" align="left">
+                    <p class="zagolovok">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
+                    <p class="zagolovok2">Welcome to Institution Name</p>
+                    <div class="clearB">
+                        <div class="FL textlevo">
+                            <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam in arcu at sem nonummy convallis. Duis felis ante, congue vel, venenatis eu, elementum quis, lorem. Vestibulum eu massa et misi viverra mattis. Nam semper. Nulla sit amet diam. Mauris faucibus eleifend ligula. Phasellus nunc nibh, convallis sed, lobortis ac, vehicula id, lorem. Aliquam luctus, lectus imperdiet tristique egestas, sapien dui tincidunt erat, vitae vestibulum ipsum magna eget pede. Ut eget tortor quis elit fringilla suscipit. Pellentesque ac turpis.</p>
+                        </div>
+                        <div class="FR"><img src="images/index_15.gif" width="210" height="112" alt="" /></div>
+                    </div>
+                    <div class="clearB about">
+                        <p class="zagolovok2">About us</p>
+                        <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam in arcu at sem nonummy convallis. Duis felis ante, congue vel, venenatis eu, elementum quis, lorem. Vestibulum eu massa et misi viverra mattis. Nam semper. Nulla sit amet diam. Mauris faucibus eleifend ligula. Phasellus nunc nibh, convallis sed, lobortis ac, vehicula id, lorem. Aliquam luctus, lectus imperdiet tristique egestas, sapien dui tincidunt erat, vitae vestibulum ipsum magna eget pede. Ut eget tortor quis elit fringilla suscipit. Pellentesque ac turpis.</p>
+                        <p class="text textniz">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In Iaoreet. Proin eu lorem. Vestibulum metus nunc, rhoncus euismod, tempus eu, semper eget, urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam laэcus lorem, congue fringilla, accumsan at, interdum quis arcu. Nullam cursus risus sit amet felis. Suspendisse id nulla. Ut volutpat feugiat nisi. Etiam imperdiet velit vel orci euismod feugiat. Nulla placerat quam eu lacus. Nunc ipsumю</p>
+                    </div>
+                </div>
+
+                <div class="FR"><img src="images/index_13.gif" width="21" height="395" alt="" /></div>
+            </div>
+            <div class="niz2 clearB">
+                <img class="FL" src="images/index_20.gif" width="19" height="51" alt="" />
+                <img class="FL" src="images/index_21.gif" width="456" height="51" alt="" />
+                <img class="FL" src="images/index_22.gif" width="19" height="51" alt="" />
+                <div class="FL niz">
+                    <p class="niztext" align="left">Copyright 2005 All Rights Reserved.</p>
+                </div>
+                <img class="FL" src="images/index_24.gif" width="20" height="51" alt="" />
+            </div>
+            <img class="FL niz2" src="images/index_25.gif" width="19" height="26" alt="" />
+            <div class="FL final" align="center">
+                <p class="finaltext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+            </div>
+            <img src="images/index_27.gif" width="20" height="26" alt="" />
+
+        </div>
+    </div>
+</body>
+</html>
--- a/web-design/сайт/InstitutionName/images/index_01.gif
+++ b/web-design/сайт/InstitutionName/images/index_01.gif
--- a/web-design/сайт/InstitutionName/images/index_02.gif
+++ b/web-design/сайт/InstitutionName/images/index_02.gif
--- a/web-design/сайт/InstitutionName/images/index_03.gif
+++ b/web-design/сайт/InstitutionName/images/index_03.gif
--- a/web-design/сайт/InstitutionName/images/index_04.gif
+++ b/web-design/сайт/InstitutionName/images/index_04.gif
--- a/web-design/сайт/InstitutionName/images/index_05.gif
+++ b/web-design/сайт/InstitutionName/images/index_05.gif
--- a/web-design/сайт/InstitutionName/images/index_06.gif
+++ b/web-design/сайт/InstitutionName/images/index_06.gif
--- a/web-design/сайт/InstitutionName/images/index_07.gif
+++ b/web-design/сайт/InstitutionName/images/index_07.gif
--- a/web-design/сайт/InstitutionName/images/index_08.gif
+++ b/web-design/сайт/InstitutionName/images/index_08.gif
--- a/web-design/сайт/InstitutionName/images/index_09.gif
+++ b/web-design/сайт/InstitutionName/images/index_09.gif
--- a/web-design/сайт/InstitutionName/images/index_10.gif
+++ b/web-design/сайт/InstitutionName/images/index_10.gif
--- a/web-design/сайт/InstitutionName/images/index_13.gif
+++ b/web-design/сайт/InstitutionName/images/index_13.gif
--- a/web-design/сайт/InstitutionName/images/index_15.gif
+++ b/web-design/сайт/InstitutionName/images/index_15.gif
--- a/web-design/сайт/InstitutionName/images/index_20.gif
+++ b/web-design/сайт/InstitutionName/images/index_20.gif
--- a/web-design/сайт/InstitutionName/images/index_21.gif
+++ b/web-design/сайт/InstitutionName/images/index_21.gif
--- a/web-design/сайт/InstitutionName/images/index_22.gif
+++ b/web-design/сайт/InstitutionName/images/index_22.gif
--- a/web-design/сайт/InstitutionName/images/index_23.gif
+++ b/web-design/сайт/InstitutionName/images/index_23.gif
--- a/web-design/сайт/InstitutionName/images/index_24.gif
+++ b/web-design/сайт/InstitutionName/images/index_24.gif
--- a/web-design/сайт/InstitutionName/images/index_25.gif
+++ b/web-design/сайт/InstitutionName/images/index_25.gif
--- a/web-design/сайт/InstitutionName/images/index_26.gif
+++ b/web-design/сайт/InstitutionName/images/index_26.gif
--- a/web-design/сайт/InstitutionName/images/index_27.gif
+++ b/web-design/сайт/InstitutionName/images/index_27.gif
--- a/web-design/сайт/Italy/Italy.html
+++ b/web-design/сайт/Italy/Italy.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Italy</title>
+</head>
+
+<body>
+    <div align="center">
+        <img src="italy.gif" alt="" width="415" height="407" usemap="#Italy">
+        <map name="Italy">
+            <area shape="circle" coords="122,66,21" href="p2.html" target="_blank">
+            <area shape="poly" coords="266,342,281,335,285,339,286,344,271,363,279,380,271,393,251,391,245,382,228,379,204,362,191,361,185,351,188,345,194,339,203,344,212,337,223,344,239,343" href="p3.html" target="_blank">
+            <area shape="rect" coords="186,184,250,213" href="p1.html" target="_blank" alt="">
+        </map>
+    </div>
+</body>
+
+</html>
--- a/web-design/сайт/Italy/italy.gif
+++ b/web-design/сайт/Italy/italy.gif
--- a/web-design/сайт/Italy/p1.html
+++ b/web-design/сайт/Italy/p1.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Документ без названия</title>
+    <link href="p1.css" rel="stylesheet" type="text/css">
+</head>
+
+<body>
+
+    <h4>1.Форматы файлов</h4>
+    <p>Основное назначение файлов - хранить информацию. Они также предназначены для передачи данных от программы к программе и от системы к системе. Другими словами, файл - это хранилище стабильных и мобильных данных. Но, файл - это нечто большее, чем просто хранилище данных. Обычно файл имеет имя, атрибуты, время модификации и время создания.
+        Понятие файла менялось с течением времени. Операционные системы первых больших ЭВМ представляли файл, как хранилище для базы данных и, поэтому файл являлся набором записей. Обычно все записи в файле были одного размера, часто по 80 символов каждая. При этом много времени уходило на поиск и запись данных в большой файл.
+        В конце 60-х годов наметилась тенденция к упрощению операционных систем, что позволило использовать их на менее мощных компьютерах. Это нашло свое отражение и в развитии операционной системы Unix. В Unix под файлом понималась последовательность байтов. Стало легче хранить данные на диске, так как не надо было запоминать размер записи.
+        Unix оказал очень большое влияние на другие операционные системы персональных компьютеров. Почти все они поддерживают идею Unix о том, что файл - это просто последовательность байтов. Файлы, представляющие собой поток данных, стали использоваться при обмене информацией между компьютерными системами. Если используется более сложная структура файла (как в операционных системах OS/2 и Macintosh), она всегда может быть преобразована в поток байтов, передана и на другом конце канала связи воссоздана в исходном виде.
+        Итак, мы можем считать, что файл - это поименованная последовательность байтов.
+        Файловая структура представляет собой систему хранения файлов на запоминающем устройстве, например, диске. Файлы организованы в каталоги (иногда называемые директориями или папками). Любой каталог может содержать произвольное число подкаталогов, в каждом из которых могут храниться файлы и другие каталоги.
+        Способ, которым данные организованы в файлы, называется форматом файла.
+        Для того чтобы прочесть файл, например, электронной таблицы, необходимо знать, каким образом байты представляют числа (формулы, текст) в каждой ячейке; чтобы прочесть файл текстового редактора, надо знать, какие байты представляют символы, а какие шрифты или поля, а также другую информацию.
+        Программы могут хранить данные в файле таким способом, какой выберет программист. Зачастую предполагается, однако, что файлы будут использоваться различными программами. По этой причине многие прикладные программы поддерживают некоторые наиболее распространенные форматы, так что другие программы могут понять данные в файле. Компании по производству программного обеспечения (которые хотят, чтобы их программы стали "стандартами"), часто публикуют информацию относительно форматов, которые они создали, чтобы их можно было бы использовать в других приложениях.
+        Все файлы условно можно разделить на две части - текстовые и двоичные.
+        Текстовые файлы - наиболее распространенный тип данных во всем компьютерном мире. Для хранения каждого символа чаще всего отводится один байт, а кодирование текстовых файлов выполняют с помощью специальных таблиц, в которых каждому символу соответствует определенное число, не превышающее 255. Файл, для кодировки которого используется только 127 первых чисел, называется ASCII-файлом (сокращение от American Standard Code for Information Interchange - американский стандартный код для обмена информацией), но в таком файле не могут быть представлены буквы, отличные от латиницы (в том числе и русские). Большинство национальных алфавитов можно закодировать с помощью восьмибитной таблицы. Для русского языка наиболее популярны на данный момент три кодировки: Koi8-R, Windows-1251 и, так называемая, альтернативная (alt) кодировка. Подробнее о кодировании русского текста рассказано в главе "Обработка документов".
+        Такие языки, как китайский, содержат значительно больше 256 символов, поэтому для кодирования каждого из них используют несколько байтов. Для экономии места зачастую применяется следующий прием: некоторые символы кодируются с помощью одного байта, в то время как для других используются два или более байтов. Одной из попыток обобщения такого подхода является стандарт Unicode, в котором для кодирования символов используется диапазон чисел от нуля до 65 536. Такой широкий диапазон позволяет представлять в численном виде символы языка людей из любого уголка планеты.
+        Но чисто текстовые файлы встречаются все реже. Люди хотят, чтобы документы содержали рисунки и диаграммы и использовали различные шрифты. В результате появляются форматы, представляющие собой различные комбинации текстовых, графических и других форм данных.
+        Двоичные файлы, в отличие от текстовых, не так просто просмотреть и в них, обычно, нет знакомых нам слов - лишь множество непонятных символов. Эти файлы не предназначены непосредственно для чтения человеком. Примерами двоичных файлов являются исполняемые программы и файлы с графическими изображениями.
+    </p>
+</body>
+
+</html>
--- a/web-design/сайт/Italy/p2.html
+++ b/web-design/сайт/Italy/p2.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Документ без названия</title>
+</head>
+
+<body>
+    <h4>2.Компьютер - универсальная информационная машина.</h4>
+    <p>Всякая новая техника создается, когда возникает большая общественная потребность в ней. К середине нашего века научно-технический прогресс привел к необходимости облегчить труд ученых и инженеров, ускорить выполнение громоздких расчетов и повысить их точность. Автоматизация вычислений, создание мощного, быстродействующего и точного электронного арифмометра - вот о чем думали специалисты - творцы первых ЭВМ. Никто в те далекие теперь годы и не помышлял о будущем информационном перевороте; решалась скромная, на первый взгляд чисто техническая задача. Да и возможности первых образцов вычислительных машин оказались небольшими.
+        Еще в годы второй мировой войны в США была собрана из обычных электромагнитных реле, которых тогда были тысячи на любой телефонной станции, вычислительная машина "Марк-1". Считала она в привычной десятичной системе счисления - телефонные реле имели как раз десять позиций своих контактов. Работала машина неторопливо - пока реле отщелкают свое, можно было вручную все посчитать. Поэтому вскоре после войны появились машины на электронных лампах: в США - ENIAC, а в СССР - МЭСМ (малая электронно-счетная машина), которую создал коллектив под руководством С.А. Лебедева. Ламповые ЭВМ уже оказались в состоянии выполнять сотни и тысячи арифметических или логических операций за одну секунду. Они могли обеспечить высокую точность вычислений. Человек уже не мог соперничать с такой машиной.
+        Жизнь первого поколения ЭВМ оказалась короткой - около десяти лет. Электронные лампы грелись, потребляли много электроэнергии, были громоздки (так, например, машина ENIAC весила 30 тонн, имела 18 тысяч электронных ламп и потребляла 150 киловатт). И что еще хуже - часто выходили из строя. Над компьютерщиками продолжали посмеиваться: чтобы сложить, скажем, два числа, требовалось написать программу из многих машинных команд. Например, такую: "Ввести в машину первое слагаемое; ввести второе; переслать из памяти первое слагаемое в арифметическое устройство (arithmetic unit); переслать в арифметическое устройство второе слагаемое и вычислить сумму; переслать результат в память; вывести это число из памяти машины и напечатать его". Каждую команду и оба слагаемых "набивали" на перфокарты и только потом вводили колоду перфокарт в компьютер и ждали, когда протарахтит печатающее устройство (printing device) и на выползающей из него бумажной ленте будет виден результат - искомая сумма.
+        В конце пятидесятых - начале шестидесятых годов на смену электронной лампе пришел компактный и экономичный прибор - транзистор (transistor). Компьютеры сразу стали производительнее и компактнее, уменьшилось потребление электроэнергии. ЭВМ второго поколения "научились" программировать сами для себя. Появились системы автоматизации программирования, состоящие из алгоритмических языков (algorithmic language) и трансляторов (translator) для них. Теперь пользователь изучал язык ЭВМ, приближенный к языку научных, инженерных или экономических расчетов. Например, Фортран или Алгол-60.
+        Программа, написанная на известном машине языке, переводилась на язык команд автоматически, с помощью программы-переводчика. Такие программы называли трансляторами, а процесс перевода - трансляцией. Транслятор не только переводил программу с алгоритмического языка на язык команд, но и проверял грамотность составленной пользователем программы, выявлял и классифицировал ошибки, давал советы по их устранению.
+        Прошло всего 7-8 лет, и это поколение буквально вытолкнули машины следующего, третьего поколения. Перевод вычислительной техники на интегральные микросхемы серьезно удешевил ее, поднял возможности и позволил начать новый этап ее практического применения. Компьютеры вторглись - уже не штучно, а в массовом порядке - практически во все сферы науки, экономики, управления.
+        Развитие микроэлектроники позволило создать и освоить технологию интегральных схем с особо большой плотностью компоновки. На одном кристалле размером меньше ногтя стали размещать не десятки и сотни, а десятки тысяч транзисторов и других элементов. Большие интегральные схемы (very large scale integration) составили техническую основу, элементную базу ЭВМ четвертого поколения. Их производительность возросла фантастически - до сотен миллионов операций в секунду.
+        Подлинный переворот в автоматике и управлении произвели появившиеся в семидесятые годы микропроцессоры и микро-ЭВМ - сверхминиатюрные изделия вычислительной техники. Малый вес и габариты, ничтожное электропотребление - все это позволило встраивать "монолитные" микро-ЭВМ и микропроцессорные наборы непосредственно в средства связи, машины, механизмы, приборы и другие технические устройства, чтобы наилучшим образом управлять их работой и контролировать ее.
+        ЭВМ третьего-четвертого поколения стали многоязычными и многопрограммными: они получили возможность вести диалог со многими пользователями одновременно и решать задачи, запрограммированные на разных языках.
+        Основное направление в развитии современных компьютеров (пятого и шестого поколения) - разработка машины, более похожей на человека по способам ввода и хранения информации и методам решения задач. Различные области информатики занимаются изучением этих проблем - задач искусственного интеллекта (artificial intelligence), экспертных систем (expert systems) и представления информации (information presentation).
+    </p>
+</body>
+
+</html>
--- a/web-design/сайт/Italy/p3.html
+++ b/web-design/сайт/Italy/p3.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Документ без названия</title>
+</head>
+
+<body>
+    <h4>3.Типы и назначение компьютеров</h4>
+    <p>Существование различных типов компьютеров определяется различием задач, для решения которых они предназначены. С течением времени появляются новые типы задач, что приводит к появлению новых типов компьютеров. Поэтому приведенное ниже деление очень условно.
+        Различают:
+        суперкомпьютеры; специализированные компьютеры-серверы; встроенные компьютеры-невидимки (микропроцессоры); персональные компьютеры.
+        Для выполнения изначального назначения компьютеров - вычислений - на рубеже 60-70 годов были созданы специализированные ЭВМ, так называемые суперкомпьютеры.
+        Суперкомпьютеры - специальный тип компьютеров, создающихся для решения предельно сложных вычислительных задач (составления прогнозов, моделирования сложных явлений, обработки сверхбольших объемов информации). Принцип работы суперкомпьютера заключается в том, что он способен выполнять несколько операций параллельно.
+        Одной из ведущих компаний мира в производстве суперкомпьютеров является компания Cray Research. Ее основатель, человек-легенда Сеймур Крей, уже в середине 70-х годов построил компьютер Cray-1, который поражал мир своим быстродействием: десятки и даже сотни миллионов арифметических операций в секунду.
+        Как известно, скорость распространения любого сигнала не превышает скорости света в вакууме - 300 тысяч километров в секунду, или 300 миллионов метров в секунду. Если компьютер выполняет 300 миллионов операций в секунду, то за время выполнения одной операции сигнал успевает пройти не более одного метра. Отсюда следует, что расстояние между частями суперкомпьютера, выполняющими одну операцию, не может превосходить нескольких десятков сантиметров. И действительно, суперкомпьютеры компании Cray были очень компактны и выглядели как "бублик" диаметром менее двух метров. Этот "бублик" занимался только вычислениями. Для общения с человеком и доставки данных для вычислений к "бублику" были подключены несколько достаточно производительных обычных компьютеров.
+        Компьютер, работающий в локальной или глобальной сети, может специализироваться на оказании информационных услуг другим компьютерам, на обслуживании других компьютеров. Такой компьютер называется сервером от английского слова serve (в переводе - обслуживать, управлять). В локальной сети один из компьютеров может выполнять функции файлового сервера, т. е. использоваться для долговременного хранения файлов.
+        Основная задача, решаемая файловыми серверами, - организация хранения, доступа и обмена данными (информацией) между компьютерами, людьми и другими источниками и поставщиками информации. Требования к серверам иные, чем к суперкомпьютеру. Важно наличие у них устройств хранения информации (типа магнитных дисков) большой емкости, скорость же обработки информации не столь критична.
+        В классе серверов выделяется подкласс суперсерверов, необходимых в тех случаях, когда, с одной стороны, желательна централизация данных, а с другой стороны, к этим данным необходимо обеспечить доступ очень большому количеству потребителей.
+        Кроме привычных компьютеров с клавиатурами, мониторами, дисководами, сегодняшний мир вещей наполнен компьютерами-невидимками. Микропроцессор представляет собой компьютер в миниатюре. Кроме обрабатывающего блока, он содержит блок управления и даже память (внутренние ячейки памяти). Это значит, что микропроцессор способен автономно выполнять все необходимые действия с информацией. Многие компоненты современного персонального компьютера содержат внутри себя миниатюрный компьютер. Массовое распространение микропроцессоры получили и в производстве, там где управление может быть сведено к отдаче ограниченной последовательности команд.
+        Микропроцессоры незаменимы в современной технике. Например, управление современным двигателем - обеспечение экономии расхода топлива, ограничение максимальной скорости движения, контроль исправности и т. д. - немыслимо без использования микропроцессоров. Еще одной перспективной сферой их использования является бытовая техника - применение микропроцессоров придает ей новые потребительские качества.
+        В 1975 году появился первый персональный компьютер. С самого начала их выпуска стало ясно, что невысокая цена и достаточные вычислительные возможности этого нового класса компьютеров будут способствовать их широкому распространению.
+        Персональные компьютеры совершили компьютерную революцию в профессиональной деятельности миллионов людей и оказали огромное влияние на все стороны жизни человеческого общества. Компьютеры этого типа стали незаменимым инструментом работы инженеров и ученых. Особо велика их роль при проведении научных экспериментов, требующих сложных и длительных вычислений.
+        В последние годы появилась разновидность персонального компьютера - так называемый домашний компьютер. По сути, он ничем не отличается от персонального, только используется для других целей: развлекательных и образовательных.
+        Идея сетевого компьютера, работающего только в сети и представляющего собой упрощенный вариант персонального компьютера, все больше занимает умы разработчиков. Такому компьютеру не нужно хранить программы, он в любой момент может получить их по сети.
+    </p>
+</body>
+
+</html>
--- a/web-design/сайт/Italy/p4.html
+++ b/web-design/сайт/Italy/p4.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Документ без названия</title>
+</head>
+
+<body>
+    <h4>4.Магистрально-модульный принцип построения компьютера</h4>
+    <p>Под архитектурой компьютера понимается его логическая организация, структура, ресурсы, т. е. средства вычислительной системы, которые могут быть выделены процессу обработки данных на определенный интервал времени. Архитектура современных ПК основана на магистрально-модульном принципе.
+        Модульный принцип позволяет потребителю самому подобрать нужную ему конфигурацию компьютера и производить при необходимости его модернизацию. Модульная организация системы опирается на магистральный (шинный) принцип обмена информации. Магистраль или системная шина - это набор электронных линий, связывающих воедино по адресации памяти, передачи данных и служебных сигналов процессор, память и периферийные устройства.
+        Обмен информацией между отдельными устройствами ЭВМ производится по трем многоразрядным шинам, соединяющим все модули, - шине данных, шине адресов и шине управления.
+        Подключение отдельных модулей компьютера к магистрали на физическом уровне осуществляется с помощью контроллеров, а на программном обеспечивается драйверами. Контроллер принимает сигнал от процессора и дешифрует его, чтобы соответствующее устройство смогло принять этот сигнал и отреагировать на него. За реакцию устройства процессор не отвечает - это функция контроллера. Поэтому внешние устройства ЭВМ заменяемы, и набор таких модулей произволен.
+        Разрядность шины данных задается разрядностью процессора, т. е. количеством двоичных разрядов, которые процессор обрабатывает за один такт.
+        Данные по шине данных могут передаваться как от процессора к какому-либо устройству, так и в обратную сторону, т. е. шина данных является двунаправленной. К основным режимам работы процессора с использованием шины передачи данных можно отнести следующие: запись/чтение данных из оперативной памяти и из внешних запоминающих устройств, чтение данных с устройств ввода, пересылка данных на устройства вывода.
+        Выбор абонента по обмену данными производит процессор, который формирует код адреса данного устройства, а для ОЗУ - код адреса ячейки памяти. Код адреса передается по адресной шине, причем сигналы передаются в одном направлении, от процессора к устройствам, т. е. эта шина является однонаправленной.
+        По шине управления передаются сигналы, определяющие характер обмена информацией, и сигналы, синхронизирующие взаимодействие устройств, участвующих в обмене информацией.
+        Внешние устройства к шинам подключаются посредством интерфейса. Под интерфейсом понимают совокупность различных характеристик какого-либо переферийного устройства ПК, определяющих организацию обмена информацией между ним и центральным процессором. В случае несовместимости интерфейсов (например, интерфейс системной шины и интерфейс винчестера) используют контроллеры.
+        Чтобы устройства, входящие в состав компьютера, могли взаимодействовать с центральным процессором, в IBM-совместимых компьютерах предусмотрена система прерываний (Interrupts). Система прерываний позволяет компьютеру приостановить текущее действие и переключиться на другие в ответ на поступивший запрос, например, на нажатие клавиши на клавиатуре. Ведь с одной стороны, желательно, чтобы компьютер был занят возложенной на него работой, а с другой - необходима его мгновенная реакция на любой требующий внимания запрос. Прерывания обеспечивают немедленную реакцию системы.
+        Прогресс компьютерных технологий идет семимильными шагами. Каждый год появляются новые процессоры, платы, накопители и прочие периферийные устройства. Рост потенциальных возможностей ПК и появление новых более производительных компонентов неизбежно вызывает желание модернизировать свой компьютер. Однако нельзя в полной мере оценить новые достижения компьютерной технологии без сравнения их с существующими стандартами.
+
+    </p>
+</body>
+
+</html>
--- a/web-design/сайт/JET.png
+++ b/web-design/сайт/JET.png
--- a/web-design/сайт/JET/JET.css
+++ b/web-design/сайт/JET/JET.css
@@ -0,0 +1,85 @@
+@charset "utf-8";
+
+/* CSS Document */
+* {
+    margin: 0;
+}
+
+.zelenii {
+    background-color: #A8C1A8;
+}
+
+.NoUnderline {
+    text-decoration: none;
+    color: #A8C1A8;
+    font-family: Arial;
+    font-size: 12px;
+    margin-right: 22px;
+}
+
+.textZEL {
+    color: #A8C1A8;
+    font-family: Arial;
+    font-size: 12px;
+}
+
+.text {
+    font-family: Arial;
+    font-size: 12px;
+    margin-top: 10px;
+}
+
+.NIZtext {
+    font-family: Arial;
+    font-size: 12px;
+    margin-top: 40px;
+    margin-bottom: 30px;
+}
+
+.divR {
+    margin-left: 20px;
+}
+
+.line {
+    width: 600px;
+    border-top: 2px dotted #000000;
+    margin-top: 15px;
+}
+
+.line2 {
+    width: 600px;
+    border-top: 1px dashed #000000;
+    margin-top: 15px;
+}
+
+.zagolovok {
+    font-family: Arial;
+    font-weight: lighter;
+    margin-top: 10px;
+}
+
+.PoleVibor {
+    margin-top: 5px;
+}
+
+.otstup {
+    margin-top: 20px;
+}
+
+.otstup2 {
+    margin-top: 10px;
+}
+
+.otstupL {
+    margin-left: 7px;
+}
+
+.menu {
+    list-style-type: none;
+    margin: 0;
+    padding: 0
+}
+
+.menu li {
+    display: inline;
+}
--- a/web-design/сайт/JET/JET.html
+++ b/web-design/сайт/JET/JET.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>JET</title>
+    <link href="JET.css" rel="stylesheet" type="text/css">
+</head>
+
+<body>
+    <table width="100%" cellspacing="0" cellpadding="0">
+        <tbody>
+            <tr height="150">
+                <td class="zelenii">&nbsp;</td>
+                <td colspan="3" class="zelenii"><img src="pageHeaderTitleImage.gif" alt="" width="600" height="100" class="zelenii" /></td>
+            </tr>
+            <tr>
+                <td>&nbsp;</td>
+
+                <td width="600">
+                    <div class="otstup2">
+                        <ul class="menu">
+                            <li><a href="#" class="NoUnderline">HOME</a></li>
+                            <li><a href="#" class="NoUnderline">ABOUT</a></li>
+                            <li><a href="#" class="NoUnderline">USER HOME</a></li>
+                            <li><a href="#" class="NoUnderline">SEARCH</a></li>
+                            <li><a href="#" class="NoUnderline">CURRENT</a></li>
+                            <li><a href="#" class="NoUnderline">ARCHIVES</a></li>
+                        </ul>
+                    </div>
+                    <div class="line"></div>
+
+                    <p class="textZEL otstup2">Home > About the Journal > Submissions</p>
+                    <h3 class="zagolovok otstup">Submissions</h3>
+
+                    <div class="line"></div>
+
+                    <ul class="otstup2" type="none">
+                        <li>&raquo; <a href="#" class="textZEL">Online Submissions</a></li>
+                        <li>&raquo; <a href="#" class="textZEL">Author Guidilines</a></li>
+                        <li>&raquo; <a href="#" class="textZEL">Copyright Notice</a></li>
+                        <li>&raquo; <a href="#" class="textZEL">Privacy Statement</a></li>
+                    </ul>
+                    <h3 class="zagolovok">Online Submissions</h3>
+                    <div class="text">Already have a Username/Password for Internation Jornal of Emerging Technologies in Learning (IJET)?</div>
+                    <div class="textZEL">GO TO LOGIN</div>
+                    <p class="text">Need a Username/Password?<br>
+                        <a href="#" class="textZEL">GO TO REGISTRATION</a></p>
+                    <p class="text">Registration and login are required to submit items online and to check the status of current submissions.</p>
+
+                    <div class="line2"></div>
+
+                    <h3 class="zagolovok">Author Guidelines</h3>
+                    <p class="text">Papers will be accepted only in <strong>English.</strong><br>
+                        For format instructions see the <a href="#" class="textZEL">iJET Tempate.</a><br>
+                        The publishing fee for all kinds of submissions except calls amounts <strong>EUR 100,</strong> - and has to be paid immediately after the notification of acceptance.<br>
+                        The publication is for <strong>free</strong> for members of the Internation Association of Online Engineering (IAOE) and for memebers of the sponsoring organizations.</p>
+
+                    <div class="line2"></div>
+
+                    <h3 class="zagolovok">Submission Preparation Checklist</h3>
+                    <ol>
+                        <li class="text">The submission has not been previously published, nor is it before another journal for consideration (or an explanation has been provider in Comments to the Editor).</li>
+                        <li class="text">The submissions file is in Microsoft Word or RTF document file format.</li>
+                        <li class="text">All URL addresses in the text (e.g., http://pkp.sfu.ca) are activated and ready to click.</li>
+                        <li class="text">The text is written in English and meets this journal's formatting requirements outlined in the Author Guidelines</li>
+                    </ol>
+
+                    <div class="line2"></div>
+
+                    <h3 class="zagolovok">Copyright Notice</h3>
+
+                    <p class="text">Copyright for articles published in this journal is retained by the autors, with first publication rights granted to the journal. By virtue of their appearance in this open access journal, articles are free to use, with proper attribution, in educational and other non-commercial settings.</p>
+
+                    <div class="line2"></div>
+
+                    <h3 class="zagolovok">Privacy Statement</h3>
+
+                    <p class="text">The names and email addresses entered in this journal site will be used exclusively for the stated purposes of this journal and will not be made available for any other purpose or to any other party.</p>
+
+                    <p class="NIZtext">Internationaljournal of Emerging Technologies in learning, ISSN:</p>
+                </td>
+
+                <td width="182" valign="top">
+                    <div class="otstup3">
+                        <div class="divR otstup2">
+                            <a href="#" class="textZEL">OPEN JOURNAL SYSTEMS</a>
+                            <p class="otstup"><a href="#" class="textZEL">Journal help</a></p>
+                            <p class="text otstup"><strong>USER</strong></p>
+                            <div class="text">You are logged in as...<br>
+                                <strong>roza_d</strong></div>
+                        </div>
+                        <ul class="otstupL">
+                            <li><a href="#" class="textZEL">My journals</a></li>
+                            <li><a href="#" class="textZEL">My profile</a></li>
+                            <li><a href="#" class="textZEL">Sing out</a></li>
+                        </ul>
+                        <div class="divR">
+                            <p class="text"><strong>JOURNAL CONTENT</strong></p>
+                            <div class="text">Search</div>
+                            <input type="text" size="9">
+                            <select class="PoleVibor">
+                                <option>All</option>
+                                <option>Everythhing</option>
+                            </select>
+                            <br>
+                            <input class="PoleVibor" type="submit" value="Search">
+                            <div class="text otstup">Browse</div>
+                        </div>
+                        <ul class="otstupL">
+                            <li><a href="#" class="textZEL">By Issue</a></li>
+                            <li><a href="#" class="textZEL">By Title</a></li>
+                            <li><a href="#" class="textZEL">Other Journals</a></li>
+                        </ul>
+                        <div class="divR">
+                            <div class="text otstup"><strong>INFORMATION</strong></div>
+                        </div>
+                        <ul class="otstupL" type="disc">
+                            <li><a href="#" class="textZEL">For Readers</a></li>
+                            <li><a href="#" class="textZEL">For Authors</a></li>
+                            <li><a href="#" class="textZEL">For Librarians</a></li>
+                        </ul>
+                    </div>
+                </td>
+
+                <td>&nbsp;</td>
+            </tr>
+            <tr height="30">
+                <td colspan="4" class="zelenii">&nbsp;</td>
+            </tr>
+        </tbody>
+    </table>
+
+</body>
+</html>
--- a/web-design/сайт/JET/Thumbs.db
+++ b/web-design/сайт/JET/Thumbs.db
--- a/web-design/сайт/JET/pageHeaderTitleImage.gif
+++ b/web-design/сайт/JET/pageHeaderTitleImage.gif
--- a/web-design/сайт/NetMechanic.png
+++ b/web-design/сайт/NetMechanic.png
--- a/web-design/сайт/NetMechanic/BuyIt.gif
+++ b/web-design/сайт/NetMechanic/BuyIt.gif
--- a/web-design/сайт/NetMechanic/EvaluateProduct.gif
+++ b/web-design/сайт/NetMechanic/EvaluateProduct.gif
--- a/web-design/сайт/NetMechanic/EvaluateSite.jpg
+++ b/web-design/сайт/NetMechanic/EvaluateSite.jpg
--- a/web-design/сайт/NetMechanic/KeynoteNetMechanic.jpg
+++ b/web-design/сайт/NetMechanic/KeynoteNetMechanic.jpg
--- a/web-design/сайт/NetMechanic/MonitorProduct.gif
+++ b/web-design/сайт/NetMechanic/MonitorProduct.gif
--- a/web-design/сайт/NetMechanic/NetMechanic.html
+++ b/web-design/сайт/NetMechanic/NetMechanic.html
@@ -0,0 +1,97 @@
+<html>
+
+<head>
+    <title>NetMechanic</title>
+</head>
+
+<body>
+    <table width="650" align="center" cellspacing="0" cellpadding="0">
+
+        <tr>
+            <td colspan="4"><img src="KeynoteNetMechanic.jpg"></td>
+        </tr>
+
+        <tr bgcolor="navy">
+            <td colspan="3">
+                <font face="Arial" color="white"><b>About Us &nbsp; &nbsp; Products &nbsp; &nbsp; Tips &nbsp; &nbsp; Login/Help &nbsp; &nbsp; Site Map &nbsp; &nbsp; Home</b></font>
+            </td>
+            <td></td>
+        </tr>
+
+        <tr>
+            <td colspan="3"><img src="EvaluateSite.jpg"></td>
+            <td valign="top">
+                <font color="DarkOrange" face="Arial">Webmaster Tips</font><br>
+                <font size="2" face="Arial">How does your site look in Firefox? You'd better find out!</font>
+                <a href="#">
+                    <font color="darkorange" size="2" face="Arial"><img src="arrow_r.gif">More...</font>
+                </a><br>
+                <font color="DarkOrange" face="Arial">Tips Newsletter</font>
+                <font face="Arial" size="2"><br>Sign up today & receive hot Webmaster Tips!</font>
+                <input type="text"><br>
+                <input type="image" src="submit.gif"><br>
+                <font face="arial" size="2">
+                    <input type="radio" name="radio">HTML
+                    <input type="radio" name="radio">Plain Text
+                </font>
+            </td>
+        </tr>
+
+        <tr height="190">
+            <td valign="top"><img src="EvaluateProduct.gif"><br>
+                <font size="2" face="Arial">Expand your customer<br> base with <b>HTML Toolbox</b>. Ensure continuous availability and quality service for online<br>customers. And, keep the lines open for those search engine spiders</font>
+            </td>
+            <td valign="top"><img src="OptimizeProduct.gif"><br>
+                <font size="2" face="Arial">Optimize your site with </font>
+                <a href="#">
+                    <font size="2" face="Arial">Search Engine Power Pack</font>
+                </a>
+                <font size="2" face="Arial"> to help choose the right keywords; generate correct titles & Meta tags; improve search engine ranking pages.</font><br>
+                <img src="arrow_r.gif">
+                <a href="#">
+                    <font size="2" color="darkorange" face="arial">More...</font>
+                </a>
+            </td>
+            <td valign="top"><img src="MonitorProduct.gif"><br>
+                <a href="#">
+                    <font face="Arial" size="2">Monitor</font>
+                </a>
+                <font face="Arial" size="2"> your website's performance every 15 minutes, 24/7, to make sure the server is up and customers continually<br>have easy access to your site</font><br>
+                <a href="#"><img src="arrow_r.gif">
+                    <font size="2" face="Arial" color="darkorange">More...</font>
+                </a>
+            </td>
+            <td valign="top" rowspan="2" bgcolor="lightblue"><img src="TryIt.gif"><br><img src="BuyIt.gif"><br>
+                <p>
+                    <font face="Arial" size="2">"Lots of tools will point out the errors in html code, but only <b>HTML Toolbox</b> will actually fix them for you! I have found HTML Toolbox to be a fast, easy, and risk-free way to ensure that my pages will look good in any browser"</font>
+                </p>
+                <p>
+                    <font size="2" face="Arial"><i>Greg Crowther</i><br><b>CoHO Realty and Science Songwriters' Association</b></font>
+                </p>
+                <p>
+                    <font color="darkorange" face="Arial"><b>SEE HOW YOUR PAGES ARE SEEN ...</b></font>
+                </p>
+            </td>
+        </tr>
+
+        <tr>
+            <td valign="top" colspan="3"><img src="HTMLCheckAndRepair.gif">
+                <font size="2" color="RoyalBlue" face="Arial"><b>Automatically find and repair </b></font><a href="#">
+                    <font color="RoyalBlue" face="Arial">HTML code errors </font>
+                </a>
+                <font color="RoyalBlue" face="Arial">with one quick click</font>
+                <p>
+                    <font color="RoyalBlue" face="Arial">HTML Check & Repair:</font>
+                    <font face="Arial" size="2"> discovers bad HTML tags and syntax that prevents browsers from processing your HTML -- and prevents visitors - both humans and spiders -- from reading your site. <b>HTML Toolbox</b> automatically fixes html problems upon request with one quick click.</font>
+                </p>
+                <p>
+                    <font face="Arial" color="RoyalBlue">Spell check:</font>
+                    <font face="Arial" size="2">automatically checks for spelling errors in 11 languages, or your customized dictionary, so that spelling errors don't block visitors</font>
+                </p>
+            </td>
+        </tr>
+
+    </table>
+</body>
+
+</html>
--- a/web-design/сайт/NetMechanic/OptimizeProduct.gif
+++ b/web-design/сайт/NetMechanic/OptimizeProduct.gif
--- a/web-design/сайт/NetMechanic/Submit.gif
+++ b/web-design/сайт/NetMechanic/Submit.gif
--- a/web-design/сайт/NetMechanic/TryIt.gif
+++ b/web-design/сайт/NetMechanic/TryIt.gif
--- a/web-design/сайт/NetMechanic/arrow_r.gif
+++ b/web-design/сайт/NetMechanic/arrow_r.gif
--- a/web-design/сайт/Sign
+++ b/web-design/сайт/Sign
--- a/web-design/сайт/WebCT.png
+++ b/web-design/сайт/WebCT.png
--- a/web-design/сайт/WebCT/WebCT.css
+++ b/web-design/сайт/WebCT/WebCT.css
@@ -0,0 +1,82 @@
+/* CSS Document */
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.tablitsa {
+    width: 768px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+p {
+    font-size: 13px;
+    font-family: Arial;
+}
+
+.niz {
+    font-family: Arial;
+    font-size: 13px;
+    color: #FFFFFF;
+    margin-right: 43px;
+}
+
+a {
+    color: #9E00EF;
+}
+
+.spisok {
+    width: 630px;
+    margin-left: 20px;
+}
+
+.littletable {
+    width: 630px;
+    margin-left: 62px;
+}
+
+h3 {
+    color: #88889A;
+    font-family: Arial;
+}
+
+.mylink {
+    font-size: 1pc;
+}
+
+.UpLink {
+    color: #9E00EF;
+    text-decoration: none;
+    font-size: 13px;
+    font-family: Arial;
+}
+
+.menu {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.menu li {
+    display: inline;
+    margin-right: 26px;
+}
+
+.MenuNiz {
+    list-style-image: url(images/arrow_matted.gif);
+    margin-left: 20px;
+    padding: 0;
+}
+
+.MenuNiz li {
+    float: left;
+}
+
+.WebCT {
+    color: #FFFFFF;
+    font-family: Arial;
+    font-size: 13px;
+}
--- a/web-design/сайт/WebCT/WebCT.html
+++ b/web-design/сайт/WebCT/WebCT.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Документ без названия</title>
+    <link href="WebCT.css" type="text/css" rel="stylesheet">
+</head>
+
+<body>
+    <div class="tablitsa">
+        <table width="768" cellspacing="0" cellpadding="0">
+            <tbody>
+                <tr>
+                    <td colspan="6" bgcolor="#4E13BB"><img src="images/webctlogo_matted_2.gif" width="258" height="61" alt="" /></td>
+                </tr>
+                <tr>
+                    <td><img src="images/navbar_r2_c2.gif" width="128" height="37" alt="" /></td>
+                    <td><img src="images/navbar_r2_c3.gif" width="129" height="37" alt="" /></td>
+                    <td><img src="images/navbar_r2_c4_f3.gif" width="128" height="37" alt="Customer Care" /></td>
+                    <td><img src="images/navbar_r2_c5.gif" width="128" height="37" alt="" /></td>
+                    <td><img src="images/navbar_r2_c6.gif" width="128" height="37" alt="" /></td>
+                    <td><img src="images/navbar_r2_c9.gif" width="127" height="37" alt="" /></td>
+                </tr>
+                <tr>
+                    <td height="24" colspan="6" bgcolor="#BCC0F4">
+                        <ul class="menu">
+                            <li><a href="#" class="UpLink">Support</a></li>
+                            <li><a href="#" class="UpLink">AskDrC</a></li>
+                            <li><a href="#" class="UpLink">e-Pack Help</a></li>
+                            <li><a href="#" class="UpLink">Access Code Help</a></li>
+                            <li><a href="#" class="UpLink">Documentation</a></li>
+                            <li><a href="#" class="UpLink">Downloads</a></li>
+                            <li><a href="#" class="UpLink">License keys</a></li>
+                            <li><a href="#" class="UpLink">Help!</a></li>
+                        </ul>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="6">
+                        <div class="littletable">
+                            <table align="center" width="630">
+                                <tbody>
+                                    <tr>
+                                        <td colspan="2">
+                                            <h3>&nbsp;</h3>
+                                            <h3>&nbsp;</h3>
+                                            <h3>Subscribe to The WebCT Newsletter</h3>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td colspan="2">&nbsp;</td>
+                                    </tr>
+                                    <tr>
+                                        <td width="73" height="57"><img src="images/faculty_big.gif" width="73" height="57" alt="" /></td>
+                                        <td>
+                                            <p>The webCT Newsletter is a FREE monthly publication which will keep you informed of the latest WebCT company, product and customer news</p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>&nbsp;</td>
+                                        <td>&nbsp;</td>
+                                    </tr>
+                                    <tr>
+                                        <td colspan="2">
+                                            <div class="spisok">
+                                                <ul type="disc">
+                                                    <li>Create or update your profile</li>
+                                                    <li>Choose the email format that you prefer</li>
+                                                    <li>Stay on top of the News and Events surrounding WebCt, the world's most popular course management software!!</li>
+                                                </ul>
+                                            </div>
+                                            <p align="center">&nbsp;</p>
+                                            <p align="center">&nbsp;</p>
+                                            <p align="center"><a href="#" class="mylink">Subscribe today</a></p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td colspan="2">&nbsp;</td>
+                                    </tr>
+                                    <tr>
+                                        <td colspan="2">
+                                            <p><strong>Newsletter Archive</strong></p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td colspan="2">Looking for a particular topic or just interested in reading a past issue? Visit our <a href="#">newsleatter</a> archive for previous issues of the Newsletter<br>
+                                            <br>
+                                            <br>
+                                            <br>
+                                            <br></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <td height="24" colspan="6" bgcolor="#3E22AD">
+                        <ul class="MenuNiz">
+                            <li><a class="niz" href="#">Contact us</a></li>
+                            <li><a class="niz" href="#">Terms of service</a></li>
+                            <li><a href="#" class="niz">Privacy policy</a></li>
+                            <li><a href="#" class="niz">Employment</a></li>
+                            <li><a href="#" class="niz">Site Index</a></li>
+                        </ul>
+                        <div class="WebCT">&copy;2001 WebCT</div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+</body>
+
+</html>
--- a/web-design/сайт/WebCT/images/Thumbs.db
+++ b/web-design/сайт/WebCT/images/Thumbs.db
--- a/web-design/сайт/WebCT/images/arrow_matted.gif
+++ b/web-design/сайт/WebCT/images/arrow_matted.gif
--- a/web-design/сайт/WebCT/images/faculty_big.gif
+++ b/web-design/сайт/WebCT/images/faculty_big.gif
--- a/web-design/сайт/WebCT/images/login_blue_121_21.gif
+++ b/web-design/сайт/WebCT/images/login_blue_121_21.gif
--- a/web-design/сайт/WebCT/images/navbar_r2_c2.gif
+++ b/web-design/сайт/WebCT/images/navbar_r2_c2.gif
--- a/web-design/сайт/WebCT/images/navbar_r2_c3.gif
+++ b/web-design/сайт/WebCT/images/navbar_r2_c3.gif
--- a/web-design/сайт/WebCT/images/navbar_r2_c4_f3.gif
+++ b/web-design/сайт/WebCT/images/navbar_r2_c4_f3.gif
--- a/web-design/сайт/WebCT/images/navbar_r2_c5.gif
+++ b/web-design/сайт/WebCT/images/navbar_r2_c5.gif
--- a/web-design/сайт/WebCT/images/navbar_r2_c6.gif
+++ b/web-design/сайт/WebCT/images/navbar_r2_c6.gif
--- a/web-design/сайт/WebCT/images/navbar_r2_c9.gif
+++ b/web-design/сайт/WebCT/images/navbar_r2_c9.gif
--- a/web-design/сайт/WebCT/images/search_57_17.gif
+++ b/web-design/сайт/WebCT/images/search_57_17.gif
--- a/web-design/сайт/WebCT/images/shim.gif
+++ b/web-design/сайт/WebCT/images/shim.gif
--- a/web-design/сайт/WebCT/images/webct.jpg
+++ b/web-design/сайт/WebCT/images/webct.jpg
--- a/web-design/сайт/WebCT/images/webct_table.jpg
+++ b/web-design/сайт/WebCT/images/webct_table.jpg
--- a/web-design/сайт/WebCT/images/webctlogo_matted_2.gif
+++ b/web-design/сайт/WebCT/images/webctlogo_matted_2.gif
--- a/web-design/сайт/WebCTreg.png
+++ b/web-design/сайт/WebCTreg.png
--- a/web-design/сайт/WebCTreg/WebCTreg.html
+++ b/web-design/сайт/WebCTreg/WebCTreg.html
@@ -0,0 +1,204 @@
+<html>
+
+<head>
+    <title>WebCT регистрация</title>
+    <style>
+        *{margin:0;padding:0;}
+div {width:679; height:600px; margin:0 auto;}
+</style>
+</head>
+
+<body>
+    <div>
+        <table height="600" width="674" border="0" cellspacing="0" sellpadding="0">
+
+            <tr>
+                <td width="120" rowspan="22"></td>
+                <td colspan="2">
+                    <font size="2"><br><br>The information requested below will help us tailor our communications to meet your needs. Thank you for you interest in WebCT`s software and services.<br><br>All fields are required</font>
+                </td>
+                <td width="120" rowspan="22"></td>
+            </tr>
+
+            <tr>
+                <td bgcolor="skyblue">
+                    <font size="2">Contact information</font>
+                </td>
+                <td></td>
+            </tr>
+
+            <tr>
+                <td colspan="2">
+                    <hr color="skyblue">
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <font size="2">First Name:</font>
+                </td>
+                <td><input type="text" size="24"></td>
+            </tr>
+
+            <tr>
+                <td>
+                    <font size="2">Last Name</font>
+                </td>
+                <td><input type="text" size="24"></td>
+            </tr>
+
+            <tr>
+                <td>
+                    <font size="2">E-mail</font>
+                </td>
+                <td><input type="text" size="24" value="e-mail address"></td>
+            </tr>
+
+            <tr>
+                <td>
+                    <font size="2">Confirm E-Mail</font>
+                </td>
+                <td><input type="text" size="24" value="e-mail address"></td>
+            </tr>
+
+            <tr>
+                <td>
+                    <font size="2">Preferred Email Format:</font>
+                </td>
+                <td>
+                    <select>
+                        <option>Choose one</option>
+                    </select>
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <font size="2">City</font>
+                </td>
+                <td><input type="text" size="24"></td>
+            </tr>
+
+            <tr>
+                <td>
+                    <font size="2">State or Province:</font>
+                </td>
+                <td>
+                    <select>
+                        <option>Choose State or Province</option>
+                    </select>
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <font size="2">Country</font>
+                </td>
+                <td>
+                    <select>
+                        <option>- Select a Country -------------------------------</option>
+                    </select>
+                </td>
+            </tr>
+
+            <tr>
+                <td bgcolor="skyblue">
+                    <font size="2">Institution Information</font>
+                </td>
+                <td></td>
+            </tr>
+
+            <tr>
+                <td colspan="2">
+                    <hr color="skyblue">
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <font size="2">Job Title:</font>
+                </td>
+                <td><input type="text" size="24"></td>
+            </tr>
+
+            <tr>
+                <td>
+                    <font size="2">Role:</font>
+                </td>
+                <td>
+                    <select>
+                        <option>Select Primary Role</option>
+                    </select>
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <font size="2">Name of Institution</font>
+                </td>
+                <td><input type="text" size="24"></td>
+            </tr>
+
+            <tr>
+                <td>
+                    <font size="2">Type of Institution</font>
+                </td>
+                <td>
+                    <select>
+                        <option>
+                            <font size="2">Select Institution Type</font>
+                        </option>
+                    </select>
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <font size="2">Does your institution currently license WebCT?</font>
+                </td>
+                <td>
+                    <select>
+                        <option>Choose one</option>
+                    </select>
+                </td>
+            </tr>
+
+            <tr>
+                <td colspan="2">
+                    <hr color="grey">
+                </td>
+            </tr>
+
+            <tr>
+                <td colspan="2">
+                    <input type="checkbox">
+                    <font size="2">I would like to receive the mounthly WebCT Newsletter</font><br>
+                    <input type="checkbox">
+                    <font size="2">I am interested in receiving periodic information about WebCT events, promotions and products</font>
+                </td>
+            </tr>
+
+            <tr>
+                <td align="center" colspan="2"><input type="submit" value="Submit"></td>
+            </tr>
+
+            <tr>
+                <td colspan="2">
+                    <font size="2">To ensure that messages from WebCT are delivered to your invox, please add email@webct.rsc02.com to your address book, or ask your IT department to add us to your "approved sender" list.<br><br>
+                        WebCT is commited to privacy. For information, read our </font><a href="#">
+                        <font size="2">Privacy Policy</font>
+                    </a>
+                </td>
+            </tr>
+
+            <tr>
+                <td align="center" colspan="4" bgcolor="navy">
+                    <font color="white" size="2">Contact Us | Tems of Service | Privacy Policy | Employment | Accessibillity | Site Map</font>
+                </td>
+            </tr>
+
+        </table>
+    </div>
+</body>
+
+</html>
--- a/web-design/сайт/Zion
+++ b/web-design/сайт/Zion
--- a/web-design/сайт/Zion
+++ b/web-design/сайт/Zion
@@ -0,0 +1,213 @@
+@charset "utf-8";
+
+/* CSS Document */
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.FL {
+    float: left;
+}
+
+.FR {
+    float: right;
+}
+
+a {
+    color: #5d0e0e;
+}
+
+.containter {
+    width: 760px;
+    height: 940px;
+    margin: 0 auto;
+}
+
+.top {
+    background-image: url(images/img1.jpg);
+    width: 760px;
+    height: 120px;
+}
+
+.content {
+    width: 760px;
+    height: 700px;
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+.zion {
+    color: white;
+    padding-top: 100px;
+    padding-left: 10px;
+    font-family: Arial;
+    font-weight: bold;
+}
+
+.menu {
+    height: 50px;
+    width: 760px;
+    background-color: #3A3A3A;
+    border-bottom: 4px solid #5d0e0e;
+}
+
+.menu_list {
+    list-style-type: none;
+    margin-top: 23px;
+}
+
+.menu_list li {
+    display: inline;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.menu_list li a {
+    color: white;
+    text-decoration: none;
+    font-family: Arial;
+    font-size: 13px;
+}
+
+.blog {
+    background-color: #5d0e0e;
+}
+
+.left_block {
+    width: 350px;
+}
+
+.middle_block {
+    margin-left: 370px;
+    margin-right: 195px;
+}
+
+.right_block {
+    width: 180px;
+}
+
+.last_line {
+    width: 760px;
+    border-bottom: 3px solid #5d0e0e;
+}
+
+.copyright {
+    margin-top: 15px;
+    margin-left: 15px;
+    font-size: 11px;
+    color: grey;
+    font-family: Arial;
+}
+
+.square {
+    margin-top: 7px;
+    margin-right: 5px;
+}
+
+.title {
+    font-family: Arial;
+}
+
+.posted_block {
+    border: 1px solid black;
+    background-color: #5d0e0e;
+    height: 20px;
+}
+
+.posted_text {
+    color: white;
+    font-family: Arial;
+    font-size: 9px;
+    margin-top: 5px;
+    margin-left: 10px;
+}
+
+.post {
+    background-color: #f2f2f2;
+    height: auto;
+    border-bottom: 3px solid #5d0e0e;
+    margin-bottom: 5px;
+}
+
+.red_link {
+    color: #fc0036;
+    text-decoration: none;
+}
+
+.post_content {
+    margin-left: 17px;
+    margin-right: 17px;
+    padding-top: 25px;
+    margin-bottom: 30px;
+    color: #666666;
+}
+
+.filed {
+    color: #666666;
+    margin-left: 7px;
+    margin-bottom: 10px;
+}
+
+.ordered_list {
+    margin-left: 35px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.blockquote {
+    margin-left: 40px;
+}
+
+.title_block {
+    border: 1px solid black;
+    background-color: #5d0e0e;
+    height: 30px;
+}
+
+.title_block_text {
+    color: white;
+    font-family: Arial;
+    margin-top: 6px;
+    margin-left: 10px;
+}
+
+.search_field {
+    width: 120px;
+    height: 20px;
+    background-color: #5d0e0e;
+}
+
+.search_button {
+    height: 22px;
+    width: 30px;
+    background-color: #5d0e0e;
+    color: white;
+    font-size: 10px;
+}
+
+.list {
+    padding-top: 15px;
+    margin-left: 15px;
+    margin-bottom: 10px;
+    list-style-type: none
+}
+
+.list li {
+    padding-bottom: 1px;
+    border-bottom: 1px dotted #5d0e0e;
+    margin-bottom: 5px;
+}
+
+.list li a {
+    text-decoration: none;
+}
+
+.days {
+    color: #999;
+    font-family: Arial;
+    font-size: 15px;
+    margin-left: 7px;
+}
--- a/web-design/сайт/Zion
+++ b/web-design/сайт/Zion
@@ -0,0 +1,140 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Документ без названия</title>
+    <link href="Zion%20Narrows.css" rel="stylesheet" type="text/css">
+</head>
+
+<body>
+    <div class="containter">
+        <div class="top">
+            <p class="zion">ZION NARROWS BY FREE CSS TEMPLATES</p>
+        </div>
+        <div class="menu">
+            <ul class="menu_list FR">
+                <li class="blog"><a href="3">MY BLOG</a></li>
+                <li><a href="3">MY PHOTOS</a></li>
+                <li><a href="3">MY FAVORITES</a></li>
+                <li><a href="3">ABOUT ME</a></li>
+                <li><a href="3">CONTACT ME</a></li>
+            </ul>
+        </div>
+        <div class="content">
+            <div class="left_block FL">
+                <img src="images/img9.gif" width="7" height="7" class="FL square">
+                <h3 class="title">WELCOME TO ZION NARROWS!</h3>
+                <div class="posted_block">
+                    <p class="posted_text">POSTED ON JANUARY 1ST, 2007 BT AUTHOR</p>
+                </div>
+                <div class="post">
+                    <p class="post_content"><strong>Zion Narrows</strong> is a free template from <a href="#">Free CSS Templates</a> released under a <a href="#">Creative Commons Attribution 2.5 License</a>. Tge header photo is from <a href="#">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to <a href="#" class="red_link">my site</a> in some way. Enjoy :)</p>
+                    <p class="filed">Filed under <a href="#">Uncategorized</a> | <a href="#">1 Comment »</a></p>
+                </div>
+
+                <img src="images/img9.gif" width="7" height="7" class="FL square">
+                <h3 class="title">SAMPLE TAGS</h3>
+                <div class="posted_block">
+                    <p class="posted_text">POSTED ON JANUARY 1ST, 2007 BT AUTHOR</p>
+                </div>
+                <div class="post">
+                    <div class="post_content">
+                        An ordered list:
+                        <ol class="ordered_list">
+                            <li><a href="#">Nullam et orci in erat viverra ornare.</a></li>
+                            <li><a href="#">Suspendisse quis gravida massa felis.</a></li>
+                            <li><a href="#">Curabitur malesuada turpis ncec ante.</a></li>
+                        </ol>
+                        A blockquote:
+                        <p class="blockquote"><sup>&bdquo;</sup>Et pulvinar pede ligula a sapien. Donec fermentum condimentum nisi. Proin iaculis mauris od lorem viverra molestie. Duis vel orci. Name consequat. Morbi nec lacus.<sup>&bdquo;</sup></p>
+                    </div>
+                    <p class="filed">Filed under <a href="#">Uncategorized</a> | <a href="#">1 Comment »</a></p>
+                </div>
+            </div>
+            <div class="right_block FR">
+                <div class="title_block">
+                    <p class="title_block_text">ARCHIVES</p>
+                </div>
+                <div class="post">
+                    <ul class="list">
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">February</a><span class="days">(7)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">January 2007</a><span class="days">(31)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">December 2006</a><span class="days">(31)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">November 2006</a><span class="days">(30)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">October 2006</a><span class="days">(31)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">September 2006</a><span class="days">(30)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">August 2006</a><span class="days">(31)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">July 2006</a><span class="days">(31)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">June 2006</a><span class="days">(30)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">May 2006</a><span class="days">(31)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">April 2006</a><span class="days">(30)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">March 2006</a><span class="days">(31)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">February 2006</a><span class="days">(28)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">January 2006</a><span class="days">(31)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">December 2005</a><span class="days">(31)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">November 2005</a><span class="days">(30)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">October 2005</a><span class="days">(31)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">September 2005</a><span class="days">(30)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">August 2005</a><span class="days">(31)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">July 2005</a><span class="days">(31)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">June 2005</a><span class="days">(30)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">May 2005</a><span class="days">(31)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">April 2005</a><span class="days">(30)</span></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">March 2005</a><span class="days">(31)</span></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="middle_block">
+                <div class="title_block">
+                    <p class="title_block_text">SEARCH</p>
+                </div>
+                <div class="post">
+                    <div class="post_content">
+                        <input type="text" class="search_field">
+                        <input type="button" value="GO" class="search_button">
+                    </div>
+                </div>
+
+                <div class="title_block">
+                    <p class="title_block_text">CATEGORIES</p>
+                </div>
+                <div class="post">
+                    <ul class="list">
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">Quisque vestibulum</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">Sed a nisl a lacus</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">Quisque sagittis</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">Etiam volutpat</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">In aliquet hendrerit</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">Suspendisse iaculis</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">Nam vel risus at</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">Praesent sit amet</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">Quisque vestibulum</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">In aliquet hendererit</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">Suspendisse iaculis</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">Nam vel risus at</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">Praesent sit amet</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">Quisque vestibulum</a></li>
+                    </ul>
+                </div>
+
+                <div class="title_block">
+                    <p class="title_block_text">BLOGROLL</p>
+                </div>
+                <div class="post">
+                    <ul class="list">
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">AnotherFriendlySite.net</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">CoolSite.com</a></li>
+                        <li><img src="images/img8.gif" width="5" height="9"> <a href="#">MyBestFriend.com</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="last_line"></div>
+            <p class="copyright">Copyright &copy; 2006 Zion Narrows. Designed by <a href="#">Free CSS Templates</a></p>
+        </div>
+    </div>
+</body>
+
+</html>
--- a/web-design/сайт/Zion
+++ b/web-design/сайт/Zion
--- a/web-design/сайт/Zion
+++ b/web-design/сайт/Zion
--- a/web-design/сайт/Zion
+++ b/web-design/сайт/Zion
--- a/web-design/сайт/adios.png
+++ b/web-design/сайт/adios.png
--- a/Show More
+++ b/Show More