Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Подготовка html-файлов для подключения CSS.

Viktor | 24.02.2014 | нет комментариев

Как подготовить web-страницу к подключению каскадной таблицы стилей?

Итак, давайте приступим к изучению CSS – каскадных таблиц стилей.

Как было отмечено ранее, с помощью CSS можно разделить HTML-код веб-страницы и дизайн страницы, т.е. изменением кода файла style.css можно координально изменить внешний вид всех документов (web-страниц), к которым привязана данная таблица стилей. Но для этого необходимо подготовить код страницы соответствующим образом, т.е. убрать из кода страницы все теги с их параметрами определяющие внешний вид текста, рамки, вставки картинок и т.д. после этого этим элементам придается необходимый вид путем прописки соответствущих классов в каскадной таблице стилей. Вот этим мы сейчас и займемся.

В прошлых уроках по созданию сайта на HTML мы остановились с Вами на создании простого сайта посвященного автомобильной тематике . Сейчас мы его возьмем за основу и будем изменять дизайн этого сайта с помощью CSS и одновременно на практике будем учиться применять CSS.

В корневой папке (где лежат все файлы Вашего сайта) создаём файлик style.css (пока еще пустой). Создается такой файл, простым переименованием текстового файла, т.е. создаем текстовый документ с расширением .txt далее Переименовать и даёте новое имя и расширение, получается style.css .

В файле style.css и будут прописаны все правила по форматированию текста и элементов web-страницы – это и есть файл каскадной таблицы стилей.

Чтобы привязать данный файл стилей к конкретному web-странице (html документу), в этом документе между тегами <head> </head> прописывается вот такой код:

<link rel=stylesheet type=”text/css” href=”style.css”>

Далее берем исходный код документа и “очищаем” его (убираем теги форматирования) в результате получаем следующий листинг:

Листинг 1.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″>
<title>Автомобили со всего мира</title>
<meta name=”keywords” content=”автомобили, легковые, гараж, автопутешествия, гараж “>
<meta name=”description” content=”все что вы хотите знать про современные автомобили”>

<link rel=stylesheet type=”text/css” href=”style.css”>

</head>

<body>

<table align=”center” border=”3″ width=”780px”>
<tr>
<td><img src=”header.jpg” width=”780″ height=”120″></td>
</tr>
<tr>
<td>

<table align=”center” border=”0″  width=”780″ bgcolor=”#ffffff” CELLPADDING=”5″>
<tr>
<td width=”180″ valign=”top”>
<p>Mercedes</p>
<p><a href=”bmw.php”>БМВ</a></p>
<p><a href=”audi.php”>Ауди</a></p>
<p><a href=”toyota.php”>Тойота</a></p>
<p><a href=”reno.php”>Рено</a></p>

</td>

<td width=”575″ valign=”top”>

<h2 align=”center”>Обзор автомобилей Mercedes 2008 года.</h2>

<p align=”justify”>Наш сайт посвящен автомобилям и все что с ними связано. Здесь Вы найдете много полезной и интересной информации.</p>

<p align=”justify”>Нынешний год – пора обновления модельного ряда. Оно продолжится по
меньшей мере до осени, когда на рынок выйдет Mercedes-Benz GLK, новый компактный SUV. Первая жертва: из прайс-листов вычеркнута – модель Sportcoupe 2000 года рождения, с весны его заменит прямой наследник – CLC.</p>

<p align=”center”><img src=”mers1.jpg” width=”400″ height=”209″ hspace=”15″ vspace=”0″></p>

<p align=”justify”>Компактный «спорткар» помимо нового имени получил обновленную внешность и усовершенствованную механику. Он, как и Sportcoupe, создан на базе седана С-класса прошлого поколения. Производиться CLC будет на том же бразильском заводе, и цена, как у предшественника, будет довольно привлекательной – порядка 28 000 евро.</p>

<p align=”justify”>Переходя от Sportcoupe к CLC, мерседесовские инженеры
усовершенствовали и заменили более 1100 элементов. Из значимых изменений, которыми может похвастать CLC, отметим более «короткий» руль, значительно облегчающий управление, современную информационную систему, спутниковый навигатор с картами на DVD и на жестком диске. Внешне CLC можно узнать по новому дизайну передней части, который роднит новинку с новым С-классом. Сзади изменился дизайн крышки багажника,
обновилась форма фонарей.</p>

<p align=”center”><img src=”mers2.jpg” width=”395″ height=”235″></p>

<p align=”justify”>Из двигателей CLC предлагает четыре четырехцилиндровых (три бензиновых и дизель) мощностью от 122 до 184 л.с. и две V-образных бензиновых «шестерки» -204 и 272 л.с. Сильнее других изменился 1,8-литровый мотор, который устанавливается на версию CLC 200 Kompressor: его мощность поднялась на 20 сил (до 184 л.с), а расход на 100 км по сравнению с предыдущей модификацией сократился почти на 1 л. Серийно все двигатели агрегатируются с шестиступенчатой «механикой», но на версиях с четырехцилиндровым двигателем можно заказать и пятидиапазонный «автомат». Семидиапазонный 7G-Tronic будет доступен с моторами V6. Оборудование салона достойно великой марки, причем все – от навигатора до систем безопасности – основано исключительно на проверенных решениях. В салонах российских дилеров автомобиль появится во втором полугодии.</p>

<p align=”justify”><a href=”tex_opis.php” target=”blank” title=”Технические характеристики автомобиля”>Технические характеристики автомобиля</a></p>

<p align=”justify”>&nbsp;</p></td>
</tr>
</table>

</td>
</tr>
<tr>
<td><img src=”footer.jpg” width=”780″ height=”20″></td>
</tr>
</table>

</body>
</html>

Вот что у нас получилось после “очистки кода”. Что же изменилось по сравнению с преведущим вариантом? Первое что бросается в глаза: исчезла рамка вокруг сайта, далее изменился цвет шрифта на странице и звет заголовка, изменился цвет поля меню (левой колонки), исчез фоновый цвет (сзади странички). Т.е. мы убрали все теги форматирования из кода.

Таким же образом “очищаем” другие странички нашего тестового сайта, а именно: bmw.html , audi.html , toyota.html , reno.html . И прописываем (привязывает) к этим файлам между тегами <head> </head> нашу таблицу стилей style.css .

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

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

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

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB