Меню сайта
Категории сайта
Мини-чат
Наш опрос
Слушаете ли Вы на ходу MP3-плеер?
Всего ответов: 999
Облако тегов
Статистика
Онлайн всего: 3
Гостей: 3
Пользователей: 0


Нас посетили:
Мини-профиль
Поиск
Календарь
«  Март 2009  »
Пн Вт Ср Чт Пт Сб Вс
      1
2345678
9101112131415
16171819202122
23242526272829
3031
Статистика
Архив
Реклама
Узнай айпи
Главная » 2009 » Март » 9 » Web-master » CSS: небольшой мануальчик для начинающих
CSS: небольшой мануальчик для начинающих
Вы пришли к нам на портал что бы скачать\посмотреть CSS: небольшой мануальчик для начинающих, если возникнут вопросы по данному файлу CSS: небольшой мануальчик для начинающих, вы всегда можете задать свой вопрос на нашем форуме.
С уважением, администрация isucoz.com.

Скачать CSS: небольшой мануальчик для начинающих

Для примера буду брать таблицу стилей от дизайна #981. Вот так выглядит весь шаблон. В другом шаблоне могут быть изменения...

Пожалуй, начнем;)

Заходим в свою панель управления сайтом. Далее идем в Управление дизайном - Таблица стилей (CSS). Теперь вы зашли в саму таблицу, и там много не понятных кодов. Далее вы узнаете, что они делают.

/* General Style */

В ней расположены все коды, что отвечают за сам каркас шаблона, он
отвечает за отображение таблиц, тип и цвет шрифта и ссылок и прочих
мелочей.

/* Menus */

Здесь можно отредактировать какой рисунок будет перед ссылок в главном меню своего сайта, а также его отступы и многое другое.

/* Main Menu */

Практически тоже самое, что и предыдущий, но добавляются цвет ссылок
и тип текста. Если вы немного понимаете css, на уровне новичка, то
сразу должны увидеть.

/* Module Part Menu */

Отвечает за блок новости сайта, как вы уже видели на многих сайтах.
Можно заменить цвет ссылок, и рисунок возле названия категории.

/* Entries Style */

Регулирует блок вид материалов в новостях, и всех остальных
модулях. Можно заменить размер, тип, цвет шрифта, добавить фон блока, и
все что тебе захочется.

/* Entry Manage Table */

Здесь я никогда ничего не меняю, не видел за что он отвечает. Можете его не редактировать.

/* Comments Style */

По названию можно понять, что отвечает за отображение вид комментариев, и мини-чата. можно изменить фон, цвет текста.

/* Comments Form Style */

Отвечает за саму таблицу комментариев. Также можно добавить фон и сменить границы самой таблицы, их цвет и размер.

/* News/Blog Archive Menu */

Буквально вчера разобрался за что отвечает эта часть таблицы. после
обновления системы, можно добавить блок "Архив материалов", после чего
будет доступен блок, с месяцами обновлений на сайте. Пример на главной
моего блога.

/* News/Blog Archive Style */

Этот не знаю, не видел его в рабочем состоянии, и нигде в коде у меня он не использовался.

/* News/Blog Calendar Style */

Отвечает за календарь новостей, блога... можно сменить полностью вид календаря до мельчайших подробностей.

/* Poll styles */

Регулирует отображение, функции "опрос" на сайте.

/* User Group Marks */

Здесь можно изменить цвет группы пользователей. Поставить дополнительные иконки.

/* Other Styles */

Без комментариев...

Осталась часть, которая отвечает за отображение форума. Начинается она с такого текста:

/* ===== forum Start ===== */

/* General forum Table View */

Регулирует вид блока форума.

Тут
начинается самый сложный момент таблицы. Много блоков и каждый нужно
редактировать отдельно. Рассказать об этом я не смогу, надо вам
научится самому, узнать, где что и тд... Я вам лишь посоветую.
"Если
вы хотите создать свой шаблон, то выбирайте стандартную таблицу css,
которая подходит по цветовой гамме, вам меньше путаться придется. И
быстрее вы его создадите."

