Урок 4: Создание HTML-страниц 2

Замечания

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

Во втором уроке мы уже пробовали сотворить HTML-страницу, однако без использования стилей она получилась, откровенно говоря, убогой. С помощью CSS-стилей можно создать гораздо более красивую и функциональную страницу, что мы и попытаемся сделать.

Создайте в корневом каталоге одного из ваших виртуальных доменов файлы index.html и style.css. В первый будем помещать HTML-код, а во второй — CSS-стили страницы. Набросайте в index.html следующий код:

<html>  
  <head> 
    <title>Главная страница</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <link rel="stylesheet" href="/style.css" type="text/css">
  </head>  
  <body> 
    <table class="content" border="1" width="100%" height="100%"> 
      <tr> 
        <td height="80px" colspan="3">Шапка</td> 
      </tr> 
      <tr> 
        <td height="30px" colspan="3">Меню</td> 
      </tr> 
      <tr> 
        <td width="200px">Левый контент</td> 
        <td>Основной контент</td> 
        <td width="200px">Правый контент</td> 
      </tr> 
      <tr> 
        <td height="60px" colspan="3">Подвал</td> 
      </tr> 
    </table>
  </body>  
</html>

в файл style.css:

* {font-family: verdana; font-size: 12px}
body {margin: 0; padding: 0}
 
.content {border-collapse: collapse}  
.content td {padding: 0}

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

Далее, рисуем шапку страницы в графическом редакторе. Я сделал следующий набросок в редакторе Gimp (исходник):

Заготовка шапки страницы

Вырезаем левую часть шапки — область с закругленной панелью (не захватывая нижнюю панель — это будет меню):

Шапка страницы

и сохраняем это изображение под именем logo.jpg в папку images, предварительно созданную в корневом каталоге. Из правой части шапки вырезаем тонкую полоску панели с тенью такой же высоты, как и изображение логотипа:

и сохраняем под именем top.jpg в папку images. Размеры изображений у меня получились 312x123 и 5x123 соответственно.

Увеличиваем высоту шапки до высоты логотипа (123 пикселя) и помещаем туда таблицу, состоящую из двух ячеек: в левую помещаем изображение logo.jpg, правой задаем фон top.jpg с дублированием по горизонтали. Левая ячейка имеет жесткую ширину, равную ширине логотипа, правая — резиновая (без ширины). Ширина самой таблицы 100%:

        <table class="content" border="1" width="100%" heigh="123px">
          <tr>
            <td width="312px"><img src="/images/logo.jpg" width="312px" height="123px"></td>
            <td style="background: url('/images/top.jpg') repeat-x">&nbsp;</td>
          </tr>
        </table>

Разбираемся с меню. Подгоняем высоту ячейки "меню" до высоты меню в нашем графическом исходнике (с учетом верхней и нижней серой полоски). В моем случае эта высота равна 28 пикселей. Вырезаем тонкую полоску градиента, образующего панель меню (захватывая участок верхней и нижней серой полоски) и сохраняем под именем menu.jpg.

Помешаем в ячейку "меню" следующую таблицу:

           <table class="menu" width="100%" height="28px">
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>

в файл стилей добавляем:

.menu {border-collapse: collapse}
.menu tr {background: url('/images/menu.jpg') repeat-x}

Обратите внимание, что фон задается элементу tr, поэтому он продублируется на ширину всех ячеек данной строки.

По поводу пунктов меню. Для более реалистичного объема будем между пунктами вставлять графические разделители шириной 2 пикселя (необходимо вырезать его из графического эскиза шапки и сохранить под именем menu-border.jpg).

Одна ячейка в таблице меню уже есть, она будет позволять растягиваться меню по ширине. Создадим слева еще одну ячейку с шириной 10 пикселей, а между ними — ячейку с классом menu-border:

          <table class="menu" width="100%" height="28px">
            <tr>
              <td width="10px">&nbsp;</td>
              <td class="menu-border"></td>
              <td>&nbsp;</td>
            </tr>
          </table>

Класс menu-border описываем следующим образом:

.menu .menu-border {width: 2px; background: url('/images/menu-border.jpg') no-repeat}

Для описания непосредственно пункта меню будем использовать следующие блоки стилей:

