Шапка

Удалите текст из внутреннего DIV, а вместо него вставьте еще один элемент DIV.

<body>
  <div style="text-align:center; border:2px solid orange;">;
    <div style="display:inline-block; text-align:left; width:800px; border:2px solid cyan;">
<div id="pg-title">Мой сайт</div>
</div> </div> </body>

Обратите внимание на атрибут id="pg-title". Это уникальный идентификатор элемента. Он нам еще пригодится. А пока я буду этот DIV называть просто pg-title. Других элементов с таким атрибутом id в документе быть не должно.
 
C o p_y r ig h t a r u l . r u
Чтобы заголовок страницы бросался в глаза, увеличьте размер шрифта, а шапку сделайте повыше и пошире за счет полей.

Для этого добавьте в pg-title атрибут

  style="font:bold 36px serif; padding:40px 50px;" 

Стиль font задает шрифт bold (жирный), 36px (высота в пикселях), serif (семейство serif).

Каждое свойства шрифта можно было бы описать отдельно:
font-weight: bold; font-size: 36px; font-family: serif.
У многих стилей есть альтернативные формы (например, у border, background). Просто пока имейте в виду.

Стиль padding: 40px 50px задает внутренние поля элемента. Такой формат записи означает, что верхнее и нижнее поля равны 40px,
а правое и левое 50px. Если поля несимметричны, то можно записать, например, padding: 10px 20px 30px 40px, что будет соответствовать верхнему, правому, нижнему, левому полю (обход по часовой стрелке, начиная с верхнего).
 
C o p_y r ig h t a r u l . r u
Получаем следующий pg-title:

      <div id="pg-title" style="font:bold 36px serif; padding:40px 50px;">Мой сайт</div>

Чтобы шапка страницы была привлекательной, добавим в нее рисунок. Используйте пока мой flowers_bg.jpg, потом замените тем, который вам больше нравится. Скачайте этот рисунок себе на компьютер и положите в папку, в которой находится файл mysite.html.

В pg-title в атрибут style добавьте

  background: url(flowers_bg.jpg) 

Посмотрите, что получилось.

C o p_y r ig h t a r u l . r u
Нам нужно, чтобы картинка располагалась справа и не повторялась. Для этого используются следующие значения стиля background
no-repeat (не повторять) и center right (вертикальное выравнивание по центру, горизонтальное — справа).

У вас должно получиться

  style="font:bold 36px serif; padding:40px 50px; 
   background:url(flowers_bg.jpg) no-repeat center right;"

Осталось добавить цвет фона, чтобы скрыть контуры картинки. Этот же цвет используем для нижней части страницы (подвала) и получим обрамление средней информационной части.
 
C o p_y r ig h t a r u l . r u
Чтобы определить цвет, которым нам надо залить шапку, я открыл файл flowers_bg.jpg в программе Paint, которая входит в состав Windows, и использовал интструмент «Выбор цветов».




После того, как я выбрал цвет, я нажал в меню Палитра — «Изменить палитру..», затем кнопку «Определить цвет >>» и выяснил, что мне нужен цвет с составляющими RGB (Red — красный, Green — зеленый, Blue — синий) — 248, 248, 248.

Чтобы задать цвет фона, можно использовать стиль
background-color: rgb(248,248,248), либо дописать это значение в наш стиль background.
Вместо rgb(248,248,248) можно записать #F8F8F8. Запись в формате с # получается, если представить составляющие RGB в шестнадцатеричной системе по два символа на каждую, а потом соединить вместе в одну строку.
Например, цвет rgb(8, 16, 32)  =  #081020 (08h = 8, 10h = 16, 20h = 32).
 
C o p_y r ig h t a r u l . r u
В результате pg-title будет таким:

      <div id="pg-title" style="font:bold 36px serif; padding:40px 50px; background:url(flowers_bg.jpg) no-repeat center right #F8F8F8;">Мой сайт</div>

Файл mysite2.html

C o p_y r ig h t a r u l . r u

 

  •  
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

2 комментариев к записи “Шапка”

  1. Влад сказал:

    возможно, проще использовать какой-нибудь Frongpage? Или Dreamweaver?

  2. admin сказал:

    Не знаю, что ты имеешь в виду. Смотря для каких целей.
    Можно ли использовать Frontpage или Dreamweaver для создания html-страниц?
    Скажу так: это на любителя. Можно, если страница — это не главное.
    Очень трудно заставить кого-то что-то делать правильно, если он не знает, как правильно, а объяснить ему невозможно.

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