Отправляет email-рассылки с помощью сервиса Sendsay

Создание сайтов (HTML CSS PHP MySQL JavaScript ActionScript)

Рассылка закрыта

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

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2012   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
webonlife

Статистика

242 подписчиков
+35 за неделю
←   Все выпуски   →

Создание сайтов (HTML CSS PHP MySQL JavaScript ActionScript) Преимущества CSS


Преимущества CSS

В этом уроке мы рассмотрим основные понятия в CSS и преимущества стилей. Для начала вернемся к нашему пчелиному сайту. Как вы помните, он состоит из двух совершенно отвратительных по своему внешнему виду веб-страниц). Давайте, чтоб рассмотреть больше примеров, и чтоб изучать в ближайшем будущем PHP, добавим еще одну страницу на сайт. Назовем эту страницу "Новости сайта" а файл - news.html. Создадим эту страницу по шаблону нашего сайта (скопируем код с других страниц но без заполнения информацией, т. е. код пустой веб-страницы и пустую таблицу). Не забудьте поменять название страницы при копировании кода. В главную колонку напишите какую-либо новость, чтоб был эффект заполненности. Также добавьте эту страницу в главное меню сайта (верхнюю ячейку). Я не буду объяснять как это сделать так как вы это уже должны были хорошо усвоить с предыдущих уроков. А расскажу я как сделать меню в левой колонке страниц сайта. Вставляем эту таблицу в левую колонку (между тегами <td> и </td>) каждой страницы:

<table border="3">
<tr><td> Главное меню </td></tr>
<tr><td>
<a href="index.html"> Главная </a> <br />
<a href="news.html"> Новости сайта </a> <br />
<a href="contact.html"> Обратная связь </a> <br />
<a href="http://pirogoff.16mb.com"> pirogoff.16mb.com </a>
</td></tr>
</table>

Главное меню
Главная
Новости сайта
Обратная связь
pirogoff.16mb.com

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

Есть четыре способа подключения стилей на страницу. Мы обязательно их все рассмотрим в учебнике по CSS. Но сейчас мы находимся в учебнике по созданию сайтов и поэтому мы рассмотрим лишь один способ - самый практичный. Способ этот заключается в том, чтобы стили описать в отдельном файле а затем подключить файл к каждой странице сайта. Становится очевидным одно преимущество: если нужно добавить стиль или изменить а он применяется на нескольких страницах сайта (бывает и на нескольких десятках страниц а то и сотен) то не нужно вносить изменения на каждую страницу, достаточно открыть файл со стилями и там один раз внести изменение. Не такое очевидное но не менее значимое преимущество - ускорение загрузки страниц по отношению к тем, в которых чтили описаны в самом коде страниц. Дело в том, что браузеры записывают такие файлы в память при первом обращении а затем используют его со своей памяти при повторных обращениях. Создадим файл style.css. Чтобы добавить его на страницу, нужно после контейнера заголовка страницы написать строку <link rel="stylesheet" type="text/css" href="style.css">. Ну куда вставлять имя файла, думаю, понятно. Чтобы использовать просто имя файла нужно чтобы сам файл находился в том же каталоге, что и страница на которой он используется (тот же принцип, что и в ссылках). Пример подключения файла на страницу:

...........
<head>
<title>Название страницы</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
...........

Базовый синтаксис CSS

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

селектор { свойство: значение; свойство: значение; }

Из трех видов селекторов нам на данный момент интересными являются два - селекторы типов (для HTML еще можно сказать "селекторы тегов") и селекторы классов. Селекторы тегов, как вы можете догадаться, обозначают теги HTML к которым мы хотим применить стили. Селекторы классов позволяют определить разный набор стилей для одного элемента.

Создаем и подключаем стили к сайту

Подключим наш файл стилей к каждой странице нашего сайта и начнем создавать стили. В первую очередь определимся с шириной столбцов на наших страницах. Левый и правый столбцы должны быть достаточными по ширине, чтобы там нормально размещались всякие менюшки, рекламки и тому подобное. Для себя я определил, что эта ширина для менюшек (слева) - 200 пикселей, а для рекламок и объявлений (справа) - 250 пикселей. Есть очень много единиц измерения в CSS (проценты, дюймы, миллиметры, пункты и т.д.), чтобы не путаться я стараюсь использовать пиксели там где это возможно. Чтобы указать разную ширину для одних и тех же элементов (элемент td в данном случае), нам нужно использовать селекторы классов. Итак, код в файле style.css:

/* Так в CSS вставляется комментарий, принцип тот же что и в HTML, всего лишь другими знаками выделяется) */
td.left {width: 200px;}
td.right {width: 250px;}
/* td - это элемент к которому применяется стиль, left и right - это имена классов, они записываются после точки, width - это ширина элемента. */

Предупреждаю, помимо ошибок в коде, можно просто поставить лишний пробел и стили работать не будут. Будьте внимательны. Код таблиц на страницах нашего сайта про мед:

<table border="3">
<tr><td class="up" colspan="3"> ...... </td></tr>
<tr>
<td class="left">
......
</td>
<td class="main">
......
</td>
<td class="right">
</td>
</tr>
<tr><td class="bottom" colspan="3"></td></tr>
</table>

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

Теперь наша менюшка слева должна занять всю ширину столбца (так красивее). Поскольку, теоретически все таблицы сайта должны занимать 100% ширины родительского контейнера (в котором они находятся), укажем это значение для свойства селектора тега а не класса (если надо будет отменить данное значение для какой-либо таблици то мы это сделаем переопределением значения для свойства селектора класса и присвоим имя класса для нужной таблици):

table {width: 100%;}

В результате мы имеем таблицу с шириной 100% по отношению к родительскому контейнеру). Теперь нам нужно, чтобы содержимое столбцов находилось не посередине а начиналось сверху. Определим этот стиль для троих классов, которые мы расположим через запятую перед определением:

td.left, td.main, td.right { vertical-align:top; }
/* vertical-align - это выравнивание по вертикали, top - сверху. td.left - это, на самом деле, комбинированый селектор тега и класса, селектор класа же обозначается просто .left*/

Комбинированый селектор используется для уточнения что этот класс используется именно для этого елемента. Селектор класса же можно использовать для любого елемента но это может быть не умесно и потому не работать или работать неправильно для некоторых елементов. По тому же принципу укажем внутренние отступы от границ для всех столбцов и изображений:

td, img { padding: 6px; }
/* padding - это внутренний отступ от граници елемента.*/

Еще один маленький штришок - отступ в первой строке абзаца:

p {text-indent: 20px;}

Здесь находится полный список CSS-операторов . Если вы, как я, пользуетесь редактором Macromedia Dreamweawer, то при наборе кода редактор вам выдает подсказки и вам не нужно все помнить или смотреть в справочники. Но все же рекомендую, не сразу - постепенно, запоминать то, что приходится часто использовать и помнить о существовании того, что использовать приходится или придется, хоть и не часто)). Теперь давайте уберем видимость границ таблиц на сайте. Если вдруг нам понадобится снова сделать их видимыми то мы используем для этого стили.

Вот и все на сегодня. Всем удачи!

Читать далее

В избранное