Интересная эта темка, скажу я вам. Мне видимо повезло, в самом начале моего сайтостроения, на форуме мне сказали про эту ошибку. И посоветовали вынести стили html страниц в отдельный файл, потому что страницы все сделаны по своему собственному шаблону и нет смысла браузеру загружать каждый раз лишние байты.
Как создать style css
А вот как это сделать не подсказали. Так что налив большую чашку кофе и набравшись терпения, полез осваивать все ту же Macromedia Dreamweaver, и после всего одной чашки я увидел как все это просто.
Это маленький отрывок кода простой страницы с одним видом шрифта и тремя цветами, а у более сложной структуры такая таблица стилей может вытянуться на полторы- две страницы и файлов стилей может быть несколько.
И что бы она не загружалась при каждом обращении к сайту, нам необходимо вынести таблицу стилей в отдельный файл с расширением CSS. Имя можете дать любое, самое популярное style.css.
Вот собственно и сама инструкция:
У кого страницы уже оформлены как надо, первые два скриншота можете пропустить.
В вышеупомянутой программе нижняя панель управления почти та же, что и в мелкософтовском Wordе, который знают практически все пользователи компьютера. Щелкаем внизу по надписи
Параметры и панель открывается. Видим самую большую кнопку Настройка страницы и жмем на нее. (Все остальное на этой панели — это доводка до ума и просто подстановка уже готовых стилей, вобщем как в Word)
css в macromedia dreamweaver
Итак нажали на кнопку и попали в настройки страницы. Здесь делаем глобальные настройки стилей:
1 Тип основного шрифта, размер шрифта, его цвет
2 Цвет основного фона или ставим картинку фона (если она маленькая, то автоматически замостится на весь экран)
3 Верхние и боковые границы сайта (отступ от края в пикселях)
4 Так же настраиваем вид ссылок или оставляем по умолчанию
5 То же делаем с заголовками — размер, шрифт, цвет. Это то, что выделяется тегами
……., т.е. заголовки, подзаголовки и прочие важные фрагменты.
настройка css
Потом в основной панели рис.1 добавляем еще несколько стилей шрифтов (размер, цвет и т.д.) которые будут в дальнейшем вами использоваться на страницах сайта, вобщем настраиваем страницу полностью до кондиции. А таблица стилей между последним мета-тегом и тегом автоматически дополняется при любом изменении в оформлении.
как вынести style.css
Теперь вырезаем стили полностью после и до . Можете захватить коментарий в конце, не помешает.
вырезаем таблицу стилей
В корневой дирректории создаем новый файл (см. Как создать страницу сайта), сразу переименовываем его например в style с расширением (обязательно!!!) css. Итого получаем style.css, открываем его двойным щелчком и вставляем вырезанное. Закрываем, при запросе на сохранение сохраняем.
В коде страницы остатки стилей и удаляем или сохраняем на отдельном листочке, зачем? Поясню позже…
как вынести style.css
как подключить style.css
Вот и пришла очередь вставить в код каждой страницы ссылку на отдельный файл стилей css перед тегом . Поскольку файл стилей лежит в корне сайта, ссылка будет иметь такой вид:
где href=»style.css» ссылка на файл, а style — имя вашего нового файла(можете задать любое). Если внутренние страницы находятся не в корне сайта а в подпапках, то ссылка будет иметь вид:
где знаками ../ перед style.css обозначаем, что файл находится в корне, относительно страницы.
подключить style.css
Вот пример структуры сайта с корневой папкой (директорией), подпапками (поддиректориями) и вынесенными стилями в отдельный файл CSS, находящемся в корне сайта.
Если вы правильно поставили ссылку на файл стилей, то страница будет сразу же иметь правильно оформленный вид хоть на сервере, хоть на вашем компьютере. После проверки можете загружать все на сервер.
P.S. Теперь о том, что вы сохранили на отдельный листочек! Если вы вдруг через какое то время решили добавить что то в оформление страницы (например новый вид шрифта), удаляем из кода ссылку на файл css, вставляем удаленные ранее «остатки»
и , а между ними то, что вырезали из кода (сами стили). Теперь обновляем оформление страницы (стили в коде меняются автоматически) и проводим процедуру в обратном порядке, т.е. как с самого начала (рис. 3). Это делается для того, что бы потом у вас не было путаницы с оформлением разных страниц. Или же создайте несколько файлов css для разных по назначению страниц.