Текущее время: 29 мар 2024, 01:22

Часовой пояс: UTC + 3 часа [ Летнее время ]


Правила форума


Пожалуйста, прежде чем задавать вопрос, воспользуйтесь поиском, возможно ответ уже существует!



Начать новую тему Эта тема закрыта, вы не можете редактировать и оставлять сообщения в ней.  [ Сообщений: 12 ]  На страницу 1, 2  След.
Автор Сообщение
СообщениеДобавлено: 10 сен 2011, 23:33 
Не в сети
Аватара пользователя

Зарегистрирован: 28 янв 2011, 01:26
Сообщения: 834
Прошлая моя тема с весьма похожей тематикой, общими усилиями была превращена во флудилку. Надеюсь, судьба этой темы будет другой. Коллеги, убедительная просьба, писать в эту тему только в исключительных случаях, так как она носит общий информационный характер.

Итак, Вы создали сайт. Перед Вами - базовый шаблон, с ознакомительной текстовой версткой. Вы не поверите, но с помощью CSS-редактора, имеющегося в Вашей админке Вы можете преобразить свой сайт до неузнаваемости. По сути, ограничения здесь задаются только Вашей фантазией. Поэтому, не спешите грустить, если дизайн сайта на первых порах несколько не удовлетворяет Ваши пожелания.
Но что же делать, если Вы - новочок, только что создавший сайт, который только начинает осваивать веб-мастеринг? Откуда взять такие обширные знания CSS? И как вообще все это делать?
Не спешите падать духом, или бежать в ближайший книжный магазин, для того, чтобы оставить там кругленькую сумму. Изучить CSS можно и более простым способом!

1. Загружаем себе свежую версию браузера, для того, чтобы Вы имели возможность воспользоваться одной весьма полезной опцией. Насчет Internet Explorer - не знаю. Я использую Opera версии 11.50, и Google Chrome (версию не помню, но скачаете последнюю - не ошибетесь).
2. Открываете в браузере свой сайт. Не админку, а именно страничку. Далее, кликаете правой кнопкой мыши по элементу, название которого Вам нужно узнать. После этого, в открывшемся контекстном меню, вам необходимо выбрать опцию "Проинспектировать элемент", если Вы работаете в Opera, и "Просмотр кода элемента", если Ваш браузер - Google Chrome.
3. Перед вами открывается окошко, заполненное непонятными и странными символами. Поздравляю! Это - CSS-структура Вашего сайта! Если Вы наведете мышку на любую строчку кода, то на сайте моментально выделится элемент, к которому относится код. Таким образом, Вы можете самостоятельно узнавать любые интересующие Вас названия элементов, и далее изменять их.

Продолжение следует...

_________________
Я совершенно трезв.


Последний раз редактировалось f-master 11 сен 2011, 02:24, всего редактировалось 1 раз.

Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 11 сен 2011, 00:20 
Не в сети
Аватара пользователя

Зарегистрирован: 28 янв 2011, 01:26
Сообщения: 834
Что такое СSS, и что представляет собой CSS-редактор?

CSS (Cascading Style Sheets) - с английского языка переводится как "Каскадные таблицы стилей". Об этом языке можно написать очень много, но лучше Википедии я все равно не напишу. Поэтому, буду лаконичен.
CSS - это язык, позволяющий менять внешний вид (оформление) любых элементов, из которых состоит сайт. По умолчанию, Ваш сайт имеет стандартный набор CSS-элементов, который Вы не можете изменить. То есть, убрать старый, или добавить новый элемент Вы не сможете. Однако, в Ваших силах скрыть любой из существующих элементов, или изменить его так, как Вам заблагорассудится.
Поскольку доступа к корневому каталогу сайта у нас с Вами нет, нам предоставили альтернативный способ редактирования CSS. Редактор CSS, расположенный в Вашей админке способен наложить новый эффект, поверх старого (стандартного). Это значит, что прописывая код в CSS-редакторе Вы как бы накладываете новый слой на элемент, поверх того, который установлен по умолчанию.
Именно из за этого, порой случется такой эффект как поздняя загрузка заданных настроек. То есть, Ваш браузер предварительно грузит настройки CSS по умолчанию (стандартные), и только потом - Ваши. С этим пока ничего не поделать, но как правило, старый слой скрывается в течении одной секунды.

Продолжение следует...

_________________
Я совершенно трезв.


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 11 сен 2011, 01:02 
Не в сети
Аватара пользователя

Зарегистрирован: 28 янв 2011, 01:26
Сообщения: 834
Как выглядит CSS-код?

