УРОКИ CSS для начинающих. Базовый курс.


Урок 3. Который на самом деле не урок, а только подготовка страниц нашего сайта к работе с таблицами стилей.

Напомню: созданная в уроках по HTML главная страница сайта, выглядит так:

Уроки css для начинающих
Рис. 1

Мы задавали цвет, тип и размер шрифта с помощью тега <font> и его атрибутов color, face и size. Подчёркивание текста - тегом <u>; курсивное начертание шрифта - тегом <i>; выравнивали текст при помощи атрибута align… Всё это и многое другое можно задавать не в коде страницы, а в отдельном файле с таблицами стилей.

Давайте сейчас подготовим страницу к выполнению упражнений, удалив из кода все перечисленные теги и атрибуты (в листинге отмечено красным):

Листинг 3.1.

……
<body text="#000000" bgcolor="#CCCCCC" background="img/fon.jpg" topmargin="0" leftmargin="0">
<table WIDTH="1240"
BORDER="2" BORDERCOLOR=”#6600CC” cellpadding="5">
<tr height="150">
<td
align="center"> <img src="img/dog.jpg" height="150" WIDTH="200" alt="Всё о собаках">
</td>
<td colspan="2" align="center"> <H1>
<font color="#008000"> ВСЁ О СОБАКАХ </font></H1>
</td>
</tr>
<tr height="40">
<td colspan="3"
align="center" bgcolor="#008000"> Здесь будет рекламный баннер </td>
</tr>
<tr>
 <td WIDTH="200"
align="center" valign="top">
<font face="Verdana">
<div>
Главная <br>
<a href="poroda.htm"> Породы </a> <br>
Выбор <br>
Содержание <br>
Дрессировка <br>
Выставки <br>
<a href="mailto:pochta@mail.ru?subject=Hello&Body=text&cc=
copy@mail.ru&bcc=hidden_copy@mail.ru">
Контакты </a>
</div>
</font>
</td>
<td align="justify" valign="top">
<font face="Verdana" size="+0">
<div align="center">
<H3> <font color="#008000" face="Verdana"><u> <a name="начало_страницы"> Собака - друг человека. </a> </u></font></H3></div>  
<palign="justify"> <i>Содержание и разведение собак - часть мировой культуры, историческая традиция, восходящая к тем древним временам, когда у далёкого нашего предка появился преданный друг, помогавший добывать пищу и охранять жилище.</em></p>
<p align="justify"> За долгие века привязанность человека к братьям его меньшим не утратила своей теплоты, а собаки остаются для людей помощниками и компаньонами.</p>
<p align="justify"> Вопрос о происхождении собаки до настоящего времени остаётся открытым. Точно не установлено, от какого предка и в какой части земного шара произошла собака. Одни учёные предполагают, что родоначальниками далёких предков собак могли быть волки и шакалы. Доказательство этому - биологическая близость видов, сходство их внешних форм, внутреннего строения и поведения. Другие более вероятным считают, что собака произошла от нескольких вымерших её диких видов, останки которых найдены в позднейших отложениях третичного периода. Подтверждением тому служит огромное разнообразие существующих пород и большое различие между ними.</p>
<p align="justify"> Древнейшие породы северных волкообразных собак могли произойти от прирученного дикого волка или гибрида волка и так называемой болотной, или торфяной, собаки. В последующем от них повели свой род многие пастушьи собаки. Это предположение подтверждается найденными останками разных видов первобытных собак в северо-западных и северо-восточных районах нашего континента...</p>
<p align="center"> <a href="#начало_страницы"> К началу страницы </a></p>
</td>
<td WIDTH="200"
align="center" valign="top"> Здесь будет разная служебная информация: форма подписки на рассылку, информация о партнёрских программах и пр.
<Hr align="center" size="5" NoShade>
<table border="1" background="img/white.gif">
<tr>
<td width="50">
Дата </td>
<td>
Время </td>
</tr>
<tr>
<td width="50">
6. 12. 2009 г. </td>
<td>
10.00-12.00 </td>
</tr>
<tr>
<td width="50">
13.12. 2009 г. </td>
<td>
10.30-12.30 </td>
</tr>
<tr>
<td width="50">
20. 12. 2009 г. </td>
<td>
10.00-13.00 </td>
</tr>
</table>
</td>
</tr>
 </table>
</body>
</html>

Теперь код должен выглядеть так:

Листинг 3.2.

