HTML/CSS | 22 декабря 2009 |

Урок трехколонной верстки

Я и раньше думал выкладывать уроки для вэбмастеров,к примеру урок верстки,правда я думал это будет
не очень актуально,но после того как меня попросили еще и в ICQ,все таки пишу пост. So well,Урок трехколонной верстки,используются таблицы.

Приступим.Для начала создайте файл index.html,кодировку при сохранении возьмите UTF-8 .

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Урок трехколонной верстки | Аскеров Джавид</title>
</head>
<body>
 
</body>
</html>

Итак,продолжим,что нам надо,три таблицы,три колонки.Так сунем это все в одну таблицу.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Урок трехколонной верстки | Аскеров Джавид</title>
</head>
<body>
<!-- Обьявляем комментарий.Это общая главная таблица --> 
<table style="width:100%;"><tr><td> 
 
 
<!-- Еще один коммент.Конец главной таблицы.Между началом и концом главной таблицы будет контент -->
 
</td></tr></table>
</body>
</html>

Если вы хоть знакомы с HTML,то строки выше должны быть вам знакомы,итак внизу почти весь код.
Если не понимаете,то в коде приведены комментарии,по которым можно понять как это сделано : ).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Урок трехколонной верстки | Аскеров Джавид</title>
 
</head>
<body>
<!-- Обьявляем комментарий.Это общая главная таблица --> 
<table style="width:100%;"><tr><td>
<!-- Обьявляем комментарий.Это таблица прижатая к левой части -->
 
<table class="menu"><tr>
<td><b>Menu</b></td></tr>
<tr><td>Текст <br /> в меню</td></tr>
<tr><td> </td></tr></table>
</td><td>
<!-- То для чего мы и создавали общую таблицу.Чтобы в ее ячейки распихать наши таблицы. -->
 
<table class="content"><tr>
<td><b>Menu</b></td></tr>
<tr><td> 
 
Lorem ipsum dolor sit amet consectetuer nascetur id pede eget elit. Laoreet egestas tempus eu egestas congue et vitae convallis mauris convallis. Interdum Integer Morbi tortor id mattis congue auctor dignissim amet nisl. Quis Vivamus Vivamus metus In Integer vitae ante platea est Ut. Curabitur elit ac dictum auctor faucibus vitae lobortis Vivamus.
 
Risus metus arcu risus ipsum condimentum sem est mollis eu Nulla. Hendrerit nibh eu purus dolor In id dui condimentum iaculis a. Pretium orci Nullam fermentum risus urna sagittis leo quis ultrices Suspendisse. At Sed feugiat libero nibh odio et vel magna odio Nam. Pretium In felis pretium pellentesque lacus nibh dictumst id at congue. Ac Phasellus Pellentesque nisl sed id turpis sagittis eget mauris Cum. Enim vitae felis.
 
Vestibulum ridiculus ligula felis ante felis tellus congue Vestibulum sem In. Senectus Morbi nec est Praesent facilisi sociis elit ipsum fames orci. Congue facilisis dolor vitae consequat Vestibulum sapien interdum non tellus wisi. Nunc eget quis nec vitae Pellentesque urna sem enim tristique tellus. Amet nec at augue Sed consectetuer tincidunt Quisque venenatis massa Pellentesque. 
 
Amet felis nisl tristique sed nec pretium id Vivamus interdum consectetuer. Aenean et est id pulvinar Vivamus at fringilla ante libero ornare. Nulla enim ut Aenean vel porttitor Phasellus id turpis ligula risus. Risus leo scelerisque pretium Pellentesque platea turpis Ut libero Vivamus leo. Amet est nec dui Vestibulum id sapien id dapibus vitae Phasellus. Wisi netus est.
<br /> в меню</td></tr>
<tr><td> </td></tr></table>
</td><td>
<!-- Зачем мы опять это проделали надеюсь уже ясно :D. -->
 
<table class="menu"><tr>
<td><b>Menu</b></td></tr>
<tr><td>Текст <br /> в меню</td></tr>
<tr><td> </td></tr></table>
 
 
 
<!-- Еще один коммент.Конец главной таблицы.Между началом и концом главной таблицы есть контент. -->
 
</td></tr></table>
</body>
</html>

Итак,небольшой кусок кода чтобы оформить страницу.Вставляем между тегом head:

1
2
3
4
5
6
7
8
9
10

<style type="text/css">
/* Изначально для всех тегов отступы равны нулю */
*{margin:0;padding:0;} 
img{border-style:none}/*Убираем обводку картинок для браузера Firefox*/
/* Задаем вертикальное выравнивание по вверху для тега td */
td{vertical-align:top;}
/* Ну и классы зачем-то же писали для контента и блоков меню */
.menu{width:180px;border:1px solid #888;} /*Ширина 180 пикселей.И обводка.*/
.content{width:600px;}/*Ширина 600 пикселей для контента.И обводки нет.*/
</style>

Если будут вопросы,прошу.Хотя это крайне легкий пример верстки.

Нет похожих публикаций.


Вы, можете добавить эту статью, в один из следующих сервисов:

Опубликовать в Twitter Опубликовать в своем блоге livejournal.com

8 коммент.

  1. Сергей

    23 Дек 2009

    Спасибо, для новичков очень полезно. Побольше бы таких уроков. А на выпады придурков не обращай внимания!
    Всех с наступающим новым годом!!!

  2. Chehaco

    23 Дек 2009

    Прекрасный пост , помог мне очень сильно , спасибо большое !!! ( все эти слова мне пришлось написать под давление автора )

  3. admin

    23 Дек 2009

    Сцуко…

  4. neio

    24 Дек 2009

    Таблицы в печку это прошлый век! Переходите на боксовую div ваю верстку

  5. Ромка

    24 Дек 2009

    Жду статью по drag and drop!
    (пишу под дулом пистолета северуса)

  6. admin

    24 Дек 2009

    Можно и на дивах,следующий урок может будет как сделать это на дивах)

  7. admin

    24 Дек 2009

    Я никого не заставлял : D

  8. StM

    9 Фев 2010

    На хабре недавно как раз и был пост о трёхколонной вёрстке на дивах.