, . , html- "" "". web-, . ? - .
HTML . 1: ""
, (, Photoshop). - ( , ). html-, . Internet Explorer, Opera Firefox. 640480, . , , :) - .
, , , html-:
- , ( : IE, Firefox, Opera), Windows , - ;
- "" ;
- , html-;
- .
|
index.html style.css. style.css, ..:
- html- ;
- , html- - style.css.
"" . 100%- , 3 - Top, Text Bottom. Top Bottom , Text . , , Bottom , - .
, .. , Search, News, Copyright . - , .
| 
| 
|
html- ( border="1" <table> , , . .
| index.html |
| <html><head> <title>Layout</title> <link href="style.css" rel="stylesheet" type="text/css"></head><body><table class="main" border="1"><tr> <td class="top" colspan="2">top</td></tr><tr> <td class="search">search</td> <td class="topmenu">topmenu</td></tr><tr> <td class="news">news</td> <td class="text">text</td></tr><tr> <td class="copyright">copyright</td> <td class="bottommenu">bottommenu</td></tr></table></body></html> |
| style.css |
| table.main { width: 100%; height: 100%;}td.top {}td.search {}td.topmenu {}td.news { width: 30%;}td.text { width: 70%; height: 100%;}td.copyright {}td.bottommenu {} |
style.css. . , , . , , .
|
|
|
|
| 
|
1) , :
| html, body { margin:0px; padding:0px;} |
2) , border-collapse: collapse ( html- cellspacing="0").
| table.main { border-collapse: collapse;} |
3) , :
| td { padding: 0px;} |
, :
5) <body> . , . , - Windows, , , :)
6) ( - Tahoma 11px, ), .
7) () . , . vertical-align: top .
| body, input, select, textarea { background-color: #ffffff;}td, input, select, textarea { font-family: Tahoma; font-size: 11px; color: #000000; vertical-align: top; } |
. html-, index.html style.css.
index.htm<html><head> <title>Layout</title> <link href="style.css" rel="stylesheet" type="text/css"></head><body><table class="main" border="1"><tr> <td class="top" colspan="2">top</td></tr><tr> <td class="search">search</td> <td class="topmenu">topmenu</td></tr><tr> <td class="news">news</td> <td class="text">text</td></tr><tr> <td class="copyright">copyright</td> <td class="bottommenu">bottommenu</td></tr></table></body> </html> style.css html, body { margin:0px; padding:0px;}body, input, select, textarea { background-color: #ffffff;}td, input, select, textarea { font-family: Tahoma; font-size: 11px; color: #000000; vertical-align: top; }td { padding: 0px;}table.main { width: 100%; height: 100%; border-collapse: collapse;}td.top {}td.search {}td.topmenu {}td.news { width: 30%;}td.text { width: 70%; height: 100%;}td.copyright {}td.bottommenu { }
|
|
|