Код:
body{background: #E8E8E8}

Перед Вами простейший пример CSS-кода. Приведенный код изменяет цвет заднего фона вашего сайта, и вместо стандартного он станет серым. Код имеет следующую структуру:

Цитата:
селектор{свойство: значение}

Селектор - это, если выражаться грубо, название элемента. То есть, в данном случае селектором является body. Body - это значит, что последующие команды, взятые в фигурные скобки будут относиться исключительно к общему фону сайта.
Далее скобки гостеприимно открываются, и мы видим свойство. В свойстве у нас стоит почему-то background. Это значит, что команда принадлежит цвету фона.
Наконец, все дороги проложены, и теперь наш сайт точно будет знать, что требуется произвести изменения с цветом общего (заднего) фона сайта. Теперь, мы можем установить новое, свое значение. И мы приписываем #E8E8E8, после чего закрываем фигурные скобки. Это значит, что мы задали общему (заднему) фону сайта новый цвет.

Но мы можем сделать и по-другому. В одном коде можно задать значения нескольких свойств к одному селектору. Например:

Код:
body{
background: url(ссылка_на_картинку);
background-repeat: no-repeat;
background-attachment: fixed ;
}

В этом коде мы осуществили сразу несколько целей. Первое - мы задали элементу (в данном случае снова общему фону сайта) цвет, но заменили его картинкой; второе - указали отсутствие необходимости повторения фона (то есть, слишком маленькая картинка не будет повторяться, если ее размера не хватит для заполнения всего фона); третье - дали команду закрепить фон на месте (то есть, прокручивая страничку мы не сможем прокрутить вместе с ней задний фон, и он останется неподвижным).

Продолжение следует...

_________________
Я совершенно трезв.


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 11 сен 2011, 01:20 
Не в сети
Аватара пользователя

Зарегистрирован: 28 янв 2011, 01:26
Сообщения: 834
Возможные сложности, с эффектами от прописанных CSS-кодов.

Какое-то время назад, мне очень сильно хотелось найти где-нибудь все-все-все CSS-коды, работающие на сайтах Okis, и написать в одной теме. Но когда я попробовал начать осуществлять свой замысел, то столкнулся с проблемой: один и тот же код на разных шаблонах может давать разный результат. То есть, попросту говоря, шаблоны друг другу не идентичны. Поэтому, на мой взгляд оптимальнее всего подбирать коды индивидуально (метод я предложил в первом посте этой темы). И все же, я попробую написать несколько популярных кодов, рискнув предположить, что они сработают у всех.

Код:
{visibility:hidden}

Прописав это к какому-либо селектору, Вы получите следующий эффект: элемент скроется, но его место останется нетронутым.

Код:
{display:none}

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

Код:
{background: white}

Это - изменение цвета элемента. Вместо white Вы можете вписать в код любой другой цвет, или написать его в HEX (код #FFFFFF - если белый).

Кстати, если Вам нужно правильно подобрать цвет, но Вы не знаете как правильно его написать - таблицу HTML-кодов цветов можно посмотреть здесь: http://stm.dp.ua/web-design/color-html.php.

Также, некоторые полезные CSS-коды Вы возможно найдете тут: http://forum.okis.ru/viewtopic.php?f=10&t=1403 (лично знаком с автором темы :) ).

Продолжение следует...

_________________
Я совершенно трезв.


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 11 сен 2011, 02:18 
Не в сети
Аватара пользователя

Зарегистрирован: 28 янв 2011, 01:26
Сообщения: 834
Ну вот. Основная часть того, что было задумано в этой теме - осуществлена. На авторские права не претендую, т.к. все, изложенное выше было мной где-нибудь прочитано, услышано, увидено... Большую часть информации я почерпнул именно с этого форума, а эта тема - просто попытка объединить все в более, или менее комфортный вариант поиска. Если кому-то есть что добавить по затронутым выше вопросам, или дополнить мое абстрактное описание - я буду только рад. Отдельное спасибо всем, от кого я почерпнул всю эту информацию (кто знает - тот поймет).

_________________
Я совершенно трезв.


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 11 сен 2011, 10:23 
Не в сети
Аватара пользователя

Зарегистрирован: 29 окт 2010, 04:13
Сообщения: 4406
Спасибо большое за тему. Закрепил ее.

_________________
Уроки и полезные советы про okis


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 02 ноя 2011, 22:36 
Не в сети
Аватара пользователя

Зарегистрирован: 28 янв 2011, 01:26
Сообщения: 834
Fotomaster писал(а):
Коллеги, убедительная просьба, писать в эту тему только в исключительных случаях, так как она носит общий информационный характер.

Ребята, ну ведь попросил - не писать в эту тему без исключительных поводов. Ведь вопрос - всегда можно задать в своей, собственной теме, здесь же - информация. Сейчас начнем все это тут обсуждать - получится двести страниц. Потом же, сами там ответ найти и не сможете.

P.S. Теперь, чтобы снова написать что-то полезное - мне придется создавать новую тему. И наверняка, с ней произойдет тоже самое. А так - было бы все в одной теме, и "по полочкам"...

_________________
Я совершенно трезв.


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 02 ноя 2011, 23:36 
Не в сети

Зарегистрирован: 29 окт 2010, 11:03
Сообщения: 3699
Fotomaster писал(а):
P.S. Теперь, чтобы снова написать что-то полезное - мне придется создавать новую тему. И наверняка, с ней произойдет тоже самое. А так - было бы все в одной теме, и "по полочкам"...


Не придётся. Сейчас почищу эту темку и всё будет ок. Ну, до первого пользователя. :arrow:

_________________
Заработок на сайте


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 03 ноя 2011, 00:15 
Не в сети
Аватара пользователя

Зарегистрирован: 06 ноя 2010, 16:46
Сообщения: 144
Предлагаю сделать Fotomastera модератором этой темы и огранить права написания в этой теме простым пользователям :geek:

_________________
Да не оскверню я комп свой присутствием на нём лицензионного софта да отсохнут руки мои если я нарушу данную клятву Аминь


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 01 мар 2012, 10:05 
Не в сети

Зарегистрирован: 01 мар 2012, 10:00
Сообщения: 7
Полностью следовал инструкции,но изменений никаких,код которы написан так и надо вставлять(только ссылку вставить)? :cry:


Вернуться к началу
 Профиль  
 
Показать сообщения за:  Поле сортировки  
Начать новую тему Эта тема закрыта, вы не можете редактировать и оставлять сообщения в ней.  [ Сообщений: 12 ]  На страницу 1, 2  След.

Часовой пояс: UTC + 3 часа [ Летнее время ]


Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  
cron