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

Вёрстка таблицами. Часть-2.

Прежде чем мы продолжим наш урок, хотелось бы немного определится с целью того что мы созидаем. Понятно, что мы, учимся создавать сайт, познавая языки гипертекстовых разметок, в данном случае «HTML».  Но нам нужна некая, предопределённая цель. Для примера мы будем создавать, небольшой сайт визитку, который должен быть простым и понятным. Что должно быть именно в таком сайте, что бы легче понять я создал картинку, определяющую структуру будущего проекта.

Рисунок №1

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

 И так на рисунке №1, мы видим следующую схему, а точнее каркас нашего сайта визитки. Первым делом это идёт «Шапка сайта» (header), далее следует «Горизонтальное меню», в центре планируется две части, это «Боковая колонка» и контент (content). Завершающим, этапом станет так называемый «Подвал» (footer), или «Нижняя часть сайта». Обратите внимание, что при некоторых пояснениях, я вставляю в скобки,  название этих частей сайта, на английском языке. Это не просто фарс, это необходимо для того, что бы вы сразу запоминали, как они называются. Поскольку все языки программирования  написаны на английском, то это не просто слова, это и часть тегов, и стилевых оформлений, о которых вам предстоит ещё узнать.

Шапка сайта.

На прошлом занятие, мы с вами познакомились с таблицами, то есть с тем из чего будет состоять наш сайт, или его основной структурой каркаса.  Сегодня мы создадим шапку сайта. И так приступим, открывайте файл «index.html», в редакторе, где мы и продолжим наше занятие.

Впоследствии, мы создадим большое количество таблиц и чтоб, не запутаться в них, мы создадим так называемую «Закомментированную строку». Что это такое? Закомментированная строка, это часть текста, или кода, которую видит «браузер», но не отображает её для пользователя. Ниже приведён пример.

<!--Какой то текст или код -->

На примере мы видим, знаки перед текстом  <!- - и в конце текста - -> . Вот такой несложный код, и закрывает содержимое. Закомментировать, в HTML документе, можно двумя способами. Первое вручную, проставив необходимые знаки, второе, выделив текст, в редакторе «Notepad++», нажав «ПКМ», выбрать «Закомментировать выделенное».

Для начала обозначим общую таблицу, созданную на прошлом занятие. Приписав пред открывающим тегом «table» следующее:

 <!-- Основная таблица -->

А после его закрытия:

<!-- Конец основной таблицы -->

Далее продолжим работу с таблицей изменим её ширину, созданную на прошлом занятие именно « height: 100px; », заменим на « height: 100%; ». Теперь согласно, нашему каркасу (рисунок №1), нам необходимо создать четыре основных горизонтальных сектора, или говоря языком таблиц «четыре строки». Для этого копируем вот эту часть кода:

    <tr>
      <td>Привет!</td>
    </tr>

И вставляем, её обратно три раза, так что бы получилось, четыре кода подряд. Что бы нам дальше было легче их понимать и находить, обозначим каждый по номерам (1,2,3,4) и каждый кусок кода прокомментируем.

Рисунок №2.

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

 На рисунке №2, показано как я это сделал.  В конце статьи открыв пример, вы сможете просмотреть, как  я их обозначил по названию. Теперь удаляем цифру «1», опускаем закрывающий тег «</td> ниже на два пункта, и посредине вставляем код вот такой таблицы:

<table style="width: 1000px; height: 200px; text-align: left; margin-left: auto; margin-right: auto;" bordercolor="#0000FF" border="1" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td style="background-image: url('images/header.png'); text-align: left;">Шапка</td>
          </tr>
        </tbody>
      </table>

Сохраняем и открываем для просмотра в браузере. Как видим, создалась ещё одна таблица, с текстом «Шапка», по левой стороне. Поскольку ширина (width: 1000px), этой таблицы меньше чем основная, по краям мы видим отступы, а вот отступов сверху и снизу отсутствуют. Это потому что общая ширина основной таблицы у нас стоит 100% и содержимое срок по ширине заполняется полностью. Что бы отступ появился нам необходимо, указать ширину именно для строки, которая до этого была у нас под №1. Для этого после закомментированной строки «Шапка сайта», в тег <td> прописываем ширину, должно получится вот так:

<td style="height: 210px;">

Сохранили, просмотрели, отлично отступы появились. Далее вместо отсутствующего фона, нам необходимо вставить картинку, сам путь и имя картинки, у нас уже прописаны:

<td style="background-image: url('images/header.png');

Теперь в папке, которую мы создавали ранее «Простая вёрстка в HTML» где лежит наш файл «Index.html», создаём папку «images», в которую и помещаем нашу картинку, или фон будущей шапки. Я создал картинку размером 1000х200 пикселей, что бы ваша картинка вписалась в этот дизайн, то вам необходимо создать рисунок такого же размера. Из кода указанного выше следует «background-image: url», что говорит браузеру, фон в данной области будет изображение, далее следует «'images/header.png'», где «images»,это созданная нами папка для хранения изображений, а «header.png'» имя и расширения самой картинки. Обратите внимание, что имя и расширения может быть любым (png, gif, jpg), главное, что бы оно было правильно указано. И так, создав папку, и поместив в неё картинку, я сохраняю, все это дело и запускаю файл для просмотра. Получилось вот что:

Рисунок №3.

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

 Всё отлично моя шапка работает, а вот вместо текста шапка, я напишу номер телефона компании

); text-align: left;">8 800-000-00-00</td>

Что бы мой текст с телефоном не прилипал, перед ним я проставлю вот такой код &nbsp; два раза. Для браузера это означает пробел.

); text-align: left;">&nbsp;&nbsp;8 800-000-00-00</td>

Ну, вот пожалуй и все на этом закончим наш урок. В следующем уроке мы создадим меню для нашего сайта. Если вы хотите в качестве примера использовать, изображения из данного урока для вашей шапки, то откройте «Пример №1», наведите курсор на изображения, сделав клик «ПКМ», выбрав «Сохранит ка..», сохраните его в нужную папку.

До встречи в следующем уроке «Простая вёрстка в HTML. Урок №4.», «Вёрстка таблицами. Часть-2».



---

Комментарии 1

Dennisdrut
Dennisdrut от 6 января 2014 08:51
Скажите а с помощью какой программы можно создать фото шапки сайта?
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.