……
<body topmargin="0" leftmargin="0">
<table WIDTH="1240"
cellpadding="5">
<tr height="150">
<td> <img src="img/dog.jpg" height="150" WIDTH="200" alt="Всё о собаках">
</td>
<td colspan="2"> <H1>
ВСЁ О СОБАКАХ </H1>
</td>
</tr>
<tr height="40">
<td colspan="3"
> Здесь будет рекламный баннер </td>
</tr>
<tr>
 <td WIDTH="200"
valign="top">

<div>
Главная <br>
<a href="poroda.htm"> Породы </a> <br>
Выбор <br>
Содержание <br>
Дрессировка <br>
Выставки <br>
<a href="mailto:pochta@mail.ru?subject=Hello&Body=text&cc=
copy@mail.ru&bcc=hidden_copy@mail.ru">
Контакты </a>
</div>
</td>
<td >
<div >
<H3> <a name="начало_страницы"> Собака - друг человека. </a> </H3></div>  
<p> Содержание и разведение собак - часть мировой культуры, историческая традиция, восходящая к тем древним временам, когда у далёкого нашего предка появился преданный друг, помогавший добывать пищу и охранять жилище.</p>
<p> За долгие века привязанность человека к братьям его меньшим не утратила своей теплоты, а собаки остаются для людей помощниками и компаньонами.</p>
<p> Вопрос о происхождении собаки до настоящего времени остаётся открытым. Точно не установлено, от какого предка и в какой части земного шара произошла собака. Одни учёные предполагают, что родоначальниками далёких предков собак могли быть волки и шакалы. Доказательство этому - биологическая близость видов, сходство их внешних форм, внутреннего строения и поведения. Другие более вероятным считают, что собака произошла от нескольких вымерших её диких видов, останки которых найдены в позднейших отложениях третичного периода. Подтверждением тому служит огромное разнообразие существующих пород и большое различие между ними.</p>
<p> Древнейшие породы северных волкообразных собак могли произойти от прирученного дикого волка или гибрида волка и так называемой болотной, или торфяной, собаки. В последующем от них повели свой род многие пастушьи собаки. Это предположение подтверждается найденными останками разных видов первобытных собак в северо-западных и северо-восточных районах нашего континента...</p>
<p> <a href="#начало_страницы"> К началу страницы </a></p>
</td>
<td WIDTH="200">
Здесь будет разная служебная информация: форма подписки на рассылку, информация о партнёрских программах и пр.
<Hr>
<table>
<tr>
<td width="50">
Дата </td>
<td>
Время </td>
</tr>
<tr>
<td width="50">
6. 12. 2009 г. </td>
<td>
10.00-12.00 </td>
</tr>
<tr>
<td width="50">
13.12. 2009 г. </td>
<td>
10.30-12.30 </td>
</tr>
<tr>
<td width="50">
20. 12. 2009 г. </td>
<td>
10.00-13.00 </td>
</tr>
</table>
</td>
</tr>
 </table>
</body>
</html>

А страница - так:

Уроки css для начинающих
Рис. 2

То есть, исчезли границы ячеек и всей таблицы, текст потерял форматирование.

Проделайте такую подготовительную работу и для страницы poroda.htm (там мы будем определять стили для списков). После всех манипуляций страница poroda.htm принимает вот такой вид:

Уроки css для начинающих
Рис. 3

Не забудьте привязать и к этому файлу файл стилей style.css, как мы это делали во втором уроке.

И переходите к следующему уроку >>>>>>>.

Успехов.

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

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:


Комментарий добавил(а): Константин
14-11-2011
00 час. 57 мин.

Комментарий:
слектор float не работает в 8 EI в опере и мозиле работает а тут нет как разобраться ?

Ответ: По-видимому, Вам нужно выровнять какой-то блок на странице сайта по левому или правому краю? К сожалению, с браузерами такие вещи наблюдаются сплош и рядом: одни отображают всё отлично, другие наотрез отказываются. Что делать? Предъявлять претензии создателям браузеров безполезно. Приходится как-то выкручиваться самому. Например, отказываться от использования того или иного атрибута, заменять его чем-то другим. Атрибут float указывает браузеру, что элемент страницы - плавающий. И служит для выравнивания какого-либо элемента на странице. Иными словами, можно сказать, что float - это аналог атрибута align. Может быть, можно из этого и исходить, заменив float на align? (я, как Вы понимаете, не знаю всей проблемы, потому и предлагаю самое простое). Или, если Вы с помощью float пробуете выровнять слои, заменить слои вложенными таблицами? Надеюсь, я хоть немного помог. Если нет, обращайтесь, не стесняйтесь.

Новые статьи

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта




51 - 1 - 38