|
|
|
|
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> прописывается вот такой код:
Далее берем исходный код документа и "очищаем" его (убираем теги форматирования) в результате получаем следующий листинг: Листинг 1.
Вот что у нас получилось после "очистки кода". Что же изменилось по сравнению с преведущим вариантом? Первое что бросается в глаза: исчезла рамка вокруг сайта, далее изменился цвет шрифта на странице и звет заголовка, изменился цвет поля меню (левой колонки), исчез фоновый цвет (сзади странички). Т.е. мы убрали все теги форматирования из кода. Таким же образом "очищаем" другие странички нашего тестового сайта, а именно: bmw.html , audi.html , toyota.html , reno.html . И прописываем (привязывает) к этим файлам между тегами <head> </head> нашу таблицу стилей style.css . Если Вы пишете код для нового сайта, то естественно ничего очищать не требуется, обычно дизайн (заполнение таблицы стилей) и код разметки HTML-страницы пишется паралельно. Если Вам не понятно что мы сделали, то рекомендую вернуться назад и еще раз внимательно изучить первые уроки по HTML , кроме того открыть в блокноте исходный код и сравнить его с кодом файла, который мы написали в последнем уроке по HTML. На этом подготовка закончена, в следующем уроке начнём заполнять нашу таблицу стилей style.css сейчас она пустая.
Всего Вам доброго.
Читайте так же: Скрипт для сайта: Приветствие + Сегодняшняя дата. Создание электронных книг по Вашим заказам. Почтовая Рассылка - Главный инструмент Интернет-Бизнесмена. Как создать список на HTML странице. Как работать с Локальным сервером (Денвером)? Пошаговый обучающий Видео Курс по созданию сайтов.
Просмотров: 13683 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Дмитрий "На этом подготовка закончена, в следующем уроке начнём заполнять шашу таблицу стилей style.css сейчас она пустая." Исправьте, пожалуйста, опечатку вместо "шашу таблицу" поставьте "нашу таблицу" Комментарии добавил(а): Любовь Петровна Дмитрий, не следует быть слишком жестоким. Андрей Анатольевич - человек очень занятый, он - зам. директора на крупном предприятии. Надо еще сказать ему "спасибо" за то, что он находит время обучать нас, ничего не имея взамен. Подумайте, прежде чем писать. Комментарии добавил(а): АндрейК Спасибо Дмитрий, ошибки исправил. И Вам спасибо Любовь Петровна, только до зам.директора я еще пока увы не дорос. А подробнее про меня здесь: http://www.luksweb.ru/about.php Комментарии добавил(а): Валентина Как переименовать расширение? Комментарии добавил(а): Ирина Васильевна Нажимаю на ссылку Технические характеристики, получается тарабарщина.Сбивает с толку 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> Комментарии добавил(а): Ирина Васильевна Объясните пожалуйста, как должен выглядеть код с php, который Вы даете в этом уроке.При ссылке на tex_opis.php с главной страницы у меня открывается не текст, а код. Комментарии добавил(а): АндрейК Ирина Васильевна если Вас интересует PHP то смотрите уроки по PHP здесь: http://www.luksweb.ru/view_cat.php?cat=12 Добавить Ваш комментарий:
|
Новости сайта Почтовая рассылка Новинка! Как реально заработатьв Интернете? "Обзор видов и способов заработка."
Специальный Отчет:  В подарок всем подписчикам! Полный список наших почтовых рассылок! Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |