Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Главная

Рассылка

Магазин

Видео Курсы

Секрет

Услуги

Сегодня: Добавить в Избранное Написать Автору Обмен валют Оплата сервисов

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

Автор: Андрей Краснокутский

Дата: 2009-02-12

Как подготовить 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"> </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 сейчас она пустая.

Всего Вам доброго.

Читайте так же:

Скрипт для сайта: Приветствие + Сегодняшняя дата.

Создание электронных книг по Вашим заказам.

Почтовая Рассылка - Главный инструмент Интернет-Бизнесмена.

Как создать список на HTML странице.

Как работать с Локальным сервером (Денвером)?

Пошаговый обучающий Видео Курс по созданию сайтов.

Просмотров: 14671

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Комментарии добавил(а): Дмитрий
Дата: 2009-11-30

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

Комментарии добавил(а): Любовь Петровна
Дата: 2011-03-31

Дмитрий, не следует быть слишком жестоким. Андрей Анатольевич - человек очень занятый, он - зам. директора на крупном предприятии. Надо еще сказать ему "спасибо" за то, что он находит время обучать нас, ничего не имея взамен. Подумайте, прежде чем писать.

Комментарии добавил(а): АндрейК
Дата: 2011-03-31

Спасибо Дмитрий, ошибки исправил. И Вам спасибо Любовь Петровна, только до зам.директора я еще пока увы не дорос. А подробнее про меня здесь: http://www.luksweb.ru/about.php

Комментарии добавил(а): Валентина
Дата: 2011-10-03

Как переименовать расширение?

Комментарии добавил(а): Ирина Васильевна
Дата: 2013-12-29

Нажимаю на ссылку Технические характеристики, получается тарабарщина.Сбивает с толку php. Перепробовала массу вариантов, вот последний код ссыки, помогите найти ошибку: <html> <head> <link rel=stylesheet type="text/css"href="style.css"> <title>Техническoе описание автомобиля </title> </head> <body><p><h3>Здесь вы найдете все технические описания автомобиля</h3></p></body> <a href="index.php"target="blank"title "Автомобили со всего мира">Главная страница</a> </html>

Комментарии добавил(а): Ирина Васильевна
Дата: 2014-01-02

Объясните пожалуйста, как должен выглядеть код с php, который Вы даете в этом уроке.При ссылке на tex_opis.php с главной страницы у меня открывается не текст, а код.

Комментарии добавил(а): АндрейК
Дата: 2014-01-04

Ирина Васильевна если Вас интересует PHP то смотрите уроки по PHP здесь: http://www.luksweb.ru/view_cat.php?cat=12

Добавить Ваш комментарий:

Разработка полного пакета документов по Охране труда под "КЛЮЧ"
с учетом специфики работы вашей организации. СУОТ.
Дистанционное сопровождение организаций по Охране труда.
Проведение Специальной оценки условий труда (СОУТ).

Новости сайта

12.05.2015
Новая услуга! Изготовление графических элементов. Заказать: иллюстрации для книг, коллажи, подарочные и поздравительные открытки, 3D обложки, фантастические и сюрреалистические работы, зарисовки, баннеры и еще много, многое другое, быстро и дешево.

05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"

Реклама в Почтовых Рассылках.

Почтовая рассылка

Новинка!

Как реально заработать
в Интернете?

"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense

Навигация

Уроки HTML

Инструменты

Шаблоны сайтов

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

Почтовая Рассылка

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я

С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>

Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.

Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты

Проверить аттестат

Проверено Z-PAYMENT

Принимаем Z-PAYMENT

www.megastock.ru

HTML | CSS | Статьи | Инструменты | Шаблоны | Книги | Украшения | Сайт | Заработок | Обман
PHP | Услуги | Скрипты | Рассылка | SEO | jQuery | СОУТ | Online | Секрет| Написать Автору

Разрешается полное или частичное копирование материалов сайта с обязательным
указанием ссылки на автора материала и источник - www.LuksWeb.ru

Copyright Андрей Краснокутский © 2008 - 2018