Простая вёрстка в HTML. Урок №6.

* 25-01-2014, 17:49 * A_Protasov * Комментариев: 6

Рейтинг:

Простая вёрстка в HTML. Урок №6.

Таблица контента и информационного поля.

Поскольку в предыдущих уроках мы уже многое узнали о том, как создаются таблицы, то на данном этапе мы ускорим наш процесс обучения и рассмотрим только изменения и добавления.

Для создания блока, так называемого информационного поля и контента, в область закомментированных строк «Контент сайта», вставляем следующий код:

                <!-- Контент сайта -->
    <tr>
      <td>
                  <table style="width: 1000px; height: 100%; margin-left: auto; margin-right: auto;"
                 bordercolor="#0000FF" border="1" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="text-align: center; vertical-align: top; height: 500px; width: 300px;" bgcolor="#FFF8E1">
                  Левая колонка
                  </td>
                 
      <td style="text-align: center; vertical-align: top; " bgcolor="#FFF8E1">
                  Блок контента
                  </td>
    </tr>
  </tbody>
</table>
 
                  </td>
    </tr>
                <!-- Конец контента сайта -->

Должно получиться вот так:

Рисунок №1.

Простая вёрстка в HTML. Урок №6.

Здесь мы видим блок «Левая колонка», так называемое информационное поле и сам «Блок контента». А теперь немного разберём, то как у нас получилось две колонки. Всё очень просто, в созданной таблице (table) и её теле (tbody), мы создали строку таблицы (tr).  Затем дважды вставив туда парный тег,  <td></td> (table data - данные таблицы) и таким образом получили две колонки. В каждую из колонок мы прописали, стилевое оформление, где в левом блоке указали высоту и ширину height: 500px; width: 300px;.  Но не стали этого делать в блоке контента, так как там ширина будет создана от остатка общей таблицы, минус правая колонка, а высота, от заданной. Ещё один очень важный момент, что касаемо ширины таблиц.  После того, как мы задали ширину для колонки, или хотим чтобы содержимое наших таблиц увеличивалось, от наполняемого контента, необходимо просто удалить значение ширины. Для примера давайте сделаем следующее, обратите внимание на рисунок №1, мы видим, что таблица сверху и снизу прилипла к строке, общей таблицы. Это происходит, потому что для левого и правого отступа мы задали значения тегом margin, но не задали отступы с наружи, для низа и верха.  Давайте сделаем это вот так margin-top: 5px; и  margin-bottom: 5px;  больше нечего, то есть с лева и с права браузер видит автоматически отступ, а для низа и верха всегда будет удерживать заданное значение. А теперь посмотри что получилось:

Рисунок №2.

 Простая вёрстка в HTML. Урок №6.

 Как видим, отступ сверху удался, но вот снизу почему-то, нет. Более того если посмотреть на все это при увеличении, то таблица контента, даже выезжает а бордюр строки общей таблицы.  Причина в конфликте ширины. Ширина у нас задана, для всего блока в основной таблице, также задана, в блоке контента и плюс ко всему она задана в столбце блока контента. Если сейчас мы удалим значение ширины height: 100%; из общей таблицы, или таблицы контента (а лучше там и там) то всё станет на свои места. В процессе создания таблиц необходимо помнить, что мы создавали некоторые правила и параметры, только для визуализации, не забывайте удалять или корректировать их, при дальнейшей вёрстке!

Также помимо параметра, text-align: center; который как мы уже знаем, выравнивает текст по центру содержимого, был добавлен параметр, vertical-align: top; что означает «Расположить содержимое по верху». Всё остальное нам известно. Если же у вас появилось желание сделать, два информационных поля, по краям и один блок контента, то тут необходимо просто создать ещё одну колонку при помощи тегов <td></td> и прописать стилевые правила, при этом обозначив ширину для каждой из колонок. Для примера я просто скопировал, код левой колонки, и вставил его, ниже блока контента. Далее заменил только ширину в обеих колонках на 250 пикселей и назвал поле «Правая колонка», получилось вот что:

Рисунок № 3.

 Простая вёрстка в HTML. Урок №6.

 Ну, вот пожалуй и все, что хотелось сказать о создании таблиц для области контента и блоков информации. Я думаю,  на данном этапе вы достаточно получили, знаний, что бы самостоятельно создать таблицу.  Поскольку последней таблицей нашей странички будет  footer (нижний колонтитул), или как его ещё называют «подвал», то предлагаю в качестве домашнего задания создать его самостоятельно. Шириной в 1000 пикселей и высотой в 150, прописав туда следующее:  Все права защищены © www.Имя_вашего_сайта.ru

А на следующем занятие мы поговорим о том как, сделать эту надпись активной ссылкой, и разместить в одном из углов счётчик посещений. И напоследок, если кто не знает, как пишется знак копирайтинг ©, то для этого у себя на клавиатуре воспользовавшись правым блоком с цифрами, сделайте следующее: Нажмите и удерживайте кнопку Alt код 0169, отпустите клавишу Alt.

И так до встречи в следующем уроке: «Простая вёрстка в HTML. Урок №7».


razdacha.jpg


Теги: простая форма обратной связи для сайта форма обратной вставить на сайт

Просмотров: 41 788
Последние новости блога
Простая форма обратной связи. Часть-3.
Часть-3. На прошлых занятиях, мы разобрались, как в принципе должна выглядеть наша форма обратной связи, и даже поработали немного над её стилевым оформлением.  Теперь нам осталось создать файл
Как скрыть партнёрскую ссылку?
Партнёрская, реферальная ссылка. Именно такое названия слышат практический все вебмастера, от новичка до профессионала, начиная свой заработок в сети интернет на партнерских программах. Основная суть
Простая форма обратной связи. Часть-2.
Часть-2. На предыдущем занятие мы создали поля формы обратной связи, с кнопками очистить и отправить. Сегодня поговорим о том ка немного приукрасить нашу форму. Для красивого оформления всех форм
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
StephenZect
  • 0

25 января 2014 22:30 StephenZect

В принципе всё как бы понятно, но не помешало бы видео, с видео было бы намного интереснее.
.
Alfredjori
  • 0

26 января 2014 09:52 Alfredjori

Зачем видео и так всё ясно, тут даже есть пример где готовый код скопируй вставь и разбирайся. Или просмотри всё с первого урока, может чего упустил?
.
JosephZith
  • 0

30 января 2014 04:14 JosephZith

Я слышала существуют какие то блочные элементы div. И сними любое создание сайта намного проще получается. или это не так? Почему именно таблицы?
.
Stephenrox
  • 0

30 января 2014 05:22 Stephenrox

Да кто бы спорил, конечно существуют, а вот вопрос проще или нет, это зависит от ваших знаний. Вообще div был придуман для удобства работы css что бы заключать некоторые элементы в блоки, и задавать идентификаторы, или селекторы классов. Но если вы обратили внимание здесь пока речь не идёт о css. Здесь идёт речь о построении страницы html при поморщи таблицы)) Так что учите css а потом говорите про тег div!
.
Traviszile
  • 0

30 января 2014 09:56 Traviszile

Блин уже неделя прошла, а новой публикации нету(( Пора бы уже
.
RichardEi
  • 0

30 января 2014 10:39 RichardEi

Я вот не особо но немного владею CSS. Да ребят я согласен с автором что, этот путь надо пройти что бы понять. А потом и CSS не грех выучить, иначе писать правила для каждой таблицы на каждой странице это сума сойти можно.
.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Статистика

  • Рейтинг@Mail.ru