и ещё одна имага:

Теперь о том как найти и отредактировать класс в CSS (например цвет нужно поменять)

Метод 1-й - от frozen

1) Открываете Вид-Просмотр ХТМЛ кода нужной страницы.
2) Находите в тексте объект, параметры которого требуется изменить, и смотрите какой у него класс.
3) Затем ищите этот класс в таблице стилей css.
4) И меняете как нужно параметры.

Если отдельного класса нет, то добавляете его в шаблон (через Панель управления), а в таблице стилей css добавляете с нужными параметрами.

Метод 2-й - от booroondook

1) Открываете в браузере нужную страницу сайта.
2) Сохраняете в браузере эту страницу в виде HTML-файла. Например, в IE выполняем команду "Файл - Сохранить как..." и указываем в опциях вариант "Web-страница полностью" - это вызовет также сопутствующее сохранение CSS-файла и ссылку на него в сохраненном HTML-файле.
3) Открываем сохраненный HTML-файл в Frontpage, переходим в режим "Split" (т.е. отображение в нижней части окна дизайна страницы, а в верхнем - исходного кода).
4) В полуокне дизайна становимся мышкой на нужный нам элемент - при этом в полуокне исходного кода курсор автоматически встанет в соответствующее место кода, а на панели тегов высветится соответствующий класс. При желании можно нажать на этот высвеченный класс - тогда в обоих полуокнах выделятся соответствующие участки.
5) Класс нам известен - теперь можно найти его в локальном CSS-файле (см. п.2 - файл был сохранен) и изменить нужным образом.
6) Возвращаемся в Frontpage, нажимаем там клавишу F5 (обновить представление) и сразу же видим и оцениваем изменения.

Если утомительно искать нужный класс в CSS, то есть

Метод 3-й - от Кински

1. Копируем название класса (с точкой или без).
2. Открываем таблицу стилей CSS
3. Вызываем окно поиска сочетанием клавиш ctrl+F
4. Вставляемый нужный класс в строку поиска
5. Нажимаем поиск и смотрим результат

В 9.01 Опере просмотр кода сделан подсвечивающимся. Текст чёрный, код синий, комментарии зелёные и скрипты коричневые. Очень удобно.

Пример:
Очень часто хотят поменять размер шрифта в сообщениях на форуме. Для этого откроем любую тему на форуме и скопируем кусочек текста. Открываем Просмотр ХТМЛ-кода и ищем этот кусочек. Затем смотрим какой у него класс - у текста сообщений class="posttdmessage".

Открываем таблицу стилей форума и находим в разделе /* Posts View */ класс posttdmessage.

.posttdmessage {padding:5px;font-size:8pt;}

Мы видим, что задан только отступ и размер шрифта. Мы можем поменять размер и добавить цвет. В итоге этот класс будет выглядеть как:

.posttdmessage {padding:5px;font-size:10pt;color:#CCCCCC;}

Цвет взят условно.

Надеюсь некоторым поможет эта темка, и будет меньше вопросов по CSS если будет надо, прочитаете))


У вас есть сайт, но ты незнаешь какой у тебя тИЦ и ПР? Будь в курсе событий, поставь счетчик тИЦ и ПР на свой сайт! Счетчик тИЦ и ПР.
Добавил: iron_cam | Комментариев: 3 | Просмотров: 1315 | Добавлено: 09-Мар-2009

0  
3 Naruto_kun   (20-Мар-2009 02:44:14) [Материал]
когдато помогло но теперь знаю такшто неочем буспокоится biggrin
0  
2 Ponto_Cotton   (10-Мар-2009 17:37:19) [Материал]
Ponto_CottonСпс! помогло)) cool
0  
1 AlexV   (09-Мар-2009 18:51:19) [Материал]
AlexVооо спасибо biggrin biggrin biggrin
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]