Nutella [faiko]

Поделиться12012-07-31 19:35:54

Автор: faiko
Зарегистрирован: 2012-06-01
Приглашений: 0
Сообщений: 1347
Уважение: +89
Позитив: +227
Провел на форуме:
15 дней 16 часов
Последний визит:
2019-03-09 11:56:17

Здравствуй, Лёля!
Спасибо, что записалась ко мне на обучение. Несколько вопросов:
1) Есть опыт работы с ксс/хтмл?
2) Если есть, то с чем ты работала?
3) Почему выбор учителя остановился на мне?
4) Есть ли какие-либо пожелания или предпочтения к обучению?
5) С чего начнем (хтмл, ксс)?
И на заметку: обучение продлится не очень долго. Я предпочитаю не зацикливаться на чем-то одном. Пара таблиц, пара блоков с настройками, около трех дизайнов - и гуляй.

0

Поделиться22012-07-31 20:10:09

Автор: Nutella
Ты знаешь, что хочешь в этой жизни.
Зарегистрирован: 2012-07-31
Приглашений: 0
Сообщений: 16
Уважение: +0
Позитив: +0
Пол: Женский
Провел на форуме:
8 часов 33 минуты
Последний визит:
2012-08-23 13:27:36

faiko
Доброго вечера.)))
1.) Ничтожный. в хтмл больно не совалась.
2.) Я так - могу шапку поменять и все. т.т
3.) Дизайны очень понравились. *_*
4.) Да нет вроде.
5.) ксс.

0

Поделиться32012-07-31 21:50:40

Автор: faiko
Зарегистрирован: 2012-06-01
Приглашений: 0
Сообщений: 1347
Уважение: +89
Позитив: +227
Провел на форуме:
15 дней 16 часов
Последний визит:
2019-03-09 11:56:17

CSS. Ок.
Тогда для начала теория:
Как сделать дизайн для форума или сайта?
CSS. Свойста текста
Делаем свой дизайн [супернатурал]
Скругленные края и тень для блоков.

Короткий урок от меня

Любой код CSS состоит из трёх частей: селектор, параметр и аргумент.
#селектор {параметр: аргумент}
#селектор - это название элемента, который мы меняем в дизайне. Например: когда на форум в поле "Объявление" в администрировании мы что-то ставим и нажимаем "Показать объявление", на главной странице под юзер-ссылками появляется наш контент, а над ним слово "Объявление". Селектор этого самого слова выглядит так: #pun-announcement h2. Селектор всего блока объявления выглядит так: #pun-announcement .container и так далее...
параметр: - это то, что мы собираемся менять в нашем элементе. Это может быть цвет, шрифт, фон, выравнивание, границы и так далее.
аргумент - это значение параметра. Ты знаешь, как я хреново объясняю, поэтому сразу пример: у параметра шрифта аргумент будет заключаться в названии шрифта.
Конкретный пример:
#pun-announcement h2 {text-align: center;
text-transform: uppercase;
font-family: Arial;
font-size: 0.9em}
После каждого значения, кроме последнего, должна стоять точка с запятой, иначе код не будет работать.
text-align: center; - выравнивает заголовок "Объявление" по центру.
text-transform: uppercase; - делает все буквы заглавными.
font-family: Arial; - делает текст шрифтом Arial.
font-size: 0.9em; - делает текст уменьшенным, как 8px в форме ответа.
Можно придавать одни и те же параметры для нескольких элементов. Для этого достаточно записать селекторы через запятую.

0

Поделиться42012-08-01 10:35:37

Автор: Nutella
Ты знаешь, что хочешь в этой жизни.
Зарегистрирован: 2012-07-31
Приглашений: 0
Сообщений: 16
Уважение: +0
Позитив: +0
Пол: Женский
Провел на форуме:
8 часов 33 минуты
Последний визит:
2012-08-23 13:27:36

Прочитала, попыталась понять, создала сайт - ничего не вышло. х.х

0

Поделиться52012-08-01 12:51:54

Автор: faiko
Зарегистрирован: 2012-06-01
Приглашений: 0
Сообщений: 1347
Уважение: +89
Позитив: +227
Провел на форуме:
15 дней 16 часов
Последний визит:
2019-03-09 11:56:17

Nutella написал(а):

создала сайт - ничего не вышло. х.х

Работать мы пока будем с форумами, а не с сайтами.
Теперь применим теорию на практике. Создай div-блок (код пока вставь в объявление):

<div id="nutella">Произвольный контент. Здесь должно быть много текста, чтобы появилась прокрутка.</div>

nutella - селектор твоего блока. С его помощью можно будет задать стиль блоку через CSS.
Сделай оформление по эскизу:

Если что-то не понятно - тыкай меня или гугл. Есть еще раздел полезных статей.

0

Поделиться62012-08-01 19:41:06

Автор: Nutella
Ты знаешь, что хочешь в этой жизни.
Зарегистрирован: 2012-07-31
Приглашений: 0
Сообщений: 16
Уважение: +0
Позитив: +0
Пол: Женский
Провел на форуме:
8 часов 33 минуты
Последний визит:
2012-08-23 13:27:36

faiko
А если я скажу, что не понятно ничего - тапком не получу? хДДД

0

Поделиться72012-08-06 02:53:17

Автор: faiko
Зарегистрирован: 2012-06-01
Приглашений: 0
Сообщений: 1347
Уважение: +89
Позитив: +227
Провел на форуме:
15 дней 16 часов
Последний визит:
2019-03-09 11:56:17

Nutella
Ну, как же. Помнишь в моем уроке было это:

#селектор {параметр: аргумент}

nutella - это селектор. Подставляешь его, получаешь следующее:

#nutella {параметр: аргумент}

Ставишь это в хтмл-верх с тегами стиля:

<style>#nutella {параметр: аргумент}</style>

Вот это ставишь пока в Администрирование - Настройки - Объявление:

<div id="nutella">Произвольный контент. Здесь должно быть много текста, чтобы появилась прокрутка.</div>

Теперь у тебя в объявлении стоит блок, а в хтмл-верху - его оформление, которое нужно сделать таким же, как и на эскизе.
Чтобы добавить блоку фон, вместо "параметр" прописываешь "background-color", а вместо значение - цвет фона. Это может быть слово (как в форме ответа, например, "red", "blue" и другие) либо шестнадцатеричный код цвета (в фотошопе, например, при выборе цвета внизу есть маленькое окошко с шестью буквами/цифрами - это и есть код цвета). Последний прописывается с решеткой перед ним. То есть, фон для блока при помощи ксс будет выглядеть так: