Add web design files
46
web-design/Занятие_6/6/6.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<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     Products     Tips     Login/Help     Site Map     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...</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>
|
||||
</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></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>
|
||||
BIN
web-design/Занятие_6/6/BrowserCompatibility.gif
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
web-design/Занятие_6/6/BuyIt.gif
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
web-design/Занятие_6/6/DontKnow.gif
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
web-design/Занятие_6/6/EvaluateProduct.gif
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
web-design/Занятие_6/6/EvaluateSite.jpg
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
web-design/Занятие_6/6/HTMLCheckAndRepair.gif
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
web-design/Занятие_6/6/KeynoteNetMech.gif
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
web-design/Занятие_6/6/KeynoteNetMechanic.jpg
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
web-design/Занятие_6/6/LinkCheck.gif
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
web-design/Занятие_6/6/MenuBlock.jpg
Normal file
|
After Width: | Height: | Size: 9.1 KiB |
BIN
web-design/Занятие_6/6/MonitorProduct.gif
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
web-design/Занятие_6/6/NarrowTipsBox.gif
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
web-design/Занятие_6/6/OptimizeProduct.gif
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
web-design/Занятие_6/6/ReadyToBuy.gif
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
web-design/Занятие_6/6/ShortFade.jpg
Normal file
|
After Width: | Height: | Size: 859 B |
BIN
web-design/Занятие_6/6/Submit.gif
Normal file
|
After Width: | Height: | Size: 748 B |
BIN
web-design/Занятие_6/6/Thumbs.db
Normal file
BIN
web-design/Занятие_6/6/TryIt.gif
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
web-design/Занятие_6/6/arrow_r.gif
Normal file
|
After Width: | Height: | Size: 59 B |
BIN
web-design/Занятие_6/6/lab_table.JPG
Normal file
|
After Width: | Height: | Size: 140 KiB |
285
web-design/Занятие_6/6/styles.css
Normal file
@@ -0,0 +1,285 @@
|
||||
BODY {
|
||||
FONT-SIZE: 11px; FONT-FAMILY: verdana; BACKGROUND-COLOR: #eff3f7
|
||||
}
|
||||
{
|
||||
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
|
||||
}
|
||||
.submit {
|
||||
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BACKGROUND-IMAGE: url(images/Submit.jpg); BORDER-LEFT: 0px; WIDTH: 50px; BORDER-BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 19px
|
||||
}
|
||||
H1 {
|
||||
FONT-SIZE: 14px; COLOR: #003300
|
||||
}
|
||||
OL {
|
||||
PADDING-LEFT: 20px; FONT-SIZE: 11px; FONT-FAMILY: verdana
|
||||
}
|
||||
UL {
|
||||
PADDING-LEFT: 20px; FONT-SIZE: 11px; FONT-FAMILY: verdana
|
||||
}
|
||||
A:link {
|
||||
FONT-WEIGHT: bold; COLOR: #6a88a4
|
||||
}
|
||||
TD.MenuSystem DIV {
|
||||
FLOAT: left; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: #bdc7d6
|
||||
}
|
||||
TD.Menusystem DIV P {
|
||||
PADDING-TOP: 5px; TEXT-ALIGN: center
|
||||
}
|
||||
TD.Menusystem DIV P A {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: white; TEXT-DECORATION: none
|
||||
}
|
||||
.cHome {
|
||||
BACKGROUND-IMAGE: url(images/Home_t.jpg)
|
||||
}
|
||||
.cSiteMap {
|
||||
BACKGROUND-IMAGE: url(images/SiteMap_t.jpg)
|
||||
}
|
||||
.cLogin {
|
||||
BACKGROUND-IMAGE: url(images/Login_t.jpg)
|
||||
}
|
||||
.cTips {
|
||||
BACKGROUND-IMAGE: url(images/Tips_t.jpg)
|
||||
}
|
||||
.cProducts {
|
||||
BACKGROUND-IMAGE: url(images/Products_t.jpg)
|
||||
}
|
||||
.cAbout {
|
||||
BACKGROUND-IMAGE: url(images/AboutUs_t.jpg)
|
||||
}
|
||||
BODY#products DIV#MenuProducts {
|
||||
BACKGROUND-IMAGE: url(images/Products_ton.jpg)
|
||||
}
|
||||
BODY#about DIV#MenuAbout {
|
||||
BACKGROUND-IMAGE: url(images/AboutUs_ton.jpg)
|
||||
}
|
||||
BODY#tips DIV#MenuTips {
|
||||
BACKGROUND-IMAGE: url(images/Tips_ton.jpg)
|
||||
}
|
||||
BODY#login DIV#MenuLogin {
|
||||
BACKGROUND-IMAGE: url(images/Login_ton.jpg)
|
||||
}
|
||||
BODY#sitemap DIV#MenuSiteMap {
|
||||
BACKGROUND-IMAGE: url(images/SiteMap_ton.jpg)
|
||||
}
|
||||
BODY#home DIV#MenuHome {
|
||||
BACKGROUND-IMAGE: url(images/Home_ton.jpg)
|
||||
}
|
||||
.logo {
|
||||
WIDTH: 650px
|
||||
}
|
||||
.header {
|
||||
VERTICAL-ALIGN: top; WIDTH: 450px; BACKGROUND-COLOR: white
|
||||
}
|
||||
.serviceWide1 {
|
||||
FLOAT: left; WIDTH: 150px
|
||||
}
|
||||
.service1 {
|
||||
FLOAT: left; WIDTH: 150px
|
||||
}
|
||||
.hold {
|
||||
FONT-SIZE: 11px; FLOAT: left; WIDTH: 215px; BACKGROUND-COLOR: white
|
||||
}
|
||||
.price {
|
||||
FLOAT: left; WIDTH: 225px
|
||||
}
|
||||
.serviceWide {
|
||||
FLOAT: left; BACKGROUND-IMAGE: url(images/FadeLineWide.gif); WIDTH: 165px; BACKGROUND-REPEAT: no-repeat
|
||||
}
|
||||
.service {
|
||||
FLOAT: left; BACKGROUND-IMAGE: url(images/FadeLine.gif); WIDTH: 150px; BACKGROUND-REPEAT: no-repeat
|
||||
}
|
||||
.testimonial {
|
||||
BACKGROUND-POSITION: 50% top; VERTICAL-ALIGN: top; WIDTH: 200px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 320px
|
||||
}
|
||||
.fadeBar {
|
||||
BACKGROUND-POSITION: 50% top; FLOAT: left; WIDTH: 200px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 210px; TEXT-ALIGN: center
|
||||
}
|
||||
TABLE.sidebarTable P {
|
||||
PADDING-RIGHT: 8px; MARGIN-TOP: 2px; PADDING-LEFT: 6px; FONT-SIZE: 11px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 2px; PADDING-TOP: 3px; FONT-FAMILY: verdana
|
||||
}
|
||||
TABLE.content P {
|
||||
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; FONT-FAMILY: verdana
|
||||
}
|
||||
TABLE.sidebarTable H2 {
|
||||
PADDING-RIGHT: 5px; MARGIN-TOP: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 14px; MARGIN-BOTTOM: -5px; PADDING-BOTTOM: 0px; COLOR: #ff511b; PADDING-TOP: 0px; FONT-FAMILY: Arial
|
||||
}
|
||||
.content P SPAN {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #6a88a4
|
||||
}
|
||||
SPAN.cost {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #f46555
|
||||
}
|
||||
TABLE.content H2 {
|
||||
PADDING-RIGHT: 5px; MARGIN-TOP: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; COLOR: #ff511b; PADDING-TOP: 0px; FONT-FAMILY: arial
|
||||
}
|
||||
TABLE.content H3 {
|
||||
PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #6a88a4
|
||||
}
|
||||
FORM DIV P {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #6a88a4
|
||||
}
|
||||
DIV.price P {
|
||||
FONT-WEIGHT: normal; COLOR: black
|
||||
}
|
||||
.endForm {
|
||||
MARGIN-LEFT: 10px; COLOR: black
|
||||
}
|
||||
.terms {
|
||||
FONT-WEIGHT: bold; WIDTH: 95%; BACKGROUND-COLOR: #eff3f7
|
||||
}
|
||||
P.pinfo {
|
||||
MARGIN-LEFT: 20px
|
||||
}
|
||||
.content H1 {
|
||||
PADDING-LEFT: 5px
|
||||
}
|
||||
.content H1 SPAN {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 16px; MARGIN-LEFT: 5px; COLOR: red
|
||||
}
|
||||
TABLE.content H2 A {
|
||||
PADDING-RIGHT: 5px; MARGIN-TOP: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; COLOR: #ff511b; PADDING-TOP: 0px; FONT-FAMILY: arial
|
||||
}
|
||||
DIV.anchors A {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 25px; COLOR: #6a88a4; TEXT-DECORATION: underline
|
||||
}
|
||||
A.TryIt {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #ff511b; FONT-FAMILY: Arial
|
||||
}
|
||||
A.TryIt:link {
|
||||
COLOR: #ff511b; TEXT-DECORATION: underline
|
||||
}
|
||||
A.TryIt:visited {
|
||||
COLOR: #ff511b; TEXT-DECORATION: underline
|
||||
}
|
||||
A.TryIt:unknown {
|
||||
COLOR: #355070; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: underline
|
||||
}
|
||||
A.TryIt:hover {
|
||||
COLOR: #355070; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: underline
|
||||
}
|
||||
A.TryIt:active {
|
||||
COLOR: #ff511b; TEXT-DECORATION: underline
|
||||
}
|
||||
A.linkText {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #ff511b; FONT-FAMILY: Arial
|
||||
}
|
||||
A.linkText:link {
|
||||
COLOR: #ff511b; TEXT-DECORATION: underline
|
||||
}
|
||||
A.linkText:visited {
|
||||
COLOR: #ff511b; TEXT-DECORATION: underline
|
||||
}
|
||||
A.linkText:unknown {
|
||||
COLOR: #355070; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: underline
|
||||
}
|
||||
A.linkText:hover {
|
||||
COLOR: #355070; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: underline
|
||||
}
|
||||
A.linkText:active {
|
||||
COLOR: #ff511b; TEXT-DECORATION: underline
|
||||
}
|
||||
A.mapLink {
|
||||
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 11px; PADDING-BOTTOM: 2px; COLOR: #355070; PADDING-TOP: 2px; TEXT-DECORATION: underline
|
||||
}
|
||||
A.mapLink:link {
|
||||
TEXT-DECORATION: underline
|
||||
}
|
||||
A.mapLink:visited {
|
||||
TEXT-DECORATION: underline
|
||||
}
|
||||
A.mapLink:unknown {
|
||||
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: underline
|
||||
}
|
||||
A.mapLink:hover {
|
||||
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: underline
|
||||
}
|
||||
A.mapLink:active {
|
||||
TEXT-DECORATION: underline
|
||||
}
|
||||
.footer A:link {
|
||||
FONT-SIZE: 10px; COLOR: #355070; TEXT-DECORATION: none
|
||||
}
|
||||
.footer A:visited {
|
||||
FONT-SIZE: 10px; COLOR: #355070; TEXT-DECORATION: none
|
||||
}
|
||||
.footer A:unknown {
|
||||
FONT-SIZE: 10px; COLOR: #355070; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: none
|
||||
}
|
||||
.footer A:hover {
|
||||
FONT-SIZE: 10px; COLOR: #355070; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: none
|
||||
}
|
||||
.footer A:active {
|
||||
FONT-SIZE: 10px; COLOR: #355070; TEXT-DECORATION: none
|
||||
}
|
||||
A.subTitle:link {
|
||||
PADDING-RIGHT: 5px; MARGIN-TOP: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 5px; COLOR: #ff511b; PADDING-TOP: 5px; TEXT-DECORATION: none
|
||||
}
|
||||
A.softlink2:link {
|
||||
COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.noline2:visited {
|
||||
COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.softlink2:hover {
|
||||
COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.noline2:active {
|
||||
COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.softlink3:link {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #6a88a4; TEXT-DECORATION: none
|
||||
}
|
||||
A.noline3:visited {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #6a88a4; TEXT-DECORATION: none
|
||||
}
|
||||
A.softlink3:hover {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #6a88a4; TEXT-DECORATION: none
|
||||
}
|
||||
A.noline3:active {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #6a88a4; TEXT-DECORATION: none
|
||||
}
|
||||
A.softlink4:link {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.noline4:visited {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.softlink4:hover {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.noline4:active {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
DIV.anchors A:link {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 25px; COLOR: #6a88a4; TEXT-DECORATION: underline
|
||||
}
|
||||
.footer {
|
||||
BORDER-TOP: #6b8aa5 4px solid; WIDTH: 650px; HEIGHT: 120px; BACKGROUND-COLOR: white
|
||||
}
|
||||
.footerContainer1 {
|
||||
FLOAT: left; WIDTH: 170px; HEIGHT: 100px
|
||||
}
|
||||
.footerContainer2 {
|
||||
FLOAT: left; WIDTH: 478px; HEIGHT: 100px
|
||||
}
|
||||
.copyright {
|
||||
FONT-SIZE: 9px; COLOR: #6a88a4
|
||||
}
|
||||
.placeholder {
|
||||
WIDTH: 650px; HEIGHT: 25px; BACKGROUND-COLOR: #eff3ff
|
||||
}
|
||||
#overview {
|
||||
COLOR: #ff511b
|
||||
}
|
||||
.bigList {
|
||||
FONT-SIZE: 12px; PADDING-TOP: 5px
|
||||
}
|
||||
DL {
|
||||
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; font-famiy: verdana
|
||||
}
|
||||
DT {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-TOP: 5px; FONT-FAMILY: verdana
|
||||
}
|
||||
DD {
|
||||
FONT-SIZE: 11px; PADDING-BOTTOM: 10px; PADDING-TOP: 5px; FONT-FAMILY: verdana
|
||||
}
|
||||
BIN
web-design/Занятие_6/lab_table.JPG
Normal file
|
After Width: | Height: | Size: 140 KiB |
BIN
web-design/Занятие_6/table/BrowserCompatibility.gif
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
web-design/Занятие_6/table/BuyIt.gif
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
web-design/Занятие_6/table/DontKnow.gif
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
web-design/Занятие_6/table/EvaluateProduct.gif
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
web-design/Занятие_6/table/EvaluateSite.jpg
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
web-design/Занятие_6/table/HTMLCheckAndRepair.gif
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
web-design/Занятие_6/table/KeynoteNetMech.gif
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
web-design/Занятие_6/table/KeynoteNetMechanic.jpg
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
web-design/Занятие_6/table/LinkCheck.gif
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
web-design/Занятие_6/table/MenuBlock.jpg
Normal file
|
After Width: | Height: | Size: 9.1 KiB |
BIN
web-design/Занятие_6/table/MonitorProduct.gif
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
web-design/Занятие_6/table/NarrowTipsBox.gif
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
web-design/Занятие_6/table/OptimizeProduct.gif
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
web-design/Занятие_6/table/ReadyToBuy.gif
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
web-design/Занятие_6/table/ShortFade.jpg
Normal file
|
After Width: | Height: | Size: 859 B |
BIN
web-design/Занятие_6/table/Submit.gif
Normal file
|
After Width: | Height: | Size: 748 B |
BIN
web-design/Занятие_6/table/TryIt.gif
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
web-design/Занятие_6/table/arrow_r.gif
Normal file
|
After Width: | Height: | Size: 59 B |
285
web-design/Занятие_6/table/styles.css
Normal file
@@ -0,0 +1,285 @@
|
||||
BODY {
|
||||
FONT-SIZE: 11px; FONT-FAMILY: verdana; BACKGROUND-COLOR: #eff3f7
|
||||
}
|
||||
{
|
||||
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
|
||||
}
|
||||
.submit {
|
||||
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BACKGROUND-IMAGE: url(images/Submit.jpg); BORDER-LEFT: 0px; WIDTH: 50px; BORDER-BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 19px
|
||||
}
|
||||
H1 {
|
||||
FONT-SIZE: 14px; COLOR: #003300
|
||||
}
|
||||
OL {
|
||||
PADDING-LEFT: 20px; FONT-SIZE: 11px; FONT-FAMILY: verdana
|
||||
}
|
||||
UL {
|
||||
PADDING-LEFT: 20px; FONT-SIZE: 11px; FONT-FAMILY: verdana
|
||||
}
|
||||
A:link {
|
||||
FONT-WEIGHT: bold; COLOR: #6a88a4
|
||||
}
|
||||
TD.MenuSystem DIV {
|
||||
FLOAT: left; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: #bdc7d6
|
||||
}
|
||||
TD.Menusystem DIV P {
|
||||
PADDING-TOP: 5px; TEXT-ALIGN: center
|
||||
}
|
||||
TD.Menusystem DIV P A {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: white; TEXT-DECORATION: none
|
||||
}
|
||||
.cHome {
|
||||
BACKGROUND-IMAGE: url(images/Home_t.jpg)
|
||||
}
|
||||
.cSiteMap {
|
||||
BACKGROUND-IMAGE: url(images/SiteMap_t.jpg)
|
||||
}
|
||||
.cLogin {
|
||||
BACKGROUND-IMAGE: url(images/Login_t.jpg)
|
||||
}
|
||||
.cTips {
|
||||
BACKGROUND-IMAGE: url(images/Tips_t.jpg)
|
||||
}
|
||||
.cProducts {
|
||||
BACKGROUND-IMAGE: url(images/Products_t.jpg)
|
||||
}
|
||||
.cAbout {
|
||||
BACKGROUND-IMAGE: url(images/AboutUs_t.jpg)
|
||||
}
|
||||
BODY#products DIV#MenuProducts {
|
||||
BACKGROUND-IMAGE: url(images/Products_ton.jpg)
|
||||
}
|
||||
BODY#about DIV#MenuAbout {
|
||||
BACKGROUND-IMAGE: url(images/AboutUs_ton.jpg)
|
||||
}
|
||||
BODY#tips DIV#MenuTips {
|
||||
BACKGROUND-IMAGE: url(images/Tips_ton.jpg)
|
||||
}
|
||||
BODY#login DIV#MenuLogin {
|
||||
BACKGROUND-IMAGE: url(images/Login_ton.jpg)
|
||||
}
|
||||
BODY#sitemap DIV#MenuSiteMap {
|
||||
BACKGROUND-IMAGE: url(images/SiteMap_ton.jpg)
|
||||
}
|
||||
BODY#home DIV#MenuHome {
|
||||
BACKGROUND-IMAGE: url(images/Home_ton.jpg)
|
||||
}
|
||||
.logo {
|
||||
WIDTH: 650px
|
||||
}
|
||||
.header {
|
||||
VERTICAL-ALIGN: top; WIDTH: 450px; BACKGROUND-COLOR: white
|
||||
}
|
||||
.serviceWide1 {
|
||||
FLOAT: left; WIDTH: 150px
|
||||
}
|
||||
.service1 {
|
||||
FLOAT: left; WIDTH: 150px
|
||||
}
|
||||
.hold {
|
||||
FONT-SIZE: 11px; FLOAT: left; WIDTH: 215px; BACKGROUND-COLOR: white
|
||||
}
|
||||
.price {
|
||||
FLOAT: left; WIDTH: 225px
|
||||
}
|
||||
.serviceWide {
|
||||
FLOAT: left; BACKGROUND-IMAGE: url(images/FadeLineWide.gif); WIDTH: 165px; BACKGROUND-REPEAT: no-repeat
|
||||
}
|
||||
.service {
|
||||
FLOAT: left; BACKGROUND-IMAGE: url(images/FadeLine.gif); WIDTH: 150px; BACKGROUND-REPEAT: no-repeat
|
||||
}
|
||||
.testimonial {
|
||||
BACKGROUND-POSITION: 50% top; VERTICAL-ALIGN: top; WIDTH: 200px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 320px
|
||||
}
|
||||
.fadeBar {
|
||||
BACKGROUND-POSITION: 50% top; FLOAT: left; WIDTH: 200px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 210px; TEXT-ALIGN: center
|
||||
}
|
||||
TABLE.sidebarTable P {
|
||||
PADDING-RIGHT: 8px; MARGIN-TOP: 2px; PADDING-LEFT: 6px; FONT-SIZE: 11px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 2px; PADDING-TOP: 3px; FONT-FAMILY: verdana
|
||||
}
|
||||
TABLE.content P {
|
||||
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; FONT-FAMILY: verdana
|
||||
}
|
||||
TABLE.sidebarTable H2 {
|
||||
PADDING-RIGHT: 5px; MARGIN-TOP: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 14px; MARGIN-BOTTOM: -5px; PADDING-BOTTOM: 0px; COLOR: #ff511b; PADDING-TOP: 0px; FONT-FAMILY: Arial
|
||||
}
|
||||
.content P SPAN {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #6a88a4
|
||||
}
|
||||
SPAN.cost {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #f46555
|
||||
}
|
||||
TABLE.content H2 {
|
||||
PADDING-RIGHT: 5px; MARGIN-TOP: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; COLOR: #ff511b; PADDING-TOP: 0px; FONT-FAMILY: arial
|
||||
}
|
||||
TABLE.content H3 {
|
||||
PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #6a88a4
|
||||
}
|
||||
FORM DIV P {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #6a88a4
|
||||
}
|
||||
DIV.price P {
|
||||
FONT-WEIGHT: normal; COLOR: black
|
||||
}
|
||||
.endForm {
|
||||
MARGIN-LEFT: 10px; COLOR: black
|
||||
}
|
||||
.terms {
|
||||
FONT-WEIGHT: bold; WIDTH: 95%; BACKGROUND-COLOR: #eff3f7
|
||||
}
|
||||
P.pinfo {
|
||||
MARGIN-LEFT: 20px
|
||||
}
|
||||
.content H1 {
|
||||
PADDING-LEFT: 5px
|
||||
}
|
||||
.content H1 SPAN {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 16px; MARGIN-LEFT: 5px; COLOR: red
|
||||
}
|
||||
TABLE.content H2 A {
|
||||
PADDING-RIGHT: 5px; MARGIN-TOP: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; COLOR: #ff511b; PADDING-TOP: 0px; FONT-FAMILY: arial
|
||||
}
|
||||
DIV.anchors A {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 25px; COLOR: #6a88a4; TEXT-DECORATION: underline
|
||||
}
|
||||
A.TryIt {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #ff511b; FONT-FAMILY: Arial
|
||||
}
|
||||
A.TryIt:link {
|
||||
COLOR: #ff511b; TEXT-DECORATION: underline
|
||||
}
|
||||
A.TryIt:visited {
|
||||
COLOR: #ff511b; TEXT-DECORATION: underline
|
||||
}
|
||||
A.TryIt:unknown {
|
||||
COLOR: #355070; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: underline
|
||||
}
|
||||
A.TryIt:hover {
|
||||
COLOR: #355070; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: underline
|
||||
}
|
||||
A.TryIt:active {
|
||||
COLOR: #ff511b; TEXT-DECORATION: underline
|
||||
}
|
||||
A.linkText {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #ff511b; FONT-FAMILY: Arial
|
||||
}
|
||||
A.linkText:link {
|
||||
COLOR: #ff511b; TEXT-DECORATION: underline
|
||||
}
|
||||
A.linkText:visited {
|
||||
COLOR: #ff511b; TEXT-DECORATION: underline
|
||||
}
|
||||
A.linkText:unknown {
|
||||
COLOR: #355070; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: underline
|
||||
}
|
||||
A.linkText:hover {
|
||||
COLOR: #355070; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: underline
|
||||
}
|
||||
A.linkText:active {
|
||||
COLOR: #ff511b; TEXT-DECORATION: underline
|
||||
}
|
||||
A.mapLink {
|
||||
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 11px; PADDING-BOTTOM: 2px; COLOR: #355070; PADDING-TOP: 2px; TEXT-DECORATION: underline
|
||||
}
|
||||
A.mapLink:link {
|
||||
TEXT-DECORATION: underline
|
||||
}
|
||||
A.mapLink:visited {
|
||||
TEXT-DECORATION: underline
|
||||
}
|
||||
A.mapLink:unknown {
|
||||
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: underline
|
||||
}
|
||||
A.mapLink:hover {
|
||||
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: underline
|
||||
}
|
||||
A.mapLink:active {
|
||||
TEXT-DECORATION: underline
|
||||
}
|
||||
.footer A:link {
|
||||
FONT-SIZE: 10px; COLOR: #355070; TEXT-DECORATION: none
|
||||
}
|
||||
.footer A:visited {
|
||||
FONT-SIZE: 10px; COLOR: #355070; TEXT-DECORATION: none
|
||||
}
|
||||
.footer A:unknown {
|
||||
FONT-SIZE: 10px; COLOR: #355070; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: none
|
||||
}
|
||||
.footer A:hover {
|
||||
FONT-SIZE: 10px; COLOR: #355070; BACKGROUND-COLOR: #f7decc; TEXT-DECORATION: none
|
||||
}
|
||||
.footer A:active {
|
||||
FONT-SIZE: 10px; COLOR: #355070; TEXT-DECORATION: none
|
||||
}
|
||||
A.subTitle:link {
|
||||
PADDING-RIGHT: 5px; MARGIN-TOP: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 5px; COLOR: #ff511b; PADDING-TOP: 5px; TEXT-DECORATION: none
|
||||
}
|
||||
A.softlink2:link {
|
||||
COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.noline2:visited {
|
||||
COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.softlink2:hover {
|
||||
COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.noline2:active {
|
||||
COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.softlink3:link {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #6a88a4; TEXT-DECORATION: none
|
||||
}
|
||||
A.noline3:visited {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #6a88a4; TEXT-DECORATION: none
|
||||
}
|
||||
A.softlink3:hover {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #6a88a4; TEXT-DECORATION: none
|
||||
}
|
||||
A.noline3:active {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #6a88a4; TEXT-DECORATION: none
|
||||
}
|
||||
A.softlink4:link {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.noline4:visited {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.softlink4:hover {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
A.noline4:active {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: black; TEXT-DECORATION: none
|
||||
}
|
||||
DIV.anchors A:link {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 25px; COLOR: #6a88a4; TEXT-DECORATION: underline
|
||||
}
|
||||
.footer {
|
||||
BORDER-TOP: #6b8aa5 4px solid; WIDTH: 650px; HEIGHT: 120px; BACKGROUND-COLOR: white
|
||||
}
|
||||
.footerContainer1 {
|
||||
FLOAT: left; WIDTH: 170px; HEIGHT: 100px
|
||||
}
|
||||
.footerContainer2 {
|
||||
FLOAT: left; WIDTH: 478px; HEIGHT: 100px
|
||||
}
|
||||
.copyright {
|
||||
FONT-SIZE: 9px; COLOR: #6a88a4
|
||||
}
|
||||
.placeholder {
|
||||
WIDTH: 650px; HEIGHT: 25px; BACKGROUND-COLOR: #eff3ff
|
||||
}
|
||||
#overview {
|
||||
COLOR: #ff511b
|
||||
}
|
||||
.bigList {
|
||||
FONT-SIZE: 12px; PADDING-TOP: 5px
|
||||
}
|
||||
DL {
|
||||
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; font-famiy: verdana
|
||||
}
|
||||
DT {
|
||||
FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-TOP: 5px; FONT-FAMILY: verdana
|
||||
}
|
||||
DD {
|
||||
FONT-SIZE: 11px; PADDING-BOTTOM: 10px; PADDING-TOP: 5px; FONT-FAMILY: verdana
|
||||
}
|
||||