Выбери любимый жанр

Вы читаете книгу

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

Мухутдинов Евгений

Выбрать книгу по жанру

Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интерн - Мухутдинов Евгений - Страница 14

Изменить размер шрифта:

Использование таблиц

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

На данный момент использование таблиц для верстки считается вчерашним днем, но, как бы то ни было, они применяются и наверняка будут применяться еще долго. Дело в том, что использование таблиц – быстрореализуемый вариант, когда тот или иной элемент веб-страницы не получается правильно разместить другими способами.

В качестве эксперимента добавим на нашу веб-страницу под рисунками небольшую таблицу, состоящую из двух строк и двух столбцов (четыре ячейки), добавив немного кода (листинг 3.2).

Листинг 3.2. Добавление таблицы под рисунками <html>

<html>

<head>

</head>

<body>

<img src="http://pcbee.ru/wp-content/uploads/2011/08/mfu_0.jpg"

alt="МФУ для дома фото" width="200" height="200">

<img src="mfu_0.jpg" alt="МФУ для дома фото" width="200"

height="200">

<table>

<tr>

<td>Ячейка 1</td>

<td>Ячейка 2</td>

</tr>

<td>Ячейка 3</td>

<td>Ячейка 4</td>

</body>

</html>

При просмотре в браузере мы видим, что под рисунками появилась таблица с прозрачными границами, состоящая из четырех ячеек. В каждой ячейке есть надпись – Ячейка 1, Ячейка 2, Ячейка 3, Ячейка 4 (рис. 3.15).

Рис. 3.15. На странице появилась таблица с невидимыми границами, состоящая из четырех ячеек

Теперь мы предлагаем вам самостоятельное задание. Необходимо поместить первое изображение вместо надписи Ячейка 1, а второе – вместо надписи Ячейка 4. Если вы все сделаете правильно, то результат будет таким, как на рис. 3.16.

Рис. 3.16. Изображения в ячейках таблицы

Пример с использованием таблицы в качестве инструмента позиционирования изображений выбран неслучайно. Таблицу мы будем применять при описании конкретных вариантов размещения рекламных блоков.

Теперь пора перейти от обычных таблиц к каскадным таблицам стилей.

Введение в CSS

Ранее мы добавляли атрибуты к тегу img. Как вы понимаете, другие теги тоже могут содержать атрибуты, но иногда нет необходимости добавлять их в код HTML-страницы, о чем мы сейчас и расскажем.

Изначально заголовок на нашей странице размещен по левому краю и имеет черный цвет. Допустим, нужно выровнять его по центру и установить для него зеленый цвет. Для этого вносим изменения в код страницы в контейнере <h1></h1>: <h1 align="center"> <font color="green"> ФУ для дома</h1>, после чего заголовок будет размещен по центру страницы и окрасится в зеленый цвет (рис. 3.17).

Рис. 3.17. Заголовок размещен по центру за счет атрибута align

Если сайт состоит из 1000 страниц, то подобные изменения придется вносить в заголовки каждой из них.

Может случиться так, что через некоторое время снова понадобится разместить заголовок по левому краю, а цвет сделать синим. В этом случае придется вновь править код 1000 страниц. Как вы понимаете, это крайне неудобно. По этой причине все параметры форматирования (изменения внешнего вида) страницы выгодней держать в так называемых каскадных таблицах стилей – CSS. В таблице стилей можно указать, каким образом должно форматироваться содержимое тех или иных тегов веб-страницы, после чего один-единственный файл со стилями можно подключить к 1000 страницам и таким образом изменить их форматирование. Иными словами, изменения в каскадной таблице стилей приведут к изменениям на всех веб-страницах, к которым она подключена.

Перед созданием каскадной таблицы стилей мы уберем все форматирование заголовка первого уровня, то есть вернем все к состоянию, изображенному на рис. 3.16. Каскадную таблицу стилей мы будем создавать с помощью все того же Блокнота. Откройте Блокнот и наберите код из листинга 3.3.

Листинг 3.3. Содержимое файла каскадной таблицы стилей

{

text-align: center;

color: green;

font-style:italic;

}

Наша таблица стилей должна отформатировать заголовок первого уровня следующим образом:

• выравнивание: по центру;

• цвет: зеленый;

• начертание: курсив.

Созданную таблицу стилей необходимо сохранить подобно тому, как мы сохраняли веб-страницу, но указать расширение. css. В нашем случае мы сохранили файл под именем style.css.

Для того чтобы подключить каскадную таблицу стилей к веб-странице, добавим в код страницы ссылку на CSS: <link rel="stylesheet" type="text/ css" href="style.css"> сразу перед закрывающим тегом </head>. Код нашей страницы на этом этапе выглядит, как в листинге 3.4.

Листинг 3.4. Код веб-страницы с подключенной таблицей CSS <html>

<html>

<head>

<!– Комментарий. Подключаем таблицу стилей –>

</head>

<body>

<table>

<tr>

<td>Ячейка 2</td>

</tr>

<td>Ячейка 3</td>

<td> <img src="mfu_0.jpg" alt="МФУ для дома фото" width="200"

height="200"> </td>

</body>

</html>

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

Совет

При создании или правке веб-страниц не ленитесь добавлять комментарии, так как в дальнейшем они помогут сэкономить время. Человек не в состоянии запомнить все, что он когда-то делал, поэтому комментарии дадут возможность освежить память. Если вы собираетесь удалять с веб-страницы большой фрагмент кода, но сомневаетесь в своих действиях, лучше «закомментируйте» этот фрагмент. Если понадобится вернуть все в исходное состояние, достаточно будет удалить теги комментариев.

После подключения каскадной таблицы стилей к веб-странице оценим полученный результат в браузере (рис. 3.18).

Рис. 3.18. Страница с подключенной таблицей стилей

Итак, мы создали веб-страницу и подключили к ней каскадную таблицу стилей. Теперь можно поставить заключительную точку: загрузить результат нашей работы в Интернет.

Перейти на страницу:

Выбрать книгу по жанру

Фантастика и фэнтези

Детективы и триллеры

Проза

Любовные романы

Приключения

Детские

Поэзия и драматургия

Старинная литература

Научно-образовательная

Компьютеры и интернет

Справочная литература

Документальная литература

Религия и духовность

Юмор

Дом и семья

Деловая литература

Жанр не определен

Техника

Прочее

Драматургия

Фольклор

Военное дело

Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интерн - Мухутдинов Евгений - Страница 14

Связь с нами