.menu .menu-item {width: 100px; text-align: center}
.menu .menu-item a {color: #333; display: block}
.menu .menu-item a:hover {color: red}

Для добавления пункта меню нужно в таблице-меню создать ячейку с классом menu-item, поместить в нее текстовую ссылку, а после ячейки menu-item создать ячейку-разделитель с классом menu-border. Пункты добавляются после первого разделителя. Добавим несколько пунктов в меню:

          <table class="menu" width="100%" height="28px">
            <tr>
              <td width="10px">&nbsp;</td>
              <td class="menu-border"></td>
              <td class="menu-item"><a href="#">Главная</a></td>
              <td class="menu-border"></td>
              <td class="menu-item"><a href="#">Новости</a></td>
              <td class="menu-border"></td>
              <td class="menu-item"><a href="#">Статьи</a></td>
              <td class="menu-border"></td>
              <td class="menu-item"><a href="#">Уроки</a></td>
              <td class="menu-border"></td>
              <td class="menu-item"><a href="#">О нас</a></td>
              <td class="menu-border"></td>
              <td>&nbsp;</td>
            </tr>
          </table>

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

.box {border-collapse: collapse}  
.box td {padding: 0} 
.box img {width: 10px; height: 10px} 
.box .rcontent {width: 100%; height: 100%} 
.box td.hsh {background: url('/images/hshadow.jpg') repeat-x} 
.box td.vsh {background: url('/images/vshadow.jpg') repeat-y; vertical-align: top} 
.box .lcaption {border: 1px solid black; border-right: none; background: #999} 
.box .rcaption {border: 1px solid black; border-left: none; background: #999; padding: 2px 10px; padding-left: 0; font-weight: bold} 
.box .lcontent {border: 1px solid black; border-right: none} 
.box .rcontent {border: 1px solid black; border-left: none; padding: 3px 10px; padding-left: 0; text-align: justify}

Зададим столбцам контента классы left-content, middle-content и right-content соответственно и поместим в левый столбец области контента первый блок "авторизация":

          <table class="box" width="100%">  
            <tr> 
              <td class="lcaption"> </td> 
              <td class="rcaption">.: авторизация :.</td> 
              <td class="vsh"><img src="/images/vshadow_top.jpg"></td> 
            </tr> 
            <tr> 
              <td class="lcontent"></td> 
              <td class="rcontent" style="text-align: center">{КОНТЕНТ}</td> 
              <td class="vsh"></td> 
            </tr> 
            <tr> 
              <td><img src="/images/hshadow_left.jpg"></td> 
              <td class="hsh"></td> 
              <td><img src="/images/shadow_corner.jpg"></td> 
            </tr>   
          </table>

Зададим поля и выравнивание по вертикали в столбцах контента:

.content .left-content, .content .middle-content, .content .right-content {vertical-align: top; padding: 20px 2px 10px 10px}

В контент блока "авторизация" вставим поля ввода и кнопку:

                <input class="inp" type="text"><br>
                <input class="inp" type="password"><br>
                <input class="inpbut" type="button" value="Войти">

в стили добавим:

.inp {width: 100%; border: 1px solid #333; margin: 2px}
.inpbut {border: 1px solid #333; margin: 2px; background: #999; color: #fff}

Ниже добавим блок "реклама":

          <table class="box" width="100%" style="margin-top: 5px">  
            <tr> 
              <td class="lcaption">&nbsp;</td> 
              <td class="rcaption">.: авторизация :.</td> 
              <td class="vsh"><img src="/images/vshadow_top.jpg"></td> 
            </tr> 
            <tr> 
              <td class="lcontent"></td> 
              <td class="rcontent" style="text-align: center">
 
                <div class="banner">&nbsp;</div>
                <div class="banner">&nbsp;</div>
                <div class="banner">&nbsp;</div>
 
              </td> 
              <td class="vsh"></td> 
            </tr> 
            <tr> 
              <td><img src="/images/hshadow_left.jpg"></td> 
              <td class="hsh"></td> 
              <td><img src="/images/shadow_corner.jpg"></td> 
            </tr>   
          </table>

Стили класса banner описываются следующим образом:

.banner {width: 88px; height: 31px; border: 1px dashed #333; margin: 4px auto}

В основной блок добавим пустой блок "добро пожаловать" высотой 250 пикселей и три пустых новостных блока высотой 100 пикселей:

          <table class="box" width="100%" height="250px">  
            <tr> 
              <td class="lcaption">&nbsp;</td> 
              <td class="rcaption">.: добро пожаловать :.</td> 
              <td class="vsh"><img src="/images/vshadow_top.jpg"></td> 
            </tr> 
            <tr> 
              <td class="lcontent"></td> 
              <td class="rcontent" style="text-align: center">&nbsp;</td> 
              <td class="vsh"></td> 
            </tr> 
            <tr> 
              <td><img src="/images/hshadow_left.jpg"></td> 
              <td class="hsh"></td> 
              <td><img src="/images/shadow_corner.jpg"></td> 
            </tr>   
          </table>
 
          <table class="box" width="100%" height="100px" style="margin-top: 5px">  
            <tr> 
              <td class="lcaption">&nbsp;</td> 
              <td class="rcaption">.: новость 1 :.</td> 
              <td class="vsh"><img src="/images/vshadow_top.jpg"></td> 
            </tr> 
            <tr> 
              <td class="lcontent"></td> 
              <td class="rcontent" style="text-align: center">&nbsp;</td> 
              <td class="vsh"></td> 
            </tr> 
            <tr> 
              <td><img src="/images/hshadow_left.jpg"></td> 
              <td class="hsh"></td> 
              <td><img src="/images/shadow_corner.jpg"></td> 
            </tr>   
          </table>
 
          <table class="box" width="100%" height="100px" style="margin-top: 5px">  
            <tr> 
              <td class="lcaption">&nbsp;</td> 
              <td class="rcaption">.: новость 2 :.</td> 
              <td class="vsh"><img src="/images/vshadow_top.jpg"></td> 
            </tr> 
            <tr> 
              <td class="lcontent"></td> 
              <td class="rcontent" style="text-align: center">&nbsp;</td> 
              <td class="vsh"></td> 
            </tr> 
            <tr> 
              <td><img src="/images/hshadow_left.jpg"></td> 
              <td class="hsh"></td> 
              <td><img src="/images/shadow_corner.jpg"></td> 
            </tr>   
          </table>
 
          <table class="box" width="100%" height="100px" style="margin-top: 5px">  
            <tr> 
              <td class="lcaption">&nbsp;</td> 
              <td class="rcaption">.: новость 3 :.</td> 
              <td class="vsh"><img src="/images/vshadow_top.jpg"></td> 
            </tr> 
            <tr> 
              <td class="lcontent"></td> 
              <td class="rcontent" style="text-align: center">&nbsp;</td> 
              <td class="vsh"></td> 
            </tr> 
            <tr> 
              <td><img src="/images/hshadow_left.jpg"></td> 
              <td class="hsh"></td> 
              <td><img src="/images/shadow_corner.jpg"></td> 
            </tr>   
          </table>

Добавим пару пустых блоков в правый контентный блок.

У ячейки "подвал" уберем жестко заданную высоту, зададим класс bottom, опишем в файле стилей блок:

.content .bottom {text-align: center; padding: 5px}

Напишем в подвале какие-нибудь копирайты. Скачать пример. Посмотреть онлайн.

Комментарии

Оставить комментарий »

 
Alexey
29 августа 2012, 14:28
#1
 

Подскажите почему-то при создании файлов index.html и style.css и открытии в браузере index.html отображается каркас страницы, но вместо слов "шапка", "меню", "контент" отображаются ромбики с вопросительным знаком внутри??? В чем может быть проблема?!?

Joker-jar
3 сентября 2012, 0:49
#2
 

Сорри за задержку в ответе. Нахожусь в отпуске.

Проблема явно в кодировке. Почитайте здесь про кодировку.

Nimo
22 января 2013, 19:01
#3
 

Скажите, пожалуйста, как Вы относитесь к рекомендациям W3C о недопустимости использования таблиц в HTML для разметки функциональных областей страницы? Чем вызвана необходимость замены стандартных контейнеров "div" на "табличную" верстку? Скажите, также, чем вызвано отсутствие обязательного атрибута "alt" в составе тега "img"? Из Вашей статьи я узнал много нового, например, о глобальных изменениях в спецификации HTML, благодарю Вас за своевременную и актуальную информацию.

Joker-jar
24 января 2013, 17:08
#4
 

Nimo, спасибо за интересные вопросы. Дело в том, на сайте статьи и уроки хронологически связаны, то есть рекомендуется новичкам читать последовательно от последних к первым. Данная статья, если поглядеть, недалеко ушла от материалов, где объясняются самые азы. То есть здесь рассматривается не сколько практические приемы создания HTML-страниц, сколько вообще смысл HTML и его применение. Такие вопросы, как валидация кода здесь упущены, как видите, я даже не указал doctype.

Табличная верстка сейчас уже конечно моветон, но в 2010 году я считал, что ее суть полезно знать начинающему веб-мастеру и с нее проще начать изучение.

P.S. Кстати, в HTML5 alt все еще обязателен для img? Надо бы проверить.

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий