Создание HTML-сайта
Таблица стилей CSS
Прошлое занятие мы закончили созданием основных стилей для каркаса сайта. Сейчас все созданные нами стили находятся между тегами style в коде страницы. Это довольно неудобно. Представьте себе сайт, состоящий из сотен страниц, в каждой из которых прописаны стили как у нас. Представили? А теперь попробуйте представить, сколько у вас уйдет времени на то, чтобы изменить какой-нибудь элемент дизайна на всем сайте. Это же надо зайти на каждую страницу, найти нужный код, изменить его, сохранить, и посмотреть в браузере, как все получилось. Муторная работа! Чтобы избавить нас от нее, умные люди придумали способ сохранять все стили в отдельном файле, который назвали таблицей стилей. Эта таблица присоединяется к каждой странице сайта специальной ссылкой и при изменении любого правила CSS в ней, это правило меняется сразу на всем сайте.
Давайте и мы не будем отставать от передовой web-общественности и создадим свою таблицу стилей. Для этого нужно открыть свой редактор Dreamweaver CS3 и на стартовой странице и выбрать «CSS» в разделе «Создать».
В главном окне программы Dreamweaver CS3 откроется файл под названием «Безымянный-1» с единственной строчкой:«/* CSS Document */». Давайте сразу его переименуем. Для этого нужно кликнуть по названию файла правой кнопкой мыши и выбрать из контекстного меню «Сохранить как…». Внизу открывшегося окна пропишите:
Если прописали имя файла и его тип, смело нажимайте «Сохранить». В правом окне программы, где отображены все файлы вашего сайта, должен появиться значок «style.css». Появился – значит, вы все сделали правильно.
Далее, нам нужно присоединить нашу таблицу стилей к индексному файлу. В программе Dreamweaver сделать это очень просто. Открывайте в главном окне файл «index.html» во вкладке «Проект», в нижнем окне программы«Свойства» найдите окошко «Стиль», нажмите стрелочку и в выпавшем меню кликните по «Присоединить таблицу стилей». В открывшемся окошке пропишите имя нашей таблицы стилей. Можно выбрать ее и при помощи кнопки «Обзор».
Нажимайте «ОК». Все, таблица стилей подключена к индексному файлу. Чтобы в этом удостовериться откройте код файла «index.html» и найдите строчку:
Именно с помощью этого выражения таблица стилей присоединяется к странице. Но присоединить таблицу, мало, в нее еще нужно перенести все стили из нашего индексного файла. Предлагаю вам сделать это самим в виде домашнего задания. Для проверки, оставляю вам файл style.css, который получился у меня.
В свою очередь, из файла index.html все стили, которые были перенесены в файл style.css, необходимо убрать. В результате должно получиться примерно так:
И так, на сегодня мы имеем файл «index.html» с каркасом сайта и таблицу стилей, присоединенную к нему при помощи ссылки. Когда мы будем создавать остальные страницы нашего сайта из «index.html», то к каждой из них уже будет подключена таблица стилей.