Главная
Блог разработчиков 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
При перепечатке ссылка на источник обязательна
Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB