Какие бывают сайты
Вообще-то сайты
бывают разные. Условно их делят на коммерческие (созданные для извлечения
прибыли) и некоммерческие (созданные "для души"). Условно, потому что
любой некоммерческий сайт в любую минуту может перейти в разряд коммерческих.
Также сайты можно классифицировать по цели их создания. Такую классификацию мы
и рассмотрим.
Сайт-визитка
Целью такого сайта является предоставление информации о фирме и ее услугах. В
реальной жизни мы обмениваемся визитками, но они могут рассказать лишь о
названии фирмы и должности того, кто ее вручил.
Если же на визитке указан адрес сайта, ваш потенциальный партнер или покупатель
(заказчик) может узнать о вашей компании все, что его интересует. Именно такую
информацию размещают на сайтах-визитках: историю фирмы, виды деятельности,
заслуги и так далее. Также здесь можно размещать фотографии предлагаемой
продукции (если это требуется), цены, акции и прочее.
Особенности: Такие сайты обычно состоят из 5-15 страниц, отличаются
строгим дизайном, на них обязательно присутствует логотип компании. Также очень
важен подбор доменного имени, в идеале оно должно отражать основной вид
деятельности фирмы, быть коротким и запоминающимся.
Новостной сайт
На самом деле это огромный пласт сайтов. Условно их можно разделить на две
большие группы: тематические сайты и территориальные. К первой группе относятся
сайты посвященные какой-либо теме: политика, экономика, сплетни, игры, музыка,
развлечения и так далее.
Ко второй группе относятся сайты, посвященные какой-либо стране, региону,
городу и так далее. Объединяет такие сайты необходимость постоянного наполнения
их свежими новостями по теме ресурса.
Особенности: Такие сайты требует качественного и интересного контента
(содержания), частого обновления, соответствующего дизайна (согласитесь, что
сайт, посвященный экономике не может быть оформлен также, как сайт, посвященный
музыке), а также присутствия различных технологий для более удобной и
интересной работы пользователей (форумы, чаты, опросники, ролики и анимации...).
Корпоративный сайт
К этой группе относятся сайты, выполняющие двойную роль. С одной стороны
представительство в Интернете (как сайт-визитка), с другой - средство общения и
обмена информацией между сотрудниками фирмы, партнерами и клиентами.
Особенности: Строгий стиль, логотип компании, большой объем, закрытые
разделы для сотрудников, разделы для партнеров и клиентов, возможность
динамического формирования контента (использование баз данных для
своевременного обновления информации), формы обратной связи и так далее.
Сайт для продвижения продукта или услуги
Это сайты-презентации, они призваны рассказать о каком-нибудь новом товаре или
услуге, точнее разрекламировать их. Как правило, они представляют собой
подробное описание, характеристики, преимущества и красивые фотографии товара
или услуги.
Особенности: Такие сайты состоят из одной-трех страниц, имеют яркий
дизайн, так называемый "продающий текст" и форму заказа. Часто
сопровождаются видео или flash-роликами, а также положительными отзывами.
Сайт Каталог
Как правило, такие сайты необходимы фирмам-производителям каких-нибудь товаров.
Например, обойная фабрика может сделать сайт-каталог, где разместит фотографии
всех образцов обоев, с их описанием и ценой, а также предоставит пользователю
посмотреть выбранные обои в различных интерьерах.
Особенности: Такие сайты содержат много однотипной информации:
фотографии продукции, их описание, цены и т.п. Интернет магазин
Это сайты, которые не только предоставляют фотографии, описания и цены на
товары, но и имеют средства приема заказов on-line. Также, в отличие от
сайтов-каталогов, здесь могут быть представлены абсолютно разные товары,
собранные в отдельные разделы.
Особенности: Дружественный интерфейс, средства приема заказов on-line,
возможность оплаты on-line (не всегда). Как правило, пользователю нужно только
щелкать по кнопке с товарами, все остальное будет сделано за него (посчитают,
упакуют и поблагодарят:)).
Интернет портал
Это мега-сайты: объемные, наполненные различной информацией и предлагающие большое
количество сервисов (услуг). Их создание требует много времени и сил, а также
целой команды разработчиков.
Особенности: Разве что, масштабность проекта. Все остальное, как на
других видах сайтов.
Блог
Все-таки это отдельный вид сайта. Можно называть это как угодно: домашней
страничкой, блогом, журналом, но по сути - это тот же сайт. А отличается он
тем, что посвящен конкретному человеку и его увлечениям. Вообще, блоггинг - это
отдельная тема для разговора.
Ну вот, теперь вы имеете представление об основных видах сайтов. Это знание
поможет вам при планировании своего ресурса или сайта на заказ. Удачи Вам!!!
Общая структура
сайта
При планировании
структуры сайта необходимо продумать несколько основных вещей: структуру
каталогов, структуру навигации, необходимость заставки сайта.
Структура каталогов
С самого начала следует упорядочить содержимое вашего проекта. Все картинки
складывайте в одну папку, служебные файлы в другую, сами страницы также можно
разделить (например, по разделам). Так вам будет проще ориентироваться. Для
этого следует определить структуру вашего будущего сайта. Существует несколько
основных структур:
- линейная - страницы располагаются в определенном
порядке. Переход с одной страницы на другую строго определен. Такая
структура обоснована, например, при обучении. Располагая страницы в
определенном порядке, вы можете быть уверены, что пользователь не
пропустит нужный материал.
- иерархическая - страницы разбиты по категориям и
подкатегориям. Такая структура наиболее удобна.
- произвольная - страницы расположены в свободном
порядке. Такая структура оправдана только для небольших сайтов.
Несколько слов об
именах файлов: пусть они состоят из букв, цифр, символов подчеркивания и не
содержат заглавных букв.
Структура навигации
Это очень важная часть планирования ресурса. Способ доступа к информации на
сайте должен быть простым и понятным. Пользователь в любую минуту должен знать
ответы на следующие вопросы:
- Где я нахожусь?
- Куда могу пойти?
- Как туда добраться?
- Как вернуться
назад?
Для решения этих
задач используются различные варианты. Например, можно как-то выделить страницу
в меню, на которой сейчас находится пользователь, а само меню сделать видимым
на всех страницах сайта.
Также можно сделать так называемые навигационные ключи, т.е. на каждой странице
(сверху) указать полный путь до этой страницы по схеме: главная страница -
название раздела - название страницы.
Вообще, придерживайтесь правила трех кликов, которое гласит, что до
любой страницы сайта пользователь должен добраться не более, чем за три клика
(перехода).
Теперь рассмотрим основные системы навигации:
- Текстовая
система навигации -
самый распространенный вид. Надо сказать, что текстовая навигация должна
присутствовать даже, если вы используете другие системы навигации (так как
она самая надежная). В общем случае, такая навигация представляет собой
оформленные различными способами текстовые ссылки.
Различают горизонтальное и вертикальное меню. Вертикальное располагается
справа или слева каждой страницы. Горизонтальное меню располагается, как
правило, сразу под шапкой сайта. Для повышения удобства рекомендуется
дублировать горизонтальное меню внизу каждой страницы (только не оформлять
его также пышно, как верхнее).
Вертикальное меню вы видите на этом сайте, горизонтальное меню могло бы
выглядеть так:
Главная Делаем сайт Оптимизируем сайт
Раскручиваем сайт
- Кнопки - являются вторыми по частоте
использования элементами навигации. Кнопки могут быть любого размера,
формы, цвета и стиля. Используя их, вам придется подключить к каждой
обработчики событий (например, на javascript), которые будут описывать
действия по нажатию на кнопку или наведения на нее курсора мыши.
Более оптимальным решением является следующее: оставить лишь вид кнопки
(фоном), а текст на ней все-таки оформить в виде ссылки. Этог нетрудно
добиться средствами CSS. Пример обыкновенной кнопочной навигации:
- Навигационные
карты. При таком подходе
берется изображение и к различным его областям привязываются ссылки. Самым
распространенным примером являются туристические карты мира, щелкаете по
ее части с какой-либо страной и попадаете на страницу, посвященную этой стране.
Карты обязательно надо дублировать хотя бы скромным горизонтальным меню
внизу страницы. Иначе, при малейшем сбое пользователь вообще никуда не
сможет перейти.
Пример навигационной карты для сайта магазина бытовой техники могла бы
выглядеть так:
На этом сайте нет страниц, посвященных холодильникам и пылесосам, поэтому
ссылки ведут на эту же страницу, но если вы создадите нужные страницы, то при
щелчке по области с холодильником будет осуществляться переход на страницу про
них. Аналогично и для других областей карты.
Заставки сайта
Вы, наверно, встречали сайты, на которых вместо главной страницы появляется
заставка. Обычно это большая фотография со звуковым сопровождением или
видеоролик. Такие страницы привлекают внимание. Отношение к ним достаточно
противоречивое: одни их приветствуют, других это раздражает.
Делать заставку или нет решать вам, но если вы сделаете выбор в ее пользу, то
не забудьте реализовать функцию, позволяющую пропустить загрузку и
воспроизведение ролика для тех, кто не хочет его просматривать.
Главная страница сайта
Обычно это первая страница, на которую попадает пользователь. Поэтому она
должна удовлетворять некоторым условиям:
- Главная страница
должна отражать тематику сайта.
- Она должна быть
интересной, чтобы пользователю захотелось пройтись по другим страницам
сайта.
- Желательно
разместить на ней функцию поиска по сайту.
- Пусть на ней будет
раздел с постоянно обновляющейся информацией, например: новости, акции,
советы дня.
- Обязательно должен
присутствовать способ обратной связи (e-mail, телефон, адрес).
- Сделайте главную
страницу отличающейся от остальных, но соответствующей общей стилистике
сайта.
Остальные страницы
сайта
Внешний вид всех страниц сайта должен быть выдержан в едином стиле. На них
должно быть указано название ресурса и обязательная ссылка на главную страницу.
В остальном каждая страница должна быть уникальна, т.е. иметь свое содержание.
Причем, следует учесть несколько моментов:
- Следите за длиной
страницы. Если она больше 2,5 экранов, разбейте страницу на две.
- Разбивайте текст на
абзацы, делайте отступы и поля. Выделяйте текст заголовками и
подзаголовками. В общем, сделайте так, чтобы он легко воспринимался.
- Снабжайте текст
картинками и графиками, но не переусердствуйте. Все должно быть
обоснованно.
Вот собственно и все.
Мы рассмотрели все основные структурные части сайта. Надеюсь, что теперь вам
будет проще ориентироваться.
Основные этапы
создания сайта
Условно можно выделить
пять шагов и определить их как основные этапы создания сайта.
1. На первом этапе необходимо сформировать основную идею сайта. Для этого
необходимо ответить на ряд вопросов:
- Какова цель
будущего сайта, т.е. какой результат вы хотите получить с помощью сайта.
Например, целью может быть сбор информации, обучение, развлечения, продажа
услуг или товаров, просто заработок на своем сайте.
- Какова целевая
аудитория будущего сайта (пол, возраст, образование, профессия...), т.е.
для кого вы делаете сайт.
- Каковы предпочтения
вашей целевой аудитории. Чтобы ресурс был успешным, он должен
соответствовать тому, чего от него ожидают ваши посетители. Так выясните,
чего ждет ваша целевая аудитория (какую информацию ищет, как глубоко ее
изучает, наклонности, привычки...). Это поможет вам определить нужный
контент (содержание) вашего ресурса.
- Определение
технических ограничений. Если вы определили вашу целевую аудиторию, то
можете предположить и ее технические возможности. Если ваш посетитель -
обычный среднестатистический пользователь, то и рассчитывать вы можете
только на среднее подключение к сети и программное обеспечение.
Flash-сайты в таком случае лучше не использовать.
- Определение
технологий, которые вы будете использовать. Это зависит от ответов на
предыдущие вопросы. Если ваш сайт будет посвящен музыке, то без
использования мультимедиа вам явно не обойтись. Главное знать меру и не
использовать то, без чего можно обойтись. Помните, чем проще технологии,
тем большее количество посетителей вы можете заполучить.
2. Теперь, когда вы
знаете, для кого вы делаете сайт и с какой целью, можете с уверенностью
определить тип вашего
сайта. Это на первый взгляд может показаться неважным, на самом деле от
этого зависит какие методы проектирования и создания сайта следует
использовать.
3. Теперь, когда вы определились с типом вашего сайта, вашей целевой аудиторией
и выбрали технологии которые вы будете применять, следует определить структуру вашего сайта:
структуру навигации, структуру каталогов, заставку сайта.
4. Теперь можно заняться подготовкой
макета вашего сайта. Макет - это картинка, похожая на снимок экрана в тот
момент, когда сайт открыт в браузере. Сделать это можно, например, в программе
Photoshop.
5. Когда макет готов, получившуюся картинку необходимо перенести в HTML. Те
элементы, которые невозможно представить никаким другим образом, кроме как в
виде изображений, добавляются на html-страницу в виде изображений, остальные же
представляются соответствующими элементами языка HTML. Тому как это сделать
посвящены два урока Делаем
сайт - табличная верстка. В итоге в браузере вы должны увидеть картинку,
максимально близкую к вашему макету.
Такая страница является шаблоном для всех остальных. Создавайте другие
страницы, связывайте их между собой и через какое-то время ваш сайт будет
готов.
Переносим макет
сайта в HTML
Если вы читали Основные этапы создания сайтов,
то знаете, что после этапа создания макета сайта получившуюся картинку нужно
перенести в HTML. Этому процессу и посвящены эти два урока.
Сайт, на котором вы сейчас находитесь, мог бы иметь и другой дизайн.
Предположим, у нас есть вот такой макет:
Эту картинку нам надо перенести в HTML. Попробуем сделать так называемый
фиксированный дизайн, взяв за основу таблицу. Поэтому наложим на эту картинку
сетку таблицы, чтобы разделить на структурные элементы, например, так:
Целиком наша картинка имеет размеры 800 х 600 пикселов, значит и наша
таблица-каркас будет иметь размеры 800 х 600 пикселов. Далее, мы разделили нашу
картинку на 7 частей, на эти же 7 ячеек мы разделим и нашу таблицу. Первую
часть нашей картинки оставим без изменений, а в остальных частях удалим текст
(его мы вернем при помощи HTML).
Теперь надо подготовить наши 7 картинок, например, в программе ImageReady (как
это сделать читайте на странице Подготовка
графики с помощью ImageReady). Для удобства дадим им имена в виде im_01.gif
- im_07.gif и сложим в папку с названием im.
Теперь создадим папку site на любом диске компьютера, поместим в нее папку im с
картинками и сюда же будем складывать все наши страницы.
Создайте страницу index.html с каркасом нашей таблицы:
<html>
<head>
<title>Как сделать сайт</title>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
</head>
<body>
<table
width="800" height="600" border="0"
cellpadding="0" cellspacing="0">
</table>
</body>
</html>
Теперь определим
структуру таблицы, она состоит из пяти строк и трех столбцов:
Первая строка состоит из трех столбцов, причем третий столбец объединяет три
строки (ячейки 1, 2 и 3).
Вторая строка состоит из одного столбца, включающего в себя два (ячейка 4).
Третья строка состоит из одного столбца, включающего в себя два (ячейка 5).
Четвертая строка состоит из одного столбца, включающего в себя три (ячейка 6).
Пятая строка состоит из одного столбца, включающего в себя три (ячейка 7).
Запишем это:
<html>
<head>
<title>Как сделать сайт</title>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
</head>
<body>
<table
width="800" height="600" border="1"
cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td
rowspan="3">3</td>
</tr>
<tr>
<td
colspan="2">4</td>
</tr>
<tr>
<td
colspan="2">5</td>
</tr>
<tr>
<td
colspan="3">6</td>
</tr>
<tr>
<td
colspan="3">7</td>
</tr>
</table>
</body>
</html>
Сейчас наша таблица
выглядит так:
Зададим ширину и высоту каждой ячейки, а фоном сделаем подготовленные картинки,
уберем рамку у таблицы (border="0").
Чтобы задать размеры ячеек, нужно знать размеры картинок, которые в них будут
располагаться. Наша картинка im_01.gif имеет размер 352 х 31 пикселов, картинка
im_02.gif имеет размер 398 х 31 пикселов и т.д. Именно эти размеры мы и укажем
в качестве размеров ячейки:
<html>
<head>
<title>Как сделать сайт</title>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
</head>
<body>
<table
width="800" height="600" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td
width="352" height="31"
background="im/im_01.gif">
</td>
<td
width="398" height="31"
background="im/im_02.gif">
</td>
<td
rowspan="3" width="50" height="183"
background="im/im_03.gif">
</td>
</tr>
<tr>
<td
colspan="2" width="750" height="112"
background="im/im_04.gif">
</td>
</tr>
<tr>
<td
colspan="2" width="750" height="40"
background="im/im_05.gif">
</td>
</tr>
<tr>
<td
colspan="3" width="800" height="366"
background="im/im_06.gif">
</td>
</tr>
<tr>
<td
colspan="3" width="800" height="51"
background="im/im_07.gif">
</td>
</tr>
</table>
</body>
</html>
Теперь наша страница
выглядит так, как мы и хотели:
Сейчас наша страница прижимается к левому краю, исправим это с помощью
параметра align="center" тега <table> и зададим
фоновый цвет окна параметром bgcolor тега <body>.
...
<body
bgcolor="#477B1D">
<table
width="800" height="600" border="0"
cellpadding="0" cellspacing="0"
align="center">
...
Отлично, мы перенесли
нашу картинку в HTML, остался один нюанс. Сейчас фоном ячейки, где будет
контент, является картинка белого цвета (im_06.gif). Но картинка занимает место
и при этом не несет никакой информации, поэтому разумно ее удалить, а белый
цвет задать параметром bgcolor.
...
<tr>
<td
colspan="3" width="800" height="366"
bgcolor="#FFFFFF">
</td>
</tr>
...
На следующем уроке
зададим слоган, пункты меню и создадим остальные страницы сайта.
Делаем шаблон
будущего сайта
Если помните, во
второй ячейке нашего макета должен располагаться слоган. Этой ячейке
соответствует второй столбец первой строки нашей таблицы (где
background="im_02.gif"). Напишем в этом столбце наш слоган и
выровняем его по горизонтали - справа, по вертикали - кверху:
...
<td
width="398" height="31" background="im/im_02.gif"
align="right"
valign="top">
создаем,
раскручиваем, зарабатываем
</td>
...
На макете слоган
белого цвета и выделен полужирным курсивом:
...
<td width="398"
height="31" background="im/im_02.gif"
align="right" valign="top">
<font
color="#FFFFFF"><strong><em>
создаем, раскручиваем, зарабатываем
</em></strong></font>
</td>
...
Теперь нужно сделать
меню. На макете это пятая ячейка. Этой ячейке соответствует единственный
столбец третьей строки нашей таблицы (где background="im_05.gif").
Чтобы наше меню было аккуратным, поместим его в таблицу. Она будет состоять из
одной строки и четырех столбцов (именно столько у нас пунктов меню). Чтобы
пункты меню располагались так, как на макете, выровняем таблицу по правому
краю:
...
<td
colspan="2" width="750" height="40"
background="im/im_05.gif">
<table
align="right">
<tr><td></td><td></td><td></td><td></td></tr>
</table>
</td>
...
Теперь подумаем, что
собой представляют пункты меню, правильно это ссылки на соответствующие
страницы сайта. Сами страницы мы создадим чуть позже, пока же дадим им названия:
- оптимизируем сайт -
opt.html
- раскручиваем сайт -
unt.html
Напишим наши пункты меню и сделаем их ссылками:
...
<td
colspan="2" width="750" height="40"
background="im/im_05.gif">
<table
align="right">
<tr>
<td>
<a
rel="nofollow ugc" target="_blank" href="do.html">делаем сайт</a>
</td>
<td>
<a
rel="nofollow ugc" target="_blank" href="opt.html">оптимизируем сайт</a>
</td>
<td>
<a
rel="nofollow ugc" target="_blank" href="unt.html">раскручиваем сайт</a>
</td>
<td>
<a
rel="nofollow ugc" target="_blank" href="ear.html">зарабатываем</a>
</td>
</tr>
</table>
</td>
...
Теперь наше меню
выглядит так:
А нам надо, чтобы оно занимало всю зеленую полоску, было белого цвета и без
подчеркивания.
Как вы помните, если не задавать ширину таблицы, то она формируется по
содержимому. Значит, если мы зададим таблице ширину равную ширине зеленой
полоски, то наши пункты займут всю зеленую полоску.
Чтобы текст был белого цвета, заключим его в теги <font> </font>
и в теги <strong> </strong> - для полужирного начертания.
Наконец, чтобы убрать подчеркивание, зададим тегу <a> параметр style="text-decoration:none".
Этот параметр, откровенно говоря, относится к CSS, но здесь без него не
обойтись:
...
<td
colspan="2" width="750" height="40"
background="im/im_05.gif">
<table
align="right">
<tr>
<td>
<a
rel="nofollow ugc" target="_blank" href="do.html" style="text-decoration:none">
<font color="#FFFFFF"><strong>
делаем сайт
</strong></font>
</a>
</td>
<td>
<a
rel="nofollow ugc" target="_blank" href="opt.html" style="text-decoration:none">
<font color="#FFFFFF"><strong>
оптимизируем сайт
</strong></font>
</a>
</td>
<td>
<a
rel="nofollow ugc" target="_blank" href="unt.html" style="text-decoration:none">
<font color="#FFFFFF"><strong>
раскручиваем сайт
</strong></font>
</a>
</td>
<td>
<a
rel="nofollow ugc" target="_blank" href="ear.html" style="text-decoration:none">
<font
color="#FFFFFF"><strong>
зарабатываем
</strong></font>
</a>
</td>
</tr>
</table>
</td>
...
Теперь наше меню
выглядит так:
Если есть желание можете поменять шрифт и размер.
Теперь займемся контентом, он занимает всю четвертую строку нашей таблицы. Если
сейчас написать там текст, то он будет вплотную прижиматься к границам ячейки
(ведь наша таблица имеет параметры cellpadding="0" и
cellspacing="0").
Для того, чтобы иметь возможность оформлять наш контент, его необходимо также
поместить в таблицу (состоять она будет из одной строки и одного столбца) и
задать ей необходимые параметры.
Кроме того, чтобы содержимое контента отображалось как надо, т.е. с самого
верха страницы, необходимо добавить параметр valign="top" тегу
<td> основной таблицы:
...
<tr>
<td
colspan="3" width="800" height="366"
bgcolor="#FFFFFF" valign="top">
<table
cellpadding="20" cellspacing="0">
<tr><td>Добро пожаловать
на сайт о сайтах</td></tr>
</table>
</td>
</tr>
...
Вот теперь шаблон
нашего сайта готов. Создавайте страницы, соответствующие пунктам меню,
скопируйте в них код этой страницы, меняйте только название страниц (теги <title></title>)
и наполняйте их нужным контентом. Кстати, не забудьте на всех страницах сделать
ссылку на главную страницу (index.html).
Рабочий пример можно посмотреть здесь.
Заключение
Вы, конечно, обратили внимание, что код нашей страницы громоздкий. Это издержки
HTML. Но его можно сделать компактным и читабельным, если использовать CSS -
каскадные таблицы стилей. Кроме того, CSS обладает гораздо большими
возможностями по оформлению страниц. Поэтому настоятельно рекомендую изучить
эту технологию. А наши уроки на этом закончены.
Блочная верстка
сайта
Если вы читали статью
"Основные этапы
создания сайта", то помните, что верстка сайта происходит после этапа
создания макета. Иными словами, у вас должны быть готовы картинки всех ключевых
страниц сайта.
Будем считать, что они сделаны и посмотрим на примере, как из картинки сделать
html-страницу, причем страницу сверстаем с помощью блоков. Именно этим блочная
верстка сайта и отличается от табличной, в основе которой лежит таблица.
Итак, мы имеем вот такую картинку (макет подготовлен в программе Photoshop).
Создадим папку, назовем ее, например, restaurant. В нее создадим и положим две
страницы: index.html и style.css, а также папку images, куда будем складывать
картинки. Все ссылки в примерах будут иметь относительные адреса, исходя из
данной структуры.
Теперь посмотрим на наш макет. Для начала выключим весь текст. Конечно, в
Photoshop можно нарисовать очень красивое название сайта, но с точки зрения
дальнейшей оптимизации страниц сайта для его продвижения, лучше, чтобы название
сайта являлось текстом, а не картинкой.
Теперь разделим нашу картинку на блоки. Это можно сделать по-разному, например,
так:
Именно такие картинки, с такими названиями мы и сложим в папку images. Обратите
внимание, картинка reklama_bg будет фоном, поэтому ее можно сохранить в виде
тонкой полоски, так же можно поступить и с картинкой footer. Еще нам понадобится
картинка с фоном всей страницы, вот такая:
Последний
нюанс, у сайта может быть фиксированный либо резиновый дизайн. Рассмотрим
сначала фиксированный, т.е. ширина нашей страницы будет всегда одинакова - 800
пикселов. Теперь все готово для верстки, открываем index.html и пишем
стандартный код:
<html>
<head>
<title> Блочная верстка сайта </title>
<link
rel="stylesheet" type="text/css" rel="nofollow ugc" target="_blank" href="style.css">
</head>
<body>
</body>
</html>
Теперь в теги <body>
</body> поместим блок с идентификатором main и разместим в нем
все намеченные нами на картинке блоки:
<html>
<head>
<title> Блочная верстка сайта </title>
<link rel="stylesheet"
type="text/css" rel="nofollow ugc" target="_blank" href="style.css">
</head>
<body>
<div
id="main">
<div
id="header"></div>
<div
id="menu1"></div>
<div
id="menu2"></div>
<div
id="menu3"></div>
<div
id="reklama">
<div id="reklama_top"></div>
<div id="reklama_text"></div>
<div id="reklama_bottom"></div>
</div>
<div
id="content"></div>
<div
id="footer"></div>
</div>
</body>
</html>
Теперь с помощью
таблицы стилей (style.css) зададим положение, размер и фон этих блоков. Блок main
имеет ширину 800px, фоновый рисунок fon_bg.jpg, который повторяется по
вертикали:
#main{
width:800px;
background-image:
url(images/fon_bg.jpg);
background-repeat: repeat-y;
}
Блок header
находится в нормальном потоке, имеет ширину 800px и высоту 155px (это размеры
фонового рисунок header.jpg, который не повторяется ни по горизонтали, ни по
вертикали):
#header{
width:800px;
height:155px;
background-image:
url(images/header.jpg);
background-repeat:no-repeat;
}
Блоки menu1,
menu2, menu3 находятся
в нормальном потоке, имеют ширину 800px, а высоты 35px для menu1, 36px - для menu2 и 72px - для
menu3 (это размеры соответствующих фоновых рисунков):
#menu1{
width:800px;
height:35px;
background-image:
url(images/menu1.jpg);
background-repeat:no-repeat;
}
#menu2{
width:800px;
height:36px;
background-image:
url(images/menu2.jpg);
background-repeat:no-repeat;
}
#menu3{
width:800px;
height:72px;
background-image:
url(images/menu3.jpg);
background-repeat:no-repeat;
}
Блоки reklama и content будут плавающими. Чтобы блок content прижимался к правой стороне блока reklama мы зададим обоим свойство float:left. Ширина
блока reklama - 263px (по фоновому рисунку), а блока content -
все остальное пространство, т.е. 507px.
Блок reklama, в свою очередь, состоит из трех блоков:
reklama_top (ширина 263px, высота 67px (по фоновому рисунку),
reklama_text (ширина 263px, высота будет зависеть от содержания, а
фоновый рисунок будет повторяться по вертикали),
reklama_bottom (ширина 263px, высота 35px (по фоновому рисунку).
Все три блока находятся в нормальном потоке. Запишем это:
#reklama{
float:left;
width:263px;
}
#reklama_top{
width:263px;
height:67px;
background-image:
url(images/reklama_top.jpg);
background-repeat:no-repeat;
}
#reklama_text{
width:263px;
background-image:
url(images/reklama_bg.jpg);
background-repeat:
repeat-y;
}
#reklama_bottom{
width:263px;
height:35px;
background-image:
url(images/reklama_bottom.jpg);
background-repeat:no-repeat;
}
#content{
float:left;
width:507px;
}
И последний блок - блок footer. Его
ширина 800px, высота 28px, фоном является повторяющийся по горизонтали рисунок
footer.jpg. Чтобы этот блок расположился ниже предыдущих, мы запретим его
обтекание с обеих сторон свойством clear:both.
#footer{
clear:both;
width:800px;
height:28px;
background-image:
url(images/footer.jpg);
background-repeat: repeat-x;
}
Сейчас наша страница
выглядит так. Она прижата к левому краю и имеет отступы сверху и
слева. Давайте ее отцентрируем и уберем ненужные отступы. Проблема с отступами
решается добавлением свойства margin:0px для body. Центрировать
будем так же, как делали это в примере о
выравнивании страниц.
body{
width:800px;
padding-left:50%;
margin:0px;
}
#main{
width:800px;
margin-left:-400px;
background-image:
url(images/fon_bg.jpg);
background-repeat: repeat-y;
}
Осталось наполнить
страницу нужным текстом, этим мы займемся в следующем уроке. В качестве
тренировки, можете взять любую картинку и перенести ее аналогичным образом в
html.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.